> ## 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](/editor/api-reference/extensions-list).