Hyper Elements

Build emails, web pages, PDFs, and images with React.
One component system for developers and AI agents.

Quick start · AI agents · Test in email clients · Templates · Documentation · Website

Hyper Elements is an open-source React library for generating content. Write a receipt, invoice, landing page, or social card with typed components. The engine handles layout and the markup each output needs, including email tables and responsive web HTML.

Reuse your work across formats. Share content, styles, and components between an email, its web version, and a PDF.
Keep every output on brand. Define colors, fonts, sizes, and component styles once in a theme, and every email, page, PDF, and image that uses it follows.
Give agents useful feedback. Validate templates, inspect layouts as text, and get diagnostics that explain where a problem is and how to fix it.
Test emails in email clients, locally. See an email as Outlook, Gmail and other email clients show it, with the email client emulator that comes with Hyper Elements: no test sends, no account, nothing uploaded.
Render in your own app. Generate output on your server, with no browser, hosted service, or API key required.

Quick start

In a React project (React 18 or later):

npm install @hyper-elements/react react react-dom

Build an order update, then render the same content as an email and a web page:

import {
  Button, Column, Email, Heading, Page, Text, render,
} from "@hyper-elements/react";

function OrderUpdate({ name }: { name: string }) {
  return (
    <Column style={{ padding: 32, gap: 16 }}>
      <Heading level={1}>Thanks, {name}.</Heading>
      <Text>Your order is on its way.</Text>
      <Button
        href="https://example.com/orders/10482"
        style={{ backgroundColor: "#ef4638", color: "#ffffff" }}
      >
        Track your order
      </Button>
    </Column>
  );
}

const content = <OrderUpdate name="Ada" />;
const { html, text } = await render(<Email width={600}>{content}</Email>);
const { html: pageHtml } = await render(<Page width={960}>{content}</Page>);

html and text are the email's HTML and plain text, ready for your email provider. pageHtml is a complete responsive web document. No client-side JavaScript is required.

Choose your output

Use the same layout and content components under the root for your destination:

Build	Root	Render to
Receipts, newsletters, transactional emails	`<Email>`	Email HTML and plain text with `render()`
Landing pages, web versions of emails	`<Page>`	Responsive HTML with `render()`
Invoices, reports, printable documents	`<Document>`	Print HTML with `render()`, or a PDF with `renderPdf()`
Social cards, Open Graph images, banners	`<Canvas>`	PNG or SVG with `renderImage()`

The PDF and image renderers use separate imports and optional dependencies in Node.js. Diagnostics flag features a destination cannot represent. See one invoice rendered as email, web, and PDF for a complete example.

Build with AI agents

Give Claude Code, Codex, Cursor, or another coding agent the guide:

npx skills add hyper-elements/hyper-elements

Or add this to your project's AGENTS.md or agent rules:

Before writing a Hyper Elements template, read
node_modules/@hyper-elements/react/GUIDE.md.
Validate the template, fix errors, review warnings, and inspect outline() before rendering.

The package includes GUIDE.md and REFERENCE.md, generated from its component definitions so they match the version you installed. Web-based agents can use llms.txt or llms-full.txt.

A feedback loop the agent can read

validate() returns diagnostics with a code, severity, template path, and an actionable message. outline() shows the layout without making the agent read generated HTML. Try both on the quick-start component:

import { outline, validate } from "@hyper-elements/react";

const template = <Email width={600}><OrderUpdate name="Ada" /></Email>;
const report = validate(template);

console.log(report.diagnostics);
if (report.valid) console.log(outline(template));

Email 600px
  Column 600px
    Heading h1 536px "Thanks, Ada."
    Text 536px "Your order is on its way."
    Button: background #ef4638 "Track your order" → https://example.com/orders/10482

An agent can spot missing content, incorrect widths, and layout mistakes before rendering, then see the email in each email client with the emulator below. Agent setup and examples →

Test it in email clients

How will this email look in Outlook, or in Gmail? Hyper Elements comes with an email client emulator, @hyper-elements/email-clients, that shows an email as each email client does, on your own machine: free, with no test sends, no account and nothing uploaded. For emails built with Hyper Elements, it's 97–99% accurate against the real clients.

npm install @hyper-elements/email-clients

import { renderInEmailClients } from "@hyper-elements/email-clients";

const { previews } = await renderInEmailClients(<Email width={600}><OrderUpdate name="Ada" /></Email>);
// A preview per email client (classic Outlook, Outlook.com, Gmail, Apple Mail and more):
// a self-contained HTML page that shows the email as that client does when Chromium opens it.

Save a preview and open it, take a screenshot with Playwright, or read the list of what the client changed (rounded corners, a <style> rule, a font). An email sign-in code, drawn by the emulator in four email clients:

Email client emulator: supported clients, accuracy and options →

Agent Benchmarks

Email

In our benchmark of five email briefs, Hyper Elements reached a passing email 2.6× faster with 3.4× fewer output tokens than React Email, at the median. It was also 1.3× faster than MJML. Hyper Elements and MJML both passed 16 of 16 first checks.

All four approaches ran in one interleaved batch, with 16 runs each against the same Chromium checks at desktop and mobile widths; all 64 eventually passed. Token counts here measure output tokens, not total usage or cost. Methodology · Reproduce the benchmark

Image

Across five image briefs, Hyper Elements reached a passing image 1.65× faster with 1.8× fewer output tokens than Canvas 2D (@napi-rs/canvas), at the median. 17 of 20 images passed on the first check.

All 60 isolated runs passed the same text, font, image and layout checks: five briefs, four runs per brief per approach. The speed comparison with Playwright was inconclusive. Methodology and results · Reproduce the benchmark

Keep building

Start from a design: Templates · Component gallery
Learn the API: Writing guide · Full reference
Stay on brand: Themes
Test in email clients: Email client emulator · Email client checks
Use it in your app: Next.js example · Email providers
Bring existing templates: Migrate from React Email · Move from Unlayer Elements
Let teammates edit visually: Optional Unlayer editor integration

Contributing

Contributions are welcome. Use the Node.js version in .nvmrc and pnpm 9.7 or later, then run pnpm install, pnpm build, and pnpm test. See CONTRIBUTING.md for the development workflow.

License

MIT. Built by the team behind Unlayer; works independently of the Unlayer platform.

Unlayer Elements

Unlayer Elements