Skip to main content

Elements

Unlayer Elements is a code-first component library for building emails, pages, and documents. Write a component tree once and render it to email-safe HTML, responsive web HTML, or print-tuned HTML for PDFs.

The visual Builders are for end-users dragging blocks around in your app. Elements is for developers who want the output under their own control: in a file, in source control, in a function call.

Available Packages​

PackageFrameworkStatus
@unlayer/react-elementsReact 18+ (incl. Server Components)Available

Vue, Angular, and Svelte wrappers may follow. The docs are structured so each gets its own subsection.

When to Use Elements​

Reach for Elements when you want to:

  • Generate transactional or marketing emails from code, with no editor in the loop.
  • Produce HTML on the server (Node, Next.js Server Components, Lambda).
  • Keep designs under version control as plain TypeScript / JSX.
  • Share design primitives across email, web, and PDF outputs from one source.
  • Round-trip designs between code and the visual Builder. Elements speaks Unlayer's design JSON natively.

Reach for the visual Builders instead when your end-users need a drag-and-drop editor inside your product.

Concepts​

Three ideas to internalize. They apply across every framework wrapper.

1. One tree, three rendering modes​

There are three semantic root wrappers, each tuned for a different output:

WrapperOutputTarget
<Email>Table-based HTMLEmail clients (Outlook, Gmail, Yahoo, Apple Mail)
<Page>div + flexbox HTMLResponsive web pages
<Document>Print-tuned HTMLPDF generation

The same content components (Row, Column, Heading, Paragraph, Button, etc.) work inside all three. The wrapper decides the rendering mode.

If you need to set mode explicitly or thread an SSR config through, there's a lower-level <Body> primitive you can use directly.

2. Strict structural shape​

Every tree follows the same nesting:

<Email | Page | Document | Body>
  <Row layout={...}>
    <Column>
      ...content components...
    </Column>
  </Row>
</...>

This isn't a stylistic preference. The renderer relies on the shape to produce email-safe output, and skipping levels (Row directly inside Email, content directly inside Row) throws at validation time.

3. Pure render functions​

The library exposes pure synchronous functions that turn a component tree into:

  • HTML for sending or saving — renderToHtml, renderToHtmlParts
  • Plain text for the text/plain part of a multipart email — renderToPlainText
  • Design JSON that loads into the visual editor — renderToJson, renderRowToJson

No client-side runtime is required. The output is plain HTML, ready to ship.

Where to Go Next​

Pick the package that matches your stack:

If you're still evaluating Elements, the React Quickstart gets you from an empty project to a rendered HTML string in three steps.