Live preview & device frames

Render HTML, markdown, and templated files inline. Switch between Code, Split, and Live modes with a click.

Three view modes

The file preview header has three mode buttons:

• Code — Monaco editor only.
• Split — Editor on the left, live preview on the right.
• Live — Preview only.

Modes apply to:

• HTML files
• Markdown files (rendered with the standard markdown subset)
• Templated files (Jinja, Handlebars) — rendered with the project's mock data

For non-renderable files (Python, JS, etc.), only Code mode is available.

Device frames

In Live mode, the top of the preview has device-frame buttons:

Plus controls:

• URL bar — shows the current preview URL. Editable for navigation.
• Reload — re-fetches the page.
• Open in new tab — pop the preview out into a real browser tab.

Click-to-source

In Live mode, clicking any rendered element jumps the editor cursor to the corresponding source line. Powered by template_preview.tag_source_with_lines. Toggle with the magnifying-glass Inspect button in the preview header.

Templated files

When a file uses Jinja-style templating ({{ variable }} etc.), the preview engine renders it with mock data and prepends a banner:

> Rendered with mock data — bound to routes/main.py:home

Click the banner to jump to the route handler.

Console capture

The preview iframe's console.log / warn / error are captured and surfaced in the Console drawer at the bottom of the workspace.

Sandboxing

Previews run in a sandboxed iframe with:

• same-origin only — no external script execution unless allowlisted.
• Strict CSP — no eval, no inline scripts beyond the preview shim.
• X-Frame-Options: SAMEORIGIN — only the workspace can embed the preview.