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,
  }),
];

​
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
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
PlaceholderPlaceholder text when content is empty
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.