DEV Community

Alex Spinov
Alex Spinov

Posted on

React Email Has a Free API That Most Developers Dont Know About

#react #email #webdev #javascript

React Email lets you build beautiful emails using React components. Compiles to cross-client compatible HTML.

Template 

import { Html, Body, Container, Text, Button } from "@react-email/components";

export function WelcomeEmail({ name, url }) {
  return (
    <Html>
      <Body style={{ backgroundColor: "#f6f9fc", fontFamily: "sans-serif" }}>
        <Container style={{ maxWidth: 580, padding: 20 }}>
          <Text style={{ fontSize: 20 }}>Welcome, {name}!</Text>
          <Button href={url} style={{ backgroundColor: "#5469d4", color: "#fff", padding: "12px 20px" }}>
            Log In
          </Button>
        </Container>
      </Body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Render 

import { render } from "@react-email/render";
const html = await render(<WelcomeEmail name="John" url="https://app.example.com" />);
Enter fullscreen mode Exit fullscreen mode

Key Features

  • React components for emails
  • Live preview dev server
  • Cross-client HTML output
  • Works with any email provider

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify or email spinov001@gmail.com for custom solutions.

Top comments (0)