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, , and buttons resize the preview only. They help eyeball responsive layout but do not emulate every device breakpoint rule — layout slot settings still control true breakpoints.
tablet
desktop
frame
Saved state
All modes share one document. Auto-save runs on edits in Visual and Source. Switch modes freely without losing work.
The Code editor (Source mode) is hidden by default. The visual editor is the supported path — raw MDX is powerful but easy to break a page with.
To show Source in the toolbar:
Open Account → Settings → Workspace (/account/settings/workspace) from the profile menu or the account sidebar
Turn on Code editor under Authoring
This only changes your own workspace — other members choose independently. Organization owners can disable the code editor for everyone under Organization → Features.
Bookmarked ?view=source URLs only open Source when the code editor is enabled for you.
