> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Extensions

> Configure and customize the editor's built-in extensions.

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

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { StarterKit } from '@react-email/editor/extensions';

const extensions = [StarterKit];
```

<Tip>
  Use `StarterKit` unless you need fine-grained control over which extensions are loaded.
  It's the recommended way to set up the editor.
</Tip>

## Configuring extensions

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

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
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:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
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:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import {
  Body,
  Bold,
  Heading,
  Italic,
  Link,
  Paragraph,
} from '@react-email/editor/extensions';

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

<Note>
  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.
</Note>

## Extension categories

<AccordionGroup>
  <Accordion title="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) |
  </Accordion>

  <Accordion title="Lists">
    List-related extensions:

    | Extension | Description |
    | - | - |
    | `BulletList` | Unordered list |
    | `OrderedList` | Ordered (numbered) list |
    | `ListItem` | Individual list item |
  </Accordion>

  <Accordion title="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 |
  </Accordion>

  <Accordion title="Tables">
    Table-related extensions:

    | Extension | Description |
    | - | - |
    | `Table` | Table container |
    | `TableRow` | Table row |
    | `TableCell` | Table cell |
    | `TableHeader` | Table header cell |
  </Accordion>

  <Accordion title="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 |
  </Accordion>

  <Accordion title="Attributes">
    Extensions that add HTML attributes to nodes:

    | Extension | Description |
    | - | - |
    | `AlignmentAttribute` | Text alignment (left, center, right) |
    | `StyleAttribute` | Inline CSS styles |
    | `ClassAttribute` | CSS class names |
  </Accordion>

  <Accordion title="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 |
  </Accordion>
</AccordionGroup>

For the full API reference with configurable options for each extension, see [Extensions Reference](/docs/editor/api-reference/extensions-list).