React Email

https://react.email/docs
Admin
React Email is a framework for building and sending emails using React and TypeScript, designed to...
Tokens:68,965
Snippets:843
Trust Score:8.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Complete Editor Setup with Custom Callout Extension

Source: https://react.email/docs/editor/advanced/custom-extensions

This example demonstrates a full editor configuration including a custom 'Callout' extension, a toolbar for inserting callouts, and a bubble menu. It shows the definition of the custom node, its HTML and React Email rendering, and the editor provider setup.

```tsx
import { EmailNode } from '@react-email/editor/core';
import { StarterKit } from '@react-email/editor/extensions';
import { BubbleMenu } from '@react-email/editor/ui';
import { mergeAttributes } from '@tiptap/core';
import { EditorProvider, useCurrentEditor } from '@tiptap/react';
import { Info } from 'lucide-react';

const Callout = EmailNode.create({
  name: 'callout',
  group: 'block',
  content: 'inline*',

  parseHTML() {
    return [{ tag: 'div[data-callout]' }];
  },

  renderHTML({ HTMLAttributes }) {
    return [
      'div',
      mergeAttributes(HTMLAttributes, {
        'data-callout': '',
        style:
          'padding: 12px 16px; background: #f4f4f5; border-left: 3px solid #1c1c1c; border-radius: 4px; margin: 8px 0;',
      }),
      0,
    ];
  },

  renderToReactEmail({ children, style }) {
    return (
      <div
        style={{
          ...style,
          padding: '12px 16px',
          backgroundColor: '#f4f4f5',
          borderLeft: '3px solid #1c1c1c',
          borderRadius: '4px',
          margin: '8px 0',
        }}
      >
        {children}
      </div>
    );
  },
});

const extensions = [StarterKit, Callout];

const content = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'This editor includes a custom Callout node. Use the toolbar to insert one.',
        },
      ],
    },
    {
      type: 'callout',
      content: [
        { type: 'text', text: 'This is a callout block — a custom extension!' },
      ],
    },
  ],
};

function Toolbar() {
  const { editor } = useCurrentEditor();
  if (!editor) return null;

  return (
    <button
      onClick={() =>
        editor
          .chain()
          .focus()
          .insertContent({
            type: 'callout',
            content: [{ type: 'text', text: 'New callout' }],
          })
          .run()
      }
    >
      <Info size={16} />
      Insert Callout
    </button>
  );
}

export function MyEditor() {
  return (
    <EditorProvider
      extensions={extensions}
      content={content}
      slotBefore={<Toolbar />}
    >
      <BubbleMenu />
    </EditorProvider>
  );
}
```

--------------------------------

### Install next-intl with bun

Source: https://react.email/docs/guides/internationalization/next-intl

Install the next-intl package using bun.

```bash
bun add next-intl
```

--------------------------------

### Install Project Dependencies (bun)

Source: https://react.email/docs/getting-started/automatic-setup

Install all necessary project dependencies using bun after creating the project.

```sh
bun install
```

--------------------------------

### Install next-intl with pnpm

Source: https://react.email/docs/guides/internationalization/next-intl

Install the next-intl package using pnpm.

```bash
pnpm add next-intl
```

--------------------------------

### Install next-intl with npm

Source: https://react.email/docs/guides/internationalization/next-intl

Install the next-intl package using npm.

```bash
npm i -S next-intl
```

--------------------------------

### Install next-intl with yarn

Source: https://react.email/docs/guides/internationalization/next-intl

Install the next-intl package using yarn.

```bash
yarn add next-intl
```

--------------------------------

### Basic Editor Setup with EditorProvider and StarterKit

Source: https://react.email/docs/editor/getting-started

Demonstrates the simplest manual setup using Tiptap's EditorProvider and StarterKit extension. This approach allows for custom UI composition.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

const content = `
  <h1>Welcome</h1>
  <p>Start typing or edit this text.</p>
`;

