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

What

The next @unlayer/react-elements release (0.3.0): a new render engine, formats developers already use, a design → code converter, and fixes so the HTML and the design that opens in the Unlayer editor always agree. No API is removed. One deliberate behavior change: a part that fails to render now fails the render (see below).

A new render engine

0.2 rendered templates with react-dom: one render collected the template through markers written into its HTML, then about 15 more rendered the rows. In Next.js App Router server code (two React copies) that broke: components using hooks were dropped and async emails came out with no rows, with only a warning.

0.3 walks the template itself and answers its hooks (useContext, useId, useMemo, use, …) as React's server renderer does. Elements doesn't render with react-dom: its one call, in Node, renders nothing, so that react-dom puts back a context value a failed renderToString left (react-dom stays a peer dependency because @unlayer/exporters imports it).

• Works where React works (tested): Node, the edge runtime, Next.js route handlers, Server Components and Client Components (webpack and Turbopack), React 18 and 19.
• Components run once per render; async siblings load in parallel and always land in tree order.
• Its HTML is react-dom's: the markup it writes matches react-dom/server's static markup for the installed React (18 or 19), byte for byte: form controls (<select value>, <textarea>, inputs), <style>/<script>/<title> text, attribute order, void elements. A differential test checks every element and attribute kind React treats specially (about 115,000 cases) and random trees, on React 18.0, 18.3 and 19.3. Five differences are deliberate and listed in that test: React 19 moving <title>/<meta>/<link> to the top, the <head> it adds to a bare <html>, function form actions, a failure inside <Suspense>, which follows Elements' error policy, and a javascript: URL on React 18, which Elements writes as React 19 does (a URL that throws), with any React. In <Head>, a <style>'s or <script>'s CSS and JS are written as given, and nothing in them can end them early, whatever writes it (a component, a list, text in parts, markup): their end tag, and that of a <noscript> or <title> around them, is escaped as CSS or JS reads it, and under <svg>/<math> their text is escaped as any text. A fuzz test parses random hostile head content with a real HTML parser, with and without scripting, and checks no element appears and no text leaves the element it was written in.
• Renders are isolated: a render's output and errors depend only on its own arguments. What it works out lives in its own scope, every public render starts a fresh one, and your code (components, wrappers, exporters, callbacks) runs outside it, so a render started inside another can't change it, and elements kept between renders can't carry anything over. A seeded test renders random pairs of templates that share hoisted elements, in both orders and at once, and checks each output never changes. That covers what React leaves behind too: react-dom's streaming render keeps the last values its providers gave in the context after a stream ends (renderToString, after one that fails or suspends inside a provider), and a context the template doesn't provide reads its default, standalone and inside streaming, client and Server Component renders, not another request's value: in Node, before it reads a default, Elements has react-dom/server render nothing, which puts back what a renderToString that failed or suspended inside a provider left, and nothing is kept from one render to the next, so no default is learned wrong; a render reads one value for it throughout. Inside an app's renderToString it reads the app's provider value, as 0.2 did. react-dom/server is loaded for this only in Node, the first time it's needed, through the package's ./fizz-cleanup export, whose conditions give edge runtimes, Workers, browsers and React Server Components a module that does nothing (a fizz-cleanup/ folder does the same for webpack 4 and Jest before 28, which don't read exports). Tests stream a page for one tenant, fail another's renderToString inside its provider, and then render emails (sync, async at once, every way a component reads context) on React 18 and 19, dev and prod; ARCHITECTURE.md lists the one rare leak case left: inside an app's stream or client render, where react-dom/server isn't loaded for this, or where the app's is another copy (Deno's import of it), a template reads what a failed renderToString left, till react-dom's next one. A template's own provider, or a prop, is read wherever it renders.
• Errors name the component and where it sits: [Unlayer] boom (in <Hero> at Row 3 › Column 1 › Hero), a RenderError with the original as cause. A failure throws by default, in the sync and async renderers alike; onError: "omit" (or a function) leaves the failed part out of the HTML, the text and the design alike and lists it in renderToHtmlParts().omitted. That covers every part: components, Rows and Columns, exporters, template wrappers, a custom tool's head, and what's in a <Head>. An async or suspending template given to a synchronous renderer is a RenderError naming it too.
• The design is the source of truth: the HTML is the exporters run on the design. The design no longer renders the HTML, so it's fast.
• React compatibility is checked, not assumed: a once-per-process self-check of React's internals; an unknown React that passes works, one that doesn't fails with "unsupported React x.y.z" (UNLAYER_SKIP_REACT_CHECK=1 to bypass). CI runs the suite on React 18.0, 18.2, 18.3, 19.1, 19.2 and 19.3 in dev and prod (and the release job publishes only after that matrix passes), compares useId with react-dom's own, and runs a weekly canary.
• useId() gives React's own ids (no internal prefix); idPrefix sets a prefix for emails embedded in a page.
• Divider, Html, Menu and Social write their web and document HTML as strings, byte-identical to the pinned exporters but for a javascript: URL, written as one that throws with React 18 too (a 12k-case test that's also the drift alarm), so pages and documents render on the edge too.
• packages/react/ARCHITECTURE.md explains the pipeline, the dispatcher, the error policy and the invariants.

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

Main entry

• Link.
• style, className and skipInText on every component.
• Plain-text options and toPlainText, which reads HTML in time linear in its size whatever it holds (an element or a < nothing closes: 40 KB of <img alt="a" took a minute).
• 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: a javascript: URL in them is left out however it's encoded (javascript:, javascript:), and an email service's <%name%> stays in the plain text too. Their markup is read in time linear in its size (a <style> or <script> at the end of a component's markup made 100 KB take up to 16 s).
• A Button's target is its link's; one that could end its HTML attribute or isn't a string (or a Menu item's) opens in a new tab instead.

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 fails the render with an error naming it (or is omitted with onError: "omit"), 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 1894, shared 142, convert-core 212, from-react-email 344, migrate 212. Typecheck, test:csp, test:browser-runtime, test:e2e, test:fidelity and test:differential pass, and so does a replay of the CI workflow on a clean checkout of this head (b35cc79), Storybook's visual gate included, and of the three stacked PRs' merges of it. The React matrix (18.0.0, 18.2.0, 18.3.1, 19.1.0, 19.2.9, 19.3.1; dev and prod) runs in CI on this head; it passed in CI on an earlier head, and at 11ec4e2 it was run locally on 18.0.0, 18.2.0, 18.3.1 and 19.3.1, dev and prod, its tests on Node 20 as in CI (react 1859 on 18.x and 1868 on 19.3.1 in development, 679 and 688 of the engine and regression suites in production). CI's runners had failed three tests and vitest's report of the results, Elements' code passing: the setup now turns the event loop between tests (a file's synchronous timing tests ran past vitest's 60 s report timeout), the Tailwind swap test reads the stylesheets where Elements reads them (vitest gave its tailwindcss mock to one of several imports under way at once, Tailwind itself to the others), the Markdown and rich text growth tests time a shape that looks slow twice more at both sizes and then at ten times the size again, each quote is timed against a quarter of its size on the same machine, the deep code test nests its tokens 1,024 deep (4,096 ran out of Node 20's stack in highlight.js before its code was optimized, which then writes the code without colors), the Tailwind class growth fuzz retimes a shape that looks slow on fresh handles and leaves out the one variant shape Tailwind's own compiler reads in time growing with its size squared (min-[var(--x)…]:, its -s each a variant lookup), which a test reads at the 512-character cap under 100 ms, and a test has 30 s (several took most of vitest's 5 s on the runners); each changed test still fails on the code before its fix. Every timing assertion in the react and shared tests now goes through one helper (src/test-timing.ts): a cost at two sizes that looks slow is timed again, each size's fastest of three samples of 20 ms at least, so a few milliseconds' baseline isn't noise; a cost over an absolute limit runs twice more, its fastest held to the limit times the machine's slowness, measured then; a retime that would read a handle's built classes runs on a fresh handle. Spot-checked on the code each was written against: the many-blocks test (6fc708b's parent), the 8,192-character highlight limit (e044386's parent) and plain text's tag names (c2d414b's parent) still fail. The streamed-context test's helper released its page's data on a 5 ms timer, which a busy machine could fire before React 18's shell (scheduled with setImmediate, run after due timers once a test starts in the setup's turn of the event loop): it now releases it from onShellReady.
• Hostile inputs found before release, each with a test that fails without its fix: a synchronous loop of renders on one Tailwind handle no longer grows its compiler without end (see the /tailwind row); Tailwind's stylesheet, which each build reads again whole, is read in time linear in its size on Node 20 too (a compiler's of 2,400 classes, 114 KB, took 118 ms a build, now 5.6 ms: the class growth fuzz failed on CI's Node 20 for it); a Tailwind class value that could end markup's escaped style or start a tag once read (font-['\22><img…>']), or a URL a component can't take (url(javascript:…)), isn't inlined in markup either, a Markdown's sanitized HTML included, while what markup can safely hold still is (a theme's double-quoted font names, url("…"), a string's ;); a render's shared work is shared across copies of Elements and with all the code it runs (562 sparse-table comments were 195 MB of HTML and 733 MB RSS); plain text leaves out a link's blocked URL (Pay now (javascript:…)) and keeps its placeholders from text that decodes to them; a render's shared Markdown and code work stays its own (a template wrapper or a nested render reached another render's), and Markdown's table cells count against it (562 sparse tables were 196 MB of HTML and 746 MB of memory, now 35 MB and 246 MB); a code theme named __proto__ and a plain-text skip of ( no longer throw; one tenant's Tailwind class from data no longer breaks or slows other tenants' renders on a shared handle ([&:hover…]: of 100 KB, chained compound variants, max-sm: 3,000 times: see the /tailwind row), and a synchronous batch of 51 recipients renders all 51 where one recipient's class had the 50 after it told to render again; a Markdown's headings with a class each are compiled at once (2,000 took 4.7 s); an image's size given as a string is read once (30,000 digits took 1.1 s); a render of many Markdowns and CodeBlocks shares their work (12 comments of 8 KB of Java, each its own Markdown, took 4.8 s, 200 took 82 s; now 0.5 s and 0.44 s); plain text reads a tag name with a word boundary at each character once (40 KB took 1.3 s and 0.9 GB); a Video's videoId from data (abc" onload="…) ended its player's src on a page or in a document and added an event handler (0.2.1 too), and designToElements() wrote it through: what an id doesn't hold is percent-encoded now, in the HTML, the design and the code, and the editor's ids stay as they are; a Tailwind class from data is read in time linear in its size (a number in an arbitrary value or variant, the spaces before !important: 20 KB took up to 13 s; a media query of many parts with two widths each, exponential); rich text's markup from a component of yours is read in time linear in its size (with a <style> or <script> at its end, 100 KB took up to 16 s); HTML's plain text is written in time linear in its size (40 KB of unclosed <img alt="a" took a minute, 80,000 spaces in a <pre> 11 s); code's trailing whitespace is taken off in time linear in its size (a fence of 100,000 spaces then x, 5.7 s); Markdown's would-be tables, link text, list items, paragraph lines and references are read in time linear in their size (100 KB of a over - took 14 s, [ and 25,000 <!-- 7 s, 200 KB of list item lines 6 s); a design's lengths and mailto: fields in designToElements(), a Lexical paragraph's style, a component's style and pretty's comments are matched in time linear in their size (100,000 ; took 15 s, 400 KB of unclosed comments 12 s); seeded growth tests of random short shapes (10 times the size costs at most 20 times the time) cover code in every language, Markdown, HTML's plain text, Tailwind classes and rich text's markup, and hold in React's production build too; a user's class a Tailwind plugin throws for (brand-(--x), which Tailwind gives the plugin as var(--x)) no longer fails the app's own classes of that utility (brand-blue) for every render after it on the handle; Tailwind classes in a Heading's or a Button's children and on a lone <Link> are inlined, where they stayed as class attributes email clients don't read, without a word; color={null} (any style prop) no longer writes color: ; over the default and the class, and a content prop given as null (<Html html={null}>, text={null}, a Table's cells) renders nothing, as in 0.2.1, not the block's placeholder (Hello, world!, Heading), in the HTML, the plain text and the design, with <Tailwind> too; a <script>'s or <style>'s text in rich text children, which React 19 writes as it is, no longer becomes a live link; a Row's anchor, a Video's link and thumbnail and a Social icon's image can't add markup (0.2.1 wrote them as given), and a Video's javascript: link is one that throws (its thumbnail, as an Image's src, is written as given); a <Font> with a javascript: URL loads nothing (a root's fonts prop still writes one into its <link>, which a browser doesn't run); highlight.js's time is bounded (100 KB of INI in a Markdown fence took 27 s); Markdown's quotes and task lists, and designToElements() (a 200×200 table took 515 s, now 93 ms), take time linear in their size; Markdown's inline syntax from data is read in time linear in its size (100 KB of emphasis nothing closes took a minute, and emphasis nested a few thousand deep overflowed the stack; now 0.2 s, its output the same for Markdown as people write it); a Tailwind plugin's function that gives nothing for a value, or an @apply Tailwind can't compile, no longer breaks the handle every render shares (the first render failed at <Body>, a raw TypeError from renderToJson, another tenant's said to render again, and later ones dropped the class); a plugin's error that can't be tied to a class (a variant named @) no longer falls on every class of its compile without CSS, or on all of them, for every render (another tenant's p-4); classes from data can't add markup through a prop; Markdown's tables and nesting are kept to what its size calls for (adversarial tables of 1 to 100 KB now fail in milliseconds, the whole process under 150 MB, where 5 KB was 229 MB of HTML and almost 1 GB; within the limit the output stays linear, about 340 bytes of HTML per input byte at most, as a Table block writes each cell); encoded javascript: URLs in inline JSX's markup are left out; a javascript: URL in a Menu item's or Social icon's link on a page or in a document, a <Link> or a component's markup is written as react-dom 19 writes it, a URL that throws, with React 18 too (on React 18 a click in JSDOM ran it, as react-dom 18 writes it as given; 0.2.1, on React 19, wrote it as one that throws), and so are the links the editor's exporters write themselves, a Button's href, an Image's action, an email's Menu items and Social icons, in every mode and in the design, in every shape (a prop, values, attrs.href, custom attributes) and read with their character references decoded, as a browser reads what the exporters write as given (javascript:, javascript:, java	script:; any other URL kept byte for byte) (0.2.1 wrote those as given; Paragraph's html, <Html> and a Table's cells stay raw HTML, and style props are written as given, as documented); link targets can't end their attribute, nor can a target, a Menu item's text or a Social icon's name that isn't a string (an array from JSON); Markdown in <Tailwind> renders in time linear in its size (a megabyte of elements nested in one with a class, or of unique classes in one paragraph or one to a paragraph, in under a second, where 4,000 classes took 23 seconds and 40,000 nested elements 4.5); a table in nested quotes is charged once against the Markdown's cells; a class whose url() could run code (bg-[url(javascript:…)]) is refused; a megabyte of unique classes in one Markdown attribute took 489 MB and ran a 128 MB heap out of memory: a render now reads its first 2,000 different classes, and a megabyte in one attribute, one to a paragraph, in many attributes or on nested tags peaks at 115 to 353 MB (the last is the paragraphs' own, 309 MB without Tailwind; 290 to 457 MB before), in 120 to 600 ms, and renders with a 128 MB heap; one render whose classes held one Tailwind couldn't read no longer takes an app's other classes (p-4) from the renders after it on the shared handle, nor a plugin's error for one class every class of that render; a class outside any <Tailwind> isn't compiled; a cid: or base64 image url() is kept; a link of null (<Button href={null}>, which failed in 0.2.1 too) is none, and a null Menu item or Social icon is skipped (0.2.1 failed too); a Tailwind plugin that throws for one tenant's class no longer makes another tenant's render on the same handle go out without its styles; and the Markdown guide gives its output, time and memory per kilobyte by shape, the most where every few characters are a block of their own, a heading, a list item or a table row (100 KB: 0.5 to 28 MB of HTML, in up to 0.38 s, a 90 to 350 MB peak, inside a 128 MB heap, the densest shape in 192 MB; 1 MB: 5 to 276 MB, up to 3.4 s, a 270 MB to 1.9 GB peak), and recommends capping user Markdown at about 100 KB.
• Found by a fresh review at 11ec4e2, fixed with tests that fail without each fix: a Liquid tag with a quoted default ({{ first_name | default: 'friend' }}) beside inline markup in a Paragraph's, Heading's or Button's children came out as 'friend' in the HTML and the design, which the email service's Liquid rejects (0.2.1 kept it), and a background image URL's {{ campaign_id }} as {{%20campaign_id%20}}: both keep the tag as written now; markup a component writes as HTML with a tag that never ends before an unclosed <style> (<img src=x onerror=alert(1) <style>) came out as a live handler: such a tag is left out with what follows it, as a browser reads it; a Row's or block's display condition (the editor's, {% if customer.vip %} … {% endif %}), which design-to-code keeps from an editor design, was left out of the HTML (0.2.1 too), so a VIP-only row went to everyone: it's written around the row or block now, as the editor's export does, and design-to-code says where a row's or block's merge tag rule isn't applied; a Table's typed headerColor, contentColor and fonts no longer warn that they're ignored. The README now says what mergeTagState is (the editor's state for a Table's repeat rule, not merge tag values).
• Found by ten independent reviewers at 6472ab3, fixed with tests that fail without each fix: a background image URL's email-service tag with quotes, a comparison or brackets ({{ hero | default: 'hero.png' }}, {% if tier > 1 %}, AMPscript, <%hero%>) was percent-encoded, which failed the service's parse of the whole email (0.2.1 kept it), and a character reference that reads as a quote or a bracket got past that encoding into the row's style: the URL is now written by one function that encodes such references, keeps a tag as written but a " (write a tag's strings in single quotes there), and encodes the whole URL where a tag's quotes would take a bracket out of its CSS string; rich text's double quotes stay as written, as its single quotes do; a lone <Link> to SendGrid's <%asm_group_unsubscribe_raw_url%> stays a Paragraph with its URL as written (it was an Html block with the tag escaped, a dead unsubscribe link); a comment in rich text, one left open too, is left out (it hid the rest of the email); a design's timer, form or custom block kept as an <Html> block keeps its display condition and anchor; a heading's plain-text capitals leave every common service's tags as written ({{ FIRST_NAME }} before, 0.2.1 too); a Table's cells from JSON that aren't strings (a quantity) are their text, where the render failed.
• Found by ten more independent reviewers at 78bdc8f, fixed with tests that fail without each fix: rich text's quotes, written back as written, could end a kept attribute whose value held a < (the round's own regression): a kept attribute's < and > are references now, so a tag is read whole; a background URL's tag could end the Outlook conditional comment its VML is in: such a URL is encoded whole; the root's values._meta id and class names are kept to what they can hold, as a Row's and a block's are (0.2.1 wrote them as given); and a Date or an object in a Paragraph's, Heading's or Button's text fails the render, as React's does and the README says, where it was left out without a word (0.2.1 too).
• Found by ten more independent reviewers at 18516bd, fixed with tests that fail without each fix: rich text's stray < and > around a tag taken out are text now (a seeded test builds markup of random pieces and checks only rich text's own tags and attributes come out); a style value with a " (a font stack, url("…")) is kept, written as ", where it was left out (0.2.1 kept a Row's); a Tailwind width class sizes an image whose src gives its natural size (w-8 rendered at 256px); a Table's values type has the merge tag rule the README shows; a Heading level that isn't a tag name is an h1, and said.
• Found by ten more independent reviewers at ee41b51, fixed with a test that fails without it: toPlainText() of pretty HTML gave links the wrong URLs, as prettier writes a long line's end tag as </a\n >: such end tags are read as one now. An image's src.maxWidth wins over a Tailwind width class again, as a flat maxWidth does.
• Found by an outside review at b35cc79, fixed with tests that fail without each fix: a context the template doesn't provide read another request's value after the app's renderToString failed inside its provider, and a stream and a failed renderToString could make a tenant's value the default Elements learned for good (see above); a <Link>'s or inline <a>'s href with a quoted Liquid default ({{ email | default: 'none' }}) was written as 'none', which Liquid rejects; an Image with its natural size, which an email writes twice (Outlook's copy and everyone else's), got its style and className on Outlook's copy only (a rounded-full avatar came out square elsewhere); and esbuild couldn't bundle the async, Tailwind or codegen entry without prettier (below).
• Independent review: ten reviewers at b35cc79, each with its own method (three reading the code; seven running it against the built package: real Liquid, Handlebars and Mustache engines on the output, a sanitizer fuzz checked with an HTML parser, 0.2.1 parity on 100+ templates, the editor and design-to-code round trip, the docs' claims run as written, engine, concurrency and cost, and one with no brief), found no blockers. The rounds before found what the bullets above list.
• Runs the same in Node, Deno and Cloudflare Workers: one script renders every renderer in all three modes, an async template, Tailwind, Markdown, code, design-to-code and plain text, on the packed package; Deno (read, env and sys permissions only) and a Worker in workerd (no Node compatibility flag) give byte-identical output to Node. That check found that esbuild (wrangler's, a serverless bundler's) couldn't bundle the async, Tailwind or codegen entry without prettier installed, as their optional import()s had literal names: prettier is loaded by a name no bundler follows now, and a test bundles every entry with esbuild with prettier missing. The React matrix (18.0.0, 18.2.0, 18.3.1, 19.1.0, 19.2.9, 19.3.1; dev and prod, tests on Node 20) passed locally on b35cc79.
• Same output as the 0.2 engine: 956/956 outputs byte-identical on React 18.3, 19.1 and 19.3 across the corpus (examples, patterns, showcase, the 152 editor round-trip templates, migrate outputs, i18n), and 45,000 random templates with 0 differences, apart from the intended changes (errors throw, clean ids, react-intl templates that 0.2 rendered without their translations now render fully).
• 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 (webpack and Turbopack) and 16 apps and the Jest 30 app: route handlers, Server Components, Client Components, async routes and pages, App Router and Pages Router edge routes, with hooks used after Elements' renders.
• Speed (median, production, vs 0.1.22): renderToHtml 0.97–0.99×, renderToPlainText about 0.96×, renderToJson 1.3–1.45× (0.11 ms for a 12-row email); against 0.2's engine, HTML takes about half the time and JSON about a third.
• Bundle: the main entry is 225,182 / 225,500 bytes unminified (it now carries Elements' own renderer and HTML writer instead of using react-dom's; the last three rounds add about 3 KB: javascript: URLs written as one that throws with React 18 too and in the exporters' own links, a render's <Tailwind> scopes given only their records and a key for the render, a plugin's error made its component's, base64 image URLs in CSS values, links and Menu and Social entries of null; the last round about 1 KB: a Row's anchor, a Video's link and thumbnail and a Social icon's image kept from adding markup, a Font's javascript: URL loading nothing, Tailwind classes in Heading and Button children and on a lone <Link>, null props, a <script>'s or <style>'s text left out of rich text; this round about 8.7 KB, most of it HTML's plain text read in time linear in its size by scanners of its own, then a content prop given as null rendering nothing, a Video's id kept from ending its player's URL and rich text's markup read in time linear in its size, less 1.4 KB from the scanners sharing one loop and one binary search; this round about 1.9 KB: Markdown's and code's work shared across a render, plain text's tag names indexed by their parts, a rich text block's markup given to <Tailwind>; this round about 1.5 KB: a render's shared work kept to its own render, code themes read by their own names, plain text's skip names read as written; this round about 1.8 KB: a render's work shared across copies of Elements, plain text's placeholders and blocked URLs, text in a Row or Column said once per render; and the last four rounds about 4.2 KB: an email service's tags kept whole in rich text, background URLs and plain text, display conditions, rich text's sanitizer and comments, a root's ids, object children failing the render, style values' double quotes, Tailwind widths on sized images, a Heading's level checked and a Table's cells from data; so the budget goes from 203 KB to 225.5 KB).
• The package as npm installs it (the packed tarball, in new projects): it has its MIT LICENSE again (0.2.1's did; pnpm skips the repository's copy when another file matches LICENSE, as THIRD_PARTY_LICENSES.md does), and CI's pack steps (Elements' and migrate's) and the publish jobs now fail without one. Each entry's import and require get their own types (.d.ts, .d.cts), and typesVersions gives moduleResolution: "node" the subpaths: arethetypeswrong finds no problems on all 8 entries for node10, node16 (CJS and ESM) and bundler, where 0.2.1's main entry was "Masquerading as ESM". The code and Markdown entries' types no longer import highlight.js, which is built in (TS2307 without skipLibCheck; CI's check now finds an import of it or of marked in either quotes or as an import() type), and registerLanguage() still takes highlight.js's language modules. npm and pnpm projects on React 18 and 19 import or require every entry and type-check them with skipLibCheck: false on TypeScript 5.9 and 7.0 (bundler, node16 ESM and CommonJS, nodenext), and with moduleResolution: "node" with skipLibCheck on (without it, @unlayer/types, a dependency, has no node10 types for its subpaths, as in 0.2.1); the README's quick start renders. The JavaScript each entry resolves to is unchanged.
• Next.js 16 consumer on 16.4.2: its next build on 16.4.0 now stops with a SecurityFatalError, as npm lists advisories against 16.0.0 to 16.4.0 (two critical, one high) published since its last run; tests/next16-integration pins 16.4.2, the latest 16.x and outside them. The Next.js 15 and 14 apps' builds don't stop, so they're unchanged.
• Optional peers of any version: tailwindcss and prettier stay optional peer dependencies (pnpm's isolated node_modules and Yarn PnP resolve them through that declaration), with the range *. The ranges this PR had before (>=4.0.0, >=3.0.0) made npm install fail with ERESOLVE in any project that already had Tailwind CSS 3 or prettier 2 (0.2.1 declared only React). With one of those installed, loadTailwind (and <Tailwind config> in the async renderers) and pretty now say to upgrade it (npm install tailwindcss@4, npm install prettier@3), instead of TypeError: run is not a function and "install prettier"; without them, the messages are as before. CI installs the packed tarball in a project with tailwindcss 3.4.17 and prettier 2.8.8 and checks both messages, as a module and required; the main entry's build is unchanged.
• Real editor round trip (152 templates: feature tests, showcase, CLI starters, all docs patterns and starters, MJML and Beefree imports; editor 1.524.0, re-run on the new engine with 1.526.0 with identical results): 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): a new engine, new entries and changed HTML output, no removed API. Failures now throw by default (onError: "omit" keeps omission, listed); the upgrade guide in the guides PR covers it. 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, headed 0.3.0 (2026-10-22), 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/