Skip to content

chore(docs): renovate guides #2722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gabrielmfern wants to merge 5 commits into
base: canary
Choose a base branch
from
Open

chore(docs): renovate guides #2722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4d54ead
chore(docs): renovate manual setup
gabrielmfern Dec 9, 2025
394a3c2
add specific screeshot to automatic setup and add bun
gabrielmfern Dec 9, 2025
c10995a
remove create directory step, and update local dev screenshot
gabrielmfern Dec 9, 2025
d231af2
add screesnhto for manuial setup without zoom value
gabrielmfern Dec 9, 2025
4afe3d7
update monorepo guides
gabrielmfern Dec 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion apps/docs/getting-started/automatic-setup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ yarn create email
pnpm create email
```

```sh bun
bun create email
```

</CodeGroup>

This will create a new folder called `react-email-starter` with a few email templates.
Expand All @@ -50,6 +54,10 @@ yarn
pnpm install
```

```sh bun
bun install
```

</CodeGroup>

Then, run the development server:
Expand All @@ -68,14 +76,18 @@ yarn dev
pnpm dev
```

```sh bun
bun dev
```

</CodeGroup>

## 3. See changes live

Visit [localhost:3000](http://localhost:3000) and edit any of the files on the `emails` folder to see the changes.

<Frame>
<img alt="Local Development" src="/images/local-dev.jpg" />
<img alt="Local Development" src="/images/automatic-setup-dev.png" />
</Frame>

## 4. Next steps
Expand Down
65 changes: 29 additions & 36 deletions apps/docs/getting-started/manual-setup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,110 +10,103 @@ import NextSteps from '/snippets/next-steps.mdx'

<Note>Are you using monorepos? Then we recommend you follow our [monorepos setup](/getting-started/monorepo-setup/choose-package-manager).</Note>

## 1. Create directory

Create a new folder called `react-email-starter` and initialize a new npm project:

```sh
mkdir react-email-starter
cd react-email-starter
npm init
```

## 2. Install dependencies
## 1. Install dependencies

Install the React Email package locally and a few components.

<CodeGroup>

```sh npm
npm install react-email -D -E
npm install react-email @react-email/preview-server -D -E
npm install @react-email/components react react-dom -E
```

```sh yarn
yarn add react-email -D -E
yarn add react-email @react-email/preview-server -D -E
yarn add @react-email/components react react-dom -E
```

```sh pnpm
pnpm add react-email -D -E
pnpm add react-email @react-email/preview-server -D -E
pnpm add @react-email/components react react-dom -E
```

```sh bun
bun add react-email -D -E
bun add react-email @react-email/preview-server -D -E
bun add @react-email/components react react-dom -E
```

</CodeGroup>

## 3. Add scripts
## 2. Add scripts

Include the following script in your `package.json` file.

```json package.json
{
"scripts": {
"dev": "email dev"
"email:dev": "email dev"
}
}
```

## 4. Write an email template
## 3. Write an email template

Create a new folder called `emails`, create a file inside called `my-email.tsx`, and add the following code:
Create a new folder called `emails`, create a file inside called `email.tsx`, and add the following code:

```jsx emails/my-email.tsx
import { Button, Html } from "@react-email/components";
```jsx emails/email.tsx
import { Button, Html, Head, Body } from "@react-email/components";
import * as React from "react";

export default function Email() {
return (
<Html>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
<Head />
<Body>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
</Body>
</Html>
);
}
```

## 5. Run locally
## 4. Run locally

Start the development server.

<CodeGroup>

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

```sh yarn
yarn dev
yarn email:dev
```

```sh pnpm
pnpm dev
pnpm email:dev
```

```sh bun
bun dev
bun email:dev
```

</CodeGroup>

## 6. See changes live
## 5. See changes live

