Unlayer Elements

Unlayer Elements is an open-source React component library from the team behind the Unlayer content creation platform. It lets developers write a single JSX component tree and render it in three output modes: email-safe HTML for Outlook, Gmail, Yahoo, and Apple Mail; responsive web HTML; and print-ready HTML for PDF generation.

What is Unlayer Elements?

Unlayer Elements is a React component library published on npm as @unlayer/react-elements. It takes JSX composed of layout components (Email, Page, Document, Row, Column) and content components (Heading, Paragraph, Button, Image, Table, Menu, Social, Video, Divider, PageBreak, Html) and produces complete, static HTML documents through renderToHtml() or renderToHtmlParts(). It runs wherever React renders — including Next.js, Remix, and Server Components — and is MIT-licensed with no network calls, no API key, and no runtime dependency on the Unlayer platform.

Key Features

• Three render modes from one tree — the <Email> root emits table-based, MSO-conditional HTML; <Page> emits div/flexbox web layouts; <Document> emits print-optimized HTML for PDF pipelines.
• Clean output — renderToHtml() returns a full <!DOCTYPE>-to-</html> document with no React hydration markers, no framework artifacts, and no client-side JavaScript; renderToHtmlParts() returns separate head and body chunks.
• Visual builder compatibility — renderToJson() exports Unlayer design JSON that loads into the drag-and-drop Unlayer editor; edited JSON exports its own HTML but does not regenerate React source.
• TypeScript first — full type definitions and autocomplete for components and props.
• Custom components — registerElementsTool() turns a custom tool definition into a first-class React component with per-mode output control.
• Lightweight — roughly 12KB gzipped (under 60KB ESM) and tree-shakeable.
• Column layouts — ColumnLayouts.OneColumn, TwoEqual, TwoWideNarrow, ThreeEqual, FourEqual, plus custom ratios via cells, each Row requiring the matching number of Column children.
• Strict test gates — golden-template tests, per-component snapshots in email and web modes, a headless Chromium E2E gate (stacking at mobile breakpoint, RTL direction, invisible preheader, no horizontal overflow, alt text and link names), a visual-drift gate over Storybook stories, a Next.js 15 integration test, and a CSP probe run with node --disallow-code-generation-from-strings.

Who is it for?

• Backend and full-stack React developers building transactional emails — order confirmations, password resets, receipts — in the same codebase as the app.
• Teams producing invoices and contracts who want print-ready HTML for a PDF pipeline instead of a separate PDF system.
• Developers handing templates to non-technical teammates, using renderToJson() to move code-authored templates into the Unlayer visual editor.
• Teams needing email plus web parity, publishing one source of truth as an email campaign, a web archive, and a landing page.

Use cases

• Transactional email: render HTML and plain-text receipts and password resets and send them via Resend, AWS SES, Postmark, SendGrid, or Nodemailer.
• PDF generation: pass <Document> output to Playwright/Chromium or Unlayer's PDF export service, controlling pagination with CSS print rules, page breaks, and headers/footers.
• CMS-driven content: render content from a CMS, API, or database into emails, pages, and documents using a shared component model.
• Migration: @unlayer/migrate converts React Email templates to Elements, checked against the originals.

How does Unlayer Elements work?

Install the package, compose a component tree under <Email>, <Page>, or <Document>, using <Row> with a matching column layout and <Column> children, then call renderToHtml() on the tree. A browser playground at examples.unlayer.com renders Elements code as an email, page, or document and can export HTML or design JSON.

FAQ

Does Unlayer Elements require the Unlayer platform?

No. The package is MIT-licensed, makes no network calls, and requires no API key or account. renderToHtml() runs entirely in your process. Design-JSON round-tripping via renderToJson() and Custom Tools are opt-in integrations for users of the Unlayer editor.

Does it produce actual PDF files?

No. Elements produces print-ready HTML, not PDF bytes. Convert that HTML with Playwright/Chromium, any HTML-to-PDF library, or Unlayer's PDF export service.

How is email output validated?

Every release must pass a golden-template test, per-component email and web snapshots, a headless Chromium E2E gate with a negative control, a Storybook visual-drift diff, and a Next.js 15 build. Templates are also tested on Litmus and Email on Acid, though repo-level validation is renderer-focused rather than an inbox-emulator matrix.