Playground

Annotate the article, change the options and watch the data change. The Code tab shows the annotate() call for the current options. JSON is what instance.export() returns, W3C is the same data as W3C Web Annotations, and Events logs everything the instance emits.

The Highlight API

Most annotation tools wrap highlighted text in extra elements. That works until the page re-renders: a framework that owns the DOM throws the wrappers away, or trips over nodes it didn't create. penciled leaves the page alone and paints highlights with the CSS Custom Highlight API instead.

The browser keeps a registry of named highlights, each a set of ranges. A stylesheet then styles them with the ::highlight() pseudo-element, much like it styles a selection. Nothing is added to the document, so nothing can be thrown away.

Finding the text again after a reload is the harder part. Each annotation stores the quoted text, some context on either side and its position. When the page changes, penciled looks for the quote, compares the context, and only highlights a match it is confident about.

Select text, click highlights, then change the options below.Annotations here are saved under the document id docs-playground.

Appearance

Underline highlights with a note Preview notes on hover Add a custom mint color

Toolbar actions

highlight note copy remove Custom “Ask AI” action

Behavior

Read-only Keyboard shortcutsMax note length

Placement

Clear annotationsReset options

CodeJSONW3CEventsCopy

The instance is also available as window.penciled, so you can call its methods from the browser console.

Note

The theme option applies to the toolbar and note editor. Highlights follow the page’s own color scheme, which you can switch with the toggle in the header. On this site, auto follows that toggle too, with two lines of CSS described in Theming.