Editor Examples
Interactive examples showing how to build email editors with @react-email/editor.
One-Line Editor
One-Line Editor — Minimal
One-Line EditorThe simplest setup — one component with everything included.
One-Line Editor — Full Features
One-Line EditorTheme switching, ref methods (export, getJSON), and callbacks — all with a single component.
One-Line Editor — Inspector
One-Line EditorAdd an inspector sidebar alongside the one-line EmailEditor — no manual EditorProvider setup needed.
Getting Started
Intermediate
Custom Bubble Menu
IntermediateBuilding bubble menus from primitives.
Link Editing
IntermediateClick a link to see the link bubble menu. Select text and press Cmd+K to add links.
Column Layouts
IntermediateInsert multi-column layouts using the toolbar buttons.
Buttons
IntermediateClick the button to edit its link via the button bubble menu.
Advanced
Email Theming
AdvancedSwitch between Basic and Minimal themes to see how email styles change.
Email Export
AdvancedEdit content and export it as email-ready HTML using composeReactEmail().
Custom Extensions
AdvancedA custom Callout node created with EmailNode.create — showing how to extend the editor with email-compatible nodes.
Inspector — Defaults
AdvancedZero-config inspector sidebar. All three inspectors render sensible defaults when no children are passed.
Inspector — Composed
AdvancedCherry-pick which sections render, control collapse state, and mix in custom sections alongside built-in ones.
Inspector — Fully Custom
AdvancedBuild the entire inspector UI from scratch using only render-props data and plain HTML.
Full Email Builder
AdvancedAll components combined: bubble menus, slash commands, theming, inspector sidebar, and export.