---
title: Implement Email Marketing
category: CMS Features
order: 4
status: published
summary: Configure email marketing page types, render email HTML, and let editors create and send campaigns visually.
estimatedTime: 12 min
keywords: email marketing email sending provider react-email page type renderEmailHtml newsletter campaigns
---
React Bricks Email Marketing lets editors create email campaigns with the same visual editing model used for website pages.
In code, developers configure email marketing page types and email-specific bricks. In the editor, content and marketing teams create campaigns, select an Email Sending Provider, choose a list and sender, send tests, send campaigns, or schedule them.
Docs reference:
[Email Marketing](https://docs.reactbricks.com/cms-features/email-marketing/)
## Connect an Email Sending Provider
Configure an Email Sending Provider from the React Bricks Dashboard.
Supported providers include:
- MailChimp
- Brevo
- Mailerlite
- GetResponse
- SendGrid
- Resend
- ConvertKit
Once a provider is connected, email marketing pages can use it for campaign delivery.
## Configure an email marketing page type
Email campaigns are created from page types marked with `isEmailMarketing: true`.
Email marketing page types can also define:
- `renderWrapper`, to wrap the content differently for the Admin preview and the final email output
- `renderEmailHtml`, to generate the final HTML sent to the Email Sending Provider
```tsx title="react-bricks/pageTypes.ts"
import {
Body,
Container,
Font,
Head,
Html,
pretty,
render,
Tailwind,
} from '@react-email/components'
const pageTypes: types.IPageType[] = [
{
name: 'newsletter',
pluralName: 'newsletters',
isEmailMarketing: true,
renderWrapper: (args) => {
if (args.renderEnvironment === 'Admin') {
return {args.children}
}
if (args.renderEnvironment === 'Email') {
return (
{args.children}
)
}
return args.children
},
renderEmailHtml: async (args) => {
const html = await render(args.children)
return pretty(html)
},
},
]
```
Docs reference:
[Implement Email Marketing](https://docs.reactbricks.com/common-tasks/implement-email-marketing/)
## Understand the rendering functions
`renderWrapper` lets you adapt the same React Bricks content for different render environments.
For example:
- in the Admin preview, you can wrap the content with a centered `Container`
- in the Email output, you can wrap the content with `Html`, `Head`, `Body`, `Tailwind`, fonts, and the structure required by email clients
- in other render environments, you can return `args.children`
`renderEmailHtml` receives the rendered React children and returns the final HTML string that React Bricks sends to the Email Sending Provider.
When using `react-email`, call `render(args.children)` and optionally format the result with `pretty`.
## Use email-specific bricks
Email clients are stricter than browsers. Many CSS features that work on the web do not work reliably in email clients.
For email content, prefer bricks designed for email output.
The React Bricks starter projects include optional email marketing bricks based on `react-email`. They can be installed from the CLI and used as a starting point for your own email design system.
## Create and send campaigns
After the page type is configured, editors can create email marketing pages in React Bricks.
Pages with `isEmailMarketing: true` include campaign-specific options in the editor.
Editors can select:
- an Email Sending Provider
- a list
- a sender
- a campaign name
They can also send a test, send the campaign immediately, or schedule it.
## Check the result
After wiring Email Marketing:
- connect an Email Sending Provider in the dashboard
- create a page type with `isEmailMarketing: true`
- add `renderWrapper` and `renderEmailHtml`
- use email-specific bricks for campaign content
- create an email marketing page in the editor
- select provider, list, sender, and campaign name
- send a test email and verify the rendered output
- send or schedule the campaign
## Related docs
- [Email Marketing](https://docs.reactbricks.com/cms-features/email-marketing/)
- [Implement Email Marketing](https://docs.reactbricks.com/common-tasks/implement-email-marketing/)
- [Page Types](https://docs.reactbricks.com/page-types/#email-marketing-page-types)
- [IPageType type reference](https://docs.reactbricks.com/api-reference/types-reference/interfaces/#ipagetype)