Download Back To CSSScript.Com
A single-page Vanilla JS playground for spotlighted targets, async steps, live state, custom events, keyboard controls, and dynamic DOM behavior.
Start the full route, resume at the async resolver, or drive the active tour from the live inspector.
Live DOM targets used by the workflow
Stable selector target with workflow defaults, overlay padding, and placement fallbacks.
Direct HTMLElement target with `focusTarget()` and an input event that updates step props.
Target interaction stays enabled while the spotlight is active.
The tour clicks the target, waits for a new node, then resolves it in the next step.
The next transition waits for application state, then calls `advance()` from an action.
One action continues, the next returns `false`, and the sentinel never runs.
Pointer and keyboard events are collected through one `onTargetEvent([...])` step.
The popover advance control is hidden. A target event advances through its context.
Context navigation returns here once before the manual route continues.
The first pass returns automatically. A guard prevents a second loop.
A footer-free step pauses briefly, then advances without a click.
The target briefly leaves the DOM and returns in a different lane while the tour waits.
This last step comes from a second workflow and finishes after a namespaced custom event.
Every row maps to a live target or controller interaction above.