export function MyEditor() {
  return <EditorProvider extensions={extensions} content={content} />;
}
```

--------------------------------

### Install Project Dependencies (npm)

Source: https://react.email/docs/getting-started/automatic-setup

Install all necessary project dependencies using npm after creating the project.

```sh
npm install
```

--------------------------------

### Install Project Dependencies (yarn)

Source: https://react.email/docs/getting-started/automatic-setup

Install all necessary project dependencies using yarn after creating the project.

```sh
yarn
```

--------------------------------

### Run Development Server (bun)

Source: https://react.email/docs/getting-started/automatic-setup

Start the local development server using bun to preview your emails.

```sh
bun dev
```

--------------------------------

### Install React Intl

Source: https://react.email/docs/guides/internationalization/react-intl

Install the react-intl package using your preferred package manager.

```bash
npm i -S react-intl
```

```bash
bun add react-intl
```

```bash
yarn add react-intl
```

```bash
pnpm add react-intl
```

--------------------------------

### Run Development Server (npm)

Source: https://react.email/docs/getting-started/automatic-setup

Start the local development server using npm to preview your emails.

```sh
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://react.email/docs/integrations/inbound

Install the react-email and inboundemail packages using your preferred package manager.

```sh
npm install inboundemail react-email
```

```sh
yarn add inboundemail react-email
```

```sh
pnpm add inboundemail react-email
```

```sh
bun add inboundemail react-email
```

--------------------------------

### Install React Email with create-email (bun)

Source: https://react.email/docs/getting-started/automatic-setup

Use this command to initialize a new React Email project with bun.

```sh
bun create email
```

--------------------------------

### Install React Email Editor with pnpm

Source: https://react.email/docs/editor/getting-started

Install the editor and its peer dependencies using pnpm.

```sh
pnpm add @react-email/editor
```

--------------------------------

### Install React Email Editor with yarn

Source: https://react.email/docs/editor/getting-started

Install the editor and its peer dependencies using yarn.

```sh
yarn add @react-email/editor
```

--------------------------------

### Install React Email Editor with npm

Source: https://react.email/docs/editor/getting-started

Install the editor and its peer dependencies using npm.

```sh
npm install @react-email/editor
```

--------------------------------

### Install React Email Packages (bun)

Source: https://react.email/docs/getting-started/manual-setup

Install the necessary React Email packages and their peer dependencies using bun.

```sh
bun add @react-email/ui -D -E
bun add react-email react react-dom -E
```

--------------------------------

### Install Postmark and React Email

Source: https://react.email/docs/integrations/postmark

Install the necessary packages for Postmark and React Email using npm, yarn, or pnpm.

```sh
npm install postmark react-email
```

```sh
yarn add postmark react-email
```

```sh
pnpm add postmark react-email
```

--------------------------------

### Run Development Server (yarn)

Source: https://react.email/docs/getting-started/automatic-setup

Start the local development server using yarn to preview your emails.

```sh
yarn dev
```

--------------------------------

### Start Development Server

Source: https://react.email/docs/cli

Starts a local development server that watches for file changes and automatically rebuilds email templates. Use --dir to change the email template directory and --port to specify the server port.

```bash
npx email dev
```

--------------------------------

### Run Development Server (bun)

Source: https://react.email/docs/getting-started/manual-setup

Start the React Email development server using the 'email:dev' script with bun.

```sh
bun email:dev
```

--------------------------------

### Quick Start: Including Column Layouts

Source: https://react.email/docs/editor/features/column-layouts

Column extensions are included in StarterKit by default. No extra imports are needed to use them.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

export function MyEditor() {
  return <EditorProvider extensions={extensions} content={content} />;
}
```

--------------------------------

### Import StarterKit Extension

Source: https://react.email/docs/editor/advanced/extensions

Import the StarterKit which bundles all editor extensions for a convenient setup. This is the recommended approach unless fine-grained control is needed.

```tsx
import { StarterKit } from '@react-email/editor/extensions';

