Unlayer
Unlayer Elements

Build email, web, and PDF in code.

Write content as familiar React components. Render it to email-safe HTML, responsive web, or print-ready PDF, from the same component library.

View on GitHubRead the Docs
JSX
01import {
02  Email, Row, Column, Image, 
03  Heading, Paragraph, Button, renderToHtml,
04} from '@unlayer/react-elements';
05 
06// Email-safe HTML, tables for every email client.
07const html = renderToHtml(
08  <Email>
09    <Row>
10      <Column>
11        <Image src="/logo.png" alt="Acme" />
12        <Heading>Welcome to Acme</Heading>
13        <Paragraph>Thanks for signing up. Confirm your email to activate.</Paragraph>
14        <Button href="/confirm">Confirm email</Button>
15      </Column>
16    </Row>
17  </Email>
18);
Why Elements

Built for engineering teams.

A focused React library that fits the way modern stacks render content, from transactional emails to landing pages to PDF exports, without inventing yet another template language.

SSR-ready

Framework-Native

Works inside Next.js App Router, Remix, Vite, or any React SSR framework. No client hydration required.

One tree

Three Render Modes

Email, Page, and Document root wrappers turn the same JSX into tables, flexbox, or print-optimized HTML.

Full types

TypeScript-First

Every component prop, every render mode, every helper is typed end-to-end with autocomplete on day one.

Under 50KB

Tiny Bundle

Tree-shakeable ESM under 50KB with zero client JavaScript in the rendered output.

No artifacts

Clean HTML Output

renderToHtml() emits production-ready markup. No React hydration markers, no framework comments.

Editor-compatible

JSON Round-Trip

renderToJson() exports Unlayer-compatible design JSON so code and the visual builders stay in sync.

Mastercard
Bank of America
Fidelity
Twilio
Lightspeed
Chargebee
Keap
Airship
Hive
Innovaccer
  • SOC 2Compliant
  • 99.9%Uptime SLA
  • 1000+SaaS brands
Use cases

Render every content surface.

From a single transactional email to a hundred-thousand-page marketing site, Elements covers the engineering surface that React already does best.

Transactional Emails

Render order confirmations, password resets, and receipts from the same React codebase that powers your app.

  • Order Confirmations
  • Password Resets
  • Receipts

PDF Generation

Generate invoices, contracts, and reports server-side without learning a separate PDF DSL.

  • Invoices
  • Contracts
  • Reports

Marketing Pages in CI

Spin up campaign landing pages from versioned React templates and deploy them next to your app.

  • Campaign Pages
  • Microsites
  • Promo Banners

CMS-Driven Content

Pull design JSON from your CMS or database and render it on demand in any output mode.

  • CMS Templates
  • Dynamic Content
  • Per-User Renders

Internal Template Galleries

Build internal or customer-facing template galleries from versioned JSX templates checked into your repo.

  • Versioned Templates
  • Internal Tools
  • Template APIs

Email + Web Parity

Publish the same content as both an email send and a web page archive from a single source.

  • Send + Publish
  • Web Mirrors
  • Archive Pages
Render modes

One tree. Three outputs.

Pick the right root for the job. Get HTML tuned for that surface, built from the same component library.

  • <Email> → email tables

    Table-based HTML safe for Outlook, Gmail, Yahoo, and every major email client.

  • <Page> → responsive web

    Modern div + flexbox HTML for landing pages, microsites, and in-app content.

  • <Document> → print PDF

    Print-optimized HTML you can hand to any HTML-to-PDF renderer.

Framework support

Works with the stack you already ship.

React-first today. Angular and Vue are next. No bespoke runtime, no proprietary template language. Just components your team already knows how to write.

  1. React 18 & 19

    Server Components, Suspense, and concurrent rendering, all supported out of the box.

  2. Any modern runtime

    Renders anywhere React renders. Server, edge, Bun, Deno, or your CI box.

  3. TypeScript native

    Full type definitions for every component and prop. Autocomplete in every editor.

  4. Tiny and tree-shakeable

    Under 50KB ESM. Zero client JS required. Pay only for the components you import.

React

v18 & v19, Server Components ready

Stable

Next.js

App Router and Pages Router

Stable

Remix

Remix v2 on Vite

Stable

Vite

Bun and Deno included

Stable

Angular

Standalone components

Coming soon

Vue 3

Composition API

Coming soon
Pair with the visual builders

Same designs in code and the editor.

Elements lives next to Unlayer's five visual builders. Different audiences, same JSON contract. Pick whichever surface fits the job.

Visual builders

Five embeddable drag-and-drop editors for email, page, document, popup, and image. Drop them into your product so non-engineers can author content without filing a ticket.

View builders

Round-trip workflow

Designers build in the visual editor, engineers consume the design JSON in Elements. The same template moves between code and UI without rewrites.

Read the docs

Template gallery

A growing library of production-ready templates that work in both the visual builders and Elements. Start in either surface, switch whenever it suits your team.

Browse templates
Ready when you are

Build content in code.
Ship anywhere it renders.

Install @unlayer/react-elements and start rendering email, web, and PDF from the same JSX tree. Free to start, scales to any volume.

Try Unlayer FreeRequest a Demo
Free to start1000+ SaaS brandsSOC 2 Type II