Extensions - React Email

StarterKit

StarterKit bundles all 35+ editor extensions into a single import. It wraps TipTap’s StarterKit and replaces most nodes with email-aware versions that know how to serialize to React Email components.

import { StarterKit } from '@react-email/editor/extensions';

const extensions = [StarterKit];

Use StarterKit unless you need fine-grained control over which extensions are loaded. It’s the recommended way to set up the editor.

Configuring extensions

Pass options to configure individual extensions, or set them to false to disable:

const extensions = [
  StarterKit.configure({
    // Customize heading levels
    Heading: { levels: [1, 2] },

    // Disable strikethrough
    Strike: false,

    // Disable code blocks
    CodeBlockPrism: false,
  }),
];

Structural defaults

StarterKit includes two structural extensions that shape how email content is edited and exported:

Container keeps top-level content inside a dedicated email content wrapper and serializes it with React Email’s Container component.
TrailingNode appends an empty paragraph when a container, section, or column does not already end in one, so the caret can move below the last block and users can keep typing naturally.

This is the default StarterKit behavior:

const extensions = [
  StarterKit.configure({
    Container: {},
    TrailingNode: {
      node: 'paragraph',
      appendTo: ['container', 'section', 'columnsColumn'],
    },
  }),
];

You can reconfigure either extension if your document model needs a different wrapper or different trailing-node behavior.

Using individual extensions

For maximum control, import and compose extensions manually instead of using StarterKit:

import {
  Body,
  Bold,
  Heading,
  Italic,
  Link,
  Paragraph,
} from '@react-email/editor/extensions';

const extensions = [Body, Paragraph, Heading, Bold, Italic, Link];

When using individual extensions, you’re responsible for including all the extensions your content needs. Missing extensions will cause those content types to be dropped.

Extension categories

Block Nodes

Extensions that create block-level content:

Extension	Description
`Body`	Email body wrapper
`Section`	Content section
`Container`	Main email content wrapper
`Div`	Generic div container
`Paragraph`	Text paragraph
`Heading`	Heading levels 1–6
`Blockquote`	Block quote
`CodeBlockPrism`	Code block with Prism syntax highlighting
`Divider`	Horizontal rule
`Button`	Email button element
`PreviewText`	Email preview text (shown in inbox list)

Lists

List-related extensions:

Extension	Description
`BulletList`	Unordered list
`OrderedList`	Ordered (numbered) list
`ListItem`	Individual list item

Layout

Multi-column layout extensions:

Extension	Description
`TwoColumns`	Two column layout
`ThreeColumns`	Three column layout
`FourColumns`	Four column layout
`ColumnsColumn`	Individual column within a layout

Tables

Table-related extensions:

Extension	Description
`Table`	Table container
`TableRow`	Table row
`TableCell`	Table cell
`TableHeader`	Table header cell

Inline Marks

Extensions that style inline text:

Extension	Description
`Bold`	Bold text
`Italic`	Italic text
`Strike`	Strikethrough text
`Underline`	Underlined text
`Code`	Inline code
`Sup`	Superscript text
`Uppercase`	Uppercase transform
`Link`	Hyperlink (with `openOnClick: false` by default)
`Text`	Base text node

Attributes

Extensions that add HTML attributes to nodes:

Extension	Description
`AlignmentAttribute`	Text alignment (left, center, right)
`StyleAttribute`	Inline CSS styles
`ClassAttribute`	CSS class names

Utility

Helper extensions for editor behavior:

Extension	Description
`TrailingNode`	Keeps a trailing empty block inside the target node
`PreservedStyle`	Preserves formatting when unlinking
`GlobalContent`	Stores metadata for serialization (CSS, etc.)
`MaxNesting`	Enforces maximum nesting depth
`HardBreak`	Line break within a block

For the full API reference with configurable options for each extension, see Extensions Reference.

​StarterKit

​Configuring extensions

​Structural defaults

​Using individual extensions

​Extension categories

StarterKit

Configuring extensions

Structural defaults

Using individual extensions

Extension categories