const extensions = [StarterKit];
```

--------------------------------

### Install Dependencies

Source: https://react.email/docs/integrations/scaleway

Install the necessary packages for React Email and the Scaleway Node.js SDK using npm, yarn, or pnpm.

```sh
npm install @scaleway/sdk react-email
```

```sh
yarn add @scaleway/sdk react-email
```

```sh
pnpm add @scaleway/sdk react-email
```

--------------------------------

### Install React Email with create-email (yarn)

Source: https://react.email/docs/getting-started/automatic-setup

Use this command to initialize a new React Email project with yarn.

```sh
yarn create email
```

--------------------------------

### Install react-i18next Dependencies

Source: https://react.email/docs/guides/internationalization/react-i18next

Install the necessary packages for react-i18next using npm, bun, yarn, or pnpm.

```bash
npm i -S react-i18next i18next i18next-resources-to-backend
```

```bash
bun add react-i18next i18next i18next-resources-to-backend
```

```bash
yarn add react-i18next i18next i18next-resources-to-backend
```

```bash
pnpm add react-i18next i18next i18next-resources-to-backend
```

--------------------------------

### Install Dependencies

Source: https://react.email/docs/integrations/azure-communication-email

Install the necessary packages for React Email and the Azure Communication Email SDK using npm, yarn, or pnpm.

```sh
npm install @azure/communication-email react-email
```

```sh
yarn add @azure/communication-email react-email
```

```sh
pnpm add @azure/communication-email react-email
```

--------------------------------

### Install Project Dependencies

Source: https://react.email/docs/contributing/development-workflow/1-setup

Install all necessary project dependencies using pnpm. Ensure you have run 'corepack enable' and 'corepack prepare pnpm@latest --activate' beforehand.

```bash
pnpm install
```

--------------------------------

### Install Dependencies

Source: https://react.email/docs/integrations/mailgun

Install the necessary packages for React Email and Mailgun integration using npm, yarn, or pnpm.

```sh
npm install mailgun.js form-data react-email
```

```sh
yarn add mailgun.js form-data react-email
```

```sh
pnpm add mailgun.js form-data react-email
```

--------------------------------

### Install React Email with create-email (npm)

Source: https://react.email/docs/getting-started/automatic-setup

Use this command to initialize a new React Email project with npm.

```sh
npx create-email@latest
```

--------------------------------

### Install React Email with create-email (pnpm)

Source: https://react.email/docs/getting-started/automatic-setup

Use this command to initialize a new React Email project with pnpm.

```sh
pnpm create email
```

--------------------------------

### Install React Email Packages (yarn)

Source: https://react.email/docs/getting-started/manual-setup

Install the necessary React Email packages and their peer dependencies using yarn.

```sh
yarn add @react-email/ui -D -E
yarn add react-email react react-dom -E
```

--------------------------------

### Run Development Server (npm)

Source: https://react.email/docs/getting-started/manual-setup

Start the React Email development server using the 'email:dev' script with npm.

```sh
npm run email:dev
```

--------------------------------

### Install Resend and React Email dependencies

Source: https://react.email/docs/integrations/resend

Install the necessary packages for sending emails with Resend and creating email templates with React Email.

```sh
npm install resend react-email
```

```sh
yarn add resend react-email
```

```sh
pnpm add resend react-email
```

--------------------------------

### Install React Email Packages (pnpm)

Source: https://react.email/docs/getting-started/manual-setup

Install the necessary React Email packages and their peer dependencies using pnpm.

```sh
pnpm add @react-email/ui -D -E
pnpm add react-email react react-dom -E
```

--------------------------------

### Install React Email Packages (npm)

Source: https://react.email/docs/getting-started/manual-setup

Install the necessary React Email packages and their peer dependencies using npm.

```sh
npm install @react-email/ui -D -E
npm install react-email react react-dom -E
```

--------------------------------

### Install React Email with pnpm

Source: https://react.email/docs/components/preview

Install the react-email package using pnpm. This command adds the package as a dependency.

```sh
pnpm add react-email -E
```

--------------------------------

### Run Development Server (pnpm)

Source: https://react.email/docs/getting-started/manual-setup

Start the React Email development server using the 'email:dev' script with pnpm.

```sh
pnpm email:dev
```

--------------------------------

### Install React Email with yarn

Source: https://react.email/docs/components/preview

Install the react-email package using yarn. This command adds the package as a dependency.

```sh
yarn add react-email -E
```

--------------------------------

### Install React Email with npm

Source: https://react.email/docs/components/preview

Install the react-email package using npm. This command adds the package as a dependency.

```sh
npm install react-email -E
```

--------------------------------

### Quick Start: Add Button and Slash Command

Source: https://react.email/docs/editor/features/buttons

Integrates default button bubble menu and a slash command for inserting buttons. Requires StarterKit, BubbleMenu, SlashCommand, and EditorProvider.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { BUTTON, BubbleMenu, SlashCommand } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

const content = "\n  <p>Click the button below to see its bubble menu.</p>\n  <div class=\"align-left\"><a class=\"node-button button\" data-id=\"react-email-button\" href=\"https://react.email\">Click me</a></div>\n  <p>Use the slash command menu (type /) to insert more buttons.</p>";

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu.ButtonDefault />
      <SlashCommand items={[BUTTON]} />
    </EditorProvider>
  );
}
```

--------------------------------

### Install MailerSend and React Email

Source: https://react.email/docs/integrations/mailersend

Install the necessary packages for React Email and the MailerSend Node.js SDK using npm, yarn, or pnpm.

```sh
npm install mailersend react-email
```

```sh
yarn add mailersend react-email
```

```sh
pnpm add mailersend react-email
```

--------------------------------

### Install Dependencies for SendGrid and React Email

Source: https://react.email/docs/integrations/sendgrid

Install the necessary packages for React Email and the SendGrid Node.js SDK using npm, yarn, or pnpm.

```sh
npm install @sendgrid/mail react-email
```

```sh
yarn add @sendgrid/mail react-email
```

```sh
pnpm add @sendgrid/mail react-email
```

--------------------------------

### Install Nodemailer and React Email

Source: https://react.email/docs/integrations/nodemailer

Install the necessary packages for sending emails with React Email and Nodemailer using npm, yarn, or pnpm.

```sh
npm install nodemailer react-email
```

```sh
yarn add nodemailer react-email
```

```sh
pnpm add nodemailer react-email
```

--------------------------------

### Toolbar Button Insertion Example

Source: https://react.email/docs/editor/features/buttons

A React component example demonstrating how to trigger the `setButton` command from a toolbar button. Requires the `useCurrentEditor` hook.

```tsx
import { useCurrentEditor } from '@tiptap/react';

function Toolbar() {
  const { editor } = useCurrentEditor();
  if (!editor) return null;

  return (
    <button onClick={() => editor.chain().focus().setButton().run()}>
      Insert Button
    </button>
  );
}
```

--------------------------------

### Style Resolution Example

Source: https://react.email/docs/editor/api-reference/compose-react-email

This example demonstrates how theme styles, inline styles, and extension defaults are merged within an extension's `renderToReactEmail` method. Theme styles are applied first, followed by inline overrides.

```tsx
renderToReactEmail({ children, style, node }) {
  return (
    <p style={{ 
      ...style,                            // theme styles
      ...inlineCssToJs(node.attrs?.style), // inline overrides
    }}>
      {children}
    </p>
  );
}

```

--------------------------------

### Initialize useEditor with Options

Source: https://react.email/docs/editor/api-reference/use-editor

Demonstrates how to initialize the useEditor hook with initial content, an update handler, and a ready handler. This setup is useful for custom editor implementations.

```tsx
import { useEditor } from '@react-email/editor/core';

export function MyEditor() {
  const { editor, isEditorEmpty, contentError } = useEditor({
    content: { type: 'doc', content: [] },
    onUpdate: (editor) => {
      console.log('Content changed:', editor.getJSON());
    },
    onReady: (editor) => {
      console.log('Editor ready');
    },
  });

  if (contentError) {
    return <div>Error: {contentError.message}</div>;
  }

  if (!editor) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <div ref={(el) => el && editor.setOptions({ element: el })} />
      {isEditorEmpty && <p>Start typing...</p>}
    </div>
  );
}
```

--------------------------------

### Install Plunk Node.js SDK and React Email

Source: https://react.email/docs/integrations/plunk

Install the necessary packages for sending emails with Plunk and React Email using npm, yarn, or pnpm.

```sh
npm install @plunk/node react-email
```

```sh
yarn add @plunk/node react-email
```

```sh
pnpm add @plunk/node react-email
```

--------------------------------

### Run Playground Server

Source: https://react.email/docs/contributing/development-workflow/6-editing-the-components

Start the playground development server using pnpm. This command enables hot reloading for your email component changes.

```sh
pnpm dev
```

--------------------------------

### Install Dependencies for AWS SES and React Email

Source: https://react.email/docs/integrations/aws-ses

Install the necessary packages for AWS SES and React Email using npm, yarn, or pnpm.

```sh
npm install @aws-sdk/client-ses react-email
```

```sh
yarn add @aws-sdk/client-ses react-email
```

```sh
pnpm add @aws-sdk/client-ses react-email
```

--------------------------------

### i18next setup with resources-to-backend

Source: https://react.email/docs/guides/internationalization/react-i18next

Configure i18next for React applications, using `resources-to-backend` to load translation files dynamically. This setup includes supported languages, fallback language, and language detection order.

```js
import i18next, { loadNamespaces } from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import { initReactI18next } from 'react-i18next';

i18next
  .use(initReactI18next)
  .use(resourcesToBackend((language, namespace) => import(`messages/${language}/${namespace}.json`)))
  .init({
    supportedLngs: ['en', 'es', 'pt'],
    fallbackLng: 'en',
    lng: undefined,
    detection: {
      order: ['path', 'htmlTag', 'cookie', 'navigator']
    },
    preload: typeof window === 'undefined' ? ['en', 'es', 'pt'] : [],
  });

export { i18next };
```

--------------------------------

### Create a Custom Theme

Source: https://react.email/docs/editor/api-reference/theming-api

Use `createTheme` to build a completely new theme from scratch, starting with a minimal reset. This is useful for establishing a unique visual identity for the editor.

```tsx
import { createTheme } from '@react-email/editor/plugins';

const theme = createTheme({
  body: { backgroundColor: '#1a1a2e', color: '#e2e8f0' },
  button: { backgroundColor: '#3b82f6', color: '#fff' },
});
```

--------------------------------

### Full Export Panel Example

Source: https://react.email/docs/editor/api-reference/compose-react-email

This example demonstrates a React component that allows users to export the current editor content to HTML. It includes state management for the exported HTML and an exporting status indicator.

```tsx
import { composeReactEmail } from '@react-email/editor/core';
import { useCurrentEditor } from '@tiptap/react';
import { useState } from 'react';

function ExportPanel() {
  const { editor } = useCurrentEditor();
  const [html, setHtml] = useState('');
  const [exporting, setExporting] = useState(false);

  const handleExport = async () => {
    if (!editor) return;
    setExporting(true);
    const result = await composeReactEmail({ editor, preview: null });
    setHtml(result.html);
    setExporting(false);
  };

  return (
    <div>
      <button onClick={handleExport} disabled={exporting}>
        {exporting ? 'Exporting...' : 'Export HTML'}
      </button>
      {html && (
        <textarea
          readOnly
          value={html}
          rows={16}
          style={{ width: '100%', fontFamily: 'monospace' }}
        />
      )}
    </div>
  );
}
```

--------------------------------

### Quick Start: Add Link Bubble Menu

Source: https://react.email/docs/editor/features/link-editing

Integrate the default link bubble menu into your editor to enable inline link editing. Requires StarterKit and BubbleMenu components.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { BubbleMenu } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

const content = "\
  <p>Click on <a href=\"https://react.email\" target=\"_blank\">this link</a> to see the link bubble menu.</p>\
  <p>Try adding more links by selecting text and pressing Cmd+K.</p>";

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu.LinkDefault />
    </EditorProvider>
  );
}
```

--------------------------------

### Quick Start Bubble Menu

Source: https://react.email/docs/editor/features/bubble-menu

Add BubbleMenu as a child of EditorProvider to enable the default text formatting toolbar. This snippet shows the basic setup with necessary imports and extensions.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { BubbleMenu } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu />
    </EditorProvider>
  );
}
```

--------------------------------

### Example CodeBlock Theme Configuration

Source: https://react.email/docs/components/code-block

Defines a theme object for the CodeBlock component, specifying styles for various Prism.js tokens and the base 'pre' element.

```json
{
  "base": {
    "color": "#f8f8f2",
    "background": "#282a36",
    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    "textAlign": "left",
    "whiteSpace": "pre",
    "wordSpacing": "normal",
    "wordBreak": "normal",
    "wordWrap": "normal",
    "lineHeight": "1.5",
    "MozTabSize": "4",
    "OTabSize": "4",
    "tabSize": "4",
    "WebkitHyphens": "none",
    "MozHyphens": "none",
    "MsHyphens": "none",
    "hyphens": "none",
    "padding": "1em",
    "margin": ".5em 0",
    "overflow": "auto",
    "borderRadius": "0.3em"
  },
  "comment": {
    "color": "#6272a4"
  },
  "prolog": {
    "color": "#6272a4"
  },
  "doctype": {
    "color": "#6272a4"
  },
  "cdata": {
    "color": "#6272a4"
  },
  "punctuation": {
    "color": "#f8f8f2"
  },
  "property": {
    "color": "#ff79c6"
  },
  "// ..."
}

```

--------------------------------

### Render Inspector with Editor Context

Source: https://react.email/docs/editor/api-reference/ui/inspector

Use Inspector.Root to wrap your inspector UI. It must be rendered within an EditorContext and requires the EmailTheming extension. This example shows a basic setup with document, node, and text inspection panels.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EmailTheming } from '@react-email/editor/plugins';
import { Inspector } from '@react-email/editor/ui';
import { EditorContent, EditorContext, useEditor } from '@tiptap/react';

const extensions = [StarterKit, EmailTheming];

export function MyEditor() {
  const editor = useEditor({
    extensions,
    content,
  });

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="flex">
        <EditorContent editor={editor} />
        <Inspector.Root className="w-60 shrink-0 border-l p-4">
          <Inspector.Document />
          <Inspector.Node />
          <Inspector.Text />
        </Inspector.Root>
      </div>
    </EditorContext.Provider>
  );
}
```

--------------------------------

### Preview Documentation

Source: https://react.email/docs/contributing/development-workflow/5-writing-docs

Run this command in the 'apps/docs' directory to preview the documentation locally. It includes theme configuration for the preview.

```sh
pnpm dev

```

--------------------------------

### Create a Theme from Scratch

Source: https://react.email/docs/editor/features/theming

Use `createTheme` to build a new theme without inheriting from presets. This example defines a dark theme with custom styles for body, container, h1, link, and button.

```tsx
import { createTheme } from '@react-email/editor/plugins';

const darkTheme = createTheme({
  body: { backgroundColor: '#1a1a2e', color: '#e2e8f0' },
  container: { backgroundColor: '#16213e', color: '#e2e8f0' },
  h1: { color: '#e2e8f0' },
  link: { color: '#60a5fa' },
  button: { backgroundColor: '#3b82f6', color: '#fff', borderRadius: '4px' },
});
```

--------------------------------

### Build a Package with pnpm

Source: https://react.email/docs/contributing/development-workflow/4-building

Run this command within a package directory (e.g., package/render) to initiate the build process using pnpm.

```bash
pnpm build
```

--------------------------------

### Install Babel Preset for TypeScript

Source: https://react.email/docs/integrations/overview

Install the necessary Babel preset for TypeScript integration when using React Email with NodeJS. This is required for transpiling your email components.

```sh
npm install -D @babel/preset-typescript
```

```sh
yarn add -D @babel/preset-typescript
```

```sh
pnpm add -D @babel/preset-typescript
```

--------------------------------

### Install react-email using npm, yarn, or pnpm

Source: https://react.email/docs/components/head

Install the react-email package using your preferred package manager. The -E flag ensures the package is added as a direct dependency.

```sh
npm install react-email -E
```

```sh
yarn add react-email -E
```

```sh
pnpm add react-email -E
```

--------------------------------

### HTML Content with Links

Source: https://react.email/docs/editor/features/link-editing

Demonstrates how `<a>` tags within HTML strings are automatically parsed into the editor's link model. The link extension is included in `StarterKit` with `openOnClick` disabled by default.

```tsx
const content = "\
  <p>Visit <a href=\"https://react.email\" target=\"_blank\">React Email</a> for more info.</p>";
```

--------------------------------

### Lint and Format Project

Source: https://react.email/docs/contributing/development-workflow/3-linting

Execute this command in the root of the workspace to lint and format the entire project. Ensure this is done before creating a Pull Request.

```bash
pnpm lint:fix
```

--------------------------------

### Create a Testing Email Template

Source: https://react.email/docs/contributing/development-workflow/6-editing-the-components

Create a new file for your email template in the playground/emails directory. This example demonstrates a basic HTML email structure with Tailwind CSS classes for styling.

```tsx
import { Html, Head, Body, Tailwind, Text } from 'react-email';

export default function Testing() {
  return <Tailwind>
    <Html>
      <Head/>

      <Body className="bg-black text-white">
        <Text className="m-0 my-4 bg-cyan-200 text-slate-800">
          This is a testing email template.
        </Text>
      </Body>
    </Html>
  </Tailwind>;
}
```

--------------------------------

### Add 'build' script to package.json

Source: https://react.email/docs/deployment

Add the `email build` command to the `scripts` section of your `package.json` file to enable building the email preview server.

```json
{
  "scripts": {
    "build": "email build"
  }
}
```

--------------------------------

### createTheme

Source: https://react.email/docs/editor/api-reference/theming-api

Creates a custom theme from scratch, using the 'minimal' reset as a base. It allows defining styles for various components like the body and buttons.

```APIDOC
## createTheme

