Skip to content

feat(docs): add inbound integration page to documentation #2594

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

Draft
wants to merge 1 commit into
base: canary
Choose a base branch
from
Draft

feat(docs): add inbound integration page to documentation #2594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions apps/docs/docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
"pages": [
"integrations/overview",
"integrations/resend",
"integrations/inbound",
"integrations/nodemailer",
"integrations/sendgrid",
"integrations/postmark",
Expand Down
99 changes: 99 additions & 0 deletions apps/docs/integrations/inbound.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
---
title: 'Send (& recieve) emails using Inbound'
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Oct 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Typo: "recieve" should be spelled "receive" in the page title.

Prompt for AI agents 
Address the following comment on apps/docs/integrations/inbound.mdx at line 2:

<comment>Typo: &quot;recieve&quot; should be spelled &quot;receive&quot; in the page title.</comment>

<file context>
@@ -0,0 +1,99 @@
+---
+title: &#39;Send (&amp; recieve) emails using Inbound&#39;
+sidebarTitle: &#39;Inbound&#39;
+description: &#39;Learn how to send and recieve emails using React Email and the Inbound Node.js SDK.&#39;
</file context>
Suggested change
title: 'Send (& recieve) emails using Inbound'
+title: 'Send (& receive) emails using Inbound'
Fix with Cubic

sidebarTitle: 'Inbound'
description: 'Learn how to send and recieve emails using React Email and the Inbound Node.js SDK.'
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Oct 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Typo in the description: "recieve" should be "receive".

Prompt for AI agents 
Address the following comment on apps/docs/integrations/inbound.mdx at line 4:

<comment>Typo in the description: &quot;recieve&quot; should be &quot;receive&quot;.</comment>

<file context>
@@ -0,0 +1,99 @@
+---
+title: &#39;Send (&amp; recieve) emails using Inbound&#39;
+sidebarTitle: &#39;Inbound&#39;
+description: &#39;Learn how to send and recieve emails using React Email and the Inbound Node.js SDK.&#39;
+&#39;og:image&#39;: &#39;https://react.email/static/covers/react-email.png&#39;
+---
</file context>
Suggested change
description: 'Learn how to send and recieve emails using React Email and the Inbound Node.js SDK.'
+description: 'Learn how to send and receive emails using React Email and the Inbound Node.js SDK.'
Fix with Cubic

'og:image': 'https://react.email/static/covers/react-email.png'
---

## 1. Install dependencies

Get the [@react-email/components](https://www.npmjs.com/package/@react-email/components) package and the [Inbound Node.js SDK](https://www.npmjs.com/package/inboundemail).

Make sure you have an account on [inbound](https://inbound.new), you will need an inbound API key.

<CodeGroup>

```sh npm
npm install inboundemail @react-email/components
```

```sh yarn
yarn add inboundemail @react-email/components
```

```sh pnpm
pnpm add inboundemail @react-email/components
```

```sh bun
bun add inboundemail @react-email/components
```

</CodeGroup>

## 2. Create an email using React

Start by building your email template in a `.jsx` or `.tsx` file.

```tsx email.tsx
import * as React from 'react';
import { Html, Button } from "@react-email/components";

export function Email(props) {
const { url } = props;

return (
<Html lang="en">
<Button href={url}>Click me</Button>
</Html>
);
}

export default Email;
```

## 3. Send email

<Info>When integrating with other services, you need to convert your React template into HTML before sending. Inbound takes care of that for you. You can just directly pass the React template to the SDK.</Info>

Import the email template you just built and use the Inbound SDK to send it.

```tsx
import { Inbound } from 'inboundemail';
import { Email } from './email';

const inbound = new Inbound(process.env.INBOUND_API_KEY);

await inbound.emails.send({
from: '[email protected]',
to: '[email protected]',
subject: 'hello world',
react: <Email url="https://example.com" />,
});
```

## 4. Reply to an email

Use the Inbound SDK to reply to an email with the same template you just created.

```tsx
import { Inbound } from 'inboundemail';
import { Email } from './email';

const inbound = new Inbound(process.env.INBOUND_API_KEY);

await inbound.emails.reply(email.id,{
react: <Email url="https://example.com" />,
});
```

## Try it yourself

<Card
title="Inbound example"
icon='arrow-up-right-from-square'
iconType="duotone"
href="https://github.com/inboundemail/inbound"
>
See the full source code.
</Card>
Loading