diff --git a/README.md b/README.md index ce9deb2..886b791 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@

Unlayer Elements

- React components for building emails, pages, and documents in code. + Write once in React. Render emails, web pages, and PDFs from the same component tree.

@@ -17,21 +17,33 @@ --- -Write email templates, landing pages, and printable documents using familiar React components. Unlayer Elements renders to **three distinct outputs** from the same component tree: - -- **Email** — table-based HTML safe for Outlook, Gmail, Yahoo, and all major email clients -- **Web** — responsive div + flexbox HTML for web pages -- **Document** — print-optimized HTML for PDF generation - +

+ Unlayer Elements: the same JSX rendered as email, web, and document output +

-### How It Works +Unlayer Elements is an open-source React component library that lets you build content once and render it across three output modes: -Write once in React. Render anywhere — email, web or PDF. +- **Email** → Outlook, Gmail, Yahoo, Apple Mail +- **Web** → Responsive pages and embedded experiences +- **Document** → Print-ready HTML for PDF generation

Unlayer Elements: Architecture

+Elements is built and maintained by the team behind [Unlayer](https://unlayer.com), the content creation platform used by thousands of companies to power email, page, and document experiences inside their products. + +## Why Elements? + +| Tool | Email | Web | PDF | +|---------------|:-----:|:---:|:---:| +| React Email | ✅ | ❌ | ❌ | +| MJML | ✅ | ❌ | ❌ | +| PDF libraries | ❌ | ❌ | ✅ | +| **Elements** | ✅ | ✅ | ✅ | + +Elements is designed for teams that need to generate email, web, and document experiences from a single React codebase. + ## Quick Start ```bash @@ -75,13 +87,51 @@ const html = renderToHtml(); ## Features -- **15 components** — Button, Heading, Paragraph, Image, Divider, Social, Menu, Table, Video, Html, and layout primitives (Email, Page, Document, Row, Column) -- **3 render modes** — Email (tables), Web (flexbox), Document (print) from the same JSX -- **Server Components** — works with Next.js App Router, Remix, and any SSR framework -- **Clean HTML output** — `renderToHtml()` produces production-ready HTML with no framework artifacts -- **Design JSON** — `renderToJson()` exports Unlayer-compatible design JSON for round-tripping with the visual editor -- **TypeScript-first** — full type definitions with autocomplete for every prop -- **Tiny bundle** — under 50KB ESM, tree-shakeable, zero client-side JS required +### One Component Tree + +Build content once and render it as email, web, or document. Share components, styling, and content across all three output modes from the same React codebase. + +### React Developer Workflow + +Works with React, Next.js, Remix, and Server Components. Use familiar JSX patterns and existing frontend workflows without learning a new templating language. + +### Production Output + +Generates email-safe HTML, responsive web HTML, and print-ready HTML for PDF generation — optimized output for each destination without maintaining separate implementations. + +### Visual Builder Compatible + +Export Unlayer-compatible design JSON with `renderToJson()` for round-tripping between code and the visual editor. Ideal for teams that want the flexibility of code alongside visual editing workflows. + +### TypeScript First + +Built with TypeScript from the ground up — full type definitions, autocomplete for components and props, and safer development with better IDE support. + +### Clean HTML Output + +`renderToHtml()` generates production-ready HTML with no React hydration markers, no framework artifacts, and no client-side JavaScript required. + +### Lightweight & Tree-Shakeable + +~12KB gzipped (under 60KB ESM), tree-shakeable, with zero client-side JavaScript required. Designed for performance-sensitive applications and server-side rendering environments. + +## Real-World Use Cases + +### Transactional Emails + +Build and maintain order confirmations, password resets, and receipts from the same React codebase that powers your application. + +### PDF Generation + +Generate invoices, contracts, and reports server-side without maintaining a separate PDF system. + +### CMS-Driven Content + +Render content from a CMS, API, or database into emails, web pages, and documents using a shared component model. + +### Email + Web Parity + +Publish the same content as an email campaign, a web archive, and a public landing page from a single source of truth. ## Components diff --git a/assets/elements-demo.gif b/assets/elements-demo.gif new file mode 100644 index 0000000..76423a0 Binary files /dev/null and b/assets/elements-demo.gif differ