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

# EmailNode

> Base class for creating editor nodes with email serialization.

`EmailNode` extends TipTap's `Node` class with an additional `renderToVueEmail()` method
that controls how the node is serialized when exporting to email HTML via
[`composeVueEmail`](https://vuemail.dev/docs/editor/api-reference/compose-vue-email).

## Import

```ts theme={null}
import { EmailNode } from '@vuemaildev/editor/core';
```

## EmailNode.create

Create a new email-compatible node from scratch.

```ts theme={null}
import { EmailNode } from '@vuemaildev/editor/core';
import { mergeAttributes } from '@tiptap/core';
import { h } from 'vue';

const MyNode = EmailNode.create({
  name: 'myNode',
  group: 'block',
  content: 'inline*',

  parseHTML() {
    return [{ tag: 'div[data-my-node]' }];
  },

  renderHTML({ HTMLAttributes }) {
    return ['div', mergeAttributes(HTMLAttributes, { 'data-my-node': '' }), 0];
  },

  renderToVueEmail({ children, style }) {
    return h('div', { style }, [children]);
  },
});
```

The config object accepts all standard [TipTap Node options](https://tiptap.dev/docs/editor/api/node)
plus the `renderToVueEmail` method, a function that returns VNodes built with `h()`, using plain
elements or Vuemail components.

### renderToVueEmail props

| Prop | Type | Description |
| - | - | - |
| `children` | `VNodeChild` | The serialized child content of this node |
| `style` | `CSSProperties` | Resolved theme styles for this node (empty object if no theme) |
| `node` | `JSONContent` | The node, as JSON |
| `extension` | `EmailNode` | The extension instance, useful for accessing `options` |

> [!TIP]
>
> To render a Vuemail component, pass `children` as its default slot:
> `h(Section, { style }, () => children)`.

## EmailNode.from

Wrap an existing TipTap node with email serialization support. This is useful when you want to
reuse a community TipTap extension and add email export support without rewriting it.

```ts theme={null}
import { EmailNode } from '@vuemaildev/editor/core';
import Blockquote from '@tiptap/extension-blockquote';
import { h } from 'vue';

const EmailBlockquote = EmailNode.from(Blockquote, ({ children, style }) => {
  return h(
    'blockquote',
    { style: { ...style, borderLeft: '4px solid #e0e0e0', paddingLeft: '16px' } },
    [children],
  );
});
```

The second argument is the `renderToVueEmail` renderer function. It receives the same props
as described above.

## .configure

Configure options on an `EmailNode` (same as TipTap's `.configure()`):

```ts theme={null}
import { Heading } from '@vuemaildev/editor/extensions';

const CustomHeading = Heading.configure({ levels: [1, 2] });
```

## .extend

Extend an `EmailNode` with additional behavior:

```ts theme={null}
import { Paragraph } from '@vuemaildev/editor/extensions';

const CustomParagraph = Paragraph.extend({
  addKeyboardShortcuts() {
    return {
      'Mod-Shift-p': () => this.editor.commands.setParagraph(),
    };
  },
});
```

You can also override `renderToVueEmail` when extending:

```ts theme={null}
import { Paragraph } from '@vuemaildev/editor/extensions';
import { h } from 'vue';

const CustomParagraph = Paragraph.extend({
  renderToVueEmail({ children, style }) {
    return h('p', { style: { ...style, lineHeight: '1.8' } }, [children]);
  },
});
```

## See also

* [Custom Extensions](https://vuemail.dev/docs/editor/advanced/custom-extensions.md) — tutorial on building custom nodes
* [`EmailMark`](https://vuemail.dev/docs/editor/api-reference/email-mark) — the equivalent class for inline marks
* [`composeVueEmail`](https://vuemail.dev/docs/editor/api-reference/compose-vue-email) — the function that calls `renderToVueEmail`


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