# Template emails with React Email > Author email templates as React components with React Email — full TypeScript and Tailwind support and a live preview server — then render them to HTML and send with POST /emails. With [React Email](https://react.email), you write email templates as React components — with full TypeScript and [Tailwind support](https://react.email/docs/components/tailwind) and a local preview server. Preview in real time with hot reload, then render to email-friendly HTML or plain text and send it through MailBlastr with [POST /emails](https://www.mailblastr.com/docs/api/emails-send). 1. **Scaffold a project** — Use create-email to generate a starter project with example templates, a preview server, and the @react-email/components package. 2. **Write a template** — Author each email as a .tsx component, optionally with typed props that become variables at send time. 3. **Preview locally** — Run the preview server to see your email render with hot reload, plus linter, compatibility, and spam tooling. 4. **Render and send** — Render the component to HTML and POST it to MailBlastr. ## Set up a React Email project ```bash npx create-email@latest cd react-email-starter npm install ``` This creates a `react-email-starter` folder with an `emails/` directory and a few example templates. Already have a project? Follow the React Email manual setup and add an `emails/` directory wherever you prefer. ## Write your template Create `emails/welcome.tsx`. Components are imported from `react-email`; add props to use as variables when sending. **emails/welcome.tsx** ```tsx import { Body, Button, Container, Head, Heading, Html, Preview, Section, pixelBasedPreset, Tailwind, Text, } from 'react-email'; import * as React from 'react'; interface WelcomeEmailProps { firstName?: string; productName?: string; } export default function WelcomeEmail({ firstName = 'there', productName = 'Acme', }: WelcomeEmailProps) { return ( Welcome to {productName} Welcome, {firstName} Thanks for signing up for {productName}. Let's get you started.

); } ``` ## Preview locally Add an `email:dev` script and run the preview server. Open [localhost:3000](http://localhost:3000) and pick `welcome.tsx` from the sidebar. The preview offers desktop/mobile toggles, source HTML, and plain-text output, plus a **Linter**, a **Compatibility** check against caniemail, and a **Spam** checker. **package.json** ```json { "scripts": { "email:dev": "email dev" } } ``` ## Render and send with MailBlastr Render the component to an HTML string with `@react-email/render`, then send it with the SDK: **sendEmail.ts** ```ts import { render } from '@react-email/render'; import { MailBlastr } from 'mailblastr'; import WelcomeEmail from './emails/welcome'; const mb = new MailBlastr(process.env.MAILBLASTR_API_KEY); const html = await render( WelcomeEmail({ firstName: 'Ada', productName: 'Acme' }), ); const { data, error } = await mb.emails.send({ from: 'Acme ', to: ['delivered@yourdomain.com'], subject: 'Welcome to Acme', html, }); const id = data?.id; ``` > **Note:** Prefer to store templates on MailBlastr and reference them by id — with variables substituted at send time? See the [Templates overview](https://www.mailblastr.com/docs/templates/overview), [variables](https://www.mailblastr.com/docs/templates/variables), and [sending with a template](https://www.mailblastr.com/docs/templates/sending). > **Note:** To let your users edit templates visually inside your own product, see [Embed the React Email editor](https://www.mailblastr.com/docs/kb/embed-react-email-editor).