Skip to content
sfn-diagram

Playground

An interactive browser-based editor for exploring ASL definitions and previewing diagrams in real time. Open the live playground → — no install required.

Paste any ASL JSON, switch themes and layouts, and see the SVG diagram update instantly. Switch Mode to Execution overlay to paste an execution history alongside the definition and watch the run’s path light up.

Running it locally

Section titled “Running it locally”

The playground is part of the documentation site, so it runs with the site’s dev server:

Terminal window
pnpm install
pnpm run build          # build the library the playground imports
pnpm --filter sfn-diagram-site dev

The editor is then served at /playground. Its source lives in site/src/components/playground/.