> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor

> An embeddable visual editor for building Vuemail templates.

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](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/).

## 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:

| Import | Purpose |
| - | - |
| `@vuemaildev/editor/core` | `composeVueEmail` serialization, `useCurrentEditor`, event bus, types |
| `@vuemaildev/editor/extensions` | `StarterKit` and 35+ email-aware extensions |
| `@vuemaildev/editor/ui` | Bubble menus, slash commands, inspector |
| `@vuemaildev/editor/plugins` | Email theming and image upload plugins |
| `@vuemaildev/editor/utils` | Attribute helpers, style utilities |

> [!NOTE]
>
> The editor uses [TipTap](https://tiptap.dev/) for Vue under the hood, so [TipTap](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/) concepts apply.
> Extensions are email-aware versions of TipTap nodes and marks that know how to serialize to Vuemail components.

## Quick links

> **[Getting Started](https://vuemail.dev/docs/editor/getting-started.md)**
>
> Set up the editor in under 5 minutes.

> **[Bubble Menu](https://vuemail.dev/docs/editor/features/bubble-menu.md)**
>
> Add floating formatting toolbars.

> **[Slash Commands](https://vuemail.dev/docs/editor/features/slash-commands.md)**
>
> Insert content blocks with a command menu.

> **[Email Theming](https://vuemail.dev/docs/editor/features/theming.md)**
>
> Apply visual themes to your email output.

> **[Image Upload](https://vuemail.dev/docs/editor/features/image-upload.md)**
>
> Upload images via paste, drop, or slash command.

> **[Styling](https://vuemail.dev/docs/editor/features/styling.md)**
>
> Customize the editor's appearance with CSS.

> **[Email Export](https://vuemail.dev/docs/editor/features/email-export.md)**
>
> Convert editor content to email-ready HTML.

> **[Custom Extensions](https://vuemail.dev/docs/editor/advanced/custom-extensions.md)**
>
> Create your own email-compatible nodes.

## Examples

Runnable examples are available at [vuemail.dev/editor](https://vuemail.dev/editor). Each example demonstrates a specific feature in isolation:

> **[Full Email Builder](https://vuemail.dev/editor/full-email-builder)**
>
> All features combined — theming, bubble menus, slash commands, and HTML export.

> **[All Examples](https://vuemail.dev/editor)**
>
> Browse the complete set of interactive examples.

## Known limitations

> **Prism.js grammars add weight to your bundle**
>
> The editor's code block extension is built on top of Vuemail's
> [`CodeBlock`](https://vuemail.dev/docs/components/code-block) 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`](https://pnpm.io/cli/patch) or
> [`patch-package`](https://www.npmjs.com/package/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:
>
> ```js theme={null}
> import * as PrismImport from "prismjs";
> const Prism = PrismImport.default ?? PrismImport;
> export { Prism };
> ```
>
> 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.