Skip to main content

​
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

Extensions that create block-level content:
ExtensionDescription
BodyEmail body wrapper
SectionContent section
ContainerMain email content wrapper
DivGeneric div container
ParagraphText paragraph
HeadingHeading levels 1–6
BlockquoteBlock quote
CodeBlockPrismCode block with Prism syntax highlighting
DividerHorizontal rule
ButtonEmail button element
PreviewTextEmail preview text (shown in inbox list)
List-related extensions:
ExtensionDescription
BulletListUnordered list
OrderedListOrdered (numbered) list
ListItemIndividual list item
Multi-column layout extensions:
ExtensionDescription
TwoColumnsTwo column layout
ThreeColumnsThree column layout
FourColumnsFour column layout
ColumnsColumnIndividual column within a layout
Table-related extensions:
ExtensionDescription
TableTable container
TableRowTable row
TableCellTable cell
TableHeaderTable header cell
Extensions that style inline text:
ExtensionDescription
BoldBold text
ItalicItalic text
StrikeStrikethrough text
UnderlineUnderlined text
CodeInline code
SupSuperscript text
UppercaseUppercase transform
LinkHyperlink (with openOnClick: false by default)
TextBase text node
Extensions that add HTML attributes to nodes:
ExtensionDescription
AlignmentAttributeText alignment (left, center, right)
StyleAttributeInline CSS styles
ClassAttributeCSS class names
Helper extensions for editor behavior:
ExtensionDescription
TrailingNodeKeeps a trailing empty block inside the target node
PreservedStylePreserves formatting when unlinking
GlobalContentStores metadata for serialization (CSS, etc.)
MaxNestingEnforces maximum nesting depth
HardBreakLine break within a block
For the full API reference with configurable options for each extension, see Extensions Reference.