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

# Getting Started

> Set up the email editor in your Vue project in under 5 minutes.

## Prerequisites

> [!NOTE]
>
> The editor requires **Vue 3.4+** and a bundler that supports [package exports](https://nodejs.org/api/packages.html#exports) and CSS imports (Vite, Nuxt, Webpack 5, etc.).
> The editor itself is only created once the component is mounted, in the browser.

## Install

Install the editor and its peer dependencies:

```sh npm theme={null}
npm install @vuemaildev/editor
```

```sh yarn theme={null}
yarn add @vuemaildev/editor
```

```sh pnpm theme={null}
pnpm add @vuemaildev/editor
```

```sh bun theme={null}
bun add @vuemaildev/editor
```

## Quick start

The recommended way to start is with the standalone `EmailEditor` component. It
gives you a working editor with the default bubble menus, slash commands,
theming, and export helpers already wired up:

```vue theme={null}
<script setup lang="ts">
import { EmailEditor } from '@vuemaildev/editor';

const content = `
  <h1>Welcome</h1>
  <p>
    This is the simplest way to use the editor. Try selecting text to see the
    bubble menu, or type "/" for slash commands.
  </p>
`;
</script>

<template>
  <EmailEditor :content="content" />
</template>
```

This renders a functional editor, but it's unstyled. To style the editor,
import the default theme:

```ts theme={null}
import '@vuemaildev/editor/themes/default.css';
```

You can also build your own theme to style the editor to look and feel like
your own app. See [styling](https://vuemail.dev/docs/editor/features/styling.md).

See the [API Reference](https://vuemail.dev/docs/editor/api-reference/email-editor.md) for details.

> [!TIP]
>
> Start here unless you need full control over the extension list, provider
> layout, or UI composition, in which case see [Lower-level setup](#lower-level-setup).

## Content format

The editor accepts content in two formats:

**HTML string** — Parsed automatically into the editor's document model:

```vue theme={null}
<script setup lang="ts">
import { EmailEditor } from '@vuemaildev/editor';

const content = `
  <h1>Welcome</h1>
  <p>This is a <a href="https://vuemail.dev">link</a>.</p>
`;
</script>

<template>
  <EmailEditor :content="content" />
</template>
```

**TipTap JSON** — A structured document tree:

```json theme={null}
{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "Hello world" }
      ]
    }
  ]
}
```

## Lower-level setup

If you need more control, drop down to `EditorProvider` and compose the
editor yourself. This is the lower-level path: you choose the extensions, add
UI overlays manually, and import any CSS you need.

Common building blocks on this path are [`StarterKit`](https://vuemail.dev/docs/editor/api-reference/extensions-list),
[`BubbleMenu`](https://vuemail.dev/docs/editor/api-reference/ui/bubble-menu),
[`SlashCommand`](https://vuemail.dev/docs/editor/api-reference/ui/slash-command),
[`EmailTheming`](https://vuemail.dev/docs/editor/api-reference/theming-api),
[`composeVueEmail`](https://vuemail.dev/docs/editor/api-reference/compose-vue-email), and the
[`useCurrentEditor`](https://vuemail.dev/docs/editor/api-reference/use-editor) composable.

The simplest manual setup uses `StarterKit` with `EditorProvider` and no UI
overlays:

```vue theme={null}
<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';

const extensions = [StarterKit];

const content = `
  <h1>Welcome</h1>
  <p>Start typing or edit this text.</p>
`;
</script>

<template>
  <EditorProvider :extensions="extensions" :content="content" />
</template>
```

`EditorProvider` creates the editor, renders its content, and provides the editor to the
components you put inside it, which is where UI overlays go.

### Import CSS

When you use the lower-level UI components directly, import the bundled theme:

```ts theme={null}
import '@vuemaildev/editor/themes/default.css';
```

This single import includes the default color theme and the built-in UI styles
for bubble menus, slash commands, and the inspector.

> [!TIP]
>
> If you want to import only the pieces you use, skip the bundled theme and
> import the individual CSS files instead:
>
> ```ts theme={null}
> import '@vuemaildev/editor/styles/bubble-menu.css';
> import '@vuemaildev/editor/styles/slash-command.css';
> import '@vuemaildev/editor/styles/inspector.css';
> ```

### Adding a bubble menu

To add a floating formatting toolbar that appears when you select text, add `BubbleMenu`
as a child of `EditorProvider`:

```vue theme={null}
<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';
import { BubbleMenu } from '@vuemaildev/editor/ui';
import '@vuemaildev/editor/themes/default.css';

const extensions = [StarterKit];

const content = `
  <p>
    Select this text to see the bubble menu. Try <strong>bold</strong>,
    <em>italic</em>, and other formatting options.
  </p>
`;
</script>

<template>
  <EditorProvider :extensions="extensions" :content="content">
    <BubbleMenu />
  </EditorProvider>
</template>
```

Select text in the editor to see the formatting toolbar with bold, italic,
underline, alignment, and more.

## Examples

See these features in action with runnable examples:

> **[Standalone Editor — Minimal](https://vuemail.dev/editor/standalone-editor)**
>
> The simplest possible editor setup.

> **[Basic Editor](https://vuemail.dev/editor/basic-editor)**
>
> EditorProvider with StarterKit and no overlays.

> **[Standalone Editor — Full Features](https://vuemail.dev/editor/standalone-editor-full)**
>
> Theme toggle, HTML export, and JSON output.

> **[Standalone Editor — Inspector](https://vuemail.dev/editor/standalone-editor-inspector)**
>
> Add an inspector sidebar with zero manual setup.

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

## Next steps

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

> **[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.

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


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