### Description
Creates a custom theme from scratch (uses `minimal` reset as base). Allows defining styles for body, button, etc.

### Method
`createTheme(options: { body?: ThemeComponentStyles; button?: ThemeComponentStyles; [key: string]: ThemeComponentStyles | undefined }): ThemeConfig`

### Parameters
#### Options
- **body** (ThemeComponentStyles) - Optional - Styles for the email body.
- **button** (ThemeComponentStyles) - Optional - Styles for buttons.

### Returns
- **ThemeConfig** - An object containing the theme configuration.

### Example
```tsx
import { createTheme } from '@react-email/editor/plugins';

const theme = createTheme({
  body: { backgroundColor: '#1a1a2e', color: '#e2e8f0' },
  button: { backgroundColor: '#3b82f6', color: '#fff' },
});
```
```

--------------------------------

### Configure StarterKit Extensions

Source: https://react.email/docs/editor/advanced/extensions

Pass options to configure individual extensions within StarterKit or set them to false to disable specific functionalities like strikethrough or code blocks.

```tsx
const extensions = [
  StarterKit.configure({
    // Customize heading levels
    Heading: { levels: [1, 2] },

    // Disable strikethrough
    Strike: false,

    // Disable code blocks
    CodeBlockPrism: false,
  }),
];
```

--------------------------------

### Create React Email Template

Source: https://react.email/docs/integrations/mailgun

Define your email structure using React components. This example shows a simple email with a button.

```tsx
import { Button, Html } from 'react-email';

interface EmailProps {
  url: string;
}

export function Email({ url }: EmailProps) {
  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
}
```

--------------------------------

### Update Dependencies with bun

Source: https://react.email/docs/getting-started/updating-react-email

Use this command to uninstall old packages and install the latest versions of react-email and @react-email/ui when updating from v5.0 to v6.0.

```sh
bun remove @react-email/components @react-email/preview-server
bun install react-email@latest @react-email/ui@latest
```

--------------------------------

### Set up Resend integration with React Email CLI

Source: https://react.email/docs/integrations/resend

Use the React Email CLI to set up the Resend integration by providing your Resend API Key.

```bash
npx react-email@latest resend setup
```

--------------------------------

### Basic Inspector Setup

Source: https://react.email/docs/editor/features/inspector

Integrate the Inspector component by rendering `Inspector.Root` alongside your editor content. Ensure `EmailTheming` is included in your editor extensions. The inspector automatically adapts to document, node, or text selections.

```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EmailTheming } from '@react-email/editor/plugins';
import { Inspector } from '@react-email/editor/ui';
import { EditorContent, EditorContext, useEditor } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit, EmailTheming];

export function MyEditor() {
  const editor = useEditor({
    extensions,
    content,
  });

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="flex min-h-0 overflow-hidden">
        <div className="flex-1 min-w-0 p-4">
          <EditorContent editor={editor} />
        </div>

        <Inspector.Root className="w-60 shrink-0 border-l p-4">
          <Inspector.Breadcrumb />
          <Inspector.Document />
          <Inspector.Node />
          <Inspector.Text />
        </Inspector.Root>
      </div>
    </EditorContext.Provider>
  );
}
```

--------------------------------

### Update Dependencies with pnpm

Source: https://react.email/docs/getting-started/updating-react-email

Use this command to uninstall old packages and install the latest versions of react-email and @react-email/ui when updating from v5.0 to v6.0.

```sh
pnpm remove @react-email/components @react-email/preview-server
pnpm install react-email@latest @react-email/ui@latest
```

--------------------------------

### Serve Static Files in Email Preview

Source: https://react.email/docs/cli

Place static files in the 'static' directory within your email templates directory to serve them via the preview server. This example shows how to reference an image using the /static/ path.

```jsx
export default function Email(props) {
  return (
    <div>
      <img src="/static/email-logo.png" />
    </div>
  );
}
```

--------------------------------

### Update Dependencies with yarn

Source: https://react.email/docs/getting-started/updating-react-email

Use this command to uninstall old packages and install the latest versions of react-email and @react-email/ui when updating from v5.0 to v6.0.

```sh
yarn remove @react-email/components @react-email/preview-server
yarn install react-email@latest @react-email/ui@latest
```
Tokens:
Raw