HTML Layouts
Maintain reusable layouts directly in HTML with live previewing and sample-contact testing.
The HTML layout editor is the right tool when you want precise control over markup and preview output.
Use this guide when a layout is maintained as HTML instead of a visual Template Studio record.
Open an HTML layout
Go to Content -> Layouts, then open a layout whose editor type is HTML.
Use Edit Content to open the HTML editor.
What the HTML editor shows
The HTML editor is split into three working areas:
- a sample contact sidebar on the left
- a Monaco-based HTML editor
- a live preview pane rendered in an iframe
This lets you write markup and immediately see how the layout renders.
Use sample contacts while previewing
The sample-contact sidebar is useful when your layout contains dynamic content or personalization.
When you change the selected contact, Leadpush regenerates the preview for that contact so you can inspect the rendered result with real sample data.
How preview generation works
The preview updates as you edit the HTML, and it also refreshes when the selected sample contact changes.
That makes the HTML editor useful for:
- validating layout structure
- checking rendered output before saving
- testing how personalized content behaves
Save the layout
Use the Save button in the top-right corner to persist the current HTML.
Leadpush stores the updated layout body and keeps the preview workflow available while you edit.
When to use HTML instead of Template Studio
Use the HTML editor when:
- you need direct control over the markup
- your layout depends on custom HTML structure
- your team prefers code-based editing and live previewing
Use Template Studio Layouts when the layout is managed in the current visual builder instead.
Best practices
- Use a sample contact before saving if the layout includes dynamic values.
- Preview carefully after structural HTML changes, not just after copy changes.
- Keep reusable images in Assets and shared copy in Snippets instead of hard-coding everything into the layout.
- Save only after the preview matches the intended rendered result.