mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
114 lines
5.0 KiB
Plaintext
114 lines
5.0 KiB
Plaintext
---
|
|
title: "Editor"
|
|
sidebarTitle: "Overview"
|
|
description: "An embeddable visual editor for building React Email templates."
|
|
icon: "pen-nib"
|
|
---
|
|
|
|
The React Email Editor is a visual editor that you can embed in your app. It's made specifically for composing React Email templates.
|
|
|
|
Using the power of React Email, it produces email-ready HTML, and is built on top of [TipTap](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/).
|
|
|
|
## Key features
|
|
|
|
- **Rich text editing** — Paragraphs, headings, lists, code blocks, tables, and more
|
|
- **Bubble menus** — Floating formatting toolbars that appear on text selection
|
|
- **Slash commands** — Insert content blocks by typing `/`
|
|
- **Multi-column layouts** — Two, three, and four-column email layouts
|
|
- **Email theming** — Built-in themes with customizable CSS properties
|
|
- **HTML export** — Convert editor content to email-ready HTML and plain text
|
|
- **Custom extensions** — Create your own email-compatible nodes and marks
|
|
|
|
## Architecture
|
|
|
|
The editor is organized into five entry points:
|
|
|
|
| Import | Purpose |
|
|
|--------|---------|
|
|
| `@react-email/editor/core` | `composeReactEmail` serialization, event bus, types |
|
|
| `@react-email/editor/extensions` | `StarterKit` and 35+ email-aware extensions |
|
|
| `@react-email/editor/ui` | Bubble menus, slash commands |
|
|
| `@react-email/editor/plugins` | Email theming and image upload plugins |
|
|
| `@react-email/editor/utils` | Attribute helpers, style utilities |
|
|
|
|
<Info>
|
|
The editor uses [TipTap](https://tiptap.dev/) under the hood, so [TipTap](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/) concepts apply.
|
|
Extensions are email-aware versions of TipTap nodes and marks that know how to serialize to React Email components.
|
|
</Info>
|
|
|
|
## Quick links
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Getting Started" icon="rocket" href="/editor/getting-started">
|
|
Set up the editor in under 5 minutes.
|
|
</Card>
|
|
<Card title="Bubble Menu" icon="message-lines" href="/editor/features/bubble-menu">
|
|
Add floating formatting toolbars.
|
|
</Card>
|
|
<Card title="Slash Commands" icon="slash-forward" href="/editor/features/slash-commands">
|
|
Insert content blocks with a command menu.
|
|
</Card>
|
|
<Card title="Email Theming" icon="palette" href="/editor/features/theming">
|
|
Apply visual themes to your email output.
|
|
</Card>
|
|
<Card title="Image Upload" icon="image" href="/editor/features/image-upload">
|
|
Upload images via paste, drop, or slash command.
|
|
</Card>
|
|
<Card title="Styling" icon="paintbrush" href="/editor/features/styling">
|
|
Customize the editor's appearance with CSS.
|
|
</Card>
|
|
<Card title="Email Export" icon="file-export" href="/editor/features/email-export">
|
|
Convert editor content to email-ready HTML.
|
|
</Card>
|
|
<Card title="Custom Extensions" icon="wrench" href="/editor/advanced/custom-extensions">
|
|
Create your own email-compatible nodes.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Examples
|
|
|
|
Runnable examples are available at [react.email/editor/examples](https://react.email/editor/examples). Each example demonstrates a specific feature in isolation:
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Full Email Builder" icon="code" href="https://react.email/editor/examples/full-email-builder">
|
|
All features combined — theming, bubble menus, slash commands, and HTML export.
|
|
</Card>
|
|
<Card title="All Examples" icon="folder-open" href="https://react.email/editor/examples">
|
|
Browse the complete set of interactive examples.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Known limitations
|
|
|
|
<AccordionGroup>
|
|
<Accordion title="Slow dev-time compilation on Next.js because of Prism.js">
|
|
The editor's code block extension is built on top of react-email's
|
|
[`CodeBlock`](/components/code-block) component, which ships every Prism.js
|
|
language grammar in a single module. Bundlers that do not tree shake during
|
|
development, like Next.js, compile all of those grammars whenever the editor
|
|
is in the module graph, which significantly slows down dev-time compilation.
|
|
|
|
The current escape hatch is to patch your installed copy of `react-email`,
|
|
with [`pnpm patch`](https://pnpm.io/cli/patch) or
|
|
[`patch-package`](https://www.npmjs.com/package/patch-package), stripping the
|
|
grammars you don't use out of `dist/components/code-block/prism.mjs` (and
|
|
`prism.cjs` if you consume the CJS build) while keeping the top of the file
|
|
that imports and re-exports Prism itself:
|
|
|
|
```js
|
|
import * as PrismImport from "prismjs";
|
|
const Prism = PrismImport.default ?? PrismImport;
|
|
export { Prism };
|
|
```
|
|
|
|
Prism.js still registers `markup`, `css`, `clike` and `javascript` by
|
|
default, and the editor lazily loads any other grammar it needs while
|
|
editing, so the editing experience is unaffected. Keep the grammars for
|
|
every language you render into emails though, since `CodeBlock` throws when
|
|
it is given a language that is not registered.
|
|
|
|
Fully removing this weight requires a breaking change to how code blocks
|
|
are highlighted, which we are exploring.
|
|
</Accordion>
|
|
</AccordionGroup>
|