Unlayer Elements is an open-source, code-first React component library designed for engineering teams that need to render content across email, web, and PDF formats. Created to bridge the gap between design and code, it allows developers to write content using familiar React components while ensuring the resulting output is optimized for specific surfaces. By using a single component tree, developers can produce email-safe HTML tables, responsive web layouts, or print-ready PDF structures without maintaining separate template languages or bespoke runtimes.

The library is architected to be framework-native, supporting modern stacks such as Next.js App Router, Remix, and Vite, while remaining highly performant with a tiny, tree-shakeable bundle size of under 50KB. It integrates seamlessly with Unlayer's broader developer platform, enabling a round-trip workflow where developers can share design JSON between the visual builders used by non-technical users and the code-first components managed by engineers. This ensures that branded templates remain consistent regardless of whether they are authored in a drag-and-drop editor or directly within a codebase.

Some of the key features are:

• Three Render Modes: Provides semantic root wrappers for Email (table-based), Page (div/flexbox), and Document (print-tuned) outputs.
• Framework-Native: Optimized for React 18 and 19, supporting Server Components with zero client-side hydration required.
• Clean HTML Output: Emits production-ready markup without React hydration markers or framework-specific comments.
• TypeScript-First: Offers full type definitions and autocomplete for every component, prop, and helper function.
• JSON Round-Trip: Supports export to design JSON, enabling interoperability with Unlayer visual builders.
• Tiny Bundle: Built as a tree-shakeable ESM package under 50KB for optimal performance.

To operate the tool, developers install the package and use the provided components to build their layout. By wrapping content in an <Email>, <Page>, or <Document> root, the library automatically handles the transformation of JSX into the appropriate markup for the target medium. The rendering process is synchronous and server-side, making it suitable for use in build processes, CI pipelines, or server-side rendering environments. Developers can also utilize helper functions like renderToHtml to generate the final markup or renderToJson to store designs in a database for later editing.

Some common use cases include:

• Transactional Emails: Generating consistent, brand-aligned password resets, receipts, and order confirmations directly from React code.
• PDF Generation: Producing invoices, reports, and contracts server-side without needing specialized PDF-generation DSLs.
• Marketing Pages in CI: Spinning up versioned landing pages and campaign microsites that are deployed alongside the main application.
• CMS-Driven Content: Dynamically rendering content stored as design JSON in a CMS or database for per-user personalization.
• Internal Template Galleries: Managing version-controlled JSX templates that function as a library for team-wide use across internal tools.