@unlayer/react-elements 0.3.0: Tailwind, Markdown, code, fonts, async, codegen and editor-parity fixes

[ivoIturrieta]

What

The next @unlayer/react-elements release (0.3.0): formats developers already use, a design → code converter, and fixes so the HTML and the design that opens in the Unlayer editor always agree. Nothing here is breaking.

New entries (separate imports, so the main bundle stays small)

Entry	What it gives you
/tailwind	<Tailwind>: classes become each component's props at render time, so the email gets inline styles and the design stays editable. Phone variants become phone settings, hover: becomes button hover colors, container text classes reach the text inside, and card grids get gutters.
/markdown	<Markdown>: Markdown becomes editable blocks.
/code	CodeBlock / CodeInline with highlight.js themes.
/font	<Font>: web fonts with fallbacks. The URL is kept in the design.
/head	<Head>: custom head tags.
/async	Async templates and components, Suspense, and pretty output.
/codegen	designToElements(design): an Unlayer design becomes readable Elements code. The round trip is exact on 48 of 49 real designs and on fuzzed ones.

Main entry

• Link.
• style, className and skipInText on every component.
• Plain-text options and toPlainText.
• Prop aliases: Menu color, align/textAlign, Heading as/level. Close misspellings get "did you mean" warnings.
• values accepts partial objects with strict keys (ValuesInput).
• Rich inline JSX children.

HTML / editor parity fixes

• <UnlayerProvider config> now applies. The most specific setting wins: render options, then the root's config, then the Provider, then defaults. Safe in Server Components and on the edge.
• Paragraph text is stored as typed, so the editor no longer formats markup the email shows literally.
• Exact px image widths.
• Bare zeros are written as 0px in designs.
• The Row background-image fullWidth default agrees between HTML and design.
• The body link color applies in the HTML.
• url() values are percent-encoded.
• Right-to-left dir/lang on the body.
• A Row whose Column count doesn't match its layout is left out alone, with an error, instead of blanking the email.
• Render errors keep their cause.
• Checked against the real editor (load, save and export 152 templates in the Unlayer editor): a Paragraph's HTML is now the editor's text block (a percent line height, no <p> wrapper), so lines with mixed text sizes no longer shift; a root's fonts reach the design; the document has the editor's base stylesheet for each mode; images and video thumbnails are sized in the block's slot (the default 10px padding), not the column; a fixed-width image's percent is the same in HTML and design; and the design records displayMode, so code generated from it picks the right root. A per-block test checks every block's HTML equals the editor's export of its design, in all three modes.

Row padding keeps the editor's meaning (outer padding, in email, web and print). Elements now warns when it sits outside a content background; use Column padding to inset. Tailwind p-* on a Row insets, as CSS does.

Validation

• Tests: react 1333, shared 116, from-react-email 344. Typecheck, test:csp, test:browser-runtime, test:e2e, test:fidelity and test:differential pass.
• Visual: Storybook builds and test:visual matches on 138 stories × 2 viewports. The baseline was regenerated after attributing every changed render to intended changes (exact image widths, the Provider fix, the text block's markup, images sized in their slot).
• Integrations: the packed tarball builds and verifies in the Next.js 14, 15 and 16 apps and the Jest 30 app, including an UnlayerProvider check in a route handler, a Server Component, a Client Component and an edge route.
• Bundle: the main entry is 130,245 / 130,500 bytes (budget raised from 118 KB; about 1.1 KB of it is the editor's base stylesheet). That's tight: the next main-entry addition needs room first.
• Real editor round trip (152 templates: feature tests, showcase, CLI starters, all docs patterns and starters, MJML and Beefree imports; editor 1.524.0): every design loads, saves and exports with nothing lost, and the code generated back from it type-checks and gives the same design. Elements' HTML looks identical to the editor's export on desktop for 134/152 (115 before these fixes). The rest are the editor's own behavior (its stylesheet for Google fonts it lists, phone settings that need mobile design editing), the HTML-only props, or the newer editor's page margin for documents. The one Elements difference left is sub-pixel: a fixed-width image keeps the exact px the author asked for (64px), where the editor derives 63.97px from the design's percent.
• Tailwind accuracy, measured against real Tailwind 4.2.1 in Chrome on 263 classes: 96.9% render like Tailwind in email and 95.7% on web; 168/170 colors are byte-exact; line heights are within 0.5px.

Release notes

• Releases as 0.3.0 (minor): new entries and changed HTML output, no breaking API. The version is committed in packages/react/package.json, which the release job publishes instead of its default patch. Without it, this would ship as 0.2.2 to every ^0.2 project.
• @unlayer/migrate's Elements range goes to ^0.3.0 here. The release job refuses an Elements outside the published migrate's range, so migrate then republishes after it (0.1.3, the same converter) and asks projects on 0.2.x to upgrade first.
• The CHANGELOG lists everything new in 0.3 (every new entry, <Link>, style/className, the plain-text options, inline JSX), what changed, and the history from 0.1.1 to 0.2.1.
• After publishing, move the @unlayer/react-elements-previous alias to 0.3.0.

---

📖 Storybook Preview: https://unlayer.github.io/elements/pr/69/

[codecov]

Codecov Report

❌ Patch coverage is 97.71973% with 103 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.83%. Comparing base (eb0a80d) to head (a10b343).

Files with missing lines	Patch %	Lines
packages/react/src/markdown/Markdown.tsx	92.51%	14 Missing ⚠️
packages/react/src/async/stream.ts	85.88%	12 Missing ⚠️
packages/react/src/tailwind/values.ts	90.00%	9 Missing ⚠️
packages/react/src/codegen/blocks.ts	96.68%	8 Missing ⚠️
packages/react/src/codegen/test-harness.ts	95.10%	7 Missing ⚠️
packages/react/src/codegen/device.ts	89.65%	6 Missing ⚠️
packages/react/src/tailwind/inherit.ts	94.00%	6 Missing ⚠️
packages/react/src/tailwind/load.ts	92.50%	6 Missing ⚠️
packages/react/src/tailwind/color.ts	97.05%	5 Missing ⚠️
packages/react/src/codegen/design-to-elements.ts	96.11%	4 Missing ⚠️
... and 12 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #69      +/-   ##
==========================================
+ Coverage   96.55%   97.83%   +1.27%     
==========================================
  Files          40       95      +55     
  Lines        2789     6550    +3761     
  Branches      795     2277    +1482     
==========================================
+ Hits         2693     6408    +3715     
- Misses         95      142      +47     
+ Partials        1        0       -1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.