Admin screen sample

Explain form fields in place

Markers follow inside scroll areas

Dummy content at the top. Scroll down and the button appears.

Dummy content at the bottom.

Works with dynamic SPA elements

Markers follow even when rows are added/removed while help mode is ON.

Reaches modals & Shadow DOM

Author help inline or with rich content

The left button has no config entry — its description comes from data attributes only. The middle shows line breaks in the body; the right uses custom rendering via render.

Focus on reading — no accidental clicks

With help mode OFF the counter increments. While ON you can verify that interactions don't reach the host app.

click: 0
key: 0

Drive it from your app via the API

Try open / close / update from the API and watch each callback fire.

callback log

    Check your config against the live DOM

    diagnose() scans the page right now and reports how each config key maps onto it — including dynamic and Shadow DOM elements a static scan can't see.

    For CI, the help-layer check CLI runs the same audit statically from your source files, and scaffold generates a config stub from your markup.

    Make it match your UI

    Tune behavior with options, and restyle entirely with CSS custom properties (dark mode is built in). Nothing here requires changing your app code.

    Pick a placement, then turn Help mode ON to see where markers and popups anchor. (Host controls are inert while Help mode is ON, so change them first.)