Code Editor
CodeMirror playground with sample presets, config editor and live inspection
This workspace demonstrates interactive code editing using CodeMirror: load reusable snippets, switch languages, sync companion config, render live previews for HTML samples, and inspect or validate JSON structures.
Dual CodeMirror
editors
HTML and JSON
samples
Live preview frame
JSON inspection
Export and reset
flows
Sample Library
Choose an interactive preset and load it into one or both editors
Selected Template
No template selected
Primary Snapshot
Waiting for code
Secondary Snapshot
Waiting for config
Primary Playground
Main CodeMirror surface for HTML or structured code samples
Secondary Config Editor
Companion JSON or metadata editor for mock data and settings
Preview and Inspection
Render HTML samples, inspect JSON, or view raw combined output
JSON validation output will appear here.
Execution Controls
Run preview, export content and manage the editor state
Primary Mode
HTML playground
Last Action
Idle
Validation Health
Load or type code to begin