Visit [localhost:3000](http://localhost:3000) and edit the `index.tsx` file to see the changes.
Visit [localhost:3000](http://localhost:3000) and edit `email.tsx` file to see the changes.

<Frame>
<img alt="Local Development" src="/images/local-dev.jpg" />
<img alt="Local Development" src="/images/manual-setup-dev.png" />
</Frame>

## 7. Next steps
## 6. Next steps

<NextSteps/>
25 changes: 13 additions & 12 deletions apps/docs/getting-started/monorepo-setup/bun.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,24 +46,25 @@ Include the following script in your `package.json` file.

Create a new folder called `emails`, create a file inside called `MyEmail.tsx` and add the following example code:

```jsx packages/transactional/emails/MyEmail.tsx
import { Button, Html } from "@react-email/components";
```jsx packages/transactional/emails/email.tsx
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Dec 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Documentation inconsistency: The code block filename was changed to email.tsx but the instruction text above still says to create MyEmail.tsx. Users following this guide will be confused about which filename to use. Consider updating the instruction text to match the new filename.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/getting-started/monorepo-setup/bun.mdx, line 49:

<comment>Documentation inconsistency: The code block filename was changed to `email.tsx` but the instruction text above still says to create `MyEmail.tsx`. Users following this guide will be confused about which filename to use. Consider updating the instruction text to match the new filename.</comment>

<file context>
@@ -46,24 +46,25 @@ Include the following script in your `package.json` file.
 
-```jsx packages/transactional/emails/MyEmail.tsx
-import { Button, Html } from &quot;@react-email/components&quot;;
+```jsx packages/transactional/emails/email.tsx
+import { Button, Html, Head, Body } from &quot;@react-email/components&quot;;
 import * as React from &quot;react&quot;;
</file context>
Fix with Cubic

import { Button, Html, Head, Body } from "@react-email/components";
import * as React from "react";

export const MyEmail = () => {
export default function Email() {
return (
<Html>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
<Head />
<Body>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
</Body>
</Html>
);
}

export default MyEmail;
```

## 5. Run preview server
Expand All @@ -79,7 +80,7 @@ bun dev
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.

<Frame>
<img alt="Local Development" src="/images/local-dev.jpg" />
<img alt="Local Development" src="/images/manual-setup-dev.png" />
</Frame>

## 7. Try it yourself
Expand Down
27 changes: 14 additions & 13 deletions apps/docs/getting-started/monorepo-setup/npm.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Include a new `package.json` and do not forget to add this to the `workspaces` o
Install React Email in the `transactional` workspace.

```sh packages/transactional
npm install react-email -D -E
npm install react-email @react-email/preview-server -D -E
npm install @react-email/components react react-dom -E
```

Expand All @@ -46,24 +46,25 @@ Include the following script in your `package.json` file.

Create a new folder called `emails`, create a file inside called `MyEmail.tsx` and add the following example code:

```jsx packages/transactional/emails/MyEmail.tsx
import { Button, Html } from "@react-email/components";
```jsx packages/transactional/emails/email.tsx
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Dec 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Documentation inconsistency: The code block path was changed to email.tsx but the prose in Step 4 still instructs users to create MyEmail.tsx, and Step 6 still references emails/MyEmail.tsx. Either the prose descriptions should be updated to match the new filename, or the code block path should remain as MyEmail.tsx.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/getting-started/monorepo-setup/npm.mdx, line 49:

<comment>Documentation inconsistency: The code block path was changed to `email.tsx` but the prose in Step 4 still instructs users to create `MyEmail.tsx`, and Step 6 still references `emails/MyEmail.tsx`. Either the prose descriptions should be updated to match the new filename, or the code block path should remain as `MyEmail.tsx`.</comment>

<file context>
@@ -46,24 +46,25 @@ Include the following script in your `package.json` file.
 
-```jsx packages/transactional/emails/MyEmail.tsx
-import { Button, Html } from &quot;@react-email/components&quot;;
+```jsx packages/transactional/emails/email.tsx
+import { Button, Html, Head, Body } from &quot;@react-email/components&quot;;
 import * as React from &quot;react&quot;;
</file context>
Fix with Cubic

import { Button, Html, Head, Body } from "@react-email/components";
import * as React from "react";

export const MyEmail = () => {
export default function Email() {
return (
<Html>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
<Head />
<Body>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
</Body>
</Html>
);
}

export default MyEmail;
```

## 5. Run preview server
Expand All @@ -79,7 +80,7 @@ npm run dev
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.

<Frame>
<img alt="Local Development" src="/images/local-dev.jpg" />
<img alt="Local Development" src="/images/manual-setup-dev.png" />
</Frame>

## 7. Try it yourself
Expand Down
27 changes: 14 additions & 13 deletions apps/docs/getting-started/monorepo-setup/pnpm.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ in there setup a new `package.json` and do not forget to add this to your `pnpm-
Install React Email in the `transactional` workspace.

```sh packages/transactional
pnpm add react-email -D -E
pnpm add react-email @react-email/preview-server -D -E
pnpm add @react-email/components react react-dom -E
```

Expand All @@ -45,24 +45,25 @@ Include the following script in your `package.json` file.

Create a new folder called `emails`, create a file inside called `MyEmail.tsx` and add the following example code:

```jsx packages/transactional/emails/MyEmail.tsx
import { Button, Html } from "@react-email/components";
```jsx packages/transactional/emails/email.tsx
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Dec 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Documentation inconsistency: The code block path changed to email.tsx, but Step 4's text still instructs creating MyEmail.tsx and Step 6 references editing emails/MyEmail.tsx. Consider updating the prose to match the new filename or keeping the original filename.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/getting-started/monorepo-setup/pnpm.mdx, line 48:

<comment>Documentation inconsistency: The code block path changed to `email.tsx`, but Step 4&#39;s text still instructs creating `MyEmail.tsx` and Step 6 references editing `emails/MyEmail.tsx`. Consider updating the prose to match the new filename or keeping the original filename.</comment>

<file context>
@@ -45,24 +45,25 @@ Include the following script in your `package.json` file.
 
-```jsx packages/transactional/emails/MyEmail.tsx
-import { Button, Html } from &quot;@react-email/components&quot;;
+```jsx packages/transactional/emails/email.tsx
+import { Button, Html, Head, Body } from &quot;@react-email/components&quot;;
 import * as React from &quot;react&quot;;
</file context>
Suggested change
```jsx packages/transactional/emails/email.tsx
```jsx packages/transactional/emails/MyEmail.tsx
Fix with Cubic

import { Button, Html, Head, Body } from "@react-email/components";
import * as React from "react";

export const MyEmail = () => {
export default function Email() {
return (
<Html>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
<Head />
<Body>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
</Body>
</Html>
);
}

export default MyEmail;
```

## 5. Run preview server
Expand All @@ -78,7 +79,7 @@ pnpm dev
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.

<Frame>
<img alt="Local Development" src="/images/local-dev.jpg" />
<img alt="Local Development" src="/images/manual-setup-dev.png" />
</Frame>

## 7. Try it yourself
Expand Down
27 changes: 14 additions & 13 deletions apps/docs/getting-started/monorepo-setup/yarn.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ nodeLinker: node-modules
Install React Email in the `transactional` workspace.

```sh packages/transactional
yarn add react-email -D -E
yarn add react-email @react-email/preview-server -D -E
yarn add @react-email/components react react-dom -E
```

Expand All @@ -61,24 +61,25 @@ Include the following script in your `package.json` file.

Create a new folder called `emails`, create a file inside called `MyEmail.tsx` and add the following example code:

```jsx packages/transactional/emails/MyEmail.tsx
import { Button, Html } from "@react-email/components";
```jsx packages/transactional/emails/email.tsx
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Dec 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: File name inconsistency: The code block now references email.tsx but the surrounding documentation (step 5 prose and step 7) still references MyEmail.tsx. Consider updating step 5 to say "create a file inside called email.tsx" and step 7 to reference emails/email.tsx.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/getting-started/monorepo-setup/yarn.mdx, line 64:

<comment>File name inconsistency: The code block now references `email.tsx` but the surrounding documentation (step 5 prose and step 7) still references `MyEmail.tsx`. Consider updating step 5 to say &quot;create a file inside called `email.tsx`&quot; and step 7 to reference `emails/email.tsx`.</comment>

<file context>
@@ -61,24 +61,25 @@ Include the following script in your `package.json` file.
 
-```jsx packages/transactional/emails/MyEmail.tsx
-import { Button, Html } from &quot;@react-email/components&quot;;
+```jsx packages/transactional/emails/email.tsx
+import { Button, Html, Head, Body } from &quot;@react-email/components&quot;;
 import * as React from &quot;react&quot;;
</file context>
Fix with Cubic

import { Button, Html, Head, Body } from "@react-email/components";
import * as React from "react";

export const MyEmail = () => {
export default function Email() {
return (
<Html>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
<Head />
<Body>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
</Body>
</Html>
);
}

export default MyEmail;
```

## 6. Run preview server
Expand All @@ -94,7 +95,7 @@ yarn dev
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.

<Frame>
<img alt="Local Development" src="/images/local-dev.jpg" />
<img alt="Local Development" src="/images/manual-setup-dev.png" />
</Frame>

## 8. Try it yourself
Expand Down
Binary file added apps/docs/images/automatic-setup-dev.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed apps/docs/images/local-dev.jpg
View file
Open in desktop
Binary file not shown.
Binary file added apps/docs/images/manual-setup-dev.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading