feat(dashboard): live HTML preview in the template editor (#112)#113
Merged
Conversation
The template create and edit pages now render a live preview beside the
HTML editor that updates as you type — no save or test send needed.
{{variable}} placeholders are filled with sample values so the preview
resembles a delivered email; the stored template keeps its raw markup.
Reuses the existing sandboxed-iframe approach (sandbox="allow-same-origin",
no script execution), shared dark-mode style block, and auto-resize. A
shared sample dictionary + style block keep the server-rendered first
paint byte-identical to the client live updates. Also adds `safe` to the
edit-page HTML textarea, closing a pre-existing </textarea> breakout.
Dashboard-only — no API, schema, or env changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a live HTML preview to the dashboard template editor (#112). The template create (
/dashboard/templates) and edit (/dashboard/templates/:id) pages now render a preview beside the HTML textarea that updates as you type — no save or test send needed.{{variable}}placeholders are filled with sample values so the preview resembles a delivered email; the stored template keeps its raw{{...}}markup (substitution is preview-only).Reuses the existing sandboxed-iframe machinery (
HtmlPreview) rather than introducing anything new. Dashboard-only — no API, schema, or env changes.Changes
html-preview.tsx— newrenderPreviewSamples()(pure, exported),LiveHtmlPreviewiframe, andLiveHtmlPreviewScript(debounced textarea→srcdocupdater). Extracted a sharedPREVIEW_STYLE_BLOCK+PREVIEW_SAMPLE_VALUESdict so the server-rendered first paint is byte-identical to the client live updates (no flash, single source of truth). The staticHtmlPreview/HtmlPreviewScript(email/inbound detail) are untouched — the live variant uses a distinctlive-html-preview-frameclass.templates.tsx/template-detail.tsx— HTML field is now a responsive two-pane grid (lg:grid-cols-2, stacks on mobile): editor left, preview right in a card matching the email-detail preview chrome, plus a muted caption. Edit page seeds the preview from the saved HTML. Built entirely from existing dashboard tokens (no new colors/radii/font sizes).sandbox="allow-same-origin"(noallow-scripts) — template<script>never executes. Also addedsafeto the edit-page HTML textarea, closing a pre-existing</textarea>breakout on that field.docs/templates.md(new "Dashboard HTML Preview" section),docs/dashboard.md(route table),CHANGELOG.md([Unreleased]).test/unit/render-preview-samples.test.ts; strengthenedpages-render.test.ts(live preview frame present, saved HTML sample-rendered, sandbox attribute).Environment
Test Plan
bun test) — 392 unit/e2e + 100 integrationbunx tsc --noEmit)bun run lint)bun run format:check)docker compose up) — n/a (no infra change)Related Issues
Closes #112