From a8d3ce6be94000e43e769cfff511dc5d24ec5137 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 6 Apr 2026 14:46:32 +0000 Subject: [PATCH 1/4] Add cross-links between editor documentation and examples - Create README.md in packages/editor/examples with a table of all examples, linking each to its source file and corresponding docs page - Add 'Examples' sections to editor docs pages (overview, getting-started, bubble-menu, slash-commands, theming, styling, buttons, column-layouts, link-editing, email-export, custom-extensions) linking to relevant runnable examples on GitHub Co-authored-by: Gabriel Miranda --- .../editor/advanced/custom-extensions.mdx | 10 +++ apps/docs/editor/features/bubble-menu.mdx | 13 ++++ apps/docs/editor/features/buttons.mdx | 10 +++ apps/docs/editor/features/column-layouts.mdx | 10 +++ apps/docs/editor/features/email-export.mdx | 13 ++++ apps/docs/editor/features/link-editing.mdx | 10 +++ apps/docs/editor/features/slash-commands.mdx | 10 +++ apps/docs/editor/features/styling.mdx | 13 ++++ apps/docs/editor/features/theming.mdx | 10 +++ apps/docs/editor/getting-started.mdx | 19 ++++++ apps/docs/editor/overview.mdx | 13 ++++ packages/editor/examples/README.md | 65 +++++++++++++++++++ 12 files changed, 196 insertions(+) create mode 100644 packages/editor/examples/README.md diff --git a/apps/docs/editor/advanced/custom-extensions.mdx b/apps/docs/editor/advanced/custom-extensions.mdx index 2ec990f065..e7a45ef6b5 100644 --- a/apps/docs/editor/advanced/custom-extensions.mdx +++ b/apps/docs/editor/advanced/custom-extensions.mdx @@ -279,3 +279,13 @@ const CustomParagraph = Paragraph.extend({ }, }); ``` + +## Examples + +See custom extensions in action with a runnable example: + + + + Custom Callout node with EmailNode.create, toolbar insertion, and bubble menu. + + diff --git a/apps/docs/editor/features/bubble-menu.mdx b/apps/docs/editor/features/bubble-menu.mdx index fc508a8877..4f84f8f697 100644 --- a/apps/docs/editor/features/bubble-menu.mdx +++ b/apps/docs/editor/features/bubble-menu.mdx @@ -152,3 +152,16 @@ Control where the bubble menu appears relative to the selection: Distance from the selection in pixels. + +## Examples + +See bubble menus in action with runnable examples: + + + + Default bubble menu with text selection. + + + Composing a custom menu from primitives. + + diff --git a/apps/docs/editor/features/buttons.mdx b/apps/docs/editor/features/buttons.mdx index d5cdb0420b..cfa375f995 100644 --- a/apps/docs/editor/features/buttons.mdx +++ b/apps/docs/editor/features/buttons.mdx @@ -81,3 +81,13 @@ function Toolbar() { ); } ``` + +## Examples + +See buttons in action with a runnable example: + + + + Button insertion and editing with the button bubble menu. + + diff --git a/apps/docs/editor/features/column-layouts.mdx b/apps/docs/editor/features/column-layouts.mdx index eab50fbf13..eba691144f 100644 --- a/apps/docs/editor/features/column-layouts.mdx +++ b/apps/docs/editor/features/column-layouts.mdx @@ -114,3 +114,13 @@ The default slash commands already include column layouts. Type `/` and search f - **Four Columns** — `FOUR_COLUMNS` See [Slash Commands](/editor/features/slash-commands) for setup details. + +## Examples + +See column layouts in action with a runnable example: + + + + Toolbar-driven 2/3/4 column insertion. + + diff --git a/apps/docs/editor/features/email-export.mdx b/apps/docs/editor/features/email-export.mdx index b2518a98a7..49c652bfd1 100644 --- a/apps/docs/editor/features/email-export.mdx +++ b/apps/docs/editor/features/email-export.mdx @@ -183,3 +183,16 @@ export function FullEmailBuilder() { ); } ``` + +## Examples + +See email export in action with runnable examples: + + + + Export editor content to themed HTML. + + + Complete editor with theming, menus, and export. + + diff --git a/apps/docs/editor/features/link-editing.mdx b/apps/docs/editor/features/link-editing.mdx index f78096e073..d0eaa0edc1 100644 --- a/apps/docs/editor/features/link-editing.mdx +++ b/apps/docs/editor/features/link-editing.mdx @@ -70,3 +70,13 @@ const content = ` The link extension is included in `StarterKit` with `openOnClick` disabled by default, so clicking a link in edit mode focuses it rather than navigating away. + +## Examples + +See link editing in action with a runnable example: + + + + Inline link editing with Cmd+K support. + + diff --git a/apps/docs/editor/features/slash-commands.mdx b/apps/docs/editor/features/slash-commands.mdx index 1f5a823a93..a98f174a08 100644 --- a/apps/docs/editor/features/slash-commands.mdx +++ b/apps/docs/editor/features/slash-commands.mdx @@ -154,3 +154,13 @@ This is useful when you want a minimal command palette — for example, only all allow={({ editor }) => !editor.isActive('codeBlock')} /> ``` + +## Examples + +See slash commands in action with a runnable example: + + + + Default commands plus a custom Greeting command. + + diff --git a/apps/docs/editor/features/styling.mdx b/apps/docs/editor/features/styling.mdx index f65e9dc575..bfed407b7d 100644 --- a/apps/docs/editor/features/styling.mdx +++ b/apps/docs/editor/features/styling.mdx @@ -404,3 +404,16 @@ Customize how content looks inside the editor: Content styling in the editor (via `.tiptap` selectors) only affects how content looks while editing. The exported email HTML is styled separately via the [Theming](/editor/features/theming) system. + +## Examples + +See styling and theming in action with runnable examples: + + + + Basic/Minimal theme toggle with live preview. + + + Complete editor with all styling features combined. + + diff --git a/apps/docs/editor/features/theming.mdx b/apps/docs/editor/features/theming.mdx index 7c37fcd289..bb94a44f59 100644 --- a/apps/docs/editor/features/theming.mdx +++ b/apps/docs/editor/features/theming.mdx @@ -133,3 +133,13 @@ const { html, text } = await composeReactEmail({ editor, preview: null }); ``` See [Email Export](/editor/features/email-export) for more details on the serialization pipeline. + +## Examples + +See theming in action with a runnable example: + + + + Basic/Minimal theme toggle with live preview. + + diff --git a/apps/docs/editor/getting-started.mdx b/apps/docs/editor/getting-started.mdx index 594bbd90d5..252af2a4ee 100644 --- a/apps/docs/editor/getting-started.mdx +++ b/apps/docs/editor/getting-started.mdx @@ -151,6 +151,25 @@ const content = ` ``` +## Examples + +See these features in action with runnable examples: + + + + The simplest possible editor setup. + + + EditorProvider with StarterKit and no overlays. + + + Theme toggle, HTML export, and JSON output. + + + Browse the complete set of interactive examples. + + + ## Next steps diff --git a/apps/docs/editor/overview.mdx b/apps/docs/editor/overview.mdx index cf425e9c49..2e6621c110 100644 --- a/apps/docs/editor/overview.mdx +++ b/apps/docs/editor/overview.mdx @@ -59,3 +59,16 @@ The editor is organized into five entry points: Create your own email-compatible nodes. + +## Examples + +Runnable examples are available in the [`packages/editor/examples`](https://github.com/resend/react-email/tree/main/packages/editor/examples) directory. Each example demonstrates a specific feature in isolation: + + + + All features combined — theming, bubble menus, slash commands, and HTML export. + + + Browse the complete set of interactive examples. + + diff --git a/packages/editor/examples/README.md b/packages/editor/examples/README.md new file mode 100644 index 0000000000..19b6d088e1 --- /dev/null +++ b/packages/editor/examples/README.md @@ -0,0 +1,65 @@ +# @react-email/editor examples + +Interactive examples demonstrating the [React Email Editor](https://react.email/docs/editor/overview). Each example is a standalone component that showcases a specific feature or pattern. + +## Running locally + +From the repository root: + +```sh +pnpm install +pnpm dev --filter editor-examples +``` + +Then open in your browser. Use the sidebar to navigate between examples. + +## Examples + +### One-Line Editor + +| Example | Source | Docs | +|---------|--------|------| +| **Minimal** — Single `EmailEditor` with default wiring | [`one-line-editor.tsx`](src/examples/one-line-editor.tsx) | [Getting Started](https://react.email/docs/editor/getting-started) | +| **Full Features** — Theme toggle, HTML export, JSON output | [`one-line-editor-full.tsx`](src/examples/one-line-editor-full.tsx) | [Getting Started](https://react.email/docs/editor/getting-started) | + +### Getting Started + +| Example | Source | Docs | +|---------|--------|------| +| **Basic Editor** — `EditorProvider` with `StarterKit` only | [`basic-editor.tsx`](src/examples/basic-editor.tsx) | [Getting Started](https://react.email/docs/editor/getting-started) | +| **Bubble Menu** — Default floating formatting toolbar | [`bubble-menu.tsx`](src/examples/bubble-menu.tsx) | [Bubble Menu](https://react.email/docs/editor/features/bubble-menu) | +| **Slash Commands** — Command menu with custom commands | [`slash-commands.tsx`](src/examples/slash-commands.tsx) | [Slash Commands](https://react.email/docs/editor/features/slash-commands) | + +### Intermediate + +| Example | Source | Docs | +|---------|--------|------| +| **Custom Bubble Menu** — Composing a menu from primitives | [`custom-bubble-menu.tsx`](src/examples/custom-bubble-menu.tsx) | [Bubble Menu](https://react.email/docs/editor/features/bubble-menu) | +| **Link Editing** — Inline link editing with `Cmd+K` | [`link-editing.tsx`](src/examples/link-editing.tsx) | [Link Editing](https://react.email/docs/editor/features/link-editing) | +| **Column Layouts** — Toolbar-driven 2/3/4 column insertion | [`column-layouts.tsx`](src/examples/column-layouts.tsx) | [Column Layouts](https://react.email/docs/editor/features/column-layouts) | +| **Buttons** — Button insertion and editing | [`images-and-buttons.tsx`](src/examples/images-and-buttons.tsx) | [Buttons](https://react.email/docs/editor/features/buttons) | + +### Advanced + +| Example | Source | Docs | +|---------|--------|------| +| **Email Theming** — Basic/Minimal theme toggle | [`email-theming.tsx`](src/examples/email-theming.tsx) | [Email Theming](https://react.email/docs/editor/features/theming) | +| **Email Export** — HTML export via `composeReactEmail` | [`email-export.tsx`](src/examples/email-export.tsx) | [Email Export](https://react.email/docs/editor/features/email-export) | +| **Custom Extensions** — Custom Callout node with `EmailNode.create` | [`custom-extensions.tsx`](src/examples/custom-extensions.tsx) | [Custom Extensions](https://react.email/docs/editor/advanced/custom-extensions) | +| **Document Inspector** — Split view with document inspector UI | [`document-inspector.tsx`](src/examples/document-inspector.tsx) | [Overview](https://react.email/docs/editor/overview) | +| **Full Email Builder** — All features combined | [`full-email-builder.tsx`](src/examples/full-email-builder.tsx) | [Email Export](https://react.email/docs/editor/features/email-export) | + +## Documentation + +- [Editor Overview](https://react.email/docs/editor/overview) +- [Getting Started](https://react.email/docs/editor/getting-started) +- [Bubble Menu](https://react.email/docs/editor/features/bubble-menu) +- [Slash Commands](https://react.email/docs/editor/features/slash-commands) +- [Email Theming](https://react.email/docs/editor/features/theming) +- [Styling](https://react.email/docs/editor/features/styling) +- [Buttons](https://react.email/docs/editor/features/buttons) +- [Column Layouts](https://react.email/docs/editor/features/column-layouts) +- [Link Editing](https://react.email/docs/editor/features/link-editing) +- [Email Export](https://react.email/docs/editor/features/email-export) +- [Extensions](https://react.email/docs/editor/advanced/extensions) +- [Custom Extensions](https://react.email/docs/editor/advanced/custom-extensions) From e99c2aa1c96c8a4487235d1f5b0440c22a91f496 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 6 Apr 2026 14:55:22 +0000 Subject: [PATCH 2/4] Link to editor-examples.react.email instead of GitHub source files Update all cross-links in docs and README to point to the hosted examples website at editor-examples.react.email with hash-based routes (e.g., #bubble-menu, #full-email-builder) instead of raw GitHub source file URLs. Co-authored-by: Gabriel Miranda --- .../editor/advanced/custom-extensions.mdx | 2 +- apps/docs/editor/features/bubble-menu.mdx | 4 +- apps/docs/editor/features/buttons.mdx | 2 +- apps/docs/editor/features/column-layouts.mdx | 2 +- apps/docs/editor/features/email-export.mdx | 4 +- apps/docs/editor/features/link-editing.mdx | 2 +- apps/docs/editor/features/slash-commands.mdx | 2 +- apps/docs/editor/features/styling.mdx | 4 +- apps/docs/editor/features/theming.mdx | 2 +- apps/docs/editor/getting-started.mdx | 8 ++-- apps/docs/editor/overview.mdx | 6 +-- packages/editor/examples/README.md | 46 ++++++++++--------- 12 files changed, 43 insertions(+), 41 deletions(-) diff --git a/apps/docs/editor/advanced/custom-extensions.mdx b/apps/docs/editor/advanced/custom-extensions.mdx index e7a45ef6b5..bd2dbbbdd1 100644 --- a/apps/docs/editor/advanced/custom-extensions.mdx +++ b/apps/docs/editor/advanced/custom-extensions.mdx @@ -285,7 +285,7 @@ const CustomParagraph = Paragraph.extend({ See custom extensions in action with a runnable example: - + Custom Callout node with EmailNode.create, toolbar insertion, and bubble menu. diff --git a/apps/docs/editor/features/bubble-menu.mdx b/apps/docs/editor/features/bubble-menu.mdx index 4f84f8f697..4d77d467eb 100644 --- a/apps/docs/editor/features/bubble-menu.mdx +++ b/apps/docs/editor/features/bubble-menu.mdx @@ -158,10 +158,10 @@ Control where the bubble menu appears relative to the selection: See bubble menus in action with runnable examples: - + Default bubble menu with text selection. - + Composing a custom menu from primitives. diff --git a/apps/docs/editor/features/buttons.mdx b/apps/docs/editor/features/buttons.mdx index cfa375f995..c81128f7de 100644 --- a/apps/docs/editor/features/buttons.mdx +++ b/apps/docs/editor/features/buttons.mdx @@ -87,7 +87,7 @@ function Toolbar() { See buttons in action with a runnable example: - + Button insertion and editing with the button bubble menu. diff --git a/apps/docs/editor/features/column-layouts.mdx b/apps/docs/editor/features/column-layouts.mdx index eba691144f..e3e5f330bc 100644 --- a/apps/docs/editor/features/column-layouts.mdx +++ b/apps/docs/editor/features/column-layouts.mdx @@ -120,7 +120,7 @@ See [Slash Commands](/editor/features/slash-commands) for setup details. See column layouts in action with a runnable example: - + Toolbar-driven 2/3/4 column insertion. diff --git a/apps/docs/editor/features/email-export.mdx b/apps/docs/editor/features/email-export.mdx index 49c652bfd1..426e2b23f0 100644 --- a/apps/docs/editor/features/email-export.mdx +++ b/apps/docs/editor/features/email-export.mdx @@ -189,10 +189,10 @@ export function FullEmailBuilder() { See email export in action with runnable examples: - + Export editor content to themed HTML. - + Complete editor with theming, menus, and export. diff --git a/apps/docs/editor/features/link-editing.mdx b/apps/docs/editor/features/link-editing.mdx index d0eaa0edc1..5916c32085 100644 --- a/apps/docs/editor/features/link-editing.mdx +++ b/apps/docs/editor/features/link-editing.mdx @@ -76,7 +76,7 @@ so clicking a link in edit mode focuses it rather than navigating away. See link editing in action with a runnable example: - + Inline link editing with Cmd+K support. diff --git a/apps/docs/editor/features/slash-commands.mdx b/apps/docs/editor/features/slash-commands.mdx index a98f174a08..2eebc3d81f 100644 --- a/apps/docs/editor/features/slash-commands.mdx +++ b/apps/docs/editor/features/slash-commands.mdx @@ -160,7 +160,7 @@ This is useful when you want a minimal command palette — for example, only all See slash commands in action with a runnable example: - + Default commands plus a custom Greeting command. diff --git a/apps/docs/editor/features/styling.mdx b/apps/docs/editor/features/styling.mdx index bfed407b7d..c8f5fa0237 100644 --- a/apps/docs/editor/features/styling.mdx +++ b/apps/docs/editor/features/styling.mdx @@ -410,10 +410,10 @@ Customize how content looks inside the editor: See styling and theming in action with runnable examples: - + Basic/Minimal theme toggle with live preview. - + Complete editor with all styling features combined. diff --git a/apps/docs/editor/features/theming.mdx b/apps/docs/editor/features/theming.mdx index bb94a44f59..dbfebd42c8 100644 --- a/apps/docs/editor/features/theming.mdx +++ b/apps/docs/editor/features/theming.mdx @@ -139,7 +139,7 @@ See [Email Export](/editor/features/email-export) for more details on the serial See theming in action with a runnable example: - + Basic/Minimal theme toggle with live preview. diff --git a/apps/docs/editor/getting-started.mdx b/apps/docs/editor/getting-started.mdx index 252af2a4ee..fc40357e03 100644 --- a/apps/docs/editor/getting-started.mdx +++ b/apps/docs/editor/getting-started.mdx @@ -156,16 +156,16 @@ const content = ` See these features in action with runnable examples: - + The simplest possible editor setup. - + EditorProvider with StarterKit and no overlays. - + Theme toggle, HTML export, and JSON output. - + Browse the complete set of interactive examples. diff --git a/apps/docs/editor/overview.mdx b/apps/docs/editor/overview.mdx index 2e6621c110..3edbcf21a6 100644 --- a/apps/docs/editor/overview.mdx +++ b/apps/docs/editor/overview.mdx @@ -62,13 +62,13 @@ The editor is organized into five entry points: ## Examples -Runnable examples are available in the [`packages/editor/examples`](https://github.com/resend/react-email/tree/main/packages/editor/examples) directory. Each example demonstrates a specific feature in isolation: +Runnable examples are available at [editor-examples.react.email](https://editor-examples.react.email). Each example demonstrates a specific feature in isolation: - + All features combined — theming, bubble menus, slash commands, and HTML export. - + Browse the complete set of interactive examples. diff --git a/packages/editor/examples/README.md b/packages/editor/examples/README.md index 19b6d088e1..6b38c6a822 100644 --- a/packages/editor/examples/README.md +++ b/packages/editor/examples/README.md @@ -2,6 +2,8 @@ Interactive examples demonstrating the [React Email Editor](https://react.email/docs/editor/overview). Each example is a standalone component that showcases a specific feature or pattern. +**Live website:** [editor-examples.react.email](https://editor-examples.react.email) + ## Running locally From the repository root: @@ -17,37 +19,37 @@ Then open in your browser. Use the sidebar to navigate b ### One-Line Editor -| Example | Source | Docs | -|---------|--------|------| -| **Minimal** — Single `EmailEditor` with default wiring | [`one-line-editor.tsx`](src/examples/one-line-editor.tsx) | [Getting Started](https://react.email/docs/editor/getting-started) | -| **Full Features** — Theme toggle, HTML export, JSON output | [`one-line-editor-full.tsx`](src/examples/one-line-editor-full.tsx) | [Getting Started](https://react.email/docs/editor/getting-started) | +| Example | Demo | Source | Docs | +|---------|------|--------|------| +| **Minimal** — Single `EmailEditor` with default wiring | [Live](https://editor-examples.react.email/#one-line-editor) | [`one-line-editor.tsx`](src/examples/one-line-editor.tsx) | [Getting Started](https://react.email/docs/editor/getting-started) | +| **Full Features** — Theme toggle, HTML export, JSON output | [Live](https://editor-examples.react.email/#one-line-editor-full) | [`one-line-editor-full.tsx`](src/examples/one-line-editor-full.tsx) | [Getting Started](https://react.email/docs/editor/getting-started) | ### Getting Started -| Example | Source | Docs | -|---------|--------|------| -| **Basic Editor** — `EditorProvider` with `StarterKit` only | [`basic-editor.tsx`](src/examples/basic-editor.tsx) | [Getting Started](https://react.email/docs/editor/getting-started) | -| **Bubble Menu** — Default floating formatting toolbar | [`bubble-menu.tsx`](src/examples/bubble-menu.tsx) | [Bubble Menu](https://react.email/docs/editor/features/bubble-menu) | -| **Slash Commands** — Command menu with custom commands | [`slash-commands.tsx`](src/examples/slash-commands.tsx) | [Slash Commands](https://react.email/docs/editor/features/slash-commands) | +| Example | Demo | Source | Docs | +|---------|------|--------|------| +| **Basic Editor** — `EditorProvider` with `StarterKit` only | [Live](https://editor-examples.react.email/#basic-editor) | [`basic-editor.tsx`](src/examples/basic-editor.tsx) | [Getting Started](https://react.email/docs/editor/getting-started) | +| **Bubble Menu** — Default floating formatting toolbar | [Live](https://editor-examples.react.email/#bubble-menu) | [`bubble-menu.tsx`](src/examples/bubble-menu.tsx) | [Bubble Menu](https://react.email/docs/editor/features/bubble-menu) | +| **Slash Commands** — Command menu with custom commands | [Live](https://editor-examples.react.email/#slash-commands) | [`slash-commands.tsx`](src/examples/slash-commands.tsx) | [Slash Commands](https://react.email/docs/editor/features/slash-commands) | ### Intermediate -| Example | Source | Docs | -|---------|--------|------| -| **Custom Bubble Menu** — Composing a menu from primitives | [`custom-bubble-menu.tsx`](src/examples/custom-bubble-menu.tsx) | [Bubble Menu](https://react.email/docs/editor/features/bubble-menu) | -| **Link Editing** — Inline link editing with `Cmd+K` | [`link-editing.tsx`](src/examples/link-editing.tsx) | [Link Editing](https://react.email/docs/editor/features/link-editing) | -| **Column Layouts** — Toolbar-driven 2/3/4 column insertion | [`column-layouts.tsx`](src/examples/column-layouts.tsx) | [Column Layouts](https://react.email/docs/editor/features/column-layouts) | -| **Buttons** — Button insertion and editing | [`images-and-buttons.tsx`](src/examples/images-and-buttons.tsx) | [Buttons](https://react.email/docs/editor/features/buttons) | +| Example | Demo | Source | Docs | +|---------|------|--------|------| +| **Custom Bubble Menu** — Composing a menu from primitives | [Live](https://editor-examples.react.email/#custom-bubble-menu) | [`custom-bubble-menu.tsx`](src/examples/custom-bubble-menu.tsx) | [Bubble Menu](https://react.email/docs/editor/features/bubble-menu) | +| **Link Editing** — Inline link editing with `Cmd+K` | [Live](https://editor-examples.react.email/#link-editing) | [`link-editing.tsx`](src/examples/link-editing.tsx) | [Link Editing](https://react.email/docs/editor/features/link-editing) | +| **Column Layouts** — Toolbar-driven 2/3/4 column insertion | [Live](https://editor-examples.react.email/#column-layouts) | [`column-layouts.tsx`](src/examples/column-layouts.tsx) | [Column Layouts](https://react.email/docs/editor/features/column-layouts) | +| **Buttons** — Button insertion and editing | [Live](https://editor-examples.react.email/#buttons) | [`images-and-buttons.tsx`](src/examples/images-and-buttons.tsx) | [Buttons](https://react.email/docs/editor/features/buttons) | ### Advanced -| Example | Source | Docs | -|---------|--------|------| -| **Email Theming** — Basic/Minimal theme toggle | [`email-theming.tsx`](src/examples/email-theming.tsx) | [Email Theming](https://react.email/docs/editor/features/theming) | -| **Email Export** — HTML export via `composeReactEmail` | [`email-export.tsx`](src/examples/email-export.tsx) | [Email Export](https://react.email/docs/editor/features/email-export) | -| **Custom Extensions** — Custom Callout node with `EmailNode.create` | [`custom-extensions.tsx`](src/examples/custom-extensions.tsx) | [Custom Extensions](https://react.email/docs/editor/advanced/custom-extensions) | -| **Document Inspector** — Split view with document inspector UI | [`document-inspector.tsx`](src/examples/document-inspector.tsx) | [Overview](https://react.email/docs/editor/overview) | -| **Full Email Builder** — All features combined | [`full-email-builder.tsx`](src/examples/full-email-builder.tsx) | [Email Export](https://react.email/docs/editor/features/email-export) | +| Example | Demo | Source | Docs | +|---------|------|--------|------| +| **Email Theming** — Basic/Minimal theme toggle | [Live](https://editor-examples.react.email/#email-theming) | [`email-theming.tsx`](src/examples/email-theming.tsx) | [Email Theming](https://react.email/docs/editor/features/theming) | +| **Email Export** — HTML export via `composeReactEmail` | [Live](https://editor-examples.react.email/#email-export) | [`email-export.tsx`](src/examples/email-export.tsx) | [Email Export](https://react.email/docs/editor/features/email-export) | +| **Custom Extensions** — Custom Callout node with `EmailNode.create` | [Live](https://editor-examples.react.email/#custom-extensions) | [`custom-extensions.tsx`](src/examples/custom-extensions.tsx) | [Custom Extensions](https://react.email/docs/editor/advanced/custom-extensions) | +| **Document Inspector** — Split view with document inspector UI | [Live](https://editor-examples.react.email/#document-inspector) | [`document-inspector.tsx`](src/examples/document-inspector.tsx) | [Overview](https://react.email/docs/editor/overview) | +| **Full Email Builder** — All features combined | [Live](https://editor-examples.react.email/#full-email-builder) | [`full-email-builder.tsx`](src/examples/full-email-builder.tsx) | [Email Export](https://react.email/docs/editor/features/email-export) | ## Documentation From 29062f46353afa4921b59fa8ab0932906598a739 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 6 Apr 2026 15:19:18 +0000 Subject: [PATCH 3/4] Add documentation links to the examples website - Add docsUrl field to ExampleItem interface and populate it for all 14 examples, pointing to the relevant docs page on react.email - Show a 'Docs' link with external-link icon in the top-right of each example's main content area, linking to that example's docs page - Add a 'Documentation' link in the sidebar footer linking to the editor overview page Co-authored-by: Gabriel Miranda --- packages/editor/examples/src/app.tsx | 22 ++++++++++--- .../editor/examples/src/examples/index.ts | 33 +++++++++++++++++-- packages/editor/examples/src/sidebar.tsx | 16 ++++++++- 3 files changed, 63 insertions(+), 8 deletions(-) diff --git a/packages/editor/examples/src/app.tsx b/packages/editor/examples/src/app.tsx index 2a1404a2d2..cc0a6a8cdd 100644 --- a/packages/editor/examples/src/app.tsx +++ b/packages/editor/examples/src/app.tsx @@ -6,15 +6,29 @@ const allExamples = sections.flatMap((s) => s.examples); export function App() { const [activeId, setActiveId] = useHashRoute(allExamples[0].id); - const ActiveExample = - allExamples.find((e) => e.id === activeId)?.component ?? - allExamples[0].component; + const activeExample = allExamples.find((e) => e.id === activeId) ?? allExamples[0]; + const ActiveComponent = activeExample.component; return (
- + {activeExample.docsUrl ? ( + + ) : null} +
); diff --git a/packages/editor/examples/src/examples/index.ts b/packages/editor/examples/src/examples/index.ts index b71c9837ff..88050aff2f 100644 --- a/packages/editor/examples/src/examples/index.ts +++ b/packages/editor/examples/src/examples/index.ts @@ -17,6 +17,7 @@ export interface ExampleItem { id: string; label: string; component: React.ComponentType; + docsUrl?: string; } export interface ExampleSection { @@ -32,27 +33,36 @@ export const sections: ExampleSection[] = [ id: 'one-line-editor', label: 'Minimal', component: OneLineEditor, + docsUrl: 'https://react.email/docs/editor/getting-started', }, { id: 'one-line-editor-full', label: 'Full Features', component: OneLineEditorFull, + docsUrl: 'https://react.email/docs/editor/getting-started', }, ], }, { title: 'Getting Started', examples: [ - { id: 'basic-editor', label: 'Basic Editor', component: BasicEditor }, + { + id: 'basic-editor', + label: 'Basic Editor', + component: BasicEditor, + docsUrl: 'https://react.email/docs/editor/getting-started', + }, { id: 'bubble-menu', label: 'Bubble Menu', component: BubbleMenuExample, + docsUrl: 'https://react.email/docs/editor/features/bubble-menu', }, { id: 'slash-commands', label: 'Slash Commands', component: SlashCommands, + docsUrl: 'https://react.email/docs/editor/features/slash-commands', }, ], }, @@ -63,17 +73,25 @@ export const sections: ExampleSection[] = [ id: 'custom-bubble-menu', label: 'Custom Bubble Menu', component: CustomBubbleMenu, + docsUrl: 'https://react.email/docs/editor/features/bubble-menu', + }, + { + id: 'link-editing', + label: 'Link Editing', + component: LinkEditing, + docsUrl: 'https://react.email/docs/editor/features/link-editing', }, - { id: 'link-editing', label: 'Link Editing', component: LinkEditing }, { id: 'column-layouts', label: 'Column Layouts', component: ColumnLayouts, + docsUrl: 'https://react.email/docs/editor/features/column-layouts', }, { id: 'buttons', label: 'Buttons', component: Buttons, + docsUrl: 'https://react.email/docs/editor/features/buttons', }, ], }, @@ -84,22 +102,31 @@ export const sections: ExampleSection[] = [ id: 'email-theming', label: 'Email Theming', component: EmailThemingExample, + docsUrl: 'https://react.email/docs/editor/features/theming', + }, + { + id: 'email-export', + label: 'Email Export', + component: EmailExport, + docsUrl: 'https://react.email/docs/editor/features/email-export', }, - { id: 'email-export', label: 'Email Export', component: EmailExport }, { id: 'custom-extensions', label: 'Custom Extensions', component: CustomExtensions, + docsUrl: 'https://react.email/docs/editor/advanced/custom-extensions', }, { id: 'document-inspector', label: 'Document Inspector', component: DocumentInspector, + docsUrl: 'https://react.email/docs/editor/overview', }, { id: 'full-email-builder', label: 'Full Email Builder', component: FullEmailBuilder, + docsUrl: 'https://react.email/docs/editor/features/email-export', }, ], }, diff --git a/packages/editor/examples/src/sidebar.tsx b/packages/editor/examples/src/sidebar.tsx index d70084243e..1909761aaa 100644 --- a/packages/editor/examples/src/sidebar.tsx +++ b/packages/editor/examples/src/sidebar.tsx @@ -11,7 +11,7 @@ interface SidebarProps { export function Sidebar({ sections, activeId, onSelect }: SidebarProps) { return ( -