Hyper Elements

Hyper Elements is an open-source React component library for generating content across output formats — email HTML and plain text, responsive web pages, print/PDF documents, and PNG or SVG images — from a single typed component tree. It is built by the team behind Unlayer and released under the MIT license, so it does not depend on the Unlayer platform.

What is Hyper Elements?

Hyper Elements is a React 18+ library that takes JSX components as input and renders them to multiple destinations. You write a receipt, invoice, landing page, or social card once with typed components, and the engine handles the layout plus the markup each output needs, including email tables and responsive web HTML. Rendering happens in your own app on the server — no browser, hosted service, or API key is required.

What makes Hyper Elements stand out?

• One tree, four destinations — <Email> renders email HTML and plain text, <Page> renders responsive web HTML, <Document> renders print HTML or a PDF via renderPdf(), and <Canvas> renders PNG or SVG via renderImage().
• Shared content and theming — content, styles, and components are shared between an email, its web version, and a PDF; colors, fonts, sizes, and component styles are defined once in a theme and applied to every output.
• Agent-oriented feedback loop — validate() returns diagnostics with a code, severity, template path, and an actionable message, while outline() shows the layout as text so an agent can spot missing content and width mistakes before rendering.
• Bundled agent docs — the npm package ships GUIDE.md and REFERENCE.md generated from the component definitions, so they match the installed version; npx skills add hyper-elements/hyper-elements installs a guide for Claude Code, Codex, or Cursor.
• Benchmarked speed — in the project's five-brief email benchmark, a passing email was reached 2.6x faster with 3.4x fewer output tokens than React Email at the median, and 1.3x faster than MJML.
• Migration paths — documented guides for migrating from React Email and moving from Unlayer Elements, plus an optional Unlayer visual editor integration.

Who should use Hyper Elements?

• React developers sending transactional email who need email-safe HTML plus a plain-text alternative from components they already know.
• Teams maintaining multi-format content such as an invoice that must exist as an email, a web page, and a PDF without triple maintenance.
• Developers building with coding agents who want templates that an agent can validate and inspect before rendering.
• Engineers producing social cards or Open Graph images programmatically as PNG or SVG in Node.js.

Use cases

• Billing and receipts: render an order update as an <Email> for the provider and as a <Page> or <Document> for the customer-facing web and print version.
• Newsletters and landing pages: reuse a component set between a campaign email and the browser version of the same content.
• Social and OG images: generate banners and cards with <Canvas> and renderImage() without a headless browser.
• Agent-assisted authoring: let a coding agent write a template, fix diagnostics, and review the outline() layout before rendering.

How does Hyper Elements work?

Install @hyper-elements/react with React 18+ and react-dom, author components with layout and content primitives (such as Column, Heading, Text, Button), wrap them in a root component for the target format, then call await render(...) to obtain HTML or text. PDF and image rendering use separate imports and optional dependencies in Node.js.

FAQ

Is Hyper Elements free?

Yes. Hyper Elements is released under the MIT license on npm as @hyper-elements/react, and it works independently of the Unlayer platform. PDF and image renderers require separate imports and optional dependencies when used in Node.js.

Does Hyper Elements need a browser or API key to render?

No. Output is generated on your server inside your own app, with no browser, hosted service, or API key required, and the rendered web page needs no client-side JavaScript.

How does validation work?

validate() checks the engine's support rules and returns diagnostics with a code, severity, template path, and an actionable message. It flags features a destination cannot represent, but it does not open or test every email client.

Can agents work with Hyper Elements?

The package includes GUIDE.md and REFERENCE.md generated from its component definitions, and outline() lets an agent inspect layout as text instead of reading generated HTML.