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

# EmailEditor

> Standalone editor component with built-in menus, slash commands, and export helpers.

`EmailEditor` is the highest-level way to embed the Vuemail editor. It creates
the editor, mounts the default editor UI, and exposes an API for exporting HTML,
plain text, and JSON through a template ref and its events.

Use it when you want a batteries-included editor. If you need full control over
the provider, overlays, or extension list, compose the editor from the lower-level
APIs instead, starting with [`EditorProvider`](https://vuemail.dev/docs/editor/getting-started#lower-level-setup).

> [!TIP]
>
> `EmailEditor` works out of the box, but ships unstyled. To style the default
> bubble menus, slash command menu, and inspector, import the default theme
> separately:
>
> ```ts theme={null}
> import '@vuemaildev/editor/themes/default.css';
> ```
>
> See [styling](https://vuemail.dev/docs/editor/features/styling.md) for details on customizing the editor's appearance.

## Import

```ts theme={null}
import '@vuemaildev/editor/themes/default.css';
import { EmailEditor, type EmailEditorRef } from '@vuemaildev/editor';
```

## Signature

```ts theme={null}
const EmailEditor: new () => ComponentPublicInstance<EmailEditorProps> & EmailEditorRef;
```

A Vue component that takes the [props](#props) below, and whose template ref exposes the
[`EmailEditorRef`](#ref-api).

## Default behavior

When rendered without a custom `extensions` prop, `EmailEditor` configures:

* [`StarterKit`](https://vuemail.dev/docs/editor/api-reference/extensions-list)
* `Placeholder`
* [`EmailTheming`](https://vuemail.dev/docs/editor/api-reference/theming-api)
* The default text `BubbleMenu`
* [`BubbleMenu.LinkDefault`](https://vuemail.dev/docs/editor/api-reference/ui/bubble-menu#bubblemenu-linkdefault)
* [`BubbleMenu.ButtonDefault`](https://vuemail.dev/docs/editor/api-reference/ui/bubble-menu#bubblemenu-buttondefault)
* [`BubbleMenu.ImageDefault`](https://vuemail.dev/docs/editor/api-reference/ui/bubble-menu#bubblemenu-imagedefault)
* The [built-in slash command menu](https://vuemail.dev/docs/editor/api-reference/ui/slash-command.md#default-commands)

If [`on-upload-image`](#props) is provided, the image upload extension is
appended automatically.

## Props

**content** `Content`

Initial editor content. Accepts TipTap JSON or an HTML string.

**theme** `EditorThemeInput` (default: 'basic')

Built-in theme preset or custom theme object used by the default
`EmailTheming` extension. Changing it creates the editor again with the new theme.

**editable** `boolean` (default: true)

Toggles read-only mode for the editor content.

**placeholder** `string`

Overrides the default placeholder text. When omitted, paragraphs show
`Press '/' for commands`.

**bubble-menu** `\{ hideWhenActiveNodes?: string[]; hideWhenActiveMarks?: string[] \}`

Configures when the default text bubble menu should stay hidden.

**extensions** `Extensions`

Replaces the default extensions array. Use this when you want more control
over the editor schema or plugin list.

**on-upload-image** `(file: File) =\> Promise\<\{ url: string \}\>`

Enables image upload for paste, drop, and image insertion flows. Resolve with
the final hosted image URL. See [Image Upload](https://vuemail.dev/docs/editor/features/image-upload.md)
for setup patterns and [Image Upload API](https://vuemail.dev/docs/editor/api-reference/image-upload-api.md)
for the lower-level composable, commands, and types.

**class** `string`

Applied to the underlying editor container element.

### bubble-menu options

**hideWhenActiveNodes** `string[]` (default: \['button', 'horizontalRule'])

Prevents the default text bubble menu from appearing when one of these node
types is active.

**hideWhenActiveMarks** `string[]` (default: \['link'])

Prevents the default text bubble menu from appearing when one of these mark
types is active.

## Events

**@update** `(ref: EmailEditorRef) =\> void`

Emitted on every content update. The handler receives the same helper object
exposed through the template ref.

**@ready** `(ref: EmailEditorRef) =\> void`

Emitted once after the editor instance is mounted and ready.

## Slots

**default** `slot`

Additional UI rendered with the editor, once it's created, which can use the editor through
`useCurrentEditor()`. It renders as a sibling of the editor content area, which makes layouts
like split-pane editors and inspector sidebars work naturally.

## Ref API

```ts theme={null}
interface EmailEditorRef {
  getEmail(): Promise<{ html: string; text: string }>;
  getEmailHTML(): Promise<string>;
  getEmailText(): Promise<string>;
  getJSON(): JSONContent;
  readonly editor: Editor | null;
}
```

**getEmail** `() =\> Promise\<\{ html: string; text: string \}\>`

Serializes the current document to email-ready HTML and plain text in one
call.

**getEmailHTML** `() =\> Promise\<string\>`

Returns only the HTML export.

**getEmailText** `() =\> Promise\<string\>`

Returns only the plain text export.

**getJSON** `() =\> JSONContent`

Returns the current TipTap JSON document.

**editor** `Editor | null`

The underlying TipTap editor instance. `null` until the editor is ready.

> [!NOTE]
>
> Before the editor is ready, the export methods resolve to empty output and
> `getJSON()` returns an empty document with `type: 'doc'` and an empty
> `content` array.

## Example

```vue theme={null}
<script setup lang="ts">
import '@vuemaildev/editor/themes/default.css';
import { EmailEditor, type EmailEditorRef } from '@vuemaildev/editor';
import { ref, useTemplateRef } from 'vue';

const emailEditor = useTemplateRef<EmailEditorRef>('email-editor');
const html = ref('');

async function handleExport() {
  if (!emailEditor.value) return;
  html.value = await emailEditor.value.getEmailHTML();
}

function onReady(editorRef: EmailEditorRef) {
  console.log(editorRef.getJSON());
}

function onUpdate(editorRef: EmailEditorRef) {
  console.log(editorRef.editor?.isEmpty);
}
</script>

<template>
  <div>
    <EmailEditor
      ref="email-editor"
      content="<h1>Welcome</h1><p>Edit this email.</p>"
      theme="basic"
      @ready="onReady"
      @update="onUpdate"
    />

    <button type="button" @click="handleExport">Export HTML</button>

    <textarea v-if="html" readonly :value="html" rows="12" />
  </div>
</template>
```

## See also

* [Getting Started](https://vuemail.dev/docs/editor/getting-started.md)
* [BubbleMenu](https://vuemail.dev/docs/editor/api-reference/ui/bubble-menu.md)
* [Inspector](https://vuemail.dev/docs/editor/api-reference/ui/inspector.md)
* [composeVueEmail](https://vuemail.dev/docs/editor/api-reference/compose-vue-email.md)
* [Theming API](https://vuemail.dev/docs/editor/api-reference/theming-api.md)
* [Image Upload API](https://vuemail.dev/docs/editor/api-reference/image-upload-api.md)


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