Hyper Elements

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

Quick start · AI agents · 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.
• Give agents useful feedback. Validate templates, inspect layouts as text, and get diagnostics that explain where a problem is and how to fix it.
• 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 HTML and plain text with render() | | Landing pages, web versions of emails | | Responsive HTML with render() | | Invoices, reports, printable documents | | Print HTML with render(), or a PDF with renderPdf() | | Social cards, Open Graph images, banners | | 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. Validation checks the engine's support rules; it does not open every email client. Agent setup and examples →

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
• 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.