Preview shows the rendered page read-only. Visual lets you select and edit blocks. Source shows raw MDX. Switch from the toolbar when a page is open.
Preview mode
Preview renders the page as visitors would see it in the canvas — without block selection handles.Use Preview when:
Proofreading layout and typography
Clicking links to test navigation (within preview constraints)
Showing the page to someone beside you
Preview still reflects draft content, not necessarily the live published snapshot.
Visual mode
Visual is the default editing experience for most users.
Click blocks to select
Edit text inline where supported
Drag to reorder
Open Components customize for structured props
Visual changes write to the same MDX document as Source.
Source mode
Source exposes the full MDX document in a code editor.Use Source when:
Pasting MDX from Quasar or external docs
Fixing broken component tags
Editing props without a customize form
Precision find/replace
Syntax errors may break preview until fixed.
Switching modes
Use the toolbar segmented control (Preview / Visual / Source). Mode may sync to the URL so refresh keeps your choice.With no page open, the canvas may show site chrome or an empty state — open a page from Pages first.
Preview device widths
Mobile, tablet, and desktop buttons resize the preview frame only. They help eyeball responsive layout but do not emulate every device breakpoint rule — layout slot settings still control true breakpoints.
Saved state
All modes share one document. Auto-save runs on edits in Visual and Source. Switch modes freely without losing work.
Updated by Quasar 1mo ago