unlayer-elements

Build with Unlayer Elements (code-first)

Overview

@unlayer/react-elements is a set of React components for building emails, pages, and documents in code — no visual editor. Write JSX once and render it to:

• email — table-based HTML (Outlook/Gmail/Yahoo safe)
• web — responsive div/flexbox HTML
• document — print / PDF-optimized HTML

The output is a faithful reproduction of what the Unlayer editor produces, so designs round-trip into the editor as JSON. Full SSR support (Next.js, Remix, renderToString).

When to use this skill vs the editor

You want to…	Use
Generate/assemble templates in code (AI generation, programmatic emails, design systems)	this skill (@unlayer/react-elements)
Embed a drag-and-drop visual editor in your app	unlayer-integration
Export HTML/PDF from a saved design / Cloud API	unlayer-export

Install

npm view @unlayer/react-elements version   # verify the published version first
npm install @unlayer/react-elements

This skill targets @unlayer/react-elements 0.1.11+ (npm view @unlayer/react-elements version to check) and uses only forms verified against it. The natural forms below — string/number sizes, object or string fontFamily, factored-out style objects — all type-check on 0.1.11+; on older versions, upgrade.

Mental model — the structure is strict

<Email> | <Page> | <Document>        ← root wrapper, sets the render mode
  <Row layout={ColumnLayouts.X}>     ← layout container; column count MUST match the layout
    <Column>                         ← only Columns go directly in a Row
      <Heading /> <Paragraph />      ← items only inside Columns (no nesting)
      <Button /> <Image /> ...

• <Email> = email mode, <Page> = web, <Document> = print. They thread the mode to all children.
• A <Row> takes layout={ColumnLayouts.TwoEqual} (or cells={[1,1]}) and must contain exactly the matching number of <Column> children.
• Items (Heading, Paragraph, Button, Image, Divider, Social, Menu, Table, Video, Html) go inside Columns, never directly in a Row.