Live preview
See your page rendered by your own site, updating live as you type, without saving or committing.
Live preview renders the page you're editing through your actual site: its real templates, components, and styles, running your framework's dev server against your current working copy. Edits show up in roughly a frame, before you save and before anything is committed to git.
Open the preview
The page editor has an Edit / Preview toggle in the header. Switch to Preview and the content area is replaced by a full-width live render of the page inside your site.
The preview panel has two controls:
- Reload re-fetches the frame (handy if a change didn't apply, or after a long idle).
- Open in new tab pops the same preview out as a standalone browser tab, useful on a second monitor while you keep editing.
On the first open after an idle period you briefly see a self-refreshing "Starting preview…" screen while the sandbox boots, then the real page appears.
It updates as you type
You don't need to save or publish to see a change. As you edit fields, the working copy is streamed to the running preview (debounced by a fraction of a second) and your framework's hot-module reload updates the frame in place.
This happens whether you're in Preview mode or still in Edit mode with a preview open in a separate tab. So a common workflow is: Edit on one screen, preview popped out on another, both live.
The preview renders your content byte-identical to what Publish would commit. The same serializer produces the preview bytes and the git commit, so what you see is what you'll ship, not an approximation.
It opens on the page you're editing
The preview deep-links to the rendered URL of the page you're on. Edit
src/content/pages/en/contact.md and the preview loads /en/contact/,
not the site root, when your schema declares how content files map to
routes (the collection's previewPath plus the site-level preview
block in .norcube/cms/config.yml).
If no mapping is declared, or it can't be resolved, the preview falls back to the site root. The target is resolved from the committed frontmatter, so typing a new slug into a field doesn't make the preview navigate away mid-edit.
How it works
Each site gets its own on-demand sandbox that clones your repo and runs your dev server. You never provision or manage it:
| Stage | What happens |
|---|---|
| First open | A sandbox spins up, clones your connected repo + branch, installs deps, and starts the dev server. |
| While editing | Working-copy edits stream in and HMR updates the frame. The session is kept warm as you work. |
| Idle | The sandbox suspends automatically. It resumes on your next open with the clone already warm. |
| Long idle | After about a week of inactivity it's torn down entirely, then recreated the next time you open it. |
Access is private to authorised editors: the preview is gated by a short-lived signed token issued to your editor session, and each site's sandbox only accepts its own token. The preview is embedded in the editor as a sandboxed iframe.
Requirements
- The site must be connected to a git repo (there's nothing to render otherwise). If it isn't, the panel says "Connect this site to a git repository to preview it."
- Live preview runs your framework's dev server. It's currently tuned
for Astro (the
npm run dev+ Astro routing convention). Other frameworks may not render or deep-link correctly yet; see below. - Live preview is enabled per environment during rollout. If you see "Live preview isn't enabled for this environment yet," it hasn't been switched on for your workspace.
What's not there yet
- Framework support beyond Astro. The sandbox assumes
npm run devand Astro's route shape. A framework-agnostic runtime (per-framework presets + detection) is the top planned item. - Click-to-edit from the preview. You can't yet click an element in the frame to jump to its field. Editing is schema-driven in the form; the preview is read-only output.
- Seamless reconnect after a long idle. When a suspended sandbox resumes, the live-update channel can need a one-off Reload to reattach.
Where to next
Page editor
The schema-driven content editor — the field form, content blocks, rich text, validation, and the Save vs Publish split.
AI Assistant
A per-page chat copilot that proposes structured edits — set, delete, insert, reorder — that you review on a card and apply to the working copy with one click.