React Interactive Demo Sandbox
A live demo with no guidance is a room with no signposts — a visitor pokes one control and leaves. The sandbox adds two things: a short checklist of what's worth trying, and a reset so experimenting carries no risk of ending up somewhere you can't get back from.
- Set the frequency above 1 kHz
- Switch to a square wave
- Enable the output
Installation
Props
| Prop | Type | Description |
|---|---|---|
| title | string | Label in the toolbar |
| steps | SandboxStep[] | { id, label, done } — done from demo state |
| onReset | () => void | Restore the demo to its initial state |
| children | React.ReactNode | The live demo itself |
Steps are read from reality, not scripted
The checklist doesn't run the demo and the demo doesn't call the checklist. Each step's done is a plain boolean the parent computes from the demo's actual state — freq > 1000, wave === "square", output — so a step ticks the instant the condition is true, whether the visitor followed the suggestion or stumbled into it, and un-ticks if they undo it. There is no separate tour state to drift out of sync, because there is no separate tour state.
That makes the pattern trivial to wire to any demo: lift the demo's state, express each guided step as a derived condition, and pass a reset that restores your defaults. The included example is a signal generator — set the frequency, change the waveform, arm the output — with a live scope that only lights up in the accent colour once the output is on, so completing the last step has a visible payoff.
Keep the list to three or four things. It is a nudge toward the good parts, not a form to complete.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.