/playground is a two-pane editor: a Monaco code editor on the left, a live rendered preview on the right. It's the fastest way to iterate on a snippet — hand-written, or handed off from the Generator via its "Open in Playground" action.

Editing

• HTML / React mode — a segmented control switches the editor's language and the preview's render path. HTML mode loads the real tokens.css/base.css/components.css and renders your markup directly for a pixel-accurate result; React mode transforms your snippet and renders it against a small stub implementation of @operant/ui's components (a structural approximation, not pixel-perfect — see Architecture's "Live preview sandbox" section for why).
• Starter templates — a dropdown loads a known-good snippet to start from instead of a blank editor.
• Copy code copies the current editor contents to the clipboard.

Inspecting the result

• Viewport size toggle — switch the preview between common breakpoints to check the responsive collapse behavior described in Design System §4.3 (nav rail collapse, split-pane stacking, approval bars pinning to the bottom) without resizing your actual browser window.
• Developer console drawer — console.log/warn/error calls made inside the preview iframe are captured over postMessage and surfaced in a drawer beneath the preview, tagged by level, so runtime errors in your snippet don't just disappear into the sandboxed iframe. Render errors (a syntax error, a failed transform) surface as an inline error banner above it.
• A11y audit button — runs an accessibility pass against the rendered preview and reports violations inline, the same category of check Storybook runs automatically per-story via @storybook/addon-a11y — useful for catching missing labels, contrast issues, or other Agent Rules §8 violations before you ship a snippet.

Sharing

Share URL compresses the current editor state (mode, theme, density, code) into the URL hash and copies the link — there's no server-side storage involved, so anyone who opens the link gets exactly what you had open, and nothing is persisted on this site's infrastructure. This is the same mechanism used when the Generator hands a snippet off to the Playground.

Security note

Both the Playground and Generator preview panes render into the same sandboxed <iframe sandbox="allow-scripts"> (deliberately without allow-same-origin), so the iframe has no access to this site's cookies, storage, or DOM — communication happens strictly over postMessage. See Architecture for the full preview sandbox design.