Skip to main content
The Vuemail Editor is a visual editor that you can embed in your Vue app. It’s made specifically for composing Vuemail templates. Using the power of Vuemail, it produces email-ready HTML, and is built on top of TipTap and ProseMirror.

​
Key features

  • Rich text editing — Paragraphs, headings, lists, code blocks, tables, and more
  • Bubble menus — Floating formatting toolbars that appear on text selection
  • Slash commands — Insert content blocks by typing /
  • Multi-column layouts — Two, three, and four-column email layouts
  • Email theming — Built-in themes with customizable CSS properties
  • HTML export — Convert editor content to email-ready HTML and plain text
  • Custom extensions — Create your own email-compatible nodes and marks

​
Architecture

The editor is organized into five entry points, next to the main one, @vuemaildev/editor, which exports the EmailEditor and EditorProvider components:
The editor uses TipTap for Vue under the hood, so TipTap and ProseMirror concepts apply. Extensions are email-aware versions of TipTap nodes and marks that know how to serialize to Vuemail components.

Getting Started

Set up the editor in under 5 minutes.

Bubble Menu

Add floating formatting toolbars.

Slash Commands

Insert content blocks with a command menu.

Email Theming

Apply visual themes to your email output.

Image Upload

Upload images via paste, drop, or slash command.

Styling

Customize the editor’s appearance with CSS.

Email Export

Convert editor content to email-ready HTML.

Custom Extensions

Create your own email-compatible nodes.

​
Examples

Runnable examples are available at vuemail.dev/editor. Each example demonstrates a specific feature in isolation:

Full Email Builder

All features combined — theming, bubble menus, slash commands, and HTML export.

All Examples

Browse the complete set of interactive examples.

​
Known limitations

The editor’s code block extension is built on top of Vuemail’s CodeBlock component, which ships every Prism.js language grammar in a single module. Bundlers can’t tree shake grammars that register themselves, so all of them end up in your app’s bundle whenever the editor is in the module graph.The current escape hatch is to patch your installed copy of @vuemaildev/vuemail, with pnpm patch or patch-package, stripping the grammars you don’t use out of dist/components/code-block/prism.mjs (and prism.cjs if you consume the CJS build) while keeping the top of the file that imports and re-exports Prism itself:
Prism.js still registers markup, css, clike and javascript by default, and the editor lazily loads any other grammar it needs while editing, so the editing experience is unaffected. Keep the grammars for every language you render into emails though, since CodeBlock throws when it is given a language that is not registered.