Preview
Inspect compiled output before you publish so you can catch structural, styling, or validation issues while the edit is still in progress.
Preview is where Template Studio shows the compiled result of the current document instead of the drag-and-drop canvas.
Use it whenever you want to confirm what the current builder state actually produces.
What preview shows
The preview surface includes:
- a rendered
Previewtab - raw
HTML - generated
MJML - serialized
JSON - an issue panel for errors and warnings from the last compile
This makes preview useful for both visual checking and technical troubleshooting.
Preview modes
Preview includes its own desktop and mobile toggle.
Use desktop mode when checking overall composition and section spacing. Switch to mobile when you want to confirm stacking behavior, text readability, and narrower-width rendering before a handoff or save.
Use diagnostics with preview
Preview is also the fastest place to inspect compile results.
If the document has validation issues, the diagnostics panel surfaces errors and warnings alongside the compiled tabs. That gives you one place to review both the output and the problems affecting it.
When to use preview
Use preview when you need to:
- verify rendered output before saving
- inspect raw HTML or MJML
- review JSON serialization
- confirm mobile behavior
- check what validation produced during the last compile
Best practices
- Preview before every publish, especially after structural edits.
- Check both desktop and mobile before handing work to another teammate.
- Use the HTML and MJML tabs when the rendered output alone does not explain a formatting issue.
- Pair preview diagnostics with the Layers panel issue filters when debugging larger documents.