Editor Examples
Interactive examples showing how to build email editors with @vuemaildev/editor.
- Standalone editor
Minimal
The simplest setup — one component with everything included.
- Standalone editor
Full Features
Theme switching, ref methods (export, getJSON), and callbacks — all with a single component.
- Standalone editor
Inspector
Add an inspector sidebar alongside the one-line EmailEditor — no manual EditorProvider setup needed.
- Getting started
Basic editor
Minimal setup with StarterKit and no UI overlays.
- Getting started
Bubble menu
Select text to see the default bubble menu with formatting options.
- Getting started
Slash commands
Type / to open the command menu. Includes default commands plus a custom "Greeting" command.
- Intermediate
Custom bubble menu
Building bubble menus from primitives.
- Intermediate
Link editing
Click a link to see the link bubble menu. Select text and press Cmd+K to add links.
- Intermediate
Column layouts
Insert multi-column layouts using the toolbar buttons.
- Intermediate
Buttons
Click the button to edit its link via the button bubble menu.
- Intermediate
Image upload
Upload images via paste, drop, or the slash command — with a stubbed uploader and an error-path toggle.
- Advanced
Email theming
Switch between Basic, Minimal, and Custom themes to see how email styles change.
- Advanced
Custom themes
Define custom themes with createTheme and extendTheme helpers.
- Advanced
Email export
Edit content and export it as email-ready HTML using composeVueEmail().
- Advanced
Custom extensions
A custom Callout node created with EmailNode.create — showing how to extend the editor with email-compatible nodes.
- Advanced
Inspector — defaults
Zero-config inspector sidebar. All three inspectors render sensible defaults when no children are passed.
- Advanced
Inspector — composed
Cherry-pick which sections render, control collapse state, and mix in custom sections alongside built-in ones.
- Advanced
Inspector — fully custom
Build the entire inspector UI from scratch using only scoped slot data and plain HTML.
- Advanced
Full email builder
All components combined: bubble menus, slash commands, theming, inspector sidebar, and export.