Open source
Open-Source React Components for Email-Safe HTML
@emailux/components is a free, MIT-licensed React component library for authoring email-safe HTML. Email-safe primitives plus a getHtml renderer — use it standalone with any ESP, no EmailUX account required.
01
Email-safe primitives
Html, Head, Font, Body, Img, Text, Card, Table, and Button primitives that render to HTML tested against Gmail, Outlook, Apple Mail, and dark mode.
02
getHtml renderer
Convert any React tree built with the components into production-ready email HTML with a single getHtml(<EmailTemplate />) call.
03
MIT-licensed, no account
Install from npm, drop into any Node project, and ship through whichever ESP you already use. No EmailUX account or API key required.
Example: a welcome email with @emailux/components
The library exports the same primitives EmailUX Studio uses internally. Build the email as a React tree and call getHtml to get the HTML to send through your ESP:
import {
Html, Head, Font, Body, Img, Text, Card, Table, Button, getHtml,
} from "@emailux/components";
function EmailTemplate() {
return (
<Html>
<Head>
<Font
family="Inter"
url="https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2"
format="woff2"
fallback="Arial"
style="normal"
weight="400"
targetSelectors={["html", "body", ".emailux-table"]}
/>
<title>Platform name</title>
</Head>
<Body
previewText="Some preview pre-header text."
width={376}
padding="20px 20px"
outerBgColor="#fff"
backgroundColor="#f2f6f7"
>
<Img src="https://example.com/logo.png" alt="Logo" width={48} height={48} />
<Text fontSize="14px" fontWeight="400" color="#000">Hello from EmailUX!</Text>
<Card
header={<Text textColor="white" fontSize="20px">EmailUX</Text>}
headerBackgroundColor="#000"
content={<Text>Welcome to EmailUX!</Text>}
borderRadius="24px"
padding="12px 15px"
width="100%"
/>
<Table border padding="10px">
<Table.Row align="left" valign="middle">
<Table.Col>Cell 1</Table.Col>
<Table.Col>Cell 2</Table.Col>
</Table.Row>
</Table>
<Button
align="center"
href="https://emailux.com"
text="Confirm"
backgroundColor="#000"
textColor="#fff"
/>
</Body>
</Html>
);
}
const { html, error } = getHtml(<EmailTemplate />);
if (!error && html) {
// Send 'html' through your own ESP
}Who the library is for
- Engineers who want to ship transactional or marketing email from React without writing table-based HTML by hand.
- Teams already on SendGrid, Resend, Postmark, Mailgun, or any other ESP — the library is ESP-agnostic.
- Anyone evaluating EmailUX who wants to try the rendering layer first without signing up.
Library vs. EmailUX Studio
@emailux/components is the rendering primitive. The EmailUX Studio is the visual workspace built on top of it — with locale management, AI authoring, conditional placeholders, a marketing campaigns workspace, and the render and trigger API. Use the library standalone, or combine it with the platform when you want a workspace your non-engineer teammates can use.
Design once, send through your existing ESP
Reserve early access to EmailUX and start designing on-brand, localized templates, then render or trigger sends through your connected SendGrid, Google Workspace, SMTP, or IMAP account.