Skip to content
Caps

enhance/sketch

Functions

Section titled “Functions”

sketch()

Section titled “sketch()”

sketch(root?): () => void

The opt-in pencil layer for server-rendered field-guide pages.

Markup contract, all plain attributes so any host can use it without React:

  • data-sketch-root marks a positioned host; its overlay is drawn inside it.
  • data-sketch="circle" | "underline" marks inline text to annotate.
  • data-sketch-leader-x / data-sketch-leader-y (fractions of the target box) on a note draw a leader from the note to the data-sketch-target inside the same data-sketch-item. The layout decides whether leaders apply by setting --caps-sketch-leader: on on the note.

Strokes use currentColor, so a theme switch recolors them without a redraw. The host receives data-sketch-drawn once annotations exist, which lets Caps hide the static CSS fallbacks they replace.

Parameters

Section titled “Parameters”
root?
Section titled “root?”

ParentNode = document

Returns

Section titled “Returns”

() => void