Public demo
Shell · IDE workspace
File tree, editor column, and inspector panel—triple-column builder chrome for developers and designers.
Dense builder surface with syntax placeholder, active file state, and tabbed right rail.
UI showcase
Static composition for reference—swap in generated output when your pipeline is connected. Everything below is local markup only.
Resizable splits and Monaco integration come later—structure is the handoff artifact.
Why this demo works
- Separates navigation, authoring, and metadata without tab overload.
Suggested use cases
- Low-code builders, docs with live preview, internal IDEs
What's included
- Collapsible-style tree with active file
- Editor gutter lines with highlight row
- Inspector tabs and panel body slot
Editable in Frontuna
Three-column CSS grid; collapse to two on tablet if needed.
Use this page as a briefing artifact: copy structure, swap copy, and connect your components—no fake generated code required.
Build notes
- Consider react-resizable-panels for drag handles.