How the live demo is embedded

Summary

The homepage contains a small, embedded Pathwrite example that runs the core engine directly in the browser (no iframe). It imports @daltonr/pathwrite-core as an ES module from a CDN and creates a PathEngine instance which is driven by a tiny path definition and a rendering loop that updates the DOM from snapshots.

How it runs

1. Import the engine as an ES module, for example using esm.sh:

   import { PathEngine } from 'https://esm.sh/@daltonr/pathwrite-core@0.6.3';

2. Define a small path (steps array) and optionally a sub-path. Steps can include guards (canMoveNext) and conditional skipping (shouldSkip).
3. Create the engine and start it: const engine = new PathEngine(); engine.start(mainPath, {});
4. Subscribe to engine events and call a render() function on state changes. In render we call engine.snapshot() and update the stepper, step label and step content from that snapshot.
5. Wire the UI controls to the engine API: engine.next(), engine.previous(), engine.startSubPath(), engine.cancel(), and engine.setData() for interactive inputs.

Key concepts demonstrated

• Guards: a step can expose canMoveNext to block advancing until the user satisfies a condition.
• Conditional steps: shouldSkip hides steps dynamically and the stepper updates to reflect only the active steps.
• Sub-paths: show how to push a nested path onto the stack, pause the parent, and automatically restore the parent when the sub-path completes or is cancelled.
• Direct engine usage: you don't need to use or build a framework adapter to use Pathwrite — you can work directly with PathEngine in any environment, call its API, and render snapshots into your UI of choice.

Rendering loop

The demo uses a simple declarative render loop:

engine.subscribe(() => render());
function render(){
  const snap = engine.snapshot();
  // build stepper from snap.steps
  // set the body content for current step
  // enable/disable buttons from snap.canMoveNext / snap.isFirstStep
}

This keeps UI logic isolated: the engine manages flow, the page renders snapshots.

Wiring controls

Example bindings:

nextButton.addEventListener('click', () => engine.next());
prevButton.addEventListener('click', () => engine.previous());
chip.addEventListener('click', () => engine.setData('framework','vue'));

Notes & considerations

• CDN vs vendoring: The page imports the engine from esm.sh. For offline stability you can instead vendor the built/dist JS and import it locally.
• Styling: The demo uses the site's CSS variables so it looks native to the site. Embedding inline gives full control of styles and accessibility.
• Accessibility: The demo is a small prototype. For production, add focus management and aria-live regions so screen readers announce step changes.