diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index a47f5a66..86d1dea8 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -1,7 +1,8 @@
 # Release & Publish
 #
 # Gated publish flow, one package at a time:
-#   1. PR merged to main → triggers build & test
+#   1. PR merged to main → triggers build & test, and the react package's
+#      suite on each React it supports (react-versions.yml)
 #   2. Each package publishes only when its code changed since its last
 #      release tag (Elements: v*, migrate: migrate-v*)
 #   3. A reviewer approves each publish in the Actions UI (environment gate)
@@ -160,9 +161,18 @@ jobs:
           echo "migrate=$MIGRATE" >> $GITHUB_OUTPUT
           echo "Elements changed: $ELEMENTS, migrate changed: $MIGRATE"
 
+  # The react package's suite on each React it supports, for this run's commit: Elements publishes only when every
+  # one passes (test.yml runs it too, but nothing waits for that run).
+  react-versions:
+    name: React versions
+    needs: changes
+    if: needs.changes.outputs.elements == 'true'
+    uses: ./.github/workflows/react-versions.yml
+    secrets: inherit
+
   publish:
     name: Publish @unlayer/react-elements
-    needs: [build-and-test, changes]
+    needs: [build-and-test, changes, react-versions]
     if: needs.changes.outputs.elements == 'true'
     runs-on: ubuntu-latest
     outputs:
@@ -322,11 +332,13 @@ jobs:
       # version numbers, then npm publish handles OIDC trusted publishing.
       # npm publish alone does NOT understand catalog: and would ship broken deps.
       # No --provenance flag yet: the repository is public now, so it can be added.
+      # A version can't be changed once it's on npm: the tarball must have its license (see test.yml's pack step).
       - name: Publish to npm (trusted publishing)
         working-directory: packages/react
         run: |
           pnpm pack --pack-destination /tmp
           TARBALL=$(ls /tmp/unlayer-react-elements-*.tgz)
+          tar tzf "$TARBALL" | grep -qx package/LICENSE || { echo "::error::$TARBALL has no LICENSE"; exit 1; }
           npm publish "$TARBALL" --access public
 
       - name: Tag release
@@ -498,6 +510,7 @@ jobs:
         run: |
           pnpm pack --pack-destination /tmp
           TARBALL=$(ls /tmp/unlayer-migrate-*.tgz)
+          tar tzf "$TARBALL" | grep -qx package/LICENSE || { echo "::error::$TARBALL has no LICENSE"; exit 1; }
           npm publish "$TARBALL" --access public
 
       - name: Tag release
diff --git a/.github/workflows/react-canary.yml b/.github/workflows/react-canary.yml
new file mode 100644
index 00000000..35759c01
--- /dev/null
+++ b/.github/workflows/react-canary.yml
@@ -0,0 +1,53 @@
+name: React canary
+
+# Weekly, the react package's renderer (src/engine) against React's canary: what changes in React before it ships.
+# It reports and doesn't block: a failure here is a heads-up to update the React version table
+# (packages/react/src/engine/react-compat.ts) or the walker before that React is released.
+on:
+  schedule:
+    - cron: '0 6 * * 1' # Mondays at 6am UTC
+  workflow_dispatch:
+
+jobs:
+  canary:
+    name: React canary (fuzz)
+    runs-on: ubuntu-latest
+    continue-on-error: true
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.7.0
+
+      - name: Authenticate npm registry
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.TEST_NPM_TOKEN }}" > ~/.npmrc
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install React's canary
+        run: |
+          pnpm --filter @unlayer/react-elements add -D react@canary react-dom@canary
+          node -e "console.log('React', require('./packages/react/node_modules/react/package.json').version)"
+
+      - name: Build
+        run: pnpm --filter @unlayer-internal/shared-elements build && pnpm --filter @unlayer/react-elements build
+
+      # The walker against react-dom/server on random trees (useId()s included) and on random markup where templates
+      # have it, random templates against the last release, and the rest of the engine's tests (the self-check of an
+      # unknown React version among them).
+      - name: Fuzz
+        env:
+          WALKER_FUZZ_SEEDS: 5000
+          TEMPLATE_SEEDS: 1000
+          GENERATED_SEEDS: 3000
+        run: pnpm --filter @unlayer/react-elements exec vitest run src/engine src/regression/generated.test.tsx
diff --git a/.github/workflows/react-versions.yml b/.github/workflows/react-versions.yml
new file mode 100644
index 00000000..7ec2d501
--- /dev/null
+++ b/.github/workflows/react-versions.yml
@@ -0,0 +1,69 @@
+# React versions
+#
+# Elements renders templates with its own renderer (src/engine), which must
+# render as each React it supports does: the react package's suite on each
+# one (its react and react-dom swapped in), in React's development build
+# (the full suite) and its production build (the engine's, the renderers'
+# and the regression tests: React's act(), which the component tests need,
+# is in its development build only). It holds the walker against
+# react-dom/server on hand-written and random trees, useId()s included
+# (src/engine/differential.test.tsx), React's react-server build with a
+# hook it lacks (src/regression/react-server-build.test.ts, React 19), and
+# a hook the dispatcher doesn't know (src/engine/dispatcher.test.tsx).
+#
+# A workflow of its own, called by test.yml (pushes and pull requests) and by
+# publish.yml, whose publish job waits for it: a release ships only a commit
+# every React passed. `github.sha` is the caller's, so it tests the commit the
+# caller tests or publishes.
+name: React versions
+
+on:
+  workflow_call:
+
+jobs:
+  react-versions:
+    name: React ${{ matrix.react }} (${{ matrix.build }})
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        react: ["18.0.0", "18.2.0", "18.3.1", "19.1", "19.2", "latest"]
+        build: [development, production]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.7.0
+
+      - name: Authenticate npm registry
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.TEST_NPM_TOKEN }}" > ~/.npmrc
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install React ${{ matrix.react }}
+        run: |
+          pnpm --filter @unlayer/react-elements add -D react@${{ matrix.react }} react-dom@${{ matrix.react }}
+          node -e "console.log('React', require('./packages/react/node_modules/react/package.json').version)"
+
+      - name: Build
+        run: pnpm --filter @unlayer-internal/shared-elements build && pnpm --filter @unlayer/react-elements build
+
+      - name: Tests (React's development build)
+        if: matrix.build == 'development'
+        run: pnpm --filter @unlayer/react-elements exec vitest run
+
+      - name: Tests (React's production build)
+        if: matrix.build == 'production'
+        env:
+          NODE_ENV: production
+        run: pnpm --filter @unlayer/react-elements exec vitest run src/engine src/async src/regression src/utils/render-errors.test.tsx src/utils/nested-renders.test.tsx --exclude src/regression/client-render.test.tsx
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index b18a61e8..721e0ab2 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -58,9 +58,135 @@ jobs:
         run: pnpm --filter @unlayer/from-react-email typecheck && pnpm --filter @unlayer/migrate typecheck
 
       # ── Bundle size budget ──────────────────────────────────────
-      # Fail if the react-elements ESM bundle exceeds 118KB.
-      # Current size: about 113.4KB (0.1.22: about 76KB). Most of the growth is
-      # the render that collects a template's rows and blocks (one React render,
+      # Fail if the react-elements ESM bundle exceeds 221KB.
+      # Current size: about 225KB (0.1.22: about 76KB). Raised from 224.5KB
+      # (about 1.1KB with the round before): rich text's stray brackets kept as
+      # text, a root's ids kept to what they hold, object children failing the
+      # render, style values' double quotes written as references, Tailwind
+      # widths on images with a natural size, and a Heading's level checked.
+      # Raised from 222.5KB
+      # (about 1.7KB): an email service's tags kept whole in background URLs
+      # with their encoding checked, rich text's comments left out and its
+      # double quotes as written, a lone Link's tags kept, a Table's cells from
+      # data written as text, and plain text's heading tags kept as written.
+      # Raised from 221KB
+      # (about 1.1KB): display conditions written around rows and blocks, an
+      # email service's tags kept whole in rich text and background URLs, a tag
+      # that never ends left out of rich text, and a Table's typed props named.
+      # Raised from 219.5KB
+      # (about 1.8KB): a render's work shared across copies of Elements and
+      # with all the code it runs, plain text's placeholders kept from text
+      # that decodes to them and blocked URLs left out, and text placed
+      # straight in a Row or Column said once per render. Raised from 218KB
+      # (about 1.5KB): a render's shared work kept to its own render (template
+      # wrappers, nested renders), code themes read by their own names, and
+      # plain text's skip names read as written. Raised from 216KB
+      # (about 1.9KB): Markdown's and code's work is shared across a render,
+      # not counted per block, plain text's tag names are indexed by their
+      # parts, and a rich text block's markup is given to <Tailwind> with the
+      # render's other classes. Raised from 207KB
+      # (about 8.7KB): HTML's plain text (htmlToPlainText) is read in time
+      # linear in its size by scanners of its own, where its regexes read
+      # unclosed tags again from each place they could start (40KB took a
+      # minute); a content prop given as null renders nothing, a Video's id
+      # can't end its player's URL, and rich text's markup is read in time
+      # linear in its size. Raised from 206KB
+      # (about 1KB): a Row's anchor, a Video's link and thumbnail and a
+      # Social icon's image are kept from adding markup, a Font's
+      # javascript: URL loads nothing, Tailwind classes in a Heading's or a
+      # Button's children and on a lone <Link> are inlined, a prop given as
+      # null is one not given, and a <script>'s or <style>'s text is left
+      # out of rich text children. Raised from 204.5KB
+      # (about 1.3KB): the editor's exporters' own links (a Button's, an
+      # Image's, a Menu's, a Social's) are given no URL that runs code, in
+      # the HTML and the design, and a null Menu item or Social icon is
+      # skipped. Raised from 203KB
+      # (about 1.8KB): a javascript: URL is written as one that throws with
+      # React 18 too, a render's Tailwind scopes are given only the records
+      # in them, with a key for the render (its first 2,000 classes are
+      # read), and a plugin's error for a component's classes is that
+      # component's; a link of null is none. Raised from 202.5KB
+      # (about 0.4KB): a render gives a <Tailwind>'s rewrite what it
+      # collected, so its classes are compiled at once (one at a time, a
+      # few thousand from data took seconds), and a link's target, a Menu
+      # item's text or a Social icon's name that isn't a string is a new tab
+      # or its text. Raised from 200KB
+      # (about 2.2KB): rich text in children reads a link's URL with its
+      # character references decoded (the Markdown sanitizer's decoder, now
+      # shared), a link's target that could end its attribute is a new tab,
+      # the plain text keeps an email service's <%name%> tags, the other
+      # entries can leave a part of a template out alone (a Markdown table
+      # past the cells it can have), a context a template doesn't provide
+      # is worked out once per render, and React's idle dispatcher isn't
+      # taken for a running render. Raised from 198.5KB
+      # (about 1.5KB): a context a template doesn't provide reads its default
+      # (React's two values for it compared, the default seen kept per
+      # context), and a <Head>'s style and script text is escaped whole,
+      # whatever writes it, against its end tag and those of what it's in (the
+      # format context a head's walk carries). Raised from 198KB
+      # (about 0.3KB): the plain text reads links before headings and
+      # preformatted text, each attribute whole, with their URLs set aside
+      # till the end, and doesn't wrap the URLs listed after the text.
+      # Raised from 194.5KB
+      # (about 3.4KB): markup is written as react-dom writes it for the
+      # installed React, a <select>'s value marking its options (the format
+      # context the walk carries), the form controls' rules and React 19's
+      # for a style's, script's and title's text, and a <Head>'s style and
+      # script text written as given in every React. Raised from 193.5KB
+      # (about 1KB): a <Suspense> around the template is unwrapped, a root
+      # the walk of a template with no root meets is said, and which Row or
+      # Column failed and what an async render compiled for its <Tailwind>s
+      # are kept in the render's scope. Raised from 193KB
+      # (about 0.6KB): each render function makes a scope of its own, the
+      # user's code (components, exporters, heads, onError) runs outside it,
+      # what unwrapping a template finds is kept in its render's scope, and a
+      # lazy template is unwrapped. Raised from 192KB
+      # (about 0.7KB): what's in a <Head> is walked with the template (its
+      # components waited for, in the error policy), a head function that
+      # fails is in the error policy, renderToJson throws a template
+      # wrapper's error as it is, and what the walker says once and its style
+      # names are bounded. Raised from 191KB
+      # (about 1KB): a template with no root renders as a root's content
+      # (walked once, its rows rendered with the render's config), and the
+      # async renderers collect it as they collect a root's. Raised from 190KB
+      # (about 1.3KB): Elements' roots are known by a marker shared across
+      # copies (an older copy's by its code), a suspension reaches the
+      # <Suspense> around it whatever `onError` says, and an async template
+      # with no root is rendered without calling it again. Raised from 189KB
+      # (about 1.2KB): a template, a component around its root and a class
+      # component that throw a promise (React 18's Suspense) are waited for by
+      # the async renderers and said by the synchronous ones, and a root of
+      # another copy of Elements renders as this copy's. Raised from 187KB
+      # (about 2KB): a Row or Column whose own exporter fails is left out with
+      # `onError: "omit"`, as a block is (a Column with its cell, its Row made
+      # again without it), instead of failing the render. Raised from 173.5KB
+      # (about 13KB): Divider, Html, Menu and Social write their web and
+      # document HTML without react-dom/server, which can't run in an edge
+      # runtime or a React Server Components layer (src/exporters/, about 7KB,
+      # writing with the walker's host markup, one table of React 18's and 19's
+      # rules for both), and what makes the renders faster: the template
+      # collected as a tree of its records (no markers parsed back), its model,
+      # values and the design's copies made once (src/model/, the head's reuse,
+      # pxMerged), and a root's and Row's HTML written without a walk. The
+      # async walk's holes are the async entry's. Raised from 131.5KB
+      # (about 41KB) for the walker (src/engine), the renderer Elements renders
+      # templates with instead of react-dom: the walk itself, its hooks
+      # dispatcher, React's attribute and style tables for host markup, the
+      # async walk's holes and tree-order output, the React version table and
+      # its self-check, and the error policy (RenderError, `onError`). It
+      # replaces react-dom in Elements' own renders, which was never counted
+      # here (a peer dependency); the collecting render's react-dom plumbing
+      # (the second react-dom module, blind mode, the Sentinel, calling a
+      # failed component again) went with it. Raised from 130.5KB
+      # (about 1KB) so the async renderers collect where Elements' React isn't
+      # react-dom's (Next.js's server layers) as the synchronous ones do, and a
+      # template whose Rows render as HTML instead of being collected fails
+      # instead of giving a broken email. Raised from 126KB for
+      # editor parity: the editor's base stylesheet for each mode in the
+      # document's head (about 1.1KB of CSS), a Paragraph rendered from the text
+      # its design holds, a root's `fonts` and its `displayMode` in the design,
+      # and blocks of another copy of Elements rendered as this one's. Most of
+      # the growth since 0.1.22 is the render that collects a template's rows and blocks (one React render,
       # so hooks, context, Fragments and the user's components work as React
       # renders them; a component that throws, suspends or is async left out
       # with a message naming it; markup and blocks rendered to strings inside
@@ -70,14 +196,25 @@ jobs:
       # rendering where a bundler gives Elements another copy of React than
       # react-dom's (Next.js's server layers), and loading a second module of
       # react-dom's when Elements is called inside a renderToString it renders with,
-      # and leaving out Columns inside markup in a Row, as 0.1.22 did.
+      # and leaving out Columns inside markup in a Row, as 0.1.22 did, and
+      # Tailwind classes (the hook a <Tailwind> scope uses in the collected
+      # render; <Tailwind>, Tailwind itself, the code that reads its CSS and each
+      # component's class table are in the separate `tailwind` entry, not counted),
+      # rich text children (inline JSX and components in Paragraph, Heading and
+      # Button text), code kept in plain text, what a <Font> gives the head and
+      # the root, right-to-left text alignment, and `style`/`className` on the
+      # element each component renders, <Link>, the plain text's options, and
+      # an <UnlayerProvider>'s config read by the roots and the render functions,
+      # and a link or rule in a Column kept as HTML where its block can't hold it.
+      # The Markdown parser, the code highlighter, <Font>, <Head> and the
+      # design-to-code converter (`codegen`) are in their own entries.
       # The budget tracks the unminified ESM output as a proxy for code volume;
       # it still flags accidental dependency bundling (any real dep is 10KB+).
       - name: Check bundle size
         run: |
           BUNDLE="packages/react/dist/index.js"
           SIZE=$(wc -c < "$BUNDLE" | tr -d ' ')
-          MAX_SIZE=118000
+          MAX_SIZE=229500
           echo "Bundle: $BUNDLE"
           echo "Size: $SIZE bytes (budget: $MAX_SIZE bytes)"
           if [ "$SIZE" -gt "$MAX_SIZE" ]; then
@@ -166,11 +303,29 @@ jobs:
       # in a real Next.js app — exactly like a consumer would.
       # Catches SSR, bundling, and Server Component compatibility issues
       # that unit tests can't detect.
+      # The tarball has its license: pnpm adds the repository's only where no file in the package matches LICENSE,
+      # which THIRD_PARTY_LICENSES.md does (a 0.3.0 build had none), and the fizz-cleanup/ folder webpack 4 and Jest
+      # before 28 resolve the package's fizz-cleanup export from (they don't read "exports"). And its types import nothing built into the
+      # package (highlight.js, marked), which consumers don't install (a 0.3.0 build's did: TS2307 without skipLibCheck):
+      # no import or export from them in either quotes, and no `import("…")` type (a comment may name them).
       - name: Pack react-elements
         run: |
           cd packages/react
           pnpm pack --pack-destination /tmp
-          echo "TARBALL=$(ls /tmp/unlayer-react-elements-*.tgz)" >> $GITHUB_ENV
+          TARBALL=$(ls /tmp/unlayer-react-elements-*.tgz)
+          tar tzf "$TARBALL" | grep -qx package/LICENSE || { echo "::error::$TARBALL has no LICENSE"; exit 1; }
+          tar tzf "$TARBALL" | grep -qx package/fizz-cleanup/package.json || { echo "::error::$TARBALL has no fizz-cleanup/package.json (for resolvers that don't read exports)"; exit 1; }
+          if grep -nE "[\"'(](highlight\.js|marked)[/\"']" dist/*.d.ts dist/*.d.cts | grep -vE "^[^:]+:[0-9]+:[[:space:]]*(\*|/\*|//)"; then echo "::error::the types import a package built into Elements"; exit 1; fi
+          echo "TARBALL=$TARBALL" >> $GITHUB_ENV
+
+      # migrate has no LICENSE of its own: its tarball gets the repository's from pnpm (as publish.yml checks, where
+      # a missing one would fail the release instead).
+      - name: Pack migrate
+        run: |
+          cd packages/migrate
+          pnpm pack --pack-destination /tmp
+          MIGRATE_TARBALL=$(ls /tmp/unlayer-migrate-*.tgz)
+          tar tzf "$MIGRATE_TARBALL" | grep -qx package/LICENSE || { echo "::error::$MIGRATE_TARBALL has no LICENSE"; exit 1; }
 
       - name: Next.js integration build
         run: |
@@ -178,8 +333,20 @@ jobs:
           npm install "$TARBALL"
           npm run build
           # An email rendered in a route handler and a Server Component comes out as one (tables, a design with
-          # its rows), with Elements bundled into Next's server layers (no serverExternalPackages); an edge route
-          # builds (Turbopack) and renders or says to render in the Node.js runtime.
+          # its rows), with the synchronous and the async renderers, with Elements bundled into Next's server
+          # layers (no serverExternalPackages); an App Router
+          # edge route builds (Turbopack) and renders or says to render in the Node.js runtime, and Pages Router
+          # API routes (Node.js and edge) render. Each route renders with every entry of Elements too.
+          npm run verify
+
+      # ── Next.js integration build with webpack ──────────────────
+      # The same app built with webpack, Next.js 15's default bundler (`next build` without --turbopack). It fails
+      # the build of a module that imports by name what React's react-server build doesn't export (createContext,
+      # useContext), in an edge route, where Turbopack builds it.
+      - name: Next.js integration build (webpack)
+        run: |
+          cd tests/nextjs-integration
+          npm run build:webpack
           npm run verify
 
       # ── More consumers ──────────────────────────────────────────
@@ -202,6 +369,7 @@ jobs:
       # create-next-app's setup since Next.js 16: a route handler, a Server Component and a Client Component that
       # render an email are prerendered when the app builds, and the build fails if a render reads a random number
       # or the date. 0.2.0's did (crypto.getRandomValues() for each render's nonce), so no new app could build.
+      # The async renderers render one in a route handler and a Server Component when it's requested.
       - name: Next.js 16 consumer (Cache Components)
         run: |
           cd tests/next16-integration
@@ -210,6 +378,20 @@ jobs:
           npm run build
           npm run verify
 
+      # ── A project's own Tailwind CSS 3 and prettier 2 ───────────
+      # Tailwind and prettier are optional peer dependencies of any version: npm keeps a project's own, older ones
+      # (an 0.3.0 build's ">=4.0.0" and ">=3.0.0" failed `npm install` with ERESOLVE), and what needs Tailwind CSS 4 or
+      # prettier 3 says to upgrade, as a module and required (tests/older-peers/verify.mjs).
+      - name: Project with Tailwind CSS 3 and prettier 2
+        timeout-minutes: 10
+        run: |
+          DIR=$(mktemp -d)
+          cp tests/older-peers/package.json tests/older-peers/verify.mjs "$DIR"
+          cd "$DIR"
+          npm install --no-audit --no-fund
+          npm install --no-audit --no-fund "$TARBALL"
+          node verify.mjs
+
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v4
         with:
@@ -225,3 +407,11 @@ jobs:
             packages/*/coverage/
             coverage/
           retention-days: 30
+
+  # ── React versions ──────────────────────────────────────────
+  # The react package's suite on each React it supports: see
+  # react-versions.yml, which publish.yml runs before a release too.
+  react-versions:
+    name: React versions
+    uses: ./.github/workflows/react-versions.yml
+    secrets: inherit
diff --git a/CLAUDE.md b/CLAUDE.md
index 8c7e0821..079ded54 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -60,18 +60,24 @@ This factory:
 
 ```
 JSX flat props
-  → one React render collects the template (utils/normalize.tsx): Row, Column and blocks record their props
-    and render markers, React renders everything else (the user's components, hooks, Context, Fragments);
-    the result is the template as Elements components only (Email > Row > Column > blocks)
-  → the HTML, the head and the design are all made from that collected tree, so they can't disagree
+  → template wrappers called once, with hooks, until the root (utils/unwrap-root.ts)
+  → the walker (src/engine) renders the content once, no react-dom: Row, Column, blocks, <Tailwind> and
+    <Head>/<Font> are recorded by their markers (utils/record.tsx), what's inside them walked inside their
+    records; everything else (the user's components, hooks, Context, Fragments, async components and use())
+    as React renders it. Its output is the content as a tree of records, markup and text (engine/output.ts)
+  → that tree made the template as Elements components only (Email > Row > Column > blocks, src/model),
+    nothing parsed; the HTML, the head and the design are all made from it, so they can't disagree
   → mapSemanticProps() converts to nested values matching @unlayer/types
-  → each row is rendered with ReactDOMServer.renderToString(); BodyExporter from @unlayer/exporters
-    produces final HTML per mode
+  → each row's HTML is Row/Column/blocks calling @unlayer/exporters (written by the walker's static
+    markup); BodyExporter produces final HTML per mode
 ```
 
-A component that throws, suspends or is async is left out at the nearest Row, Column or root child (a
-Suspense boundary), with a message naming it; the rest renders. The collector is a module-level stack shared
-by every copy of Elements in a process (`Symbol.for`), not React context, so it works in Server Components.
+A part that fails (a component that throws, or is async in a synchronous render; a Row whose Columns don't fit
+its layout; an exporter) fails the render with a `RenderError` naming it and its position (`Row 3 › Column 1 ›
+Hero`), the original as `cause`; with `onError: "omit"` (or a function) it's left out of the HTML, text and design
+alike and listed (`renderToHtmlParts().omitted`). The walker installs its own hooks dispatcher in React's slot
+around each component call only. See `packages/react/ARCHITECTURE.md` (pipeline, dispatcher, React version table
+and self-check, async walk, error policy, invariants) before changing the renderer.
 
 Three render modes: `email` (table-based), `web` (div+flexbox), `document` (print).
 
@@ -93,9 +99,18 @@ Example: `<Button fontSize="16px">` → `{ style: { fontSize: "16px" } }` in the
 |------|---------|
 | `packages/react/src/index.ts` | Main barrel export |
 | `packages/react/src/utils/create-component.tsx` | Component factory |
+| `packages/react/src/exporters/` | Divider's, Html's, Menu's and Social's web and document HTML as strings: @unlayer/exporters renders it with react-dom/server, which can't run in an edge runtime or a Server Components layer. `markup.ts` writes what React's static markup would with the engine's host markup (`src/engine/host.ts`, `attributes.ts`: React 18's or 19's rules, by the installed React's version); `parity.test.tsx` compares them with the pinned exporters (it fails when a new pin's HTML differs), `react-19.test.ts` with React 19's output |
 | `packages/react/src/utils/render-to-html.tsx` | `renderToHtml()` implementation |
 | `packages/react/src/utils/document-layouts.ts` | Per-mode document shells (email/web/document), kept in parity with the editor's exported documents |
 | `packages/react/src/utils/render-to-json.ts` | `renderToJson()` implementation |
+| `packages/react/src/utils/inline-html.ts` | Rich text children (inline JSX, components such as react-intl's) of Paragraph/Heading/Button: rendered in the collecting render (`record.tsx`), kept to inline formatting here |
+| `packages/react/src/utils/tailwind.ts`, `src/utils/internals.ts` | The main entry's hooks for the other entries: a scope component (`<Tailwind>`) whose props rewrite those of the components inside it, recorded in the collecting render; and the internals the other entries use (on `renderToHtml[Symbol.for("@unlayer/react-elements/internals")]`) |
+| `packages/react/src/tailwind/Tailwind.tsx` | `<Tailwind>` (in the `tailwind` entry, not the main one): classes of the components inside it as their props (how each component takes them: `src/tailwind/tables.ts`), and what no prop takes as an inline `style` |
+| `packages/react/src/tailwind/inherit.ts`, `src/tailwind/row.ts` | A Row's rewrite (the Row's own, else one of its Columns', else the root's; src/model/elements.ts runs it on the Row's Columns): text classes on a Row, a Column or the root as the props of the text blocks inside, as CSS inherits them, and a border without a color in the text color around it (`inherit.ts`); then the Row's padding classes and its Columns' margins placed in its Columns (`row.ts`) |
+| `packages/react/src/tailwind/index.ts` | The `@unlayer/react-elements/tailwind` entry: `loadTailwind()` (the only code that loads `tailwindcss`), the class → declaration → prop reading (and classes in `html` markup → inline styles), the async renderers |
+| `packages/react/src/engine/` | The walker: renders templates as react-dom's static server render would, without react-dom (`walk.ts`), with its own hooks dispatcher (`dispatcher.ts`), host markup (`host.ts`, `attributes.ts`, which the string exporters write with too), tree-order output (`output.ts`), the React version table and self-check (`react-compat.ts`, `self-test.ts`). See `packages/react/ARCHITECTURE.md` |
+| `packages/react/src/async/` | The `@unlayer/react-elements/async` entry (also the Tailwind entry's async renderers): an async template awaited, then the content collected once by the walker's async walk (async components, Suspense and `use()` awaited, siblings at once, output in tree order), which the synchronous render reuses; `pretty` with prettier (optional peer) |
+| `packages/react/src/markdown/`, `src/code/`, `src/font/`, `src/head/` | The `markdown` (Markdown → blocks, built-in `marked`), `code` (CodeBlock, CodeInline, built-in `highlight.js` and themes, highlight.js's ported), `font` (`<Font>`) and `head` (`<Head>`) entries. They import the main entry by the package's name (`tsup.config.ts` keeps it external; `vitest.config.ts` and the tsconfigs map it to `src/`), so all entries share one copy of Elements; their libraries are built in (licenses in `packages/react/THIRD_PARTY_LICENSES.md`) and never reach the main entry |
 | `packages/react/src/utils/semantic-props.ts` | Flat → nested prop mapper |
 | `packages/react/src/components/Body.tsx` | Core container component (handles all 3 modes) |
 | `packages/react/src/components/Row.tsx` | Row layout with column management |
@@ -109,7 +124,7 @@ Example: `<Button fontSize="16px">` → `{ style: { fontSize: "16px" } }` in the
 - **Snapshot tests**: `packages/react/src/components/snapshots.test.tsx` — every component in web + email modes
 - **Golden template test**: `packages/react/src/golden-template.test.tsx` — full realistic email through all 4 render pipelines
 - **Node environment test**: `packages/react/src/node-import.test.ts` — verifies no browser API dependency
-- **Next.js integration**: `tests/nextjs-integration/` — real Next.js 15 app build (Turbopack) that renders an email in a route handler, a Server Component and an edge route (`verify.mjs`); `tests/next14-integration/` the same on Next.js 14 with React 18; `tests/next16-integration/` on Next.js 16 with Cache Components (create-next-app's default), where the route handler, Server Component and Client Component are prerendered when the app builds, which fails if a render reads a random number or the date (`src/regression/render-isolation.test.tsx` checks that too); `tests/jest-integration/` the packed package in Jest 30's jsdom environment with React 19
+- **Next.js integration**: `tests/nextjs-integration/` — real Next.js 15 app, built with Turbopack and with webpack (`npm run build:webpack`), that renders an email in a route handler, a Server Component, a Client Component, an edge route and Pages Router API routes (Node.js and edge), each with every entry of Elements too (`src/lib/entries.ts`, `verify.mjs`); `tests/next14-integration/` the same on Next.js 14 with React 18; `tests/next16-integration/` on Next.js 16 with Cache Components (create-next-app's default), where the route handler, Server Component and Client Component are prerendered when the app builds, which fails if a render reads a random number or the date (`src/regression/render-isolation.test.tsx` checks that too); `tests/jest-integration/` the packed package in Jest 30's jsdom environment with React 19
 - **Storybook smoke test**: `packages/react/.storybook/test-runner.ts` — opens every story in headless Chromium and asserts each component paints visible content with no console / page errors. Runs against both the dev server (`pnpm test-storybook`) and the production static build (`pnpm test-storybook:ci`). Note: Storybook bundles from `src/` via Vite — the published `dist/` artifact is covered by the Next.js integration and the CSP gate.
 - **CSP safety gate**: `packages/react/scripts/csp-probe.mjs` (`pnpm test:csp`) — imports + renders the built `dist/` bundle under V8's `--disallow-code-generation-from-strings` (a Content-Security-Policy without `'unsafe-eval'`). **Hard gate**: fails if this package _or_ its pinned `@unlayer/exporters` evaluates a string (`eval` / `new Function`) at import or render. It stays red until the workspace catalog pins a precompiled / CSP-safe `@unlayer/exporters` release — a green check must mean the package is genuinely CSP-safe.
 - **Storybook visual-drift gate**: `packages/react/scripts/storybook-visual.mjs` (`pnpm test:visual`, needs `pnpm build-storybook` first) — fingerprints the computed styles and the visible text of every story (276 renders) at desktop + mobile widths in headless Chromium and diffs against the committed `scripts/storybook-visual-baseline.json` (dictionary-encoded; regenerate intentional changes with `UPDATE_VISUAL_BASELINE=1 pnpm test:visual`). Fails naming the exact stories and property-level diffs. Computed styles, not pixel screenshots — deterministic across macOS/Linux; blind only to pure rasterization differences.
@@ -127,7 +142,8 @@ Example: `<Button fontSize="16px">` → `{ style: { fontSize: "16px" } }` in the
 
 - TypeScript strict compilation
 - All unit tests pass
-- Bundle size < 118KB (ESM)
+- Bundle size < 221KB (ESM, main entry, `MAX_SIZE` in `.github/workflows/test.yml`; the `tailwind`, `async`, `markdown`, `code`, `font` and `head` entries aren't counted)
+- The react package's suite on React 18.0, 18.2, 18.3, 19.1, 19.2 and the latest 19, in React's development and production builds (the walker against react-dom/server, useId()s included; React's react-server build); weekly against React's canary (`react-canary.yml`, reports only)
 - Elements output matches the previous release (designs, plain text) and the reviewed snapshots (HTML, template patterns); hostile inputs add no markup
 - Next.js integration build succeeds
 - Browser E2E gate passes (rendered documents verified in Chromium: 0px `<p>` margins, single `<body>`, no errors)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 64d0ee3e..2b9c81c5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -107,7 +107,7 @@ These are pinned in `pnpm-workspace.yaml` via the catalog feature and updated au
 - The CI pipeline checks:
   - TypeScript compilation
   - Unit tests
-  - Bundle size budget (ESM must be < 60KB)
+  - Bundle size budget (the main entry's ESM must be under 221KB: `MAX_SIZE` in `.github/workflows/test.yml`)
   - Next.js integration test (Server Components)
 
 ### Versioning
diff --git a/README.md b/README.md
index a4263b76..8b5fe14f 100644
--- a/README.md
+++ b/README.md
@@ -155,7 +155,7 @@ Generates email-safe HTML, responsive web HTML, and print-ready HTML for PDF gen
 
 ### Visual Builder Compatible
 
-Export Unlayer-compatible design JSON with `renderToJson()` to hand code-authored templates to the visual editor. Persist edited designs as JSON and export their HTML from the editor; edited JSON does not regenerate React source. See the [code-to-visual-editing workflow](./packages/react/docs/visual-editing.md).
+Export Unlayer-compatible design JSON with `renderToJson()` to hand code-authored templates to the visual editor. Persist edited designs as JSON and export their HTML from the editor, or turn a design back into Elements code with `designToElements()` from `@unlayer/react-elements/codegen`. See the [code-to-visual-editing workflow](./packages/react/docs/visual-editing.md) and [designs as Elements code](./packages/react/docs/codegen.md).
 
 ### TypeScript First
 
@@ -167,7 +167,7 @@ Built with TypeScript from the ground up — full type definitions, autocomplete
 
 ### 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.
+The main entry is about 221KB of ESM, unminified (about 62KB gzipped), and tree-shakeable; Tailwind, the async renderers, Markdown, code highlighting, fonts, the head and the design-to-code converter are entries of their own, loaded only where you import them. Zero client-side JavaScript required. Designed for performance-sensitive applications and server-side rendering environments.
 
 ## Real-World Use Cases
 
@@ -196,7 +196,7 @@ Publish the same content as an email campaign, a web archive, and a public landi
 | `<Document>` | Root wrapper — print/PDF optimized |
 | `<Row>` | Layout container with column layout support |
 | `<Column>` | Column inside a Row |
-| `<Button>` | CTA button with hover states and links |
+| `<Button>` | CTA button with links, and hover colors on web pages and documents |
 | `<Heading>` | Heading (h1–h4) |
 | `<Paragraph>` | Rich text with plain text or HTML content |
 | `<Image>` | Responsive image with alt text |
diff --git a/packages/from-react-email/src/index.ts b/packages/from-react-email/src/index.ts
index 8dd235e2..99a5fd7e 100644
--- a/packages/from-react-email/src/index.ts
+++ b/packages/from-react-email/src/index.ts
@@ -225,13 +225,13 @@ export async function verifyConversion(
   // renderToHtml reads the root (Email) element, so call the component.
   const root = callTemplate(Converted, props);
   if (!React.isValidElement(root)) throw new Error("the template renders nothing with these props: give it PreviewProps it renders with");
-  const convertedHtml = renderToHtml(root);
+  // A part of the template that fails is left out (the design's warnings say it, below), so the rest is checked.
+  const convertedHtml = renderToHtml(root, { onError: () => {} });
   const designRoot = options.designProps ? callTemplate(Converted, options.designProps) : root;
   const warnings: string[] = [];
   const warn = console.warn;
   const error = console.error;
   console.warn = (...args: unknown[]) => void warnings.push(args.map(String).join(" "));
-  // A block Elements leaves out of the design because it threw (`[Unlayer] <p> threw while rendering`) is missing too.
   console.error = (...args: unknown[]) => {
     const message = args.map(String).join(" ");
     if (message.startsWith("[Unlayer]")) warnings.push(message);
@@ -239,12 +239,13 @@ export async function verifyConversion(
   };
   let design: Record<string, unknown>;
   try {
-    design = pinImageWidths(renderToJson(designRoot) as unknown as Record<string, unknown>);
+    // A block Elements leaves out of the design because it failed (`[Unlayer] no data (in <Broken> at …)`) is missing too.
+    design = pinImageWidths(renderToJson(designRoot, { onError: (failure) => void warnings.push(failure.message) }) as unknown as Record<string, unknown>);
   } finally {
     console.warn = warn;
     console.error = error;
   }
-  const designWarnings = withoutImagePreloads(warnings, () => (designRoot === root ? convertedHtml : renderToHtml(designRoot)));
+  const designWarnings = withoutImagePreloads(warnings.filter((warning) => !FONT_URL.test(warning)), () => (designRoot === root ? convertedHtml : renderToHtml(designRoot)));
 
   const variants: Verification["variants"] = [];
   for (const [name, value] of Object.entries(props)) {
@@ -340,6 +341,12 @@ export async function verifyConversion(
   return { ...compareText(originalHtml, convertedHtml), originalHtml, convertedHtml, designWarnings, design, editable: designEditable(design), editorFonts: editorFonts(design, stylesheets), variants };
 }
 
+/**
+ * Elements' warning for a root's web font the design can't hold (a font file, or a family no text in it has): the
+ * report lists it (`editorFonts`) to register with the editor, so it's no block the editor wouldn't get.
+ */
+const FONT_URL = /^\[Unlayer\] \w+ `fonts` URL /;
+
 /** Elements' warning for a `<link>` among the email's rows. */
 const LINK_AMONG_ROWS = "[Unlayer] renderToJson: <link> is not a valid Body child. Only <Row> is allowed.";
 
diff --git a/packages/from-react-email/test/__snapshots__/receipt.runtime.design.json.snap b/packages/from-react-email/test/__snapshots__/receipt.runtime.design.json.snap
index 3617a1d3..e0d63710 100644
--- a/packages/from-react-email/test/__snapshots__/receipt.runtime.design.json.snap
+++ b/packages/from-react-email/test/__snapshots__/receipt.runtime.design.json.snap
@@ -2464,7 +2464,8 @@
       "_meta": {
         "htmlID": "u_body",
         "htmlClassNames": "u_body"
-      }
+      },
+      "displayMode": "email"
     }
   },
   "schemaVersion": 27
diff --git a/packages/from-react-email/test/__snapshots__/weekly-digest.runtime.design.json.snap b/packages/from-react-email/test/__snapshots__/weekly-digest.runtime.design.json.snap
index f0b4c41d..7b269659 100644
--- a/packages/from-react-email/test/__snapshots__/weekly-digest.runtime.design.json.snap
+++ b/packages/from-react-email/test/__snapshots__/weekly-digest.runtime.design.json.snap
@@ -1463,7 +1463,8 @@
       "_meta": {
         "htmlID": "u_body",
         "htmlClassNames": "u_body"
-      }
+      },
+      "displayMode": "email"
     }
   },
   "schemaVersion": 27
diff --git a/packages/from-react-email/test/__snapshots__/welcome.runtime.design.json.snap b/packages/from-react-email/test/__snapshots__/welcome.runtime.design.json.snap
index 4b829376..2becd4d6 100644
--- a/packages/from-react-email/test/__snapshots__/welcome.runtime.design.json.snap
+++ b/packages/from-react-email/test/__snapshots__/welcome.runtime.design.json.snap
@@ -551,7 +551,8 @@
       "_meta": {
         "htmlID": "u_body",
         "htmlClassNames": "u_body"
-      }
+      },
+      "displayMode": "email"
     }
   },
   "schemaVersion": 27
diff --git a/packages/from-react-email/test/convert.test.ts b/packages/from-react-email/test/convert.test.ts
index 358698f6..acc0c6ee 100644
--- a/packages/from-react-email/test/convert.test.ts
+++ b/packages/from-react-email/test/convert.test.ts
@@ -3,7 +3,7 @@ import fs from "node:fs";
 import path from "node:path";
 import React from "react";
 import { renderToHtml, renderToJson } from "@unlayer/react-elements";
-import { Column, Row, Section, Tailwind, Text } from "@react-email/components";
+import { Body, Column, Container, Html, Row, Section, Tailwind, Text } from "@react-email/components";
 import { compareText, convertReactEmail, convertSource, expand, htmlWords, verifyConversion } from "../src/index";
 import { htmlAttributes } from "@unlayer/convert-core";
 import { color } from "../src/styles";
@@ -41,6 +41,38 @@ describe.each(TEMPLATES)("%s", (name) => {
   });
 });
 
+describe("space around a content box (a container's margins)", () => {
+  // The gap above and below a container shows the page's background, outside the rows' content box. It folds into
+  // the Row's `padding`, which is outside its content box (as in the editor): in the columns it would take the
+  // content's paint (the dark header grown 24px). Fidelity compares words, not backgrounds, so the design itself is
+  // checked.
+  const h = React.createElement;
+  const Template = () =>
+    h(Html, null,
+      h(Body, { style: { backgroundColor: "#f5f5f5", margin: 0 } },
+        h(Container, { style: { margin: "24px auto", maxWidth: "600px", backgroundColor: "#ffffff" } },
+          h(Section, { style: { backgroundColor: "#171717", padding: "28px 32px" } }, h(Text, { style: { margin: 0, color: "#ffffff" } }, "Header")),
+          h(Section, { style: { padding: "24px 32px" } }, h(Text, { style: { margin: 0 } }, "Body")),
+          h(Section, { style: { backgroundColor: "#fafafa", padding: "24px 32px" } }, h(Text, { style: { margin: 0 } }, "Footer")))));
+
+  it("stays row-level padding outside the content box, above the first row and below the last", async () => {
+    const conversion = await convertReactEmail(Template);
+    const rows = conversion.design().body.rows;
+    const [first, last] = [rows[0], rows[rows.length - 1]];
+    expect(first.values).toMatchObject({ columnsBackgroundColor: "#171717", padding: "24px 0px 0px 0px" });
+    expect(first.columns[0].values.padding).toBe("28px 32px 28px 32px");
+    expect(last.values).toMatchObject({ columnsBackgroundColor: "#fafafa", padding: "0px 0px 24px 0px" });
+    expect(last.columns[0].values.padding).toBe("24px 32px 24px 32px");
+    const tsx = await conversion.tsx();
+    expect(tsx).toContain('<Row columnsBackgroundColor="#171717" padding="24px 0px 0px 0px">');
+    expect(tsx).toContain('<Row columnsBackgroundColor="#fafafa" padding="0px 0px 24px 0px">');
+    // In the HTML, on the rows' outer containers: the dark and gray boxes don't take the gaps.
+    const html = conversion.html();
+    expect(html).toMatch(/class="u-row-container[^"]*" style="padding: 24px 0px 0px 0px;[^"]*"/);
+    expect(html).toMatch(/class="u-row-container[^"]*" style="padding: 0px 0px 24px 0px;[^"]*"/);
+  });
+});
+
 describe("codemod keeps logic", () => {
   it("converts JSX inside loops and conditions, keeping keys", async () => {
     const result = await convertSource(fs.readFileSync(path.join(fixtures, "receipt.tsx"), "utf8"));
diff --git a/packages/from-react-email/test/inlined-code.test.ts b/packages/from-react-email/test/inlined-code.test.ts
index 058964a3..a330a6c2 100644
--- a/packages/from-react-email/test/inlined-code.test.ts
+++ b/packages/from-react-email/test/inlined-code.test.ts
@@ -1025,7 +1025,7 @@ Note.PreviewProps = { name: "Ana", note: <em>your trial ends soon</em> };
     console.error = () => undefined;
     try {
       const check = await verifyConversion(Original, Leaves);
-      expect(check.designWarnings).toEqual([expect.stringMatching(/^\[Unlayer\] <Broken> threw while rendering/)]);
+      expect(check.designWarnings).toEqual(["[Unlayer] no data (in <Broken> at Row 1 › Column 1 › Broken)"]);
     } finally {
       console.error = error;
     }
diff --git a/packages/migrate/README.md b/packages/migrate/README.md
index 25de83c9..a9295083 100644
--- a/packages/migrate/README.md
+++ b/packages/migrate/README.md
@@ -66,7 +66,7 @@ Renders both with the original's `PreviewProps`, then with each true/false prop
 ## After migrating
 
 ```bash
-npm install @unlayer/react-elements@^0.2.0
+npm install @unlayer/react-elements@^0.3.0
 ```
 
 The migrated templates import `@unlayer/react-elements`: until it's installed, they don't compile. When a run writes them where it isn't installed, it ends with this command, for the project's package manager (by its lockfile: npm, pnpm, yarn or bun).
diff --git a/packages/migrate/package.json b/packages/migrate/package.json
index 45f93822..6d5a7735 100644
--- a/packages/migrate/package.json
+++ b/packages/migrate/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@react-email/components": "^1.0.12",
-    "@unlayer/react-elements": "workspace:^0.2.0",
+    "@unlayer/react-elements": "workspace:^0.3.0",
     "prettier": "^3.3.3",
     "tsx": "^4.20.5",
     "typescript": "^5.6.3"
@@ -65,7 +65,7 @@
   },
   "peerDependencies": {
     "@react-email/components": ">=0.0.30",
-    "@unlayer/react-elements": "^0.2.0",
+    "@unlayer/react-elements": "^0.3.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }
diff --git a/packages/migrate/src/cli.ts b/packages/migrate/src/cli.ts
index 0e09f5a4..095d4f6f 100644
--- a/packages/migrate/src/cli.ts
+++ b/packages/migrate/src/cli.ts
@@ -2430,7 +2430,7 @@ function addCommand(folder: string): string {
  * one line per project (the nearest package.json). An Elements outside the supported range stopped the run before.
  */
 function installElements(written: string[], cwd: string): string[] {
-  const range = ownPackage().peerDependencies?.["@unlayer/react-elements"] ?? "^0.2.0";
+  const range = ownPackage().peerDependencies?.["@unlayer/react-elements"] ?? "^0.3.0";
   const lines = new Set<string>();
   for (const folder of new Set(written.map((file) => dirname(file)))) {
     // In the node_modules folders above it, as the project's own build finds it (require.resolve here would also read
diff --git a/packages/migrate/test/cli.test.ts b/packages/migrate/test/cli.test.ts
index 5f75c2b9..ceac5260 100644
--- a/packages/migrate/test/cli.test.ts
+++ b/packages/migrate/test/cli.test.ts
@@ -213,6 +213,23 @@ export default function Template() {
     expect(result.fonts).toEqual([{ label: "Inter", value: "Inter, Arial", url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" }]);
   });
 
+  it("migrates a template with a web font the design can't hold (a font file): no block the editor wouldn't get", async () => {
+    const source = `import { Html, Head, Font, Body, Text } from "@react-email/components";
+export default function Template() {
+  return (
+    <Html>
+      <Head>
+        <Font fontFamily="Brand Sans" fallbackFontFamily="Arial" webFont={{ url: "https://cdn.example.com/brand.woff2", format: "woff2" }} fontWeight={400} />
+      </Head>
+      <Body style={{ fontFamily: "Arial, sans-serif" }}><Text>Thanks for your order.</Text></Body>
+    </Html>
+  );
+}`;
+    const dir = project({ "emails/receipt.tsx": source });
+    const out = io(dir);
+    expect(await main(["emails", "--out", "migrated", "--design", "--report", "report.json"], out, lib), out.out + out.err).toBe(0);
+  });
+
   it("builds the design from the migrated preview props, whose JSX has styles instead of classes", async () => {
     const source = `import { Html, Body, Tailwind, Text } from "@react-email/components";
 export default function Template({ note }: { note: React.ReactNode }) {
diff --git a/packages/migrate/test/review-regressions.test.ts b/packages/migrate/test/review-regressions.test.ts
index 5e728642..30981f02 100644
--- a/packages/migrate/test/review-regressions.test.ts
+++ b/packages/migrate/test/review-regressions.test.ts
@@ -1944,7 +1944,7 @@ describe("installing Elements, which the migrated templates import", () => {
       const app = outside({ "package.json": "{}", ...(lockfile ? { [lockfile]: "" } : {}) });
       const out = io(dir);
       expect(await main(["emails", "--out", path.join(app, "emails")], out, lib), out.out + out.err).toBe(0);
-      expect(out.out, command).toContain(`\nInstall Elements in ${path.relative(dir, app)}: ${command} "@unlayer/react-elements@^0.2.0"\n`);
+      expect(out.out, command).toContain(`\nInstall Elements in ${path.relative(dir, app)}: ${command} "@unlayer/react-elements@^0.3.0"\n`);
       // A dry run writes nothing: nothing to install yet.
       const dry = io(app);
       fs.mkdirSync(path.join(app, "drafts"));
@@ -1963,8 +1963,8 @@ describe("installing Elements, which the migrated templates import", () => {
     });
     const out = io(dir);
     expect(await main(["emails", "--out", path.join(app, "emails")], out, lib), out.out + out.err).toBe(1);
-    expect(out.err).toContain("needs @unlayer/react-elements ^0.2.0, but this project has 0.1.22");
-    expect(out.err).toContain('yarn add "@unlayer/react-elements@^0.2.0"');
+    expect(out.err).toContain("needs @unlayer/react-elements ^0.3.0, but this project has 0.1.22");
+    expect(out.err).toContain('yarn add "@unlayer/react-elements@^0.3.0"');
     expect(fs.existsSync(path.join(app, "emails"))).toBe(false);
   });
 });
diff --git a/packages/react/ARCHITECTURE.md b/packages/react/ARCHITECTURE.md
new file mode 100644
index 00000000..f5c4df8f
--- /dev/null
+++ b/packages/react/ARCHITECTURE.md
@@ -0,0 +1,343 @@
+# How @unlayer/react-elements renders
+
+This is the map of the renderer for people and coding agents changing it: the pipeline, the engine that renders
+templates (`src/engine`), its hooks dispatcher, what it does when part of a template fails, and the invariants the
+tests hold it to. The [README](./README.md) is the API.
+
+## The pipeline
+
+```
+template (JSX)                       <Welcome name="Ada" />
+  │ unwrap                           template wrappers called, once, until the root        utils/unwrap-root.ts
+  ▼
+root                                 <Email> … </Email>
+  │ walk (collect)                   the content rendered by the engine; Elements' Rows,   src/engine, utils/record.tsx,
+  │                                  Columns and blocks recorded, the rest rendered as     src/model/collect.ts
+  │                                  React renders it: a tree of records, markup, text
+  ▼
+model                                Email > Row > Column > blocks, Elements' only         src/model
+  ├──▶ design                        renderToJson()                                        utils/render-to-json.ts
+  └──▶ exporters                     each row's and block's HTML (@unlayer/exporters)      components/*, utils/create-component.tsx
+         ├──▶ HTML                   the rows in the mode's document, the head's CSS       utils/render-to-html.tsx, utils/extract-head.ts
+         └──▶ plain text             the HTML as text                                      (shared) htmlToPlainText
+```
+
+- **Unwrap.** `renderToHtml(<Welcome />)` reads the root's settings (fonts, `lang`, `dir`, phone styles, config), so
+  the components around the root are called first: function components, `memo`, `forwardRef`, class components, each
+  once, with hooks, inside the context providers around them. Providers, `<UnlayerProvider>`s and `<Tailwind>`s around
+  the root move inside it, around its content; a Fragment, StrictMode or `<Suspense>` around it is passed through (a
+  `<Suspense>` around the root is outside the document, and its fallback, not a root, never renders). An async
+  wrapper, or one that `use()`s or throws a promise (React 18's Suspense: react-i18next's `useTranslation`), is
+  awaited by the async renderers (`take` in `src/async/collect.ts`, along `unwrapSteps`), and called again once it
+  settles; the synchronous ones throw for it. So is a lazy template (`React.lazy`): the component it loads is
+  unwrapped once it has loaded. A template with no root (Rows, a block, markup) gives what it rendered instead
+  (`Unwrapped.rendered`: its wrappers made again with what they returned, not called again), which renders as a root's
+  content does, without the root's markup (`utils/root-content.ts`; a root its walk meets in it, where unwrapping
+  stopped before it, renders as a document inside it, said once per render: `nestedRoot`): walked once, its Rows and
+  blocks rendered with the render's config and numbered as the head numbers them, its head and plain text from the
+  same walk, and in the async renderers waited for as a root's content is. `renderToJson()` says it needs a root,
+  without walking it. What unwrapping finds (the root, the `<UnlayerProvider>`s' config, where the wrappers left the
+  tree for the content) is the render's, in its scope, known by the elements unwrapping made or reached, never kept on
+  the template's own elements: a root kept between renders, returned by a wrapper that calls `useId()` in one, has its
+  own ids in the next.
+- **Walk.** The engine renders the root's content once per render. It asks a collector (`utils/record.tsx`) about each
+  element: a Row, Column or block (of any copy of Elements, by its markers), a `<Tailwind>` scope or a `<Head>`/`<Font>`
+  entry is recorded where it is, and what's inside it (a Row's Columns, rich text's markup, a `<Head>`'s tags) walked
+  inside its record (a head entry's is its own, not the content's: its tags are the HTML they render);
+  everything else (your components, markup, Fragments, Context, Suspense) is rendered as react-dom's static server
+  render would. Each component of the template's own in a list is in a boundary, the part that's left out when it fails
+  and the render leaves failed parts out (see Errors). What the walk gives is the content as a tree (`Item` in
+  `engine/output.ts`): text as React writes it, markup written whole, markup a record is in (`<p>Hello <Name /></p>`:
+  "cut" by it), and the records with their content.
+- **Model.** The content made the template as Elements components only (`src/model/elements.ts`), from that tree as it
+  is: nothing is parsed. The HTML, the head and the design are all made from it, so they can't disagree.
+- **Exporters.** Row, Column and each block call the editor's exporters (`@unlayer/exporters`) for their HTML; Body
+  puts the rows in the mode's document shell (`document-layouts.ts`). Four of their web and document exporters
+  (Divider, Html, Menu, Social) render with `react-dom/server`: Elements writes those as strings instead
+  (`src/exporters`), with the engine's host markup, so nothing in a render calls react-dom. `react-dom` is still a peer
+  dependency because `@unlayer/exporters` imports `react-dom/server` when it loads.
+
+A render (`renderToHtml`, `renderToJson`, …) has a scope (`utils/render-scope.ts`): what it works out once, what it
+does with a part that fails (`onError`), and the parts it left out. Once: the content is collected, each Row, Column
+and block made the Elements component it is (`model/elements.ts`, by its record), and the values the HTML of each
+Row, Column and built-in block mapped from its props are kept for the head (`remember`), which doesn't map them again
+(a custom tool's own head maps its block itself: its code could read its props otherwise). Body calls each Row as it
+is (`renderOwn`: Elements' own components call no hooks), not through a walk. The design's values are made as copies
+(`pxMerged`): no object of the design is the defaults', and its px lengths' bare zeros are `0px` as they're made.
+Each render function makes a scope of its own, whatever is rendering around it (the async renderers run the
+synchronous renders in theirs, through `utils/internals.ts`), and the user's code runs outside the render's scope
+(`guest`): a component, a template wrapper, a custom tool's exporter and head (and `toSafeHtml`, `headConfig`), an
+`onError` function, a Tailwind rewrite (its plugins). So a render that code starts is a render of its own, and Body
+that React renders there, or in an app's own React render (a live preview), makes a scope of its own; Body reached by a
+render function renders in that render's. The scope is the module's only while a render runs synchronously, never
+across an `await`: async code passes it on itself.
+
+## The engine (`src/engine`)
+
+| File | What it is |
+|--|--|
+| `walk.ts` | The walker: elements, components, Context, Fragments, memo, forwardRef, lazy, Suspense, classes; where something suspends, the async walk's `wait` (src/async/collect.ts) or a throw to the nearest `<Suspense>` |
+| `dispatcher.ts` | Elements' hooks dispatcher, put in React's slot around each component call |
+| `host.ts`, `attributes.ts` | Host markup (`<div>`, `<img>`, …) as react-dom writes it for the installed React: void, custom and preformatted elements; form controls (a `<select>`'s value marking its options, the format context the walker carries for it); a `<style>`'s, `<script>`'s and `<title>`'s text (React 18 escapes it, React 19 writes it as given); each attribute and style by React 18's property table or React 19's switch, but a `javascript:` URL (`href`, `src`, `action`, `formAction`, `xlinkHref`, an `<object>`'s `data`), which React 18 writes as given, is written as React 19 writes it, a URL that throws, with any React; escaping. In a `<Head>`, a `<style>`'s and `<script>`'s text is written as given in every React, whatever writes it (a string, a component, a list, markup: the whole of what's between its tags is its text), but for its own end tag and that of each element it's in whose content runs to its end tag (a `<noscript>`, a `<title>`), escaped as CSS or JavaScript reads them; under an `<svg>` or `<math>`, where a parser may read it as markup, it's escaped as any text (`head.test.tsx` fuzzes it against a browser's parser). The walker and the string exporters write with it |
+| `output.ts` | The walk's output (text, markup, records, holes, boundaries, errors), flattened in tree order into the content's tree |
+| `tree-id.ts` | Where a component is in the tree (Fizz's tree context), and `useId()` from it |
+| `react-compat.ts` | What the walker relies on, per React version, and where React's dispatcher slot is |
+| `self-test.ts` | The once-per-process check of the installed React |
+| `errors.ts` | Positions (`Row 3 › Column 1 › Hero`), names, and how a part left out is said |
+| `records.ts`, `keys.ts` | The collector's records and boundaries; React's development key warnings |
+| `index.ts` | Entry points: `collect`, `walkAsync` (the async entry's walk), `renderStatic` (markup), `renderOwn` (one of Elements' own components, called as the walk would: a Row's, a root's HTML), `callComponent` |
+
+### The hooks dispatcher
+
+React's hook functions (`useState`, `useId`, `use`, …) call whatever dispatcher is in a slot of React's internals:
+`__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current` in React 18,
+`__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.H` in React 19, and
+`__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.H` in React 19's react-server build (Next.js's Server
+Components and route handlers). `callWithHooks` puts Elements' dispatcher there synchronously around one component call
+and puts back what was there in `finally`: never across an `await`. A render Elements runs inside (the app's react-dom
+render, Next.js's Flight render) finds its own dispatcher when the call returns; a render inside a component (an
+`Elements` render in a template's `useMemo`) saves and restores it the same way. Elements' own components (roots,
+Rows, Columns, blocks) call no hooks, and `renderStatic` calls them with the slot holding the dispatcher of the render
+around it, as that render would: react-dom puts its context back after a render started inside one of its renders
+(an exporter's) only when its own dispatcher is there.
+
+What the hooks do is what React's server renderer does: context from the walker's provider stack (a context no
+provider in the walk, or around the component that started it, gives reads its fallback, worked out once per
+top-level render: its default, or inside an app's render what's there; see invariant 4), `useId` from the
+tree position, initial state (a state set while rendering renders the component again, its last render counts, as in
+React), `useSyncExternalStore`'s server snapshot, effects and `useInsertionEffect`/`useLayoutEffect` never run,
+`useOptimistic`/`useActionState` their initial state, react-dom's `useFormStatus` not pending, `useEffectEvent`'s
+function failing if it's called while rendering, and `use()` of a pending promise suspending. A hook the dispatcher
+doesn't have (a newer React's) reaches a Proxy behind it, which throws
+`<Hero> calls useNewHook, which Elements' renderer doesn't support (React x.y.z)` instead of React's
+`dispatcher.useNewHook is not a function`. React's react-server build has no `useState`, `useContext`, `useEffect`, …:
+a template calling one fails with a RenderError saying so and what to do. Elements' own modules import nothing by
+name that build lacks (webpack, Next.js 15's default bundler, fails the build of a module that does: `createContext`
+and `useContext` are read off React), and its one context, `<UnlayerProvider>`'s, is made when it's first read.
+
+### React versions
+
+`react-compat.ts` has a row per React minor Elements is tested with (18.0 to 18.3, 19.0, 19.1, 19.2, 19.3): the dispatcher
+slot's path per build, `useId`'s format (`:R1:`, `«R1»`, `_R_1_`), the context shape (React 18's `Ctx.Provider`
+object, React 19's `<Ctx>`), and whether it has `use()`. The walker throws its own errors for what React's server
+renderer rejects (an object as a child, an invalid element type, a portal) and reads no React error message.
+
+Before the first render, `self-test.ts` checks the installed React: the slot is where the table says, the dispatcher
+installs there and the previous one is put back, a `useId()` has the table's format, a context reads through the
+walker's stack, `use()` reads a fulfilled thenable. A version the table doesn't have takes the row of the nearest one
+before it (one older than all, the first): if it passes, it renders (with one warning in development, saying it's
+newer or older than the table's); if it fails, every render throws
+`[Unlayer] unsupported React x.y.z: <what failed>`. **`UNLAYER_SKIP_REACT_CHECK=1`** in the environment skips the
+check, to render anyway.
+
+CI runs the react package's suite on React 18.0, 18.2, 18.3, 19.1, 19.2 and the latest 19, in React's development and production
+builds, and weekly against React's canary with a longer fuzz run (`.github/workflows/react-versions.yml`, which `test.yml`
+runs on every push and pull request and `publish.yml` before it publishes, so a release ships only a commit every one
+passed; `react-canary.yml`).
+To support a new version: add its row, run the suite on it (`pnpm --filter @unlayer/react-elements add -D react@x
+react-dom@x`), and add a hook it adds to `dispatcher.ts` and to the list in `dispatcher.test.tsx`.
+
+### The async walk
+
+The synchronous and the async renderers share one synchronous walk; the async entry (`src/async/collect.ts`) gives
+it how to wait (its `wait`: the holes, and flattening them once they've settled), so the main entry has none of it. Where a component suspends (an async component,
+`use()` of a pending promise, a thrown promise, a lazy component, a promise as a child), the synchronous walk throws to
+the nearest `<Suspense>`, which renders its fallback as react-dom's synchronous render does, whatever `onError` says
+(with none, it's a failed part: see Errors). The async walk leaves a hole in its output and walks on, so the promises of the siblings after it
+start at once; when the promise settles, the hole is filled by walking that component again (a `use()` component is
+called again with the results it had; one that threw a promise is called, or a class rendered, again; an async
+component's resolved value is walked) at the tree position, with the context and in the place it had. A component that
+throws a promise again once it has rejected fails with what it rejected with, as `use()` of it does. The output is
+flattened in tree order, whatever settled first: the HTML, the records' order (head tags, Tailwind configs) and the ids
+are byte-identical from run to run.
+
+### Ids
+
+`useId()` is Fizz's (react-dom's server renderer's) algorithm on the walker's tree position, in the installed React's
+format, with no prefix of Elements': `:R1:` (18, 19.0), `«R1»` (19.1), `_R_1_` (19.2 and later). `idPrefix` (render
+options, a root's `config`, an `<UnlayerProvider>`'s) is React's `identifierPrefix` (`«em-R1»`): the render scope holds
+it for the content's walk, and the template wrappers take the render options' or the Providers' around them, as
+they're called before the root's config is read. The template
+wrappers are the tree's top, and the content continues from where they left it, so their ids and the content's are
+one document's. A walk a component starts (a nested Email among the rows, an Elements render inside a component) starts
+at that component's place in the tree, inside the providers around it (see invariant 4); one a template wrapper starts,
+at the top.
+
+## Errors
+
+A part of a template fails when a component throws (or is async, or suspends with no `<Suspense>` around it, in a
+synchronous render), when a Row's Columns don't fit its `layout`, or when an exporter or a head function (a custom
+tool's `head`, `utils/extract-head.ts`) fails. By default every renderer
+throws, the synchronous and the async ones alike, `renderToJson` and `renderToPlainText` too (`renderToJson` for an
+exporter's failure only where it leaves parts out: see below): a **`RenderError`**
+whose `component` is the one that failed, `position` where it is in the template (`Row 3 › Column 1 › Hero`: Rows and
+Columns numbered among their parent's, other components by name, numbered from the second of a name), and `cause` the
+original error. The message reads `[Unlayer] <what it threw> (in <Hero> at Row 3 › Column 1 › Hero)`. A part that
+fails in an async render is the first in tree order whatever fails first; the render doesn't wait for what comes after
+it in the tree.
+
+`onError` (render options, a root's `config`, an `<UnlayerProvider>`; `renderToJson(element, { onError })`) changes
+that:
+
+- `"omit"`: the part is left out of the HTML, the plain text and the design alike, and said once with `console.error`
+  (`[Unlayer] Left out: …`, with the cause).
+- a function: the part is left out and the RenderError given to it, instead of the console; it can throw it to fail
+  the render.
+
+Either way, `renderToHtmlParts()` (and the async one) lists the parts it left out in `omitted`, in the order found.
+A string-returning renderer (`renderToHtml`, `renderToPlainText`) and `renderToJson` report them through the console
+or the function.
+
+What's left out: a component of the template's own in a list (the root's children, a Row's, a Column's, a text
+block's, a `<Head>`'s), with what it rendered; markup React rejects (`<hr style="…">` given a string), where it is; a Row whose
+Columns don't fit its layout; a block whose exporter fails (its id goes to the next block, in the HTML and the design);
+a Row or Column whose own HTML fails (its exporter, or mapping its props: `utils/container-render.ts`), a Column with
+its cell (the Row is made again without it, its Columns after it moving up; with no Column left, the Row is left out
+with it); what a head function that fails gives the document's head (a RenderError naming its block, `<tool>'s head
+failed: …`): the block itself renders, as in the design, which runs no head function and has no head to disagree with.
+The render is then the template's without that part. A template that isn't one always fails the render,
+`onError` or not: an undefined component (a broken or circular import), an object or a date as a child, a portal, a Client
+Component in server code.
+
+**The design and the exporters.** No exporter makes the design, so `renderToJson()` doesn't render the HTML: by
+default, a template whose only failure is an exporter's gives its design, block included, while `renderToHtml()` and
+`renderToPlainText()` throw. Nothing is sent that the design disagrees with, as the HTML isn't made. With `onError`
+leaving parts out, `renderToJson()` renders the body's HTML first, which is what finds a failing exporter, so the same
+row or block is left out of the HTML, the plain text and the design (the slower path, only where it's asked for).
+
+### Not supported
+
+- **Error boundaries.** A class component's `componentDidCatch`/`getDerivedStateFromError` don't catch: React's server
+  renderer doesn't run them either. Nor does a `<Suspense>` catch what fails in it, where React's server renderer
+  writes its fallback for the browser to render it again: the part fails, as every failed part does (nothing is left
+  out without a word). What replaces them is the RenderError's `position` and `cause`, and `onError` to leave a failed
+  part out.
+- **Portals.** As in React's server renderer, they fail the render.
+- **React 19's hoisting**: a `<title>`, `<meta>`, `<link>`, `<style precedence href>` or async `<script>` in the body
+  stays where it is, written as React 19 writes one it doesn't hoist (`precedence`, not `data-precedence`), images get
+  no preload `<link>`s, and an `<html>` at the top of a template with no root gets no `<head>` it doesn't have (put head
+  tags in `<Head>`: Elements writes the document). A form's or a button's action that's a function isn't written
+  (React 19 writes a script that runs it). `src/engine/differential.test.tsx` lists each of these, and checks the walker
+  writes everything else as react-dom does.
+- **Effects** never run, as on any server.
+
+## Invariants
+
+1. **No react-dom in a render.** The engine renders templates and Elements' markup, and the string exporters the four
+   blocks whose exporters would call `react-dom/server` (`src/exporters/no-react-dom.test.tsx` renders whole pages and
+   documents with it made to throw). The one render of react-dom's is of nothing, before a context's default is read,
+   so that react-dom puts back what a render of its own left there (invariant 4).
+2. **React's dispatcher is Elements' only during a component call**, set and restored synchronously, never held across
+   an `await`; a render Elements runs in, or that runs in it, keeps its own.
+3. **One model per render.** The HTML, the head, the plain text and the design are made from the same collected
+   content, in one scope: they can't disagree, and a failed part is in none of them.
+4. **A render's output depends only on its arguments**, and on where a component starts it. All per-render state lives
+   in that render's scope: the module holds no facts keyed by the user's elements or by what a render gives (its
+   errors), every render function makes a scope of its own, and the ambient scope is cleared before any of the user's
+   code runs (`guest`), so a render's output and errors depend only on that call's arguments, whatever rendered before
+   it or renders at once (the regression templates rendered again from kept elements in a shuffled order give their
+   reviewed bytes, and random templates sharing kept elements give the same output after any other, and at once). The
+   exception, by design, is the walker's, not the scope's: a walk started while the walker is calling a component (an
+   Elements render in its body or its `useMemo`, a nested Email's content, a render anything that call runs starts)
+   starts at that component's place in the tree and inside the context providers around it (`calling` in
+   `engine/walk.ts`), so its `useId()`s continue the document's and a context it has no provider of its own for reads
+   the value it has there, as React's renders inside a render do. A render started outside any component's call (by a
+   template wrapper, an exporter, a head, `onError`, a Tailwind plugin) starts at the top, as alone
+   (`src/utils/nested-renders.test.tsx` holds both). The providers of a render of React's own around it (an app's
+   react-dom render) aren't the walk's: a context neither gives reads its default, standalone and inside an app's
+   streaming, client or Server Component render. React keeps a context's default only in the two values its renders
+   set while they render (`_currentValue`, react-dom's streaming and client renders'; `_currentValue2`, renderToString's
+   and renderToStaticMarkup's, and other secondary renderers'), and they don't always put them back: a stream leaves
+   the first holding what its last part that waited was given (another request's tenant, theme or locale), and
+   renderToString one that failed or suspended inside a provider the second, till react-dom's static renderer's next
+   render starts and puts it back. So `defaultOf` in `engine/dispatcher.ts` reads the second, and while no render of
+   React's is running, has that renderer render nothing first (`renderToStaticMarkup(null)`, `fizz-cleanup`), so that
+   it holds the default. Nothing is kept from one render to the next: a 0.3.0 build learned a default where the two
+   agreed, so a stream and a failed renderToString that left both holding a tenant's made it the default for good,
+   and where the app's react-dom isn't the one Elements loads, the cleanup does nothing, and a default kept wrong
+   would stay wrong. A render of React's is running where React's dispatcher slot holds a dispatcher that is neither
+   Elements' own nor idle: React 18 and 19 leave their ContextOnlyDispatcher (its hooks one function) in the slot after
+   a client render and during its effects, which is no render running (`isIdleDispatcher`, which compares the hooks'
+   identities; a shape it doesn't know is a render running, where nothing is put back). Inside one, Elements reads
+   what's there, as the static renderer can't be asked to put anything back (inside the app's renderToString, it would
+   put back the app's own providers): inside an app's renderToString, its providers' values (as 0.2, which rendered
+   with react-dom there, passed them through); inside its stream or client render, the default, unless a
+   renderToString that failed or suspended inside a provider left another before it. During a yielded concurrent
+   transition the slot is idle, but `_currentValue` can hold the values of providers mid-tree, which the second
+   doesn't. A walk reads a context's fallback once, at its first read (`fallbacks`, the top-level render's, shared with
+   the template's wrappers and with any render a component of it starts: `renderFallbacks` in `engine/index.ts`), so
+   a render that starts inside an app's render and goes on after it (an async one) reads one value throughout, and
+   the static renderer renders at most once per context and render. It's loaded by the package's own export,
+   `@unlayer/react-elements/fizz-cleanup`, whose conditions in package.json's "exports" pick the module: in Node,
+   `engine/fizz-cleanup.node.ts`, which imports react-dom/server (Node loads it with Elements anyway: the exporters
+   import it), so a bundler bundles the app's copy and Vite can run it inlined, as an ES module (Deno gets its CommonJS
+   build: Deno's `import` of react-dom/server is the browser build); where a bundler or runtime names React Server
+   Components, a browser, a Worker or an edge runtime (`react-server`, `browser`, `worker`, `workerd`, `edge-light`), a
+   module that does nothing (`engine/fizz-cleanup.noop.ts`), each in both formats, as the CommonJS build requires them
+   (Node's is the default, so a bundler that names none of them, Rollup's node-resolve at its defaults, bundling a
+   server, gets it): bundled for an edge runtime or a browser, react-dom/server is its browser build (React 19's opens
+   a MessageChannel when it loads, which keeps Node running), and under react-server it throws when it loads. A
+   resolver that doesn't read "exports" (webpack 4, Jest before 28) finds the package's `fizz-cleanup/` folder, whose
+   package.json names the one that does nothing. (Not a `#` import in package.json's "imports", which those and Jest
+   before 29.4 can't resolve at all.) What it can't know, it reads as React has it: where nothing is put
+   back (an edge runtime, a Worker, a browser, React Server Components, a build with webpack 4 or Jest before 28, an
+   app whose react-dom isn't the one Elements' `require` finds: in Deno, an `import` of react-dom/server is its
+   browser build and a `require` its Node one) and inside an app's stream or client render, the value a renderToString
+   that failed or suspended inside a provider of it left, till react-dom's next static render: the one known leak,
+   rare; a template that wraps its content in its own provider reads that, wherever it renders
+   (`src/regression/render-isolation.test.tsx` pins each).
+5. **Tree order.** Output, records, ids and the error a render throws don't depend on when promises settle.
+6. **Components run once per render**, but as React runs them again: a component that sets its state while rendering,
+   and one `use()` suspends, which is called again once the promise settles.
+7. **Nothing is left out silently.** A part that fails throws, or is left out where `onError` says, and said.
+8. **No randomness, no date**, so Next.js's Cache Components can prerender pages that render emails.
+9. **Across copies of Elements** (a package's ESM and CommonJS builds, a package still on another version) only type
+   markers are shared, by `Symbol.for`: a Row's, Column's and block's (`@unlayer/react-elements/records`, and their
+   `__unlayerRender`/`__unlayerItemConfig` statics), a root's (`…/root`, its name), a `<Head>`/`<Font>` entry's
+   (`…/head-entry`), a `<Tailwind>`'s rewrite (`…/tailwind`), an `<UnlayerProvider>`'s (`…/provider`), so one copy's
+   walk records another copy's Rows. What an async render compiled for its `<Tailwind config>`s is in its scope, and
+   given to each `<Tailwind>`'s rewrite as an argument, where it's found by the `<Tailwind>` it's for (a render the
+   user's code starts, with a scope of its own, has none); a `<Tailwind>` carries its copy's compiler
+   (`…/tailwind-loader`, on its type), which the async renderers compile its config with, so two copies' classes don't
+   mix (an older copy's `<Tailwind>`, which carries none, gets the compiler of the Tailwind entry loaded last). The
+   work a render's Markdown and code blocks share (their budgets: `src/code/work.ts`) is the one piece of render state
+   that is: the running render's, in one slot on globalThis (`…/render-work`, with the version of its shape), set for
+   the length of each render's synchronous run and each call of the user's code, so a copy's Markdown and code entries
+   read the render another copy runs (a copy that finds another version's slot keeps its own, and its blocks have
+   their own work in another version's render). No other render state is shared: the render functions render a root of another copy (Body, Email, Page, Document, by its
+   marker, or an older copy's by its name and its code: `utils/root-type.ts`; a component of yours named like one is
+   called as written) as their own copy's (`utils/own-root.ts`), so the copy whose renderer was called renders the
+   whole template in its render's scope, whichever copy its components are of; a `<Tailwind>`'s rewrites find the
+   Columns of that render's Rows by their marker (`src/tailwind/column.ts`), and get the render's direction (its
+   root's resolved `textDirection`, which the render scope holds, as its `onError`) as an argument, never reading a
+   scope themselves (from an older copy, none: left to right). Before a render rewrites any component, it gives a
+   `<Tailwind>`'s rewrite the props of the Rows, Columns and blocks in its scopes with that `tw` (or `config`), where
+   the rewrite has a `prepare` (one object, so a later release can add to it; an older copy's has none), so their
+   classes are compiled at once (`utils/tailwind.ts`); what reading a component's own classes throws (a Tailwind
+   plugin's error for one of them, which never reaches Tailwind's compiler, kept for every render: `src/tailwind/guard.ts`)
+   is that component's, which `onError: "omit"` leaves out (`model/elements.ts`'s `styled`), and a class that can't be
+   read while Tailwind compiles again fails the render, which the async renderers wait for; and
+   it gives the rewrites a key of its own (each call outside a render, its own), by which a handle reads a render's
+   classes together: its first 2,000 different ones, so classes from data can't take more memory than that
+   (`src/tailwind/declarations.ts`'s `capped`).
+
+## Where it's tested
+
+| What | Tests |
+|--|--|
+| The walker writes what react-dom writes, ids included, on hand-written and random trees; each attribute on each kind of element; every element React writes its own way (form controls, a style's, script's and title's text, resources React 19 hoists, where it doesn't); random markup where templates have it (a template with no root, a Page's, a component's in a Column, the async renderers'); and what it means to write otherwise, listed | `src/engine/differential.test.tsx` (`WALKER_FUZZ_SEEDS=5000` and `TEMPLATE_SEEDS=1000` for more) |
+| The string exporters write what `@unlayer/exporters` writes with react-dom (12k cases; React 19's attributes); pages and documents render with react-dom/server made to throw | `src/exporters/parity.test.tsx`, `react-19.test.ts`, `no-react-dom.test.tsx` |
+| Every hook of the installed React; an unknown one's error; the slot put back | `src/engine/dispatcher.test.tsx` |
+| The version table and the self-check | `src/engine/react-compat.test.ts` |
+| Siblings at once, tree order, determinism over random delays, renders at once, error order | `src/engine/async.test.tsx` |
+| The error policy, every renderer, every place `onError` goes; `renderToJson` calling no exporter by default | `src/utils/render-errors.test.tsx` |
+| The head reusing the values the HTML mapped (no block mapped again) | `src/utils/extract-head.test.tsx` |
+| `idPrefix`: the walker's against react-dom's `identifierPrefix`, and every renderer's | `src/engine/differential.test.tsx`, `src/utils/render-to-html.test.tsx` |
+| React's react-server build (React 19): a render, and each ESM entry loading (none imports by name what it lacks) | `src/regression/react-server-build.test.ts` |
+| Renders inside an app's render, and inside each other | `src/utils/nested-renders.test.tsx`, `src/regression/edge-cases.test.tsx` |
+| A render's output whatever rendered before or around it: elements kept between renders, random templates sharing them (and async renders at once), the regression templates rendered again in a shuffled order, a render started from each place the user's code runs, a context the template doesn't provide after react-dom's renders left another request's value in it, and inside one that provides it | `src/regression/render-isolation.test.tsx` (`ISOLATION_RUNS=2000` for more), `src/regression/patterns.test.tsx`, `src/utils/nested-renders.test.tsx` |
+| What suspends wherever it is (the template, a wrapper around it, a component, a class, a block's children, a template with no root): the async renderers wait, the synchronous ones say so | `src/async/async.test.tsx` |
+| A template with no root: each component run once, its ids the head's, its failed parts as a root's | `src/utils/user-components.test.tsx` |
+| Two copies of Elements: the module and CommonJS builds loaded together, either's components rendered by the other's renderers; another copy's Rows | `src/regression/node-exit.test.ts`, `src/regression/react-copies.test.tsx` |
+| The output against the previous release | `src/regression/*` (`GENERATED_SEEDS=5000` for more random templates) |
+| Next.js route handlers, Server Components, Client Components, edge and Pages Router API routes, every entry, Turbopack and webpack; Cache Components | `tests/next*-integration` |
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 16ec1931..b5079875 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,264 @@
 # @unlayer/react-elements
 
+## 0.3.0 (2026-10-22)
+
+### New
+
+- **Elements renders templates itself, without react-dom.** A renderer of its own (the walker) renders your components as React's server renderer does, hooks, context, `useId`, Suspense and all, with its own hooks dispatcher, and Elements' markup, and writes the HTML of the four blocks whose web and document exporters render with react-dom (Divider, Html, Menu, Social) as strings; react-dom stays a peer dependency only because the editor's exporters import it. It renders the same HTML, plain text and designs (196 templates and 3,000 random ones compared on React 18.3, 19.1 and 19.3), and writes markup as react-dom writes it for the installed React (a `<select>`'s value marking its options, React 19 writing a `<style>`'s CSS as given), but for what React 19 moves to the start of the markup (a `<title>`, `<meta>`, `<link>`, `<style precedence>` or async `<script>` stays where it is, and images get no preload links: put head tags in `<Head>`), inside any React render (an app's react-dom render, a Server Component, a component of the template), with React's react-server build, and on edge runtimes (emails, pages and documents). A context your template doesn't provide reads its default, standalone and inside an app's streaming, client or Server Component render, not what another request's render left in React's contexts (react-dom's streaming render leaves its values there once it's done, and its `renderToString` those of a render that failed or suspended inside a provider, which Elements has react-dom put back, rendering nothing, before it reads a default in Node), and a render reads one value for it throughout, wherever it goes on; inside an app's `renderToString`, the app's provider value, as in 0.2. The one known leak case remains, rare: where react-dom/server isn't loaded for that (edge runtimes, Workers, browsers, React Server Components, builds with webpack 4 or Jest before 28) or the app's is another copy (Deno's `import` of it), and inside an app's streaming or client render, a `renderToString` that failed or suspended inside a provider leaves its value to the templates rendered after it, till react-dom's next `renderToString`: put the provider inside the element you render, or pass the value as a prop, as for a multi-tenant server's tenant ([ARCHITECTURE.md](./ARCHITECTURE.md), invariant 4). With the async renderers, async components render anywhere (also inside a component of yours on React 18), sibling components load their data at once, and the output is the same whatever order the data arrives in. A React version Elements isn't tested with renders if a check of what Elements relies on passes (`UNLAYER_SKIP_REACT_CHECK=1` skips it). It's faster too: `renderToHtml()` takes about half the time 0.2 took (as fast as 0.1.22, which rendered none of your components), `renderToPlainText()` about three quarters, and `renderToJson()` about a third (it renders no HTML). How it works: [ARCHITECTURE.md](./ARCHITECTURE.md).
+
+- **`idPrefix`.** What your components' `useId()`s start with, as React's `identifierPrefix` (`{ idPrefix: "welcome-" }` gives `«welcome-R1»` on React 19.1), in every renderer's options, a root's `config` and an `<UnlayerProvider>`'s: for an email or page placed in a page of yours, whose own ids it can't repeat then.
+
+- **`onError`, and `RenderError`.** A part of a template that fails is a `RenderError` that says which component and where (`(in <Hero> at Row 3 › Column 1 › Hero)`), with the original error as its `cause`. `onError: "omit"`, in the render's options, a root's `config` or an `<UnlayerProvider>`, leaves such parts out of the HTML, the plain text and the design alike (a component, a block, a Row or a Column whose exporter fails; what a custom tool's `head` gives, where it fails, the block still rendering), each said with `console.error`; a function gets them instead. `renderToHtmlParts()` lists them in `omitted`, and `renderToJson()` takes an `onError` option. See [Errors](./README.md#errors).
+
+- **Tailwind CSS: `@unlayer/react-elements/tailwind`.** `<Tailwind>` turns Tailwind classes on Elements components into their props when the template renders, so the email gets inline styles and the design stays editable in the visual editor. Phone variants (`max-sm:`) become phone settings, `hover:` a Button's hover colors, and card grids keep their gutters. Classes no prop takes stay in the HTML only, and Elements says so. Props you set win over classes; one given as `undefined` or `null` (a wrapper of yours passing on an optional prop it wasn't given, or data's `null`, `color={props.color}`) isn't set, so the class's value stays. A class's value that could end the HTML attribute a prop is written in, or start a tag (`"`, `<`, `>`, or a CSS escape of one of them or of `'`: a class from data, `[color:'"><img …>']`), is no prop's, style's or text's, and said, as is one with a `url()` that isn't a web, relative, inline attachment (`cid:`) or image data URL (`bg-[url(javascript:…)]`; an image's base64 data URL, `bg-[url(data:image/png;base64,…)]`, is kept, in a component's `style` too); a font family's double-quoted names are written in single quotes. A declaration whose variables come to more than 4,096 characters is left out, and said, so classes from untrusted HTML (a Markdown's) whose variables use each other over and over can't take more memory than the process has; and a render reads its first 2,000 different classes (an app's own come to a few hundred), the others, as untrusted HTML can hold tens of thousands, left as written and said once, so they can't either. Tailwind isn't given a class of more than 512 characters, 8 variants (a compound one's parts each count), 4 `&` in its variants, or brackets 8 deep, nor a render more than 64 KB of different classes: one tenant's `[&:hover&:hover…]:p-1` (100 KB, in a CMS's markup) failed that render with `Invalid string length` and every later render on the handle that needed a new class, 40 s later too (a 20 KB one made each later build take 0.6 s, a 40 KB one 2.4 s and 1.3 GB), chained compound variants (`group-group-…-hover:`) took Tailwind 3 s for 8 KB, and `max-sm:` 3,000 times overflowed its stack, so the 50 recipients after it in a synchronous batch were told to render again. Such a class is left out, as written, and said once per render; within these, a class takes Tailwind about a millisecond (a fuzz of random classes of every shape finds none that throws or that leaves the compiler unable to read the next one). A class Tailwind's build throws for without keeping it (an escape past U+10FFFF, which left every later render waiting for a fresh compiler) is found among the classes built with it and left out. The classes in a Markdown's headings (in each one's `text`) and in markup in rich text children are compiled with the render's others, at once: 2,000 headings with a class each took 4.7 s, compiled one heading at a time. A handle keeps a fresh compiler ready, compiled with it, which takes over at once past its 2,000 classes, in a synchronous loop of renders too: a batch job that never awaits never let one compile, so it built on one compiler, each render costing more than the last (a new `text-[#hex]` class per render: 2.6 s for the first 1,000 renders, 32.6 s for the sixth; 150 Markdowns of 64 KB of classes, 2.1 s for the last and 2.9 GB). Past 8,000 classes on one compiler with no fresh one ready, a render that needs a class compiled fails, saying to yield between renders or use the async renderers, which wait for one, so memory stays bounded; the async renderers wait for a fresh compiler past 2,000 too. In markup (an Html block, rich text, a Markdown's sanitized HTML), whose `style` is written escaped, a class's value is inlined unless it could end the attribute or start a tag once read (`<`, `>`, a CSS escape of one of them or of a quote: `font-['\22><img …>']`), holds a URL a prop can't (`url(javascript:…)`), or ends a declaration outside its strings; a font family's names and a `url()` in double quotes are in single ones there (a prop's font names are too, but a prop's `url()` in double quotes is left out, and said: write a config's `url()`s in single quotes). A class is read in time linear in its size, whatever it holds: a number in an arbitrary value or variant (`leading-[000…0x]`, `m-[…]`, `[@media(999…9width)]:`), the spaces before an `!important`, and a media query of many parts each with two widths (`[@media(widthwidth)and(widthwidth)…]:`, whose regex took time exponential in their number) were read again from each place they could start: 20 KB of a class took up to 13 s. 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). A plugin's function that throws for a class (one from data), or gives what Tailwind can't compile (an `@apply` of a class it doesn't have), fails the component whose class it is, in every render that uses it (`onError: "omit"` leaves it out), and changes nothing in other renders with the same compiled Tailwind; one that gives nothing (`if (!ok) return;`) gives the class no CSS, a class Tailwind doesn't have; a render that needs a class while Tailwind compiles again after CSS it couldn't read fails, saying to render again (the async renderers wait), rather than render without the class's styles. It needs Tailwind CSS 4, an optional peer dependency (`tailwindcss`) whose range takes any version, so installing Elements never fails over a project's Tailwind CSS 3; compiling with that one says to upgrade it. See [Tailwind CSS](./docs/tailwind.md).
+  - **Tailwind padding classes on a Row inset its content.** `<Row className="bg-white p-8">` puts the padding inside the white box, as in CSS: the classes go to the Row's Columns, added to their own padding (on desktop the top and bottom to each, the left to the first and the right to the last, the other way around in a right-to-left template, where the first Column is on the right; on phones, where the Columns stack unless `noStackMobile`, the sides to each, the top to the first and the bottom to the last). A Column's margin classes (`mr-2`, `mx-4`, `m-2`) are the space between Columns, added the same way. The `padding` prop is unchanged.
+  - **Tailwind card grids keep their gutters.** In `<Row className="bg-white px-10 py-4">` with `<Column className="bg-zinc-50 rounded-lg p-4 mr-2">` cards, the cards now sit inside the white panel, 40px from its sides and 16px apart, as in the browser. Before, the panel's padding stayed around the row (page-colored bands above and below the cards) and the margins were ignored. A card's gutter is a border in the color around it (the Row's content background, else its background, else the body's), as hand-written Elements templates do it, so the design opens in the editor with the same look. On phones, where the cards stack, each keeps the Row's side padding and the space between two cards is the space between them on desktop (an email's phone settings; a web page's keep the desktop gutters, said once, as the editor's web export has no phone border for a column). Rounded corners grow by the gutters, so they look the same; where the two gutters meeting at a corner differ (40px at the side, 16px on top), the editor can't draw that corner round, so the row's cards get square corners, with a warning that says how to keep them round. A card with a border of its own on a side a gutter needs, or a color around it that isn't one solid color (a background image, a translucent color), keeps the old behavior, with a warning that says why.
+  - **Tailwind text classes on a Row, a Column or the root style the text inside.** `<Column className="bg-indigo-600 text-white text-center">` left its Paragraphs black and left-aligned: the classes were an inline style on the Column, which each text block's own color and alignment overrode, and the design didn't have them. As CSS inherits them, a container's text color, alignment, font family, size, weight, line height and letter spacing (and the phone and breakpoint variants of size, line height and alignment) are now the props of the text blocks inside that don't set their own, the nearest container's winning, so the design holds them: Paragraph and Heading take them all, a Menu its items', a Table its header's, content's and footer's, a Button its label's font and its place in the column (not its color, as its label sits on its own background), Social its place. The root's color is the body's `textColor` and its text blocks' too, so `<Email className="text-gray-800">` colors the text. Markup in a Column (an Html block) gets them as an inline style on the Column, for the HTML only, which Elements says.
+  - **A prop given by another of its names wins over a Tailwind class.** `<Paragraph className="text-white" textColor="#333">` took the class's color: a prop's other names (`textColor` and `align` on Paragraph, Heading and Button, a Menu's `color`, a Social's `textAlign`) now count as the prop, as `color` and `textAlign` did.
+  - **A Tailwind border without a color shows.** `border` or `border-t-2` without a color class gave a Column an invisible (transparent) border and a Divider the editor's gray line. It's now drawn in the text color, as Tailwind's `currentColor` is: a Button's in its label's color, a Column's or a Divider's in its own text color class's, else in the text color around it (the body's default black where nothing sets one), in the HTML and the design.
+  - **Tailwind's logical classes follow the text direction.** In `<Email textDirection="rtl">`, `ps-4`, `pe-*`, `ms-*`/`me-*`, `border-s-*`/`border-e-*`, `rounded-s-*`/`rounded-e-*` and the `rounded-ss-*` corners, and `text-start`/`text-end` are the right side (or the left for the end), as CSS's logical properties are, in the HTML and the design; they were always the left. In an Html block's markup, an element's own `dir` (or the nearest one around it) decides, so `dir="rtl"` markup in a left-to-right email changes too. See [Right to left](./docs/tailwind.md#right-to-left).
+  - **An Image's `max-w-*` holds with a width.** `<Image className="w-full max-w-xs">` rendered as wide as its column: the editor's image has one width, and the max width was dropped without a word. It's now the smaller of the two, as the browser shows it (320px here, in the HTML and the design), and a `min-w-*` wins over both, as in CSS; a percentage with pixels (`w-1/2 max-w-xs`), which depends on the column, keeps the width and says so. The root's `w-*`, `max-w-*` and `min-w-*` are its content width the same way: `<Email className="w-[600px] max-w-[800px]">` is 600px wide, where the max width won (800px).
+  - **Classes in an Html block's or a Paragraph's markup are inline styles.** `<p class="text-gray-500 py-2">` in `html` (or in a Heading's or Button's `text`, the markup in a Paragraph's, Heading's or Button's children, a `<Link>` on its own in a Column) gets their styles inline, with the same conversions, and the classes leave the attribute (your own stay). A phone, breakpoint or hover variant can't be inline: it's left out and said. A class that hides or shows the element where such a variant changes it (`hidden md:block`) isn't inlined either, so the element shows on every screen; any other class is inlined as it is on every screen (`px-4 md:pl-2` is `px-4`'s padding). See [Classes in HTML markup](./docs/tailwind.md#classes-in-html-markup).
+  - **`w-auto` on an Image is its auto width.** It was an inline `width: auto` that undid the image's `width: 100%`, so a large image overflowed its column, and a phone's screen. It's now the editor's auto width, as wide as its column allows.
+  - **A logo's `h-12 w-auto` keeps its shape.** A height class with an auto width on an Image (`h-12 w-auto`, `h-8` alone), as logos are sized, was an inline height beside the image's full column width (`width="480"`, `height:48px`), so the logo was squashed; with `src={{ url, width: 400, height: 100 }}` it was 400px wide and 48px tall. Where the image's size is given, the height is now the width its aspect ratio gives (192px for 400×100 at `h-12`), in the HTML and the design, with phone (`max-sm:h-8`) and breakpoint variants; where it isn't, the height is left out, so the image keeps its auto width, and Elements says it needs the image's size. See [Images](./docs/tailwind.md#images).
+
+- **Markdown: `@unlayer/react-elements/markdown`.** `<Markdown>` renders Markdown as Elements blocks (headings as `Heading`, images as `Image`, tables as `Table`), so the design is editable. Raw HTML in it keeps only the tags and attributes that display (an allowlist: text, links, images, lists, tables and sections, without event handlers, URLs that run code or CSS that loads anything, in a style or in a class's arbitrary value (`bg-[url(…)]`), so the design holds none and a `<Tailwind>` inlines none), read as a browser reads it and written again, so what's left out can't join what's around it into a tag; `html="escape"` shows it as text and `html="drop"` leaves it out; a table in a list or a quote is written as a top-level one's cells are, with `html`, `url`, `linkAttributes` and `styles`. Markdown from data takes no more than its size calls for: its tables can have, in all, as many cells as it has characters, or 1,000 where that's more, so a table whose short rows marked would fill out to the header's width (a few kilobytes of them are millions of cells) fails as a component of yours fails, a `RenderError` naming the Markdown (with `onError: "omit"`, that table, or the list or quote it's in, is left out and listed, and the Markdown's other blocks render). Quotes and lists nest 32 deep: a deeper one's `>` or marker is text, where nesting thousands deep overflowed the stack and failed the render; so do emphasis, strikethrough and links. Its inline syntax is read in time linear in its size: marked looks ahead from each opener nothing closes to the paragraph's end, so 100 KB of `*a ` took a minute, and Elements gives each of marked's rules only as much of the text as it can look at and counts what they look at, 32 steps a character and about a million more (Markdown as people write it takes at most 6), past which the rest of the inline syntax is text. Quotes, task lists, list items of many lines (200 KB took 6 s), lines a table can't start (100 KB of `a` over `-` took 14 s, of `|` over `-` 5 s) and raw HTML in a link's text (`[` and 25,000 unclosed `<!--` took 7 s) are read in time linear in their size too: marked read a quote's lines again after each line without a `>` that continues it (100 KB of `>- a` and `b` lines took 6.6 s), and looked for each task item's `[ ]` from the Markdown's end (400 KB of task items took 13 s); past what Markdown as people write it takes, each quote ends at its first line without a `>`, which is read on outside it. What follows a quote holding lists continued by such lines keeps its first characters (marked's read past the quote into it). This work, its tables' cells and the code highlighted are a render's, for all its Markdown together, as one Markdown of their size has (said once in the render past it), so a digest of comments, each a `<Markdown>` of its own, takes no more than one Markdown of their size: 12 comments of 8 KB of Java in fences took 4.8 s, a budget each, and now take 0.5 s; 562 comments of a sparse table, 100 KB, were 197 MB of HTML and are now 35 MB, the rest of the tables too large. See [Markdown](./docs/markdown.md).
+
+- **Code: `@unlayer/react-elements/code`.** `CodeBlock` for syntax-highlighted code that email clients show as it looks in the browser (highlight.js themes, as inline styles), and `CodeInline` for code in a sentence. Code longer than 8,192 characters is shown without colors, with a warning: on some code highlight.js's time grows with its size squared (40 KB of INI took 4.4 s), and a render's code blocks (its `CodeBlock`s and its Markdown's, always, whichever build of Elements they're from, and the `highlightCode()` calls the code of yours it runs makes while it runs it, but not after an `await` in an async component, where each call has its own) are highlighted while their sizes squared add up to 8,192², so 12 `CodeBlock`s of 8 KB of Java take 0.4 s, not 4.9 s. Only code that's highlighted counts (not a block in a language with no grammar). For code from data, use `CodeBlock`. See [Code](./docs/code.md).
+
+- **Web fonts: `@unlayer/react-elements/font`.** `<Font>` declares a web font once for the template: the head loads it (Outlook, which ignores web fonts, gets the fallback), and with `default` it's the template's font, in the HTML and the design. See [Web fonts](./docs/fonts.md).
+
+- **Head tags: `@unlayer/react-elements/head`.** `<Head>` puts `<meta>`, `<link>`, `<style>` and `<title>` tags of your own in the document's head (HTML only: `renderToJson()` says so). A `<style>`'s CSS and a `<script>`'s text are written as given in React 18 and 19 alike, from a component of yours too, and nothing in them can end them early, whatever writes it (a string, a component of yours, a list, text in parts, markup): their own end tag, and that of a `<noscript>` or `<title>` they're in, is escaped as CSS or JavaScript reads it, and under an `<svg>` or `<math>`, where a browser doesn't read them as CSS or JavaScript, their text is escaped as any text. Components of yours in it render as the template's do: with its context, waited for by the async renderers, and failing as theirs fail (with `onError: "omit"`, left out of the head and listed).
+
+- **Async templates: `@unlayer/react-elements/async`.** The same renderers for templates that `await` or suspend, and a `pretty` option for readable HTML, with prettier 3 (an optional peer dependency whose range, too, takes any version: with prettier 2, `pretty` says to upgrade it). See [Async templates](./docs/async.md).
+
+- **`<Link>`.** A link in text (`<Paragraph>Read <Link href="…">the docs</Link>.</Paragraph>`), or on its own in a Column, where it's a Paragraph holding it. Its `style` and `className` stay on the link, in the HTML and the design.
+
+- **`style`, `className` and `skipInText` on every component.** `style` and `className` go on the element a component renders (HTML only: `renderToJson()` says so), and `skipInText` leaves a block out of the plain text. A value with a `"` (a font stack's, `url("…")`) is kept, as 0.2.1 kept a Row's, written as `&quot;` so it can't end the attribute.
+
+- **Plain-text options, and `toPlainText()`.** `renderToPlainText()` takes `wordwrap`, `links` (`"inline"`, `"after"` or `"none"`), `uppercaseHeadings` and `skip` (tag names and classes, as written: `a+` is no pattern); `toPlainText(html, options)` gives the plain text of any HTML. It reads HTML in time linear in its size, whatever the HTML holds (a tag nothing closes, `<img alt="a" ` 40 KB over, took a minute; 80,000 spaces in a `<pre>`, 11 s), writing the same text as before. Without options, the text is written as 0.2 wrote it, but for these (0.2.1's text and this release's compared on every story, each block in each root, and the same HTML):
+  - Preformatted text (`<pre>`, a CodeBlock's or in an Html block) keeps its indentation and blank lines, each line's trailing spaces aside, on lines of its own; 0.2 collapsed its spaces and ran it into the text after it. Markup in it gives its text, and a link its URL (an image or a rule in it, nothing).
+  - An element with `data-skip-in-text="true"` is left out whole. 0.2 left it out only to its first closing tag, so the text after an element nested in it showed, and one without a closing tag (an `<img>`) took the text after it out instead.
+  - Each link is written with its own URL, whole and as written: a heading's too, never in capitals, one with a `'` or two spaces in it, one after a `data-href`, an `<area>` or an attribute with a `>` in it, and one whose `href` has no quotes (see "A link in a heading keeps its URL in the plain text" below).
+  - A link in a Paragraph's or a Heading's children is `text (url)`, as their HTML now holds it (see "Inline JSX in Paragraph, Heading and Button children" next); 0.2 kept only its text.
+  - An email service's tag (`<%first_name%>`, `<%= name %>`) is text, as a browser reads it: a Heading's, a Button's and markup's text keep it (as written in a heading in capitals), where 0.2 left it out. A heading's capitals leave every common service's tags as written (`{{ first_name }}`, `{% if vip %}`, `*|FNAME|*`, `%%Name%%`, `%recipient.name%`), where 0.2 wrote `{{ FIRST_NAME }}`, which the service doesn't fill in.
+  - A template that now renders otherwise has the text of what it renders: one in an `<UnlayerProvider config={{ mode: "email" }}>` is an email now (see "`<UnlayerProvider config>` configures the templates inside it" below), so its Menu items, their separators and its Social icons are on lines of their own, as in any email's text.
+
+- **Inline JSX in Paragraph, Heading and Button children.** Formatting tags (with their `style` and `class`), `<Link>`, and components that return them (react-intl's `<FormattedMessage>`, react-i18next's `<Trans>`) are kept, rendered with the template's context. 0.2 kept only their text. Text in them is still escaped. A URL that runs code is left out however its characters are written (`&#106;avascript:`, `javascript&colon;`, in markup a component of yours writes as HTML), and so is a `<script>`'s or `<style>`'s text in them, which React 19 writes as it is (markup in it made a live link), on React 18 too. Their markup is read in time linear in its size: where a component of yours writes a `<style>` or `<script>` at its markup's end, the tags before it were read to the end again from each one (100 KB took up to 16 s). An email service's `<%first_name%>` tag stays as written, in the HTML, the design and the plain text, in a Heading's and a Button's text and in a Paragraph's children with JSX in them (and its `html`); a Paragraph whose children are only strings, or its `text`, shows it as typed: escaped in the HTML and the design (`&lt;%first_name%&gt;`, which the service doesn't fill in), as 0.2.1 did, and as written in the plain text.
+
+- **A `<Font>`'s URL in the design.** `renderToJson()` writes a `<Font>`'s stylesheet URL on the design's fonts of its family (the body's and each block's `fontFamily`, matched by the stack's first family, as the editor matches fonts), where the editor keeps a web font: the editor loads it and exports its `<link>`. Before, a `<Font>` without `default` loaded the font in the HTML only, and the editor showed its fallback.
+
+- **Designs as Elements code: `@unlayer/react-elements/codegen`.** `designToElements(design, options?)` turns an Unlayer design (the editor's `saveDesign()` JSON) into a `.tsx` module, `{ code, warnings }`, whose component renders back to the same design with `renderToJson()`. Settings become semantic props (only what differs from a component's defaults), rows `<Row layout={ColumnLayouts.X}>` or `cells`, a Paragraph's text `html`, a Heading's or Button's children, web fonts `<Font>`s, an image's fixed width the whole pixel it was written from, a link the URL the editor exports for it (an email link's `mailto:…`, a phone call's `tel:…`); what no prop holds goes in `values`. Blocks without a component become `<Html>` blocks with the design's exported HTML (`html` option), or TODO comments; every warning names its row and column. The code is written as prettier formats it, in time linear in the design's size (a value nested more than 16 deep is written as its JSON, `JSON.parse('…')`); `formatElements(code, options?)` formats it with your prettier settings. Its own entry, pure (no React rendering, no Node APIs): it runs in a browser too, and the main entry doesn't grow. See [the guide](./docs/codegen.md).
+
+- **Props by the names you reach for.** Where CSS or React Email names a prop differently, that name works too, typed: a Menu's `color` is its items' color (its `textColor` and `linkColor`: a linked item is in `linkColor`) and its `textAlign` its `align`, a Social's `textAlign` its `align`, and on Paragraph, Heading and Button `align` is `textAlign` and `textColor` is `color` (a Button's text color), on Image and Divider `align` is `textAlign`. The component's own prop wins when both are given. A prop a block doesn't take is still said once per render, now with the one it's a slip away from: `Menu ignores the prop \`textColour\`: did you mean \`textColor\`?`. (A lowercase `fontsize` is said too: it used to pass as a font prop.)
+
+- **React Email's `as` on Heading.** `<Heading as="h2">` sets the heading level, typed as `headingType` and `level` take it, so React Email headings work as written. `headingType` wins over `level`, and `level` over `as`; like other props, all three win over a `values.headingType`.
+
+- **`values` takes what you set.** Every component's `values` escape hatch takes as many of its values as you set, at any depth (`<Paragraph values={{ anchor: "intro" }}>`), where most components' types wanted all of them. Its keys are checked (a misspelled one is a type error, on Button, Image, Video and the roots too, whose `values` took anything), and its values take any text, number or true/false, as the builder stores them. The type is exported as `ValuesInput`, and `ColumnProps` is exported. `designToElements()` writes `values={{ … }}` as it is: the `builderValues` helper it declared is gone. A design key the types don't have is written `as unknown as <Component>Props["values"]`, for that object only.
+
+- **`displayMode` in the design.** `renderToJson()` writes the body's `displayMode`: the mode its HTML renders in (`email` for an `Email`, `web` for a `Page`, `document` for a `Document`, a `Body`'s `mode`), which the editor keeps. `designToElements()` takes its root from it (it already read it), and `compareDesigns()` leaves it aside, as the editor's own saves may not have it.
+
+### Fixed
+
+- **A link given as `null` is no link.** `<Button href={null}>` and `<Image action={null}>`, as nullable data gives them, failed to render (0.2 too), in every mode: they render with no link now, as with none, and a Menu item's `href` or a Social icon's `url` of `null` is left out of the design, as one left out is. A Menu item or a Social icon that is itself `null` or `undefined` is skipped (0.2.1 failed for one too).
+- **A style prop given as `null` is one not given.** `color={null}` (also `fontSize`, `textAlign`, any style prop), as nullable data gives it, wrote `color: ;` over the component's default and a Tailwind class (0.2 too): it's the default now, or the class, in the HTML and the design. A content prop given as `null` (`text`, `html`, a Table's `headers` and `data`) is no content, as in 0.2.1, not the block's placeholder text.
+
+- **Next.js builds with webpack.** `next build` without Turbopack (Next.js 15's default bundler, `next build --webpack` on 16) failed for an edge route that rendered an email: Elements imported `createContext` and `useContext` by name, which React's react-server build doesn't have, and webpack fails a build for that. Elements reads them off React now, and each of its entries builds and renders in route handlers, Server Components, Client Components, edge routes and Pages Router API routes, with either bundler. With webpack, a Pages Router edge API route also needs `unstable_allowDynamic: ["**/node_modules/@unlayer/exporters/**"]` in its `config`: the editor's exporters have lodash's `Function("return this")()`, which webpack rejects on the edge though it never runs there.
+
+- **A Paragraph's HTML is the editor's export of its design.** `renderToJson()` writes a Paragraph as a text block, which the editor exports with `line-height: 140%` and its text in no `<p>`, while `renderToHtml()` rendered it as the newer paragraph block (`line-height: 1.4` and a `<p>` around the text). A percent line height is inherited as a fixed height, so in the editor a line holding text of another size (a large price in a span, inline code, a subscript or superscript) sat 1 to 20px apart from where Elements put it. The HTML is now the text block's, from the same HTML the design holds, in every mode: what the editor exports for the design. Formatted Lexical JSON given in `values.textJson` (bold, links, several paragraphs) is now kept in the design as its HTML, where it was cut to its plain text. Blocks from another copy of Elements (a package still on an earlier release) render as this release's. A heading in a Paragraph's `html` (`<h2>`) gets the paragraph's line height too (19.6px at 14px), where 0.2's `1.4` gave it 1.4 times its own size: give it a line height of its own (`<h2 style="line-height: 1.2">`), or use a Heading.
+
+- **The document has the editor's base stylesheet.** `renderToHtml()`'s `<style>` now starts with the stylesheet the editor's export has for the mode: in email, the body's margins, table cells aligned to the top, a `<p>`'s margins, `* { line-height: inherit }`, `sub`/`sup` line height and Apple's data-detector links; on a page or in a document, `box-sizing`, a 14px root font size (`rem`), the body's and a `<p>`'s margins and `sub`/`sup` line height. A `<p>` in a Paragraph's `html` or an Html block now has no margins, as in the editor. `renderToHtmlParts()` leaves it out: your page has its own.
+
+- **An image is sized in its slot, less the block's padding.** An image without a `containerPadding` of its own was sized against its column (600px) instead of the slot the block's default 10px padding leaves (580px), up to 20px wider than in the editor, on phones and in Outlook's `width` attribute: a responsive image, a percent width, a pin at 100% and a video's thumbnail. All take the default now, as the design does.
+
+- **A pinned image's percent is the design's.** A px width narrower than its column rendered as a percent rounded up (`11.04%`) while the design stored it rounded to the nearest (`11.03%`): the HTML now has the design's percent, with the px kept as its `max-width` and `width` attribute.
+
+- **A root's `fonts` reach the design.** `<Email fonts={[{ url }]} fontFamily={…}>` loaded the font in the HTML only: the editor showed the fallback. `renderToJson()` now writes each stylesheet's URL on the design's fonts of the families it names (`family=` in a Google Fonts URL, or a `data:text/css` stylesheet's `@font-face`), as a `<Font>`'s, and says once per render a URL the design can't hold (one naming no family a font in it has). `@unlayer/from-react-email` leaves that warning out of a template's check: it lists the fonts for the editor.
+
+- **A Row whose Columns don't fit its `layout` fails the render, the HTML, the plain text and the design alike.** `<Row layout={ColumnLayouts.TwoEqual}>` with one Column made `renderToHtml()` render the document without any rows (the valid ones too) and `renderToPlainText()` return nothing, while `renderToJson()` kept the row with two cells and one column. Now all three throw `A Row with the TwoEqual layout, for 2 Columns, has 1 (in <Row> at Row 2)`; with `onError: "omit"` only that Row is left out, of all three, and the other rows render. `renderRowToJson()` of such a Row throws.
+
+- **A class component around the root is unwrapped.** `<IntlProvider>` (react-intl's, a class) around `<Email>` wasn't called to find the root: its settings were ignored, with a warning, and the template's `<FormattedMessage>`s and `useIntl()` failed, so the email went out without its translated text. A class is now constructed and rendered as a function wrapper is called, inside the providers around it.
+
+- **A `<Suspense>` around the template is unwrapped**, as a Fragment or StrictMode is: `renderToHtml(<Suspense fallback={…}><Welcome /></Suspense>)` renders the root `<Welcome>` returns, with its `lang`, `dir`, fonts and phone styles, and `renderToJson()` gives its design. Around the root, it's outside the document, and its fallback isn't a document, so it never renders: the async renderers wait for what's in it, the synchronous ones say it's async as they do without it, and a template in it that fails fails the render, naming it. Where unwrapping can't reach the root (inside markup, beside other elements, in what a component renders), the render says once that its settings are ignored: it renders as a document inside the content. A `<Suspense>` inside the template whose content suspends still renders its fallback in the synchronous renderers, without a word, as in 0.2: use the async renderers to wait for its content.
+
+- **A component of yours named like a root renders as written.** A design-system wrapper given a root's name (`const Email = (props) => <UEmail backgroundColor="#f4f4f4" {...props} />; Email.displayName = "Email"`) was taken for the root itself, so the design lacked the props it sets. It's now called as any component is, in the HTML and the design alike: Elements knows its own roots by a marker (an older release's by their name and code).
+
+- **A template whose wrapper sets its state while it renders renders its last render**, as React does, and a wrapper that throws fails the render once, naming it, instead of warning that it couldn't be unwrapped and then failing. `renderToJson()` throws that RenderError too (its `component` and `cause`), where it said it couldn't unwrap the template; it says so now only for an async one.
+
+- **A Row's background image is full width unless it says otherwise.** `<Row backgroundImage={{ url }}>` rendered the image inside the content width, while the design (and so the editor) had it full width, the editor's default. The HTML now takes the editor's defaults for what the image doesn't set (full width, centered, not repeated), as the design does, so code generated from a design renders as the design does. `fullWidth: false` keeps it inside the content width.
+
+- **A background image's URL with a quote, a bracket or a space is whole in the HTML.** The editor's exporters write a Row's and the body's background image in `url('…')`, so `https://example.com/it's (big).png` was cut off at its `'` (and a `"` could end the style attribute), while the design kept it whole. Those characters (and `"`, `<`, `>`, `\`) are now percent-encoded where the HTML writes it (`it%27s%20%28big%29.png`, the same address to a browser), in every mode, and so is a character reference that reads as one of them (`&#39;`); the design keeps the URL as given. An email service's tag in the URL (`{{ hero | default: 'hero.png' }}`, `{% if tier > 1 %}`, AMPscript's `%%=v(@hero)=%%`, `<%hero%>`, Braze's and Responsys's `${…}`, in a Liquid tag or on its own) stays as written, as in 0.2.1, for the service to read it, but a `"` in one, which would end the attribute: write a tag's strings in single quotes there. Where a tag's quotes would take a bracket out of the URL's CSS string, or leave it open, the whole URL is encoded.
+
+- **The body's link style colors its links.** A root's `linkStyle` (`<Email linkStyle={{ linkColor: "#e11d48" }}>`) had no effect in the HTML: its CSS was written for an element id the HTML doesn't have (`#u_content_body_1`). It's now written for the body's (`#u_body_1`), so links take the color and underline, as in the editor. A root that sets no `linkStyle` gets no rule for its links (a browser's own link style, the editor's default), so a template's own link CSS (a `<Head>` stylesheet's) styles them, as in 0.2.
+
+- **`<UnlayerProvider config>` configures the templates inside it.** It had no effect: a root (`Email`, `Page`, `Document`, `Body`) read only its own `config` prop, and the render functions replaced even that with their options. Now a root's config is merged key by key, the most specific first: the render function's options, the root's `config` prop (its `textDirection` prop just under it), the nearest `<UnlayerProvider>`'s config (one inside another merges over it), then the defaults. It works with the Provider as what you render or around a template component (`renderToHtml(<UnlayerProvider config={{ textDirection: "rtl" }}><Welcome /></UnlayerProvider>)`), through every renderer (the async ones too), and where React renders the tree itself; its `mode` makes a `<Body>` an email or a document, as the render function's would. `renderToJson()` keeps its `textDirection` in the design (and a root's `config.textDirection`, which it used to leave out), so the editor opens the design as it renders. In React Server Components, which have no context, the render functions still read a Provider around the root; a root React renders there gets only its own `config`.
+
+- **A Paragraph's `text` shows as typed in the editor too.** `<Paragraph text="Use <b>bold</b> here" />`, and a Paragraph's string children, show the tags as typed in the HTML, but `renderToJson()` stored the text as it was, so the editor showed it bold (any markup in it, a user's included, was HTML there). The design now stores the text escaped, as the HTML has it, so the editor shows what the email shows. The `html` prop and inline JSX children are HTML as before; so are Heading's and Button's `text` props. Their children, Menu items, Table cells, Social names, Image alt text and `<Link>` text already showed the same in both.
+
+- **Zero lengths in the design are `0px`.** `renderToJson()` wrote a padding, margin, radius or border width as the template gave it, so `containerPadding="0 0 12px"` became `"0 0 12px"` in the design, which Unlayer's design schema (px lengths) rejects: the API's design validation refused such templates. Each bare zero in a length whose every part is px or a zero is now written `0px` (`"0px 0px 12px"`), on blocks, columns, rows, the body and their phone settings. A length in another unit (`"1em 0"`, `"0 auto"`) and the rendered HTML are as before; a custom tool's values are as it writes them.
+
+- **A Row's padding next to a content background is said.** A Row's `padding` is the editor's, around the row, outside the content box its `columnsBackgroundColor` (or a background image that isn't full width) paints, so it doesn't inset the content. Elements now warns once per render when a Row has both: `Row padding sits outside the row's content background, as in the editor; to inset the content use the Columns' padding.`
+
+- **A template with no root renders as a root's content.** Rows, a block or markup rendered with no Email, Page, Document or Body around them (`renderToHtml(<Rows />)`) rendered apart from their head: every Row was `u_row_1` and a web row, in an email too, and the head was made from the template's `children`, not from what it rendered, its components run again for it. Its content now renders as a root's does, without the root's markup: walked once, each component run once, its Rows and blocks rendered with the render's config and in its mode, numbered as the head numbers them; a part that fails is a `RenderError` naming it and where it is, or is left out with `onError`. The async renderers wait for what's async in it, and compile a `<Tailwind config>` around it, as for a root's content. `renderToJson()` still says it needs a root.
+
+- **A link in a heading keeps its URL in the plain text.** `renderToPlainText()` wrote `# [Pay invoice](https://example.com/pay)` as `PAY INVOICE`, as it did a Heading whose text or children hold a link and an `<h1>` to `<h6>` in an Html block: the link was in the HTML and the design, but not in the text email. A heading's links are now written as a paragraph's, in each `links` mode (`PAY INVOICE (https://example.com/pay)`), and a URL is never put in capitals, nor a link's text that is its URL. A URL with a `'` in it (`https://example.com/it's`, as a Button, a Menu item, an Image's link, a Table cell or markup can write it) was cut off at the `'`, and an `href` after a `data-href` gave that one's URL: each link's own URL is now whole.
+
+- **A Button's `target` is its link's.** `<Button href="…" target="_self">` opened in a new tab: 0.2 typed the prop but left it out. A target that could end its HTML attribute or start a tag (`"`, `'`, `<`, `>`, a backtick: one from data), or that isn't a string (an array, as a JSON body can give one), a Button's or a Menu item's, is a new tab (`_blank`) instead, said for a Button. In an email, a Menu item's text that isn't a string is written as its text, escaped as text is, and so is a Social icon's name, on a page and in a document too (one that wasn't a string failed the render).
+
+- **Types for CommonJS projects.** A TypeScript project that compiles to CommonJS (`module: "node16"` or `"nodenext"`, without `"type": "module"`) got Elements' ES module types for its `require()`s (arethetypeswrong: "Masquerading as ESM"), and the CommonJS ones (`.d.cts`) went unused. Each entry's `import` now resolves to its `.d.ts` types and its `require` to its `.d.cts` ones. The types resolve with `moduleResolution: "bundler"`, `"node16"` or `"nodenext"`. With `"node"` (TypeScript's `node10`), the entries other than the main one (`/tailwind`, `/code`, …) had no types (TS2307): `typesVersions` gives them, but Elements' types import `@unlayer/types` subpaths (`@unlayer/types/containers/…`) that `node10` can't resolve, so a project on it needs `skipLibCheck`. The JavaScript each import or `require()` loads is the same.
+
+- **A Row's anchor, a Video's link, thumbnail and id and a Social icon's own image can't add markup.** The editor's exporters write a Row's `anchor` into an `<a name="…">` in every mode, in an email a Video's `url` and `thumbnail` into a link's `href` and an image's `src` and an icon's `imgUrl` into its `src`, and on a page or in a document a Video's `videoId` into its player's `src` (`https://www.youtube.com/embed/…`, or Vimeo's), as they are (0.2.1 did too), so a value with a `"` from data (`video={{ type: "youtube", videoId: 'abc" onload="…' }}`), or from a design now that `designToElements()` writes its values as code, could end the attribute and add a tag or an event handler. The anchor is escaped (it reads the same), and those URLs' `"`, `<` and `>` percent-encoded, as a link's are; a Video's `javascript:` link (its `url`) is the one react-dom 19 writes, which throws, in the HTML and the design, as a link's is (its `thumbnail`, an image's source, is written as given). A Video's id has what an id doesn't hold (the editor's are letters, digits, `.`, `_`, `%` and `-`, and a Vimeo one's `/`) percent-encoded, in the HTML, the design and the code `designToElements()` writes, so an id the editor writes stays as it is. A `<Font>` with a `javascript:` URL loads nothing.
+
+- **A display condition is written around its row or block.** A Row's or a block's `values={{ displayCondition }}` (the editor's, `{% if customer.vip %}` … `{% endif %}`), as a design converted to code keeps it, was left out of the HTML (0.2 too), so a row meant for some recipients went to all of them: its `before` and `after` are around it now, as the editor's export writes them. A row's or another block's merge tag rule still isn't applied; the converted code says where one is.
+
+- **A root's id and class names given in `values._meta` can't add markup**, as a Row's, a Column's and a block's can't: they're kept to what an id and a class name can hold (0.2 wrote them as given).
+
+### Changed
+
+- **A Heading's level is h1 to h6.** The editor's exporters write the level as the tag's name, so one that isn't (`level`, `as`, `headingType` or `values.headingType` from data: with a space or a quote, or another tag's name, one whose text a browser runs as code) is an h1, and said (0.2 wrote any as given).
+
+- **A Button's text can't become markup in the editor's export of its design.** The editor's exporters unescape a Button's text before they write it, where it has no `textJson` (as Elements' designs don't), so a `<` the text holds (`&lt;` in the design) was a tag in their HTML, though the editor's canvas showed it as text (0.2 too). Its `<` and `>` are numeric references in the design now (`&#60;`), which they leave as they are: the same text in the editor, its export and Elements' HTML.
+
+- **An object or a date in a Paragraph's, Heading's or Button's text fails the render**, as React's render does and as the errors section says (`Ordered on {order.createdAt}`: write `{order.createdAt.toLocaleDateString()}`): 0.2 left it out without a word, so the email went without the date. A Set renders its items, as in React.
+
+- **A `javascript:` URL runs nothing, with React 18 too.** A `javascript:` URL in a link Elements writes (a Menu item's and a Social icon's on a page or in a document, a `<Link>`'s, one in markup a component of yours renders) is written as react-dom 19 writes it, a URL that throws (`javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')`), whichever React is installed, however it's written (control characters or spaces before it, tabs or line breaks in it, any case; a character reference there stays text, as React escapes its `&`). With React 18, 0.2 wrote it as given, as react-dom 18 does. The editor's exporters' own links are written so too, in every mode and with either React, in the HTML and the design: a Button's `href`, an Image's `action`, and Menu items' and Social icons' links, given as props or in `values` (`values.href`, `attrs.href`, a link's custom attributes), which 0.2.1 wrote as given (a `target="_self"` Button ran it on a page); as the exporters write these as given, where a browser decodes character references, a URL is read decoded (`&#106;avascript:`, `javascript&colon;`, `java&Tab;script:`), and any other URL is kept as it is, byte for byte. An image's source is written as given: an `<Image src>` and an email Video's `thumbnail` go into its `<img src>` as they are, so validate image URLs from data. Paragraph's `html`, Heading's and Button's `text`, `<Html>` and a Table's cells (`headers`, `data`) are written as given, as before: they're HTML, as React's `dangerouslySetInnerHTML` is (escape data you put in a table's cells). So are style props (`color`, `backgroundColor`, `padding`, a Menu's `separator`): only `style`, `mobile` settings and Tailwind classes' values are checked, so validate data you give a style prop.
+
+- **Text starts on the right in a right-to-left template.** With `textDirection="rtl"`, a Paragraph and a Heading default to `textAlign="right"`, as in the editor; 0.2 left them on the left unless you set it. Set `textAlign="left"` where you want 0.2's alignment.
+
+- **Links and rules written straight in a Column render.** 0.2 left markup written in a Column out without a word. Now a bare `<a>` is a Paragraph and a bare `<hr>` a Divider; a link holding more than text (an image) or an `<hr>` with a style is an Html block, as written. Other markup is still left out, now with a warning.
+
+- **The error for an async or suspending template names the async renderers.** The synchronous renderers still throw for one, now a `RenderError` naming it (`error.component`), as for an async component inside the template: `[Unlayer] renderToHtml: async and suspending templates need "@unlayer/react-elements/async"'s renderers, or their data loaded first and passed as props (in <Receipt>)`.
+
+- **A part of a template that fails fails the render.** A component that throws (or is async, or suspends, in a synchronous render), markup React rejects (a `style` string), a Row whose Columns don't fit its layout and a block whose exporter fails were left out with a console message (an exporter's as a red box in the email), so an email missing a part could go out; the async renderers already threw for a component that did. Every renderer now throws a `RenderError` naming the part and where it is, `renderToJson()` and `renderToPlainText()` too: the HTML, the text and the design never disagree. (`renderToJson()` doesn't render the HTML, which no design needs, so an exporter that fails fails the HTML and the text but not the design: nothing is sent that it disagrees with.) Set `onError: "omit"` to leave failed parts out as before, now listed. Error boundaries don't catch while Elements renders, as in React's server renderer.
+
+- **A component's `useId()` is React's id, with nothing of Elements' in it.** It gave `:unlayer-collect-R…:` (an async render's with a number of its own in it, which changed from render to render). It's now the id React gives at its place in the tree, in the installed React's format (`:R1:`, `«R1»`, `_R_1_`), the same every render, and unique in the document, the template wrappers' too.
+
+- **Components run once per render.** Elements called a component again to say why it failed, or to read the HTML it rendered in a Column, called template wrappers in throwaway renders of their own, and rendered a template with markup React rejects twice. A component now runs once (again only where React runs one again: when it sets its state while rendering, and after a promise its `use()` waited for, or that it threw, settles).
+
+- **Any component's `dangerouslySetInnerHTML` in a Column is an Html block of what's in it.** A function component (`memo` and `forwardRef` ones too) returning `<div dangerouslySetInnerHTML={…} />` gave an Html block of the HTML in it, without the `<div>`; a class, a lazy component, a context's Consumer or Provider, or a StrictMode kept the `<div>` around it. Now every kind does as a function component does. Any other element a component returns (`<div style={…}>`) is kept whole, with its styles, as before.
+
+- **Elements renders where its React isn't react-dom's.** Where a second install or a bundler gave Elements another copy of React than react-dom's, renders needed workarounds (and failed where they couldn't tell); Elements doesn't render with react-dom now, and records the Rows of another copy of Elements too.
+
+- **React's key warnings, in development.** A list without keys in a template (`items.map(…)`) gets React's warning in development builds, once per component, as React 19 gives it where it renders: Elements renders it now. 0.2 hid it.
+
+- **A Row's `style` and `className` go on its content box.** Like every component's, they go on the element it renders: a Row's `.u-row` box, the content width its Columns sit in (a Column's on its cell). 0.2 put a Row's on a wrapper around the whole row, full width. For a full-width color, use the Row's `backgroundColor`. In an email, padding in a Row's `style` stays on the row around that box, as in 0.2 (the box and its Columns have the content width, which padding would add to; on phones its sides are dropped, as the Row's `padding`'s are: put padding in the Column to inset the content there), and padding or a border in a Column's `style` goes inside its cell (`box-sizing: border-box`), so neither makes the email wider than its layout.
+
+## 0.2.1 (2026-10-13)
+
+- Renders without reading a random number or the date, so Next.js 16 with Cache Components can prerender pages, route handlers and Client Components that render emails. 0.2.0 failed those builds. ([#65](https://github.com/unlayer/elements/pull/65))
+
+## 0.2.0 (2026-10-13)
+
+- One React render collects the template, and the HTML, the head and the design JSON are all made from it. Your own components, hooks, Context, `useId`, Fragments, `memo` and `forwardRef` work in `renderToHtml` and `renderToJson`.
+- `renderToHtml(<Template />)` renders a template component as its root and reads the root's settings (fonts, `lang`, `dir`, phone styles).
+- A component that throws, suspends or is async is left out with a console message naming it, and the rest of the email renders.
+- `<Row noStackMobile>` works, `rgb()` colors render, phone settings match the editor's device CSS, and `renderToJson` keeps phone settings and hide-on-device options.
+- `Email`, `Page` and `Document` accept `fonts`, `textDirection` and `lang`.
+- Security: text placed straight in a Row or Column, Heading and Button children, Menu and Social text, link URLs, `previewText`, phone settings and `textDirection` are escaped.
+- Behavior changes: text children show as typed, link URLs percent-encode `"`, `<` and `>`, and rows from Fragments and components are email tables. ([#61](https://github.com/unlayer/elements/pull/61))
+
+## 0.1.22 (2026-09-22)
+
+- `PageBreak` starts a new page in document output.
+- `Document` accepts `documentSize` and `documentOrientation`.
+- `Table` accepts `repeatHeaderOnEachPage`, `enableFooter` and `repeatFooterOnEachPage`.
+- Updates `@unlayer/exporters` and `@unlayer/types` to 1.497.0. ([#57](https://github.com/unlayer/elements/pull/57))
+
+## 0.1.21 (2026-08-13)
+
+- `renderToPlainText` decodes common named HTML entities (`&pound;`, `&euro;`, `&eacute;`, `&deg;`, `&times;`…) instead of printing them. ([#54](https://github.com/unlayer/elements/pull/54))
+
+## 0.1.20 (2026-07-15)
+
+- Updates `@unlayer/exporters` and `@unlayer/types` to 1.455.0, with a check that the package loads in a browser runtime. ([#47](https://github.com/unlayer/elements/pull/47))
+
+## 0.1.19 (2026-07-04)
+
+- `renderToHtmlParts` also returns the `css`, `js` and `tags` its `head` is built from. ([#38](https://github.com/unlayer/elements/pull/38))
+
+## 0.1.18 (2026-07-04)
+
+- `registerTool` (also exported as `registerElementsTool`) renders an editor custom tool's definition from code, and `renderToJson` writes it as the custom tool the editor opens. ([#37](https://github.com/unlayer/elements/pull/37))
+
+## 0.1.17 (2026-07-04)
+
+- **Breaking:** `renderToHtml` returns a complete HTML document, with the editor's shell for each mode, and takes `title` and `fonts` options. Use `renderToHtmlParts` for the `head` and `body` to embed in your own document.
+- Paragraph margins are reset inline, as in the editor's exports.
+- Web-mode columns stack on phones (480px); document output never stacks.
+- `renderToHtmlParts(<Email>)` returns the email CSS (it returned the web CSS). ([#36](https://github.com/unlayer/elements/pull/36))
+
+## 0.1.16 (2026-06-28)
+
+- A Row with several Columns and no `layout` or `cells` gives each Column an equal share (the columns rendered `width="NaN"`).
+- Number border widths render in px. ([#35](https://github.com/unlayer/elements/pull/35))
+
+## 0.1.15 (2026-06-28)
+
+- An image's fixed width set in `src={{ width }}` stays fixed in the editor, as the flat `width` prop does.
+- Button links given as `{ name, attrs: { href } }` render; Social `iconSize` and `spacing` accept px strings; an image given as a URL keeps its own aspect ratio. ([#34](https://github.com/unlayer/elements/pull/34))
+
+## 0.1.14 (2026-06-28)
+
+- A fixed image width survives opening the design in the editor. ([#33](https://github.com/unlayer/elements/pull/33))
+
+## 0.1.13 (2026-06-28)
+
+- Images are sized against the real content width of their column.
+- `containerPadding` is a typed prop on every block.
+- `renderToHtml` writes unique element ids. ([#32](https://github.com/unlayer/elements/pull/32))
+
+## 0.1.12 (2026-06-28)
+
+- `renderToJson` accepts a template component as its root, as `renderToHtml` does.
+- Menu's text props accept the same inputs as Heading's and Paragraph's. ([#31](https://github.com/unlayer/elements/pull/31))
+
+## 0.1.11 (2026-06-27)
+
+- Prop types accept the natural forms (a shared border object, numeric sizes) and reject wrong values. ([#30](https://github.com/unlayer/elements/pull/30))
+
+## 0.1.10 (2026-06-27)
+
+- Explicit image and button widths survive opening the design in the editor.
+- CSS-style values work: a string `fontFamily`, `fontWeight="700"`, numeric sizes, `width="300px"` on an image, `letterSpacing`.
+- Heading accepts `level` and `h1`–`h6`; `Table` with `columns` and `rows` renders an empty grid instead of crashing; `previewText` reaches the design JSON. ([#28](https://github.com/unlayer/elements/pull/28))
+
+## 0.1.9 (2026-06-21)
+
+- Each block's `containerPadding` applies (blocks rendered with the column's padding).
+- `contentWidth` on the root sets the web column widths (they assumed 500px). ([#26](https://github.com/unlayer/elements/pull/26))
+
+## 0.1.8 (2026-05-24)
+
+- Updates `@unlayer/exporters` and `@unlayer/types` to 1.415.0.
+
+## 0.1.7 (2026-05-08)
+
+- Links render: Button `href`, Image `action`, Menu items and Video `href` rendered an empty `href`. ([#15](https://github.com/unlayer/elements/pull/15))
+
+## 0.1.6 (2026-04-12)
+
+- Updates `@unlayer/exporters` and `@unlayer/types` to 1.400.0. ([#13](https://github.com/unlayer/elements/pull/13))
+
+## 0.1.5 (2026-03-26)
+
+- Updates `@unlayer/exporters` and `@unlayer/types` to 1.394.0. ([#10](https://github.com/unlayer/elements/pull/10))
+
+## 0.1.4 (2026-03-26)
+
+- Published from the same commit as 0.1.3.
+
+## 0.1.3 (2026-03-26)
+
+- README and npm keywords for the open-source release. ([#7](https://github.com/unlayer/elements/pull/7))
+
+## 0.1.2 (2026-03-25)
+
+- No changes to the package: the first release published by CI on merge to `main`. ([#3](https://github.com/unlayer/elements/pull/3))
+
+## 0.1.1 (2026-03-20)
+
+- Published the day 0.1.0 was; no release tag or recorded changes.
+
 ## 0.1.0
 
 - Initial release
diff --git a/packages/react/LICENSE b/packages/react/LICENSE
new file mode 100644
index 00000000..1d8358d3
--- /dev/null
+++ b/packages/react/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Unlayer, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/react/README.md b/packages/react/README.md
index 7f700eaa..0cac3206 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -10,6 +10,8 @@ npm install @unlayer/react-elements
 pnpm add @unlayer/react-elements
 ```
 
+Elements works with React 18 and 19 (its tests run on React 18.0, 18.2, 18.3, 19.1, 19.2 and 19.3, the latest, in React's development and production builds, and its renderer is checked against React's canary every week), in Node.js, edge runtimes, browsers and Next.js's Server Components alike. It renders templates with a renderer of its own, which uses React's hooks as React's server renderer does, so before its first render it checks the installed React: a newer React it isn't tested with renders if that check passes (with one warning in development), and if it fails, every render throws `[Unlayer] unsupported React x.y.z: <what failed>`. To render anyway, set `UNLAYER_SKIP_REACT_CHECK=1` in the environment. `react-dom` stays a peer dependency because the editor's exporters import it, though no render calls it. How it works: [ARCHITECTURE.md](./ARCHITECTURE.md).
+
 ## Quick Start
 
 ```tsx
@@ -71,6 +73,12 @@ Agents can also preview Elements code without installing anything through the [E
 - [One React template to email, web, and PDF](https://github.com/unlayer/elements/blob/main/packages/react/docs/one-template-email-web-pdf.md): shared invoice content with output-specific roots.
 - [React invoice PDF with Playwright](https://github.com/unlayer/elements/blob/main/packages/react/docs/react-to-pdf.md): generate actual PDF bytes from document HTML.
 - [React to Unlayer visual editing](https://github.com/unlayer/elements/blob/main/packages/react/docs/visual-editing.md): `renderToJson()`, editor loading, export, and supported tree constraints.
+- [Tailwind CSS in Elements](https://github.com/unlayer/elements/blob/main/packages/react/docs/tailwind.md): `className` with Tailwind classes on any component, as React Email's `<Tailwind>`, kept as props in the HTML and the design.
+- [Markdown in Elements](https://github.com/unlayer/elements/blob/main/packages/react/docs/markdown.md): `<Markdown>` as Headings, Paragraphs, Images, Tables and code blocks, editable in the design.
+- [Code in emails, pages and documents](https://github.com/unlayer/elements/blob/main/packages/react/docs/code.md): `CodeBlock` and `CodeInline`, syntax-highlighted with inline styles that email clients (Outlook included) show.
+- [Web fonts in Elements](https://github.com/unlayer/elements/blob/main/packages/react/docs/fonts.md): `<Font>` loads a web font in the head and makes it the template's font, with a fallback for Outlook.
+- [Async templates and readable HTML](https://github.com/unlayer/elements/blob/main/packages/react/docs/async.md): `@unlayer/react-elements/async` renders templates with async components and Suspense, and formats HTML with `pretty`.
+- [Unlayer designs as Elements code](https://github.com/unlayer/elements/blob/main/packages/react/docs/codegen.md): `designToElements()` from `@unlayer/react-elements/codegen` turns a template made in the Unlayer editor into a `.tsx` component that renders back to the same design.
 
 See [when to choose Elements](https://github.com/unlayer/elements/blob/main/packages/react/docs/README.md) and the [runnable example](https://github.com/unlayer/elements/tree/main/examples/content-workflows).
 
@@ -78,7 +86,7 @@ See [when to choose Elements](https://github.com/unlayer/elements/blob/main/pack
 
 These props have non-obvious shapes that **must** be followed exactly:
 
-- **fontFamily**: Accepts a plain family-name string (`fontFamily="Georgia"`) or, for a full stack, `{ label, value }` (recommended).
+- **fontFamily**: Accepts a string, a family name or a whole stack (`fontFamily="Georgia"`, `fontFamily="Georgia, serif"`), or `{ label, value }` (recommended for a stack: `label` is the name the visual editor's font menu shows, where a string is both).
   ```tsx
   fontFamily={{ label: "Arial", value: "arial, sans-serif" }}
   ```
@@ -87,15 +95,19 @@ These props have non-obvious shapes that **must** be followed exactly:
 - **lineHeight**: Accepts a CSS string (`"1.4"`, `"140%"`) or a bare number (kept **unitless**: `lineHeight={1.4}` → `"1.4"`).
 - **Wrapper component**: Use `<Email>`, `<Page>`, or `<Document>` as root — they set the rendering mode automatically.
 - **href**: Can be a plain string URL (auto-wrapped) or `{ name: "web", values: { href, target } }`.
-- **Image sizing**: `src` is a plain URL string or `{ url, width?, height?, ... }`, where `width`/`height` are the image's **natural** size. By default an image is **responsive** — it fills its container, capped at its natural size. For a **fixed** display size, use a **percent**: `width="50%"` or `maxWidth="50%"`. A px/number `width` is treated as the natural size, so `width="300px"` shows the image at up to 300px (responsive).
-- **Heading level**: `headingType` (or its alias `level`) accepts `h1`–`h6`.
-- **children**: Text components accept children as shorthand. `<Heading>Hello</Heading>` sets the heading text. `<Paragraph>` supports children for plain text.
-- **Paragraph text**: Use `html` prop for text content (supports inline formatting like `<b>`, `<a>`). Use children for plain text.
-- **Text shows as typed**: Heading and Button children and text placed straight in a Row or Column show markup and entities as written, as React shows text (`{"Terms &amp; Conditions"}` shows `&amp;`; in JSX text, `Terms &amp; Conditions` is already `&`). Put markup in Paragraph's `html` prop or an `<Html>` block, and template syntax with `<` or `>` in it (a Liquid `{% if count > 1 %}`) in the `text` prop. An email service's `<%name%>` tag stays as written, for it to fill in. Menu item text shows markup as typed; in an email, an entity (`&rarr;`) and a single quote stay as written, as in 0.1.22, and a double quote is escaped, also in a template tag (the text is also written in an `aria-label`): write a template's string in single quotes (`{{ name | default: 'you' }}`; in Go templates, backticks).
-- **`text` and `html` props are HTML**: Heading's and Button's `text` prop, like Paragraph's `html` and `<Html>`, is written into the email as given (as in 0.1.22). Put only markup you wrote there: a value a user typed (a name, a message) goes in as children, which show it as text.
+- **Image sizing**: `src` is a plain URL string or `{ url, width?, height?, ... }`, where `width`/`height` are the image's **natural** size. By default an image is **responsive** — it fills its container, capped at its natural size. A `width` prop is its **display** size: a percent of the column (`width="50%"`), or pixels (`width={120}`, `width="120px"`), which it renders at in every mode (narrower on a narrower screen, and the column's width when wider than it). The design keeps a pixel width as the editor does, a percent of the column.
+- **Heading level**: `headingType` (or its aliases `level` and React Email's `as`) accepts `h1`–`h6`.
+- **Row padding** is the editor's: around the row, outside its content box. With a `columnsBackgroundColor`, the padding is outside that background and doesn't inset the content (Elements warns): inset the content with the Columns' `padding`. A Row's Tailwind `p-*` classes do inset it, as in CSS, and its Columns' `m-*` classes space them, cards included. See [Row](#row).
+- **children**: Text components accept children as shorthand. `<Heading>Hello</Heading>` sets the heading text. Paragraph, Heading and Button children keep inline JSX: `<Paragraph>Hello <strong>world</strong>, read <a href="https://example.com">this</a>.<br />Next line</Paragraph>` (see Paragraph below).
+- **Paragraph text**: Use children (text and inline JSX, `<Link>` included), the `text` prop (plain text) or the `html` prop (an HTML string with inline formatting like `<b>`, `<a>`). Text in `text` or in string children shows as typed (`"Use <b>bold</b>"` shows the tags), in the HTML and in the editor: the design stores it escaped.
+- **`style` and `className`** (every component): inlined on, and added to, the element the component renders (see [style, className and skipInText](#style-classname-and-skipintext)). They're HTML only: `renderToJson()` leaves them out and says so (a `<Link>`'s in text are in the text, which the design holds). A prop given wins over the same property in `style`.
+- **Text shows as typed**: Heading and Button children (their strings; JSX elements in them are formatting) and text placed straight in a Row or Column show markup and entities as written, as React shows text (`{"Terms &amp; Conditions"}` shows `&amp;`; in JSX text, `Terms &amp; Conditions` is already `&`). Put markup in Paragraph's `html` prop or an `<Html>` block, and template syntax with `<` or `>` in it (a Liquid `{% if count > 1 %}`) in the `text` prop. An email service's `<%name%>` tag stays as written there, for it to fill in, as in a Paragraph's `html` and in Paragraph children with JSX in them; a Paragraph whose children are only strings (or its `text`) shows it as typed, escaped (`&lt;%name%&gt;`, as 0.2.1 did), so give it in `html` for the service to fill in. Menu item text shows markup as typed; in an email, an entity (`&rarr;`) and a single quote stay as written, as in 0.1.22, and a double quote is escaped, also in a template tag (the text is also written in an `aria-label`): write a template's string in single quotes (`{{ name | default: 'you' }}`; in Go templates, backticks).
+- **`text` and `html` props are HTML**: Heading's and Button's `text` prop, like Paragraph's `html`, `<Html>` and a Table's cells (`headers` and `data`, HTML as the editor's table holds them), is written into the email as given (as in 0.1.22), as React's `dangerouslySetInnerHTML` is: nothing in it is checked, so a link in it with a `javascript:` URL runs it. Put only markup you wrote there: a value a user typed (a name, a message) goes in as children, which show it as text, and a URL from data as a prop (`href`, `action`, a Menu item's or Social icon's), where a `javascript:` URL is written as one that throws. Escape data you put in a table's cells (`&`, `<`, `>`).
 - **Link URLs**: `"`, `<` and `>` are percent-encoded, so a URL can't end its attribute. Fill template tags that contain them (a Liquid filter with quotes) in before rendering; a `<%name%>` tag stays as written.
-- **Your own components** render as React renders them: hooks, Context (also from a Provider around the root) and Fragments work. One that's async, suspends or throws is left out with a console message, and the rest renders. Elements renders the template once, and may call a component once more on its own, to take the HTML it puts in a Column or to say why it failed (the whole template once more when it holds markup React rejects), so keep side effects, like creating a coupon code, out of rendering.
-- **Inside your own render**: `renderToHtml`, `renderToJson` and `renderToPlainText` can run while React renders (a preview page's `useMemo`, a client component, Next.js's server render of one). Inside react-dom/server's own `renderToString`, Elements renders with another of react-dom's modules where a synchronous `require` can load one with your React (CommonJS, Jest, an ES module on Node 20.16+ / 22.3+). Where it can't (a bundle with React in it, some test runners' module registries), it renders with the same module, as 0.1.22 did: call it in the component's body, not in `useMemo` and not before another hook (React keeps a render's hooks in that module), or render first and pass the result as a prop. In Next.js's edge runtime, react-dom can't render at all (React there is React Server Components'): render emails in the Node.js runtime. Waku's Server Components get a `react-dom/server` that can't render either (every release of Elements fails there): render emails in a Client Component.
+- **The design holds values as given, as the editor does**: `renderToHtml()` escapes what it writes, but the editor's exporters write some values of a design into its HTML as they are (preview text, a Menu item's text in an email, a Social icon's name, a link's URL with a `"`), as they do for a design made in the editor. Where those come from data and the design is exported by the editor (or its export API), escape them (`&`, `<`, `>`, `"`) first, or render the email with Elements.
+- **Background image URLs** (a Row's, the root's): quotes, brackets, spaces, `<`, `>` and `\` are percent-encoded, so a URL can't end its CSS or attribute, and an email service's tag in one (`{{ hero | default: 'hero.png' }}`, `{% if tier > 1 %}`, `%%=v(@hero)=%%`, `<%hero%>`, Braze's `{{${first_name} | default: 'you'}}`, `${hero}`) stays as written, but a `"`, which would end the attribute: write a tag's strings in single quotes there.
+- **Your own components** render as React renders them: hooks, Context (also from a Provider around the root; a context the template doesn't provide reads its default, not what another request's render left in React's contexts (in Node, react-dom is asked to put that back first), and inside an app's `renderToString` the app's value, as in 0.2. Where react-dom/server isn't loaded for that (edge runtimes, Workers, browsers, React Server Components) or the app's is another copy (Deno's `import` of it), and inside an app's streaming or client render, a `renderToString` that failed inside a provider of it leaves its value to the templates rendered after it: to be certain, as for a multi-tenant server's tenant, put the provider inside the element you render or pass the value as a prop: see [ARCHITECTURE.md](./ARCHITECTURE.md), invariant 4), Fragments, `useId`, `memo`, `forwardRef` and class components work, and async components and `use()` with the [async renderers](#async-templates-and-pretty). Each component runs once per render (and again where React runs one again: one that sets its state while rendering, and one whose `use()` waited for a promise, or that threw one). One that throws (or is async, in a synchronous render) fails the render with a `RenderError` naming it and where it is, or is left out with `onError: "omit"`: see [Errors](#errors). Keep side effects, like creating a coupon code, out of rendering.
+- **Inside your own render**: `renderToHtml`, `renderToJson` and `renderToPlainText` can run while React renders (a preview page's `useMemo`, a client component, Next.js's server render of one, react-dom/server's `renderToString`), and the component's hooks after the call work: Elements renders templates itself, not with react-dom, and leaves React's hooks as it found them. Edge runtimes render too: Vercel Edge Functions, Cloudflare Workers, Next.js Pages Router API routes with `export const config = { runtime: "edge" }`, and App Router route handlers and Server Components, built with Turbopack or webpack (Next.js 15's default). With webpack, a Pages Router edge API route also needs `unstable_allowDynamic: ["**/node_modules/@unlayer/exporters/**"]` in that `config`: the editor's exporters have lodash's `Function("return this")()`, which webpack rejects on the edge though it never runs there. Where react-dom can't render (React Server Components' React, as in an App Router route on the edge runtime), emails, pages and documents render: nothing in a render calls react-dom (it's still a peer dependency, as the editor's exporters import it). `pretty` doesn't work on edge runtimes (prettier is loaded when it runs): format at build time there. How Elements renders: [ARCHITECTURE.md](./ARCHITECTURE.md).
 
 ## Structure: Email/Page/Document > Row > Column > Items
 
@@ -134,9 +146,9 @@ These props have non-obvious shapes that **must** be followed exactly:
 
 | Component | Description |
 |-----------|-------------|
-| `<Button>` | CTA button with hover states, links, and full styling |
-| `<Paragraph>` | Rich text with `html` (formatted) prop or children (plain text) |
-| `<Heading>` | Heading (h1-h4) with `headingType` prop |
+| `<Button>` | CTA button with links and full styling, and hover colors on web pages and documents |
+| `<Paragraph>` | Rich text: children (text and inline JSX) or the `html` prop |
+| `<Heading>` | Heading (h1–h6) with `headingType` prop |
 | `<Image>` | Responsive image with `src` / `altText` props |
 | `<Divider>` | Horizontal rule / separator |
 | `<Social>` | Social media icons with `icons` shorthand array |
@@ -145,6 +157,8 @@ These props have non-obvious shapes that **must** be followed exactly:
 | `<PageBreak>` | Force subsequent document content onto a new PDF page |
 | `<Video>` | Video embed with `videoUrl` shorthand |
 | `<Html>` | Custom HTML passthrough |
+| `<Link>` | A link in text, or on its own in a Column (a Paragraph holding it) |
+| `<Head>` | Tags for the document's head (`meta`, `link`, `style`, `title`), from `@unlayer/react-elements/head` |
 
 ## Component Reference
 
@@ -155,10 +169,11 @@ Root wrapper for email-safe HTML. Same props as Body (without `mode`).
 - `contentAlign?: string` — `"center"`
 - `fontFamily?: { label: string, value: string }` — `{ label: "Arial", value: "arial,helvetica,sans-serif" }`
 - `textColor?: string` — `"#000000"`
-- `linkStyle?: { linkColor, linkHoverColor, linkUnderline, linkHoverUnderline }`
+- `linkStyle?: { linkColor, linkHoverColor, linkUnderline, linkHoverUnderline }` — the links in the content, as the editor's body link style
 - `previewText?: string` — plain text shown in email client inboxes, escaped for HTML. Pass `"Fish & chips"`, not `"Fish &amp; chips"`; entities supplied in the string display literally.
 - `textDirection?: string` — document direction (`"ltr"` or `"rtl"`), kept in design JSON. When opening the design in the editor, also set its direction with `unlayer.setTextDirection(...)`.
-- `lang?: string` — document language, such as `"ar"`; emitted on `<html>` by `renderToHtml`. Language is document metadata and is not stored in design JSON. Renderer options override both props.
+- `fonts?: Array<{ url: string }>` — web-font stylesheets the document's head links (`renderToHtml`). `renderToJson()` writes each URL on the design's fonts of the families it names (`family=` in a Google Fonts URL), as [`<Font>`](https://github.com/unlayer/elements/blob/main/packages/react/docs/fonts.md) does, and says once per render a URL it can't place.
+- `lang?: string` — document language, such as `"ar"`; emitted on `<html>` by `renderToHtml`. Language is document metadata and is not stored in design JSON. Renderer options override both props. A right-to-left template also gets `dir="rtl"` and its `lang` on `<body>` and the content's wrapper, for email clients that drop the `<html>` tag; a left-to-right one is unchanged.
 
 ### Page
 Root wrapper for responsive web display. Same props as Email.
@@ -172,23 +187,38 @@ Root wrapper for print/PDF rendering. It accepts the shared Body props plus:
 Layout container. Must be child of Email/Page/Document/Body.
 - `layout?: ColumnLayout` — use `ColumnLayouts.X`
 - `cells?: number[]` — alternative to layout
-- `backgroundColor?: string`
-- `padding?: string` — `"0px"`
+- `backgroundColor?: string` — the full-width band behind the row
+- `columnsBackgroundColor?: string` — the content width behind its columns
+- `backgroundImage?: { url, fullWidth?, repeat?, size?, position? }` — full width (`fullWidth: true`), not repeated and centered unless it says otherwise, as in the editor; `fullWidth: false` puts it behind the content width
+- `padding?: string | number` — `"0px"`; around the row, as in the editor (see below)
 - `noStackMobile?: boolean` — `false`
 
+A Row's `padding` (and its `mobile={{ padding }}`) is the editor's Row padding, in every mode: on the row's outer container, around its content box, so the design opens in the editor as it renders. A `columnsBackgroundColor` (or a background image that isn't full width) paints the content box only, so the padding sits outside that background and doesn't inset the content; Elements warns once per render when a Row has both. To inset the content inside the background, give the Columns padding:
+
+```tsx
+<Row columnsBackgroundColor="#fffaf3">
+  <Column padding="44px 48px 8px">…</Column>  {/* the cream box, its content inset 48px */}
+</Row>
+```
+
+A Row's Tailwind padding classes (`<Row className="bg-white p-8">`) inset the content, as in CSS: they go to its Columns' padding, added to theirs, as its Columns' margin classes do. Around cards (Columns with a background or a border) they're borders in the color around them, so a card grid keeps its gutters in the editor too (see the [Tailwind guide](./docs/tailwind.md#card-grids)).
+
+A Row's Columns must fit its `layout` (two for `ColumnLayouts.TwoEqual`). One that doesn't fails the render with a `RenderError` naming its layout and how many Columns it has (`A Row with the TwoEqual layout, for 2 Columns, has 1 (in <Row> at Row 2)`); with `onError: "omit"` it's left out of the HTML, the plain text and the design alike, and the other rows render (see [Errors](#errors)).
+
 ### Column
-Must be child of Row. Count must match layout.
+Must be child of Row. Count must match layout (a Row that doesn't fit its layout fails the render).
 - `padding?: string` — `"10px"`
 - `backgroundColor?: string`
 - `borderRadius?: string`
 
 ### Button
-- `text?: string` — `"Button"` (or use children)
+- `text?: string` — `"Button"` (or use children: text and inline JSX)
 - `href?: string | Href` — plain string auto-wrapped
+- `target?: string` — where the link opens: `"_blank"` (a new tab, the default), `"_self"`, … (one with a `"`, `'`, `<`, `>` or a backtick, which could end its HTML attribute, or one that isn't a string, is a new tab, said)
 - `backgroundColor?: string` — `"#0879A1"`
 - `color?: string` — `"#FFFFFF"`
-- `hoverBackgroundColor?: string`
-- `hoverColor?: string`
+- `hoverBackgroundColor?: string` — on web pages and documents (`Page`, `Document`): an `Email` writes no hover CSS
+- `hoverColor?: string` — the same
 - `fontSize?: string` — `"14px"`
 - `fontWeight?: number` — `400`
 - `fontFamily?: { label: string, value: string }`
@@ -196,43 +226,53 @@ Must be child of Row. Count must match layout.
 - `borderRadius?: string` — `"4px"`
 - `width?: number | string` — display width; `width="100%"` makes the button full-width, `width="200px"` pins it
 - `textAlign?: "left" | "center" | "right"` — `"center"`
+- aliases: `align` for `textAlign`, `textColor` for `color`
 
 ### Paragraph
 - `html?: string` — **rich HTML string** with inline formatting: `<b>`, `<i>`, `<u>`, `<s>`, `<a>`, `<code>`
-- `children` — plain text shorthand (auto-converted internally)
+- `text?: string` — plain text: markup and entities in it show as typed, in the HTML and in the design (`renderToJson()` stores it escaped)
+- `children` — text, with inline JSX kept as formatting: `strong`/`b`, `em`/`i`, `u`, `s`, `a` (href, target, rel, title, style, class), `br`, `span` (style, class), `code`, `sup`, `sub`, `small`, `mark`, nested, in Fragments and arrays, and components that return them (`<Link>`, yours, react-intl's `<FormattedMessage>`, react-i18next's `<Trans>`, `CodeInline`), rendered with the template's context
 - `fontSize?: string` — `"14px"`
 - `color?: string` — `"#000000"`
-- `textAlign?: "left" | "center" | "right"` — `"left"`
+- `textAlign?: "left" | "center" | "right"` — `"left"` (`"right"` in a right-to-left template, unless set)
 - `lineHeight?: string` — `"140%"`
 - `fontFamily?: { label: string, value: string }`
+- aliases: `align` for `textAlign`, `textColor` for `color`
+
+Text in children is escaped, as React shows it. Where the children have JSX in them, an email service's `<%first_name%>` tag is kept as written, in the HTML, the design and the plain text; children that are only strings are text, so it's escaped there (`&lt;%first_name%&gt;`, as 0.2.1 did; the plain text has it as written): put the tag in `html` for the service to fill it in. Other elements (a `div`, a `table`, an image) leave only their text, so no block gets into a paragraph, and nothing that runs code is kept (event handlers, `javascript:` URLs however they're written: `&#106;avascript:`, `javascript&colon;`, in markup a component writes as HTML). A component that is async or suspends fails a synchronous render, naming it (see [Errors](#errors)). The design (`renderToJson()`) keeps the same HTML, and the plain text writes links as `text (url)`.
 
-Use `html` for formatted text, children for plain text.
+A Paragraph is a text block in the design, and renders as the editor exports that block: plain text in no `<p>`, and its line height as given (`140%`, which text of another size inside it inherits as a fixed height, as in the editor).
 
 ```tsx
+<Paragraph fontSize="14px">
+  Hello <strong>world</strong>, read <a href="https://example.com">this</a>.<br />
+  <FormattedMessage id="welcome.next" />
+</Paragraph>
 <Paragraph html="Hello <b>bold</b> and <a href='#'>link</a>" fontSize="14px" />
-<Paragraph fontSize="14px">Plain text paragraph</Paragraph>
 ```
 
 ### Heading
-- `text?: string` — `"Heading"` (or use children)
-- `headingType?: "h1" | "h2" | "h3" | "h4"` — `"h1"`
+- `text?: string` — `"Heading"` (or use children: text and inline JSX, as Paragraph's)
+- `headingType?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"` — `"h1"` (or its aliases `level` and `as`, React Email's name; `headingType` wins, then `level`)
 - `fontSize?: string` — `"22px"`
 - `fontWeight?: number` — `400`
 - `fontFamily?: { label: string, value: string }`
 - `color?: string` — `"#000000"`
-- `textAlign?: "left" | "center" | "right"` — `"left"`
+- `textAlign?: "left" | "center" | "right"` — `"left"` (`"right"` in a right-to-left template, unless set)
 - `lineHeight?: string` — `"110%"`
+- aliases: `align` for `textAlign`, `textColor` for `color`
+- `m`, `mx`, `my`, `mt`, `mr`, `mb`, `ml` — margin shortcuts, as React Email's Heading takes them: its `containerPadding` (the space around it), each side not given its default `10px`; a number is px. `<Heading mt={32} mb={8}>` is `containerPadding="32px 10px 8px 10px"`. An explicit `containerPadding` wins.
 
 ### Divider
 - `borderTopWidth?: string` — `"1px"`
 - `borderTopColor?: string` — `"#BBBBBB"`
 - `borderTopStyle?: string` — `"solid"`
-- `textAlign?: "left" | "center" | "right"` — `"center"`
+- `textAlign?: "left" | "center" | "right"` — `"center"` (or its alias `align`)
 
 ### Image
 - `src?: string | { url, width?, autoWidth?, maxWidth? }` — string URLs auto-wrapped
-- `altText?: string` — alt text for accessibility
-- `textAlign?: "left" | "center" | "right"` — `"center"`
+- `altText?: string` — alt text for accessibility (or its alias `alt`)
+- `textAlign?: "left" | "center" | "right"` — `"center"` (or its alias `align`)
 - `action?: { name: "web", values: { href, target } }`
 
 ### Video
@@ -242,11 +282,52 @@ Use `html` for formatted text, children for plain text.
 ### Html
 - `html?: string` — `"<p>Custom HTML content</p>"`
 
+### Link
+A link, for text (`<Paragraph>Read <Link href="https://example.com/docs">the docs</Link>.</Paragraph>`) or on its own in a Column, where it's a Paragraph holding it (an editable text block in the design). A bare `<a>` in a Column is too, and a bare `<hr>` is a Divider; a link holding more than text holds (an image) or a rule with a style is an `<Html>` block, as it is. Other markup there is left out with a warning (put it in an `<Html>` block).
+- `href: string`
+- `target?: string` — `"_blank"` (a new tab)
+- `rel?: string` — `"noopener"` for a new tab
+- `title?: string`, `style?: CSSProperties`, `className?: string` — on its `<a>`, in the text: in the HTML and in the design, as the editor's text keeps them (a `<Head>`'s `<style>` can style the class)
+- `containerPadding`, `hideOnMobile`, `hideOnDesktop` — on its own in a Column
+
+### Head
+From `@unlayer/react-elements/head`. Tags of your own for the document's head: `<meta>`, `<link>`, `<style>`, `<title>`. Place it in an Email, Page or Document (or a component of yours there); it renders nothing in the body. The head has them after Elements' meta tags and before its styles (a rule of yours that overrides one of them needs `!important`). A `<style>`'s CSS and a `<script>`'s text (`type="application/ld+json"` data on a page) are written as given, in a component of yours too and in React 18 and 19 alike (only a `</style` or `</script` that would end them, or a tag that would start one, is escaped, as CSS or JavaScript reads it, whatever writes it: a string, a component, a list, markup; so is the end tag of a `<noscript>` or `<title>` they're in; under an `<svg>` or `<math>`, where they aren't CSS or JavaScript to a browser, their text is escaped as any text), and a `<title>`'s text is all its children's (`<title>Hi {name}</title>`), as in React 18. Components of yours in it render as the template's do: with its context, waited for by the async renderers, and failing as theirs fail (a RenderError naming one and where it is, `Head › Meta`; with `onError: "omit"`, left out of the head and listed). The design for the visual editor can't hold them: `renderToJson()` says so, once per render. Use `renderToHtml`'s `title` option or a `<title>` here, not both.
+
+```tsx
+import { Head } from "@unlayer/react-elements/head";
+
+<Email>
+  <Head>
+    <meta name="color-scheme" content="light dark" />
+    <style>{`@media (prefers-color-scheme: dark) { .brand { color: #ffffff !important; } }`}</style>
+  </Head>
+  <Row>…</Row>
+</Email>
+```
+
+### style, className and skipInText
+Every component takes these.
+- `style?: CSSProperties` — inlined on the element it renders, after the renderer's own styles: a Paragraph's or Heading's text, a Button's link, an Image's `img`, a Column's cell, a Row's container, the root's body (the wrapper in it, on a web page). A number is px (but `lineHeight`, `fontWeight`, `opacity`, `zIndex`, `flex`, `order`). A prop given wins over the same property in `style`, a value that could end the rule is left out, as it is from `mobile` settings and Tailwind classes, and a `"` (a font stack's, `url("…")`) is written as `&quot;`, which the browser reads as one. Style props (`color`, `backgroundColor`, `padding`, `fontFamily`, a Menu's `separator`, …) are written as given, as in 0.2.1: validate a value from data before you give it to one.
+- `className?: string` — class names on the same element, before the renderer's own, for a stylesheet of yours (a `<Head>`'s `<style>`).
+- `skipInText?: boolean` (blocks) — left out of the plain text (`renderToPlainText`), as a footer or a button often is. Any element with `data-skip-in-text="true"` is left out too.
+
+`style` and `className` are HTML only: the design for the visual editor can't hold them, so `renderToJson()` leaves them out and warns once per render:
+
+```
+[Unlayer] Paragraph `style.textTransform` is kept in HTML but not in the design for the visual editor.
+```
+
+Prefer props for what the editor should edit. A prop a block has no use for (a typo, an event handler) is warned about too:
+
+```
+[Unlayer] Button ignores the prop `onClick`.
+```
+
 ### Table
-- `headers?: string[]` — shorthand for column headers
-- `data?: string[][]` — shorthand for row data
-- `columns?: number` — `3`
-- `rows?: number` — `3`
+- `headers?: string[]` — shorthand for column headers (HTML, written as given, as the editor's table holds it)
+- `data?: string[][]` — shorthand for row data (HTML, written as given: escape data you put in it)
+- `columns?: number` — `2` (set from `headers` when given)
+- `rows?: number` — `2` (set from `data` when given)
 - `enableHeader?: boolean` — `true`
 - `repeatHeaderOnEachPage?: boolean` — `true`
 - `enableFooter?: boolean` — `false`
@@ -272,13 +353,18 @@ Forces the next block onto a new page in document output. It is inert in email a
 - `iconType?: "circle" | "rounded" | "squared"` — `"circle"`
 - `iconSize?: number` — `32`
 - `spacing?: number` — `10`
-- `align?: "left" | "center" | "right"` — `"center"`
+- `align?: "left" | "center" | "right"` — `"center"` (or its alias `textAlign`)
 
 ### Menu
-- `items?: { text: string, href: string, target?: string }[]` — shorthand
+- `items?: { text: string, href: string, target?: string }[]` — shorthand (a `target` that could end its HTML attribute, or isn't a string, is a new tab)
 - `layout?: "horizontal" | "vertical"` — `"horizontal"`
 - `separator?: string` — `"|"`
-- `align?: "left" | "center" | "right"` — `"center"`
+- `align?: "left" | "center" | "right"` — `"center"` (or its alias `textAlign`)
+- `textColor?: string` — the color of an item without a link, and of the separator
+- `linkColor?: string` — the color of an item with a link
+- `color?: string` — both: the items' color, linked or not (`textColor` and `linkColor` win where given)
+
+An alias is the name CSS or React Email gives a prop (`color`, `align`): where a component has its own name for it, the alias stands for that prop, and the component's own prop wins when both are given. A prop no component takes is said once per render (`Menu ignores the prop \`textColour\`: did you mean \`textColor\`?`), with the prop it's a slip away from.
 
 ## Column Layouts
 
@@ -332,7 +418,7 @@ import { Row, Column, ColumnLayouts } from '@unlayer/react-elements';
 </Row>
 ```
 
-Number of `<Column>` children must match the layout.
+Number of `<Column>` children must match the layout. A Row whose Columns don't fails the render (`A Row with the TwoEqual layout, for 2 Columns, has 1 (in <Row> at Row 2)`), or is left out with `onError: "omit"` while the other rows render; `renderRowToJson()` of one throws.
 
 ## Rendering Modes
 
@@ -371,18 +457,102 @@ const html = renderToHtml(
 );
 ```
 
-The document shell matches the mode: `<Email>` gets the XHTML transitional doctype plus the MSO conditional comments Outlook needs, `<Page>` gets a standard HTML5 shell, and `<Document>` gets a print/PDF-friendly XHTML shell. Options accept config overrides plus:
+The document shell matches the mode: `<Email>` gets the XHTML transitional doctype plus the MSO conditional comments Outlook needs, `<Page>` gets a standard HTML5 shell, and `<Document>` gets a print/PDF-friendly XHTML shell. Its `<style>` starts with the editor's base stylesheet for the mode (the body's and a `<p>`'s margins, `sub`/`sup` line height, and the table and Apple data-detector rules in email; box sizing and a 14px root font size on a page or document), as the editor's export does. Options accept config overrides plus:
 
 - `title` — document `<title>`
 - `fonts` — web-font stylesheet URLs to load via `<link>` tags, e.g. `[{ url: "https://fonts.googleapis.com/css2?family=Inter" }]`
 
+And with every renderer (`renderToJson` and the async ones too), and in a root's `config` or an `<UnlayerProvider>`'s:
+
+- `idPrefix` — what your components' `useId()`s start with, as React's `identifierPrefix` (`{ idPrefix: "welcome-" }` gives `«welcome-R1»` on React 19.1), for an email or page you put in a page of yours, whose own `useId()`s it then can't repeat. A template component around the root (`<Welcome />`) takes it from the render's options or an `<UnlayerProvider>` around it, as it's called before the root's `config` is read. Elements' own ids (`u_row_1`) are the editor's export's, without it.
+
 If your app owns the document shell (an existing page template, an ESP template, an iframe `srcdoc`), use `renderToHtmlParts` instead — it returns `{ head, body }` plus the granular pieces (`css`, `js`, `tags`) for pipelines that need them separately, e.g. CSS inlining. This mirrors the editor's [chunk parameters](https://docs.unlayer.com/builder/latest/export-html#chunk-parameters) with two deliberate differences: `tags` is extra (components can contribute head tags, and reassembling from `css` + `js` alone would drop them), and there is no `fonts` chunk (Elements has no font registry — pass font stylesheet URLs via `renderToHtml`'s `fonts` option instead).
 
+Its `head` and `css` don't have the base stylesheet: your page has its own.
+
 ```tsx
 const { head, body, css, js, tags } = renderToHtmlParts(<Email>...</Email>);
 // head = css/js/tags pre-assembled; css = raw stylesheet (no <style> wrapper)
 ```
 
+## renderToPlainText
+
+The text version of an email: headings in capitals, links as `text (url)`, images as their alt text, the preview text and blocks with `skipInText` left out.
+
+```tsx
+import { renderToPlainText, toPlainText } from '@unlayer/react-elements';
+
+const text = renderToPlainText(<Receipt />, { links: "after", wordwrap: 72 });
+const fromHtml = toPlainText(html, { skip: [".footer"] }); // any HTML
+```
+
+Options (the config's too):
+- `wordwrap?: number` — wrap lines at this many characters, between words (default: no wrapping); the URLs listed with `links: "after"` aren't wrapped
+- `links?: "inline" | "after" | "none"` — `text (url)` (the default), `text [1]` with the URLs listed at the end, or the text only; in headings and preformatted text too, the URL as written (never in capitals)
+- `uppercaseHeadings?: boolean` — h1 and h2 in capitals (default `true`), an email service's tags in them as written (`{{ first_name }}`, `{% if %}`, `*|FNAME|*`, `%%Name%%`, `%recipient.name%`, `<%name%>`), for it to read them
+- `skip?: string[]` — elements left out with what's in them, by tag (`"img"`) or class (`".footer"`)
+
+Without options, the text is written as 0.2 wrote it, but for preformatted text (`<pre>`, code), now kept as written on lines of its own, an element with `data-skip-in-text` (now left out whole), and links (each with its own URL, a heading's too, never in capitals): see the [changelog](./CHANGELOG.md).
+
+### Async templates and `pretty`
+
+The renderers above are synchronous: an async component, or one that suspends, fails the render, naming it. For templates that load data as they render, use the same renderers from `@unlayer/react-elements/async`. They return Promises, and resolve async templates, async components (anywhere, on React 18 too), Suspense (`use()` on React 19, thrown promises on React 18) and `<Tailwind config>`, with each component run once and sibling components loading at once. A part that fails rejects the render with a `RenderError`, as in the synchronous renderers (see [Errors](#errors)). Their `renderToHtml` and `renderToHtmlParts` also take `pretty: true` to format the HTML for reading (with prettier 3, an optional peer dependency); Outlook's conditional comments are kept as they were. See the [async guide](https://github.com/unlayer/elements/blob/main/packages/react/docs/async.md), including what React 18 supports (and its types: TypeScript needs React's canary types for an async component in JSX).
+
+```tsx
+import { renderToHtml } from "@unlayer/react-elements/async";
+
+async function Receipt({ id }: { id: string }) {
+  const order = await getOrder(id);
+  return <Email><Row><Column><Paragraph>Order {order.number}</Paragraph></Column></Row></Email>;
+}
+
+const html = await renderToHtml(<Receipt id="A-1001" />, { title: "Receipt", pretty: true });
+```
+
+`pretty(html)` from `@unlayer/react-elements/async` formats any HTML the same way (the synchronous renderers' too). It doesn't work on edge runtimes, which can't load prettier as they run: format at build time there.
+
+## Errors
+
+A part of a template that fails fails the render, the synchronous and the async renderers alike, `renderToJson()` and `renderToPlainText()` too: a component that throws (or is async, or suspends, in a synchronous render), a Row whose Columns don't fit its `layout`, an exporter that fails, or a head function (a custom tool's `head`) that fails (`renderToJson()` doesn't run the exporters or the head functions, which make the HTML, not the design: it gives the design, while `renderToHtml()` throws). The error is a `RenderError` that says which component and where it is, with what it threw as its `cause`:
+
+```
+RenderError: [Unlayer] Cannot read properties of undefined (reading 'name') (in <Hero> at Row 3 › Column 1 › Hero)
+```
+
+`error.component` is `"Hero"`, `error.position` is `"Row 3 › Column 1 › Hero"`, and `error.cause` the original error, whose stack points at the line that threw. An email that's missing a part doesn't send by mistake.
+
+To leave failed parts out instead (a live preview, a digest whose sections are optional), set `onError`: in the render's options, in a root's `config`, or in an `<UnlayerProvider>`'s:
+
+```tsx
+import { renderToHtml, renderToHtmlParts, renderToJson, type RenderError } from "@unlayer/react-elements";
+
+// Left out of the HTML, the plain text and the design alike, each said with console.error
+const html = renderToHtml(<Digest />, { onError: "omit" });
+const design = renderToJson(<Digest />, { onError: "omit" });
+
+// Listed, to check or report: renderToHtmlParts (and the async one) gives what it left out
+const { body, omitted } = renderToHtmlParts(<Digest />, { onError: "omit" });
+for (const error of omitted) report(error.position, error.cause);
+
+// Or a function, instead of the console (it can throw the error to fail the render)
+renderToHtml(<Digest />, { onError: (error: RenderError) => logger.warn(error.message, { cause: error.cause }) });
+```
+
+What's left out is the part that failed: a component of yours (with what it rendered), markup React rejects, a Row whose Columns don't fit its layout, a block, Row or Column whose exporter failed (a Column with its cell, so the Row's other Columns share its width; a Row with its last Column), and what a head function that failed gives the head (its block still renders, as in the design). The HTML, the plain text and the design are then the template's without it. A template that isn't one fails anyway: a component that's `undefined` (a broken or circular import), an object or a date as a child. Error boundaries (`componentDidCatch`) don't catch while Elements renders, as in React's server renderer: `onError` and the error's position are what to use.
+
+## Designs as code
+
+`designToElements()`, from `@unlayer/react-elements/codegen`, turns an Unlayer design (the editor's `saveDesign()` JSON) into Elements code: a `.tsx` module whose component renders back to the same design with `renderToJson()`. It's pure (no React rendering, no Node APIs), so it runs in a CLI and in a browser.
+
+```ts
+import { designToElements } from "@unlayer/react-elements/codegen";
+
+const { code, warnings } = designToElements(design, { componentName: "Welcome" });
+// code: `import { Email, Row, Column, … } from "@unlayer/react-elements"; export default function Welcome() { … }`
+```
+
+Settings become the props you'd write (`backgroundColor`, `fontSize`, `href`, `layout={ColumnLayouts.TwoEqual}`), a Paragraph's text becomes `html` and a Heading's or Button's children, and only what differs from a component's defaults is written. What no prop holds goes in the component's `values`; a row's padding is `<Row padding>`, the editor's. Blocks without an Elements component (custom tools, forms, timers) become `<Html>` blocks when you pass the design's exported HTML (`html` option), and TODO comments otherwise. Each warning names the row and column. See the [guide](https://github.com/unlayer/elements/blob/main/packages/react/docs/codegen.md).
+
 ## Custom Tools
 
 **A custom tool is the custom component you create.** We keep the editor's term — Custom Tools — because it's the same API across the Builder and Elements, and that shared vocabulary is where the power is: the same definition you pass to the editor's [`unlayer.registerTool`](https://docs.unlayer.com/builder/tools/custom) renders from code too. Elements uses the `renderer.exporters` and `renderer.head` halves of the definition; the editor-only parts (`label`, `icon`, `options`, `Viewer`, `validator`) are accepted and ignored:
@@ -411,32 +581,67 @@ renderToJson(tree);  // emits { type: "custom", slug: "countdown", values } —
 
 ## UnlayerProvider
 
-Configure global settings like CDN base URL, merge tags, text direction, and rendering mode:
+Set config once for every root inside it (`Email`, `Page`, `Document` or `Body`): the CDN for assets (`cdnBaseUrl`), a Table's merge tag rule (`mergeTagState`), text direction (`textDirection`), a sanitizer (`toSafeHtml`), head options (`headConfig`), what failed parts do (`onError`), the `useId()`s' prefix (`idPrefix`), and the mode of a `<Body>`:
 
 ```tsx
-import { UnlayerProvider, Email, Row, Column, Social, Menu } from '@unlayer/react-elements';
+import { UnlayerProvider, Email, Row, Column, ColumnLayouts, Social, Menu, renderToHtml, renderToJson } from '@unlayer/react-elements';
 
-function App() {
-  return (
-    <UnlayerProvider config={{
-      cdnBaseUrl: "https://my-cdn.example.com",
-      mergeTagState: { firstName: "Jane", company: "Acme" },
-      textDirection: "ltr"
-    }}>
-      <Email>
-        <Row layout={ColumnLayouts.OneColumn}>
-          <Column>
-            <Social icons={[{ name: "Facebook", url: "https://facebook.com/acme" }]} />
-            <Menu items={[{ text: "Home", href: "/" }, { text: "About", href: "/about" }]} />
-          </Column>
-        </Row>
-      </Email>
-    </UnlayerProvider>
-  );
-}
+const Welcome = () => (
+  <Email>
+    <Row layout={ColumnLayouts.OneColumn}>
+      <Column>
+        <Social icons={[{ name: "Facebook", url: "https://facebook.com/acme" }]} />
+        <Menu items={[{ text: "Home", href: "/" }, { text: "About", href: "/about" }]} />
+      </Column>
+    </Row>
+  </Email>
+);
+
+const email = (
+  <UnlayerProvider config={{ cdnBaseUrl: "https://my-cdn.example.com", textDirection: "rtl" }}>
+    <Welcome />
+  </UnlayerProvider>
+);
+
+renderToHtml(email);  // icons from my-cdn.example.com, right to left
+renderToJson(email);  // body.values.textDirection: "rtl", so the editor opens it right to left too
+```
+
+A root's config is merged key by key, the most specific first:
+
+1. the render function's options (`renderToHtml(email, { cdnBaseUrl })`);
+2. the root's own `config` prop (`<Email config={{ … }}>`; its `textDirection` prop comes just under it);
+3. the nearest `<UnlayerProvider>`'s `config` (one inside another merges over it, key by key);
+4. `DEFAULT_CONFIG`.
+
+A key a level leaves out, or sets to `undefined`, comes from the level under it; an object value (`mergeTagState`, `headConfig`) is taken whole, not merged. `mode` sets a `<Body>`'s mode: `<Email>`, `<Page>` and `<Document>` keep theirs.
+
+`mergeTagState` holds no values for merge tags: Elements writes a tag (`{{first_name}}`, `*|FNAME|*`) as it is, in the HTML, the plain text and the design, for your email service to fill in, and values your code has go in as props. It's the editor's merge tag state, which its Table exporter reads to repeat a table's rows: `{ mergeTags, mergeTagGroup, mergeTagRule }`, with `mergeTags` your editor's merge tags as `unlayer.init({ mergeTags })` takes them. A Table whose `values` name the same group and rule has its rows between the rule's `before` and `after`:
+
+```tsx
+const mergeTags = {
+  products: {
+    name: "Products",
+    rules: { repeat: { name: "Repeat for each product", before: "{{#products}}", after: "{{/products}}" } },
+    mergeTags: { name: { name: "Name", value: "{{name}}" } },
+  },
+};
+
+renderToHtml(
+  <Email>
+    <Row><Column>
+      <Table headers={["Product"]} data={[["{{name}}"]]} values={{ mergeTagGroup: "products", mergeTagRule: "repeat" }} />
+    </Column></Row>
+  </Email>,
+  { mergeTagState: { mergeTags, mergeTagGroup: "products", mergeTagRule: "repeat" } }
+);
 ```
 
-**Important:** The root wrapper (`Email`/`Page`/`Document`) bridges the provider context to child components. Components inside `UnlayerProvider` but without a root wrapper won't receive the config.
+A render applies one Table rule this way. A row's or block's display condition (`values={{ displayCondition }}`, the editor's, with its `before` and `after`) is written around it, as the editor's export writes it; a row's or another block's merge tag rule isn't applied.
+
+The Provider works around the root or around a template component that returns one, through every render function (`renderToHtml`, `renderToHtmlParts`, `renderToPlainText`, `renderToJson`, and those from `@unlayer/react-elements/async`) and where React renders the tree itself (`renderToStaticMarkup`, a client component). The design keeps what it can hold of the config: `textDirection`. Put the Provider around the root: a Provider inside it doesn't configure it. Your components read the Provider's config with `useUnlayerConfig()`.
+
+In React Server Components there's no context: the render functions still read the Provider around the root (they find it on the element), but a root that React itself renders there gets only its own `config` prop. Pass config to the root, or render with a render function.
 
 ## Types
 
@@ -448,12 +653,15 @@ import type {
   Href, Icons, TextAlign, LinkStyle,
   SocialIcon, MenuItem,
   ButtonProps, MenuProps, ImageProps,
+  OnError, RenderToJsonOptions,
 } from '@unlayer/react-elements';
 ```
 
+`RenderError` (a class: `error instanceof RenderError`) is exported too.
+
 ## Common Font Stacks
 
-fontFamily must always be an object. Here are ready-to-use stacks:
+`fontFamily` takes a string or `{ label, value }` (see [Critical Rules](#critical-rules)); for a stack, the object gives the visual editor a short name to show. Here are ready-to-use stacks:
 
 ```tsx
 const sansFont = { label: "Sans Serif", value: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif" };
@@ -537,10 +745,10 @@ const monoFont = { label: "Monospace", value: "'SF Mono', 'Fira Code', 'Roboto M
 
 ## Common Mistakes
 
-1. **Column count mismatch** — `TwoEqual` layout requires exactly 2 `<Column>` children
+1. **Column count mismatch** — `TwoEqual` layout requires exactly 2 `<Column>` children (a Row that doesn't fit its layout fails the render)
 2. **Missing Column** — Items must be inside `<Column>`, never directly in `<Row>`
 3. **Missing Row** — Columns must be inside `<Row>`, never directly in `<Email>`/`<Page>`/`<Document>`
-4. **JSX formatting in children** — `<Heading>Hi <b>x</b></Heading>` is flattened to plain text (the formatting is **not** preserved). For inline formatting use `<Paragraph html="Hi <b>x</b>" />`.
+4. **Block elements in text children** — `<Paragraph>Hi <div>x</div></Paragraph>` keeps only the div's text: text children hold inline formatting (`<b>`, `<a>`, `<br />` …). Put blocks in their own Elements blocks, or HTML in an `<Html>` block.
 
 > Note: the CSS-idiom forms that used to be mistakes now work — a string `fontFamily`, a string/number `fontWeight`, a numeric `fontSize`, `padding="0"`, and `<Paragraph text="..." />` are all accepted and normalized. The object/numeric forms above are still recommended for clarity.
 
@@ -569,6 +777,8 @@ pnpm test           # Run tests
 pnpm storybook      # Launch Storybook
 ```
 
+How the renderer works, and the invariants its tests hold: [ARCHITECTURE.md](./ARCHITECTURE.md).
+
 ## License
 
 MIT
diff --git a/packages/react/THIRD_PARTY_LICENSES.md b/packages/react/THIRD_PARTY_LICENSES.md
new file mode 100644
index 00000000..2b4f1d90
--- /dev/null
+++ b/packages/react/THIRD_PARTY_LICENSES.md
@@ -0,0 +1,150 @@
+# Third-party licenses
+
+The `@unlayer/react-elements` entries below build in code from these packages. Their licenses follow, as each package ships them.
+
+- `@unlayer/react-elements/markdown`: [marked](https://github.com/markedjs/marked) 18.0.14
+- `@unlayer/react-elements/code`: [highlight.js](https://github.com/highlightjs/highlight.js) 11.12.0 (its core and the languages the entry registers), and the colors of the code themes ported from its style sheets (see below)
+- `@unlayer/react-elements/tailwind`: [tailwindcss](https://github.com/tailwindlabs/tailwindcss) 4.2.1 (its default theme, `theme.css`)
+
+## marked
+
+### License information
+
+### Contribution License Agreement
+
+If you contribute code to this project, you are implicitly allowing your code
+to be distributed under the MIT license. You are also implicitly verifying that
+all code is your original work. `</legalese>`
+
+### Marked
+
+Copyright (c) 2018+, MarkedJS (https://github.com/markedjs/)
+Copyright (c) 2011-2018, Christopher Jeffrey (https://github.com/chjj/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+### Markdown
+
+Copyright © 2004, John Gruber
+http://daringfireball.net/
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+* Neither the name “Markdown” nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+This software is provided by the copyright holders and contributors “as is” and any express or implied warranties, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose are disclaimed. In no event shall the copyright owner or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use, data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise) arising in any way out of the use of this software, even if advised of the possibility of such damage.
+
+## highlight.js
+
+```
+BSD 3-Clause License
+
+Copyright (c) 2006, Ivan Sagalaev.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+```
+
+### Code themes
+
+The `/code` entry's themes other than `light` and `dark` are ported from these highlight.js 11.12.0 style sheets
+(their colors and font styles, written as inline CSS), distributed with highlight.js under the license above. Each
+names its own authors:
+
+- `github-light`: `styles/github.css` (Theme: GitHub, by github.com)
+- `github-dark`: `styles/github-dark.css` (Theme: GitHub Dark, by github.com)
+- `one-dark`: `styles/atom-one-dark.css` (from the One Dark Syntax theme, https://github.com/atom/one-dark-syntax)
+- `monokai`: `styles/monokai.css` (Monokai style, ported by Luigi Maselli, http://grigio.org)
+- `dracula`: `styles/base16/dracula.css` (Mike Barkmin, based on the Dracula Theme, http://github.com/dracula; MIT or more permissive, via base16-schemes-source)
+- `nord`: `styles/nord.css` (Nord highlight.js, https://github.com/arcticicestudio/nord-highlightjs; MIT, copyright (c) 2017-present Arctic Ice Studio and Sven Greb)
+- `solarized-light`, `solarized-dark`: `styles/base16/solarized-light.css`, `styles/base16/solarized-dark.css` (Ethan Schoonover, modified by aramisgithub; MIT or more permissive, via base16-schemes-source)
+
+The MIT license these name:
+
+```
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## tailwindcss
+
+```
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
diff --git a/packages/react/docs/README.md b/packages/react/docs/README.md
index 88b07196..74623b33 100644
--- a/packages/react/docs/README.md
+++ b/packages/react/docs/README.md
@@ -15,6 +15,12 @@ npm install @unlayer/react-elements react react-dom
 | Share one React template across email, web, and PDF | [One React invoice, three outputs](./one-template-email-web-pdf.md) | Email HTML, responsive page, print HTML, and real PDF |
 | Generate an invoice PDF using Playwright | [React to PDF with Playwright](./react-to-pdf.md) | A PDF file created by headless Chromium |
 | Make AI-generated React content visually editable | [React to Unlayer design JSON](./visual-editing.md) | `renderToJson()` → `loadDesign()` → edited JSON and HTML |
+| Turn a template made in the Unlayer editor into React code | [Unlayer designs as Elements code](./codegen.md) | `designToElements(design)` → a `.tsx` component that renders back to the same design |
+| Style components with Tailwind classes | [Tailwind CSS in Elements](./tailwind.md) | `className="bg-gray-100 p-6"` as props, in HTML and editable design JSON |
+| Render Markdown as editable blocks | [Markdown in Elements](./markdown.md) | Headings, paragraphs, lists, images, tables and code as Elements blocks |
+| Show syntax-highlighted code in email | [Code in emails, pages and documents](./code.md) | `CodeBlock` and `CodeInline` with inline styles and an Outlook fallback |
+| Use a web font | [Web fonts in Elements](./fonts.md) | `<Font>` in the head, the template's font, Outlook's fallback |
+| Render templates that load data (async components, Suspense) | [Async templates and readable HTML](./async.md) | `await renderToHtml()` from `@unlayer/react-elements/async`, with `pretty` |
 | Move React Email templates to Elements | [Migrate from React Email](./migrate-from-react-email.md) | `npx @unlayer/migrate`: converted templates, checked against the originals |
 | Open React Email templates in the Unlayer editor | [React Email in the editor](../../../examples/react-email-in-editor) | `npx @unlayer/migrate --design` → `loadDesign()` |
 | Try Elements or preview a snippet without installing | [Elements Playground](https://examples.unlayer.com/examples/elements-playground/) | Live email, page, or document preview, HTML and design JSON export, and the Unlayer builder |
@@ -29,10 +35,13 @@ Elements supplies components and renderers. Your email provider handles delivery
 
 - Import from `@unlayer/react-elements`. Use `Email`, `Page`, or `Document` as the root passed to renderers.
 - Keep the structure `root > Row > Column > content`. Match a row's layout to its column count; there is no `Text` component, so use `Paragraph` or `Heading`.
-- Use `renderToHtml()` for a full document, `renderToPlainText()` for the text email body, and `renderToJson()` for editor design data. These functions are synchronous; delivery and PDF printing are asynchronous.
+- Use `renderToHtml()` for a full document, `renderToPlainText()` for the text email body, and `renderToJson()` for editor design data. These functions are synchronous; delivery and PDF printing are asynchronous. For templates with async components or Suspense, use the same renderers from `@unlayer/react-elements/async` and `await` them ([guide](./async.md)).
+- For Tailwind classes, wrap the root in `<Tailwind>` and follow [Tailwind CSS in Elements](./tailwind.md): `<Tailwind config>` renders with the async renderers from `@unlayer/react-elements/tailwind`, or with `tw` from `await loadTailwind(config)`.
+- Markdown, code, web fonts and head tags come from their own entries: `Markdown` from `@unlayer/react-elements/markdown` ([guide](./markdown.md)), `CodeBlock`/`CodeInline` from `@unlayer/react-elements/code` ([guide](./code.md)), `Font` from `@unlayer/react-elements/font` ([guide](./fonts.md)), `Head` from `@unlayer/react-elements/head` ([reference](../README.md#head)).
+- `style` and `className` on any component are inlined on (and added to) the element it renders, in the HTML only: the design for the visual editor can't hold them, and `renderToJson()` says so. Prefer props for what the editor should edit.
 - For reusable trees, use a plain synchronous factory returning the actual root, as in the [invoice example](../../../examples/content-workflows/src/invoice.tsx). Fetch data before building the tree.
 - Escape dynamic values placed into `html` props, validate link targets, and keep provider credentials on the server.
-- Read the [visual editing constraints](./visual-editing.md#constraints) before promising React-to-editor round trips. Edited JSON does not regenerate JSX.
+- Read the [visual editing constraints](./visual-editing.md#constraints) before promising React-to-editor round trips. Edited JSON doesn't change the JSX it came from: convert it to new Elements code with `designToElements()` from `@unlayer/react-elements/codegen` ([guide](./codegen.md)).
 - To preview code without installing, open the [Elements Playground](https://examples.unlayer.com/examples/elements-playground/) with the source in the URL hash: `#code=<base64url of the code>`, optionally with `&mode=email|page|document`. The playground takes plain JSX with no imports. In browsers with WebMCP, call its `render_elements` tool to get the HTML.
 
 The [runnable example](../../../examples/content-workflows) backs these guides. The [React API reference](../README.md) covers component props; [Next.js App Router](../../../examples/nextjs-app-router) demonstrates framework integration.
diff --git a/packages/react/docs/async.md b/packages/react/docs/async.md
new file mode 100644
index 00000000..06ec3195
--- /dev/null
+++ b/packages/react/docs/async.md
@@ -0,0 +1,87 @@
+# Async templates and readable HTML
+
+Elements' renderers (`renderToHtml`, `renderToPlainText`, `renderToJson`, `renderToHtmlParts`) are synchronous. When a template loads data as it renders, as an async component or by suspending, use the async renderers from `@unlayer/react-elements/async`. They take the same arguments and return Promises:
+
+```tsx
+import { Email, Row, Column, Heading, Paragraph } from "@unlayer/react-elements";
+import { renderToHtml, renderToPlainText, renderToJson } from "@unlayer/react-elements/async";
+
+async function CustomerName({ id }: { id: string }) {
+  const customer = await db.customers.find(id);
+  return <strong>{customer.name}</strong>;
+}
+
+async function Receipt({ orderId }: { orderId: string }) {
+  const order = await db.orders.find(orderId);
+  return (
+    <Email previewText={`Order ${order.number}`}>
+      <Row>
+        <Column>
+          <Heading>Order {order.number}</Heading>
+          <Paragraph>
+            Thanks, <CustomerName id={order.customerId} />.
+          </Paragraph>
+        </Column>
+      </Row>
+    </Email>
+  );
+}
+
+const html = await renderToHtml(<Receipt orderId="A-1001" />, { title: "Your receipt" });
+const text = await renderToPlainText(<Receipt orderId="A-1001" />);
+const design = await renderToJson(<Receipt orderId="A-1001" />);
+```
+
+The output is what the synchronous renderers give for the same content, and the same as theirs for a template with nothing async.
+
+## What resolves
+
+- **An async template** (`async function Receipt()`), or a lazy one (`React.lazy(() => import("./Receipt"))`), also wrapped in a context provider, a Fragment, a `<Suspense>` or a `<Tailwind>`. A `<Suspense>` around the template's root is outside the document, and its fallback isn't a document, so it never renders: the template in it is waited for (the synchronous renderers say it's async, as without it), and one that fails rejects the render, naming it. A `<Suspense>` inside the root (or around a template with no root, whose content it is) is React's: these renderers wait for what's in it, and the synchronous ones render its fallback where what's in it suspends.
+- **Async components** in a Column, among rows, in a Paragraph's, Heading's or Button's text, and in a `<Head>`.
+- **Suspense**: `use(promise)` on React 19, and components that throw a promise until their data is there (React 18's way, which React 19 keeps).
+- **`<Tailwind config>`**: its config compiled, as with the [Tailwind guide](./tailwind.md)'s renderers, which are these. `tailwindcss` is loaded only when a template has a config.
+- **Errors**: a component that throws, also after an `await`, rejects the render with a `RenderError` naming the component and where it is, with what it threw as its `cause`, as the synchronous renderers throw. Where two fail, it's the first in the template, whichever failed first. With `onError: "omit"` the failed parts are left out instead (see [Errors](../README.md#errors)).
+
+## How it works
+
+The template's root is resolved first: an async template is called and awaited (and one that `use()`s or throws a promise, called again once it's there). Elements then renders the content once, itself, with hooks, context and `use()` working as in React's server renderer: where a component waits, it goes on with the rest, so the data of sibling components loads at once, and puts each part where it is in the template once it's there, whatever arrives first, so the output is the same every time. The synchronous renderer makes the HTML, the head, the plain text or the design from that render: each component runs once per render. Several renders can run at once. See [ARCHITECTURE.md](../ARCHITECTURE.md#the-async-walk).
+
+## React 18 and React 19
+
+| | React 19 | React 18 |
+|--|--|--|
+| Async templates (`async function Template()`) | ✓ | ✓ |
+| Async components, anywhere (in a Column, in text, in a component of yours) | ✓ | ✓ |
+| Components that throw a promise (Suspense) | ✓ | ✓ |
+| `use(promise)` | ✓ | ✗ (React 18 has no `use`) |
+
+With React 18's types (`@types/react` 18), TypeScript rejects an async component written as JSX: `error TS2786: 'Receipt' cannot be used as a JSX component` (its `Promise<Element>` isn't a `ReactNode` there). React's canary types allow it: add `/// <reference types="react/canary" />` to a `.d.ts` file in your project (or `"react/canary"` to `compilerOptions.types`). They change types only, nothing at runtime. React 19's types allow async components as they are.
+
+## `pretty`
+
+`renderToHtml` and `renderToHtmlParts` take `pretty: true` to format the HTML for reading: indented, a tag per line where whitespace allows it.
+
+```ts
+const html = await renderToHtml(<Receipt orderId="A-1001" />, { pretty: true });
+```
+
+It uses [prettier](https://prettier.io) 3, an optional peer dependency (`npm install prettier`), loaded only when `pretty` is set; without it, or with prettier 2, the render rejects saying what to install. Whitespace that shows (in text, between inline elements) isn't touched, and comments, Outlook's `<!--[if mso]>` blocks included, are kept exactly as they were: the document shows the same text. Send the unformatted HTML: it's smaller.
+
+`pretty(html)` formats any HTML the same way, the synchronous renderers' too:
+
+```ts
+import { renderToHtml } from "@unlayer/react-elements";
+import { pretty } from "@unlayer/react-elements/async";
+
+const html = await pretty(renderToHtml(<Receipt order={order} />));
+```
+
+`pretty` doesn't work on edge runtimes (Vercel Edge Functions, Cloudflare Workers): prettier is loaded when it runs, from `node_modules`, which they don't have. Format at build time there (a snapshot, a script), or render in the Node.js runtime.
+
+The plain text takes the synchronous renderer's options too: `await renderToPlainText(template, { links: "after", wordwrap: 72 })` (see `renderToPlainText` in the [React API reference](../README.md)).
+
+## Agent rules
+
+- Templates that `await` or suspend: import the renderers from `@unlayer/react-elements/async` and `await` them. The synchronous ones throw for such components, naming them.
+- Keep data loading in the template's own async components; don't fetch inside a synchronous render.
+- Use `pretty` for snapshots and debugging, not for what you send, and not on an edge runtime.
diff --git a/packages/react/docs/code.md b/packages/react/docs/code.md
new file mode 100644
index 00000000..66015363
--- /dev/null
+++ b/packages/react/docs/code.md
@@ -0,0 +1,127 @@
+# Code in emails, pages and documents
+
+Show code in a developer newsletter, an API key email or a changelog. `CodeBlock` is syntax-highlighted code that email clients show as it looks in the browser, and `CodeInline` is code inside a sentence.
+
+```bash
+npm install @unlayer/react-elements
+```
+
+Both come from `@unlayer/react-elements/code`. The highlighter ([highlight.js](https://github.com/highlightjs/highlight.js)) is built into that entry: there's nothing more to install, and the main entry never loads it.
+
+## CodeBlock
+
+```tsx
+import { Email, Row, Column, Paragraph } from "@unlayer/react-elements";
+import { CodeBlock, CodeInline } from "@unlayer/react-elements/code";
+
+<Email>
+  <Row>
+    <Column>
+      <Paragraph>
+        Install it with <CodeInline>npm install @acme/sdk</CodeInline>, then:
+      </Paragraph>
+      <CodeBlock language="ts" theme="dark" lineNumbers>{`
+import { Acme } from "@acme/sdk";
+
+const acme = new Acme({ apiKey: process.env.ACME_KEY });
+await acme.orders.list({ limit: 10 });
+`}</CodeBlock>
+    </Column>
+  </Row>
+</Email>
+```
+
+How it stays readable in email:
+
+- **Inline styles only.** Each token is a `<span style="color: …">`: there's no class for a stylesheet to resolve, which most clients would drop.
+- **Outlook.** The code is in a `<pre>`, which Outlook shows with its spaces and line breaks, in a monospace font (the stack ends in Consolas and Courier New), on the block's background (`bgcolor`). Line heights are in pixels, which Outlook reads.
+- **Line numbers** are a table row per line, so a number stays beside its line when a long line wraps. They're left out of the plain text.
+- **Plain text** (`renderToPlainText()`) is the code as written, its indentation kept.
+
+In the design (`renderToJson()`), a CodeBlock is an HTML block.
+
+### Props
+
+| Prop | Default | |
+|------|---------|--|
+| `children` / `code` | | The code. A leading line break and trailing whitespace are taken off. |
+| `language` | none (no colors) | A language highlight.js knows: `ts`, `tsx`, `js`, `json`, `html`, `css`, `bash`, `shell`, `python`, `ruby`, `go`, `rust`, `java`, `kotlin`, `swift`, `c`, `cpp`, `csharp`, `php`, `sql`, `yaml`, `graphql`, `ini`, `markdown`, `diff`, … |
+| `theme` | `"light"` | `"light"`, `"dark"`, one of highlight.js's (`"github-light"`, `"github-dark"`, `"one-dark"`, `"monokai"`, `"dracula"`, `"nord"`, `"solarized-light"`, `"solarized-dark"`), or a theme of your own. |
+| `lineNumbers` | `false` | `true`, or the first line's number. |
+| `fontSize` | `13px` | |
+| `lineHeight` | `1.5` | A ratio of the size (written in pixels), or a length. |
+| `fontFamily` | system monospace, Consolas, Courier New | |
+| `padding` | `16px` | |
+| `borderRadius` | `6px` | |
+| `wrap` | `true` | Long lines wrap; `false` keeps them on one line (they scroll where a client can). |
+| `containerPadding`, `hideOnMobile`, `hideOnDesktop` | | As on any block. |
+
+Code in a language Elements doesn't build in is shown without colors, with a warning. Add the language with highlight.js's definition (install `highlight.js` in your project for it):
+
+```ts
+import { registerLanguage } from "@unlayer/react-elements/code";
+import elixir from "highlight.js/lib/languages/elixir";
+
+registerLanguage("elixir", elixir);
+```
+
+`listLanguages()` lists the languages it knows. `highlightCode(code, options)` returns a CodeBlock's HTML, for markup you build yourself.
+
+Code longer than 8,192 characters is shown without colors (escaped, in the block's own style, as code in a language it has no grammar for), with a warning. On some code highlight.js's time grows with the code's size squared, on long lines and on short ones (a line of `$a` in Java took 0.4 s for 8 KB and 6 s for 32 KB; 40 KB of INI took 4.4 s), so a block from data can't take more than about 0.4 s to highlight. Code people write is far shorter: of 32,800 code blocks in 46 MB of READMEs and documentation, 21 were longer. `CodeInline` isn't highlighted, so it takes no more than its size calls for.
+
+A render's code is highlighted while the sizes squared of its blocks add up to 8,192² (a block of 8,192 characters, or many smaller ones: 64 of 1,024, a thousand of 256), about 0.4 s for the whole render, in the order they render: its `CodeBlock`s and a Markdown's code blocks (see [Markdown](./markdown.md#markdown-from-data-what-it-cant-make-a-render-do)), always, and the `highlightCode()` calls the code of yours it runs makes while it runs it: its components, its template's wrappers, a Context Consumer's render prop, a custom tool's exporter (a render one of them starts has its own). A block past that is shown without colors, said once in the render, so a template of many blocks from data can't take more than one block (12 `CodeBlock`s of 8 KB of `$a` in Java took 4.9 s, a block each, and a template wrapper that highlighted 12 comments itself 4.6 s; they now take 0.4 s). Only code that's highlighted is counted: a block in a language with no grammar, shown without colors, isn't. `highlightCode()` called anywhere else highlights up to 8,192 characters each time: outside a render, and in an async component after an `await` (its code then runs outside the render's run, where the render it's in can't be told from another one running at the same time). For code from data, use `CodeBlock`, which is always counted. A language with no grammar is said once in a render (twenty at most).
+
+The work is the render's whichever copy of Elements its blocks are of: the `CodeBlock`s and `<Markdown>`s of a package's CommonJS build, in a template its ESM build renders, take theirs from the same render. A copy of another version of Elements (one that keeps it another way) can't read it: its blocks, in a render of this version's, each have their own, as before 0.3.
+
+### Themes
+
+`codeThemes.light` and `codeThemes.dark` are Elements' own. The others are ported from highlight.js's style sheets (their colors and font styles, as inline CSS; see `THIRD_PARTY_LICENSES.md` for their authors and licenses):
+
+| Name | From highlight.js | |
+|------|-------------------|--|
+| `github-light` | `github.css` | light, with a border |
+| `github-dark` | `github-dark.css` | dark |
+| `one-dark` | `atom-one-dark.css` | dark |
+| `monokai` | `monokai.css` | dark |
+| `dracula` | `base16/dracula.css` | dark |
+| `nord` | `nord.css` | dark |
+| `solarized-light` | `base16/solarized-light.css` | light, with a border |
+| `solarized-dark` | `base16/solarized-dark.css` | dark |
+
+```tsx
+<CodeBlock language="ts" theme="github-dark" lineNumbers>{source}</CodeBlock>
+```
+
+A theme of your own has the block's `background`, `color`, an optional `border`, the `lineNumbers` color, the `inline` colors CodeInline uses, and `tokens`: CSS declarations by highlight.js scope. A scope a theme doesn't name takes its parent's style (`title.function` takes `title`'s):
+
+```ts
+import { codeThemes, type CodeTheme } from "@unlayer/react-elements/code";
+
+const brand: CodeTheme = {
+  ...codeThemes.dark,
+  background: "#0b1020",
+  tokens: { ...codeThemes.dark.tokens, keyword: "color: #ff9e64; font-weight: bold", string: "color: #9ece6a" },
+};
+```
+
+## CodeInline
+
+Code in the text of a `Paragraph`, `Heading` or `Button`:
+
+```tsx
+<Paragraph>
+  Set <CodeInline>ACME_KEY</CodeInline> before you deploy.
+</Paragraph>
+```
+
+It's a `<code>` with inline styles: a monospace font a little smaller than the text, on the theme's inline background. Outlook shows it in Courier New, without the padding and corners. It's kept in the design's text. For an `html` prop or a Heading's `text`, `codeInline(code, { theme })` returns the same HTML:
+
+```tsx
+<Paragraph html={`Run ${codeInline("npm test")} before you push.`} />
+```
+
+## Agent rules
+
+- Import `CodeBlock`, `CodeInline`, `codeInline` from `@unlayer/react-elements/code`. Put `CodeBlock` in a `Column`, like any block.
+- Give `language` for colors. Pass code as a string (a template literal), not JSX.
+- For inline code in text, use `<CodeInline>` in the children, or `codeInline()` in an `html` prop. Don't hand-write `<code>` with classes.
diff --git a/packages/react/docs/codegen.md b/packages/react/docs/codegen.md
new file mode 100644
index 00000000..870c24ae
--- /dev/null
+++ b/packages/react/docs/codegen.md
@@ -0,0 +1,255 @@
+# Unlayer designs as Elements code
+
+Turn a template made in the Unlayer editor into Elements code: `designToElements()` takes the design JSON (what the editor's `saveDesign()` and `exportHtml()` give) and writes a `.tsx` module whose component renders back to the same design with `renderToJson()`. Edit the template in code from then on, render it with `renderToHtml()`, or open it in the editor again.
+
+```bash
+npm install @unlayer/react-elements
+```
+
+It comes from its own entry, `@unlayer/react-elements/codegen`, so the main entry doesn't carry it. It's pure (no React rendering, no Node APIs): it runs in a CLI, on a server and in a browser.
+
+## Convert a design
+
+```ts
+import { writeFile } from "node:fs/promises";
+import { designToElements } from "@unlayer/react-elements/codegen";
+
+const { code, warnings } = designToElements(design, { componentName: "OrderShipped" });
+await writeFile("OrderShipped.tsx", code);
+for (const warning of warnings) console.warn(warning);
+```
+
+`design` is the design object or its JSON text. The options:
+
+| Option | Default | |
+|--------|---------|--|
+| `displayMode` | the design's `displayMode` (`body.values.displayMode`, which `renderToJson()` writes), else `"email"` | The root: `"email"` (`<Email>`), `"web"` (`<Page>`), `"document"` (`<Document>`). A `"popup"` design is written as a `<Page>`. |
+| `componentName` | `"Template"` | The component's name: `export default function OrderShipped()`. |
+| `html` | | The design's exported HTML (`exportHtml()`'s `html`): blocks Elements has no component for are kept as `<Html>` blocks with theirs. |
+
+The result is `{ code, warnings }`: the module, and a line for each thing that didn't convert as it is, naming its row and column.
+
+In the browser, convert what the editor holds:
+
+```ts
+unlayer.exportHtml(({ design, html }) => {
+  const { code } = designToElements(design, { html });
+  // show it, or save it as a file
+});
+```
+
+The code imports from `@unlayer/react-elements` (and `@unlayer/react-elements/font` when the design uses a web font). It uses the automatic JSX runtime (`"jsx": "react-jsx"` in `tsconfig.json`, the default in Next.js and Vite projects), and it type-checks against the package's types.
+
+## Formatting
+
+The code is already written as prettier formats it (80 columns, two spaces, double quotes). To format it with your project's settings, `formatElements()` runs prettier 3 (an optional peer dependency) when it's installed, and gives the code back as it is when it isn't (or prettier 2 is):
+
+```ts
+import { designToElements, formatElements } from "@unlayer/react-elements/codegen";
+
+const code = await formatElements(designToElements(design).code, { printWidth: 100, singleQuote: true });
+```
+
+## What the code looks like
+
+A design from the editor (shortened: each block's settings at their defaults are left out here):
+
+```json
+{
+  "body": {
+    "values": {
+      "contentWidth": "600px",
+      "backgroundColor": "#f3f4f6",
+      "preheaderText": "Order #1001 has shipped",
+      "linkStyle": { "linkColor": "#4f46e5", "linkHoverColor": "#4338ca" }
+    },
+    "rows": [
+      {
+        "cells": [1],
+        "values": { "backgroundColor": "#ffffff", "padding": "24px 32px" },
+        "columns": [{ "values": {}, "contents": [
+          { "type": "image", "values": { "src": { "url": "https://cdn.example.com/logo.png", "width": 400, "height": 120, "autoWidth": false, "maxWidth": "30%" }, "altText": "Acme", "textAlign": "left" } }
+        ] }]
+      },
+      {
+        "cells": [2, 1],
+        "values": { "backgroundColor": "#ffffff" },
+        "columns": [
+          { "values": { "padding": "16px" }, "contents": [
+            { "type": "heading", "values": { "headingType": "h2", "fontWeight": 700, "fontSize": "26px", "color": "#111827", "text": "Your order is on its way" } },
+            { "type": "text", "values": { "fontSize": "15px", "color": "#4b5563", "lineHeight": "160%", "text": "<p>Track it any time from <a href=\"https://acme.com/orders\">your orders</a>.</p>", "_override": { "mobile": { "fontSize": "14px" } } } },
+            { "type": "button", "values": { "href": { "name": "web", "values": { "href": "https://acme.com/track/1001", "target": "_blank" } }, "buttonColors": { "backgroundColor": "#4f46e5", "hoverBackgroundColor": "#4338ca" }, "textAlign": "left", "padding": "12px 24px", "borderRadius": "6px", "text": "Track package" } }
+          ] },
+          { "values": { "backgroundColor": "#f3f4f6", "padding": "16px", "borderRadius": "8px" }, "contents": [
+            { "type": "image", "values": { "src": { "url": "https://cdn.example.com/box.png", "width": 600, "height": 600, "autoWidth": true, "maxWidth": "100%" }, "_override": { "mobile": { "hideMobile": true } } } }
+          ] }
+        ]
+      }
+    ]
+  }
+}
+```
+
+becomes:
+
+```tsx
+import {
+  Email,
+  Row,
+  Column,
+  ColumnLayouts,
+  Button,
+  Heading,
+  Image,
+  Paragraph,
+} from "@unlayer/react-elements";
+
+export default function OrderShipped() {
+  return (
+    <Email
+      previewText="Order #1001 has shipped"
+      contentWidth="600px"
+      backgroundColor="#f3f4f6"
+      linkStyle={{ linkColor: "#4f46e5", linkHoverColor: "#4338ca" }}
+    >
+      <Row
+        layout={ColumnLayouts.OneColumn}
+        backgroundColor="#ffffff"
+        padding="24px 32px"
+      >
+        <Column>
+          <Image
+            src={{
+              url: "https://cdn.example.com/logo.png",
+              width: 400,
+              height: 120,
+            }}
+            width="30%"
+            alt="Acme"
+            textAlign="left"
+          />
+        </Column>
+      </Row>
+      <Row layout={ColumnLayouts.TwoWideNarrow} backgroundColor="#ffffff">
+        <Column padding="16px">
+          <Heading
+            headingType="h2"
+            fontWeight={700}
+            fontSize="26px"
+            color="#111827"
+          >
+            Your order is on its way
+          </Heading>
+          <Paragraph
+            html='<p>Track it any time from <a href="https://acme.com/orders">your orders</a>.</p>'
+            fontSize="15px"
+            color="#4b5563"
+            lineHeight="160%"
+            mobile={{ fontSize: "14px" }}
+          />
+          <Button
+            href="https://acme.com/track/1001"
+            backgroundColor="#4f46e5"
+            hoverBackgroundColor="#4338ca"
+            textAlign="left"
+            padding="12px 24px"
+            borderRadius="6px"
+          >
+            Track package
+          </Button>
+        </Column>
+        <Column backgroundColor="#f3f4f6" padding="16px" borderRadius="8px">
+          <Image
+            src={{
+              url: "https://cdn.example.com/box.png",
+              width: 600,
+              height: 600,
+              autoWidth: true,
+            }}
+            hideOnMobile
+          />
+        </Column>
+      </Row>
+    </Email>
+  );
+}
+```
+
+## What's kept as props
+
+Each setting that differs from the component's default is a prop, written as you'd write it by hand:
+
+- **The root**: `<Email>`, `<Page>` or `<Document>`, with the body's `backgroundColor`, `contentWidth`, `contentAlign`, `textColor`, `fontFamily`, `linkStyle` (what differs), `textDirection`, `previewText` (the preheader) and a document's `documentSize` and `documentOrientation`. A web font (a font with a URL, as the editor's Google Fonts) gets a `<Font>` that loads it; where the body's font is what `<Font default>` writes, it's that. The fonts of its family are written without the URL, which the `<Font>` writes back on them in the design.
+- **Rows**: `<Row>` with `layout={ColumnLayouts.X}` where the design's cells are one of them, else `cells={[…]}`; `backgroundColor`, `columnsBackgroundColor`, `backgroundImage`, `padding` (the editor's, around the row) and phone padding as `mobile={{ padding }}`, `noStackMobile`, `hideOnMobile`, `hideOnDesktop`.
+- **Columns**: `backgroundColor`, `padding`, `borderRadius`, `border`, and phone padding as `mobile={{ padding }}`.
+- **Text**: a Paragraph's text as `html`, which renders as the design has it (a Paragraph's children are text, with inline JSX as rich text); a Heading's as children when it's plain text (words with nothing React would escape), else its `text`. A Heading's `headingType`; text styles as flat props.
+- **Buttons**: the text as children, the link as `href` (and `target` when it isn't a new tab), colors as `color`, `backgroundColor`, `hoverColor`, `hoverBackgroundColor`, a fixed width as `width`.
+- **Images**: `src` (a URL, or `{ url, width, height }` with the image's natural size, and `autoWidth: true` when its width is automatic), a fixed width as `width={32}` where its percent of the column is a whole pixel (as renderToJson writes a px width: Elements then renders exactly that), else `width="45.5%"`, `alt`, `action` (its link, as a web link to its URL).
+- **Menus, social icons, tables and videos**: `items` (or `menu`, which keeps the editor's keys for its items, each link a web link to its URL), `icons` (and `iconType`), `headers` and `data` (or `columns` and `rows` for an empty grid), `videoUrl` (or `video`, which keeps the editor's URL).
+- **Phone and visibility settings**: `mobile={{ … }}`, `hideOnMobile`, `hideOnDesktop`.
+
+A link is the URL the builder exports for it: the editor saves a link as an action (a web page, an email, a phone call, a text message) with templates its export fills in, so an email link is `href="mailto:support@example.com?subject=Help"` (its subject and body encoded as the builder encodes them, empty ones left out), a phone call `tel:…`, a text message `sms:…`. The builder opens such a URL as that action again. A link to a page section, or of a link type of your own, is written as its URL too, which the builder opens as a web link (said); a link with more than a URL holds (code it runs, a class, a download, a `rel` or `title`, data attributes, any other attribute) is written as the design has it (said too), and Elements' HTML doesn't write those as the builder does.
+
+A text block without a color of its own shows the body's text color in the editor; Elements always writes a color, so the code gives it that one. Likewise in a right-to-left design: the editor shows a text block without an alignment left-aligned, where Elements would align it right, so the code sets `textAlign="left"`.
+
+## What goes in `values`
+
+Anything a prop can't hold as it is goes in the component's `values` escape hatch, which the component merges under its props:
+
+- **Builder settings no prop sets**: an `anchor`, a display condition (which Elements' HTML writes around its row or block, as the builder's export does), `locked`, phone settings the `mobile` prop doesn't take. A row's or block's merge tag rule (`mergeTagGroup`, `mergeTagRule`) is kept too, and said: Elements' HTML applies only a Table's, where the render's `mergeTagState` names it (see the README's UnlayerProvider).
+- **Values a prop would change or can't type**: a number where the prop writes px (`fontSize: 14`), a `lineHeight` number, a numeric `fontWeight` string, a font with more than its label and value on a block (the editor's web fonts), a value outside what a prop's type takes (an alignment like `start`), and settings a component's props don't list (a table's `headerColor`).
+
+Every component's `values` takes as many of its values as you set, at any depth (the defaults fill in the rest), so the code writes them as they are:
+
+```tsx
+<Paragraph values={{ anchor: "intro" }}>Hello</Paragraph>
+```
+
+The type checks the keys, so a misspelled one is a type error, and takes any text, number or true/false in them, as the builder stores them (`lineHeight: 1.5`). Where a design holds a key the types don't have (one a newer builder writes, an image's `href`), the code writes that one object as the component's `values` type, so it still type-checks, and imports the type:
+
+```tsx
+import { …, Image, type ImageProps } from "@unlayer/react-elements";
+
+<Image
+  src="https://example.com/a.png"
+  values={
+    {
+      href: { name: "web", values: { href: "https://example.com" } },
+    } as unknown as ImageProps["values"]
+  }
+/>
+```
+
+An object or a list nested more than 16 deep in a value (no design the builder saves holds one nearly that deep) is written as its JSON, `JSON.parse('{"a":…}')`, which gives it back the same: written out, its indentation made the code grow with its depth squared. The code is written in time linear in the design's size: a 200×200 table in about 0.1 s.
+
+## What becomes `<Html>` or a TODO
+
+Blocks Elements has no component for (custom tools, forms, timers, carousels) are kept as `<Html>` blocks with their HTML when you pass the design's exported HTML (`html` option): each block's HTML is found by its id in it. They then open in the editor as HTML blocks, not as the tool they were. Without exported HTML, each is a `{/* TODO … */}` comment where it was, and a warning.
+
+## Warnings
+
+Each warning names where it is (`Row 2, column 1, block 3: …`). They say:
+
+- a block has no Elements component (kept as `<Html>`, or left out as a TODO);
+- the editor's Lexical `paragraph` block is a Paragraph, a `text` block with the same HTML;
+- a builder flag is `false` (`selectable`, `draggable`, `duplicatable`, `deletable`, `hideable`): renderToJson writes them as `true`;
+- an image's fixed width is in px: the design keeps it as the percent of its column it is;
+- a link is written as its URL where the builder opens that URL as a web link (a page section's), or as the design has it where a URL can't hold it (code it runs, a class, a download, a `rel` or `title`, data attributes, any other attribute);
+- a value comes back in the form Elements writes it, not as the design has it (a row's `noStackMobile` at the top of its values goes to its phone settings, where the exporters read it);
+- row, column and block ids aren't kept (the editor gives new ones), a document's headers and footers are left out, the design's schema version isn't this Elements' (open and save it in the editor first), a popup design is written as a `<Page>`.
+
+## The round trip
+
+`renderToJson()` of the generated component gives the design back, as the builder shows it. Codegen's tests check it over the examples, the demo's templates, designs the editor saved and random designs, each also type-checked. The comparison leaves aside:
+
+- `counters`, `schemaVersion`, node `id`s and `_meta.htmlID`/`htmlClassNames` (numbering, which the editor assigns);
+- a value missing and the same value at the builder's default (the builder fills defaults in; an image without `autoWidth` is sized automatically);
+- a text block's missing color and the body's text color;
+- `textJson` beside `text` (`text` is what the builder renders and exports), and a Lexical `paragraph` block as a `text` block with its HTML;
+- colors and font stacks written another way, links in their other shape (a URL string and `{ name: "web", values: { href } }`; an email, phone call or text message link and a web link to the URL it exports, which the builder opens as that link), paddings written shorter (`0px 0px` and `0px`), and a bare zero in a px length (`0 0 12px` and `0px 0px 12px`: renderToJson writes `0px`, as the design's schema types it);
+- device settings that are off (`hideMobile: false`) and empty ones, and a row's `noStackMobile` at the top of its values (read as its phone setting, where the exporters read it);
+- a font without its family's web font URL where another font of that family has it (the builder loads a family's web font for all its fonts, and a `<Font>` writes its URL on each).
+
+What doesn't come back: builder flags set to `false` (above), a px image width (it comes back as a percent), a link to a page section or of a link type of your own (it comes back as a web link to its URL), and blocks without an Elements component (they come back as HTML blocks, or not at all).
+
+The code is Elements code from then on: it doesn't bring back the React components, logic or data a template had before it was a design (a design made from Elements code comes back as its rows and blocks, with the values it rendered).
diff --git a/packages/react/docs/fonts.md b/packages/react/docs/fonts.md
new file mode 100644
index 00000000..99fb743c
--- /dev/null
+++ b/packages/react/docs/fonts.md
@@ -0,0 +1,62 @@
+# Web fonts in Elements
+
+Use a web font (Google Fonts, or a font file of your own) in an email, page or document. `<Font>` declares it once for the template: the document's head loads it, and with `default` it's the template's font, in the HTML and in the design the visual editor opens.
+
+```tsx
+import { Email, Row, Column, Heading, Paragraph } from "@unlayer/react-elements";
+import { Font } from "@unlayer/react-elements/font";
+
+<Email>
+  <Font
+    family="Inter"
+    url="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
+    fallback="Arial, Helvetica, sans-serif"
+    default
+  />
+  <Row>
+    <Column>
+      <Heading>Welcome aboard</Heading>
+      <Paragraph>Inter where the client loads web fonts, Arial where it doesn't.</Paragraph>
+    </Column>
+  </Row>
+</Email>
+```
+
+Place `<Font>` in the `Email`, `Page` or `Document` (beside the rows, or in a component of yours there). It renders nothing itself. It comes from its own entry, `@unlayer/react-elements/font`, so the main entry stays small.
+
+## Props
+
+| Prop | | |
+|------|--|--|
+| `family` | required | The family name your styles use. |
+| `url` | | A stylesheet that declares the font (a Google Fonts CSS URL): the head links it. Or the font file (`.woff2`, `.woff`, `.ttf`, `.otf`): the head declares it with `@font-face`. |
+| `format` | | The file's format (`woff2`, `woff`, `truetype`, `opentype`), when the URL doesn't end with it: the URL is then the file. |
+| `weight`, `style` | `400`, `normal` | What a font file is. Declare one `<Font>` per file (regular, bold, italic). |
+| `fallback` | `sans-serif` | The families shown where the web font doesn't load. |
+| `default` | | The template's font: the root's `fontFamily` (`'Inter', Arial, Helvetica, sans-serif`), unless the root sets its own. |
+
+## How it renders
+
+- **The head.** `renderToHtml()` writes the `<link>` or the `@font-face` in the document's head. `renderToHtmlParts()` gives them in `tags` (and in `head`).
+- **Outlook.** Outlook's desktop apps don't load web fonts, and a declared one can make them fall back to Times New Roman. In email, the font's tags are inside `<!--[if !mso]>` comments, so Outlook doesn't see them and shows the `fallback` fonts.
+- **The design.** With `default`, `renderToJson()` writes the family as the body's `fontFamily`, with the stylesheet's URL. For a family it doesn't know, the editor loads the font from that URL. For a Google font it already knows (Montserrat, Lato, …), the editor links its own stylesheet instead (`Montserrat:400,700`), so a weight that stylesheet doesn't have may show as another weight in the editor. To offer the font in the editor's font picker too, register it in the editor's `fonts.customFonts`.
+- **Text that sets its own font** (`<Paragraph fontFamily="'Inter', Arial, sans-serif">`) uses the declared font as well: `<Font>` without `default` loads it. In the design, `renderToJson()` writes a stylesheet's URL on each `fontFamily` of its family that has none (the body's and each block's, matched by the first family in the stack, as the editor matches fonts): that's where the editor keeps a web font, so the editor loads it too and exports its `<link>`. A font file's URL isn't written (the editor has no place for an `@font-face`).
+
+The family name and the URL can't end the tags or CSS they're written into: characters that could are left out of the name and percent-encoded in the URL.
+
+## A root's `fonts` prop
+
+A root's `fonts` (`<Email fonts={[{ url }]}>`) are stylesheets the document's head links. `renderToJson()` puts each one in the design as a `<Font>`'s: on the design's fonts of the families its URL names (`family=Inter` in a Google Fonts URL), so the editor loads it too. A URL that names no family a font in the design has (another service's stylesheet, or a family no `fontFamily` uses) stays in the HTML only, and `renderToJson()` says so once per render. `<Font family url>` names the family for any stylesheet.
+
+```tsx
+<Email
+  fonts={[{ url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" }]}
+  fontFamily={{ label: "Inter", value: "Inter, 'Helvetica Neue', Arial, sans-serif" }}
+>
+```
+
+## Agent rules
+
+- Import `Font` from `@unlayer/react-elements/font` and place it in the root, beside the rows.
+- Always give `fallback` with a web-safe font (Arial, Helvetica, Georgia, Verdana), which Outlook shows.
+- One `<Font default>` per template. Set other blocks' fonts with their `fontFamily` prop.
diff --git a/packages/react/docs/markdown.md b/packages/react/docs/markdown.md
new file mode 100644
index 00000000..0655068d
--- /dev/null
+++ b/packages/react/docs/markdown.md
@@ -0,0 +1,123 @@
+# Markdown in Elements
+
+Render Markdown (release notes, a support reply, AI-written copy) as Elements blocks. Headings become `Heading` blocks, images `Image` blocks, tables `Table` blocks, so the email, page or document renders like the rest of your template, and `renderToJson()` gives a design the visual editor can edit block by block, not one opaque HTML blob.
+
+```bash
+npm install @unlayer/react-elements
+```
+
+The parser ([marked](https://github.com/markedjs/marked)) is built into `@unlayer/react-elements/markdown`: there's nothing more to install, and the main entry never loads it.
+
+## Render Markdown
+
+Put `<Markdown>` in a `Column`, with the Markdown as its children or its `markdown` prop:
+
+```tsx
+import { Email, Row, Column, renderToHtml, renderToJson } from "@unlayer/react-elements";
+import { Markdown } from "@unlayer/react-elements/markdown";
+
+const notes = (
+  <Email>
+    <Row>
+      <Column>
+        <Markdown blocks={{ paragraph: { fontSize: "16px" } }}>{`
+          # Release notes
+
+          **Faster exports**, and \`renderToJson()\` keeps your [links](https://example.com/changelog).
+
+          - Smaller bundles
+          - [x] Dark code themes
+        `}</Markdown>
+      </Column>
+    </Row>
+  </Email>
+);
+
+renderToHtml(notes); // email HTML
+renderToJson(notes); // a Heading, a Paragraph, a Paragraph with the list
+```
+
+The indentation every line shares (a template literal's) is taken off first. Rendering stays synchronous.
+
+## What each element becomes
+
+| Markdown | Block |
+|----------|-------|
+| `#` … `######` headings | `Heading` (`h1` … `h6`, sizes 28px down to 14px, bold) |
+| Paragraphs | `Paragraph` |
+| Lists, task lists, nested lists | `Paragraph` holding the `<ul>`/`<ol>` |
+| Quotes | `Paragraph` holding the `<blockquote>` |
+| An image on a line of its own (also inside a link) | `Image` (its link as the image's link) |
+| `---` | `Divider` |
+| Tables | `Table` (in a list or a quote, an HTML table in its `Paragraph`, its cells written as a `Table`'s are) |
+| Fenced and indented code | `CodeBlock` (see [Code](./code.md)) |
+| Raw HTML, and anything else | `Html` |
+
+Inside text, bold, italics, strikethrough, links, images and line breaks are HTML in the block's text, and inline code is `codeInline()`'s email-safe `<code>`.
+
+## Style the blocks
+
+- `blocks`: props for each kind of block, over Markdown's own: `heading` for every heading, `h1` … `h6` for one level, `paragraph`, `list`, `blockquote`, `image`, `divider`, `table`, `code` (a CodeBlock's `theme`, `lineNumbers`, `fontSize` …) and `html`.
+- `styles`: inline CSS for markup in the text, by tag: `a`, `strong`, `em`, `del`, `img`, `ul`, `ol`, `li`, `blockquote`, `p`, `hr`. One you give replaces Markdown's default for that tag.
+- `inlineCode`: inline code's `theme` and `fontFamily`.
+- `breaks`: a line break in a paragraph is a break (as in comments on GitHub), not a space.
+
+```tsx
+<Markdown
+  blocks={{ heading: { color: "#0f172a" }, h1: { fontSize: "32px" }, code: { theme: "dark", lineNumbers: true } }}
+  styles={{ a: "color: #2563eb; text-decoration: none", blockquote: "margin: 0; padding-left: 16px; border-left: 4px solid #2563eb" }}
+>
+  {changelog}
+</Markdown>
+```
+
+## Links, images and raw HTML
+
+- Links get `target="_blank" rel="noopener"`. Pass `linkAttributes` (an object, or a function of the URL) for others, and `imageAttributes` for images in text. Event handlers (`on…`) and `href`/`src`/`style` aren't taken there.
+- `url(url, kind)` rewrites each link's and image's URL (`kind` is `"link"` or `"image"`): add tracking parameters, point images at a CDN. Return `undefined` to leave it out: a link's text stays, an image goes.
+- URLs that could run code are left out before that: links may be web, `mailto:` or `tel:` URLs, images web or `cid:` URLs or PNG, GIF, JPEG and WebP data URLs. A URL with no scheme (`/pricing`, `#faq`, `{{unsubscribe_url}}`) is kept.
+- Raw HTML (`html="sanitize"`, the default) keeps only the tags and attributes that display, read as a browser reads it and written again, so what's left out can't join what's around it into a tag:
+  - Tags: `p` `div` `span` `br` `hr` `wbr` `h1`–`h6` `a` `img` `b` `strong` `i` `em` `u` `s` `strike` `del` `ins` `sub` `sup` `small` `big` `font` `center` `mark` `abbr` `cite` `q` `dfn` `time` `code` `pre` `kbd` `samp` `var` `tt` `bdi` `bdo` `blockquote` `address` `ul` `ol` `li` `dl` `dt` `dd` `table` `caption` `colgroup` `col` `thead` `tbody` `tfoot` `tr` `th` `td` `section` `article` `header` `footer` `main` `nav` `aside` `figure` `figcaption` `details` `summary`.
+  - Attributes: `abbr` `align` `alt` `axis` `background` `bgcolor` `border` `cellpadding` `cellspacing` `char` `charoff` `cite` `class` `clear` `color` `colspan` `compact` `datetime` `dir` `face` `frame` `headers` `height` `href` `hreflang` `hspace` `id` `lang` `name` `noshade` `nowrap` `open` `rel` `reversed` `role` `rowspan` `rules` `scope` `size` `span` `src` `start` `style` `summary` `target` `title` `type` `valign` `value` `vspace` `width`, and `aria-*`. `href` and `cite` are kept with a web, `mailto:` or `tel:` URL (or one with no scheme), `src` and `background` with a web or `cid:` URL or a PNG, GIF, JPEG or WebP data URL, `style` without `url()`, `image()`, `image-set()`, `expression()`, `behavior`, `-moz-binding`, an old Internet Explorer's `progid:` filter, `javascript:` or a comment, and `class` without a name whose arbitrary value would be such CSS (`bg-[url(…)]`, `[background:url(…)]`, written as it is or hidden behind an HTML reference or a CSS escape), so the HTML and the design built from it hold none, whatever renders them later. Event handlers (`on…`), `data-*`, `srcset`, `srcdoc` and every other attribute are left out.
+  - Left out with what's in them: `script`, `style`, `iframe`, `frameset`, `noframes`, `noembed`, `noscript`, `object`, `applet`, `template`, `svg`, `math`, `select`, `textarea`, `title`, `xmp` and `plaintext`. Any other tag is left out alone, what's in it kept (`<form><b>Hi</b></form>` is `<b>Hi</b>`). Comments (Outlook's conditional ones too), doctypes, CDATA and a tag the HTML ends in are left out; a `<` that starts no tag is text.
+
+  Inside a `<Tailwind>`, the classes in its HTML become inline styles (see [Classes in HTML markup](./tailwind.md#classes-in-html-markup)), and what they give is checked again: a declaration a `style` couldn't have is left out, with a warning. The classes of your own markup (an `Html` block's) are inlined as you wrote them.
+
+  `html="escape"` shows raw HTML as text, and `html="drop"` leaves it out. For Markdown your users write, use `"escape"` or `"drop"`.
+
+`sanitizeHtml(html)` and `safeUrl(url, kind)` are exported for markup you build yourself.
+
+A table in a list or a quote is written as a top-level one's cells are: `html`, `url`, `linkAttributes`, `imageAttributes`, `styles` and `inlineCode` apply to its cells too.
+
+## Markdown from data: what it can't make a render do
+
+Markdown your users write can't make a render take more than its size calls for:
+
+- **Tables**: a render's Markdown tables can have, in all, as many cells as its Markdown has characters, or 1,000 where that's more (see **Many Markdowns**), each row counted as wide as the header (marked, the parser, fills a short row out to the header's width). A table whose cells are all written out (each one at least its `|`) always fits, however large. One that doesn't, a table whose short rows would be filled out past that (`|a|b|…|` and rows of `|`: a few kilobytes of them are millions of cells, and a `Table` writes about 350 bytes of HTML for each), fails as a component of yours fails: a `RenderError` naming the Markdown and where it is (`A table of 853 columns and 853 rows is 728462 cells, more than the Markdown can render: … (in <Markdown> at Row 1 › Column 1 › Markdown)`), or, with `onError: "omit"`, left out and listed while the Markdown's other blocks render (a table in a list or a quote, with that list or quote). See [Errors](../README.md#errors). The 1,000 are for tables with short rows: 20 columns and 50 rows is about 350 KB of HTML, more than three times what Gmail shows before it clips a message (102 KB). A line that could be a table's header is read as marked reads it from it and the line after (the delimiter row), as that's all that tells whether it starts a table: marked's rule read every line after them as rows first, so 100 KB of `a` over `-` (a heading underlined with one dash) took 14 s.
+- **Nesting**: quotes and lists nest 32 deep (counted together). Deeper, a quote's `>` and a list's marker are text, in the block they're in, and the rest of the email renders: nothing is left out. Emphasis, strikethrough and links nest 32 deep too (counted together): deeper, their delimiters are text.
+- **Inline syntax**: marked reads an emphasis, strikethrough, link, code or raw HTML opener by looking ahead for what closes it, to the end of the paragraph where nothing does, so a paragraph of openers nothing closes (`*a *a *a …`, `[a]([a](…`) took time growing with its size squared: a minute for 100 KB of `*a `. Elements gives each of marked's rules only as much of the text as it can look at, so it reads the same, and counts what it looks at: a render's Markdown can take, for its inline syntax, 32 steps for each of its characters, and about a million more (see **Many Markdowns**, below). That's far more than Markdown as people write it takes (31 MB of READMEs, changelogs and documentation, read alike, took at most 6 steps a character, and none more than half the million), and past it the rest of the inline syntax is text, said once in the render: nothing is left out (what marked reads in a link's text to see whether raw HTML in it runs past its `]`, from each `<`, is counted too: `[` and 25,000 unclosed `<!--` took 7 s), and the render takes about 0.2 s for 100 KB of the worst of those shapes, 0.9 s for 500 KB.
+- **Quotes and task lists**: marked reads a quote a chunk at a time (its `>` lines, up to a line without one that continues it), and after each chunk the lines left again, and where the chunk ends in a list, that list with all of them, so a quote with such a line every other line took time growing with its size squared: 100 KB of `>- a` and `b` lines took 6.6 s, and blocked the event loop as long. Elements counts what each quote takes marked to read, 32 steps for each character of the render's Markdown and about four million more, far more than Markdown as people write it takes (46 MB of READMEs, changelogs and documentation took at most a quarter of a million, and less than one step a character); past it, each quote ends at its first line without a `>`, which is read on outside it (said once in the render): nothing is left out, and 100 KB of the worst shapes renders in about 0.3 s, 500 KB in 1.5 s. marked also took each task item's `[ ]` out of the text left to read by looking for it from the Markdown's end, for each item again (400 KB of `- [ ]` items took 13 s); Elements does it as marked does, in time linear in the list. And a quote holding lists continued by such lines no longer takes the first characters of what follows it, as marked's did.
+- **Lines**: marked reads a list item's text a line at a time. Before each line, its setext heading rule read the rest of the item for an underline, and each line added to the text before it read all that text again; and to tell whether a paragraph's line starts a table, it read all the lines after it as the table's rows. So a list item of 200 KB of short lines took 6 s, and 100 KB of `|` over `-` 5 s. Elements tells where a heading can start from the text once, and whether a table starts from the line and the one after, as marked's rules tell them, and counts the lines added to an item's text with its quotes' work: past it, the rest of the item is text. marked also looks for reference links (`[a]`, `[a][b]`) from each `[` of a paragraph, as far as 999 steps; Elements doesn't where the Markdown defines none, or the paragraph has no `*`, `_` or `~` (nothing reads what that finds). The slowest shape is then a paragraph of escaped brackets (`\[`) with a `*` in a Markdown that defines a reference: 0.6 s for 100 KB, 6 s for 1 MB, growing with its size.
+- **Code**: highlight.js's time grows with a block's size squared on some code (100 KB of INI in a fence took 27 s), so a render's code blocks (its Markdown's, its `CodeBlock`s and the `highlightCode()` calls in its components, together) are highlighted while their sizes squared add up to 8,192²: a block of 8,192 characters, or many smaller ones (64 of 1,024 characters, a thousand of 256), about 0.4 s at the most for the whole render. A block past that is shown without colors (escaped, in the CodeBlock's own style), said once in the render; 21 of the 4,782 READMEs and documents with code in 46 MB hold more. See [Code](./code.md).
+- **Many Markdowns**: the work above, and the tables' cells, are the render's, for all the Markdown in it together (each `<Markdown>`, in any Row, and an async render's parts alike), as one Markdown of their size has, each Markdown adding its own share as it renders: a template of many blocks, a digest of user comments each a `<Markdown>` of its own, can't make a render take more than one Markdown of their size. Each `<Markdown>` had all of it: 12 comments of 8 KB of Java in fences took 4.8 s and 60 took 23.5 s (sync or async, blocking the event loop as long), 50 comments of 2 KB of `*a ` 1.7 s, and 562 comments of a sparse table (20 columns, 49 rows of `|`), 100 KB, were 197 MB of HTML and ran a 350 MB heap out of memory; in one render they now take 0.5 s, 0.4 s and 0.23 s, as many comments as there are, and the tables are 101 tables and 35 MB, as in one Markdown of them all (102), the rest too large. What's past the render's work takes the fallbacks above, so a comment late in the render can be shown with less of its syntax than it would alone (a quote ending at its first line without a `>`, code without colors, a table too large); Markdown as people write it takes far less: the 46 MB of READMEs and docs above, as 6,827 emails of 10 to 50 Markdowns each (each document split at its blank lines, and the short ones together), render as they did with a budget for each Markdown, but for the colors of code past 8,192² in 5 of them. Outside a render (a `<Markdown>` React renders in an app's preview), each Markdown has its own; so does each Markdown of another version of Elements than the one rendering (the CommonJS and ESM builds of one version share their render's).
+- **Size**: the rest grows with the Markdown, linearly, and so does the time a render takes. Each block is an Elements block, with the editor's markup around it (a few hundred bytes of HTML), so the HTML depends on how short the Markdown's blocks are: a kilobyte of it is about 10 KB of HTML in prose with links and bold text (a list is one block), 120 KB in quotes nested as deep as they go (32) around a few characters each, as each quote is a block in the one around it, and 100 to 390 KB where every few characters are a block of their own (a heading, a rule, a table row, a fence, a quote that ends at once, or, past the work its quotes can take, each quote and line without a `>`: an empty heading, `#` on a line of its own, is the most, 390 KB, and a quote holding only a fence's opening line, every other line, 276 KB). A render takes about 0.2 MB of memory per kilobyte in prose, and in those short blocks up to 3.5 MB for the HTML, 4.4 MB for the design JSON and 5.8 MB for the plain text (which is read from the HTML), on top of what the process holds already. Measured on Node 24 (the process's peak), sync and async alike, in one Markdown or many, for the worst of these shapes:
+
+  | 100 KB of Markdown | HTML (`renderToHtml`) | Design JSON (`renderToJson`) | Plain text (`renderToPlainText`) |
+  | --- | --- | --- | --- |
+  | Output | 0.5 to 38 MB of HTML | up to 23 MB | up to 0.4 MB |
+  | Time | 0.05 to 0.6 s (0.85 s where the slowest code and the slowest paragraph are together: 8 KB of Java's `$a` in a fence, then 92 KB of escaped brackets) | up to 0.7 s | up to 1.2 s |
+  | Peak memory | 90 to 420 MB | up to 510 MB | up to 650 MB |
+  | Heap it renders in | 192 MB (most shapes 128 MB) | 192 MB (most shapes 128 MB) | 320 MB (most shapes 128 MB) |
+  | 1 MB, for the worst shape | 392 MB of HTML, 6 s, 2.4 GB | 237 MB, 7 s, 3.4 GB | 12.5 s, 4.5 GB |
+
+  Cap what users can give: 100 KB is far more than an email holds (Gmail clips a message past 102 KB of HTML), and keeps a render's process under about 450 MB for its HTML, 550 MB for its design and 650 MB for its plain text, whatever its shape.
+
+## Plain text
+
+`renderToPlainText()` reads the blocks as it reads any template: headings in capitals (`h1`, `h2`), links as `text (url)` (a heading's too: `# [Pay invoice](https://example.com/pay)` is `PAY INVOICE (https://example.com/pay)`, its URL as written), list items with a dash, code with its indentation.
+
+## Agent rules
+
+- Put `<Markdown>` in a `Column`, never straight in a `Row` or the root.
+- Style blocks with `blocks` and markup with `styles`. Don't post-process the HTML.
+- For Markdown from users, pass `html="escape"` (or `"drop"`) and keep the default URL checks, and cap its size (100 KB, say: see [Markdown from data](#markdown-from-data-what-it-cant-make-a-render-do)). Render it with `onError: "omit"` (or a function) where a table too large for it should leave the rest of the email rendering.
diff --git a/packages/react/docs/migrate-from-react-email.md b/packages/react/docs/migrate-from-react-email.md
index 30f4322d..dcd8b464 100644
--- a/packages/react/docs/migrate-from-react-email.md
+++ b/packages/react/docs/migrate-from-react-email.md
@@ -62,7 +62,7 @@ npx @unlayer/migrate emails --out unlayer --design --report unlayer/report.json
 editor.loadDesign(await fetch("/unlayer/welcome.design.json").then((r) => r.json()));
 ```
 
-A template's web fonts (Google Fonts, `<Font>`) aren't part of the design JSON: the editor loads and exports a web font only when it's registered when the editor is created. The report lists each template's fonts in that shape, so pass them on:
+A template's Google Fonts are in the design JSON, as the stylesheet's URL on the fonts of their family, and the editor loads them from there; a font file of your own (`<Font webFont>` from another host) isn't. To load those in the editor, and to offer any of them in its font picker, register them when the editor is created. The report lists each template's fonts in that shape, so pass them on:
 
 ```js
 const report = await fetch("/unlayer/report.json").then((r) => r.json());
diff --git a/packages/react/docs/tailwind.md b/packages/react/docs/tailwind.md
new file mode 100644
index 00000000..c622938f
--- /dev/null
+++ b/packages/react/docs/tailwind.md
@@ -0,0 +1,245 @@
+# Tailwind CSS in Elements
+
+Style Elements components with Tailwind classes, as with React Email's `<Tailwind>`: `className="bg-gray-100 p-6 text-lg"` on an `Email`, `Row`, `Column`, `Button` or `Paragraph`. Each class becomes the component's own props, so the same template renders to email HTML, web pages and print documents, and `renderToJson()` gives a design the visual editor can still edit. Props you set yourself win over classes; a prop given as `undefined` or `null` (a wrapper of yours passing on an optional prop it wasn't given, or data's `null`, `color={props.color}`) isn't set, so the class's value stays.
+
+```bash
+npm install @unlayer/react-elements tailwindcss
+```
+
+Tailwind CSS 4 is an optional peer dependency. Only `@unlayer/react-elements/tailwind` loads it; the main entry never does. A project's own Tailwind CSS 3 stays installed (the peer dependency takes any version), but compiling with it fails, saying to upgrade it: `npm install tailwindcss@4`.
+
+## Render a template with classes
+
+Wrap the root in `<Tailwind>` (from `@unlayer/react-elements/tailwind`) and render with the async renderers, which that entry exports too (they're `@unlayer/react-elements/async`'s, the same functions). They compile the config first (asynchronously, and keep it compiled for the next render: see [`loadTailwind`](#keep-the-synchronous-renderers)), then render, resolving async components too (see [Async templates](./async.md)):
+
+```tsx
+import { Email, Row, Column, Heading, Paragraph, Button } from "@unlayer/react-elements";
+import { Tailwind, renderToHtml, renderToPlainText, renderToJson } from "@unlayer/react-elements/tailwind";
+
+const config = { theme: { extend: { colors: { brand: "#007291" } } } };
+
+const welcome = (name: string) => (
+  <Tailwind config={config}>
+    <Email className="bg-gray-100 font-sans max-w-[600px]" previewText="Welcome aboard">
+      <Row className="bg-white p-6 max-sm:p-4">
+        <Column>
+          <Heading className="text-3xl font-bold text-gray-900">Welcome, {name}</Heading>
+          <Paragraph className="text-lg text-gray-700 my-4 max-sm:text-base">Your account is ready.</Paragraph>
+          <Button href="https://example.com/start" className="bg-brand text-white px-6 py-3 rounded-lg hover:bg-blue-700">
+            Get started
+          </Button>
+        </Column>
+      </Row>
+    </Email>
+  </Tailwind>
+);
+
+const html = await renderToHtml(welcome("Ada"), { title: "Welcome" });
+const text = await renderToPlainText(welcome("Ada"));
+const design = await renderToJson(welcome("Ada")); // classes are props here, editable in the editor
+```
+
+`config` takes what React Email's `<Tailwind config>` takes (`theme`, `presets`, `plugins`). A `<Tailwind>` without `config` uses Tailwind's default theme. The four async renderers (`renderToHtml`, `renderToPlainText`, `renderToJson`, `renderToHtmlParts`) take the same arguments as the ones from `@unlayer/react-elements` and return Promises. They load the Tailwind compiler only for a template with a `<Tailwind>` (with a `config` or without one), from your `node_modules` when they run (so a bundle doesn't need `tailwindcss` unless you use it). Where there's no `node_modules` (an edge function), compile in the bundle instead: pass `tw={await loadTailwind(config)}` from `@unlayer/react-elements/tailwind`.
+
+## Keep the synchronous renderers
+
+The renderers from `@unlayer/react-elements` are synchronous, and Tailwind's compiler isn't. Compile once with `loadTailwind()` (at startup, or before rendering) and pass the result as `tw`:
+
+```tsx
+import { renderToHtml } from "@unlayer/react-elements";
+import { Tailwind, loadTailwind } from "@unlayer/react-elements/tailwind";
+
+const tw = await loadTailwind(config);
+
+renderToHtml(
+  <Tailwind tw={tw}>
+    <Email className="bg-gray-100">…</Email>
+  </Tailwind>
+);
+```
+
+`loadTailwind(config)` compiles a config and keeps it: a later call with the same config (one with equal contents, or the same object holding what it held) returns the same handle. A config is known by what it holds when it's called, so one changed in place (a brand color made another) is compiled as it is then, and a handle compiled before keeps the theme it was compiled from. It keeps the 50 configs used last (about 2.6 MB each, with the compiler it keeps ready: 50 take about 130 MB), so a server that renders each customer's theme doesn't keep every theme it has rendered: one used longer ago is compiled again when it's asked for, and a handle you hold keeps working. A handle that has read 2,000 different classes, or 256 KB of them (classes made from data, like `w-[123px]`, keep coming), takes a fresh compiler, one compiled with it and kept ready, at the next render that needs a class compiled, a synchronous one too, and compiles the next in the background, so reading a new class stays fast and memory stays bounded; classes read the same with either. A synchronous loop of renders (a batch job that never awaits) doesn't let the next one compile: past 8,000 different classes, or 1 MB of them, on one compiler with no fresh one ready, a render that needs a class compiled fails with a `RenderError` that says to yield between renders (`await new Promise((resolve) => setImmediate(resolve))`) or to use the async renderers, which wait for one. A render whose classes are compiled renders as before, and a loop with an `await` between renders keeps each one as fast as the first; a batch of a few thousand different classes doesn't get there. A render's classes (its components', those in their markup, a Heading's or a Button's `text` and rich text children included, a Markdown's) are compiled at once, before its components are rewritten, as each compile is Tailwind's whole stylesheet again: a template or markup from data with thousands of classes Tailwind hasn't compiled renders in time that grows with its size, not its square. A fresh compiler that fails to compile (out of memory, say) is asked for again by the next class that needs one, up to three times in a row; after that, the handle keeps the compiler it has. A config with functions (plugins) can't be known by what it holds: it's compiled once per object, so define it once, outside your components, and give a changed config as a new object. One whose other settings changed in place is compiled again, with a warning; one whose functions changed in place isn't, as a function can't be compared.
+
+A synchronous renderer given `<Tailwind config>` without `tw` throws, telling you to pass `tw` or use the async renderers (`@unlayer/react-elements/async`). It throws every time, even when the async renderers compiled that config before: otherwise a template would render in development and fail on a cold serverless start.
+
+## Where `<Tailwind>` goes
+
+- **Around the root** (`<Tailwind><Email>…</Email></Tailwind>`), or as the root's only child: classes on the root and everything in it.
+- **Around a template component** (`<Tailwind><Welcome /></Tailwind>`), or returned by one: the renderers find it.
+- **Around part of a template**, in a `Column` or a component of your own: classes on what's inside it. An inner `<Tailwind>` wins over an outer one.
+
+Outside a `<Tailwind>`, `className` is a class name on the component's element in the HTML, for a stylesheet of your own (see `style` and `className` in the [React API reference](../README.md)).
+
+## Classes in HTML markup
+
+Inside a `<Tailwind>`, `class` attributes in the markup of an `Html` block (and of a Paragraph's `html`, a Heading's or Button's `text`, the markup in a Paragraph's, Heading's or Button's children, and a `<Link>` or an `<a>` on its own in a Column) become inline styles, with the same conversions (hex colors, pixels, logical sides as physical ones), since email clients don't read a stylesheet's classes:
+
+```tsx
+<Html html={'<p class="text-sm text-gray-500 py-2">Sent by <a class="font-bold underline" href="https://example.com">Acme</a></p>'} />
+// <p style="padding-top: 8px; padding-bottom: 8px; font-size: 14px; line-height: 1.4286; color: #6a7282">Sent by <a href="https://example.com" style="font-weight: 700; text-decoration: underline">Acme</a></p>
+```
+
+An element's own `style` wins over its classes, as in the browser. Logical sides (`ps-*`, `border-e-*`, `rounded-ss-*`) are the element's: its own `dir` attribute, else the nearest element around it in the markup with one, else the root's direction (see [Right to left](#right-to-left)). Classes Tailwind doesn't know stay in the attribute, for a stylesheet of your own. Phone, breakpoint and hover variants (`max-sm:`, `sm:`, `hover:`) can't be inline styles: they're left out with a warning, as are classes that don't apply in an email. So is whether the element shows (`display`, `visibility`) where a phone or breakpoint variant changes it, as inline it would apply on that screen too: `hidden md:block` would hide the element on every screen, so neither is inlined, and the element shows everywhere, the safer mistake (a class a `hover:` variant changes is inlined: without hover, the element is as it says). Any other class is inlined as it is on every screen, and its variant, which can't apply, is said: `px-4 md:pl-2` gives `padding-left: 16px; padding-right: 16px`. In a `<Markdown>`'s HTML, which is sanitized, a class whose CSS could load or run something (`bg-[url(…)]`) isn't inlined either (see [Markdown](./markdown.md#links-images-and-raw-html)), and in any markup neither is a value that could end the `style` attribute or start a tag once read (`<`, `>`, or a CSS escape of one of them or of a quote) nor a URL a component can't take (`url(javascript:…)`). In markup, a font's names and a `url()` in double quotes are written in single ones. A component's props take a font's names in double quotes so too, but not a `url()`: a config's `backgroundImage: { hero: 'url("…")' }` gives `bg-hero` nothing on a Row, Column or Paragraph, said as a value that could end the HTML attribute, so write a config's `url()`s in single quotes (`'url(\'…\')'`, or `"url('…')"`). A Markdown table's cells are a Table's, HTML written as given, so a class in one isn't inlined. The markup is read as a browser reads it, and only its class attributes and the styles they give are written again: a tag's first `class` is its class (a browser ignores the others), and comments, the text of `<script>`, `<style>`, `<textarea>` and `<title>` elements, and what isn't a tag (a `class=` in another attribute's value, a `<` that starts no tag) are left as they are.
+
+## What each class becomes
+
+Colors come out as hex, or `rgba()` when translucent: Tailwind's `oklch()` palette and opacity modifiers (`bg-black/50`) are converted, since email clients don't read them. Sizes come out in pixels (`1rem` is `16px`), with Tailwind's variables and `calc()` worked out. A declaration whose variables come to more than 4,096 characters (variables that use each other over and over, as a class string from untrusted HTML can make them: Tailwind's own come to about 300) isn't inlined, and Elements says so, as for a variable that isn't set. A render reads its first 2,000 different classes, or 64 KB of them (its components' and their markup's, together; an app's own come to a few hundred, a few kilobytes): the others, as many as untrusted HTML can hold (a Markdown's, thousands in one `class` attribute), aren't compiled or inlined, and stay in markup as written. Elements says so once per render, naming the first one left out, so classes from data can't take more memory or time than that. `classNameToDeclarations()` reads a class string's first 2,000 the same way, listing the others as ignored.
+
+Tailwind isn't given a class of more than 512 characters, more than 8 variants (each part of a compound one counts: `group-not-hover:` is 3), more than 4 `&` in its variants, or brackets nested more than 8 deep. Past these, Tailwind's build takes time growing faster than a class's size, and it keeps every class it built: each `&` of an arbitrary variant is the whole selector again, chained compound variants (`group-group-…-hover:`) take time cubic in their number, and variants or brackets thousands deep overflow its stack, so one such class from data (a CMS's markup, one tenant's) slowed or failed every later render on a shared handle. Within them a class takes Tailwind about a millisecond, and an app's own are far within them (a radial gradient's arbitrary value is about 80 characters): a long data URL in a class (`bg-[url(data:image/png;base64,…)]`) is past them, so give it as a prop (`backgroundImage`) or a `style`. A class past them is left out, and stays in markup as written; Elements says so once per render, with the start of the first one. A class Tailwind's build throws for without keeping it (one it can't parse) is found among the classes built with it and left out, and the others are read as before.
+
+| Classes | Component | Prop |
+|---------|-----------|------|
+| `bg-*` | `Email`, `Page`, `Document` / `Row` / `Column` / `Button` | `backgroundColor` / `columnsBackgroundColor` (the content width, like a section in a container; pass `backgroundColor` yourself for a full-width band) / `backgroundColor` / `backgroundColor` |
+| `text-{color}` | root / `Paragraph`, `Heading`, `Button` / `Menu` | `textColor` / `color` / `textColor` |
+| `text-*`, `font-*`, `leading-*`, `tracking-*` | `Row`, `Column`, root | the text blocks' inside, as CSS inherits them (see [Text on a Row, a Column or the root](#text-on-a-row-a-column-or-the-root)); the root's color and font are the body's `textColor` and `fontFamily` too |
+| `font-{family}` | root, `Paragraph`, `Heading`, `Button`, `Menu` | `fontFamily` |
+| `text-{size}`, `leading-*`, `font-{weight}`, `tracking-*` | `Paragraph`, `Heading`, `Button`, `Menu` (no line height) | `fontSize`, `lineHeight` (a unitless one as a percentage), `fontWeight`, `letterSpacing` |
+| `text-left`, `text-center`, `text-right` | `Paragraph`, `Heading`, `Button`, `Image`, `Divider` / `Menu`, `Social` | `textAlign` / `align` (a Button's is where it sits in its column: its label stays centered) |
+| `p-*` | `Row`, `Column`, `Button` | `padding` (a Button's is inside it; a Row's insets its content, see below) |
+| `m-*` | `Column` | the space around it: its gutter (see [Card grids](#card-grids)) |
+| `p-*`, `m-*` | content blocks | `containerPadding`, margins and padding added up (where they can't be, as `5%` and `8px`, the padding stays and Elements says the margin is ignored); sides the classes don't set keep 10px |
+| `border*`, `border-{color}`, `border-dashed` | `Column`, `Button` / `Divider` | the `border` sides / its line (the top border); a width without a color class is in the text color, as Tailwind's `currentColor` |
+| `rounded-*` | `Column`, `Button` | `borderRadius` |
+| `w-*` | `Button`, `Image`, `Divider` / root | `width` (pixels or %; an Image's `w-auto` is its auto width) / `contentWidth` |
+| `max-w-*`, `min-w-*` | `Image` / root | its one width with `w-*`, as CSS sizes it: the max width caps the width, the min width wins over both (`w-[600px] max-w-[800px]` is 600px; see [Images](#images)) / `contentWidth` the same way (a `min-w-*` alone stays an inline style) |
+| `h-*` | `Image` | with an auto width (`h-12 w-auto`, or no `w-*`), the width the image's aspect ratio gives, where its size is given (`src={{ url, width, height }}`); see [Images](#images) |
+| `hover:bg-*`, `hover:text-*` | `Button` | `hoverBackgroundColor`, `hoverColor` (without them it keeps its colors on hover) |
+| `hidden` | `Row`, content blocks | `hideOnDesktop` and `hideOnMobile` |
+
+A Row's `p-*` classes inset its content, as in CSS: they go to its Columns' padding, added to theirs (top and bottom to each Column, left to the first and right to the last, or right to left the right to the first and the left to the last; on phones, where Columns stack, the sides to each, the top to the first and the bottom to the last), so a `bg-*` covers them. A Column's `m-*` classes are the space around it, between it and the next, added the same way. That's unlike the Row's `padding` prop, which is the editor's, around the row, outside its content background (see Row in the [React API reference](../README.md)).
+
+A Button's `text-left`, `text-center` and `text-right` are its `textAlign`: where the button sits in its column, as `text-center` on its container places an inline-block link in CSS. Its label stays centered in it, so on a fixed or full-width button (`w-48`, `w-full`) `text-left` doesn't move the label to the left, as it would in CSS.
+
+Logical classes (`ps-*`, `pe-*`, `ms-*`, `me-*`, `border-s-*`, `border-e-*`, `rounded-s-*`, `rounded-ss-*`, `text-start`, `text-end`) start on the left, or on the right in a right-to-left template: see [Right to left](#right-to-left).
+
+A border width without a color class (`border`, `border-t-2`) is drawn in the text color, as Tailwind's `currentColor` is (from its preflight): a Button's in its label's color, a Column's or a Divider's in its own text color class's, else the text color around it (a Row's, the root's, the body's default black).
+
+## Text on a Row, a Column or the root
+
+Text classes on a container style the text inside it, as CSS inherits them:
+
+```tsx
+<Row className="bg-indigo-600 text-white text-center">
+  <Column>
+    <Heading className="text-2xl font-bold">Big news</Heading>
+    <Paragraph>White and centered, like the heading.</Paragraph>
+    <Button className="bg-white text-indigo-600">Read more</Button>
+  </Column>
+</Row>
+```
+
+A `Row`'s, a `Column`'s or the root's text color, alignment, font family, size, weight, line height and letter spacing (and their phone and breakpoint variants, for size, line height and alignment) are the props of the text blocks inside that don't set their own, so the design holds them too. A block's own classes and props win, and the nearest container's classes over the ones around it (a Column's over its Row's, a Row's over the root's).
+
+- **Paragraph and Heading** take them all; a **Menu** its items' (`textColor`, `align`; it has no line height); a **Table** its header's, content's and footer's (`headerColor`, `contentColor`, `contentTextAlign`, …; the weight and line height its content's).
+- **Button**: its label's font, size, weight, letter spacing and line height, and its place (`text-center` centers it in its column), but not its color: its label sits on its own background, and email clients give a link its own color. **Social**: its place.
+- **The root's** color and font are the body's `textColor` and `fontFamily`, as the editor has them, and its color is its text blocks' too, so they show it.
+- **Markup** in a Column (an `Html` block, a component of your own that renders HTML) has no such props: it gets them as an inline style on its Column, for the HTML only, which Elements says.
+- **Case, italics and decoration** (`uppercase`, `italic`, `underline`) have no props on any block: they stay an inline style on the container, which the text inside takes as in CSS (HTML only, said).
+
+Without classes around them, blocks keep their defaults (a Paragraph's 14px, left-aligned), as the editor's do.
+
+## Right to left
+
+Tailwind's logical classes follow the template's direction, as CSS's logical properties do: in `<Email textDirection="rtl">` (or a root `config`, an `<UnlayerProvider>` or renderer option that sets `textDirection: "rtl"`), inline start is the right. Email clients read only physical sides, so each class becomes the side it is in that direction, in the HTML and the design alike:
+
+```tsx
+<Tailwind tw={tw}>
+  <Email textDirection="rtl">
+    <Row>
+      <Column className="ps-4 border-s-2 rounded-s-lg">
+        <Paragraph className="text-start">مرحبا</Paragraph>
+      </Column>
+    </Row>
+  </Email>
+</Tailwind>
+// The Column: padding="0px 16px 0px 0px", its border on the right, borderRadius="0px 8px 8px 0px"; the Paragraph
+// textAlign="right". Left to right, the same classes are the left.
+```
+
+- `ps-*`, `pe-*`, `ms-*`, `me-*`, `border-s-*` and `border-e-*` (widths and colors), `rounded-s-*`, `rounded-e-*` and the corners (`rounded-ss-*`, `rounded-se-*`, `rounded-es-*`, `rounded-ee-*`), and `text-start` and `text-end`, theirs or around them.
+- A Row's Columns are laid out from the right, so the Row's padding on the right is the first Column's and its padding on the left the last Column's, whether a class says `pe-*` or `pl-*`; stacked on phones, the first is still on top.
+- In an Html block's markup, an element's own `dir="rtl"` or `dir="ltr"` decides for it and what's in it, over the root's (`ltr` inside a right-to-left email keeps its logical sides on the left). An element whose end tag is left out (a `<p>` or `<li>` can be) is taken to hold what follows it, up to its parent's end tag.
+- `textDirection: "auto"` (and `dir="auto"`), which depends on the text, reads as left to right. Logical classes no prop takes (`start-*`, `float-start`, `scroll-ms-*`) stay as they are in an inline style, which the browser places by the direction.
+
+## Images
+
+An Image's `w-*` and `max-w-*` are its display width, which is one setting in the editor (a percentage of its column): `w-32` is 128px, `w-1/2` half its column, `max-w-xs` at most 320px, and `w-auto` (or `w-full`) its auto width, as wide as its column allows. A width with a max width is the smaller of the two, as the browser shows it: `w-full max-w-xs` is 320px (where the column is wider), in the HTML and the design; a min width (`min-w-*`) wins over both, as in CSS (`w-48 min-w-xs` is 320px). A percentage with pixels (`w-1/2 max-w-xs`) depends on the column's width, so the width is used and Elements says so. The root's `w-*`, `max-w-*` and `min-w-*` are its content width the same way, a percentage with pixels depending on the window's width. As the editor's width is a percentage, a fixed width is a share of the column's: where the column is narrower (a phone), the image is too.
+
+A height with an auto width, as a logo is sized (`h-12 w-auto`, or `h-12` alone), is the width the image's aspect ratio gives it, as in the browser: the editor's image has a width, and its height follows from that. That needs the image's size, so give it in `src`:
+
+```tsx
+<Image src={{ url: "https://example.com/logo.png", width: 400, height: 100 }} alt="Acme" className="h-12 w-auto max-sm:h-8" />
+```
+
+is 192px wide (48px tall), and 128px on phones (32px tall), in the HTML and the design; an email's image for Outlook has its `height` too. Without the size (`src="https://example.com/logo.png"`) the height is left out, so the image isn't stretched: it keeps its auto width, and Elements says the height needs the image's size. A height with a width (`w-32 h-12`, `size-12`, or a `width` prop) stays an inline style, in the HTML only, as before.
+
+## Card grids
+
+Cards in a panel, as you'd write them for the browser:
+
+```tsx
+<Row className="bg-white px-10 py-4">
+  <Column className="bg-zinc-50 rounded-lg p-4 mr-2">…</Column>
+  <Column className="bg-zinc-50 rounded-lg p-4 ml-2">…</Column>
+</Row>
+```
+
+render as in CSS: a white panel, the cards inset 40px from its sides and 16px from its top and bottom, 16px apart (`mr-2` and `ml-2`, 8px each). The editor has no margins, and a Column's padding is inside its own background, so each card's gutter is a border in the color around it (the Row's content background, here `bg-white`; else the Row's `backgroundColor`; else the body's): the Row's padding on its outer sides (the left of the first card, the right of the last, the top and bottom of each), its margins on the others. The card's `p-4` stays inside it. The design gets the same borders, so the editor shows the same grid. A Column without a background or border takes its gutter as padding, which looks the same.
+
+- **Phones**: the cards stack. Each keeps the Row's side padding (`max-sm:px-*` for another), the first its top padding and the last its bottom, and two cards are as far apart as on desktop (the one's right margin below it, the next's left margin above it). These are the cards' phone settings, which an email applies. A web page (`Page`) keeps the desktop gutters on phones, as the editor's web export has no phone border for a column; Elements says so. An email stacks its columns below its content width plus 20px and applies phone settings at 480px, so between the two the stacked cards still have their desktop gutters.
+- **Rounded corners** (`rounded-*`) grow by the gutters, as a corner's radius is its outer edge's, so they look the same. The editor's corners are circles, so a corner stays round only where its two gutters are equal (`p-2` on the Row with `mr-2` and `ml-2` on the cards: 8px on every side), on desktop and on phones alike. Where they differ (`px-10 py-4`: 40px at the side, 16px on top), the row's cards get square corners, and Elements says which gutters differ.
+- **What keeps the old behavior**: a card with a border of its own (`border`, `border-zinc-200`) on a side its gutter needs, or a color around the cards that isn't one solid color (a background image, a translucent `bg-black/50`), or a gutter that isn't in pixels. Then the Row's padding classes stay its padding, around it, its Columns' margins are ignored, and Elements says why. Outside a whole template (`renderRowToJson`), the body's color isn't known: give the Row a background.
+- **In the editor**, the gutters are the cards' borders: changing the Row's or the body's background later leaves them the old color, and a card's border setting holds its gutter.
+- **Widths**: the Row's columns are as wide as its `layout` (or its `cells`) says, gutters included, so with three cards the outer ones, which also hold the Row's side padding, are narrower than the middle one; in CSS (`flex-1`) they'd be equal.
+
+## Phones and breakpoints
+
+- **Phone variants** (`max-sm:`, `max-md:`, `max-[480px]:`) set the component's `mobile` prop: `max-sm:text-sm` is `mobile={{ fontSize: "14px" }}`, `max-sm:hidden` is `hideOnMobile`. Phones can change font size, line height, alignment, padding, a block's `containerPadding`, widths, a Column's border and its margins (its gutters, see [Card grids](#card-grids)), as the `mobile` prop can.
+- **Breakpoint variants** (`sm:`, `md:`, `lg:`) are the desktop value, and what's set without them is the phone one: `text-sm sm:text-lg` is `fontSize="18px"` with `mobile={{ fontSize: "14px" }}`. With no class for phones, phones get the component's default. `hidden sm:block` shows a block on desktops only.
+
+Elements switches to phone styles at 480px, not at Tailwind's breakpoints (`sm` is 640px): every phone and breakpoint variant maps to that one switch.
+
+## What's kept in HTML only, and what isn't kept
+
+A class no prop takes (`uppercase`, `italic`, `underline`, `shadow-*`, `opacity-*`, `grid`, a Paragraph's `bg-*`, an Image's `rounded-*`) is inlined as a style on the component's element, as its `style` prop is: the text of a Paragraph or Heading, a Button's link, an Image's `img`, a Row's container, a Column's cell, the root's body. The HTML shows it; the design for the visual editor can't hold it, so Elements says so, once per render. The component's own `style` wins over a class.
+
+A class that can't apply in an email is never dropped silently either: Elements logs a warning naming the component and the class, once per render.
+
+```
+[Unlayer] Button `display: grid` from class `grid` is kept in HTML (an inline style) but not in the design for the visual editor.
+[Unlayer] Paragraph ignores class `dark:text-white`: it applies only for @media (prefers-color-scheme: dark).
+[Unlayer] Paragraph has no phone setting for `color` (class `max-sm:text-red-500`).
+```
+
+Left out: dark mode, print, `focus:` and other states, group and peer variants, classes that style other elements (`space-y-*`), negative or automatic margins (`mx-auto`), phone, breakpoint and hover variants of what no prop takes (an inline style applies everywhere), and classes Tailwind doesn't know. So is a class with a bracket, a parenthesis or a quote left open, or a comment, in it (`[color:x(]`): it isn't a class Tailwind can read here, and it's never compiled, so it can't change how the classes after it read (Tailwind's compiler keeps every class it has compiled, for every render that uses the same `tw`). So is a class whose value could end the HTML attribute a prop is written in, or start a tag: one with a `"`, `<` or `>`, or a CSS escape of one of them or of `'` (`[color:'"><img …>']`, a class string from data), said as `it could end the HTML attribute it's written in, start a tag, or end its CSS`; a font family's names in double quotes (`font-["Open_Sans"]`) are written in single quotes, as CSS reads them the same. So is a class with a `url()` whose URL isn't a web one (`http:` or `https:`), a relative one, an inline attachment's (`cid:`, an image attached to the email: `bg-[url(cid:logo)]`), or a PNG, GIF, JPEG or WebP data URL, in base64 too (`bg-[url(data:image/png;base64,…)]`): `bg-[url(javascript:…)]` is left out however its characters are written (a CSS escape, an HTML reference), said as ``its URL isn't a web one (`http:` or `https:`), a relative one, an inline attachment's (`cid:`), or an image's data URL``. Use the component's props for what classes can't express.
+
+A plugin's function for a class's value (a `matchUtilities`, `matchComponents` or `matchVariant` callback) that throws for a class, gives what Tailwind's compiler can't compile (an `@apply` of a class or a variant Tailwind doesn't have, of the class itself or of nothing; a list holding `null`; a variant that isn't a selector or a list of them) or what isn't CSS (a string, a number, a function), or gives CSS that can't be read (a quote or a bracket left open, a comment, a `}`), never reaches Tailwind's compiler, which keeps every class it has compiled for every render with that `tw`: the class gives none of that function's CSS, and the component whose class it is fails, in every render that uses it, whatever CSS another utility gives the class and however the class holds the function (a variant inside `group-*`, `peer-*` or `not-*`, a variant named `@`, an important or negative class), with the plugin's error (or one saying what Tailwind can't compile) as a `RenderError` that names it (`onError: "omit"` leaves that component out and lists it); a class whose CSS can't be read is left out and said, as one Tailwind can't read here. One that gives nothing (`undefined`, `null` or `false`, as `if (!ok) return;` or `ok && {…}` does for a value it doesn't take) gives the class no CSS: it's a class Tailwind doesn't have, said as one, in every render. An `@apply` in what a function gives is read as Tailwind reads it, its classes' declarations where it is. The render's other classes, and other renders with the same `tw` (another tenant's), read as they do; the class a plugin's error is for is found by the function's name, the value Tailwind gave it (an arbitrary one as Tailwind reads it: `brand-(--x)` is given `var(--x)`) and its modifier, and one Elements can't tie to a class of the compile it was in fails that render only, where it reads a class of that compile of the function's name (else one with no CSS, else any of it): never another render's, an app's own `brand-blue` beside a user's `brand-(--x)`.
+
+Should Tailwind still give CSS Elements can't read for some other class (none is known to: a value of the config's own theme with a quote left open, say), the classes compiled with it are left out, the classes read before keep reading as they did, and the handle compiles a fresh compiler in the background, as nothing more can be compiled on that one. Till it's ready, a render that needs a class not yet compiled fails, with a `RenderError` that says to render again (the async renderers wait for the fresh compiler instead, and where their own class was the one Tailwind couldn't read, render again once it's ready), so no render goes out without a class's styles; renders whose classes were compiled before render as they did. On the fresh compiler, each class of that compile is compiled alone first (100 of them on one compiler: past that, the others wait for the next fresh compiler, which the handle compiles then, since a compile of a render's classes can hold thousands, each compiled alone the whole stylesheet again), and the one Elements couldn't read, and only it, is never compiled again. If the fresh compiler fails three times in a row, a render that needs a new class with that `tw` fails, saying so with Tailwind's error.
+
+## Inspect what a class gives
+
+`classNameToDeclarations(tw, className)` returns the declarations Elements reads, already converted for email, with when each applies (`always`, `phone`, `desktop`, `hover`) and the classes it ignores with why:
+
+```ts
+import { loadTailwind, classNameToDeclarations } from "@unlayer/react-elements/tailwind";
+
+const tw = await loadTailwind();
+classNameToDeclarations(tw, "bg-gray-100 max-sm:p-2 dark:bg-black");
+// { declarations: [
+//     { className: "bg-gray-100", property: "background-color", value: "#f3f4f6", when: "always", important: false },
+//     { className: "max-sm:p-2", property: "padding", value: "8px", when: "phone", important: false } ],
+//   ignored: [{ className: "dark:bg-black", reason: "it applies only for @media (prefers-color-scheme: dark)" }] }
+```
+
+## Agent rules
+
+- With `<Tailwind config>`, render with the async renderers from `@unlayer/react-elements/async` and `await` them. To keep the synchronous renderers, call `await loadTailwind(config)` once and pass `<Tailwind tw={tw}>`.
+- Put `<Tailwind>` around the root so the root's classes apply too. Keep the structure `root > Row > Column > content`: classes don't change it.
+- Put the text styles a section shares on its Row or Column (`text-white text-center`), as in CSS: the text blocks inside take them, unless they set their own. To place a Button, use `text-center` on it or its container; its label is always centered.
+- For cards in a panel, put the panel's background and padding on the Row (`bg-white px-6 py-4`) and margins on the cards (`mr-2`, `ml-2`), as in CSS. To keep `rounded-*` corners, make the gutters at each corner equal (`p-2` with `mr-2`/`ml-2`).
+- Read the warnings after rendering. Replace each ignored class with the component's prop, or with markup in a `Paragraph`'s `html` (`<em>`, `<u>`) for text styles no prop has. A class kept in HTML only is fine for HTML; for a design someone edits in the visual editor, prefer a prop.
+- A prop and a class for the same thing: the prop wins (one given as `undefined` or `null` doesn't count). Don't pass both.
+- Tailwind's `sm:` is a breakpoint, not a phone variant: use `max-sm:` for phone-only styles.
+
+See the [React API reference](../README.md) for each component's props, and [Migrate from React Email](./migrate-from-react-email.md) to convert whole React Email templates instead.
diff --git a/packages/react/docs/visual-editing.md b/packages/react/docs/visual-editing.md
index 74d49ed6..a2e333e7 100644
--- a/packages/react/docs/visual-editing.md
+++ b/packages/react/docs/visual-editing.md
@@ -29,7 +29,7 @@ await mkdir("output", { recursive: true });
 await writeFile("output/design.json", JSON.stringify(design, null, 2));
 ```
 
-Expected: a serializable object with `body.rows`, `body.values`, `counters`, and `schemaVersion`, saved as `output/design.json`. It contains design structure, not HTML. For the full invoice used in the other guides, [render-email.ts](../../../examples/content-workflows/src/render-email.ts) writes `output/invoice.design.json`.
+Expected: a serializable object with `body.rows`, `body.values`, `counters`, and `schemaVersion`, saved as `output/design.json`. It contains design structure, not HTML. `body.values.displayMode` is the mode the template renders in (`email` for an `Email`, `web` for a `Page`, `document` for a `Document`). What the editor exports for the design is what `renderToHtml()` renders for the template. For the full invoice used in the other guides, [render-email.ts](../../../examples/content-workflows/src/render-email.ts) writes `output/invoice.design.json`.
 
 ## Load and edit the invoice
 
@@ -103,10 +103,10 @@ Expected: the editor loads the invoice after `editor:ready`; after `design:loade
 ## Constraints
 
 - `renderToJson()` is synchronous. It renders the template once with React, as `renderToHtml()` does, so hooks, Context, Fragments and your own layout components work, and the design keeps the Rows, Columns and blocks they render. Root wrappers are unwrapped, including `memo`, `forwardRef` and wrappers that use hooks; a class component as the root is not.
-- A component that is async, suspends or throws is left out with a console message, and the rest renders: fetch data before building the tree, as in the [shared invoice factory](../../../examples/content-workflows/src/invoice.tsx). A component of your own that returns plain markup (a `<div>`) in a Column is kept as it is: in the HTML, and in the design as an HTML block (edited as HTML in the editor, not as text or images). Outside a Row, the design leaves it out with a console message naming it: put it in a Column, or use an `<Html>` block for raw HTML.
+- A component that is async, suspends or throws fails the render, naming it and where it is (or is left out of the HTML and the design alike with `onError: "omit"`): fetch data before building the tree, as in the [shared invoice factory](../../../examples/content-workflows/src/invoice.tsx). A component of your own that returns plain markup (a `<div>`) in a Column is kept as it is: in the HTML, and in the design as an HTML block (edited as HTML in the editor, not as text or images). Outside a Row, the design leaves it out with a console message naming it: put it in a Column, or use an `<Html>` block for raw HTML.
 - A hand-written content wrapper is not a registered Elements item. Custom items must use [the custom tool API](../README.md#custom-tools) and need matching tool registration in the hosted editor.
-- Match the editor's `displayMode` to the design (`email` in this example). Preserve the generated schema version and counters rather than constructing guessed design JSON. Editor support for individual tools/features depends on its version and project configuration.
-- Exported JSON preserves design content and settings; it does not preserve React functions, business logic, hooks, or event handlers. There is no JSON-to-JSX or JSON-to-React renderer in this package. `renderToHtml()` takes a React element, not saved design JSON. Use the editor's `exportHtml()` for the edited design's HTML.
+- Match the editor's `displayMode` to the design's `body.values.displayMode` (`email` in this example). Preserve the generated schema version and counters rather than constructing guessed design JSON. Editor support for individual tools/features depends on its version and project configuration.
+- Exported JSON preserves design content and settings; it does not preserve React functions, business logic, hooks, or event handlers. `renderToHtml()` takes a React element, not saved design JSON. Use the editor's `exportHtml()` for the edited design's HTML, or turn the edited design into Elements code with `designToElements()` from `@unlayer/react-elements/codegen` ([guide](./codegen.md)): the code is the design's rows and blocks, not your original components and logic.
 - After handing a design to an editor user, persist their latest JSON. Regenerating it from the original React source and reloading it would overwrite visual changes. Keep the template source and saved edited designs as separate application records.
 
 For agent-authored templates, start with the [task selection guide](./README.md) and validate generated code with the same runnable example checks. For delivery, pass the edited HTML to your [email provider](./email-providers.md) and generate/update the plain-text alternative to match those edits.
diff --git a/packages/react/fizz-cleanup/package.json b/packages/react/fizz-cleanup/package.json
new file mode 100644
index 00000000..3ce16a0b
--- /dev/null
+++ b/packages/react/fizz-cleanup/package.json
@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fizz-cleanup.noop.cjs",
+  "module": "../dist/fizz-cleanup.noop.js",
+  "sideEffects": false
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index 106ecadc..ea1ed76e 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unlayer/react-elements",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React components for transactional emails, landing pages, invoices and PDFs: email-safe HTML, responsive web HTML, and print-ready PDF HTML from one component tree.",
   "license": "MIT",
   "author": "Unlayer",
@@ -27,10 +27,23 @@
     "landing-page",
     "nextjs"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/tailwind.js",
+    "./dist/tailwind.cjs"
+  ],
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "tailwindcss": "*",
+    "prettier": "*"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    },
+    "prettier": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@unlayer/exporters": "catalog:",
@@ -41,17 +54,146 @@
   "module": "./dist/index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./tailwind": {
+      "import": {
+        "types": "./dist/tailwind.d.ts",
+        "default": "./dist/tailwind.js"
+      },
+      "require": {
+        "types": "./dist/tailwind.d.cts",
+        "default": "./dist/tailwind.cjs"
+      }
+    },
+    "./font": {
+      "import": {
+        "types": "./dist/font.d.ts",
+        "default": "./dist/font.js"
+      },
+      "require": {
+        "types": "./dist/font.d.cts",
+        "default": "./dist/font.cjs"
+      }
+    },
+    "./head": {
+      "import": {
+        "types": "./dist/head.d.ts",
+        "default": "./dist/head.js"
+      },
+      "require": {
+        "types": "./dist/head.d.cts",
+        "default": "./dist/head.cjs"
+      }
+    },
+    "./code": {
+      "import": {
+        "types": "./dist/code.d.ts",
+        "default": "./dist/code.js"
+      },
+      "require": {
+        "types": "./dist/code.d.cts",
+        "default": "./dist/code.cjs"
+      }
+    },
+    "./markdown": {
+      "import": {
+        "types": "./dist/markdown.d.ts",
+        "default": "./dist/markdown.js"
+      },
+      "require": {
+        "types": "./dist/markdown.d.cts",
+        "default": "./dist/markdown.cjs"
+      }
+    },
+    "./async": {
+      "import": {
+        "types": "./dist/async.d.ts",
+        "default": "./dist/async.js"
+      },
+      "require": {
+        "types": "./dist/async.d.cts",
+        "default": "./dist/async.cjs"
+      }
+    },
+    "./codegen": {
+      "import": {
+        "types": "./dist/codegen.d.ts",
+        "default": "./dist/codegen.js"
+      },
+      "require": {
+        "types": "./dist/codegen.d.cts",
+        "default": "./dist/codegen.cjs"
+      }
+    },
+    "./fizz-cleanup": {
+      "react-server": {
+        "import": "./dist/fizz-cleanup.noop.js",
+        "default": "./dist/fizz-cleanup.noop.cjs"
+      },
+      "deno": "./dist/fizz-cleanup.node.cjs",
+      "browser": {
+        "import": "./dist/fizz-cleanup.noop.js",
+        "default": "./dist/fizz-cleanup.noop.cjs"
+      },
+      "worker": {
+        "import": "./dist/fizz-cleanup.noop.js",
+        "default": "./dist/fizz-cleanup.noop.cjs"
+      },
+      "workerd": {
+        "import": "./dist/fizz-cleanup.noop.js",
+        "default": "./dist/fizz-cleanup.noop.cjs"
+      },
+      "edge-light": {
+        "import": "./dist/fizz-cleanup.noop.js",
+        "default": "./dist/fizz-cleanup.noop.cjs"
+      },
+      "default": {
+        "import": "./dist/fizz-cleanup.node.js",
+        "default": "./dist/fizz-cleanup.node.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "tailwind": [
+        "./dist/tailwind.d.ts"
+      ],
+      "font": [
+        "./dist/font.d.ts"
+      ],
+      "head": [
+        "./dist/head.d.ts"
+      ],
+      "code": [
+        "./dist/code.d.ts"
+      ],
+      "markdown": [
+        "./dist/markdown.d.ts"
+      ],
+      "async": [
+        "./dist/async.d.ts"
+      ],
+      "codegen": [
+        "./dist/codegen.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
+    "fizz-cleanup",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "THIRD_PARTY_LICENSES.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -85,10 +227,14 @@
     "@vitejs/plugin-react": "^4.2.0",
     "@vitest/coverage-v8": "^3.2.4",
     "concurrently": "9.2.1",
+    "highlight.js": "11.12.0",
     "http-server": "14.1.1",
     "jsdom": "^24.1.3",
+    "marked": "18.0.14",
     "playwright": "1.60.0",
+    "prettier": "3.6.2",
     "storybook": "^9.1.1",
+    "tailwindcss": "4.2.1",
     "tsup": "^8.0.1",
     "vitest": "^3.2.4",
     "wait-on": "9.0.10"
diff --git a/packages/react/scripts/browser-e2e.mjs b/packages/react/scripts/browser-e2e.mjs
index 8715587d..a785b4d5 100644
--- a/packages/react/scripts/browser-e2e.mjs
+++ b/packages/react/scripts/browser-e2e.mjs
@@ -9,12 +9,12 @@
 // BUILT dist (the artifact we ship), loads each one into headless Chromium,
 // and asserts on the browser's computed output:
 //
-//   1. Document contract — every <p> computes to zero margins (all four:
-//      margin-top/bottom and margin-block-start/end; browsers default <p>
-//      to 1em block margins and email clients strip <head> resets, so the
-//      inline reset must win), exactly one <body> in the parsed DOM,
-//      <title> parsed, head <style> applied, links render, no console or
-//      page errors.
+//   1. Document contract — every Paragraph renders, every <p> computes to
+//      zero margins (all four: margin-top/bottom and margin-block-start/end;
+//      browsers default <p> to 1em block margins: the head's base stylesheet
+//      resets them, as the editor's export does), exactly one <body> in the
+//      parsed DOM, <title> parsed, head <style> applied, links render, no
+//      console or page errors.
 //   2. Responsive — a three-column row lays out side-by-side at desktop
 //      width and stacks to full-width columns below the mobile breakpoint
 //      (web: 480px device breakpoint; email: contentWidth + 20px), in both
@@ -107,6 +107,7 @@ function tree(Root) {
         h(Heading, null, "Browser E2E"),
         h(Paragraph, null, "First paragraph."),
         h(Paragraph, null, "Second paragraph."),
+        h(Paragraph, { html: "<p>Markup paragraph one.</p><p>Markup paragraph two.</p>" }),
         h(Image, { src: IMAGE_SRC, width: `${IMAGE_DISPLAY_WIDTH}px`, alt: "Product logo" }),
         h(Divider, null),
         h(Button, BUTTON_PROPS, "Call to action")
@@ -151,6 +152,7 @@ async function inspect(page, html) {
   const facts = await page.evaluate(() => {
     const ps = [...document.querySelectorAll("p")];
     return {
+      blockCount: document.querySelectorAll('[id^="u_content_paragraph_"]').length,
       title: document.title,
       bodyCount: document.querySelectorAll("body").length,
       headStyleCount: document.head.querySelectorAll("style").length,
@@ -182,7 +184,8 @@ async function checkDocuments(page) {
     if (facts.bodyCount !== 1) problems.push(`${facts.bodyCount} <body> elements in the DOM, expected exactly 1`);
     if (facts.headStyleCount < 1) problems.push("no <style> in <head>");
     if (facts.linkCount < 1) problems.push("no rendered links");
-    if (facts.paragraphCount < 5) problems.push(`only ${facts.paragraphCount} <p> elements rendered, expected >= 5`);
+    if (facts.blockCount < 6) problems.push(`only ${facts.blockCount} Paragraphs rendered, expected >= 6`);
+    if (facts.paragraphCount < 2) problems.push(`only ${facts.paragraphCount} <p> elements rendered, expected >= 2`);
     for (const p of facts.badParagraphs) {
       problems.push(`<p> "${p.text}" has non-zero computed margins: ${p.margins.join(", ")}`);
     }
@@ -190,7 +193,7 @@ async function checkDocuments(page) {
     if (facts.pageErrors.length) problems.push(`page errors: ${facts.pageErrors.join(" | ")}`);
 
     if (problems.length) fail(`document:${name}`, problems);
-    else pass(`document:${name}`, `1 body, ${facts.paragraphCount} paragraphs at 0px margins, title + styles + links OK`);
+    else pass(`document:${name}`, `1 body, ${facts.blockCount} Paragraphs, ${facts.paragraphCount} <p> at 0px margins, title + styles + links OK`);
   }
 }
 
@@ -312,10 +315,10 @@ async function checkRtl(page) {
 
   const facts = await page.evaluate(() => ({
     htmlDir: document.documentElement.getAttribute("dir"),
-    paragraphDirection: getComputedStyle(document.querySelector("p")).direction,
+    paragraphDirection: getComputedStyle(document.querySelector('[id^="u_content_paragraph_"] div.v-color')).direction,
   }));
   if (facts.htmlDir !== "rtl") problems.push(`<html dir> is ${JSON.stringify(facts.htmlDir)}, expected "rtl"`);
-  if (facts.paragraphDirection !== "rtl") problems.push(`computed <p> direction is ${facts.paragraphDirection}, expected rtl`);
+  if (facts.paragraphDirection !== "rtl") problems.push(`computed Paragraph direction is ${facts.paragraphDirection}, expected rtl`);
 
   if (problems.length) fail("rtl", problems);
   else pass("rtl", "textDirection propagates to computed rtl direction");
@@ -343,7 +346,7 @@ async function collectStyleFacts(page) {
       const columns = [...document.querySelectorAll("#u_row_1 .u-col")].map((c) => Math.round(c.getBoundingClientRect().width));
       return {
         heading: pick(document.querySelector("h1"), textProps),
-        firstParagraph: pick(document.querySelector("#u_row_2 p"), textProps),
+        firstParagraph: pick(document.querySelector('#u_row_2 [id^="u_content_paragraph_"] div.v-color'), textProps),
         button: pick(document.querySelector('a[href="https://example.com"]'), [...textProps, ...boxProps]),
         columnWidths: columns,
       };
@@ -536,7 +539,7 @@ async function checkPrint(page) {
     const rect = heading?.getBoundingClientRect();
     return {
       headingVisible: !!rect && rect.width > 0 && rect.height > 0,
-      paragraphCount: document.querySelectorAll("p").length,
+      paragraphCount: document.querySelectorAll('[id^="u_content_paragraph_"]').length,
     };
   });
   await page.emulateMedia({ media: "screen" });
diff --git a/packages/react/scripts/storybook-visual-baseline.json b/packages/react/scripts/storybook-visual-baseline.json
index 954861cd..bec7764a 100644
--- a/packages/react/scripts/storybook-visual-baseline.json
+++ b/packages/react/scripts/storybook-visual-baseline.json
@@ -13,7 +13,7 @@
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:4px;paddingRight:40px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "table.u_content_image|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:520px;verticalAlign:middle;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:500px;verticalAlign:middle;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:40px;paddingBottom:4px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(34, 34, 34);fontSize:26px;fontWeight:700;fontFamily:Circular, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:33.8px;textAlign:left;direction:ltr;borderTopColor:rgb(34, 34, 34);borderLeftColor:rgb(34, 34, 34);verticalAlign:baseline;overflowWrap:break-word",
   "table.u_content_paragraph|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
@@ -89,7 +89,7 @@
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "table.u_content_image|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:middle;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:580px;verticalAlign:middle;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingRight:40px;paddingBottom:4px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "table.u_content_paragraph|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 92, 56);fontSize:12px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:16.8px;textAlign:left;letterSpacing:1.4px;direction:ltr;borderTopColor:rgb(255, 92, 56);borderLeftColor:rgb(255, 92, 56);verticalAlign:baseline;overflowWrap:break-word",
@@ -111,7 +111,7 @@
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 107, 118);fontSize:11px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:15.4px;textAlign:left;letterSpacing:1.1px;direction:ltr;borderTopColor:rgb(107, 107, 118);borderLeftColor:rgb(107, 107, 118);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:40px;paddingBottom:28px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:52px;verticalAlign:top;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:48px;verticalAlign:top;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 107, 118);fontSize:13px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:18.2px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 107, 118);borderLeftColor:rgb(107, 107, 118);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:18px;paddingRight:40px;paddingBottom:40px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 107, 118);fontSize:12px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:19.2px;textAlign:center;direction:ltr;borderTopColor:rgb(107, 107, 118);borderLeftColor:rgb(107, 107, 118);verticalAlign:baseline;overflowWrap:break-word",
@@ -184,7 +184,7 @@
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(63, 63, 70);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif;lineHeight:25.6px;textAlign:left;direction:ltr;borderTopColor:rgb(63, 63, 70);borderLeftColor:rgb(63, 63, 70);verticalAlign:baseline;overflowWrap:break-word",
   "table.u_content_image|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:504px;verticalAlign:middle;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:484px;verticalAlign:middle;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(26, 26, 26);fontSize:24px;fontWeight:700;fontFamily:Georgia, Times New Roman, Times, serif;lineHeight:30px;textAlign:left;direction:ltr;borderTopColor:rgb(26, 26, 26);borderLeftColor:rgb(26, 26, 26);verticalAlign:baseline;overflowWrap:break-word",
   "a|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif;lineHeight:25.6px;textAlign:left;textDecorationLine:underline;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:20px;paddingRight:48px;paddingBottom:20px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
@@ -225,7 +225,7 @@
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(17, 17, 17);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:8px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "table.u_content_image|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:middle;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:580px;verticalAlign:middle;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(17, 17, 17);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:40px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:48px;fontWeight:800;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:50.4px;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "table.u_content_paragraph|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
@@ -252,7 +252,7 @@
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 111, 118);fontSize:16px;fontWeight:400;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:25.6px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 111, 118);borderLeftColor:rgb(107, 111, 118);verticalAlign:baseline;overflowWrap:break-word",
   "table.u_content_image|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:504px;verticalAlign:middle;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:484px;verticalAlign:middle;overflowWrap:break-word",
   "div.v-col-border.v-col-border-radius.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:16px;paddingBottom:16px;borderTopStyle:solid;borderLeftStyle:solid;verticalAlign:baseline;overflowWrap:break-word",
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(43, 43, 51);fontSize:17px;fontWeight:600;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:22.1px;textAlign:left;direction:ltr;borderTopColor:rgb(43, 43, 51);borderLeftColor:rgb(43, 43, 51);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 111, 118);fontSize:14px;fontWeight:400;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:21px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 111, 118);borderLeftColor:rgb(107, 111, 118);verticalAlign:baseline;overflowWrap:break-word",
@@ -313,7 +313,7 @@
   "text|Questions about this receipt? Contact support@acme.com.",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:36px;paddingRight:40px;paddingBottom:28px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 38, 58);fontSize:20px;fontWeight:700;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:20px;textAlign:center;letterSpacing:3.6px;direction:ltr;borderTopColor:rgb(0, 38, 58);borderLeftColor:rgb(0, 38, 58);verticalAlign:baseline;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:middle;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:580px;verticalAlign:middle;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:40px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(59, 91, 219);fontSize:12px;fontWeight:700;fontFamily:-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;lineHeight:12px;textAlign:center;letterSpacing:0.72px;direction:ltr;borderTopColor:rgb(59, 91, 219);borderLeftColor:rgb(59, 91, 219);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:12px;paddingRight:40px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
@@ -551,14 +551,14 @@
   "text|CTO, TechCorp Inc.",
   "div.v-text-align|display:block;position:relative;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:150px;verticalAlign:baseline",
-  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:500px;verticalAlign:baseline",
+  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:480px;verticalAlign:baseline",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle",
   "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:468px;verticalAlign:middle",
   "a|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;textDecorationLine:underline;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline",
   "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);maxWidth:500px;verticalAlign:baseline",
-  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:104.15px;verticalAlign:baseline",
-  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:200.02px;verticalAlign:baseline",
-  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:250.01px;verticalAlign:baseline",
+  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100px;verticalAlign:baseline",
+  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:200px;verticalAlign:baseline",
+  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:250px;verticalAlign:baseline",
   "text|Hero & Banner Images",
   "text|Profile & Avatar Images",
   "text|Product Images",
@@ -567,82 +567,73 @@
   "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);maxWidth:200px;verticalAlign:baseline",
   "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:350px;verticalAlign:baseline",
   "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:400px;verticalAlign:baseline",
-  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:400.02px;verticalAlign:baseline",
   "div.v-text-align|display:block;position:relative;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "a|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:left;textDecorationLine:underline;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline",
-  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);maxWidth:312.5px;verticalAlign:baseline",
+  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);maxWidth:300px;verticalAlign:baseline",
   "a.v-font-size.v-font-weight.v-layout-display.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(37, 99, 235);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;paddingTop:10px;paddingRight:16px;paddingBottom:10px;paddingLeft:16px;borderTopColor:rgb(37, 99, 235);borderLeftColor:rgb(37, 99, 235);verticalAlign:baseline",
   "span.v-font-size.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(68, 68, 68);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;paddingTop:10px;paddingRight:16px;paddingBottom:10px;paddingLeft:16px;borderTopColor:rgb(68, 68, 68);borderLeftColor:rgb(68, 68, 68);verticalAlign:baseline",
   "text|Home|About|Services|Contact",
-  "div.u_body|display:flex;position:static;flexWrap:nowrap;flexDirection:column;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingRight:24px;paddingBottom:16px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:baseline",
-  "div.u-row.v-row-align-items|display:flex;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u-col.u-col-100.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:100%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:100%;verticalAlign:baseline",
-  "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:4px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingRight:24px;paddingBottom:16px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "table.u_content_heading|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:4px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:28px;fontWeight:700;fontFamily:Arial, Helvetica, sans-serif;lineHeight:30.8px;textAlign:center;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:24px;paddingBottom:24px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_menu.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:24px;paddingBottom:24px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "table.u_content_menu|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "a.v-font-size.v-font-weight.v-layout-display.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(75, 85, 99);fontSize:14px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:center;direction:ltr;paddingTop:8px;paddingRight:14px;paddingBottom:8px;paddingLeft:14px;borderTopColor:rgb(75, 85, 99);borderLeftColor:rgb(75, 85, 99);verticalAlign:baseline;overflowWrap:break-word",
-  "span.v-font-size.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:14px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:center;direction:ltr;paddingTop:8px;paddingRight:14px;paddingBottom:8px;paddingLeft:14px;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(37, 99, 235);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:2px;paddingRight:2px;paddingBottom:2px;paddingLeft:2px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:1px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:1px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:1px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:1px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:32px;paddingBottom:40px;paddingLeft:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "span.v-font-size.v-font-weight.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:14px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:center;direction:ltr;paddingTop:8px;paddingRight:14px;paddingBottom:8px;paddingLeft:14px;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(37, 99, 235);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.v-col-border.v-col-border-radius.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:2px;paddingRight:2px;paddingBottom:2px;paddingLeft:2px;borderTopStyle:solid;borderLeftStyle:solid;verticalAlign:baseline;overflowWrap:break-word",
+  "table.u_content_paragraph|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
+  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:1px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;lineHeight:1px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:32px;paddingBottom:40px;paddingLeft:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:24px;fontWeight:700;fontFamily:Arial, Helvetica, sans-serif;lineHeight:31.2px;textAlign:left;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(75, 85, 99);fontSize:15px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;lineHeight:24px;textAlign:left;direction:ltr;borderTopColor:rgb(75, 85, 99);borderLeftColor:rgb(75, 85, 99);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(75, 85, 99);fontSize:15px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;lineHeight:24px;textAlign:left;direction:ltr;borderTopColor:rgb(75, 85, 99);borderLeftColor:rgb(75, 85, 99);verticalAlign:baseline;overflowWrap:break-word",
   "text|Acme Inc.",
-  "text|Products|Pricing|Blog|Support",
+  "text|Products | Pricing | Blog | Support",
   "text|Your weekly digest is here",
   "text|Here is a summary of what happened this week across your projects and teams. Click on any section to dive deeper.",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(229, 231, 235);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:1px;paddingRight:1px;paddingBottom:1px;paddingLeft:1px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(249, 250, 251);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:24px;paddingBottom:12px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:12px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(229, 231, 235);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.v-col-border.v-col-border-radius.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:1px;paddingRight:1px;paddingBottom:1px;paddingLeft:1px;borderTopStyle:solid;borderLeftStyle:solid;verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(249, 250, 251);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:24px;paddingBottom:12px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:12px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:12px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;lineHeight:18px;textAlign:center;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:12px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;lineHeight:18px;textAlign:center;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(249, 250, 251);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:24px;paddingBottom:28px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(249, 250, 251);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:24px;paddingBottom:28px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "a.v-font-size.v-font-weight.v-layout-display.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:12px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:center;direction:ltr;paddingTop:6px;paddingRight:10px;paddingBottom:6px;paddingLeft:10px;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "span.v-font-size.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(209, 213, 219);fontSize:12px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:center;direction:ltr;paddingTop:6px;paddingRight:10px;paddingBottom:6px;paddingLeft:10px;borderTopColor:rgb(209, 213, 219);borderLeftColor:rgb(209, 213, 219);verticalAlign:baseline;overflowWrap:break-word",
+  "span.v-font-size.v-font-weight.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(209, 213, 219);fontSize:12px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;textAlign:center;direction:ltr;paddingTop:6px;paddingRight:10px;paddingBottom:6px;paddingLeft:10px;borderTopColor:rgb(209, 213, 219);borderLeftColor:rgb(209, 213, 219);verticalAlign:baseline;overflowWrap:break-word",
   "text|Acme Inc. | 123 Main Street, San Francisco, CA 94105",
-  "text|View Online-Unsubscribe-Privacy Policy-Terms",
+  "text|View Online - Unsubscribe - Privacy Policy - Terms",
   "span.v-font-size.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(55, 65, 81);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;paddingTop:10px;paddingRight:16px;paddingBottom:10px;paddingLeft:16px;borderTopColor:rgb(55, 65, 81);borderLeftColor:rgb(55, 65, 81);verticalAlign:baseline",
+  "div.u_body|display:flex;position:static;flexWrap:nowrap;flexDirection:column;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(30, 41, 59);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:20px;paddingRight:32px;paddingBottom:20px;paddingLeft:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:800px;verticalAlign:baseline",
+  "div.u-row.v-row-align-items|display:flex;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u-col.u-col-100.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:100%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:100%;verticalAlign:baseline",
+  "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u_content_menu.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "5x a.v-font-size.v-font-weight.v-layout-display.v-letter-spacing.v-padding|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:12px;fontWeight:700;fontFamily:Inter, system-ui, -apple-system, sans-serif;textAlign:center;letterSpacing:1.5px;direction:ltr;paddingTop:10px;paddingRight:20px;paddingBottom:10px;paddingLeft:20px;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 23, 42);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:64px;paddingRight:40px;paddingBottom:48px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(248, 250, 252);fontSize:44px;fontWeight:800;fontFamily:Inter, system-ui, sans-serif;lineHeight:48.4px;textAlign:center;direction:ltr;borderTopColor:rgb(248, 250, 252);borderLeftColor:rgb(248, 250, 252);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:18px;fontWeight:400;fontFamily:Inter, system-ui, sans-serif;lineHeight:28.8px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:18px;fontWeight:400;fontFamily:Inter, system-ui, sans-serif;lineHeight:28.8px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "text|DASHBOARDANALYTICSTEMPLATESINTEGRATIONSSETTINGS",
   "text|Ship faster with Unlayer",
   "text|Drag-and-drop email and page builders you can embed in your SaaS in minutes, not months.",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(55, 65, 81);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:25.6px;textAlign:left;direction:ltr;borderTopColor:rgb(55, 65, 81);borderLeftColor:rgb(55, 65, 81);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(55, 65, 81);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:25.6px;textAlign:left;direction:ltr;borderTopColor:rgb(55, 65, 81);borderLeftColor:rgb(55, 65, 81);verticalAlign:baseline;overflowWrap:break-word",
   "text|This is a well-formatted paragraph that demonstrates beautiful typography and readable content. It shows how text flows naturally with proper line height, spacing, and font choices for optimal reading experience.",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(31, 41, 55);fontSize:18px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:30.6px;textAlign:center;direction:ltr;borderTopColor:rgb(31, 41, 55);borderLeftColor:rgb(31, 41, 55);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(31, 41, 55);fontSize:18px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:30.6px;textAlign:center;direction:ltr;borderTopColor:rgb(31, 41, 55);borderLeftColor:rgb(31, 41, 55);verticalAlign:baseline;overflowWrap:break-word",
   "text|This paragraph showcases the semantic props API with clean, readable code. Perfect for callouts, highlights, and featured content!",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(51, 51, 51);fontSize:16px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;lineHeight:24px;textAlign:left;direction:ltr;borderTopColor:rgb(51, 51, 51);borderLeftColor:rgb(51, 51, 51);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(51, 51, 51);fontSize:16px;fontWeight:400;fontFamily:Arial, Helvetica, sans-serif;lineHeight:24px;textAlign:left;direction:ltr;borderTopColor:rgb(51, 51, 51);borderLeftColor:rgb(51, 51, 51);verticalAlign:baseline;overflowWrap:break-word",
   "text|This email-safe paragraph uses web-safe fonts and styling that renders consistently across all major email clients including Gmail, Outlook, and Apple Mail.",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(31, 41, 55);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:27.2px;textAlign:left;direction:ltr;borderTopColor:rgb(31, 41, 55);borderLeftColor:rgb(31, 41, 55);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(31, 41, 55);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:27.2px;textAlign:left;direction:ltr;borderTopColor:rgb(31, 41, 55);borderLeftColor:rgb(31, 41, 55);verticalAlign:baseline;overflowWrap:break-word",
   "text|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:19.6px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:19.6px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "text|This is the simplest way to use Paragraph - just pass text as children!",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:18px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:30.6px;textAlign:center;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:18px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:30.6px;textAlign:center;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
   "text|This paragraph showcases the clean semantic props API with custom styling!",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(37, 99, 235);fontSize:18px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:32.4px;textAlign:center;direction:ltr;borderTopColor:rgb(37, 99, 235);borderLeftColor:rgb(37, 99, 235);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(37, 99, 235);fontSize:18px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:32.4px;textAlign:center;direction:ltr;borderTopColor:rgb(37, 99, 235);borderLeftColor:rgb(37, 99, 235);verticalAlign:baseline;overflowWrap:break-word",
   "text|This paragraph uses semantic props for styling! It's centered, blue, and has custom spacing.",
   "a|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;textDecorationLine:underline;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline",
   "img|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline",
@@ -712,73 +703,76 @@
   "td|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle",
   "a|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:-webkit-center;textDecorationLine:underline;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline",
   "img|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);maxWidth:460px;verticalAlign:middle",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 23, 42);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:48px;paddingRight:40px;paddingBottom:40px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:8px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 23, 42);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:48px;paddingRight:40px;paddingBottom:40px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "table.u_content_heading|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:8px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:36px;fontWeight:800;fontFamily:Arial, sans-serif;lineHeight:50.4px;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
+  "table.u_content_paragraph|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:18px;fontWeight:400;fontFamily:Arial, sans-serif;lineHeight:27px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:18px;fontWeight:400;fontFamily:Arial, sans-serif;lineHeight:27px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingRight:40px;paddingBottom:24px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_video.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:40px;paddingBottom:32px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingRight:40px;paddingBottom:24px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "table.u_content_video|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
+  "td|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
+  "a|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-center;textDecorationLine:underline;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline;overflowWrap:break-word",
+  "img|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);maxWidth:520px;verticalAlign:middle;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:40px;paddingBottom:32px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(71, 85, 105);fontSize:16px;fontWeight:400;fontFamily:Arial, sans-serif;lineHeight:27.2px;textAlign:center;direction:ltr;borderTopColor:rgb(71, 85, 105);borderLeftColor:rgb(71, 85, 105);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(71, 85, 105);fontSize:16px;fontWeight:400;fontFamily:Arial, sans-serif;lineHeight:27.2px;textAlign:center;direction:ltr;borderTopColor:rgb(71, 85, 105);borderLeftColor:rgb(71, 85, 105);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_content_button.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "div.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(37, 99, 235);fontSize:16px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:19.2px;textAlign:center;direction:ltr;paddingTop:16px;paddingRight:40px;paddingBottom:16px;paddingLeft:40px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:8px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(248, 250, 252);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;paddingRight:40px;paddingBottom:24px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "table.u_content_button|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
+  "div.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "a.v-border.v-border-radius.v-button.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(37, 99, 235);fontSize:16px;fontWeight:700;fontFamily:arial, helvetica, sans-serif;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:8px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
+  "span.v-line-height.v-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:16px;fontWeight:700;fontFamily:arial, helvetica, sans-serif;lineHeight:19.2px;textAlign:center;direction:ltr;paddingTop:16px;paddingRight:40px;paddingBottom:16px;paddingLeft:40px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(248, 250, 252);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;paddingRight:40px;paddingBottom:24px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:12px;fontWeight:400;fontFamily:Arial, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:12px;fontWeight:400;fontFamily:Arial, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "text|Introducing Pulse 2.0",
   "text|The fastest way to build, ship, and measure.",
   "text|Watch the 2-minute walkthrough to see how Pulse 2.0 cuts your build-to-deploy cycle in half with real-time analytics, one-click staging, and zero-config CI.",
   "text|Pulse Inc. | San Francisco, CA | Unsubscribe",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(240, 253, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:30px;paddingBottom:40px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:12px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:28px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:39.2px;textAlign:center;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:24px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
-  "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(5, 150, 105);fontSize:16px;fontWeight:600;fontFamily:ua-default-serif;lineHeight:19.2px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:28px;paddingBottom:14px;paddingLeft:28px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(240, 253, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:30px;paddingBottom:40px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:12px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
+  "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:28px;fontWeight:700;fontFamily:arial, helvetica, sans-serif;lineHeight:39.2px;textAlign:center;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
+  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:24px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
+  "a.v-border.v-border-radius.v-button.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(5, 150, 105);fontSize:16px;fontWeight:600;fontFamily:arial, helvetica, sans-serif;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
+  "span.v-line-height.v-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:16px;fontWeight:600;fontFamily:arial, helvetica, sans-serif;lineHeight:19.2px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:28px;paddingBottom:14px;paddingLeft:28px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "text|With UnlayerProvider",
   "text|One config at the top. Zero mode props anywhere. Same email-safe output.",
   "text|Zero mode props needed",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:30px;paddingBottom:40px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:baseline",
+  "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:12px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(31, 41, 55);fontSize:28px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:39.2px;textAlign:center;direction:ltr;borderTopColor:rgb(31, 41, 55);borderLeftColor:rgb(31, 41, 55);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:24px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u_content_button.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "div.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(107, 114, 128);fontSize:16px;fontWeight:600;fontFamily:ua-default-serif;lineHeight:19.2px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:28px;paddingBottom:14px;paddingLeft:28px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "text|No Provider Needed",
   "text|Existing code works without any changes. Components fall back to defaults (mode: web, default CDN). Nothing breaks.",
   "text|Works As Before",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 244, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:30px;paddingBottom:40px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "table.u_content_heading|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:12px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(220, 38, 38);fontSize:28px;fontWeight:700;fontFamily:arial, helvetica, sans-serif;lineHeight:39.2px;textAlign:center;direction:ltr;borderTopColor:rgb(220, 38, 38);borderLeftColor:rgb(220, 38, 38);verticalAlign:baseline;overflowWrap:break-word",
-  "table.u_content_paragraph|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:24px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
-  "table.u_content_button|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "div.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(220, 38, 38);fontSize:16px;fontWeight:600;fontFamily:arial, helvetica, sans-serif;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
-  "span.v-line-height.v-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:16px;fontWeight:600;fontFamily:arial, helvetica, sans-serif;lineHeight:19.2px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:28px;paddingBottom:14px;paddingLeft:28px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "text|Without UnlayerProvider",
   "text|Every component needs mode=\"email\" explicitly. Miss one and it renders as web instead. This is what the existing stories all do.",
   "text|mode=\"email\" on every component",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(30, 64, 175);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:30px;paddingBottom:40px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:32px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:44.8px;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
-  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(51, 65, 85);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:25.6px;textAlign:left;direction:ltr;borderTopColor:rgb(51, 65, 85);borderLeftColor:rgb(51, 65, 85);verticalAlign:baseline;overflowWrap:break-word",
-  "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(37, 99, 235);fontSize:16px;fontWeight:600;fontFamily:ua-default-serif;lineHeight:19.2px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:28px;paddingBottom:14px;paddingLeft:28px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(248, 250, 252);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingRight:30px;paddingBottom:30px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u-col.u-col-33p33.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:33.33%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:33.33%;verticalAlign:baseline",
-  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:8px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(30, 41, 59);fontSize:16px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:22.4px;textAlign:center;direction:ltr;borderTopColor:rgb(30, 41, 59);borderLeftColor:rgb(30, 41, 59);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:13px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:18.2px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(30, 41, 59);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingRight:30px;paddingBottom:30px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u_content_social.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "a|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;textDecorationLine:underline;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline;overflowWrap:break-word",
-  "img|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline;overflowWrap:break-word",
-  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:12px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(30, 64, 175);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:30px;paddingBottom:40px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:32px;fontWeight:700;fontFamily:arial, helvetica, sans-serif;lineHeight:44.8px;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:30px;paddingBottom:40px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(51, 65, 85);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:25.6px;textAlign:left;direction:ltr;borderTopColor:rgb(51, 65, 85);borderLeftColor:rgb(51, 65, 85);verticalAlign:baseline;overflowWrap:break-word",
+  "a.v-border.v-border-radius.v-button.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(37, 99, 235);fontSize:16px;fontWeight:600;fontFamily:arial, helvetica, sans-serif;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(248, 250, 252);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingRight:30px;paddingBottom:30px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u-col.u-col-33p33.u_column|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:320px;verticalAlign:top;overflowWrap:break-word",
+  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(30, 41, 59);fontSize:16px;fontWeight:700;fontFamily:arial, helvetica, sans-serif;lineHeight:22.4px;textAlign:center;direction:ltr;borderTopColor:rgb(30, 41, 59);borderLeftColor:rgb(30, 41, 59);verticalAlign:baseline;overflowWrap:break-word",
+  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:13px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:18.2px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(30, 41, 59);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingRight:30px;paddingBottom:30px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "table.u_content_social|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
+  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
+  "td|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:top;overflowWrap:break-word",
+  "a|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;textDecorationLine:underline;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline;overflowWrap:break-word",
+  "img|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);maxWidth:28px;verticalAlign:baseline;overflowWrap:break-word",
+  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:12px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "text|Welcome to Acme",
   "text|Hi there! Thanks for signing up. Here's what you can do next:",
   "text|Templates",
@@ -787,19 +781,23 @@
   "text|Track opens, clicks, and conversions",
   "text|24/7 help from our team",
   "text|Acme Inc. | 123 Main St | hello@acme.com",
-  "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(59, 130, 246);fontSize:16px;fontWeight:600;fontFamily:ua-default-serif;lineHeight:19.2px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:28px;paddingBottom:14px;paddingLeft:28px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(240, 253, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:20px;paddingRight:30px;paddingBottom:20px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:21px;textAlign:center;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
+  "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(31, 41, 55);fontSize:28px;fontWeight:700;fontFamily:arial, helvetica, sans-serif;lineHeight:39.2px;textAlign:center;direction:ltr;borderTopColor:rgb(31, 41, 55);borderLeftColor:rgb(31, 41, 55);verticalAlign:baseline;overflowWrap:break-word",
+  "a.v-border.v-border-radius.v-button.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(59, 130, 246);fontSize:16px;fontWeight:600;fontFamily:arial, helvetica, sans-serif;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(240, 253, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:20px;paddingRight:30px;paddingBottom:20px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:14px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:21px;textAlign:center;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
   "text|Mode Set Once at Provider",
   "text|Every component here renders in \"email\" mode — table-based layouts, inline CSS — without a single mode prop on any child.",
   "text|Email-Safe Button",
   "text|Zero mode props on Body, Row, Column, Heading, Text, or Button above.",
-  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingRight:30px;paddingBottom:30px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(31, 41, 55);fontSize:24px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:33.6px;textAlign:center;direction:ltr;borderTopColor:rgb(31, 41, 55);borderLeftColor:rgb(31, 41, 55);verticalAlign:baseline;overflowWrap:break-word",
-  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:15px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:22.5px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingRight:30px;paddingBottom:30px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u-row.v-row-columns-background-color-background-color|display:flex;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-col.u-col-100.u_column|display:table-cell;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:100%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:320px;verticalAlign:top;overflowWrap:break-word",
+  "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(31, 41, 55);fontSize:24px;fontWeight:700;fontFamily:arial, helvetica, sans-serif;lineHeight:33.6px;textAlign:center;direction:ltr;borderTopColor:rgb(31, 41, 55);borderLeftColor:rgb(31, 41, 55);verticalAlign:baseline;overflowWrap:break-word",
+  "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:15px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:22.5px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(254, 252, 232);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingRight:30px;paddingBottom:30px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u-col.u-col-100.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:100%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:100%;verticalAlign:top",
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(133, 77, 14);fontSize:20px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:28px;textAlign:center;direction:ltr;borderTopColor:rgb(133, 77, 14);borderLeftColor:rgb(133, 77, 14);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(161, 98, 7);fontSize:15px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:22.5px;textAlign:center;direction:ltr;borderTopColor:rgb(161, 98, 7);borderLeftColor:rgb(161, 98, 7);verticalAlign:baseline;overflowWrap:break-word",
   "text|Provider says email...",
   "text|This section renders in email mode from the provider.",
@@ -807,12 +805,17 @@
   "text|...but this Row overrides to web",
   "text|An explicit mode=\"web\" prop on a component overrides the provider. The prop always wins.",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(30, 41, 59);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:30px;paddingBottom:40px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:8px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:24px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:33.6px;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:21px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_social.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
+  "a|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;textDecorationLine:underline;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline;overflowWrap:break-word",
+  "img|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 238);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 238);borderLeftColor:rgb(0, 0, 238);verticalAlign:baseline;overflowWrap:break-word",
   "text|Social Icons via CDN",
   "text|Icons load from cdnBaseUrl set in the provider config. Change it to point to your own CDN.",
+  "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingRight:30px;paddingBottom:30px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(31, 41, 55);fontSize:24px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:33.6px;textAlign:center;direction:ltr;borderTopColor:rgb(31, 41, 55);borderLeftColor:rgb(31, 41, 55);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:21px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_table.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "table.v-background-color.v-border-border|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopWidth:1px;borderTopStyle:solid;borderTopColor:rgb(229, 231, 235);borderLeftWidth:1px;borderLeftStyle:solid;borderLeftColor:rgb(229, 231, 235);verticalAlign:baseline;overflowWrap:break-word",
@@ -921,7 +924,6 @@
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:24px;fontWeight:700;fontFamily:arial, helvetica, sans-serif;lineHeight:33.6px;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingRight:32px;paddingBottom:8px;paddingLeft:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:14px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:19.6px;textAlign:center;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:14px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:19.6px;textAlign:center;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
   "table.u_content_custom_product_card|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingTop:14px;paddingRight:20px;paddingBottom:14px;paddingLeft:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "img|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);borderRadius:14px 14px 0px 0px;verticalAlign:baseline;overflowWrap:break-word",
@@ -946,7 +948,6 @@
   "table.u_content_paragraph|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(53, 91, 72);fontSize:12px;fontWeight:400;fontFamily:Arial;lineHeight:16.8px;textAlign:left;letterSpacing:2px;direction:ltr;borderTopColor:rgb(53, 91, 72);borderLeftColor:rgb(53, 91, 72);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(53, 91, 72);fontSize:12px;fontWeight:400;fontFamily:Arial;lineHeight:16.8px;textAlign:left;letterSpacing:2px;direction:ltr;borderTopColor:rgb(53, 91, 72);borderLeftColor:rgb(53, 91, 72);verticalAlign:baseline;overflowWrap:break-word",
   "table.u_content_heading|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:-webkit-left;direction:ltr;paddingTop:16px;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(32, 55, 42);fontSize:38px;fontWeight:400;fontFamily:Arial;lineHeight:43.7px;textAlign:left;direction:ltr;borderTopColor:rgb(32, 55, 42);borderLeftColor:rgb(32, 55, 42);verticalAlign:baseline;overflowWrap:break-word",
@@ -956,18 +957,15 @@
   "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:390px;verticalAlign:middle;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:-webkit-left;direction:ltr;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(82, 99, 88);fontSize:16px;fontWeight:400;fontFamily:Arial;lineHeight:25.6px;textAlign:left;direction:ltr;borderTopColor:rgb(82, 99, 88);borderLeftColor:rgb(82, 99, 88);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(82, 99, 88);fontSize:16px;fontWeight:400;fontFamily:Arial;lineHeight:25.6px;textAlign:left;direction:ltr;borderTopColor:rgb(82, 99, 88);borderLeftColor:rgb(82, 99, 88);verticalAlign:baseline;overflowWrap:break-word",
   "table.u_content_button|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(53, 91, 72);fontSize:14px;fontWeight:400;fontFamily:Arial;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "span.v-line-height.v-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:14px;fontWeight:400;fontFamily:Arial;lineHeight:16.8px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:24px;paddingBottom:14px;paddingLeft:24px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:-webkit-left;direction:ltr;paddingTop:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(109, 124, 113);fontSize:12px;fontWeight:400;fontFamily:Arial;lineHeight:16.8px;textAlign:left;direction:ltr;borderTopColor:rgb(109, 124, 113);borderLeftColor:rgb(109, 124, 113);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(109, 124, 113);fontSize:12px;fontWeight:400;fontFamily:Arial;lineHeight:16.8px;textAlign:left;direction:ltr;borderTopColor:rgb(109, 124, 113);borderLeftColor:rgb(109, 124, 113);verticalAlign:baseline;overflowWrap:break-word",
   "table.u_content_paragraph|position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:-webkit-left;direction:ltr;paddingTop:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(109, 124, 113);fontSize:12px;fontWeight:400;fontFamily:Arial;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(109, 124, 113);borderLeftColor:rgb(109, 124, 113);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(109, 124, 113);fontSize:12px;fontWeight:400;fontFamily:Arial;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(109, 124, 113);borderLeftColor:rgb(109, 124, 113);verticalAlign:baseline;overflowWrap:break-word",
   "text|ELEMENTS · DESIGN PREVIEW",
   "text|Room to read. On every screen.",
   "text|The same design keeps its desktop layout and adapts its padding, typography and image width for a phone.",
@@ -977,10 +975,10 @@
   "table.u_content_image|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-left;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:124.8px;verticalAlign:top;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:120px;verticalAlign:top;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(18, 18, 18);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:middle;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:580px;verticalAlign:middle;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(18, 18, 18);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:36px;paddingRight:40px;paddingBottom:4px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "table.u_content_heading|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "h4.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(30, 215, 96);fontSize:12px;fontWeight:700;fontFamily:Circular, Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:16.8px;textAlign:left;letterSpacing:1.68px;direction:ltr;borderTopColor:rgb(30, 215, 96);borderLeftColor:rgb(30, 215, 96);verticalAlign:baseline;overflowWrap:break-word",
@@ -1018,12 +1016,9 @@
   "text|Pick any track, skip freely, repeat at will.",
   "text|You're receiving this because you subscribed to Spotify Premium.",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(26, 26, 26);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:14px;paddingRight:30px;paddingBottom:14px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(212, 212, 212);fontSize:10px;fontWeight:500;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:10px;textAlign:center;letterSpacing:2.5px;direction:ltr;borderTopColor:rgb(212, 212, 212);borderLeftColor:rgb(212, 212, 212);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(212, 212, 212);fontSize:10px;fontWeight:500;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:10px;textAlign:center;letterSpacing:2.5px;direction:ltr;borderTopColor:rgb(212, 212, 212);borderLeftColor:rgb(212, 212, 212);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:36px;paddingRight:30px;paddingBottom:32px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(26, 26, 26);fontSize:28px;fontWeight:300;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:28px;textAlign:center;letterSpacing:9.8px;direction:ltr;borderTopColor:rgb(26, 26, 26);borderLeftColor:rgb(26, 26, 26);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(26, 26, 26);fontSize:28px;fontWeight:300;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:28px;textAlign:center;letterSpacing:9.8px;direction:ltr;borderTopColor:rgb(26, 26, 26);borderLeftColor:rgb(26, 26, 26);verticalAlign:baseline;overflowWrap:break-word",
   "table.u_content_image|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-text-align|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:middle;overflowWrap:break-word",
@@ -1031,31 +1026,23 @@
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(26, 26, 26);fontSize:28px;fontWeight:300;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:33.6px;textAlign:center;letterSpacing:1.12px;direction:ltr;borderTopColor:rgb(26, 26, 26);borderLeftColor:rgb(26, 26, 26);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingRight:20px;paddingLeft:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:15px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:25.5px;textAlign:center;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:15px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:25.5px;textAlign:center;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:60px;paddingBottom:28px;paddingLeft:60px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "table.u_content_divider|display:table;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopColor:rgb(128, 128, 128);borderLeftColor:rgb(128, 128, 128);verticalAlign:baseline;overflowWrap:break-word",
   "td|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopWidth:1px;borderTopStyle:solid;borderTopColor:rgb(229, 231, 235);borderLeftColor:rgb(0, 0, 0);verticalAlign:top;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:30px;paddingBottom:40px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-col-border.v-col-border-radius.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:10px;borderTopStyle:solid;borderLeftStyle:solid;verticalAlign:baseline;overflowWrap:break-word",
-  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:260px;verticalAlign:middle;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:4px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(26, 26, 26);fontSize:14px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:18.2px;textAlign:center;letterSpacing:0.56px;direction:ltr;borderTopColor:rgb(26, 26, 26);borderLeftColor:rgb(26, 26, 26);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(26, 26, 26);fontSize:14px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:18.2px;textAlign:center;letterSpacing:0.56px;direction:ltr;borderTopColor:rgb(26, 26, 26);borderLeftColor:rgb(26, 26, 26);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:14px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:19.6px;textAlign:center;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:14px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:19.6px;textAlign:center;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-border.v-col-border-radius.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingLeft:10px;borderTopStyle:solid;borderLeftStyle:solid;verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(26, 26, 26);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:48px;paddingRight:40px;paddingBottom:48px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:8px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:22px;fontWeight:300;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:28.6px;textAlign:center;letterSpacing:0.88px;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
-  "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(115, 115, 115);fontSize:14px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:22.4px;textAlign:center;direction:ltr;borderTopColor:rgb(115, 115, 115);borderLeftColor:rgb(115, 115, 115);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(115, 115, 115);fontSize:14px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:22.4px;textAlign:center;direction:ltr;borderTopColor:rgb(115, 115, 115);borderLeftColor:rgb(115, 115, 115);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(26, 26, 26);backgroundColor:rgb(255, 255, 255);fontSize:12px;fontWeight:500;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:center;direction:ltr;borderTopColor:rgb(26, 26, 26);borderLeftColor:rgb(26, 26, 26);maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "span.v-line-height.v-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(26, 26, 26);fontSize:12px;fontWeight:500;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:14.4px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:36px;paddingBottom:14px;paddingLeft:36px;borderTopColor:rgb(26, 26, 26);borderLeftColor:rgb(26, 26, 26);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:30px;paddingBottom:28px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(196, 196, 196);fontSize:11px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:17.6px;textAlign:center;letterSpacing:0.44px;direction:ltr;borderTopColor:rgb(196, 196, 196);borderLeftColor:rgb(196, 196, 196);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(196, 196, 196);fontSize:11px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:17.6px;textAlign:center;letterSpacing:0.44px;direction:ltr;borderTopColor:rgb(196, 196, 196);borderLeftColor:rgb(196, 196, 196);verticalAlign:baseline;overflowWrap:break-word",
   "text|NEW COLLECTION",
   "text|MAISON",
   "text|The Autumn Edit",
@@ -1072,23 +1059,21 @@
   "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:680px;verticalAlign:baseline",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:220px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:1px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:1.4px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:1px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:1.4px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgba(18, 12, 8, 0.88);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:60px;paddingRight:56px;paddingBottom:60px;paddingLeft:56px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(201, 168, 124);fontSize:11px;fontWeight:600;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:11px;textAlign:center;letterSpacing:3.3px;direction:ltr;borderTopColor:rgb(201, 168, 124);borderLeftColor:rgb(201, 168, 124);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(201, 168, 124);fontSize:11px;fontWeight:600;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:11px;textAlign:center;letterSpacing:3.3px;direction:ltr;borderTopColor:rgb(201, 168, 124);borderLeftColor:rgb(201, 168, 124);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:52px;fontWeight:300;fontFamily:Georgia, Times New Roman, serif;lineHeight:59.8px;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(160, 144, 128);fontSize:13px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:19.5px;textAlign:center;direction:ltr;borderTopColor:rgb(160, 144, 128);borderLeftColor:rgb(160, 144, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(160, 144, 128);fontSize:13px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:19.5px;textAlign:center;direction:ltr;borderTopColor:rgb(160, 144, 128);borderLeftColor:rgb(160, 144, 128);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:28px;paddingLeft:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(212, 200, 184);fontSize:17px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:29.75px;textAlign:center;direction:ltr;borderTopColor:rgb(212, 200, 184);borderLeftColor:rgb(212, 200, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(212, 200, 184);fontSize:17px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:29.75px;textAlign:center;direction:ltr;borderTopColor:rgb(212, 200, 184);borderLeftColor:rgb(212, 200, 184);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(245, 240, 235);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:56px;paddingRight:60px;paddingBottom:8px;paddingLeft:60px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:12px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(138, 117, 96);fontSize:11px;fontWeight:700;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:11px;textAlign:center;letterSpacing:2.2px;direction:ltr;borderTopColor:rgb(138, 117, 96);borderLeftColor:rgb(138, 117, 96);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(138, 117, 96);fontSize:11px;fontWeight:700;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:11px;textAlign:center;letterSpacing:2.2px;direction:ltr;borderTopColor:rgb(138, 117, 96);borderLeftColor:rgb(138, 117, 96);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_divider.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:10px;paddingRight:10px;paddingBottom:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(245, 240, 235);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;paddingRight:40px;paddingBottom:64px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u-col.u-col-33p33.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:33.33%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:33.33%;verticalAlign:baseline",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:16px;paddingLeft:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u_content_image.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-text-align|display:block;position:relative;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
@@ -1096,10 +1081,8 @@
   "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(44, 24, 16);fontSize:19px;fontWeight:700;fontFamily:Georgia, Times New Roman, serif;lineHeight:24.7px;textAlign:left;direction:ltr;borderTopColor:rgb(44, 24, 16);borderLeftColor:rgb(44, 24, 16);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(92, 74, 58);fontSize:14px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:23.1px;textAlign:left;direction:ltr;borderTopColor:rgb(92, 74, 58);borderLeftColor:rgb(92, 74, 58);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(92, 74, 58);fontSize:14px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:23.1px;textAlign:left;direction:ltr;borderTopColor:rgb(92, 74, 58);borderLeftColor:rgb(92, 74, 58);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(44, 24, 16);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:60px;paddingBottom:28px;paddingLeft:60px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(138, 117, 96);fontSize:12px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:18px;textAlign:center;letterSpacing:0.48px;direction:ltr;borderTopColor:rgb(138, 117, 96);borderLeftColor:rgb(138, 117, 96);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(138, 117, 96);fontSize:12px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:18px;textAlign:center;letterSpacing:0.48px;direction:ltr;borderTopColor:rgb(138, 117, 96);borderLeftColor:rgb(138, 117, 96);verticalAlign:baseline;overflowWrap:break-word",
   "text|MERIDIAN JOURNAL",
   "text|The Last Light",
   "text|on the Dolomites",
@@ -1116,33 +1099,25 @@
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 43, 91);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:36px;paddingRight:30px;paddingBottom:36px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:6px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:22px;fontWeight:800;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:22px;textAlign:center;letterSpacing:4.84px;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:22px;fontWeight:800;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:22px;textAlign:center;letterSpacing:4.84px;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(123, 154, 204);fontSize:11px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:15.4px;textAlign:center;direction:ltr;borderTopColor:rgb(123, 154, 204);borderLeftColor:rgb(123, 154, 204);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(123, 154, 204);fontSize:11px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:15.4px;textAlign:center;direction:ltr;borderTopColor:rgb(123, 154, 204);borderLeftColor:rgb(123, 154, 204);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:36px;paddingBottom:12px;paddingLeft:36px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:14px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 43, 91);fontSize:10px;fontWeight:700;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:10px;textAlign:left;letterSpacing:1.5px;direction:ltr;borderTopColor:rgb(15, 43, 91);borderLeftColor:rgb(15, 43, 91);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 43, 91);fontSize:10px;fontWeight:700;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:10px;textAlign:left;letterSpacing:1.5px;direction:ltr;borderTopColor:rgb(15, 43, 91);borderLeftColor:rgb(15, 43, 91);verticalAlign:baseline;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 43, 91);fontSize:28px;fontWeight:800;fontFamily:Georgia, Times New Roman, serif;lineHeight:35px;textAlign:left;direction:ltr;borderTopColor:rgb(15, 43, 91);borderLeftColor:rgb(15, 43, 91);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(71, 85, 105);fontSize:15px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:25.5px;textAlign:left;direction:ltr;borderTopColor:rgb(71, 85, 105);borderLeftColor:rgb(71, 85, 105);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(71, 85, 105);fontSize:15px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:25.5px;textAlign:left;direction:ltr;borderTopColor:rgb(71, 85, 105);borderLeftColor:rgb(71, 85, 105);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(15, 43, 91);fontSize:13px;fontWeight:700;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:4px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "span.v-line-height.v-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:13px;fontWeight:700;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:15.6px;textAlign:center;direction:ltr;paddingTop:13px;paddingRight:28px;paddingBottom:13px;paddingLeft:28px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:36px;paddingBottom:8px;paddingLeft:36px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "td|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopWidth:1px;borderTopStyle:solid;borderTopColor:rgb(226, 232, 240);borderLeftColor:rgb(0, 0, 0);verticalAlign:top;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:12px;paddingRight:36px;paddingBottom:20px;paddingLeft:36px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:28px;paddingBottom:40px;paddingLeft:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
-  "div.u-col.u-col-33p33.u_column|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:320px;verticalAlign:top;overflowWrap:break-word",
   "div.v-col-border.v-col-border-radius.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:8px;paddingLeft:8px;borderTopStyle:solid;borderLeftStyle:solid;verticalAlign:baseline;overflowWrap:break-word",
   "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:165.33px;verticalAlign:middle;overflowWrap:break-word",
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 43, 91);fontSize:15px;fontWeight:700;fontFamily:Georgia, Times New Roman, serif;lineHeight:20.25px;textAlign:left;direction:ltr;borderTopColor:rgb(15, 43, 91);borderLeftColor:rgb(15, 43, 91);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:13px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:19.5px;textAlign:left;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:13px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:19.5px;textAlign:left;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 43, 91);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingRight:30px;paddingBottom:32px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(123, 154, 204);fontSize:12px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:18px;textAlign:center;direction:ltr;borderTopColor:rgb(123, 154, 204);borderLeftColor:rgb(123, 154, 204);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(123, 154, 204);fontSize:12px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:18px;textAlign:center;direction:ltr;borderTopColor:rgb(123, 154, 204);borderLeftColor:rgb(123, 154, 204);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(74, 106, 154);fontSize:11px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:16.5px;textAlign:center;direction:ltr;borderTopColor:rgb(74, 106, 154);borderLeftColor:rgb(74, 106, 154);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(74, 106, 154);fontSize:11px;fontWeight:400;fontFamily:Helvetica Neue, Helvetica, Arial, sans-serif;lineHeight:16.5px;textAlign:center;direction:ltr;borderTopColor:rgb(74, 106, 154);borderLeftColor:rgb(74, 106, 154);verticalAlign:baseline;overflowWrap:break-word",
   "text|SIGNAL",
   "text|Weekly Technology Brief / Issue No. 147 / Feb 7, 2026",
   "text|FEATURED ANALYSIS",
@@ -1162,7 +1137,6 @@
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:48px;paddingRight:40px;paddingBottom:48px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 23, 42);fontSize:28px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:33.6px;textAlign:left;direction:ltr;borderTopColor:rgb(15, 23, 42);borderLeftColor:rgb(15, 23, 42);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:25.5px;textAlign:left;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:25.5px;textAlign:left;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(79, 70, 229);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:32px;paddingBottom:14px;paddingLeft:32px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:8px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "text|Welcome to the Playground",
@@ -1171,44 +1145,31 @@
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(16, 185, 129);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "td|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopWidth:4px;borderTopStyle:solid;borderTopColor:rgb(16, 185, 129);borderLeftColor:rgb(0, 0, 0);verticalAlign:top;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:11px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:2.2px;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:11px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:2.2px;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:22px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:28.6px;textAlign:left;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:22px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:28.6px;textAlign:left;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:19.6px;textAlign:left;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:19.6px;textAlign:left;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-background-color.v-col-border-radius|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(249, 250, 251);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);borderRadius:8px;verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-border.v-col-border-radius.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:32px;paddingBottom:28px;paddingLeft:32px;borderTopStyle:solid;borderLeftStyle:solid;borderRadius:8px;verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:13px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:13px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:13px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:13px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:40px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:46px;textAlign:left;letterSpacing:-0.8px;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-border.v-col-border-radius.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:12px;borderTopStyle:solid;borderLeftStyle:solid;verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:12px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:15.6px;textAlign:left;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:12px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:15.6px;textAlign:left;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(55, 65, 81);fontSize:14px;fontWeight:500;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:19.6px;textAlign:left;direction:ltr;borderTopColor:rgb(55, 65, 81);borderLeftColor:rgb(55, 65, 81);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(55, 65, 81);fontSize:14px;fontWeight:500;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:19.6px;textAlign:left;direction:ltr;borderTopColor:rgb(55, 65, 81);borderLeftColor:rgb(55, 65, 81);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-border.v-col-border-radius.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingLeft:12px;borderTopStyle:solid;borderLeftStyle:solid;verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;paddingRight:48px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:-webkit-left;direction:ltr;paddingBottom:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:11px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.32px;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:11px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.32px;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:48px;paddingBottom:10px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u-col.u-col-66p67.u_column|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:320px;verticalAlign:top;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(55, 65, 81);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:21px;textAlign:left;direction:ltr;borderTopColor:rgb(55, 65, 81);borderLeftColor:rgb(55, 65, 81);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(55, 65, 81);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:21px;textAlign:left;direction:ltr;borderTopColor:rgb(55, 65, 81);borderLeftColor:rgb(55, 65, 81);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(55, 65, 81);fontSize:14px;fontWeight:500;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:21px;textAlign:right;direction:ltr;borderTopColor:rgb(55, 65, 81);borderLeftColor:rgb(55, 65, 81);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(55, 65, 81);fontSize:14px;fontWeight:500;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:21px;textAlign:right;direction:ltr;borderTopColor:rgb(55, 65, 81);borderLeftColor:rgb(55, 65, 81);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:16px;paddingRight:48px;paddingBottom:44px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:21px;textAlign:left;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:21px;textAlign:left;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:14px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:21px;textAlign:right;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:14px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:21px;textAlign:right;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
   "td|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontWeight:400;fontFamily:arial, helvetica, sans-serif;textAlign:start;direction:ltr;borderTopWidth:1px;borderTopStyle:solid;borderTopColor:rgb(243, 244, 246);borderLeftColor:rgb(0, 0, 0);verticalAlign:top;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;paddingRight:48px;paddingBottom:44px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:13px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:20.8px;textAlign:left;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:13px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:20.8px;textAlign:left;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(209, 213, 219);fontSize:12px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:18px;textAlign:left;direction:ltr;borderTopColor:rgb(209, 213, 219);borderLeftColor:rgb(209, 213, 219);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(209, 213, 219);fontSize:12px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:18px;textAlign:left;direction:ltr;borderTopColor:rgb(209, 213, 219);borderLeftColor:rgb(209, 213, 219);verticalAlign:baseline;overflowWrap:break-word",
   "text|ACME INC",
   "text|Receipt from Acme Inc",
   "text|Receipt #0042-8291",
@@ -1232,26 +1193,21 @@
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(9, 9, 11);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:56px;paddingRight:48px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:72px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(113, 113, 122);fontSize:15px;fontWeight:700;fontFamily:Courier New, Courier, monospace;lineHeight:15px;textAlign:left;letterSpacing:1.2px;direction:ltr;borderTopColor:rgb(113, 113, 122);borderLeftColor:rgb(113, 113, 122);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(113, 113, 122);fontSize:15px;fontWeight:700;fontFamily:Courier New, Courier, monospace;lineHeight:15px;textAlign:left;letterSpacing:1.2px;direction:ltr;borderTopColor:rgb(113, 113, 122);borderLeftColor:rgb(113, 113, 122);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(9, 9, 11);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:48px;paddingBottom:24px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(250, 250, 250);fontSize:56px;fontWeight:800;fontFamily:Inter, -apple-system, system-ui, sans-serif;lineHeight:60.48px;textAlign:left;letterSpacing:-1.68px;direction:ltr;borderTopColor:rgb(250, 250, 250);borderLeftColor:rgb(250, 250, 250);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:80px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(161, 161, 170);fontSize:18px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, sans-serif;lineHeight:29.7px;textAlign:left;direction:ltr;borderTopColor:rgb(161, 161, 170);borderLeftColor:rgb(161, 161, 170);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(161, 161, 170);fontSize:18px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, sans-serif;lineHeight:29.7px;textAlign:left;direction:ltr;borderTopColor:rgb(161, 161, 170);borderLeftColor:rgb(161, 161, 170);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(9, 9, 11);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:48px;paddingBottom:72px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(37, 99, 235);fontSize:15px;fontWeight:600;fontFamily:Inter, -apple-system, system-ui, sans-serif;lineHeight:18px;textAlign:center;direction:ltr;paddingTop:16px;paddingRight:40px;paddingBottom:16px;paddingLeft:40px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:8px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(17, 17, 19);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:48px;paddingBottom:40px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u-col.u-col-100.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:100%;color:rgb(0, 0, 0);backgroundColor:rgb(12, 12, 14);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;borderRadius:12px;maxWidth:100%;verticalAlign:baseline",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingRight:32px;paddingBottom:32px;paddingLeft:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(37, 99, 235);fontSize:14px;fontWeight:700;fontFamily:Courier New, Courier, monospace;lineHeight:22.4px;textAlign:left;direction:ltr;borderTopColor:rgb(37, 99, 235);borderLeftColor:rgb(37, 99, 235);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(37, 99, 235);fontSize:14px;fontWeight:700;fontFamily:Courier New, Courier, monospace;lineHeight:22.4px;textAlign:left;direction:ltr;borderTopColor:rgb(37, 99, 235);borderLeftColor:rgb(37, 99, 235);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(82, 82, 91);fontSize:13px;fontWeight:400;fontFamily:Courier New, Courier, monospace;lineHeight:24.05px;textAlign:left;direction:ltr;borderTopColor:rgb(82, 82, 91);borderLeftColor:rgb(82, 82, 91);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(82, 82, 91);fontSize:13px;fontWeight:400;fontFamily:Courier New, Courier, monospace;lineHeight:24.05px;textAlign:left;direction:ltr;borderTopColor:rgb(82, 82, 91);borderLeftColor:rgb(82, 82, 91);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(9, 9, 11);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:64px;paddingRight:48px;paddingBottom:80px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(250, 250, 250);fontSize:40px;fontWeight:800;fontFamily:Inter, -apple-system, system-ui, sans-serif;lineHeight:40px;textAlign:left;letterSpacing:-0.8px;direction:ltr;borderTopColor:rgb(250, 250, 250);borderLeftColor:rgb(250, 250, 250);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(82, 82, 91);fontSize:14px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, sans-serif;lineHeight:19.6px;textAlign:left;direction:ltr;borderTopColor:rgb(82, 82, 91);borderLeftColor:rgb(82, 82, 91);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(82, 82, 91);fontSize:14px;fontWeight:400;fontFamily:Inter, -apple-system, system-ui, sans-serif;lineHeight:19.6px;textAlign:left;direction:ltr;borderTopColor:rgb(82, 82, 91);borderLeftColor:rgb(82, 82, 91);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:12px;paddingLeft:12px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(39, 39, 42);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
@@ -1277,13 +1233,12 @@
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;paddingBottom:24px;paddingLeft:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:14px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(99, 102, 241);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.98px;direction:ltr;borderTopColor:rgb(99, 102, 241);borderLeftColor:rgb(99, 102, 241);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(99, 102, 241);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.98px;direction:ltr;borderTopColor:rgb(99, 102, 241);borderLeftColor:rgb(99, 102, 241);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 23, 42);fontSize:32px;fontWeight:800;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:36.8px;textAlign:left;letterSpacing:-0.64px;direction:ltr;borderTopColor:rgb(15, 23, 42);borderLeftColor:rgb(15, 23, 42);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(79, 70, 229);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;paddingTop:12px;paddingRight:24px;paddingBottom:12px;paddingLeft:24px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:8px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:64px;paddingRight:24px;paddingBottom:64px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;paddingRight:20px;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.98px;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.98px;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(5, 150, 105);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;paddingTop:12px;paddingRight:24px;paddingBottom:12px;paddingLeft:24px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:8px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingLeft:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "text|COLLABORATION",
@@ -1301,7 +1256,6 @@
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingRight:32px;paddingBottom:40px;paddingLeft:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:26px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:31.2px;textAlign:left;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(224, 231, 255);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:24.75px;textAlign:left;direction:ltr;borderTopColor:rgb(224, 231, 255);borderLeftColor:rgb(224, 231, 255);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(224, 231, 255);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:24.75px;textAlign:left;direction:ltr;borderTopColor:rgb(224, 231, 255);borderLeftColor:rgb(224, 231, 255);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(79, 70, 229);backgroundColor:rgb(255, 255, 255);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;paddingTop:12px;paddingRight:28px;paddingBottom:12px;paddingLeft:28px;borderTopColor:rgb(79, 70, 229);borderLeftColor:rgb(79, 70, 229);borderRadius:8px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "text|Column Playground",
   "text|Use the Controls panel to change this column's background colour, padding, and border radius. The column is the styled container wrapping this content.",
@@ -1309,30 +1263,23 @@
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:56px;paddingRight:40px;paddingBottom:8px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:960px;verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(99, 102, 241);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:center;letterSpacing:2.2px;direction:ltr;borderTopColor:rgb(99, 102, 241);borderLeftColor:rgb(99, 102, 241);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(99, 102, 241);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:center;letterSpacing:2.2px;direction:ltr;borderTopColor:rgb(99, 102, 241);borderLeftColor:rgb(99, 102, 241);verticalAlign:baseline;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 23, 42);fontSize:36px;fontWeight:800;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:41.4px;textAlign:center;letterSpacing:-0.72px;direction:ltr;borderTopColor:rgb(15, 23, 42);borderLeftColor:rgb(15, 23, 42);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:24px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:24px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingRight:16px;paddingBottom:56px;paddingLeft:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:960px;verticalAlign:baseline",
   "div.u-col.u-col-33p33.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:33.33%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;borderRadius:16px;maxWidth:33.33%;verticalAlign:baseline",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:36px;paddingRight:28px;paddingBottom:36px;paddingLeft:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(71, 85, 105);fontSize:15px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:15px;textAlign:center;direction:ltr;borderTopColor:rgb(71, 85, 105);borderLeftColor:rgb(71, 85, 105);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(71, 85, 105);fontSize:15px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:15px;textAlign:center;direction:ltr;borderTopColor:rgb(71, 85, 105);borderLeftColor:rgb(71, 85, 105);verticalAlign:baseline;overflowWrap:break-word",
+  "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:4px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 23, 42);fontSize:48px;fontWeight:800;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:48px;textAlign:center;letterSpacing:-0.96px;direction:ltr;borderTopColor:rgb(15, 23, 42);borderLeftColor:rgb(15, 23, 42);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:14px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:14px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(71, 85, 105);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:32.2px;textAlign:center;direction:ltr;borderTopColor:rgb(71, 85, 105);borderLeftColor:rgb(71, 85, 105);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(71, 85, 105);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:32.2px;textAlign:center;direction:ltr;borderTopColor:rgb(71, 85, 105);borderLeftColor:rgb(71, 85, 105);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(51, 65, 85);backgroundColor:rgb(241, 245, 249);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:28px;paddingBottom:14px;paddingLeft:28px;borderTopColor:rgb(51, 65, 85);borderLeftColor:rgb(51, 65, 85);borderRadius:10px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "div.u-col.u-col-33p33.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:33.33%;color:rgb(0, 0, 0);backgroundColor:rgb(79, 70, 229);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;borderRadius:16px;maxWidth:33.33%;verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(199, 210, 254);fontSize:15px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:15px;textAlign:center;direction:ltr;borderTopColor:rgb(199, 210, 254);borderLeftColor:rgb(199, 210, 254);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(199, 210, 254);fontSize:15px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:15px;textAlign:center;direction:ltr;borderTopColor:rgb(199, 210, 254);borderLeftColor:rgb(199, 210, 254);verticalAlign:baseline;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:48px;fontWeight:800;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:48px;textAlign:center;letterSpacing:-0.96px;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(165, 180, 252);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:14px;textAlign:center;direction:ltr;borderTopColor:rgb(165, 180, 252);borderLeftColor:rgb(165, 180, 252);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(165, 180, 252);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:14px;textAlign:center;direction:ltr;borderTopColor:rgb(165, 180, 252);borderLeftColor:rgb(165, 180, 252);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(224, 231, 255);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:32.2px;textAlign:center;direction:ltr;borderTopColor:rgb(224, 231, 255);borderLeftColor:rgb(224, 231, 255);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(224, 231, 255);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:32.2px;textAlign:center;direction:ltr;borderTopColor:rgb(224, 231, 255);borderLeftColor:rgb(224, 231, 255);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(79, 70, 229);backgroundColor:rgb(255, 255, 255);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:28px;paddingBottom:14px;paddingLeft:28px;borderTopColor:rgb(79, 70, 229);borderLeftColor:rgb(79, 70, 229);borderRadius:10px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "text|PRICING",
   "text|Simple, transparent pricing",
@@ -1353,22 +1300,18 @@
   "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:860px;verticalAlign:baseline",
   "div.u-col.u-col-66p67.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:66.67%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:66.67%;verticalAlign:baseline",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:48px;paddingRight:40px;paddingBottom:48px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 23, 42);fontSize:30px;fontWeight:700;fontFamily:Georgia, Times New Roman, serif;lineHeight:36px;textAlign:left;direction:ltr;borderTopColor:rgb(15, 23, 42);borderLeftColor:rgb(15, 23, 42);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(51, 65, 85);fontSize:16px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:28px;textAlign:left;direction:ltr;borderTopColor:rgb(51, 65, 85);borderLeftColor:rgb(51, 65, 85);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(51, 65, 85);fontSize:16px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:28px;textAlign:left;direction:ltr;borderTopColor:rgb(51, 65, 85);borderLeftColor:rgb(51, 65, 85);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-col.u-col-33p33.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:33.33%;color:rgb(0, 0, 0);backgroundColor:rgb(248, 250, 252);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:33.33%;verticalAlign:baseline",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:48px;paddingRight:28px;paddingBottom:48px;paddingLeft:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.65px;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.65px;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(99, 102, 241);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:left;direction:ltr;borderTopColor:rgb(99, 102, 241);borderLeftColor:rgb(99, 102, 241);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(99, 102, 241);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:left;direction:ltr;borderTopColor:rgb(99, 102, 241);borderLeftColor:rgb(99, 102, 241);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:14px;fontWeight:500;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:left;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:14px;fontWeight:500;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:left;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_divider.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:4px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:12px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:left;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:12px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:left;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "text|ESSAY",
   "text|Designing for Clarity",
   "text|Good design is about removing everything that does not serve the reader. Each element on the page should earn its place -- if it does not inform, orient, or delight, it is noise.",
@@ -1386,11 +1329,8 @@
   "div.u-col.u-col-25.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:25%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:25%;verticalAlign:baseline",
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:44px;fontWeight:800;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:44px;textAlign:center;letterSpacing:-0.88px;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:19.6px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(100, 116, 139);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:19.6px;textAlign:center;direction:ltr;borderTopColor:rgb(100, 116, 139);borderLeftColor:rgb(100, 116, 139);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(34, 197, 94);fontSize:12px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(34, 197, 94);borderLeftColor:rgb(34, 197, 94);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(34, 197, 94);fontSize:12px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(34, 197, 94);borderLeftColor:rgb(34, 197, 94);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(167, 139, 250);fontSize:12px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(167, 139, 250);borderLeftColor:rgb(167, 139, 250);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(167, 139, 250);fontSize:12px;fontWeight:600;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(167, 139, 250);borderLeftColor:rgb(167, 139, 250);verticalAlign:baseline;overflowWrap:break-word",
   "text|2.4M",
   "text|Emails sent",
   "text|+12% this month",
@@ -1404,18 +1344,14 @@
   "text|Bounce rate",
   "text|Industry best",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:center;letterSpacing:2.2px;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:11px;textAlign:center;letterSpacing:2.2px;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.u-col.u-col-33p33.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:33.33%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;borderRadius:12px;maxWidth:33.33%;verticalAlign:baseline",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingRight:28px;paddingBottom:24px;paddingLeft:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(51, 65, 85);fontSize:16px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:27.2px;textAlign:left;direction:ltr;borderTopColor:rgb(51, 65, 85);borderLeftColor:rgb(51, 65, 85);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(51, 65, 85);fontSize:16px;fontWeight:400;fontFamily:Georgia, Times New Roman, serif;lineHeight:27.2px;textAlign:left;direction:ltr;borderTopColor:rgb(51, 65, 85);borderLeftColor:rgb(51, 65, 85);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:20px;paddingRight:28px;paddingBottom:2px;paddingLeft:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 23, 42);fontSize:14px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:18.2px;textAlign:left;direction:ltr;borderTopColor:rgb(15, 23, 42);borderLeftColor:rgb(15, 23, 42);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 23, 42);fontSize:14px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:18.2px;textAlign:left;direction:ltr;borderTopColor:rgb(15, 23, 42);borderLeftColor:rgb(15, 23, 42);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:28px;paddingBottom:28px;paddingLeft:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:13px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:18.2px;textAlign:left;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:13px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:18.2px;textAlign:left;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "text|TESTIMONIALS",
   "text|Loved by teams everywhere",
   "text|“Switching to this platform cut our deployment time from hours to minutes. The team hasn’t looked back since.”",
@@ -1432,17 +1368,14 @@
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:22px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(56, 189, 248);fontSize:12px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:12px;textAlign:left;letterSpacing:1.92px;direction:ltr;borderTopColor:rgb(56, 189, 248);borderLeftColor:rgb(56, 189, 248);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(56, 189, 248);fontSize:12px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:12px;textAlign:left;letterSpacing:1.92px;direction:ltr;borderTopColor:rgb(56, 189, 248);borderLeftColor:rgb(56, 189, 248);verticalAlign:baseline;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:38px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:44.84px;textAlign:left;letterSpacing:-0.76px;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(203, 213, 225);fontSize:17px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:29.75px;textAlign:left;direction:ltr;borderTopColor:rgb(203, 213, 225);borderLeftColor:rgb(203, 213, 225);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(203, 213, 225);fontSize:17px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:29.75px;textAlign:left;direction:ltr;borderTopColor:rgb(203, 213, 225);borderLeftColor:rgb(203, 213, 225);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(15, 23, 42);backgroundColor:rgb(56, 189, 248);fontSize:15px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:18px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:28px;paddingBottom:14px;paddingLeft:28px;borderTopColor:rgb(15, 23, 42);borderLeftColor:rgb(15, 23, 42);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:4px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(56, 189, 248);fontSize:50px;fontWeight:800;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:50px;textAlign:center;letterSpacing:-1px;direction:ltr;borderTopColor:rgb(56, 189, 248);borderLeftColor:rgb(56, 189, 248);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:16px;paddingBottom:30px;paddingLeft:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:13px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:19.5px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:13px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:19.5px;textAlign:center;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(167, 139, 250);fontSize:50px;fontWeight:800;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:50px;textAlign:center;letterSpacing:-1px;direction:ltr;borderTopColor:rgb(167, 139, 250);borderLeftColor:rgb(167, 139, 250);verticalAlign:baseline;overflowWrap:break-word",
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(52, 211, 153);fontSize:50px;fontWeight:800;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:50px;textAlign:center;letterSpacing:-1px;direction:ltr;borderTopColor:rgb(52, 211, 153);borderLeftColor:rgb(52, 211, 153);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:16px;paddingLeft:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
@@ -1459,14 +1392,10 @@
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:88px;paddingRight:48px;paddingBottom:88px;paddingLeft:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(79, 70, 229);fontSize:12px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:12px;textAlign:left;letterSpacing:1.68px;direction:ltr;borderTopColor:rgb(79, 70, 229);borderLeftColor:rgb(79, 70, 229);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(79, 70, 229);fontSize:12px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:12px;textAlign:left;letterSpacing:1.68px;direction:ltr;borderTopColor:rgb(79, 70, 229);borderLeftColor:rgb(79, 70, 229);verticalAlign:baseline;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:34px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:40.12px;textAlign:left;letterSpacing:-0.68px;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(75, 85, 99);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:27.52px;textAlign:left;direction:ltr;borderTopColor:rgb(75, 85, 99);borderLeftColor:rgb(75, 85, 99);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(75, 85, 99);fontSize:16px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:27.52px;textAlign:left;direction:ltr;borderTopColor:rgb(75, 85, 99);borderLeftColor:rgb(75, 85, 99);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:25.5px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:25.5px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(79, 70, 229);fontSize:15px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:15px;textAlign:left;direction:ltr;borderTopColor:rgb(79, 70, 229);borderLeftColor:rgb(79, 70, 229);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(79, 70, 229);fontSize:15px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:15px;textAlign:left;direction:ltr;borderTopColor:rgb(79, 70, 229);borderLeftColor:rgb(79, 70, 229);verticalAlign:baseline;overflowWrap:break-word",
   "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:402px;verticalAlign:baseline;overflowWrap:break-word",
   "text|WORKFLOW",
   "text|Streamline Every Step of Your Pipeline",
@@ -1475,12 +1404,10 @@
   "text|Learn more -->",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 10, 30);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:120px;paddingRight:40px;paddingBottom:108px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(167, 139, 250);fontSize:12px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:12px;textAlign:center;letterSpacing:2.4px;direction:ltr;borderTopColor:rgb(167, 139, 250);borderLeftColor:rgb(167, 139, 250);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(167, 139, 250);fontSize:12px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:12px;textAlign:center;letterSpacing:2.4px;direction:ltr;borderTopColor:rgb(167, 139, 250);borderLeftColor:rgb(167, 139, 250);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_heading.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:40px;paddingBottom:28px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "h1.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:58px;fontWeight:800;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:63.8px;textAlign:center;letterSpacing:-1.74px;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:100px;paddingBottom:52px;paddingLeft:100px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(161, 161, 199);fontSize:20px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:33px;textAlign:center;direction:ltr;borderTopColor:rgb(161, 161, 199);borderLeftColor:rgb(161, 161, 199);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(161, 161, 199);fontSize:20px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:33px;textAlign:center;direction:ltr;borderTopColor:rgb(161, 161, 199);borderLeftColor:rgb(161, 161, 199);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 10, 30);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:40px;paddingBottom:120px;paddingLeft:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:right;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(124, 58, 237);fontSize:15px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:18px;textAlign:center;direction:ltr;paddingTop:16px;paddingRight:36px;paddingBottom:16px;paddingLeft:36px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:8px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
@@ -1495,7 +1422,6 @@
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:24px;fontWeight:700;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:28.8px;textAlign:left;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:23.1px;textAlign:left;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(148, 163, 184);fontSize:14px;fontWeight:400;fontFamily:system-ui, -apple-system, system-ui, sans-serif;lineHeight:23.1px;textAlign:left;direction:ltr;borderTopColor:rgb(148, 163, 184);borderLeftColor:rgb(148, 163, 184);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingLeft:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "text|Left Column",
   "text|Change the Row's background colour, padding, and column background using the Controls panel below.",
@@ -1505,13 +1431,10 @@
   "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:336px;verticalAlign:baseline;overflowWrap:break-word",
   "div.v-col-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:8px;paddingLeft:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.54px;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(156, 163, 175);fontSize:11px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:11px;textAlign:left;letterSpacing:1.54px;direction:ltr;borderTopColor:rgb(156, 163, 175);borderLeftColor:rgb(156, 163, 175);verticalAlign:baseline;overflowWrap:break-word",
   "h2.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:30px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:34.5px;textAlign:left;letterSpacing:-0.45px;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:22px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:22px;textAlign:left;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:22px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:22px;textAlign:left;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:22px;paddingBottom:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:25.8px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:25.8px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(17, 24, 39);fontSize:15px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:18px;textAlign:center;direction:ltr;paddingTop:14px;paddingRight:32px;paddingBottom:14px;paddingLeft:32px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);borderRadius:6px;maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "text|NEW ARRIVAL",
   "text|Meridian Classic",
@@ -1523,13 +1446,9 @@
   "h3.v-color.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(17, 24, 39);fontSize:22px;fontWeight:700;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:26.4px;textAlign:left;direction:ltr;borderTopColor:rgb(17, 24, 39);borderLeftColor:rgb(17, 24, 39);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:24px;paddingBottom:28px;paddingLeft:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:25.2px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(107, 114, 128);fontSize:15px;fontWeight:400;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:25.2px;textAlign:left;direction:ltr;borderTopColor:rgb(107, 114, 128);borderLeftColor:rgb(107, 114, 128);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(79, 70, 229);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:14px;textAlign:left;direction:ltr;borderTopColor:rgb(79, 70, 229);borderLeftColor:rgb(79, 70, 229);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(79, 70, 229);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:14px;textAlign:left;direction:ltr;borderTopColor:rgb(79, 70, 229);borderLeftColor:rgb(79, 70, 229);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(225, 29, 72);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:14px;textAlign:left;direction:ltr;borderTopColor:rgb(225, 29, 72);borderLeftColor:rgb(225, 29, 72);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(225, 29, 72);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:14px;textAlign:left;direction:ltr;borderTopColor:rgb(225, 29, 72);borderLeftColor:rgb(225, 29, 72);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:14px;textAlign:left;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(5, 150, 105);fontSize:14px;fontWeight:600;fontFamily:system-ui, -apple-system, sans-serif;lineHeight:14px;textAlign:left;direction:ltr;borderTopColor:rgb(5, 150, 105);borderLeftColor:rgb(5, 150, 105);verticalAlign:baseline;overflowWrap:break-word",
   "text|Brand Strategy",
   "text|Positioning, voice, and visual identity grounded in audience research. We build brand systems that compound over years, not campaigns that expire in weeks.",
   "text|Growth Engineering",
@@ -1542,7 +1461,7 @@
   "div.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:baseline",
   "div.u_content_image.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingRight:10px;paddingBottom:20px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:208.97px;verticalAlign:baseline;overflowWrap:break-word",
+  "img.v-src-max-width.v-src-width|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:209px;verticalAlign:baseline;overflowWrap:break-word",
   "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(0, 0, 0);backgroundImage:url(\"https://cdn.templates.unlayer.com/assets/1595700502634-1.png\");fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:baseline",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:80px;paddingRight:10px;paddingLeft:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:19.6px;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
@@ -1562,7 +1481,6 @@
   "span|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:24px;fontWeight:700;fontFamily:ua-default-serif;lineHeight:33.6px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_paragraph.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingRight:30px;paddingBottom:10px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:26.6px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:26.6px;textAlign:left;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "div.u_content_button.v-container-padding-padding|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:10px;paddingRight:30px;paddingBottom:30px;paddingLeft:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline;overflowWrap:break-word",
   "a.v-border.v-border-radius.v-button-colors.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-padding.v-size-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);backgroundColor:rgb(0, 179, 103);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:16.8px;textAlign:center;direction:ltr;paddingTop:15px;paddingRight:25px;paddingBottom:15px;paddingLeft:25px;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);maxWidth:100%;verticalAlign:baseline;overflowWrap:break-word",
   "span|display:inline;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(255, 255, 255);fontSize:14px;fontWeight:400;fontFamily:ua-default-serif;lineHeight:16.8px;textAlign:center;direction:ltr;borderTopColor:rgb(255, 255, 255);borderLeftColor:rgb(255, 255, 255);verticalAlign:baseline;overflowWrap:break-word",
@@ -1682,10 +1600,29 @@
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingBottom:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(246, 246, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingBottom:8px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(246, 246, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:36px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(37, 99, 235);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingBottom:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(229, 231, 235);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(249, 250, 251);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingBottom:12px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(249, 250, 251);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row.v-row-align-items|display:flex;position:static;flexWrap:wrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 23, 42);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:48px;paddingBottom:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(248, 250, 252);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;paddingBottom:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(240, 253, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingBottom:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 244, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingBottom:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
-  "div.u-col.u-col-33p33.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:100%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(30, 64, 175);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:40px;paddingBottom:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(248, 250, 252);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingBottom:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-col.u-col-33p33.u_column|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:top;overflowWrap:break-word",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(30, 41, 59);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingBottom:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(240, 253, 244);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:20px;paddingBottom:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:30px;paddingBottom:30px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-row.v-row-columns-background-color-background-color|display:flex;position:static;flexWrap:wrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:600px;verticalAlign:baseline;overflowWrap:break-word",
+  "div.u-col.u-col-100.u_column|display:block;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:100%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:top;overflowWrap:break-word",
+  "div.u-col.u-col-100.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:block;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:100%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:100%;verticalAlign:baseline",
   "div.v-row-background-image--inner.v-row-columns-background-color-background-color|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:24px;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row.v-row-align-items|display:flex;position:static;flexWrap:wrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:arial, helvetica, sans-serif;lineHeight:24px;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:10px;paddingBottom:10px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
@@ -1698,7 +1635,6 @@
   "td.v-container-padding-padding|display:table-cell;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:-webkit-left;direction:ltr;paddingTop:4px;paddingBottom:16px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);verticalAlign:middle;overflowWrap:break-word",
   "img.v-src-max-width.v-src-width|display:inline-block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:Arial;textAlign:-webkit-center;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:900px;verticalAlign:middle;overflowWrap:break-word",
   "div.v-color.v-font-family.v-font-size.v-font-weight.v-letter-spacing.v-line-height.v-text-align|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(82, 99, 88);fontSize:15px;fontWeight:400;fontFamily:Arial;lineHeight:23.25px;textAlign:left;direction:ltr;borderTopColor:rgb(82, 99, 88);borderLeftColor:rgb(82, 99, 88);verticalAlign:baseline;overflowWrap:break-word",
-  "p|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(82, 99, 88);fontSize:15px;fontWeight:400;fontFamily:Arial;lineHeight:23.25px;textAlign:left;direction:ltr;borderTopColor:rgb(82, 99, 88);borderLeftColor:rgb(82, 99, 88);verticalAlign:baseline;overflowWrap:break-word",
   "text|Phone detail · more space for the story.",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(18, 18, 18);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingBottom:18px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(18, 18, 18);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
@@ -1714,10 +1650,10 @@
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingBottom:28px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingBottom:40px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(26, 26, 26);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:48px;paddingBottom:48px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
+  "div.u-col.u-col-33p33.u_column.v-col-background-color.v-col-border.v-col-border-radius.v-row-align-items|display:flex;position:relative;flexWrap:nowrap;flexDirection:row;flexBasis:100%;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopStyle:solid;borderLeftStyle:solid;maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 43, 91);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:36px;paddingBottom:36px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:28px;paddingBottom:8px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:12px;paddingBottom:20px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
-  "div.u-col.u-col-33p33.u_column|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:top;overflowWrap:break-word",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(15, 43, 91);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:32px;paddingBottom:32px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(16, 185, 129);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
   "div.u-row-container.u_row.v-row-background-color.v-row-background-image--outer.v-row-padding--vertical|display:block;position:static;flexWrap:nowrap;flexDirection:row;color:rgb(0, 0, 0);backgroundColor:rgb(255, 255, 255);fontSize:16px;fontWeight:400;fontFamily:ua-default-serif;textAlign:start;direction:ltr;paddingTop:24px;borderTopColor:rgb(0, 0, 0);borderLeftColor:rgb(0, 0, 0);maxWidth:100%;verticalAlign:baseline",
@@ -4763,628 +4699,677 @@
   ],
   "components-image--styled-image@desktop": [
    549,
-   567
+   566
   ],
   "components-image--thumbnail-image@desktop": [
+   567,
    568,
-   569,
-   570
+   569
   ],
   "components-menu--default@desktop": [
+   570,
    571,
-   572,
-   571,
-   572,
+   570,
    571,
-   572,
+   570,
    571,
-   573
+   570,
+   572
   ],
   "components-menu--email-header@desktop": [
+   0,
+   573,
+   2,
+   3,
+   4,
+   5,
+   6,
    574,
    575,
    576,
    577,
+   2,
+   3,
+   4,
+   5,
+   6,
    578,
    579,
    580,
    581,
+   580,
+   581,
+   580,
+   581,
+   580,
    582,
-   576,
-   577,
-   578,
-   579,
+   2,
+   3,
+   4,
+   5,
    583,
    584,
+   579,
    585,
-   584,
-   585,
-   584,
-   585,
-   584,
    586,
-   576,
-   577,
-   578,
+   2,
+   3,
+   4,
+   5,
+   6,
+   574,
    587,
    588,
+   584,
+   579,
    589,
    590,
    591,
-   576,
-   577,
-   578,
-   579,
    592,
-   593,
-   588,
+   593
+  ],
+  "components-menu--footer-links@desktop": [
+   0,
    594,
+   2,
+   3,
+   4,
+   5,
    595,
+   584,
+   579,
+   585,
    596,
+   2,
+   3,
+   4,
+   5,
+   6,
+   584,
    597,
    598,
-   599
-  ],
-  "components-menu--footer-links@desktop": [
-   574,
-   600,
-   576,
-   577,
+   599,
+   2,
+   3,
+   4,
+   5,
+   6,
    578,
+   579,
+   600,
    601,
-   588,
-   589,
-   590,
+   600,
+   601,
+   600,
+   601,
+   600,
    602,
-   576,
-   577,
-   578,
-   579,
-   603,
+   603
+  ],
+  "components-menu--full-props-api@desktop": [
+   570,
+   604,
+   570,
    604,
+   570,
+   604,
+   570,
+   572
+  ],
+  "components-menu--styled-navigation@desktop": [
    605,
    606,
-   576,
-   577,
-   578,
-   579,
-   583,
-   607,
-   608,
-   607,
-   608,
    607,
    608,
-   607,
    609,
-   610
-  ],
-  "components-menu--full-props-api@desktop": [
-   571,
-   611,
-   571,
-   611,
-   571,
+   610,
    611,
-   571,
-   573
-  ],
-  "components-menu--styled-navigation@desktop": [
-   574,
    612,
    613,
-   577,
-   578,
-   579,
-   583,
+   607,
+   608,
+   609,
+   610,
    614,
    615,
-   613,
-   577,
-   578,
-   579,
    616,
    617,
-   588,
    618,
    619,
-   620,
-   621,
-   622
+   620
   ],
   "components-paragraph--article-paragraph@desktop": [
-   623,
-   624,
-   625
+   621,
+   622
   ],
   "components-paragraph--callout-paragraph@desktop": [
-   626,
-   627,
-   628
+   623,
+   624
   ],
   "components-paragraph--email-paragraph@desktop": [
-   629,
-   630,
-   631
+   625,
+   626
   ],
   "components-paragraph--long-content@desktop": [
-   632,
-   633,
-   634
+   627,
+   628
   ],
   "components-paragraph--simple-text@desktop": [
-   635,
-   636,
-   637
+   629,
+   630
   ],
   "components-paragraph--styled-paragraph@desktop": [
-   638,
-   639,
-   640
+   631,
+   632
   ],
   "components-paragraph--with-semantic-props@desktop": [
-   641,
-   642,
-   643
+   633,
+   634
   ],
   "components-social--colorful-social-icons@desktop": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
-   644,
-   645
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
   ],
   "components-social--default@desktop": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
   ],
   "components-social--email-social-icons@desktop": [
    0,
-   646,
-   647,
+   637,
+   638,
    0,
-   646,
-   647,
+   637,
+   638,
    0,
-   646,
-   647,
+   637,
+   638,
    0,
-   646,
-   647
+   637,
+   638
   ],
   "components-social--rounded-social-icons@desktop": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
-   644,
-   645
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
   ],
   "components-social--social-media-bar@desktop": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
-   644,
-   645
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
   ],
   "components-social--squared-social-icons@desktop": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
+  ],
+  "components-table--data-table@desktop": [
+   639,
+   640,
+   641,
+   642,
+   643,
    644,
    645
   ],
-  "components-table--data-table@desktop": [
+  "components-table--default@desktop": [
+   639,
+   646,
+   647,
    648,
    649,
-   650,
+   650
+  ],
+  "components-table--email-table@desktop": [
+   639,
+   646,
    651,
    652,
    653,
    654
   ],
-  "components-table--default@desktop": [
-   648,
+  "components-table--feature-comparison@desktop": [
+   639,
    655,
    656,
    657,
-   658,
-   659
-  ],
-  "components-table--email-table@desktop": [
-   648,
    655,
+   656,
+   657,
+   655,
+   656,
+   658,
+   659,
    660,
    661,
    662,
    663
   ],
-  "components-table--feature-comparison@desktop": [
-   648,
-   664,
-   665,
-   666,
+  "components-table--pricing-table@desktop": [
+   639,
+   640,
    664,
    665,
    666,
-   664,
-   665,
    667,
    668,
-   669,
+   669
+  ],
+  "components-table--product-table@desktop": [
+   639,
    670,
    671,
-   672
-  ],
-  "components-table--pricing-table@desktop": [
-   648,
-   649,
+   672,
+   670,
+   671,
+   672,
    673,
    674,
    675,
    676,
-   677,
-   678
+   677
   ],
-  "components-table--product-table@desktop": [
-   648,
-   679,
-   680,
-   681,
+  "components-table--table-showcase@desktop": [
+   494,
+   639,
+   670,
+   678,
    679,
+   670,
+   678,
+   494,
+   639,
+   646,
+   494,
+   639,
+   646,
+   494,
+   639,
+   655,
+   656,
+   657,
+   655,
+   656,
+   494,
+   639,
+   646,
    680,
+   647,
    681,
    682,
    683,
    684,
    685,
-   686
-  ],
-  "components-table--table-showcase@desktop": [
-   494,
-   648,
-   679,
+   686,
    687,
    688,
-   679,
-   687,
-   494,
-   648,
-   655,
-   494,
-   648,
-   655,
-   494,
-   648,
-   664,
-   665,
-   666,
-   664,
-   665,
-   494,
-   648,
-   655,
    689,
-   656,
    690,
    691,
    692,
    693,
    694,
+   664,
    695,
    696,
+   661,
    697,
    698,
-   699,
+   652,
+   653,
+   699
+  ],
+  "components-video--default@desktop": [],
+  "components-video--email-video@desktop": [
    700,
    701,
-   702,
+   702
+  ],
+  "components-video--full-props-api@desktop": [],
+  "components-video--product-demo@desktop": [
+   0,
    703,
-   673,
+   2,
+   3,
+   4,
+   5,
+   6,
    704,
    705,
-   670,
    706,
    707,
-   661,
-   662,
-   708
-  ],
-  "components-video--default@desktop": [],
-  "components-video--email-video@desktop": [
+   708,
    709,
    710,
-   711
-  ],
-  "components-video--full-props-api@desktop": [],
-  "components-video--product-demo@desktop": [
-   574,
+   2,
+   3,
+   4,
+   5,
+   6,
+   711,
+   708,
    712,
-   576,
-   577,
-   578,
-   579,
    713,
    714,
-   588,
    715,
+   2,
+   3,
+   4,
+   5,
+   6,
+   707,
    716,
    717,
-   576,
-   577,
-   578,
-   579,
    718,
    719,
-   576,
-   577,
-   578,
-   579,
    720,
    721,
    722,
    723,
+   2,
+   3,
+   4,
+   5,
+   6,
+   707,
+   708,
    724,
    725,
    726,
-   576,
-   577,
-   578,
-   579,
-   588,
    727,
-   728,
-   729,
-   730,
-   731,
    378,
-   732
+   728
   ],
   "components-video--you-tube-embed@desktop": [],
   "configuration-unlayerprovider--after-provider@desktop": [
-   574,
+   0,
+   729,
+   2,
+   3,
+   4,
+   5,
+   6,
+   704,
+   730,
+   731,
+   707,
+   732,
    733,
-   576,
-   577,
-   578,
-   579,
+   718,
+   719,
+   720,
    734,
    735,
    736,
    737,
-   723,
-   724,
-   738,
-   739,
-   740,
-   741
+   738
   ],
   "configuration-unlayerprovider--backward-compatible@desktop": [
-   574,
+   605,
+   739,
+   740,
+   608,
+   609,
+   610,
+   741,
    742,
-   576,
-   577,
-   578,
-   579,
-   734,
    743,
-   736,
-   737,
-   723,
-   724,
    744,
    745,
    746,
-   747
+   747,
+   748,
+   749,
+   750
   ],
   "configuration-unlayerprovider--before-provider@desktop": [
    0,
-   748,
+   751,
    2,
    3,
    4,
    5,
    6,
-   749,
-   750,
-   751,
+   704,
+   730,
    752,
+   707,
+   732,
+   733,
+   718,
+   719,
+   720,
    753,
+   735,
    754,
    755,
-   756,
-   757,
+   756
+  ],
+  "configuration-unlayerprovider--full-email-template@desktop": [
+   0,
+   757,
+   2,
+   3,
+   4,
+   5,
+   6,
+   704,
+   719,
    758,
    759,
+   2,
+   3,
+   4,
+   5,
+   6,
+   707,
+   732,
    760,
+   718,
+   719,
+   720,
    761,
-   762
-  ],
-  "configuration-unlayerprovider--full-email-template@desktop": [
-   574,
+   735,
+   762,
+   2,
+   3,
    763,
-   576,
-   577,
-   578,
-   579,
+   5,
+   6,
+   707,
+   705,
    764,
+   707,
+   719,
+   765,
+   763,
+   5,
+   6,
+   707,
+   705,
+   764,
+   707,
+   719,
+   765,
+   763,
+   5,
+   6,
+   707,
+   705,
+   764,
+   707,
+   719,
    765,
-   742,
-   576,
-   577,
-   578,
-   579,
-   736,
    766,
-   723,
-   724,
+   2,
+   3,
+   4,
+   5,
+   6,
    767,
    768,
-   576,
-   577,
    769,
-   579,
    770,
    771,
-   772,
-   773,
    769,
-   579,
    770,
    771,
-   772,
-   773,
    769,
-   579,
    770,
    771,
+   707,
+   719,
    772,
    773,
    774,
-   576,
-   577,
-   578,
-   579,
+   407,
    775,
    776,
    777,
-   776,
-   777,
-   776,
-   777,
-   772,
    778,
+   518,
    779,
-   780,
-   407,
+   780
+  ],
+  "configuration-unlayerprovider--mode-cascading@desktop": [
+   0,
+   759,
+   2,
+   3,
+   4,
+   5,
+   6,
+   704,
+   730,
    781,
+   707,
+   732,
+   733,
+   718,
+   719,
+   720,
    782,
+   735,
    783,
+   2,
+   3,
+   4,
+   5,
+   6,
+   707,
+   719,
    784,
-   518,
    785,
-   786
-  ],
-  "configuration-unlayerprovider--mode-cascading@desktop": [
-   574,
-   742,
-   576,
-   577,
-   578,
-   579,
-   734,
-   743,
-   736,
-   737,
-   723,
-   724,
+   786,
    787,
-   788,
-   576,
-   577,
-   578,
-   579,
-   772,
+   788
+  ],
+  "configuration-unlayerprovider--mode-override@desktop": [
+   0,
    789,
    790,
+   3,
    791,
+   5,
+   6,
+   704,
+   730,
    792,
-   793
-  ],
-  "configuration-unlayerprovider--mode-override@desktop": [
-   574,
+   707,
+   768,
+   793,
+   718,
+   719,
+   720,
+   782,
+   735,
    794,
-   576,
-   577,
-   578,
-   579,
-   734,
+   740,
+   608,
    795,
+   610,
+   741,
    796,
    797,
-   723,
-   724,
-   787,
    798,
-   576,
-   577,
-   578,
-   579,
-   734,
    799,
-   772,
    800,
    801,
    802,
-   803,
-   804,
-   805
+   803
   ],
   "configuration-unlayerprovider--social-with-cdn@desktop": [
-   574,
+   605,
+   804,
+   740,
+   608,
+   609,
+   610,
+   805,
    806,
-   576,
-   577,
-   578,
-   579,
-   713,
    807,
    808,
    809,
    810,
-   776,
-   777,
-   776,
-   777,
-   776,
-   777,
-   776,
-   777,
    811,
-   812
+   810,
+   811,
+   810,
+   811,
+   810,
+   811,
+   812,
+   813
   ],
   "configuration-unlayerprovider--table-with-merge-tags@desktop": [
-   574,
-   794,
-   576,
-   577,
-   578,
-   579,
-   713,
-   795,
-   808,
-   813,
+   605,
    814,
+   740,
+   608,
+   609,
+   610,
+   805,
    815,
+   807,
    816,
    817,
    818,
    819,
    820,
    821,
-   822
-  ],
-  "custom-tools-examples-gallery--accordion-tool@desktop": [
+   822,
    823,
    824,
-   825,
+   825
+  ],
+  "custom-tools-examples-gallery--accordion-tool@desktop": [
    826,
    827,
    828,
@@ -5394,193 +5379,193 @@
    832,
    833,
    834,
-   832,
-   833,
-   834,
-   832,
-   833,
-   834,
    835,
    836,
    837,
-   838,
+   835,
+   836,
+   837,
+   835,
+   836,
    837,
+   838,
    839,
-   837
+   840,
+   841,
+   840,
+   842,
+   840
   ],
   "custom-tools-examples-gallery--email-adaptations@desktop": [
    0,
-   840,
+   843,
    2,
    3,
    4,
    5,
    6,
-   749,
-   841,
-   842,
-   843,
+   704,
    844,
    845,
    846,
-   845,
-   846,
-   845,
-   846,
    847,
    848,
    849,
-   850,
+   848,
    849,
-   850,
+   848,
    849,
    850,
    851,
-   836,
    852,
-   838,
    853,
-   839,
+   852,
+   853,
+   852,
+   853,
    854,
+   839,
    855,
+   841,
    856,
+   842,
    857,
    858,
    859,
-   860
+   860,
+   861,
+   862,
+   863
   ],
   "custom-tools-examples-gallery--map-tool@desktop": [
-   823,
-   824,
-   861,
    826,
    827,
-   828,
-   862,
-   830,
-   863,
-   864,
-   865,
-   864,
-   865,
-   864,
-   865,
-   864,
-   865,
-   864,
-   865,
    864,
+   829,
+   830,
+   831,
    865,
+   833,
    866,
    867,
-   868
+   868,
+   867,
+   868,
+   867,
+   868,
+   867,
+   868,
+   867,
+   868,
+   867,
+   868,
+   869,
+   870,
+   871
   ],
   "custom-tools-examples-gallery--product-library-tool@desktop": [
    0,
-   869,
+   872,
    2,
    3,
    4,
    5,
    6,
-   870,
-   871,
-   872,
    873,
-   872,
    874,
    875,
    876,
+   875,
    877,
    878,
    879,
    880,
    881,
-   882
+   882,
+   883,
+   884,
+   885
   ],
   "custom-tools-examples-gallery--qr-code-tool@desktop": [
    0,
-   883,
+   886,
    2,
    3,
    4,
    5,
    6,
-   749,
-   884,
-   885,
-   886,
+   704,
    887,
    888,
-   889
+   889,
+   890,
+   891,
+   892
   ],
   "custom-tools-examples-gallery--tabs-tool@desktop": [
-   823,
-   824,
-   825,
    826,
    827,
    828,
-   890,
-   891,
-   892,
+   829,
+   830,
+   831,
    893,
-   855,
-   857,
-   859,
-   856
+   894,
+   895,
+   896,
+   858,
+   860,
+   862,
+   859
   ],
   "custom-tools-examples-gallery--two-independent-accordions@desktop": [
-   823,
-   824,
-   825,
    826,
    827,
    828,
-   894,
-   832,
-   833,
-   834,
-   832,
-   833,
-   834,
-   832,
-   833,
-   834,
-   895,
-   896,
-   897,
-   834,
-   896,
-   897,
-   834,
-   896,
+   829,
+   830,
+   831,
    897,
-   834,
+   835,
    836,
    837,
-   838,
-   837,
-   839,
+   835,
+   836,
    837,
+   835,
    836,
    837,
-   838,
+   898,
+   899,
+   900,
+   837,
+   899,
+   900,
    837,
+   899,
+   900,
+   837,
+   839,
+   840,
+   841,
+   840,
+   842,
+   840,
    839,
-   837
+   840,
+   841,
+   840,
+   842,
+   840
   ],
   "custom-tools-registered-tools--countdown-customized@desktop": [
    0,
-   898,
+   901,
    130,
    3,
    4,
    5,
    6,
-   899,
-   900,
-   901,
    902,
    903,
    904,
@@ -5588,103 +5573,103 @@
    906,
    907,
    908,
-   909
+   909,
+   910,
+   911,
+   912
   ],
   "custom-tools-registered-tools--countdown-tool@desktop": [
    0,
-   840,
+   843,
    130,
    3,
    4,
    5,
    6,
-   899,
-   910,
-   911,
    902,
-   912,
    913,
-   905,
    914,
-   907,
+   905,
    915,
-   909
+   916,
+   908,
+   917,
+   910,
+   918,
+   912
   ],
   "custom-tools-registered-tools--inside-a-full-design@desktop": [
    0,
-   916,
+   919,
    130,
    3,
    4,
    5,
    6,
-   749,
-   917,
-   918,
-   752,
-   919,
+   704,
    920,
    921,
+   707,
    922,
    923,
-   864,
    924,
    925,
+   867,
    926,
    927,
    928,
    929,
    930,
-   899,
    931,
-   911,
-   902,
    932,
+   902,
    933,
+   914,
+   905,
    934,
    935,
    936,
    937,
    938,
-   913,
-   905,
-   914,
-   907,
-   915,
-   909
+   939,
+   940,
+   916,
+   908,
+   917,
+   910,
+   918,
+   912
   ],
   "custom-tools-registered-tools--product-card-tool@desktop": [
    0,
-   869,
+   872,
    130,
    3,
    4,
    5,
    6,
-   922,
-   871,
-   864,
    924,
-   925,
+   874,
+   867,
    926,
    927,
    928,
    929,
    930,
-   934,
-   939,
+   931,
+   932,
    936,
-   940
+   941,
+   938,
+   942
   ],
   "examples-phone-overrides--default@desktop": [
    0,
-   883,
-   941,
+   886,
+   943,
    3,
    4,
    5,
-   942,
-   943,
    944,
    945,
    946,
@@ -5695,16 +5680,16 @@
    951,
    952,
    953,
-   943,
    954,
+   945,
    955,
    956,
    957,
-   944,
+   946,
    958,
    959,
    960,
-   943,
+   945,
    961,
    962,
    963,
@@ -5714,126 +5699,126 @@
    967,
    968,
    969,
-   970,
-   971,
-   972
+   970
   ],
   "examples-spotify-premium-welcome--default@desktop": [
    0,
-   973,
+   971,
    2,
    3,
    4,
    5,
    6,
+   972,
+   973,
    974,
    975,
    976,
-   977,
-   978,
    2,
    3,
    4,
    5,
    6,
-   974,
-   975,
+   972,
+   973,
+   977,
+   978,
    979,
-   980,
-   981,
    2,
    3,
    4,
    5,
    6,
+   980,
+   973,
+   981,
+   980,
+   973,
    982,
-   975,
    983,
-   982,
-   975,
+   973,
    984,
    985,
-   975,
-   986,
-   987,
    2,
    3,
    4,
    5,
    6,
+   986,
+   973,
+   987,
    988,
-   975,
    989,
    990,
-   991,
-   992,
    2,
    3,
    4,
    5,
    6,
+   991,
+   973,
+   992,
    993,
-   975,
-   994,
-   995,
    2,
    3,
    4,
    5,
    6,
-   982,
-   975,
-   996,
-   997,
+   980,
+   973,
+   994,
+   995,
    2,
    3,
    21,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
    21,
    5,
    6,
-   982,
-   975,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
    998,
-   985,
-   975,
-   999,
-   1000,
    2,
    3,
    21,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
    21,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
    999,
-   1001,
    2,
    3,
    4,
    5,
    6,
-   985,
-   975,
+   983,
+   973,
+   1000,
+   1001,
    1002,
    1003,
    1004,
@@ -5846,126 +5831,126 @@
    1011,
    1012,
    1013,
-   1014,
-   1015,
-   1016
+   1014
   ],
   "examples-spotify-premium-welcome--spotify-premium-welcome@desktop": [
    0,
-   973,
+   971,
    2,
    3,
    4,
    5,
    6,
+   972,
+   973,
    974,
    975,
    976,
-   977,
-   978,
    2,
    3,
    4,
    5,
    6,
-   974,
-   975,
+   972,
+   973,
+   977,
+   978,
    979,
-   980,
-   981,
    2,
    3,
    4,
    5,
    6,
+   980,
+   973,
+   981,
+   980,
+   973,
    982,
-   975,
    983,
-   982,
-   975,
+   973,
    984,
    985,
-   975,
-   986,
-   987,
    2,
    3,
    4,
    5,
    6,
+   986,
+   973,
+   987,
    988,
-   975,
    989,
    990,
-   991,
-   992,
    2,
    3,
    4,
    5,
    6,
+   991,
+   973,
+   992,
    993,
-   975,
-   994,
-   995,
    2,
    3,
    4,
    5,
    6,
-   982,
-   975,
-   996,
-   997,
+   980,
+   973,
+   994,
+   995,
    2,
    3,
    21,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
    21,
    5,
    6,
-   982,
-   975,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
    998,
-   985,
-   975,
-   999,
-   1000,
    2,
    3,
    21,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
    21,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
    999,
-   1001,
    2,
    3,
    4,
    5,
    6,
-   985,
-   975,
+   983,
+   973,
+   1000,
+   1001,
    1002,
    1003,
    1004,
@@ -5978,129 +5963,141 @@
    1011,
    1012,
    1013,
-   1014,
-   1015,
-   1016
+   1014
   ],
   "layout-body--ecommerce@desktop": [
    0,
+   1015,
+   2,
+   3,
+   4,
+   5,
+   6,
+   707,
+   708,
+   1016,
    1017,
    2,
    3,
    4,
    5,
    6,
-   752,
+   707,
+   708,
    1018,
-   1019,
-   1020,
-   1021,
+   86,
    2,
    3,
    4,
    5,
    6,
-   752,
-   1018,
+   1019,
+   708,
+   1020,
+   1021,
    1022,
-   1023,
-   86,
    2,
    3,
    4,
    5,
    6,
+   704,
+   730,
+   1023,
+   707,
    1024,
-   1018,
    1025,
    1026,
-   1027,
    2,
    3,
    4,
    5,
    6,
-   749,
-   750,
+   1027,
+   719,
    1028,
-   752,
    1029,
-   1030,
-   1031,
-   1032,
    2,
    3,
-   4,
+   21,
    5,
-   6,
+   1030,
+   1019,
+   768,
+   1020,
+   1031,
+   707,
+   1032,
    1033,
-   756,
+   707,
+   708,
    1034,
-   1035,
-   2,
-   3,
    21,
    5,
+   1035,
+   1019,
+   768,
+   1020,
+   1031,
+   707,
+   1032,
+   1033,
+   707,
+   708,
+   1034,
    1036,
-   1024,
-   1037,
-   1025,
-   1038,
-   752,
-   1039,
-   1040,
-   1041,
-   752,
-   1018,
-   1042,
-   1043,
-   21,
+   2,
+   3,
+   4,
    5,
-   1044,
-   1024,
+   6,
+   704,
+   705,
    1037,
-   1025,
+   707,
+   716,
    1038,
-   752,
+   718,
+   719,
+   720,
    1039,
    1040,
    1041,
-   752,
-   1018,
-   1042,
-   1043,
-   1045,
    2,
    3,
    4,
    5,
    6,
-   749,
+   707,
+   708,
+   1042,
+   1043,
+   1044,
+   1045,
    1046,
    1047,
-   752,
    1048,
    1049,
    1050,
-   755,
-   756,
-   757,
    1051,
    1052,
    1053,
-   2,
-   3,
-   4,
-   5,
-   6,
-   752,
-   1018,
-   1054,
+   1054
+  ],
+  "layout-body--magazine@desktop": [
+   605,
    1055,
    1056,
+   608,
+   609,
+   610,
    1057,
    1058,
    1059,
+   1056,
+   608,
+   609,
+   610,
    1060,
    1061,
    1062,
@@ -6108,703 +6105,725 @@
    1064,
    1065,
    1066,
-   1067
-  ],
-  "layout-body--magazine@desktop": [
-   574,
+   1067,
    1068,
+   1056,
+   608,
+   609,
+   610,
    1069,
-   577,
-   578,
-   579,
    1070,
    1071,
    1072,
+   1056,
+   608,
    1073,
-   1069,
-   577,
-   578,
-   579,
    1074,
    1075,
    1076,
    1077,
    1078,
-   720,
    1079,
+   616,
    1080,
-   1081,
+   1073,
+   1074,
+   1075,
+   1076,
+   1077,
+   1078,
+   1079,
+   616,
+   1080,
+   1073,
+   1074,
+   1075,
+   1076,
+   1077,
+   1078,
+   1079,
+   616,
+   1080,
+   1081,
+   1056,
+   608,
+   609,
+   610,
+   616,
    1082,
    1083,
    1084,
-   1069,
-   577,
-   578,
-   579,
-   603,
    1085,
    1086,
    1087,
    1088,
-   1069,
-   577,
-   769,
-   1089,
-   1090,
-   1091,
-   1092,
-   1093,
-   1094,
-   588,
-   1095,
-   1096,
-   769,
-   1089,
-   1090,
-   1091,
-   1092,
-   1093,
-   1094,
-   588,
-   1095,
-   1096,
-   769,
    1089,
    1090,
    1091,
    1092,
    1093,
    1094,
-   588,
-   1095,
+   1095
+  ],
+  "layout-body--newsletter@desktop": [
+   0,
    1096,
+   2,
+   3,
+   4,
+   5,
+   6,
+   707,
    1097,
-   1069,
-   577,
-   578,
-   579,
-   588,
    1098,
+   707,
+   708,
    1099,
    1100,
+   2,
+   3,
+   4,
+   5,
+   6,
+   707,
    1101,
    1102,
+   704,
+   1101,
    1103,
+   707,
+   732,
    1104,
+   718,
+   719,
+   720,
    1105,
    1106,
    1107,
+   2,
+   3,
+   4,
+   5,
+   6,
+   1027,
+   719,
    1108,
    1109,
-   1110,
-   1111,
-   1112
-  ],
-  "layout-body--newsletter@desktop": [
-   0,
-   1113,
    2,
    3,
    4,
    5,
    6,
-   752,
+   707,
+   708,
+   1102,
+   1110,
+   2,
+   3,
+   763,
+   5,
+   1111,
+   1019,
+   1101,
+   1020,
+   1112,
+   704,
+   1097,
+   1113,
+   707,
+   708,
+   1114,
+   763,
+   5,
+   1111,
+   1019,
+   1101,
+   1020,
+   1112,
+   704,
+   1097,
+   1113,
+   707,
+   708,
+   1114,
+   763,
+   5,
+   1111,
+   1019,
+   1101,
+   1020,
+   1112,
+   704,
+   1097,
+   1113,
+   707,
+   708,
    1114,
    1115,
-   1116,
-   752,
-   1018,
-   1117,
-   1118,
-   1119,
    2,
    3,
    4,
    5,
    6,
-   752,
+   707,
+   1032,
+   1116,
+   707,
+   768,
+   1117,
+   707,
+   708,
+   1117,
+   1118,
+   1119,
    1120,
    1121,
    1122,
-   749,
-   1120,
    1123,
-   752,
-   753,
    1124,
    1125,
-   755,
-   756,
-   757,
    1126,
    1127,
    1128,
-   2,
-   3,
-   4,
-   5,
-   6,
-   1033,
-   756,
    1129,
    1130,
-   2,
-   3,
-   4,
-   5,
-   6,
-   752,
-   1018,
-   1121,
-   1122,
    1131,
-   2,
-   3,
-   1132,
-   5,
-   1133,
-   1024,
-   1120,
-   1025,
-   1134,
-   749,
-   1114,
-   1135,
-   752,
-   1018,
-   1136,
-   1137,
-   1132,
-   5,
-   1133,
-   1024,
-   1120,
-   1025,
-   1134,
-   749,
-   1114,
-   1135,
-   752,
-   1018,
-   1136,
-   1137,
    1132,
-   5,
-   1133,
-   1024,
-   1120,
-   1025,
+   1133
+  ],
+  "layout-body--playground@desktop": [
+   605,
    1134,
-   749,
-   1114,
+   740,
+   608,
+   609,
+   610,
+   741,
    1135,
-   752,
-   1018,
+   743,
    1136,
+   745,
    1137,
    1138,
-   2,
+   1139,
+   1140,
+   1141
+  ],
+  "layout-body--receipt@desktop": [
+   0,
+   1142,
+   130,
    3,
    4,
    5,
    6,
-   752,
-   1039,
-   1139,
-   1140,
-   752,
-   1037,
-   1141,
-   1142,
-   752,
-   1018,
-   1141,
-   1142,
+   1027,
+   719,
    1143,
+   129,
+   130,
+   3,
+   4,
+   5,
+   6,
+   707,
+   716,
    1144,
+   707,
+   1097,
    1145,
+   707,
    1146,
    1147,
+   143,
+   130,
+   3,
+   4,
    1148,
    1149,
+   707,
+   1032,
    1150,
+   704,
+   708,
    1151,
+   49,
+   130,
+   3,
+   21,
+   5,
    1152,
+   707,
+   1032,
    1153,
+   707,
+   708,
    1154,
-   1155,
-   1156,
-   1157,
-   1158
-  ],
-  "layout-body--playground@desktop": [
-   574,
-   1159,
-   576,
-   577,
-   578,
-   579,
-   734,
-   1160,
-   736,
-   1161,
-   1162,
-   723,
-   1163,
-   1164,
-   1165,
-   1166,
-   1167
-  ],
-  "layout-body--receipt@desktop": [
-   0,
-   1168,
-   130,
-   3,
-   4,
-   5,
-   6,
-   1033,
-   756,
-   1169,
-   129,
-   130,
-   3,
-   4,
-   5,
-   6,
-   752,
-   1048,
-   1170,
-   1171,
-   752,
-   1114,
-   1172,
-   1173,
-   752,
-   1174,
-   1175,
-   1176,
-   143,
-   130,
-   3,
-   4,
-   1177,
-   1178,
-   752,
-   1039,
-   1179,
-   1180,
-   749,
-   1018,
-   1181,
-   49,
-   130,
-   3,
-   21,
-   5,
-   1182,
-   752,
-   1039,
-   1183,
-   1184,
-   752,
-   1018,
-   1185,
-   1186,
    21,
    5,
-   1187,
-   752,
-   1039,
-   1183,
-   1184,
-   752,
-   1018,
-   1185,
-   1186,
+   1155,
+   707,
+   1032,
+   1153,
+   707,
+   708,
+   1154,
    49,
    130,
    3,
    4,
    5,
    6,
-   1033,
-   756,
-   1034,
-   1188,
+   1027,
+   719,
+   1028,
+   1156,
    130,
    3,
    4,
    5,
    6,
-   752,
-   1189,
-   1190,
-   1191,
-   1192,
+   707,
+   1157,
+   1158,
+   1159,
    130,
    3,
-   1193,
+   1160,
    5,
    6,
-   752,
-   1018,
-   1194,
-   1195,
-   1132,
+   707,
+   708,
+   1161,
+   763,
    5,
    6,
-   752,
-   1018,
-   1196,
-   1197,
-   1192,
+   707,
+   708,
+   1162,
+   1159,
    130,
    3,
-   1193,
+   1160,
    5,
    6,
-   752,
-   1018,
-   1194,
-   1195,
-   1132,
+   707,
+   708,
+   1161,
+   763,
    5,
    6,
-   752,
-   1018,
-   1196,
-   1197,
-   1192,
+   707,
+   708,
+   1162,
+   1159,
    130,
    3,
-   1193,
+   1160,
    5,
    6,
-   752,
-   1018,
-   1194,
-   1195,
-   1132,
+   707,
+   708,
+   1161,
+   763,
    5,
    6,
-   752,
-   1018,
-   1196,
-   1197,
+   707,
+   708,
+   1162,
    143,
    130,
    3,
-   1193,
+   1160,
    5,
    6,
-   752,
-   1018,
-   1194,
-   1195,
-   1132,
+   707,
+   708,
+   1161,
+   763,
    5,
    6,
-   752,
-   1018,
-   1196,
-   1197,
-   1188,
+   707,
+   708,
+   1162,
+   1156,
    130,
    3,
    4,
    5,
    6,
-   1033,
-   756,
-   1034,
-   1198,
+   1027,
+   719,
+   1028,
+   1163,
    130,
    3,
-   1193,
+   1160,
    5,
    6,
-   752,
-   1018,
-   1199,
-   1200,
-   1132,
+   707,
+   708,
+   1164,
+   763,
    5,
    6,
-   752,
-   1018,
-   1201,
-   1202,
+   707,
+   708,
+   1165,
    143,
    130,
    3,
    4,
    5,
    6,
-   1033,
-   756,
-   1203,
-   1204,
+   1027,
+   719,
+   1166,
+   1167,
    130,
    3,
    4,
    5,
    6,
-   752,
-   1037,
-   1205,
-   1206,
-   752,
-   1018,
-   1207,
-   1208,
-   1209,
-   1210,
-   1211,
-   1212,
-   1213,
-   1214,
-   1215,
-   1216,
-   1217,
-   1218,
-   1219,
-   1220,
-   1221,
-   1222,
-   1223,
-   1224,
-   1225,
-   1226,
+   707,
+   768,
+   1168,
+   707,
+   708,
+   1169,
+   1170,
+   1171,
+   1172,
+   1173,
+   1174,
+   1175,
+   1176,
+   1177,
+   1178,
+   1179,
+   1180,
+   1181,
+   1182,
+   1183,
+   1184,
+   1185,
+   1186,
+   1187,
    45,
-   1213,
-   1227,
-   1228
+   1174,
+   1188,
+   1189
   ],
   "layout-body--saa-s-landing@desktop": [
-   574,
-   1229,
+   605,
+   1190,
+   1056,
+   608,
+   609,
+   610,
+   1191,
+   1192,
+   1193,
+   1056,
+   608,
+   609,
+   610,
+   1062,
+   1194,
+   1195,
+   1196,
+   1197,
+   1056,
+   608,
+   609,
+   610,
+   745,
+   1137,
+   1198,
+   1199,
+   1056,
+   608,
+   1200,
+   1201,
    1069,
-   577,
-   578,
-   579,
+   1202,
+   616,
+   1203,
+   1204,
+   1056,
+   608,
+   1073,
+   1205,
+   805,
+   1206,
+   616,
+   1207,
+   1073,
+   1208,
+   805,
+   1206,
+   616,
+   1207,
+   1073,
+   1209,
+   805,
+   1206,
+   616,
+   1207,
+   1210,
+   1056,
+   608,
+   609,
+   610,
+   1071,
+   1211,
+   1212,
+   1213,
+   1214,
+   1215,
+   1216,
+   1217,
+   1218,
+   1219,
+   1220,
+   1221,
+   1222,
+   1223
+  ],
+  "layout-column--feature-showcase@desktop": [
+   605,
+   1224,
+   1225,
+   608,
+   1226,
+   1227,
+   1228,
+   1076,
+   1229,
+   1226,
    1230,
    1231,
    1232,
    1233,
-   1069,
-   577,
-   578,
-   579,
-   1077,
    1234,
+   743,
+   1136,
+   745,
+   746,
    1235,
    1236,
+   1225,
+   608,
+   1226,
    1237,
+   1231,
    1238,
-   1069,
-   577,
-   578,
-   579,
-   723,
-   1163,
+   1233,
+   1234,
+   743,
+   1136,
+   745,
+   746,
    1239,
+   1226,
    1240,
-   1069,
-   577,
+   1228,
+   1076,
+   1229,
    1241,
    1242,
-   603,
    1243,
    1244,
-   588,
+   381,
    1245,
    1246,
    1247,
-   1069,
-   577,
-   769,
    1248,
-   713,
-   1249,
-   588,
+   1249
+  ],
+  "layout-column--playground@desktop": [
+   605,
    1250,
    1251,
-   769,
+   608,
    1252,
-   713,
-   1249,
-   588,
-   1250,
-   1251,
-   769,
    1253,
-   713,
-   1249,
-   588,
-   1250,
-   1251,
+   741,
    1254,
-   1069,
-   577,
-   578,
-   579,
-   1087,
+   743,
    1255,
+   745,
+   1137,
    1256,
    1257,
    1258,
-   1259,
+   1259
+  ],
+  "layout-column--pricing-cards@desktop": [
+   605,
    1260,
    1261,
+   608,
+   609,
+   610,
+   1069,
    1262,
+   805,
    1263,
+   616,
    1264,
    1265,
    1266,
-   1267
-  ],
-  "layout-column--feature-showcase@desktop": [
-   574,
+   608,
+   1267,
    1268,
+   743,
    1269,
-   577,
    1270,
    1271,
+   1060,
    1272,
-   1091,
+   1060,
    1273,
-   1270,
+   745,
+   746,
    1274,
    1275,
+   1268,
+   743,
    1276,
+   1270,
    1277,
-   592,
+   1060,
    1278,
-   736,
-   1161,
-   1162,
-   723,
-   724,
+   1060,
    1279,
+   745,
+   746,
    1280,
+   1267,
+   1268,
+   743,
    1269,
-   577,
    1270,
+   1271,
+   1060,
+   1272,
+   1060,
+   1273,
+   745,
+   746,
+   1274,
    1281,
-   1275,
    1282,
    1283,
-   592,
-   1278,
-   736,
-   1161,
-   1162,
-   723,
-   724,
    1284,
-   1270,
    1285,
-   1272,
-   1091,
-   1273,
    1286,
    1287,
+   407,
    1288,
    1289,
-   381,
    1290,
    1291,
+   378,
    1292,
    1293,
-   1294
+   1290,
+   1294,
+   1295
   ],
-  "layout-column--playground@desktop": [
-   574,
-   1295,
+  "layout-column--sidebar-article@desktop": [
+   605,
    1296,
-   577,
    1297,
+   608,
    1298,
-   734,
    1299,
-   736,
    1300,
+   1232,
+   614,
    1301,
-   723,
-   1163,
+   807,
    1302,
+   743,
+   1302,
+   1071,
    1303,
+   1302,
    1304,
-   1305
-  ],
-  "layout-column--pricing-cards@desktop": [
-   574,
+   1305,
+   743,
    1306,
+   1300,
    1307,
-   577,
-   578,
-   579,
-   603,
+   1300,
+   1308,
+   1300,
+   1308,
+   1300,
+   1308,
+   616,
    1308,
    1309,
-   713,
    1310,
-   588,
+   1311,
+   616,
    1311,
    1312,
    1313,
    1314,
-   577,
    1315,
    1316,
-   736,
    1317,
    1318,
-   580,
    1319,
-   1074,
    1320,
    1321,
-   1074,
    1322,
    1323,
-   723,
-   724,
-   1324,
+   1324
+  ],
+  "layout-column--stats-bar@desktop": [
+   605,
    1325,
-   1316,
-   736,
+   1261,
+   608,
    1326,
+   1074,
+   805,
    1327,
-   580,
+   1310,
    1328,
-   1074,
+   616,
    1329,
-   1330,
+   1326,
    1074,
+   805,
+   1327,
+   1310,
+   1328,
+   616,
+   1329,
+   1326,
+   1074,
+   805,
+   1327,
+   1310,
+   1328,
+   616,
+   1329,
+   1326,
+   1074,
+   805,
+   1327,
+   1310,
+   1328,
+   616,
+   1330,
    1331,
    1332,
-   723,
-   724,
    1333,
-   1315,
-   1316,
-   736,
-   1317,
-   1318,
-   580,
-   1319,
-   1074,
-   1320,
-   1321,
-   1074,
-   1322,
-   1323,
-   723,
-   724,
-   1324,
    1334,
    1335,
    1336,
@@ -6812,292 +6831,308 @@
    1338,
    1339,
    1340,
-   407,
    1341,
-   1342,
+   1342
+  ],
+  "layout-column--testimonial-cards@desktop": [
+   605,
+   1260,
+   1261,
+   608,
+   609,
+   610,
+   1069,
    1343,
    1344,
-   378,
+   1263,
+   1265,
+   1266,
+   608,
    1345,
+   610,
+   1071,
    1346,
-   1343,
    1347,
-   1348
-  ],
-  "layout-column--sidebar-article@desktop": [
-   574,
+   1071,
+   1348,
+   1349,
+   1350,
+   1351,
+   1345,
+   610,
+   1071,
+   1346,
+   1347,
+   1071,
+   1348,
+   1349,
+   1350,
+   1351,
+   1345,
+   610,
+   1071,
+   1346,
+   1347,
+   1071,
+   1348,
    1349,
    1350,
-   577,
    1351,
    1352,
-   796,
-   1276,
-   1277,
-   616,
    1353,
-   808,
-   1354,
-   1355,
-   736,
    1354,
    1355,
-   1087,
    1356,
-   1354,
-   1355,
    1357,
    1358,
-   736,
    1359,
    1360,
-   796,
    1361,
-   1362,
-   796,
-   1363,
-   1364,
-   796,
-   1363,
-   1364,
-   796,
-   1363,
-   1364,
-   588,
+   1362
+  ],
+  "layout-row--editorial-with-stats@desktop": [
+   605,
    1363,
    1364,
+   608,
+   1298,
    1365,
    1366,
    1367,
-   1368,
-   588,
-   1367,
+   1062,
    1368,
    1369,
    1370,
+   745,
+   1137,
    1371,
+   1073,
    1372,
+   805,
    1373,
    1374,
    1375,
+   805,
    1376,
+   1374,
+   1375,
+   805,
    1377,
    1378,
+   1375,
    1379,
    1380,
-   1381
-  ],
-  "layout-column--stats-bar@desktop": [
-   574,
+   1381,
    1382,
-   1307,
-   577,
-   1383,
-   1089,
-   713,
-   1384,
-   1366,
-   1385,
-   1386,
-   588,
-   1387,
-   1388,
-   1383,
-   1089,
-   713,
-   1384,
-   1366,
-   1385,
-   1386,
-   588,
-   1387,
-   1388,
    1383,
-   1089,
-   713,
    1384,
-   1366,
    1385,
    1386,
-   588,
    1387,
-   1388,
-   1383,
-   1089,
-   713,
-   1384,
-   1366,
-   1385,
-   1386,
-   588,
+   1388
+  ],
+  "layout-row--feature-highlight@desktop": [
+   605,
    1389,
+   1364,
+   608,
+   1226,
    1390,
+   807,
    1391,
+   614,
    1392,
+   1300,
    1393,
+   1064,
    1394,
+   616,
    1395,
+   1226,
+   610,
+   1228,
+   1076,
    1396,
    1397,
    1398,
    1399,
    1400,
-   1401,
-   1402
+   1401
   ],
-  "layout-column--testimonial-cards@desktop": [
-   574,
-   1306,
-   1307,
-   577,
-   578,
-   579,
-   603,
+  "layout-row--hero-banner@desktop": [
+   605,
+   1402,
+   1364,
+   608,
+   609,
+   610,
+   1064,
    1403,
    1404,
    1405,
-   1310,
-   1313,
-   1314,
-   577,
-   1406,
-   579,
-   1087,
-   1407,
-   1408,
-   1409,
-   1087,
-   1410,
-   1411,
-   1412,
-   1413,
-   1414,
-   1415,
-   1406,
-   579,
-   1087,
-   1407,
-   1408,
-   1409,
-   1087,
-   1410,
-   1411,
-   1412,
-   1413,
-   1414,
-   1415,
    1406,
-   579,
-   1087,
    1407,
    1408,
+   1364,
+   608,
+   1226,
+   610,
+   745,
    1409,
-   1087,
    1410,
+   1226,
+   610,
+   745,
+   1137,
    1411,
    1412,
    1413,
    1414,
    1415,
    1416,
-   1417,
+   1417
+  ],
+  "layout-row--playground@desktop": [
+   605,
    1418,
+   607,
+   608,
+   1226,
    1419,
+   1078,
    1420,
+   616,
    1421,
+   1226,
    1422,
+   1078,
+   1420,
+   616,
+   1421,
    1423,
    1424,
    1425,
    1426
   ],
-  "layout-row--editorial-with-stats@desktop": [
-   574,
+  "layout-row--product-showcase@desktop": [
+   605,
    1427,
+   607,
+   608,
+   1226,
+   1205,
+   1228,
+   1076,
    1428,
-   577,
-   1351,
+   1226,
    1429,
+   1231,
    1430,
+   1078,
    1431,
+   1366,
    1432,
-   1077,
+   1071,
    1433,
    1434,
+   745,
+   1137,
    1435,
    1436,
-   723,
-   1163,
    1437,
-   769,
    1438,
-   713,
    1439,
-   1440,
+   1440
+  ],
+  "layout-row--service-cards@desktop": [
+   605,
    1441,
+   1266,
+   608,
+   1073,
+   610,
+   1071,
    1442,
-   713,
    1443,
-   1440,
-   1441,
-   1442,
-   713,
    1444,
    1445,
-   1441,
-   1442,
+   1444,
    1446,
+   1073,
+   610,
+   1071,
+   1442,
+   1443,
+   1444,
+   1445,
+   1444,
    1447,
+   1073,
+   610,
+   1071,
+   1442,
+   1443,
+   1444,
+   1445,
+   1444,
    1448,
    1449,
    1450,
+   1401,
    1451,
    1452,
+   1401,
+   1414,
    1453,
-   1454,
-   1455
+   1401
   ],
-  "layout-row--feature-highlight@desktop": [
-   574,
+  "testing-complete-pixel-parity-test--complete-email-template@desktop": [
+   1454,
+   1455,
    1456,
-   1428,
-   577,
-   1270,
    1457,
-   808,
    1458,
    1459,
-   616,
+   608,
+   609,
+   610,
    1460,
-   796,
+   1076,
    1461,
+   1458,
    1462,
-   720,
+   608,
+   609,
+   610,
    1463,
    1464,
-   588,
    1465,
    1466,
-   1270,
-   579,
-   1272,
-   1091,
    1467,
    1468,
    1469,
+   1464,
+   1465,
    1470,
+   1458,
+   1459,
+   608,
+   609,
+   610,
    1471,
-   1472
-  ],
-  "layout-row--hero-banner@desktop": [
-   574,
+   1458,
+   1459,
+   608,
+   1226,
+   610,
+   1228,
+   1076,
+   1472,
+   1226,
+   610,
    1473,
-   1428,
-   577,
-   578,
-   579,
-   720,
    1474,
+   629,
    1475,
    1476,
    1477,
@@ -7105,417 +7140,238 @@
    1479,
    1480,
    1481,
-   1428,
-   577,
-   1270,
-   579,
-   723,
+   1137,
    1482,
    1483,
-   1270,
-   579,
-   723,
-   1163,
+   1458,
+   1459,
+   608,
+   609,
+   610,
+   1471,
+   1458,
+   1459,
+   608,
+   1226,
+   610,
    1484,
+   1479,
+   629,
+   1475,
+   1476,
+   1477,
+   1478,
+   1479,
+   1480,
    1485,
+   1481,
+   1137,
+   1482,
+   1483,
+   1226,
+   610,
+   1228,
+   1076,
+   1472,
+   1458,
+   1459,
+   608,
+   609,
+   610,
+   1471,
+   1458,
+   1459,
+   608,
+   1226,
+   610,
+   1228,
+   1076,
+   1472,
+   1226,
+   610,
+   1473,
+   1474,
+   629,
+   1475,
+   1476,
+   1477,
+   1478,
+   1479,
+   1480,
+   1485,
+   1481,
+   1137,
+   1482,
+   1483,
+   1458,
+   1459,
+   608,
+   609,
+   610,
+   1471,
+   1458,
+   1459,
+   608,
+   1226,
+   610,
    1486,
+   1479,
+   629,
+   1475,
+   1476,
+   1477,
+   1478,
+   1479,
+   1480,
+   1485,
+   1481,
+   1137,
+   1482,
+   1483,
+   1226,
+   610,
+   1228,
+   1076,
+   1472,
+   1458,
+   1459,
+   608,
+   609,
+   610,
    1487,
    1488,
    1489,
-   1490
-  ],
-  "layout-row--playground@desktop": [
-   574,
+   1490,
    1491,
-   613,
-   577,
-   1270,
+   1137,
+   1482,
+   1483,
+   1458,
    1492,
-   1093,
+   608,
+   609,
+   610,
    1493,
-   588,
    1494,
    1495,
-   1270,
    1496,
-   1093,
-   1493,
-   588,
-   1494,
-   1495,
    1497,
    1498,
    1499,
-   1500
-  ],
-  "layout-row--product-showcase@desktop": [
-   574,
+   1494,
+   1495,
+   1500,
    1501,
-   613,
-   577,
-   1270,
-   1248,
-   1272,
-   1091,
    1502,
-   1270,
+   1495,
+   1503,
+   1495,
    1503,
-   1275,
    1504,
+   1494,
+   1495,
+   1500,
+   1501,
+   1502,
+   1495,
+   1503,
+   1458,
    1505,
-   1093,
+   608,
+   609,
+   610,
    1506,
-   1430,
+   810,
+   811,
+   810,
+   811,
+   810,
+   811,
+   810,
+   811,
    1507,
    1508,
-   1087,
    1509,
    1510,
    1511,
-   723,
-   1163,
    1512,
+   483,
    1513,
    1514,
+   483,
+   1514,
+   483,
+   1514,
+   483,
+   1514,
+   483,
+   1514,
+   483,
+   1514,
+   483,
    1515,
    1516,
-   1517
-  ],
-  "layout-row--service-cards@desktop": [
-   574,
+   1517,
    1518,
-   1314,
-   577,
-   769,
-   579,
-   1087,
    1519,
    1520,
    1521,
    1522,
    1523,
-   1521,
    1524,
-   1525,
-   769,
-   579,
-   1087,
-   1519,
-   1520,
-   1521,
    1522,
    1523,
-   1521,
-   1526,
-   1527,
-   769,
-   579,
-   1087,
-   1519,
-   1520,
-   1521,
+   1524,
    1522,
    1523,
-   1521,
-   1528,
+   1524,
+   1522,
+   1523,
+   1525,
+   1526,
+   1525,
+   1527,
+   1528,
    1529,
    1530,
    1531,
-   1472,
    1532,
    1533,
-   1472,
-   1487,
    1534,
-   1472
-  ],
-  "testing-complete-pixel-parity-test--complete-email-template@desktop": [
    1535,
    1536,
    1537,
    1538,
    1539,
    1540,
-   577,
-   578,
-   579,
    1541,
-   1091,
-   1542,
-   1539,
-   1543,
-   577,
-   578,
-   579,
-   1544,
-   1545,
-   1546,
-   1547,
-   1548,
-   1549,
-   1550,
-   1545,
-   1546,
-   1551,
-   1539,
-   1540,
-   577,
-   578,
-   579,
-   1552,
-   1539,
-   1540,
-   577,
-   1270,
-   579,
-   1272,
-   1091,
-   1553,
-   1270,
-   579,
-   1554,
-   1555,
-   635,
-   1556,
-   1557,
-   1558,
-   1559,
-   1560,
-   1561,
-   1562,
-   1563,
-   1163,
-   1564,
-   1565,
-   1539,
-   1540,
-   577,
-   578,
-   579,
-   1552,
-   1539,
-   1540,
-   577,
-   1270,
-   579,
-   1566,
-   1560,
-   635,
-   1556,
-   1557,
-   1558,
-   1559,
-   1560,
-   1561,
-   1567,
-   1563,
-   1163,
-   1564,
-   1565,
-   1270,
-   579,
-   1272,
-   1091,
-   1553,
-   1539,
-   1540,
-   577,
-   578,
-   579,
-   1552,
-   1539,
-   1540,
-   577,
-   1270,
-   579,
-   1272,
-   1091,
-   1553,
-   1270,
-   579,
-   1554,
-   1555,
-   635,
-   1556,
-   1557,
-   1558,
-   1559,
-   1560,
-   1561,
-   1567,
-   1563,
-   1163,
-   1564,
-   1565,
-   1539,
-   1540,
-   577,
-   578,
-   579,
-   1552,
-   1539,
-   1540,
-   577,
-   1270,
-   579,
-   1568,
-   1560,
-   635,
-   1556,
-   1557,
-   1558,
-   1559,
-   1560,
-   1561,
-   1567,
-   1563,
-   1163,
-   1564,
-   1565,
-   1270,
-   579,
-   1272,
-   1091,
-   1553,
-   1539,
-   1540,
-   577,
-   578,
-   579,
-   1569,
-   1570,
-   1571,
-   1572,
-   1573,
-   1163,
-   1564,
-   1565,
-   1539,
-   1574,
-   577,
-   578,
-   579,
-   1575,
-   1576,
-   1577,
-   1578,
-   1579,
-   1580,
-   1581,
-   1576,
-   1577,
-   1582,
-   1583,
-   1584,
-   1577,
-   1585,
-   1577,
-   1585,
-   1586,
-   1576,
-   1577,
-   1582,
-   1583,
-   1584,
-   1577,
-   1585,
-   1539,
-   1587,
-   577,
-   578,
-   579,
-   1588,
-   776,
-   777,
-   776,
-   777,
-   776,
-   777,
-   776,
-   777,
-   1589,
-   1590,
-   1591,
-   1592,
-   1593,
-   1594,
-   483,
-   1595,
-   1596,
-   483,
-   1596,
-   483,
-   1596,
-   483,
-   1596,
-   483,
-   1596,
-   483,
-   1596,
-   483,
-   1597,
-   1598,
-   1599,
-   1600,
-   1601,
-   1602,
-   1603,
-   1604,
-   1605,
-   1606,
-   1604,
-   1605,
-   1606,
-   1604,
-   1605,
-   1606,
-   1604,
-   1605,
-   1607,
-   1608,
-   1607,
-   1609,
-   1610,
-   1611,
-   1612,
-   1613,
-   1614,
-   1615,
-   1616,
-   1617,
-   1618,
-   1619,
-   1620,
-   1621,
-   1622,
-   1623,
-   1624
+   1542
   ],
   "agent-examples-airbnb-·-reservation-confirmation--airbnb-confirmation@mobile": [
    0,
-   1625,
+   1543,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    7,
    8,
    9,
-   1627,
+   1545,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    11,
    8,
    12,
    13,
-   1628,
+   1546,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    7,
@@ -7524,94 +7380,94 @@
    16,
    8,
    17,
-   1629,
+   1547,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    7,
    8,
    19,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1632,
+   1550,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    26,
@@ -7619,10 +7475,10 @@
    27,
    28,
    29,
-   1633,
+   1551,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    16,
@@ -7648,29 +7504,29 @@
   ],
   "agent-examples-airbnb-·-reservation-confirmation--default@mobile": [
    0,
-   1625,
+   1543,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    7,
    8,
    9,
-   1627,
+   1545,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    11,
    8,
    12,
    13,
-   1628,
+   1546,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    7,
@@ -7679,94 +7535,94 @@
    16,
    8,
    17,
-   1629,
+   1547,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    7,
    8,
    19,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    23,
-   1631,
+   1549,
    5,
    22,
    16,
    8,
    24,
-   1632,
+   1550,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    26,
@@ -7774,10 +7630,10 @@
    27,
    28,
    29,
-   1633,
+   1551,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    16,
@@ -7803,19 +7659,19 @@
   ],
   "agent-examples-linear-·-product-digest--default@mobile": [
    0,
-   1634,
+   1552,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    50,
    51,
    52,
-   1635,
+   1553,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    50,
@@ -7824,10 +7680,10 @@
    55,
    51,
    56,
-   1635,
+   1553,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    50,
@@ -7837,10 +7693,10 @@
    51,
    58,
    59,
-   1636,
+   1554,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
    50,
@@ -7849,7 +7705,7 @@
    55,
    51,
    58,
-   1631,
+   1549,
    5,
    6,
    50,
@@ -7858,19 +7714,19 @@
    55,
    51,
    58,
-   1637,
+   1555,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    63,
    51,
    64,
-   1638,
+   1556,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    66,
@@ -7880,10 +7736,10 @@
    67,
    68,
    67,
-   1639,
+   1557,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    55,
@@ -7903,19 +7759,19 @@
   ],
   "agent-examples-linear-·-product-digest--product-digest@mobile": [
    0,
-   1634,
+   1552,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    50,
    51,
    52,
-   1635,
+   1553,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    50,
@@ -7924,10 +7780,10 @@
    55,
    51,
    56,
-   1635,
+   1553,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    50,
@@ -7937,10 +7793,10 @@
    51,
    58,
    59,
-   1636,
+   1554,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
    50,
@@ -7949,7 +7805,7 @@
    55,
    51,
    58,
-   1631,
+   1549,
    5,
    6,
    50,
@@ -7958,19 +7814,19 @@
    55,
    51,
    58,
-   1637,
+   1555,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    63,
    51,
    64,
-   1638,
+   1556,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    66,
@@ -7980,10 +7836,10 @@
    67,
    68,
    67,
-   1639,
+   1557,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    55,
@@ -8003,29 +7859,29 @@
   ],
   "agent-examples-luma-·-event-invite--default@mobile": [
    0,
-   1640,
+   1558,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    83,
    84,
    85,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    87,
    84,
    88,
    89,
-   1641,
+   1559,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
@@ -8034,10 +7890,10 @@
    83,
    84,
    93,
-   1642,
+   1560,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
@@ -8046,10 +7902,10 @@
    91,
    84,
    96,
-   1643,
+   1561,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    98,
@@ -8057,38 +7913,38 @@
    99,
    100,
    101,
-   1644,
+   1562,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
    84,
    103,
    104,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    105,
    84,
    106,
-   1645,
+   1563,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
    84,
    108,
-   1646,
+   1564,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
    87,
@@ -8101,7 +7957,7 @@
    91,
    84,
    112,
-   1631,
+   1549,
    5,
    6,
    87,
@@ -8114,10 +7970,10 @@
    91,
    84,
    112,
-   1647,
+   1565,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
@@ -8140,29 +7996,29 @@
   ],
   "agent-examples-luma-·-event-invite--luma-event-invite@mobile": [
    0,
-   1640,
+   1558,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    83,
    84,
    85,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    87,
    84,
    88,
    89,
-   1641,
+   1559,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
@@ -8171,10 +8027,10 @@
    83,
    84,
    93,
-   1642,
+   1560,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
@@ -8183,10 +8039,10 @@
    91,
    84,
    96,
-   1643,
+   1561,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    98,
@@ -8194,38 +8050,38 @@
    99,
    100,
    101,
-   1644,
+   1562,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
    84,
    103,
    104,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    105,
    84,
    106,
-   1645,
+   1563,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
    84,
    108,
-   1646,
+   1564,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
    87,
@@ -8238,7 +8094,7 @@
    91,
    84,
    112,
-   1631,
+   1549,
    5,
    6,
    87,
@@ -8251,10 +8107,10 @@
    91,
    84,
    112,
-   1647,
+   1565,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    91,
@@ -8277,124 +8133,124 @@
   ],
   "agent-examples-mercury-·-transaction-receipt--default@mobile": [
    0,
-   1648,
+   1566,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    133,
-   1649,
+   1567,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    136,
-   1642,
+   1560,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    138,
-   1650,
+   1568,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    140,
-   1651,
+   1569,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    142,
-   1630,
+   1548,
    130,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    144,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    145,
-   1630,
+   1548,
    130,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    144,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    145,
-   1630,
+   1548,
    130,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    144,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    145,
-   1630,
+   1548,
    130,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    144,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    145,
-   1652,
+   1570,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    147,
    132,
    148,
-   1634,
+   1552,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    149,
@@ -8402,10 +8258,10 @@
    150,
    151,
    152,
-   1653,
+   1571,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
@@ -8430,124 +8286,124 @@
   ],
   "agent-examples-mercury-·-transaction-receipt--mercury-receipt@mobile": [
    0,
-   1648,
+   1566,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    133,
-   1649,
+   1567,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    136,
-   1642,
+   1560,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    138,
-   1650,
+   1568,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    140,
-   1651,
+   1569,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    142,
-   1630,
+   1548,
    130,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    144,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    145,
-   1630,
+   1548,
    130,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    144,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    145,
-   1630,
+   1548,
    130,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    144,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    145,
-   1630,
+   1548,
    130,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    144,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    145,
-   1652,
+   1570,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    147,
    132,
    148,
-   1634,
+   1552,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    149,
@@ -8555,10 +8411,10 @@
    150,
    151,
    152,
-   1653,
+   1571,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
@@ -8583,56 +8439,56 @@
   ],
   "agent-examples-morning-brew-·-daily-digest--default@mobile": [
    0,
-   1654,
+   1572,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    172,
    173,
    174,
-   1655,
+   1573,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    176,
    173,
    177,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
    173,
    179,
-   1656,
+   1574,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    176,
    173,
    181,
-   1635,
+   1553,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    182,
    173,
    183,
    184,
-   1637,
+   1555,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    172,
@@ -8642,19 +8498,19 @@
    173,
    181,
    186,
-   1657,
+   1575,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
    173,
    188,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    172,
@@ -8664,19 +8520,19 @@
    173,
    181,
    186,
-   1657,
+   1575,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
    173,
    188,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    172,
@@ -8686,10 +8542,10 @@
    173,
    181,
    186,
-   1658,
+   1576,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
@@ -8698,10 +8554,10 @@
    172,
    173,
    190,
-   1659,
+   1577,
    2,
    3,
-   1631,
+   1549,
    5,
    192,
    176,
@@ -8712,7 +8568,7 @@
    173,
    193,
    194,
-   1631,
+   1549,
    5,
    195,
    176,
@@ -8723,19 +8579,19 @@
    173,
    193,
    194,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
    173,
    188,
-   1660,
+   1578,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    197,
@@ -8745,10 +8601,10 @@
    198,
    199,
    198,
-   1661,
+   1579,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    176,
@@ -8773,56 +8629,56 @@
   ],
   "agent-examples-morning-brew-·-daily-digest--morning-brew-digest@mobile": [
    0,
-   1654,
+   1572,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    172,
    173,
    174,
-   1655,
+   1573,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    176,
    173,
    177,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
    173,
    179,
-   1656,
+   1574,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    176,
    173,
    181,
-   1635,
+   1553,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    182,
    173,
    183,
    184,
-   1637,
+   1555,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    172,
@@ -8832,19 +8688,19 @@
    173,
    181,
    186,
-   1657,
+   1575,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
    173,
    188,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    172,
@@ -8854,19 +8710,19 @@
    173,
    181,
    186,
-   1657,
+   1575,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
    173,
    188,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    172,
@@ -8876,10 +8732,10 @@
    173,
    181,
    186,
-   1658,
+   1576,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
@@ -8888,10 +8744,10 @@
    172,
    173,
    190,
-   1659,
+   1577,
    2,
    3,
-   1631,
+   1549,
    5,
    192,
    176,
@@ -8902,7 +8758,7 @@
    173,
    193,
    194,
-   1631,
+   1549,
    5,
    195,
    176,
@@ -8913,19 +8769,19 @@
    173,
    193,
    194,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    178,
    173,
    188,
-   1660,
+   1578,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    197,
@@ -8935,10 +8791,10 @@
    198,
    199,
    198,
-   1661,
+   1579,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    176,
@@ -8963,29 +8819,29 @@
   ],
   "agent-examples-nike-·-sneaker-drop--default@mobile": [
    0,
-   1662,
+   1580,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    219,
    220,
    221,
-   1663,
+   1581,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    223,
    220,
    224,
    225,
-   1664,
+   1582,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    219,
@@ -8994,10 +8850,10 @@
    228,
    220,
    229,
-   1665,
+   1583,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    231,
@@ -9005,10 +8861,10 @@
    232,
    233,
    234,
-   1666,
+   1584,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    236,
@@ -9029,29 +8885,29 @@
   ],
   "agent-examples-nike-·-sneaker-drop--nike-drop@mobile": [
    0,
-   1662,
+   1580,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    219,
    220,
    221,
-   1663,
+   1581,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    223,
    220,
    224,
    225,
-   1664,
+   1582,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    219,
@@ -9060,10 +8916,10 @@
    228,
    220,
    229,
-   1665,
+   1583,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    231,
@@ -9071,10 +8927,10 @@
    232,
    233,
    234,
-   1666,
+   1584,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    236,
@@ -9095,47 +8951,47 @@
   ],
   "agent-examples-notion-·-welcome--default@mobile": [
    0,
-   1667,
+   1585,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    245,
-   1668,
+   1586,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    247,
-   1669,
+   1587,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    249,
-   1638,
+   1556,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    250,
    132,
    251,
    252,
-   1660,
+   1578,
    2,
    3,
-   1631,
+   1549,
    5,
    253,
    131,
@@ -9144,7 +9000,7 @@
    135,
    132,
    255,
-   1631,
+   1549,
    5,
    256,
    131,
@@ -9153,10 +9009,10 @@
    135,
    132,
    255,
-   1659,
+   1577,
    2,
    3,
-   1631,
+   1549,
    5,
    192,
    131,
@@ -9165,7 +9021,7 @@
    135,
    132,
    255,
-   1631,
+   1549,
    5,
    195,
    131,
@@ -9174,10 +9030,10 @@
    135,
    132,
    255,
-   1670,
+   1588,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    149,
@@ -9185,10 +9041,10 @@
    150,
    258,
    259,
-   1671,
+   1589,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    261,
@@ -9205,10 +9061,10 @@
    262,
    263,
    264,
-   1672,
+   1590,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
@@ -9231,47 +9087,47 @@
   ],
   "agent-examples-notion-·-welcome--notion-welcome@mobile": [
    0,
-   1667,
+   1585,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    245,
-   1668,
+   1586,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    247,
-   1669,
+   1587,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    249,
-   1638,
+   1556,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    250,
    132,
    251,
    252,
-   1660,
+   1578,
    2,
    3,
-   1631,
+   1549,
    5,
    253,
    131,
@@ -9280,7 +9136,7 @@
    135,
    132,
    255,
-   1631,
+   1549,
    5,
    256,
    131,
@@ -9289,10 +9145,10 @@
    135,
    132,
    255,
-   1659,
+   1577,
    2,
    3,
-   1631,
+   1549,
    5,
    192,
    131,
@@ -9301,7 +9157,7 @@
    135,
    132,
    255,
-   1631,
+   1549,
    5,
    195,
    131,
@@ -9310,10 +9166,10 @@
    135,
    132,
    255,
-   1670,
+   1588,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    149,
@@ -9321,10 +9177,10 @@
    150,
    258,
    259,
-   1671,
+   1589,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    261,
@@ -9341,10 +9197,10 @@
    262,
    263,
    264,
-   1672,
+   1590,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
@@ -9367,124 +9223,124 @@
   ],
   "agent-examples-stripe-·-payment-receipt--default@mobile": [
    0,
-   1648,
+   1566,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    281,
-   1667,
+   1585,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    282,
-   1673,
+   1591,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    284,
-   1650,
+   1568,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    285,
-   1641,
+   1559,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    147,
    132,
    287,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    288,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    289,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    288,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    289,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    288,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    289,
-   1674,
+   1592,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    147,
    132,
    287,
-   1635,
+   1553,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
    131,
    132,
    291,
-   1631,
+   1549,
    5,
    6,
    131,
    132,
    292,
-   1652,
+   1570,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    149,
@@ -9492,10 +9348,10 @@
    150,
    293,
    294,
-   1675,
+   1593,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
@@ -9519,124 +9375,124 @@
   ],
   "agent-examples-stripe-·-payment-receipt--stripe-receipt@mobile": [
    0,
-   1648,
+   1566,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    281,
-   1667,
+   1585,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    282,
-   1673,
+   1591,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    284,
-   1650,
+   1568,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    285,
-   1641,
+   1559,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    147,
    132,
    287,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    288,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    289,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    288,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    289,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    288,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    289,
-   1674,
+   1592,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    147,
    132,
    287,
-   1635,
+   1553,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
    131,
    132,
    291,
-   1631,
+   1549,
    5,
    6,
    131,
    132,
    292,
-   1652,
+   1570,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    149,
@@ -9644,10 +9500,10 @@
    150,
    293,
    294,
-   1675,
+   1593,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
@@ -9671,110 +9527,110 @@
   ],
   "agent-examples-warby-parker-·-order-shipped--default@mobile": [
    0,
-   1676,
+   1594,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    312,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    250,
    132,
    251,
    313,
-   1667,
+   1585,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    315,
-   1673,
+   1591,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    317,
-   1677,
+   1595,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    319,
-   1641,
+   1559,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    320,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    321,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    322,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    321,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    322,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    321,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    322,
-   1628,
+   1546,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    149,
@@ -9782,19 +9638,19 @@
    323,
    324,
    325,
-   1678,
+   1596,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    320,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    327,
    135,
@@ -9803,16 +9659,16 @@
    135,
    132,
    329,
-   1631,
+   1549,
    5,
    327,
    135,
    132,
    330,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    327,
    135,
@@ -9821,50 +9677,50 @@
    135,
    132,
    329,
-   1631,
+   1549,
    5,
    327,
    135,
    132,
    330,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    321,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    322,
-   1679,
+   1597,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    332,
    333,
-   1680,
+   1598,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    335,
-   1681,
+   1599,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
@@ -9898,110 +9754,110 @@
   ],
   "agent-examples-warby-parker-·-order-shipped--warby-order-shipped@mobile": [
    0,
-   1676,
+   1594,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    312,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    250,
    132,
    251,
    313,
-   1667,
+   1585,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    315,
-   1673,
+   1591,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    131,
    132,
    317,
-   1677,
+   1595,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    319,
-   1641,
+   1559,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    320,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    321,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    322,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    321,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    322,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    321,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    322,
-   1628,
+   1546,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    149,
@@ -10009,19 +9865,19 @@
    323,
    324,
    325,
-   1678,
+   1596,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    320,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    327,
    135,
@@ -10030,16 +9886,16 @@
    135,
    132,
    329,
-   1631,
+   1549,
    5,
    327,
    135,
    132,
    330,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    327,
    135,
@@ -10048,50 +9904,50 @@
    135,
    132,
    329,
-   1631,
+   1549,
    5,
    327,
    135,
    132,
    330,
-   1630,
+   1548,
    2,
    3,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    321,
-   1631,
+   1549,
    5,
    22,
    135,
    132,
    322,
-   1679,
+   1597,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    332,
    333,
-   1680,
+   1598,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
    132,
    335,
-   1681,
+   1599,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
    135,
@@ -10516,824 +10372,873 @@
   ],
   "components-image--styled-image@mobile": [
    549,
-   567
+   566
   ],
   "components-image--thumbnail-image@mobile": [
+   567,
    568,
-   569,
-   570
+   569
   ],
   "components-menu--default@mobile": [
+   570,
    571,
-   572,
+   570,
    571,
-   572,
+   570,
    571,
-   572,
-   571,
-   573
+   570,
+   572
   ],
   "components-menu--email-header@mobile": [
+   0,
+   1600,
+   2,
+   3,
+   1544,
+   5,
+   6,
    574,
    575,
-   1682,
-   1683,
+   576,
+   1562,
+   2,
+   3,
+   1544,
+   5,
+   6,
    578,
    579,
    580,
    581,
-   582,
-   1682,
-   1683,
-   578,
-   579,
+   580,
+   581,
+   580,
+   581,
+   580,
+   1601,
+   2,
+   3,
+   1544,
+   5,
    583,
    584,
+   579,
    585,
-   584,
-   585,
-   584,
-   585,
-   584,
-   586,
-   1682,
-   1683,
-   578,
+   1602,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   574,
    587,
    588,
+   584,
+   579,
    589,
    590,
    591,
-   1682,
-   1683,
-   578,
-   579,
    592,
-   593,
-   588,
-   594,
+   593
+  ],
+  "components-menu--footer-links@mobile": [
+   0,
+   1603,
+   2,
+   3,
+   1544,
+   5,
    595,
-   596,
+   584,
+   579,
+   585,
+   1604,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   584,
    597,
    598,
-   599
-  ],
-  "components-menu--footer-links@mobile": [
-   574,
-   600,
-   1682,
-   1683,
+   1605,
+   2,
+   3,
+   1544,
+   5,
+   6,
    578,
+   579,
+   600,
    601,
-   588,
-   589,
-   590,
+   600,
+   601,
+   600,
+   601,
+   600,
    602,
-   1682,
-   1683,
-   578,
-   579,
-   603,
+   603
+  ],
+  "components-menu--full-props-api@mobile": [
+   570,
+   604,
+   570,
+   604,
+   570,
    604,
+   570,
+   572
+  ],
+  "components-menu--styled-navigation@mobile": [
    605,
    606,
-   1682,
-   1683,
-   578,
-   579,
-   583,
-   607,
-   608,
-   607,
-   608,
-   607,
-   608,
-   607,
+   1606,
+   1607,
    609,
-   610
-  ],
-  "components-menu--full-props-api@mobile": [
-   571,
-   611,
-   571,
-   611,
-   571,
+   610,
    611,
-   571,
-   573
-  ],
-  "components-menu--styled-navigation@mobile": [
-   574,
    612,
-   1682,
-   1683,
-   578,
-   579,
-   583,
+   613,
+   1606,
+   1607,
+   609,
+   610,
    614,
    615,
-   1682,
-   1683,
-   578,
-   579,
    616,
    617,
-   588,
    618,
    619,
-   620,
-   621,
-   622
+   620
   ],
   "components-paragraph--article-paragraph@mobile": [
-   623,
-   624,
-   625
+   621,
+   622
   ],
   "components-paragraph--callout-paragraph@mobile": [
-   626,
-   627,
-   628
+   623,
+   624
   ],
   "components-paragraph--email-paragraph@mobile": [
-   629,
-   630,
-   631
+   625,
+   626
   ],
   "components-paragraph--long-content@mobile": [
-   632,
-   633,
-   634
+   627,
+   628
   ],
   "components-paragraph--simple-text@mobile": [
-   635,
-   636,
-   637
+   629,
+   630
   ],
   "components-paragraph--styled-paragraph@mobile": [
-   638,
-   639,
-   640
+   631,
+   632
   ],
   "components-paragraph--with-semantic-props@mobile": [
-   641,
-   642,
-   643
+   633,
+   634
   ],
   "components-social--colorful-social-icons@mobile": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
-   644,
-   645
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
   ],
   "components-social--default@mobile": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
   ],
   "components-social--email-social-icons@mobile": [
    0,
-   646,
-   647,
+   637,
+   638,
    0,
-   646,
-   647,
+   637,
+   638,
    0,
-   646,
-   647,
+   637,
+   638,
    0,
-   646,
-   647
+   637,
+   638
   ],
   "components-social--rounded-social-icons@mobile": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
-   644,
-   645
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
   ],
   "components-social--social-media-bar@mobile": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
-   644,
-   645
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
+  ],
+  "components-social--squared-social-icons@mobile": [
+   635,
+   636,
+   635,
+   636,
+   635,
+   636,
+   635,
+   636
   ],
-  "components-social--squared-social-icons@mobile": [
-   644,
-   645,
-   644,
-   645,
-   644,
-   645,
+  "components-table--data-table@mobile": [
+   639,
+   640,
+   641,
+   642,
+   643,
    644,
    645
   ],
-  "components-table--data-table@mobile": [
+  "components-table--default@mobile": [
+   639,
+   646,
+   647,
    648,
    649,
-   650,
+   650
+  ],
+  "components-table--email-table@mobile": [
+   639,
+   646,
    651,
    652,
    653,
    654
   ],
-  "components-table--default@mobile": [
-   648,
+  "components-table--feature-comparison@mobile": [
+   639,
+   655,
+   656,
+   657,
    655,
    656,
    657,
-   658,
-   659
-  ],
-  "components-table--email-table@mobile": [
-   648,
    655,
+   656,
+   658,
+   659,
    660,
    661,
    662,
    663
   ],
-  "components-table--feature-comparison@mobile": [
-   648,
-   664,
-   665,
-   666,
+  "components-table--pricing-table@mobile": [
+   639,
+   640,
    664,
    665,
    666,
-   664,
-   665,
    667,
    668,
-   669,
+   669
+  ],
+  "components-table--product-table@mobile": [
+   639,
    670,
    671,
-   672
-  ],
-  "components-table--pricing-table@mobile": [
-   648,
-   649,
+   672,
+   670,
+   671,
+   672,
    673,
    674,
    675,
    676,
-   677,
-   678
+   677
   ],
-  "components-table--product-table@mobile": [
-   648,
-   679,
-   680,
-   681,
+  "components-table--table-showcase@mobile": [
+   494,
+   639,
+   670,
+   678,
    679,
+   670,
+   678,
+   494,
+   639,
+   646,
+   494,
+   639,
+   646,
+   494,
+   639,
+   655,
+   656,
+   657,
+   655,
+   656,
+   494,
+   639,
+   646,
    680,
+   647,
    681,
    682,
    683,
    684,
    685,
-   686
-  ],
-  "components-table--table-showcase@mobile": [
-   494,
-   648,
-   679,
+   686,
    687,
    688,
-   679,
-   687,
-   494,
-   648,
-   655,
-   494,
-   648,
-   655,
-   494,
-   648,
-   664,
-   665,
-   666,
-   664,
-   665,
-   494,
-   648,
-   655,
    689,
-   656,
    690,
    691,
    692,
    693,
    694,
+   664,
    695,
    696,
+   661,
    697,
    698,
-   699,
+   652,
+   653,
+   699
+  ],
+  "components-video--default@mobile": [],
+  "components-video--email-video@mobile": [
    700,
    701,
-   702,
-   703,
-   673,
+   702
+  ],
+  "components-video--full-props-api@mobile": [],
+  "components-video--product-demo@mobile": [
+   0,
+   1608,
+   2,
+   3,
+   1544,
+   5,
+   6,
    704,
    705,
-   670,
    706,
    707,
-   661,
-   662,
-   708
-  ],
-  "components-video--default@mobile": [],
-  "components-video--email-video@mobile": [
+   708,
    709,
-   710,
-   711
-  ],
-  "components-video--full-props-api@mobile": [],
-  "components-video--product-demo@mobile": [
-   574,
+   1609,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   711,
+   708,
    712,
-   1682,
-   1683,
-   578,
-   579,
    713,
    714,
-   588,
-   715,
+   1610,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   707,
    716,
    717,
-   1682,
-   1683,
-   578,
-   579,
    718,
    719,
-   1682,
-   1683,
-   578,
-   579,
    720,
    721,
    722,
-   723,
+   1611,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   707,
+   708,
    724,
    725,
    726,
-   1682,
-   1683,
-   578,
-   579,
-   588,
    727,
-   728,
-   729,
-   730,
-   731,
    378,
-   732
+   728
   ],
   "components-video--you-tube-embed@mobile": [],
   "configuration-unlayerprovider--after-provider@mobile": [
-   574,
+   0,
+   1612,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   704,
+   730,
+   731,
+   707,
+   732,
    733,
-   1682,
-   1683,
-   578,
-   579,
+   718,
+   719,
+   720,
    734,
    735,
    736,
    737,
-   723,
-   724,
-   738,
-   739,
-   740,
-   741
+   738
   ],
   "configuration-unlayerprovider--backward-compatible@mobile": [
-   574,
+   605,
+   739,
+   1606,
+   1607,
+   609,
+   610,
+   741,
    742,
-   1682,
-   1683,
-   578,
-   579,
-   734,
    743,
-   736,
-   737,
-   723,
-   724,
    744,
    745,
    746,
-   747
+   747,
+   748,
+   749,
+   750
   ],
   "configuration-unlayerprovider--before-provider@mobile": [
    0,
-   1684,
+   1613,
    2,
    3,
-   1626,
+   1544,
+   5,
+   6,
+   704,
+   730,
+   752,
+   707,
+   732,
+   733,
+   718,
+   719,
+   720,
+   753,
+   735,
+   754,
+   755,
+   756
+  ],
+  "configuration-unlayerprovider--full-email-template@mobile": [
+   0,
+   1614,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   704,
+   719,
+   758,
+   1602,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   707,
+   732,
+   760,
+   718,
+   719,
+   720,
+   761,
+   735,
+   1615,
+   2,
+   3,
+   1616,
+   5,
+   6,
+   707,
+   705,
+   764,
+   707,
+   719,
+   765,
+   1616,
+   5,
+   6,
+   707,
+   705,
+   764,
+   707,
+   719,
+   765,
+   1616,
    5,
    6,
-   749,
-   750,
-   751,
-   752,
-   753,
-   754,
-   755,
-   756,
-   757,
-   758,
-   759,
-   760,
-   761,
-   762
-  ],
-  "configuration-unlayerprovider--full-email-template@mobile": [
-   574,
-   763,
-   1682,
-   1683,
-   578,
-   579,
+   707,
+   705,
    764,
+   707,
+   719,
    765,
-   742,
-   1682,
-   1683,
-   578,
-   579,
-   736,
-   766,
-   723,
-   724,
+   1617,
+   2,
+   3,
+   1544,
+   5,
+   6,
    767,
    768,
-   1682,
-   1683,
-   1685,
-   579,
+   769,
    770,
    771,
-   772,
-   773,
-   1685,
-   579,
+   769,
    770,
    771,
-   772,
-   773,
-   1685,
-   579,
+   769,
    770,
    771,
+   707,
+   719,
    772,
    773,
    774,
-   1682,
-   1683,
-   578,
-   579,
+   407,
    775,
    776,
    777,
-   776,
-   777,
-   776,
-   777,
-   772,
    778,
+   518,
    779,
-   780,
-   407,
+   780
+  ],
+  "configuration-unlayerprovider--mode-cascading@mobile": [
+   0,
+   1602,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   704,
+   730,
    781,
+   707,
+   732,
+   733,
+   718,
+   719,
+   720,
    782,
-   783,
+   735,
+   1618,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   707,
+   719,
    784,
-   518,
    785,
-   786
-  ],
-  "configuration-unlayerprovider--mode-cascading@mobile": [
-   574,
-   742,
-   1682,
-   1683,
-   578,
-   579,
-   734,
-   743,
-   736,
-   737,
-   723,
-   724,
+   786,
    787,
-   788,
-   1682,
-   1683,
-   578,
-   579,
-   772,
-   789,
-   790,
-   791,
-   792,
-   793
+   788
   ],
   "configuration-unlayerprovider--mode-override@mobile": [
-   574,
+   0,
+   1619,
+   1620,
+   3,
+   1621,
+   5,
+   6,
+   704,
+   730,
+   792,
+   707,
+   768,
+   793,
+   718,
+   719,
+   720,
+   782,
+   735,
    794,
-   1682,
-   1683,
-   578,
-   579,
-   734,
-   795,
+   1606,
+   1607,
+   1622,
+   610,
+   741,
    796,
    797,
-   723,
-   724,
-   787,
    798,
-   1682,
-   1683,
-   578,
-   579,
-   734,
    799,
-   772,
    800,
    801,
    802,
-   803,
-   804,
-   805
+   803
   ],
   "configuration-unlayerprovider--social-with-cdn@mobile": [
-   574,
+   605,
+   804,
+   1606,
+   1607,
+   609,
+   610,
+   805,
    806,
-   1682,
-   1683,
-   578,
-   579,
-   713,
    807,
    808,
    809,
    810,
-   776,
-   777,
-   776,
-   777,
-   776,
-   777,
-   776,
-   777,
    811,
-   812
+   810,
+   811,
+   810,
+   811,
+   810,
+   811,
+   812,
+   813
   ],
   "configuration-unlayerprovider--table-with-merge-tags@mobile": [
-   574,
-   794,
-   1682,
-   1683,
-   578,
-   579,
-   713,
-   795,
-   808,
-   813,
+   605,
    814,
+   1606,
+   1607,
+   609,
+   610,
+   805,
    815,
+   807,
    816,
    817,
    818,
    819,
    820,
    821,
-   822
-  ],
-  "custom-tools-examples-gallery--accordion-tool@mobile": [
+   822,
    823,
    824,
-   1686,
-   1687,
+   825
+  ],
+  "custom-tools-examples-gallery--accordion-tool@mobile": [
+   826,
    827,
-   828,
-   829,
+   1623,
+   1624,
    830,
    831,
    832,
    833,
    834,
-   832,
-   833,
-   834,
-   832,
-   833,
-   834,
    835,
    836,
    837,
-   838,
+   835,
+   836,
+   837,
+   835,
+   836,
    837,
+   838,
    839,
-   837
+   840,
+   841,
+   840,
+   842,
+   840
   ],
   "custom-tools-examples-gallery--email-adaptations@mobile": [
    0,
-   1688,
+   1625,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   749,
-   841,
-   842,
-   843,
+   704,
    844,
    845,
    846,
-   845,
-   846,
-   845,
-   846,
    847,
    848,
    849,
-   850,
+   848,
    849,
-   850,
+   848,
    849,
    850,
    851,
-   836,
    852,
-   838,
    853,
-   839,
+   852,
+   853,
+   852,
+   853,
    854,
+   839,
    855,
+   841,
    856,
+   842,
    857,
    858,
    859,
-   860
+   860,
+   861,
+   862,
+   863
   ],
   "custom-tools-examples-gallery--map-tool@mobile": [
-   823,
-   824,
-   1686,
-   1687,
+   826,
    827,
-   828,
-   862,
+   1623,
+   1624,
    830,
-   863,
-   864,
-   865,
-   864,
-   865,
-   864,
-   865,
-   864,
-   865,
-   864,
-   865,
-   864,
+   831,
    865,
+   833,
    866,
    867,
-   868
+   868,
+   867,
+   868,
+   867,
+   868,
+   867,
+   868,
+   867,
+   868,
+   867,
+   868,
+   869,
+   870,
+   871
   ],
   "custom-tools-examples-gallery--product-library-tool@mobile": [
    0,
-   1689,
+   1626,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   870,
-   871,
-   872,
    873,
-   872,
    874,
    875,
    876,
+   875,
    877,
    878,
    879,
    880,
    881,
-   882
+   882,
+   883,
+   884,
+   885
   ],
   "custom-tools-examples-gallery--qr-code-tool@mobile": [
    0,
-   1690,
+   1627,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   749,
-   884,
-   885,
-   886,
+   704,
    887,
    888,
-   889
-  ],
-  "custom-tools-examples-gallery--tabs-tool@mobile": [
-   823,
-   824,
-   1686,
-   1687,
-   827,
-   828,
+   889,
    890,
    891,
-   892,
-   893,
-   855,
-   857,
-   859,
-   856
+   892
   ],
-  "custom-tools-examples-gallery--two-independent-accordions@mobile": [
-   823,
-   824,
-   1686,
-   1687,
+  "custom-tools-examples-gallery--tabs-tool@mobile": [
+   826,
    827,
-   828,
+   1623,
+   1624,
+   830,
+   831,
+   893,
    894,
-   832,
-   833,
-   834,
-   832,
-   833,
-   834,
-   832,
-   833,
-   834,
    895,
    896,
+   858,
+   860,
+   862,
+   859
+  ],
+  "custom-tools-examples-gallery--two-independent-accordions@mobile": [
+   826,
+   827,
+   1623,
+   1624,
+   830,
+   831,
    897,
-   834,
-   896,
-   897,
-   834,
-   896,
-   897,
-   834,
+   835,
    836,
    837,
-   838,
-   837,
-   839,
+   835,
+   836,
    837,
+   835,
    836,
    837,
-   838,
+   898,
+   899,
+   900,
+   837,
+   899,
+   900,
    837,
+   899,
+   900,
+   837,
+   839,
+   840,
+   841,
+   840,
+   842,
+   840,
    839,
-   837
+   840,
+   841,
+   840,
+   842,
+   840
   ],
   "custom-tools-registered-tools--countdown-customized@mobile": [
    0,
-   1691,
+   1628,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   899,
-   900,
-   901,
    902,
    903,
    904,
@@ -11341,252 +11246,252 @@
    906,
    907,
    908,
-   909
+   909,
+   910,
+   911,
+   912
   ],
   "custom-tools-registered-tools--countdown-tool@mobile": [
    0,
-   1688,
+   1625,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   899,
-   910,
-   911,
    902,
-   912,
    913,
-   905,
    914,
-   907,
+   905,
    915,
-   909
+   916,
+   908,
+   917,
+   910,
+   918,
+   912
   ],
   "custom-tools-registered-tools--inside-a-full-design@mobile": [
    0,
-   1692,
+   1629,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   749,
-   917,
-   918,
-   752,
-   919,
+   704,
    920,
    921,
+   707,
    922,
    923,
-   864,
    924,
    925,
+   867,
    926,
    927,
    928,
    929,
    930,
-   899,
    931,
-   911,
-   902,
    932,
+   902,
    933,
+   914,
+   905,
    934,
    935,
    936,
    937,
    938,
-   913,
-   905,
-   914,
-   907,
-   915,
-   909
+   939,
+   940,
+   916,
+   908,
+   917,
+   910,
+   918,
+   912
   ],
   "custom-tools-registered-tools--product-card-tool@mobile": [
    0,
-   1689,
+   1626,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   922,
-   871,
-   864,
    924,
-   925,
+   874,
+   867,
    926,
    927,
    928,
    929,
    930,
-   934,
-   939,
+   931,
+   932,
    936,
-   940
+   941,
+   938,
+   942
   ],
   "examples-phone-overrides--default@mobile": [
    0,
-   1690,
-   941,
+   1627,
+   943,
    3,
-   1626,
+   1544,
    5,
-   1693,
-   943,
-   944,
+   1630,
    945,
    946,
    947,
    948,
-   1694,
-   950,
-   1695,
-   952,
-   1696,
-   943,
-   954,
-   1697,
-   1698,
+   949,
+   1631,
+   951,
+   1632,
+   953,
+   1633,
+   945,
+   955,
+   1634,
    957,
-   944,
+   946,
    958,
    959,
    960,
-   964,
+   963,
    961,
    962,
-   963,
-   943,
+   945,
+   964,
    965,
    966,
    967,
    968,
    969,
-   970,
-   971,
-   1699
+   1635
   ],
   "examples-spotify-premium-welcome--default@mobile": [
    0,
-   1700,
+   1636,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
+   972,
+   973,
    974,
    975,
-   976,
-   977,
-   1701,
+   1637,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   974,
-   975,
-   979,
-   980,
-   1702,
+   972,
+   973,
+   977,
+   978,
+   1638,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
+   980,
+   973,
+   981,
+   980,
+   973,
    982,
-   975,
    983,
-   982,
-   975,
+   973,
    984,
-   985,
-   975,
-   986,
-   1703,
+   1639,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
+   986,
+   973,
+   987,
    988,
-   975,
    989,
-   990,
-   991,
-   1701,
+   1637,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   993,
-   975,
-   994,
-   1704,
+   991,
+   973,
+   992,
+   1640,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   982,
-   975,
-   996,
-   1705,
+   980,
+   973,
+   994,
+   1641,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
-   1631,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
+   1549,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
-   1706,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
+   1642,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
-   1631,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
+   1549,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
-   1707,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
+   1643,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   985,
-   975,
+   983,
+   973,
+   1000,
+   1001,
    1002,
    1003,
    1004,
@@ -11599,126 +11504,126 @@
    1011,
    1012,
    1013,
-   1014,
-   1015,
-   1016
+   1014
   ],
   "examples-spotify-premium-welcome--spotify-premium-welcome@mobile": [
    0,
-   1700,
+   1636,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
+   972,
+   973,
    974,
    975,
-   976,
-   977,
-   1701,
+   1637,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   974,
-   975,
-   979,
-   980,
-   1702,
+   972,
+   973,
+   977,
+   978,
+   1638,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
+   980,
+   973,
+   981,
+   980,
+   973,
    982,
-   975,
    983,
-   982,
-   975,
+   973,
    984,
-   985,
-   975,
-   986,
-   1703,
+   1639,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
+   986,
+   973,
+   987,
    988,
-   975,
    989,
-   990,
-   991,
-   1701,
+   1637,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   993,
-   975,
-   994,
-   1704,
+   991,
+   973,
+   992,
+   1640,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   982,
-   975,
-   996,
-   1705,
+   980,
+   973,
+   994,
+   1641,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
-   1631,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
+   1549,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
-   1706,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
+   1642,
    2,
    3,
-   1631,
+   1549,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
-   1631,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
+   1549,
    5,
    6,
-   982,
-   975,
-   998,
-   985,
-   975,
-   999,
-   1707,
+   980,
+   973,
+   996,
+   983,
+   973,
+   997,
+   1643,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   985,
-   975,
+   983,
+   973,
+   1000,
+   1001,
    1002,
    1003,
    1004,
@@ -11731,129 +11636,141 @@
    1011,
    1012,
    1013,
-   1014,
-   1015,
-   1016
+   1014
   ],
   "layout-body--ecommerce@mobile": [
    0,
-   1708,
+   1644,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   752,
-   1018,
-   1019,
-   1020,
-   1709,
+   707,
+   708,
+   1016,
+   1645,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   752,
+   707,
+   708,
    1018,
-   1022,
-   1023,
-   1630,
+   1548,
    2,
    3,
-   1626,
+   1544,
+   5,
+   6,
+   1019,
+   708,
+   1020,
+   1021,
+   1646,
+   2,
+   3,
+   1544,
    5,
    6,
+   704,
+   730,
+   1023,
+   707,
    1024,
-   1018,
    1025,
-   1026,
-   1710,
+   1647,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   749,
-   750,
+   1027,
+   719,
    1028,
-   752,
-   1029,
-   1030,
-   1031,
-   1711,
+   1648,
    2,
    3,
-   1626,
+   1549,
    5,
-   6,
+   1030,
+   1019,
+   768,
+   1020,
+   1031,
+   707,
+   1032,
    1033,
-   756,
+   707,
+   708,
    1034,
-   1712,
-   2,
-   3,
-   1631,
+   1549,
    5,
-   1036,
-   1024,
-   1037,
-   1025,
-   1038,
-   752,
-   1039,
-   1040,
-   1041,
-   752,
-   1018,
-   1042,
-   1043,
-   1631,
+   1035,
+   1019,
+   768,
+   1020,
+   1031,
+   707,
+   1032,
+   1033,
+   707,
+   708,
+   1034,
+   1649,
+   2,
+   3,
+   1544,
    5,
-   1044,
-   1024,
+   6,
+   704,
+   705,
    1037,
-   1025,
+   707,
+   716,
    1038,
-   752,
+   718,
+   719,
+   720,
    1039,
    1040,
-   1041,
-   752,
-   1018,
-   1042,
-   1043,
-   1713,
+   1647,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   749,
+   707,
+   708,
+   1042,
+   1043,
+   1044,
+   1045,
    1046,
    1047,
-   752,
    1048,
    1049,
    1050,
-   755,
-   756,
-   757,
    1051,
    1052,
-   1711,
-   2,
-   3,
-   1626,
-   5,
-   6,
-   752,
-   1018,
-   1054,
+   1053,
+   1054
+  ],
+  "layout-body--magazine@mobile": [
+   605,
    1055,
-   1056,
+   1606,
+   1607,
+   609,
+   610,
    1057,
    1058,
    1059,
+   1606,
+   1607,
+   609,
+   610,
    1060,
    1061,
    1062,
@@ -11861,459 +11778,477 @@
    1064,
    1065,
    1066,
-   1067
-  ],
-  "layout-body--magazine@mobile": [
-   574,
+   1067,
    1068,
-   1682,
-   1683,
-   578,
-   579,
+   1606,
+   1607,
+   609,
+   610,
+   1069,
    1070,
    1071,
    1072,
-   1073,
-   1682,
-   1683,
-   578,
-   579,
+   1606,
+   1607,
+   1650,
+   1074,
+   1075,
+   1076,
+   1077,
+   1078,
+   1079,
+   616,
+   1080,
+   1650,
+   1074,
+   1075,
+   1076,
+   1077,
+   1078,
+   1079,
+   616,
+   1080,
+   1650,
    1074,
    1075,
    1076,
    1077,
    1078,
-   720,
    1079,
+   616,
    1080,
    1081,
+   1606,
+   1607,
+   609,
+   610,
+   616,
    1082,
    1083,
    1084,
-   1682,
-   1683,
-   578,
-   579,
-   603,
    1085,
    1086,
    1087,
    1088,
-   1682,
-   1683,
-   1685,
-   1089,
-   1090,
-   1091,
-   1092,
-   1093,
-   1094,
-   588,
-   1095,
-   1096,
-   1685,
-   1089,
-   1090,
-   1091,
-   1092,
-   1093,
-   1094,
-   588,
-   1095,
-   1096,
-   1685,
    1089,
    1090,
    1091,
    1092,
    1093,
    1094,
-   588,
-   1095,
-   1096,
-   1097,
-   1682,
-   1683,
-   578,
-   579,
-   588,
-   1098,
-   1099,
-   1100,
-   1101,
-   1102,
-   1103,
-   1104,
-   1105,
-   1106,
-   1107,
-   1108,
-   1109,
-   1110,
-   1111,
-   1112
+   1095
   ],
   "layout-body--newsletter@mobile": [
    0,
-   1714,
+   1651,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   752,
-   1114,
-   1115,
-   1116,
-   752,
-   1018,
-   1117,
-   1118,
-   1710,
+   707,
+   1097,
+   1098,
+   707,
+   708,
+   1099,
+   1646,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   752,
-   1120,
-   1121,
-   1122,
-   749,
-   1120,
-   1123,
-   752,
-   753,
-   1124,
-   1125,
-   755,
-   756,
-   757,
-   1126,
-   1127,
-   1715,
+   707,
+   1101,
+   1102,
+   704,
+   1101,
+   1103,
+   707,
+   732,
+   1104,
+   718,
+   719,
+   720,
+   1105,
+   1106,
+   1652,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   1033,
-   756,
-   1129,
-   1716,
+   1027,
+   719,
+   1108,
+   1653,
    2,
    3,
-   1626,
+   1544,
    5,
    6,
-   752,
-   1018,
-   1121,
-   1122,
-   1712,
+   707,
+   708,
+   1102,
+   1648,
    2,
    3,
-   1717,
+   1616,
    5,
-   1133,
-   1024,
-   1120,
-   1025,
-   1134,
-   749,
+   1111,
+   1019,
+   1101,
+   1020,
+   1112,
+   704,
+   1097,
+   1113,
+   707,
+   708,
    1114,
-   1135,
-   752,
-   1018,
-   1136,
-   1137,
-   1717,
+   1616,
    5,
-   1133,
-   1024,
-   1120,
-   1025,
-   1134,
-   749,
+   1111,
+   1019,
+   1101,
+   1020,
+   1112,
+   704,
+   1097,
+   1113,
+   707,
+   708,
    1114,
-   1135,
-   752,
-   1018,
-   1136,
-   1137,
-   1717,
+   1616,
    5,
-   1133,
-   1024,
+   1111,
+   1019,
+   1101,
+   1020,
+   1112,
+   704,
+   1097,
+   1113,
+   707,
+   708,
+   1114,
+   1654,
+   2,
+   3,
+   1544,
+   5,
+   6,
+   707,
+   1032,
+   1116,
+   707,
+   768,
+   1117,
+   707,
+   708,
+   1117,
+   1118,
+   1119,
    1120,
-   1025,
+   1121,
+   1122,
+   1123,
+   1124,
+   1125,
+   1126,
+   1127,
+   1128,
+   1129,
+   1130,
+   1131,
+   1132,
+   1133
+  ],
+  "layout-body--playground@mobile": [
+   605,
    1134,
-   749,
-   1114,
+   1606,
+   1607,
+   609,
+   610,
+   741,
    1135,
-   752,
-   1018,
+   743,
    1136,
+   745,
    1137,
-   1718,
-   2,
-   3,
-   1626,
-   5,
-   6,
-   752,
-   1039,
+   1138,
    1139,
    1140,
-   752,
-   1037,
-   1141,
-   1142,
-   752,
-   1018,
-   1141,
-   1142,
-   1143,
-   1144,
-   1145,
-   1146,
-   1147,
-   1148,
-   1149,
-   1150,
-   1151,
-   1152,
-   1153,
-   1154,
-   1155,
-   1156,
-   1157,
-   1158
-  ],
-  "layout-body--playground@mobile": [
-   574,
-   1159,
-   1682,
-   1683,
-   578,
-   579,
-   734,
-   1160,
-   736,
-   1161,
-   1162,
-   723,
-   1163,
-   1164,
-   1165,
-   1166,
-   1167
+   1141
   ],
   "layout-body--receipt@mobile": [
    0,
-   1719,
+   1655,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   1033,
-   756,
-   1169,
-   1648,
+   1027,
+   719,
+   1143,
+   1566,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   752,
-   1048,
-   1170,
-   1171,
-   752,
-   1114,
-   1172,
-   1173,
-   752,
-   1174,
-   1175,
-   1176,
-   1630,
+   707,
+   716,
+   1144,
+   707,
+   1097,
+   1145,
+   707,
+   1146,
+   1147,
+   1548,
    130,
    3,
-   1626,
-   1177,
-   1178,
-   752,
-   1039,
-   1179,
-   1180,
-   749,
-   1018,
-   1181,
-   1634,
+   1544,
+   1148,
+   1149,
+   707,
+   1032,
+   1150,
+   704,
+   708,
+   1151,
+   1552,
    130,
    3,
-   1631,
+   1549,
    5,
-   1182,
-   752,
-   1039,
-   1183,
-   1184,
-   752,
-   1018,
-   1185,
-   1186,
-   1631,
+   1152,
+   707,
+   1032,
+   1153,
+   707,
+   708,
+   1154,
+   1549,
    5,
-   1187,
-   752,
-   1039,
-   1183,
-   1184,
-   752,
-   1018,
-   1185,
-   1186,
-   1634,
+   1155,
+   707,
+   1032,
+   1153,
+   707,
+   708,
+   1154,
+   1552,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   1033,
-   756,
-   1034,
-   1720,
+   1027,
+   719,
+   1028,
+   1656,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   752,
-   1189,
-   1190,
-   1191,
-   1721,
+   707,
+   1157,
+   1158,
+   1657,
    130,
    3,
-   1722,
+   1658,
    5,
    6,
-   752,
-   1018,
-   1194,
-   1195,
-   1717,
+   707,
+   708,
+   1161,
+   1616,
    5,
    6,
-   752,
-   1018,
-   1196,
-   1197,
-   1721,
+   707,
+   708,
+   1162,
+   1657,
    130,
    3,
-   1722,
+   1658,
    5,
    6,
-   752,
-   1018,
-   1194,
-   1195,
-   1717,
+   707,
+   708,
+   1161,
+   1616,
    5,
    6,
-   752,
-   1018,
-   1196,
-   1197,
-   1721,
+   707,
+   708,
+   1162,
+   1657,
    130,
    3,
-   1722,
+   1658,
    5,
    6,
-   752,
-   1018,
-   1194,
-   1195,
-   1717,
+   707,
+   708,
+   1161,
+   1616,
    5,
    6,
-   752,
-   1018,
-   1196,
-   1197,
-   1630,
+   707,
+   708,
+   1162,
+   1548,
    130,
    3,
-   1722,
+   1658,
    5,
    6,
-   752,
-   1018,
-   1194,
-   1195,
-   1717,
+   707,
+   708,
+   1161,
+   1616,
    5,
    6,
-   752,
-   1018,
-   1196,
-   1197,
-   1720,
+   707,
+   708,
+   1162,
+   1656,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   1033,
-   756,
-   1034,
-   1723,
+   1027,
+   719,
+   1028,
+   1659,
    130,
    3,
-   1722,
+   1658,
    5,
    6,
-   752,
-   1018,
-   1199,
-   1200,
-   1717,
+   707,
+   708,
+   1164,
+   1616,
    5,
    6,
-   752,
-   1018,
-   1201,
-   1202,
-   1630,
+   707,
+   708,
+   1165,
+   1548,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   1033,
-   756,
-   1203,
-   1724,
+   1027,
+   719,
+   1166,
+   1660,
    130,
    3,
-   1626,
+   1544,
    5,
    6,
-   752,
-   1037,
+   707,
+   768,
+   1168,
+   707,
+   708,
+   1169,
+   1170,
+   1171,
+   1172,
+   1173,
+   1174,
+   1175,
+   1176,
+   1177,
+   1178,
+   1179,
+   1180,
+   1181,
+   1182,
+   1183,
+   1184,
+   1185,
+   1186,
+   1187,
+   45,
+   1174,
+   1188,
+   1189
+  ],
+  "layout-body--saa-s-landing@mobile": [
+   605,
+   1190,
+   1606,
+   1607,
+   609,
+   610,
+   1191,
+   1192,
+   1193,
+   1606,
+   1607,
+   609,
+   610,
+   1062,
+   1194,
+   1195,
+   1196,
+   1197,
+   1606,
+   1607,
+   609,
+   610,
+   745,
+   1137,
+   1198,
+   1199,
+   1606,
+   1607,
+   1200,
+   1201,
+   1069,
+   1202,
+   616,
+   1203,
+   1204,
+   1606,
+   1607,
+   1650,
    1205,
+   805,
    1206,
-   752,
-   1018,
+   616,
    1207,
+   1650,
    1208,
+   805,
+   1206,
+   616,
+   1207,
+   1650,
    1209,
+   805,
+   1206,
+   616,
+   1207,
    1210,
+   1606,
+   1607,
+   609,
+   610,
+   1071,
    1211,
    1212,
    1213,
@@ -12326,238 +12261,242 @@
    1220,
    1221,
    1222,
-   1223,
+   1223
+  ],
+  "layout-column--feature-showcase@mobile": [
+   605,
    1224,
-   1225,
-   1226,
-   45,
-   1213,
+   1606,
+   1607,
+   1661,
    1227,
-   1228
-  ],
-  "layout-body--saa-s-landing@mobile": [
-   574,
+   1228,
+   1076,
    1229,
-   1682,
-   1683,
-   578,
-   579,
+   1661,
    1230,
    1231,
    1232,
    1233,
-   1682,
-   1683,
-   578,
-   579,
-   1077,
    1234,
+   743,
+   1136,
+   745,
+   746,
    1235,
    1236,
+   1606,
+   1607,
+   1661,
    1237,
+   1231,
    1238,
-   1682,
-   1683,
-   578,
-   579,
-   723,
-   1163,
+   1233,
+   1234,
+   743,
+   1136,
+   745,
+   746,
    1239,
+   1661,
    1240,
-   1682,
-   1683,
+   1228,
+   1076,
+   1229,
    1241,
    1242,
-   603,
    1243,
    1244,
-   588,
+   381,
    1245,
    1246,
    1247,
-   1682,
-   1683,
-   1685,
    1248,
-   713,
-   1249,
-   588,
+   1249
+  ],
+  "layout-column--playground@mobile": [
+   605,
    1250,
-   1251,
-   1685,
+   1606,
+   1607,
    1252,
-   713,
-   1249,
-   588,
-   1250,
-   1251,
-   1685,
    1253,
-   713,
-   1249,
-   588,
-   1250,
-   1251,
+   741,
    1254,
-   1682,
-   1683,
-   578,
-   579,
-   1087,
+   743,
    1255,
+   745,
+   1137,
    1256,
    1257,
    1258,
-   1259,
+   1259
+  ],
+  "layout-column--pricing-cards@mobile": [
+   605,
    1260,
-   1261,
+   1606,
+   1607,
+   609,
+   610,
+   1069,
    1262,
+   805,
    1263,
+   616,
    1264,
    1265,
-   1266,
-   1267
-  ],
-  "layout-column--feature-showcase@mobile": [
-   574,
+   1662,
+   1607,
+   1663,
    1268,
-   1682,
-   1683,
-   1725,
+   743,
+   1269,
+   1270,
    1271,
+   1060,
    1272,
-   1091,
+   1060,
    1273,
-   1725,
+   745,
+   746,
    1274,
-   1275,
+   1664,
+   1268,
+   743,
    1276,
+   1270,
    1277,
-   592,
+   1060,
    1278,
-   736,
-   1161,
-   1162,
-   723,
-   724,
+   1060,
    1279,
+   745,
+   746,
    1280,
-   1682,
-   1683,
-   1725,
+   1663,
+   1268,
+   743,
+   1269,
+   1270,
+   1271,
+   1060,
+   1272,
+   1060,
+   1273,
+   745,
+   746,
+   1274,
    1281,
-   1275,
    1282,
    1283,
-   592,
-   1278,
-   736,
-   1161,
-   1162,
-   723,
-   724,
    1284,
-   1725,
    1285,
-   1272,
-   1091,
-   1273,
    1286,
    1287,
+   407,
    1288,
    1289,
-   381,
    1290,
    1291,
+   378,
    1292,
    1293,
-   1294
+   1290,
+   1294,
+   1295
   ],
-  "layout-column--playground@mobile": [
-   574,
-   1295,
-   1682,
-   1683,
-   1297,
-   1298,
-   734,
+  "layout-column--sidebar-article@mobile": [
+   605,
+   1296,
+   1606,
+   1607,
+   1665,
    1299,
-   736,
    1300,
+   1232,
+   614,
    1301,
-   723,
-   1163,
+   807,
+   1302,
+   743,
    1302,
+   1071,
    1303,
-   1304,
-   1305
-  ],
-  "layout-column--pricing-cards@mobile": [
-   574,
+   1302,
+   1666,
+   1305,
+   743,
    1306,
-   1682,
-   1683,
-   578,
-   579,
-   603,
+   1300,
+   1307,
+   1300,
+   1308,
+   1300,
+   1308,
+   1300,
+   1308,
+   616,
    1308,
    1309,
-   713,
    1310,
-   588,
+   1311,
+   616,
    1311,
    1312,
    1313,
-   1726,
-   1683,
-   1727,
+   1314,
+   1315,
    1316,
-   736,
    1317,
    1318,
-   580,
    1319,
-   1074,
    1320,
    1321,
-   1074,
    1322,
    1323,
-   723,
-   724,
-   1324,
-   1728,
-   1316,
-   736,
-   1326,
+   1324
+  ],
+  "layout-column--stats-bar@mobile": [
+   605,
+   1325,
+   1606,
+   1607,
+   1667,
+   1074,
+   805,
    1327,
-   580,
+   1310,
+   1328,
+   616,
+   1329,
+   1667,
+   1074,
+   805,
+   1327,
+   1310,
    1328,
+   616,
+   1329,
+   1667,
    1074,
+   805,
+   1327,
+   1310,
+   1328,
+   616,
    1329,
-   1330,
+   1667,
    1074,
+   805,
+   1327,
+   1310,
+   1328,
+   616,
+   1330,
    1331,
    1332,
-   723,
-   724,
    1333,
-   1727,
-   1316,
-   736,
-   1317,
-   1318,
-   580,
-   1319,
-   1074,
-   1320,
-   1321,
-   1074,
-   1322,
-   1323,
-   723,
-   724,
-   1324,
    1334,
    1335,
    1336,
@@ -12565,292 +12504,308 @@
    1338,
    1339,
    1340,
-   407,
    1341,
-   1342,
+   1342
+  ],
+  "layout-column--testimonial-cards@mobile": [
+   605,
+   1260,
+   1606,
+   1607,
+   609,
+   610,
+   1069,
    1343,
    1344,
-   378,
-   1345,
+   1263,
+   1265,
+   1662,
+   1607,
+   1668,
+   610,
+   1071,
    1346,
-   1343,
    1347,
-   1348
-  ],
-  "layout-column--sidebar-article@mobile": [
-   574,
+   1071,
+   1348,
+   1349,
+   1350,
+   1351,
+   1668,
+   610,
+   1071,
+   1346,
+   1347,
+   1071,
+   1348,
    1349,
-   1682,
-   1683,
-   1729,
+   1350,
+   1351,
+   1668,
+   610,
+   1071,
+   1346,
+   1347,
+   1071,
+   1348,
+   1349,
+   1350,
+   1351,
    1352,
-   796,
-   1276,
-   1277,
-   616,
    1353,
-   808,
-   1354,
-   1355,
-   736,
    1354,
    1355,
-   1087,
    1356,
-   1354,
-   1355,
-   1730,
+   1357,
    1358,
-   736,
    1359,
    1360,
-   796,
    1361,
-   1362,
-   796,
-   1363,
-   1364,
-   796,
-   1363,
-   1364,
-   796,
-   1363,
-   1364,
-   588,
+   1362
+  ],
+  "layout-row--editorial-with-stats@mobile": [
+   605,
    1363,
-   1364,
+   1606,
+   1607,
+   1665,
    1365,
    1366,
    1367,
-   1368,
-   588,
-   1367,
+   1062,
    1368,
    1369,
    1370,
+   745,
+   1137,
    1371,
+   1650,
    1372,
+   805,
    1373,
    1374,
    1375,
+   805,
    1376,
+   1374,
+   1375,
+   805,
    1377,
    1378,
+   1375,
    1379,
    1380,
-   1381
-  ],
-  "layout-column--stats-bar@mobile": [
-   574,
+   1381,
    1382,
-   1682,
-   1683,
-   1731,
-   1089,
-   713,
-   1384,
-   1366,
-   1385,
-   1386,
-   588,
-   1387,
-   1388,
-   1731,
-   1089,
-   713,
-   1384,
-   1366,
-   1385,
-   1386,
-   588,
-   1387,
-   1388,
-   1731,
-   1089,
-   713,
+   1383,
    1384,
-   1366,
    1385,
    1386,
-   588,
    1387,
-   1388,
-   1731,
-   1089,
-   713,
-   1384,
-   1366,
-   1385,
-   1386,
-   588,
+   1388
+  ],
+  "layout-row--feature-highlight@mobile": [
+   605,
    1389,
+   1606,
+   1607,
+   1661,
    1390,
+   807,
    1391,
+   614,
    1392,
+   1300,
    1393,
+   1064,
    1394,
+   616,
    1395,
+   1661,
+   610,
+   1228,
+   1076,
    1396,
    1397,
    1398,
    1399,
    1400,
-   1401,
-   1402
+   1401
   ],
-  "layout-column--testimonial-cards@mobile": [
-   574,
-   1306,
-   1682,
-   1683,
-   578,
-   579,
-   603,
+  "layout-row--hero-banner@mobile": [
+   605,
+   1402,
+   1606,
+   1607,
+   609,
+   610,
+   1064,
    1403,
    1404,
    1405,
-   1310,
-   1313,
-   1726,
-   1683,
-   1732,
-   579,
-   1087,
-   1407,
-   1408,
-   1409,
-   1087,
-   1410,
-   1411,
-   1412,
-   1413,
-   1414,
-   1415,
-   1732,
-   579,
-   1087,
-   1407,
-   1408,
-   1409,
-   1087,
-   1410,
-   1411,
-   1412,
-   1413,
-   1414,
-   1415,
-   1732,
-   579,
-   1087,
+   1406,
    1407,
    1408,
+   1606,
+   1607,
+   1661,
+   610,
+   745,
    1409,
-   1087,
    1410,
+   1661,
+   610,
+   745,
+   1137,
    1411,
    1412,
    1413,
    1414,
    1415,
    1416,
-   1417,
+   1417
+  ],
+  "layout-row--playground@mobile": [
+   605,
    1418,
+   1606,
+   1607,
+   1661,
    1419,
+   1078,
    1420,
+   616,
    1421,
+   1661,
    1422,
+   1078,
+   1420,
+   616,
+   1421,
    1423,
    1424,
    1425,
    1426
   ],
-  "layout-row--editorial-with-stats@mobile": [
-   574,
+  "layout-row--product-showcase@mobile": [
+   605,
    1427,
-   1682,
-   1683,
-   1729,
+   1606,
+   1607,
+   1661,
+   1205,
+   1228,
+   1076,
+   1428,
+   1661,
    1429,
+   1231,
    1430,
+   1078,
    1431,
+   1366,
    1432,
-   1077,
+   1071,
    1433,
    1434,
+   745,
+   1137,
    1435,
    1436,
-   723,
-   1163,
    1437,
-   1685,
    1438,
-   713,
    1439,
-   1440,
+   1440
+  ],
+  "layout-row--service-cards@mobile": [
+   605,
    1441,
+   1662,
+   1607,
+   1650,
+   610,
+   1071,
    1442,
-   713,
    1443,
-   1440,
-   1441,
-   1442,
-   713,
    1444,
    1445,
-   1441,
-   1442,
+   1444,
    1446,
+   1650,
+   610,
+   1071,
+   1442,
+   1443,
+   1444,
+   1445,
+   1444,
    1447,
+   1650,
+   610,
+   1071,
+   1442,
+   1443,
+   1444,
+   1445,
+   1444,
    1448,
    1449,
    1450,
+   1401,
    1451,
    1452,
+   1401,
+   1414,
    1453,
-   1454,
-   1455
+   1401
   ],
-  "layout-row--feature-highlight@mobile": [
-   574,
+  "testing-complete-pixel-parity-test--complete-email-template@mobile": [
+   1454,
+   1455,
    1456,
-   1682,
-   1683,
-   1725,
    1457,
-   808,
    1458,
-   1459,
-   616,
+   1662,
+   1607,
+   609,
+   610,
    1460,
-   796,
+   1076,
    1461,
-   1462,
-   720,
+   1458,
+   1669,
+   1607,
+   609,
+   610,
    1463,
    1464,
-   588,
    1465,
    1466,
-   1725,
-   579,
-   1272,
-   1091,
    1467,
    1468,
    1469,
+   1464,
+   1465,
    1470,
+   1458,
+   1662,
+   1607,
+   609,
+   610,
    1471,
-   1472
-  ],
-  "layout-row--hero-banner@mobile": [
-   574,
+   1458,
+   1662,
+   1607,
+   1661,
+   610,
+   1228,
+   1076,
+   1472,
+   1661,
+   610,
    1473,
-   1682,
-   1683,
-   578,
-   579,
-   720,
    1474,
+   629,
    1475,
    1476,
    1477,
@@ -12858,391 +12813,212 @@
    1479,
    1480,
    1481,
-   1682,
-   1683,
-   1725,
-   579,
-   723,
+   1137,
    1482,
    1483,
-   1725,
-   579,
-   723,
-   1163,
+   1458,
+   1662,
+   1607,
+   609,
+   610,
+   1471,
+   1458,
+   1662,
+   1607,
+   1661,
+   610,
    1484,
+   1479,
+   629,
+   1475,
+   1476,
+   1477,
+   1478,
+   1479,
+   1480,
+   1485,
+   1481,
+   1137,
+   1482,
+   1483,
+   1661,
+   610,
+   1228,
+   1076,
+   1472,
+   1458,
+   1662,
+   1607,
+   609,
+   610,
+   1471,
+   1458,
+   1662,
+   1607,
+   1661,
+   610,
+   1228,
+   1076,
+   1472,
+   1661,
+   610,
+   1473,
+   1474,
+   629,
+   1475,
+   1476,
+   1477,
+   1478,
+   1479,
+   1480,
    1485,
+   1481,
+   1137,
+   1482,
+   1483,
+   1458,
+   1662,
+   1607,
+   609,
+   610,
+   1471,
+   1458,
+   1662,
+   1607,
+   1661,
+   610,
    1486,
+   1479,
+   629,
+   1475,
+   1476,
+   1477,
+   1478,
+   1479,
+   1480,
+   1485,
+   1481,
+   1137,
+   1482,
+   1483,
+   1661,
+   610,
+   1228,
+   1076,
+   1472,
+   1458,
+   1662,
+   1607,
+   609,
+   610,
    1487,
    1488,
    1489,
-   1490
-  ],
-  "layout-row--playground@mobile": [
-   574,
+   1490,
    1491,
-   1682,
-   1683,
-   1725,
-   1492,
-   1093,
+   1137,
+   1482,
+   1483,
+   1458,
+   1670,
+   1607,
+   609,
+   610,
    1493,
-   588,
    1494,
    1495,
-   1725,
    1496,
-   1093,
-   1493,
-   588,
-   1494,
-   1495,
    1497,
    1498,
    1499,
-   1500
-  ],
-  "layout-row--product-showcase@mobile": [
-   574,
+   1494,
+   1495,
+   1500,
    1501,
-   1682,
-   1683,
-   1725,
-   1248,
-   1272,
-   1091,
    1502,
-   1725,
+   1495,
+   1503,
+   1495,
    1503,
-   1275,
    1504,
-   1505,
-   1093,
+   1494,
+   1495,
+   1500,
+   1501,
+   1502,
+   1495,
+   1503,
+   1458,
+   1671,
+   1607,
+   609,
+   610,
    1506,
-   1430,
+   810,
+   811,
+   810,
+   811,
+   810,
+   811,
+   810,
+   811,
    1507,
    1508,
-   1087,
    1509,
    1510,
    1511,
-   723,
-   1163,
    1512,
+   483,
    1513,
    1514,
+   483,
+   1514,
+   483,
+   1514,
+   483,
+   1514,
+   483,
+   1514,
+   483,
+   1514,
+   483,
    1515,
    1516,
-   1517
-  ],
-  "layout-row--service-cards@mobile": [
-   574,
+   1517,
    1518,
-   1726,
-   1683,
-   1685,
-   579,
-   1087,
    1519,
    1520,
    1521,
    1522,
    1523,
-   1521,
    1524,
-   1525,
-   1685,
-   579,
-   1087,
-   1519,
-   1520,
-   1521,
    1522,
    1523,
-   1521,
-   1526,
-   1527,
-   1685,
-   579,
-   1087,
-   1519,
-   1520,
-   1521,
+   1524,
    1522,
    1523,
-   1521,
+   1524,
+   1522,
+   1523,
+   1525,
+   1526,
+   1525,
+   1527,
    1528,
    1529,
    1530,
    1531,
-   1472,
    1532,
    1533,
-   1472,
-   1487,
    1534,
-   1472
-  ],
-  "testing-complete-pixel-parity-test--complete-email-template@mobile": [
    1535,
    1536,
    1537,
    1538,
    1539,
-   1726,
-   1683,
-   578,
-   579,
+   1540,
    1541,
-   1091,
-   1542,
-   1539,
-   1733,
-   1683,
-   578,
-   579,
-   1544,
-   1545,
-   1546,
-   1547,
-   1548,
-   1549,
-   1550,
-   1545,
-   1546,
-   1551,
-   1539,
-   1726,
-   1683,
-   578,
-   579,
-   1552,
-   1539,
-   1726,
-   1683,
-   1725,
-   579,
-   1272,
-   1091,
-   1553,
-   1725,
-   579,
-   1554,
-   1555,
-   635,
-   1556,
-   1557,
-   1558,
-   1559,
-   1560,
-   1561,
-   1562,
-   1563,
-   1163,
-   1564,
-   1565,
-   1539,
-   1726,
-   1683,
-   578,
-   579,
-   1552,
-   1539,
-   1726,
-   1683,
-   1725,
-   579,
-   1566,
-   1560,
-   635,
-   1556,
-   1557,
-   1558,
-   1559,
-   1560,
-   1561,
-   1567,
-   1563,
-   1163,
-   1564,
-   1565,
-   1725,
-   579,
-   1272,
-   1091,
-   1553,
-   1539,
-   1726,
-   1683,
-   578,
-   579,
-   1552,
-   1539,
-   1726,
-   1683,
-   1725,
-   579,
-   1272,
-   1091,
-   1553,
-   1725,
-   579,
-   1554,
-   1555,
-   635,
-   1556,
-   1557,
-   1558,
-   1559,
-   1560,
-   1561,
-   1567,
-   1563,
-   1163,
-   1564,
-   1565,
-   1539,
-   1726,
-   1683,
-   578,
-   579,
-   1552,
-   1539,
-   1726,
-   1683,
-   1725,
-   579,
-   1568,
-   1560,
-   635,
-   1556,
-   1557,
-   1558,
-   1559,
-   1560,
-   1561,
-   1567,
-   1563,
-   1163,
-   1564,
-   1565,
-   1725,
-   579,
-   1272,
-   1091,
-   1553,
-   1539,
-   1726,
-   1683,
-   578,
-   579,
-   1569,
-   1570,
-   1571,
-   1572,
-   1573,
-   1163,
-   1564,
-   1565,
-   1539,
-   1734,
-   1683,
-   578,
-   579,
-   1575,
-   1576,
-   1577,
-   1578,
-   1579,
-   1580,
-   1581,
-   1576,
-   1577,
-   1582,
-   1583,
-   1584,
-   1577,
-   1585,
-   1577,
-   1585,
-   1586,
-   1576,
-   1577,
-   1582,
-   1583,
-   1584,
-   1577,
-   1585,
-   1539,
-   1735,
-   1683,
-   578,
-   579,
-   1588,
-   776,
-   777,
-   776,
-   777,
-   776,
-   777,
-   776,
-   777,
-   1589,
-   1590,
-   1591,
-   1592,
-   1593,
-   1594,
-   483,
-   1595,
-   1596,
-   483,
-   1596,
-   483,
-   1596,
-   483,
-   1596,
-   483,
-   1596,
-   483,
-   1596,
-   483,
-   1597,
-   1598,
-   1599,
-   1600,
-   1601,
-   1602,
-   1603,
-   1604,
-   1605,
-   1606,
-   1604,
-   1605,
-   1606,
-   1604,
-   1605,
-   1606,
-   1604,
-   1605,
-   1607,
-   1608,
-   1607,
-   1609,
-   1610,
-   1611,
-   1612,
-   1613,
-   1614,
-   1615,
-   1616,
-   1617,
-   1618,
-   1619,
-   1620,
-   1621,
-   1622,
-   1623,
-   1624
+   1542
   ]
  }
 }
diff --git a/packages/react/src/__snapshots__/golden-template.test.tsx.snap b/packages/react/src/__snapshots__/golden-template.test.tsx.snap
index 4dc31e29..f42cbd9e 100644
--- a/packages/react/src/__snapshots__/golden-template.test.tsx.snap
+++ b/packages/react/src/__snapshots__/golden-template.test.tsx.snap
@@ -17,6 +17,9 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
   <meta name="x-apple-disable-message-reformatting">
   <!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
   <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,21 +34,8 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
   }
   
   
-  #u_content_body_1 a {
-  
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
-
-
-  
-
-
-  
-
-
   
 
 </style>
@@ -95,7 +85,7 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
   <tr>
     <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
       
-      <img align="center" border="0" src="https://example.com/logo.png" alt="Acme Co" title="Acme Co" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 560px;" width="560" class="v-src-width v-src-max-width"/>
+      <img align="center" border="0" src="https://example.com/logo.png" alt="Acme Co" title="Acme Co" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 540px;" width="540" class="v-src-width v-src-max-width"/>
       
     </td>
   </tr>
@@ -232,7 +222,7 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
   <tr>
     <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
       
-      <img align="center" border="0" src="https://example.com/hero.jpg" alt="Spring Collection" title="Spring Collection" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 600px;" width="600" class="v-src-width v-src-max-width"/>
+      <img align="center" border="0" src="https://example.com/hero.jpg" alt="Spring Collection" title="Spring Collection" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 580px;" width="580" class="v-src-width v-src-max-width"/>
       
     </td>
   </tr>
@@ -262,8 +252,8 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
     <tr>
       <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
         
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #666666; line-height: 1.4;  text-align: center; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Fresh styles for the new season. Limited time only.</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #666666; line-height: 140%; text-align: center; word-wrap: break-word;">
+    Fresh styles for the new season. Limited time only.
   </div>
 
       </td>
@@ -395,7 +385,7 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
   <tr>
     <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
       
-      <img align="center" border="0" src="https://example.com/product-a.jpg" alt="Product A" title="Product A" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 300px;" width="300" class="v-src-width v-src-max-width"/>
+      <img align="center" border="0" src="https://example.com/product-a.jpg" alt="Product A" title="Product A" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 280px;" width="280" class="v-src-width v-src-max-width"/>
       
     </td>
   </tr>
@@ -411,8 +401,8 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
     <tr>
       <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
         
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #333333; line-height: 1.4;  text-align: center; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Classic Tee — $29.99</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #333333; line-height: 140%; text-align: center; word-wrap: break-word;">
+    Classic Tee — $29.99
   </div>
 
       </td>
@@ -457,7 +447,7 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
   <tr>
     <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
       
-      <img align="center" border="0" src="https://example.com/product-b.jpg" alt="Product B" title="Product B" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 300px;" width="300" class="v-src-width v-src-max-width"/>
+      <img align="center" border="0" src="https://example.com/product-b.jpg" alt="Product B" title="Product B" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 280px;" width="280" class="v-src-width v-src-max-width"/>
       
     </td>
   </tr>
@@ -473,8 +463,8 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
     <tr>
       <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
         
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #333333; line-height: 1.4;  text-align: center; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Slim Jeans — $49.99</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #333333; line-height: 140%; text-align: center; word-wrap: break-word;">
+    Slim Jeans — $49.99
   </div>
 
       </td>
@@ -738,8 +728,8 @@ exports[`Golden Template: Marketing Email > snapshot locks the full email HTML 1
     <tr>
       <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
         
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 11px; color: #999999; line-height: 1.4;  text-align: center; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Acme Co, 123 Main St, Springfield. Unsubscribe.</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 11px; color: #999999; line-height: 140%; text-align: center; word-wrap: break-word;">
+    Acme Co, 123 Main St, Springfield. Unsubscribe.
   </div>
 
       </td>
@@ -777,6 +767,9 @@ exports[`Golden Template: Print Document > snapshot locks the full document HTML
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <style type="text/css">
+body,html{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:14px}p{margin:0}sub,sup{line-height:0}
+
+a[onclick]{cursor:pointer}
 
   
 
@@ -808,16 +801,9 @@ exports[`Golden Template: Print Document > snapshot locks the full document HTML
 
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
-  #u_content_body_1 a:hover {
-    color: #0000ee;
-    text-decoration: underline;
-  }
+  
   
   
 
@@ -856,8 +842,8 @@ exports[`Golden Template: Print Document > snapshot locks the full document HTML
 
   <div id="u_content_paragraph_1" data-page-row="u_content_paragraph_1" class="u_content_paragraph v-container-padding" style="overflow-wrap: break-word;padding: 10px;font-family: arial,helvetica,sans-serif;">
     
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Revenue grew 14% quarter over quarter.</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Revenue grew 14% quarter over quarter.
   </div>
 
   </div>
@@ -868,8 +854,8 @@ exports[`Golden Template: Print Document > snapshot locks the full document HTML
 
   <div id="u_content_paragraph_2" data-page-row="u_content_paragraph_2" class="u_content_paragraph v-container-padding" style="overflow-wrap: break-word;padding: 10px;font-family: arial,helvetica,sans-serif;">
     
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Operating costs remained flat.</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Operating costs remained flat.
   </div>
 
   </div>
@@ -897,6 +883,9 @@ exports[`Golden Template: Web Page (3-column) > snapshot locks the full page HTM
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style type="text/css">
+body,html{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:14px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}p{margin:0}.container{--bs-gutter-x:0px;--bs-gutter-y:0;margin-left:auto;margin-right:auto;padding-left:calc(var(--bs-gutter-x)*.5);padding-right:calc(var(--bs-gutter-x)*.5);width:100%}sub,sup{line-height:0}
+
+a[onclick]{cursor:pointer}
 @media (max-width: 480px) { .hide-mobile { display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { display: none !important; } }
 
@@ -916,16 +905,9 @@ exports[`Golden Template: Web Page (3-column) > snapshot locks the full page HTM
 
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
-  #u_content_body_1 a:hover {
-    color: #0000ee;
-    text-decoration: underline;
-  }
+  
   
   
 
@@ -974,8 +956,8 @@ exports[`Golden Template: Web Page (3-column) > snapshot locks the full page HTM
 
   <div id="u_content_paragraph_1" class="u_content_paragraph v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px;">
     
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Blazing fast performance.</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Blazing fast performance.
   </div>
 
   </div>
@@ -994,8 +976,8 @@ exports[`Golden Template: Web Page (3-column) > snapshot locks the full page HTM
 
   <div id="u_content_paragraph_2" class="u_content_paragraph v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px;">
     
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Enterprise-grade security.</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Enterprise-grade security.
   </div>
 
   </div>
@@ -1014,8 +996,8 @@ exports[`Golden Template: Web Page (3-column) > snapshot locks the full page HTM
 
   <div id="u_content_paragraph_3" class="u_content_paragraph v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px;">
     
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">24/7 customer support.</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    24/7 customer support.
   </div>
 
   </div>
diff --git a/packages/react/src/async/async.test.tsx b/packages/react/src/async/async.test.tsx
new file mode 100644
index 00000000..680a7389
--- /dev/null
+++ b/packages/react/src/async/async.test.tsx
@@ -0,0 +1,575 @@
+// @vitest-environment node
+import React from "react";
+import { JSDOM } from "jsdom";
+import { describe, expect, it, vi } from "vitest";
+import { Button, Column, Email, Heading, Html, Paragraph, RenderError, Row, UnlayerProvider, toPlainText, renderToHtml as renderToHtmlSync, renderToHtmlParts as renderToHtmlPartsSync, renderToJson as renderToJsonSync, renderToPlainText as renderToPlainTextSync } from "../index";
+import { Tailwind } from "../tailwind";
+import { pretty as formatted, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText } from "./index";
+import { inTime, within } from "../test-timing";
+import * as tailwind from "../tailwind";
+import { Head } from "../head";
+import { Font } from "../font";
+
+const later = <T,>(value: T, ms = 5) => new Promise<T>((resolve) => setTimeout(() => resolve(value), ms));
+const contents = (design: { body: { rows: any[] } }) => design.body.rows.flatMap((row) => row.columns.flatMap((column: any) => column.contents.map((c: any) => c.values.text ?? c.values.html)));
+
+describe("the async renderers", () => {
+  it("keeps each template's own <Head> tags and <Font> when async templates render at once", async () => {
+    const template = (name: string, ms: number) => {
+      const Late = async () => {
+        await later(null, ms);
+        return (
+          <>
+            <Head><meta name="who" content={name} /></Head>
+            <Font family={`Family${name}`} url={`https://fonts.googleapis.com/css2?family=Family${name}`} />
+            <Paragraph>{`Body ${name}`}</Paragraph>
+          </>
+        );
+      };
+      return <Email><Row><Column><Late /></Column></Row></Email>;
+    };
+    const names = ["A", "B", "C", "D", "E", "F"];
+    // Started in order, finished in reverse and interleaved: the first one's components run with others under way.
+    const htmls = await Promise.all(names.map((name, i) => renderToHtml(template(name, 5 + ((i * 7) % 4) * 6))));
+    names.forEach((name, i) => {
+      expect(htmls[i]).toContain(`Body ${name}`);
+      expect(htmls[i]).toContain(`content="${name}"`);
+      expect(htmls[i]).toContain(`Family${name}`);
+      for (const other of names.filter((n) => n !== name)) {
+        expect(htmls[i]).not.toContain(`content="${other}"`);
+        expect(htmls[i]).not.toContain(`Family${other}`);
+      }
+    });
+  });
+
+  it("resolve an async template, async blocks in a Column, async components in text, and thrown promises (Suspense), each run once", async () => {
+    const runs = { template: 0, name: 0, block: 0 };
+    const Name = async ({ id }: { id: number }) => {
+      runs.name++;
+      return <strong>{await later(`Ada ${id}`)}</strong>;
+    };
+    const Block = async () => {
+      runs.block++;
+      return <Paragraph>{await later("Loaded later")}</Paragraph>;
+    };
+    // React 18's Suspense: a component that throws a promise until its data is there.
+    const cache: { value?: string; promise?: Promise<void> } = {};
+    const Suspends = () => {
+      cache.promise ??= later("Suspended, then shown").then((value) => void (cache.value = value));
+      if (!cache.value) throw cache.promise;
+      return <Paragraph>{cache.value}</Paragraph>;
+    };
+    async function Receipt({ id }: { id: number }) {
+      runs.template++;
+      const order = await later({ number: id, total: "$10" });
+      return (
+        <Email previewText={`Order ${order.number}`}>
+          <Row>
+            <Column>
+              <Heading>Order {order.number}</Heading>
+              <Paragraph>
+                Thanks, <Name id={order.number} />. Total: {order.total}
+              </Paragraph>
+              <Block />
+              <Suspends />
+            </Column>
+          </Row>
+        </Email>
+      );
+    }
+    const design = await renderToJson(<Receipt id={7} />);
+    expect(contents(design)).toEqual(["Order 7", "Thanks, <strong>Ada 7</strong>. Total: $10", "Loaded later", "Suspended, then shown"]);
+    expect(runs).toEqual({ template: 1, name: 1, block: 1 });
+    const html = await renderToHtml(<Receipt id={8} />, { title: "Receipt" });
+    expect(html).toContain("Thanks, <strong>Ada 8</strong>. Total: $10");
+    expect(html).toContain("<title>Receipt</title>");
+    expect(html).not.toMatch(/<!--\$|<!-- -->|unlayer-mark/);
+    expect(await renderToPlainText(<Receipt id={9} />)).toBe("ORDER 9\n\nThanks, Ada 9. Total: $10\n\nLoaded later\n\nSuspended, then shown");
+    expect((await renderToHtmlParts(<Receipt id={10} />)).body).toContain("Loaded later");
+    expect(runs).toEqual({ template: 4, name: 4, block: 4 });
+  });
+
+  /**
+   * Data that suspends until it's there, as React 18's Suspense libraries do (react-i18next's `useTranslation`):
+   * `read()` throws a promise until it has settled.
+   */
+  const suspending = (value: string) => {
+    const data = { calls: 0, value: undefined as string | undefined, promise: undefined as Promise<void> | undefined };
+    const read = () => {
+      data.calls++;
+      data.promise ??= later(value).then((loaded) => void (data.value = loaded));
+      if (data.value === undefined) throw data.promise;
+      return data.value;
+    };
+    return Object.assign(data, { read });
+  };
+  type Data = { calls: number; read: () => string };
+  const Theme = React.createContext("none");
+  const InTheme = () => <Paragraph>{React.useContext(Theme)}</Paragraph>;
+  const one = (content: React.ReactNode) => <Email><Row><Column>{content}</Column></Row></Email>;
+  const TEMPLATE = 'async and suspending templates need "@unlayer/react-elements/async"\'s renderers';
+  const inSync = (name: string, position: string) => `it is async or suspends, and this renderer is synchronous: render with "@unlayer/react-elements/async", or load its data first and pass it as props (in <${name}> at ${position})`;
+  /** Where it suspends: a template whose data does there, and what the synchronous renderers say for it. */
+  const WHERE: Array<[string, (data: Data) => React.ReactElement, string]> = [
+    ["the template", (data) => { const Template = () => one(<Paragraph>{data.read()}</Paragraph>); return <Template />; }, TEMPLATE],
+    ["the template in a provider", (data) => {
+      const Template = () => one(<Paragraph>{data.read()}</Paragraph>);
+      const Provider = ({ children }: { children: React.ReactNode }) => <Theme.Provider value="dark">{children}</Theme.Provider>;
+      return <Provider><Template /></Provider>;
+    }, TEMPLATE],
+    ["a wrapper", (data) => {
+      const Wrapper = ({ children }: { children: React.ReactNode }) => <Theme.Provider value={data.read()}>{children}</Theme.Provider>;
+      return <Wrapper>{one(<InTheme />)}</Wrapper>;
+    }, TEMPLATE],
+    ["a class wrapper", (data) => {
+      class Loader extends React.Component<{ children: React.ReactNode }> {
+        render() {
+          return <Theme.Provider value={data.read()}>{this.props.children}</Theme.Provider>;
+        }
+      }
+      return <Loader>{one(<InTheme />)}</Loader>;
+    }, TEMPLATE],
+    ["a component", (data) => { const Text = () => <Paragraph>{data.read()}</Paragraph>; return one(<Text />); }, inSync("Text", "Row 1 › Column 1 › Text")],
+    ["a class component", (data) => {
+      class Translated extends React.Component {
+        render() {
+          return <Paragraph>{data.read()}</Paragraph>;
+        }
+      }
+      return one(<Translated />);
+    }, inSync("Translated", "Row 1 › Column 1 › Translated")],
+    ["a block's children", (data) => { const Name = () => <b>{data.read()}</b>; return one(<Paragraph>Hi <Name /></Paragraph>); }, inSync("Name", "Row 1 › Column 1 › Paragraph › Name")],
+    // A <Suspense> around the root is outside the document: its fallback isn't one, so what's in it is waited for, and
+    // the synchronous renderers say so, as without it.
+    ["the template in a <Suspense>", (data) => { const Template = () => one(<Paragraph>{data.read()}</Paragraph>); return <React.Suspense fallback={<p>Loading</p>}><Template /></React.Suspense>; }, TEMPLATE],
+    ["a component, in a <Suspense> around the root", (data) => { const Text = () => <Paragraph>{data.read()}</Paragraph>; return <React.Suspense fallback={<p>Loading</p>}>{one(<Text />)}</React.Suspense>; }, inSync("Text", "Row 1 › Column 1 › Text")],
+  ];
+
+  it.each(WHERE)("wait where %s throws a promise (React 18's Suspense), calling it again once it settles; the synchronous renderers say what to do", async (_, template, said) => {
+    expect(() => renderToHtmlSync(template(suspending("Loaded")))).toThrow(said);
+    expect(() => renderToJsonSync(template(suspending("Loaded")))).toThrow(said);
+    const data = suspending("Loaded");
+    expect(await renderToHtml(template(data))).toContain("Loaded");
+    // Suspended, then rendered once it settled.
+    expect(data.calls).toBe(2);
+    expect(JSON.stringify(await renderToJson(template(suspending("Loaded"))))).toContain("Loaded");
+    expect(await renderToPlainText(template(suspending("Loaded")))).toContain("Loaded");
+  });
+
+  const use = (React as unknown as { use?: <T>(promise: PromiseLike<T>) => T }).use;
+  it.runIf(use)("wait for `use()` of a promise the same way, wherever it is (React 19)", async () => {
+    for (const [where, template, said] of WHERE.filter(([where]) => !where.includes("class"))) {
+      const using = () => {
+        const promise = later("Used");
+        const data = { calls: 0, read: () => (data.calls++, use!(promise)) };
+        return data;
+      };
+      expect(() => renderToHtmlSync(template(using())), where).toThrow(said);
+      const data = using();
+      expect(await renderToHtml(template(data)), where).toContain("Used");
+      expect(data.calls, where).toBe(2);
+    }
+  });
+
+  it("fail with what a promise a component throws rejected with, where it throws it again, as `use()` of it fails", async () => {
+    const down = new Error("the translations didn't load");
+    const failing = () => {
+      const promise = later(null).then(() => {
+        throw down;
+      });
+      promise.catch(() => {});
+      let calls = 0;
+      // (Waited for again each time it's thrown, it would never be done.)
+      return () => {
+        if (++calls > 5) throw new Error("called again and again");
+        throw promise;
+      };
+    };
+    const read = failing();
+    const Template = () => one(<Paragraph>{read()}</Paragraph>);
+    await expect(renderToHtml(<Template />)).rejects.toMatchObject({ message: "[Unlayer] the translations didn't load (in <Template>)", component: "Template", cause: down });
+    const again = failing();
+    const Text = () => <Paragraph>{again()}</Paragraph>;
+    await expect(renderToHtml(one(<Text />))).rejects.toMatchObject({ message: "[Unlayer] the translations didn't load (in <Text> at Row 1 › Column 1 › Text)", cause: down });
+  });
+
+  it("give what the synchronous renderers give for a template with nothing async", async () => {
+    const Hooked = () => {
+      const [label] = React.useState("from a hook");
+      return <Paragraph>{label}</Paragraph>;
+    };
+    const email = (
+      <Email>
+        <Row>
+          <Column>
+            <Heading>Hi</Heading>
+            <Hooked />
+            <Html html="<p>kept</p>" />
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(await renderToHtml(email)).toBe(renderToHtmlSync(email));
+    expect(await renderToJson(email)).toEqual(renderToJsonSync(email));
+  });
+
+  it("render a template with no root as the synchronous renderers do, calling it once", async () => {
+    // Rows with no root: renderToHtml() renders them in a document, renderToJson() says the root it needs. The
+    // async template is called once a render (not again by the synchronous render after), inside the providers and
+    // after the wrapper (whose useId() moves the ids after it) around it.
+    const Theme = React.createContext("light");
+    const Themed = () => <p id={React.useId()}>{React.useContext(Theme)}</p>;
+    const content = (
+      <>
+        <Themed />
+        <Row><Column><Paragraph>A</Paragraph></Column></Row>
+        <Row><Column><Paragraph>B</Paragraph></Column></Row>
+      </>
+    );
+    const runs = { template: 0 };
+    const Rows = () => content;
+    async function LoadedRows() {
+      runs.template++;
+      await later(null);
+      return content;
+    }
+    const Wrapper = ({ children }: { children: React.ReactElement }) => (React.useId(), children);
+    const element = (Template: React.FC) => <Theme.Provider value="dark"><Wrapper><Template /></Wrapper></Theme.Provider>;
+    const html = renderToHtmlSync(element(Rows));
+    expect(html).toContain(">dark</p>");
+    expect(await renderToHtml(element(LoadedRows))).toBe(html);
+    expect(await renderToPlainText(element(LoadedRows))).toBe(renderToPlainTextSync(element(Rows)));
+    expect(await renderToHtmlParts(element(LoadedRows))).toEqual(renderToHtmlPartsSync(element(Rows)));
+    expect(runs.template).toBe(3);
+    let said = "";
+    try {
+      renderToJsonSync(element(Rows));
+    } catch (error) {
+      said = (error as Error).message;
+    }
+    expect(said).toContain("Root element must be <Body>, <Email>, <Page>, or <Document>");
+    await expect(renderToJson(element(LoadedRows))).rejects.toThrow(said);
+    expect(runs.template).toBe(4);
+  });
+
+  it("resolve a lazy template (`React.lazy`) as an async one, its root's settings read; the synchronous renderers say it's async", async () => {
+    // It was taken for a template with no root: the HTML in a web page's document without the root's language and
+    // fonts, and renderToJson() said its root wasn't one.
+    const Welcome = () => <Email lang="fr" fonts={[{ url: "https://fonts.example.com/brand.css" }]} previewText="Bonjour"><Row><Column><Paragraph>Lazy</Paragraph></Column></Row></Email>;
+    const lazily = () => React.lazy(async () => (await later(null), { default: Welcome }));
+    const Lazy = lazily();
+    const Wrapper = () => <Lazy />;
+    for (const element of [<Lazy />, <Wrapper />, <UnlayerProvider config={{ textDirection: "rtl" }}><Lazy /></UnlayerProvider>]) {
+      const loaded = <Welcome />;
+      const same = element.type === UnlayerProvider ? <UnlayerProvider config={{ textDirection: "rtl" }}>{loaded}</UnlayerProvider> : loaded;
+      const html = await renderToHtml(element);
+      expect(html).toBe(renderToHtmlSync(same));
+      expect(html).toContain('lang="fr"');
+      expect(html).toContain("brand.css");
+      expect(await renderToHtmlParts(element)).toEqual(renderToHtmlPartsSync(same));
+      expect(await renderToPlainText(element)).toBe(renderToPlainTextSync(same));
+      expect(await renderToJson(element)).toEqual(renderToJsonSync(same));
+    }
+    // Loaded, the synchronous renderers render it too; before, they say it's async.
+    expect(renderToHtmlSync(<Lazy />)).toBe(renderToHtmlSync(<Welcome />));
+    const Pending = lazily();
+    expect(() => renderToHtmlSync(<Pending />)).toThrow('[Unlayer] renderToHtml: async and suspending templates need "@unlayer/react-elements/async"');
+    expect(() => renderToJsonSync(<Pending />)).toThrow(`[Unlayer] renderToJson: ${TEMPLATE}`);
+    // One that fails to load rejects with its error, naming it.
+    const Missing = React.lazy(() => Promise.reject(new Error("no such chunk")));
+    const failed = await renderToHtml(<Missing />).catch((error: unknown) => error);
+    expect(failed).toBeInstanceOf(RenderError);
+    expect(failed).toMatchObject({ message: "[Unlayer] no such chunk (in <lazy>)", component: "lazy", cause: new Error("no such chunk") });
+  });
+
+  it("unwrap a <Suspense> around the template, its root's settings read, waiting for what's in it; its fallback, which isn't a document, never renders", async () => {
+    // It was taken for a template with no root: renderToJson() said its root wasn't one, and the HTML was a web page's
+    // document without the root's language and fonts, the Email's own document inside it.
+    const email = <Email lang="fr" fonts={[{ url: "https://fonts.example.com/brand.css" }]} previewText="Bonjour"><Row><Column><Paragraph>Hi</Paragraph></Column></Row></Email>;
+    const Welcome = () => email;
+    const AsyncWelcome = async () => (await later(null), <Welcome />);
+    const loading = <p>Loading</p>;
+    const html = renderToHtmlSync(<Welcome />);
+    expect(html.match(/<body/g)).toHaveLength(1);
+    const elements = [
+      <React.Suspense fallback={loading}><Welcome /></React.Suspense>,
+      <React.Suspense fallback={loading}><AsyncWelcome /></React.Suspense>,
+      <React.Suspense fallback={loading}>{email}</React.Suspense>,
+      <React.StrictMode><React.Suspense fallback={loading}><React.Suspense><AsyncWelcome /></React.Suspense></React.Suspense></React.StrictMode>,
+    ];
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      for (const element of elements) {
+        expect(await renderToHtml(element)).toBe(html);
+        expect(await renderToHtmlParts(element)).toEqual(renderToHtmlPartsSync(<Welcome />));
+        expect(await renderToPlainText(element)).toBe(renderToPlainTextSync(<Welcome />));
+        expect(await renderToJson(element)).toEqual(renderToJsonSync(<Welcome />));
+      }
+      // The synchronous renderers, where nothing suspends; and an async template in one, said as without it.
+      for (const element of [elements[0], elements[2]]) {
+        expect(renderToHtmlSync(element)).toBe(html);
+        expect(renderToJsonSync(element)).toEqual(renderToJsonSync(<Welcome />));
+      }
+      expect(warn.mock.calls.filter((call) => String(call[0]).includes("unwrap"))).toEqual([]);
+    } finally {
+      warn.mockRestore();
+    }
+    expect(() => renderToHtmlSync(elements[1])).toThrow(`[Unlayer] renderToHtml: ${TEMPLATE}`);
+    expect(() => renderToJsonSync(elements[1])).toThrow(`[Unlayer] renderToJson: ${TEMPLATE}`);
+    // A template in it that fails fails the render, naming it: its fallback can't make the document.
+    const Broken = async (): Promise<React.ReactElement> => {
+      await later(null);
+      throw new Error("no order");
+    };
+    for (const render of [renderToHtml, renderToJson]) {
+      await expect(render(<React.Suspense fallback={loading}><Broken /></React.Suspense>)).rejects.toMatchObject({ message: "[Unlayer] no order (in <Broken>)", component: "Broken" });
+      await expect(render(<React.Suspense fallback={loading}><Broken /></React.Suspense>, { onError: "omit" })).rejects.toBeInstanceOf(RenderError);
+    }
+    // Around a template with no root, it's what the template renders, as inside a root: its fallback renders where
+    // what's in it suspends, in the synchronous renderers.
+    const rows = (data: Data) => {
+      const Text = () => <Paragraph>{data.read()}</Paragraph>;
+      const Rows = () => <><Row><Column><Paragraph>Rows</Paragraph></Column></Row><Row><Column><Text /></Column></Row></>;
+      return <React.Suspense fallback={<Row><Column><Paragraph>Loading</Paragraph></Column></Row>}><Rows /></React.Suspense>;
+    };
+    const fallback = renderToHtmlSync(rows(suspending("Loaded")));
+    expect(fallback).toContain("Loading");
+    expect(fallback).not.toContain("Rows");
+    const waited = await renderToHtml(rows(suspending("Loaded")));
+    expect(waited).toContain("Loaded");
+    expect(waited).not.toContain("Loading");
+  });
+
+  it("wait for what's async in a template with no root, as in a root, each run once; the synchronous renderers say where it is", async () => {
+    // An async block in a Column, an async Row, async markup and a thrown promise (React 18's Suspense) among Rows
+    // with no root around them.
+    const runs = { price: 0, total: 0, note: 0 };
+    const Price = async () => {
+      runs.price++;
+      return <Paragraph>{await later("$10")}</Paragraph>;
+    };
+    const Total = async () => {
+      runs.total++;
+      return <Row><Column><Paragraph>{await later("$20")}</Paragraph></Column></Row>;
+    };
+    const Note = async () => {
+      runs.note++;
+      return <b>{await later("$30")}</b>;
+    };
+    const template = (data: Data) => {
+      const Text = () => <Paragraph>{data.read()}</Paragraph>;
+      const Rows = () => (
+        <>
+          <Row><Column><Price /></Column></Row>
+          <Total />
+          <div><Note /></div>
+          <Row><Column><Text /></Column></Row>
+        </>
+      );
+      return <Rows />;
+    };
+    const data = suspending("Loaded");
+    const html = await renderToHtml(template(data));
+    for (const text of ["$10", "$20", "<b>$30</b>", "Loaded"]) expect(html).toContain(text);
+    expect(data.calls).toBe(2);
+    expect(runs).toEqual({ price: 1, total: 1, note: 1 });
+    expect(await renderToPlainText(template(suspending("Loaded")))).toBe("$10\n\n$20\n\n$30\n\nLoaded");
+    expect((await renderToHtmlParts(template(suspending("Loaded")))).body).toContain("$20");
+    expect(runs).toEqual({ price: 3, total: 3, note: 3 });
+    // The design needs a root, async or not: what's in the template isn't waited for.
+    await expect(renderToJson(template(suspending("Loaded")))).rejects.toThrow("Root element must be <Body>, <Email>, <Page>, or <Document>");
+    expect(runs).toEqual({ price: 3, total: 3, note: 3 });
+    // The synchronous renderers fail on the first, naming it and where it is.
+    const said = inSync("Price", "Rows › Row 1 › Column 1 › Price");
+    expect(() => renderToHtmlSync(template(suspending("Loaded")))).toThrow(said);
+    expect(() => renderToHtmlPartsSync(template(suspending("Loaded")))).toThrow(said);
+    expect(() => renderToPlainTextSync(template(suspending("Loaded")))).toThrow(said);
+    // (A template that suspends itself is one of the template's wrappers, said as they are.)
+    const Suspends = () => <Row><Column><Paragraph>{suspending("Loaded").read()}</Paragraph></Column></Row>;
+    expect(() => renderToHtmlSync(<Suspends />)).toThrow(TEMPLATE);
+  });
+
+  it("give an async template the config of an <UnlayerProvider> around it, as the synchronous renderers do", async () => {
+    const Loaded = async () => <Paragraph text={`Hi, the total is ${await later("$10")}`} />;
+    async function Receipt() {
+      const order = await later({ number: 7 });
+      return <Email><Row><Column><Heading>Order {order.number}</Heading><Loaded /></Column></Row></Email>;
+    }
+    const config = { textDirection: "rtl", toSafeHtml: (html: string) => html.replace("Hi,", "Hey,") };
+    const element = <UnlayerProvider config={config}><Receipt /></UnlayerProvider>;
+    const html = await renderToHtml(element);
+    expect(html).toMatch(/<html[^>]* dir="rtl"/);
+    expect(html).toContain("Hey, the total is $10");
+    expect((await renderToHtmlParts(element)).body).toContain("Hey, the total is $10");
+    expect(await renderToPlainText(element)).toContain("Hey, the total is $10");
+    const design = await renderToJson(element);
+    expect(design.body.values.textDirection).toBe("rtl");
+    expect(contents(design)).toEqual(["Order 7", "Hi, the total is $10"]);
+  });
+
+  it("keep each render's own, run side by side", async () => {
+    const Slow = async ({ name, ms }: { name: string; ms: number }) => <Paragraph>{await later(name, ms)}</Paragraph>;
+    const email = (name: string, ms: number) => (
+      <Email>
+        <Row>
+          <Column>
+            <Slow name={`${name} 1`} ms={ms} />
+            <Slow name={`${name} 2`} ms={20 - ms} />
+          </Column>
+        </Row>
+      </Email>
+    );
+    const [a, b] = await Promise.all([renderToJson(email("A", 15)), renderToJson(email("B", 2))]);
+    expect(contents(a)).toEqual(["A 1", "A 2"]);
+    expect(contents(b)).toEqual(["B 1", "B 2"]);
+  });
+
+  it("reject with what a component threw after an await, as the error's cause", async () => {
+    const boom = new Error("the order service is down");
+    const Broken = async () => {
+      await later(null);
+      throw boom;
+    };
+    const failure = await renderToHtml(<Email><Row><Column><Paragraph>Before</Paragraph><Broken /></Column></Row></Email>).catch((error) => error);
+    expect(failure).toBeInstanceOf(RenderError);
+    expect(failure).toMatchObject({ message: "[Unlayer] the order service is down (in <Broken> at Row 1 › Column 1 › Broken)", component: "Broken", position: "Row 1 › Column 1 › Broken", cause: boom });
+    async function Template() {
+      await later(null);
+      throw boom;
+    }
+    await expect(renderToJson(<Template />)).rejects.toMatchObject({ message: "[Unlayer] the order service is down (in <Template>)", component: "Template", cause: boom });
+  });
+
+  it("compile <Tailwind config>, also in a template that's async", async () => {
+    async function Welcome() {
+      const color = await later("#007291");
+      return (
+        <Tailwind config={{ theme: { extend: { colors: { brand: color } } } }}>
+          <Email className="bg-gray-100">
+            <Row>
+              <Column>
+                <Paragraph className="text-brand">Hi</Paragraph>
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+    }
+    const design = await renderToJson(<Welcome />);
+    expect(design.body.values.backgroundColor).toBe("#f3f4f6");
+    expect(design.body.rows[0].columns[0].contents[0].values.color).toBe("#007291");
+    // Around Rows with no root too.
+    const rows = await renderToHtml(<Tailwind config={{ theme: { extend: { colors: { brand: "#007291" } } } }}><Row><Column><Paragraph className="text-brand">Hi</Paragraph></Column></Row></Tailwind>);
+    expect(rows).toMatch(/color: ?#007291/);
+    // The Tailwind entry's async renderers are these.
+    expect(tailwind.renderToHtml).toBe(renderToHtml);
+    expect(tailwind.renderToJson).toBe(renderToJson);
+  });
+
+  it("format the HTML with `pretty`: the same visible text, and Outlook's conditional comments kept", async () => {
+    const Name = async () => <em>{await later("Ada")}</em>;
+    const email = (
+      <Email>
+        <Row>
+          <Column>
+            <Paragraph>
+              Hello <Name />, see <a href="https://example.com">this</a>.
+            </Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    );
+    const [plain, pretty] = await Promise.all([renderToHtml(email), renderToHtml(email, { pretty: true })]);
+    expect(pretty).not.toBe(plain);
+    expect(pretty.split("\n").length).toBeGreaterThan(plain.split("\n").length);
+    const text = (html: string) => new JSDOM(html).window.document.body.textContent!.replace(/\s+/g, " ").trim();
+    expect(text(pretty)).toBe(text(plain));
+    // Every comment as it was: Outlook's conditional ones hold markup that only pairs up for Outlook.
+    const comments = (html: string) => html.match(/<!--[\s\S]*?-->/g) ?? [];
+    expect(comments(pretty).filter((c) => /\[if [^\]]*mso/.test(c)).length).toBeGreaterThan(0);
+    expect(comments(pretty)).toEqual(comments(plain));
+    expect(pretty).toContain("Hello <em>Ada</em>, see");
+    // Standalone: any HTML, the synchronous renderers' too, formatted the same way.
+    expect(await formatted(renderToHtmlSync(<Email><Row><Column><Paragraph>Hello Ada</Paragraph></Column></Row></Email>))).toBe(
+      await renderToHtml(<Email><Row><Column><Paragraph>Hello Ada</Paragraph></Column></Row></Email>, { pretty: true })
+    );
+  });
+
+  it("gives HTML whose plain text (toPlainText) has each link's own URL, its long lines' end tags split as prettier splits them", async () => {
+    const long = (n: number) => `https://example.com/track/${"campaign".repeat(6)}?utm_source=newsletter&utm_medium=email&utm_campaign=autumn&n=${n}`;
+    const email = (
+      <Email><Row><Column>
+        <Paragraph>Read <a href={long(1)}>the first story</a> and <a href={long(2)}>the second one</a>.</Paragraph>
+        <Button href={long(3)}>Shop now</Button>
+      </Column></Row></Email>
+    );
+    const text = toPlainText(await renderToHtml(email, { pretty: true }));
+    expect(text).toContain(`the first story (${long(1)})`);
+    expect(text).toContain(`the second one (${long(2)})`);
+    expect(text).toContain(`Shop now (${long(3)})`);
+  });
+
+  it("sets the HTML's comments aside in time linear in its size, and fails as prettier does on one nothing closes", async () => {
+    // `/<!--[\s\S]*?-->/g` looked from each `<!--` nothing closes to the end: 400 KB of them took 11 s.
+    const timing = await within(2000, () => formatted("<!--".repeat(102400)).then(() => undefined, (error: unknown) => error));
+    expect(timing.result).toBeInstanceOf(Error);
+    expect(inTime(timing)).toBe(true);
+    expect(await formatted("<p>a<!-- one --><!--two--></p>")).toContain("<!-- one --><!--two-->");
+  });
+
+  it("write the plain text with the synchronous renderer's options", async () => {
+    const email = (
+      <Email>
+        <Row>
+          <Column>
+            <Heading>Welcome</Heading>
+            <Paragraph html='Read <a href="https://example.com/a">the guide</a>.' />
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(await renderToPlainText(email, { links: "after", uppercaseHeadings: false })).toBe("Welcome\n\nRead the guide [1].\n\n[1] https://example.com/a");
+  });
+
+  it("say the synchronous renderers can't, naming the async component (without calling it)", () => {
+    let calls = 0;
+    const Later = async () => (calls++, <Paragraph>later</Paragraph>);
+    const email = <Email><Row><Column><Later /><Paragraph>Still here</Paragraph></Column></Row></Email>;
+    const said = '[Unlayer] it is async or suspends, and this renderer is synchronous: render with "@unlayer/react-elements/async", or load its data first and pass it as props (in <Later> at Row 1 › Column 1 › Later)';
+    expect(() => renderToHtmlSync(email)).toThrow(said);
+    // Left out where the render leaves failed parts out, said once.
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      expect(renderToHtmlSync(email, { onError: "omit" })).toContain("Still here");
+      expect(error.mock.calls.map((c) => String(c[0]))).toEqual([said.replace("[Unlayer] it", "[Unlayer] Left out: it")]);
+    } finally {
+      error.mockRestore();
+    }
+    expect(calls).toBe(0);
+  });
+
+  it("say it for an async or suspending template too, in each synchronous renderer: a RenderError naming it", () => {
+    const Receipt = async () => <Email><Row><Column><Paragraph>later</Paragraph></Column></Row></Email>;
+    const Wrapper = ({ children }: { children: React.ReactNode }) => <>{suspending("Loaded").read()}{children}</>;
+    const Pending = React.lazy(() => new Promise<never>(() => {}));
+    const templates: Array<[React.ReactElement, string]> = [
+      [<Receipt />, "Receipt"],
+      [<UnlayerProvider config={{ textDirection: "rtl" }}><Receipt /></UnlayerProvider>, "Receipt"],
+      [<Wrapper><Receipt /></Wrapper>, "Wrapper"],
+      [<Pending />, "lazy"],
+    ];
+    const renders = { renderToHtml: renderToHtmlSync, renderToHtmlParts: renderToHtmlPartsSync, renderToPlainText: renderToPlainTextSync, renderToJson: renderToJsonSync };
+    for (const [template, name] of templates) {
+      for (const [api, render] of Object.entries(renders)) {
+        let thrown: unknown;
+        try {
+          render(template);
+        } catch (error) {
+          thrown = error;
+        }
+        expect(thrown, `${api}(<${name} />)`).toBeInstanceOf(RenderError);
+        expect(thrown).toMatchObject({ message: `[Unlayer] ${api}: ${TEMPLATE}, or their data loaded first and passed as props (in <${name}>)`, component: name, position: "" });
+      }
+    }
+  });
+});
diff --git a/packages/react/src/async/collect.ts b/packages/react/src/async/collect.ts
new file mode 100644
index 00000000..ce833cd4
--- /dev/null
+++ b/packages/react/src/async/collect.ts
@@ -0,0 +1,76 @@
+/**
+ * How the async renderers wait for what's async in a template, the main entry's walker doing the rest (src/engine;
+ * this entry reaches it through the main entry's internals, so one copy of the engine renders): a template's
+ * wrappers called until its root, each awaited where it waits; and its content walked with a hole wherever a
+ * component suspends (an async component, `use()` of a pending promise, a thrown promise, a lazy component, a promise
+ * as a child). The walk goes on past a hole, so siblings start their own work at once; a hole is filled when its
+ * promise settles, walking that component again at the tree position, with the context and in the place it had; and
+ * the output is flattened in tree order once everything before the first error (or everything) has settled, whatever
+ * settled first.
+ */
+import type React from "react";
+import type { CollectOptions, Flat, Part, Task, Wait } from "../engine";
+import type { Hole } from "../engine/output";
+import type { Engine } from "../utils/internals";
+import type { Steps, Unwrapped } from "../utils/unwrap-root";
+
+/** What a template's wrappers lead to (its root), awaiting what each waits for (its promise, or what it `use()`d). */
+export async function take(steps: Steps): Promise<Unwrapped> {
+  let step = steps.next();
+  while (!step.done) {
+    let value: unknown;
+    try {
+      value = await step.value;
+    } catch (error) {
+      step = steps.throw(error);
+      continue;
+    }
+    step = steps.next(value);
+  }
+  return step.value;
+}
+
+/** `node` collected once what's async in it has settled (see above). */
+export function collectWaiting(engine: Engine, node: React.ReactNode, options: CollectOptions): Promise<Flat> {
+  return new Promise((resolve, reject) => {
+    // Over once it's flattened (or failed): holes that settle after do nothing. (Flattened from when the walk is over:
+    // a thenable can settle as the walk runs.)
+    let done = false;
+    let walked = false;
+    let parts: Part[] = [];
+    let omit = false;
+    const flatten = () => {
+      if (done || !walked) return;
+      try {
+        const flat = engine.flatten(parts, omit);
+        if (flat === engine.PENDING) return;
+        done = true;
+        resolve(flat as Flat);
+      } catch (error) {
+        done = true;
+        reject(error);
+      }
+    };
+    // A hole for what `thenable` gives, filled, where the walk was, once it settles.
+    const wait: Wait = (w, task, out, thenable, fill) => {
+      const part: Hole = { t: "hole", parts: [], settled: false };
+      out.push(part);
+      const at: Task = { tree: task.tree, contexts: task.contexts, format: task.format, frame: task.frame, watch: null };
+      engine.track(thenable);
+      const settled = () => {
+        if (done) return;
+        try {
+          fill({ ...at }, part.parts);
+        } catch (error) {
+          part.parts.push(engine.errorPart(w, error, at.frame));
+        }
+        part.settled = true;
+        flatten();
+      };
+      thenable.then(settled, settled);
+    };
+    ({ parts, omit } = engine.walk(node, options, wait));
+    walked = true;
+    flatten();
+  });
+}
diff --git a/packages/react/src/async/index.ts b/packages/react/src/async/index.ts
new file mode 100644
index 00000000..1d4e7c3b
--- /dev/null
+++ b/packages/react/src/async/index.ts
@@ -0,0 +1,185 @@
+/**
+ * @unlayer/react-elements/async: the renderers for templates that load data as they render. Async templates and
+ * components, Suspense (`use()` on React 19, thrown promises on React 18) and `<Tailwind config>` are resolved
+ * first; the HTML, plain text and design are then what Elements' synchronous renderers make, from the same render.
+ */
+import type React from "react";
+import {
+  renderToHtml as renderHtml,
+  type DesignJSON,
+  type HtmlParts,
+  type PlainTextOptions,
+  type RenderToHtmlOptions,
+  type RenderToJsonOptions,
+  type UnlayerConfig,
+} from "@unlayer/react-elements";
+import type { TailwindConfig, TailwindHandle } from "@unlayer/react-elements/tailwind";
+import { prettyHtml } from "./pretty";
+import { collectWaiting, take } from "./collect";
+import type { CollectOptions, Flat } from "../engine";
+import type { Engine, Renders } from "../utils/internals";
+
+export type { DesignJSON, HtmlParts, PlainTextOptions, RenderToHtmlOptions, RenderToJsonOptions };
+
+/**
+ * HTML formatted for reading, as the renderers' `pretty` formats it (with prettier, an optional peer dependency):
+ * no space added or taken where it would show, and Outlook's conditional comments kept as they are. Not on edge
+ * runtimes, which can't load prettier as it runs: format at build time there.
+ */
+export const pretty: (html: string) => Promise<string> = prettyHtml;
+
+/** The renderers' options: the synchronous ones', and `pretty`. */
+export interface PrettyOption {
+  /** The HTML formatted for reading (with prettier, an optional peer dependency); the same document otherwise. */
+  pretty?: boolean;
+}
+
+// Shared with the Tailwind entry, a bundle of its own (the package's entries share nothing else but the main one): the
+// compiler it registers when it loads, and a handle's resolver.
+const LOADER = Symbol.for("@unlayer/react-elements/tailwind-loader");
+const TAILWIND = Symbol.for("@unlayer/react-elements/tailwind");
+
+/**
+ * When none of `handles` is compiling again after a class it couldn't read (see the Tailwind entry's
+ * declarationReader), whose classes a synchronous render couldn't read till then: a few rounds at most, as another
+ * render's class can make one compile again while this waits. Nothing (undefined) where none is: the render isn't put
+ * off a tick for it.
+ */
+function compiled(handles: unknown[], rounds = 4): Promise<void> | undefined {
+  const waits = handles.map((handle) => (handle as Record<symbol, { ready?(): Promise<void> | undefined }> | null)?.[TAILWIND]?.ready?.()).filter(Boolean);
+  return waits.length && rounds ? Promise.all(waits).then(() => compiled(handles, rounds - 1)) : undefined;
+}
+
+interface Collected {
+  recorded: Array<{ kind: string; props?: { tw?: unknown; config?: TailwindConfig }; load?: Load }>;
+}
+type Load = (config?: TailwindConfig) => Promise<TailwindHandle>;
+/**
+ * A render's scope (see utils/render-scope.ts): what it compiled for its <Tailwind config>s, for their rewrites; the
+ * parts it left out, and how many of them were left out before it rendered again.
+ */
+type Scope = { tailwind?: unknown; omitted: unknown[]; listed?: number };
+interface Internals {
+  newScope(): Scope;
+  withScope<T>(scope: Scope, run: () => T): T;
+  unwrapAsync(element: React.ReactElement, scope: Scope, steps: typeof take, idPrefix?: string, api?: string): Promise<React.ReactElement>;
+  collectAsync(root: React.ReactElement, scope: Scope, options: Partial<UnlayerConfig> | undefined, collect: (node: React.ReactNode, walk: CollectOptions) => Promise<Flat>): Promise<Collected>;
+  /** Whether a type is one of Elements' roots, of any copy (see utils/root-type.ts). */
+  isRoot(type: unknown): boolean;
+  engine: Engine;
+  /** The synchronous renders, in the scope they're run in (the render functions make one of their own). */
+  renders: Renders;
+  /** Says what the render's components left to say once it's done (an older main entry's has none). */
+  done?(scope: Scope): void;
+}
+
+/**
+ * Elements' Tailwind compiler, for a `<Tailwind config>` of a copy of Elements that doesn't carry its own (an older
+ * one): the Tailwind entry's loaded last, never loaded otherwise.
+ */
+async function tailwindLoader(): Promise<Load> {
+  const loaded = (globalThis as Record<symbol, unknown>)[LOADER];
+  if (typeof loaded === "function") return loaded as Load;
+  // By a name that isn't a literal, so no bundler follows it (into `tailwindcss`, an optional peer dependency: Vite's
+  // Worker build bundled it, and the module threw as it loaded where it isn't installed): loaded when it runs.
+  return (await entry(TAILWIND_ENTRY)).loadTailwind;
+}
+
+const TAILWIND_ENTRY = "@unlayer/react-elements/tailwind";
+const entry = (name: string): Promise<any> => import(/* webpackIgnore: true */ /* @vite-ignore */ name);
+
+/**
+ * Renders `element` once, resolving what's async in it: its root first (an async template, or one that `use()`s a
+ * promise), then its content, walked waiting for its async components, Suspense and `use()` (siblings at once, the
+ * output in tree order); the synchronous render `run` makes the output from that, in the same scope. A template with
+ * no root is its own content (what it rendered) where `api` names the render function (in what it says of one); the
+ * design, which needs a root, names none.
+ */
+async function render<T>(element: React.ReactElement, options: Partial<UnlayerConfig> | undefined, run: (renders: Renders, root: React.ReactElement) => T, api?: string): Promise<T> {
+  const internals = (renderHtml as unknown as Record<symbol, Internals>)[Symbol.for("@unlayer/react-elements/internals")];
+  const scope = internals.newScope();
+  try {
+    return await renderIn(internals, scope, element, options, run, api);
+  } finally {
+    internals.done?.(scope);
+  }
+}
+
+/** `render`'s, in its scope. */
+async function renderIn<T>(internals: Internals, scope: Scope, element: React.ReactElement, options: Partial<UnlayerConfig> | undefined, run: (renders: Renders, root: React.ReactElement) => T, api?: string): Promise<T> {
+  const root = await internals.unwrapAsync(element, scope, take, options?.idPrefix, api);
+  const content = internals.isRoot(root.type) ? (root.props as { children?: React.ReactNode } | null)?.children : api && root;
+  const scopes: Array<{ config?: TailwindConfig; load?: Load }> = [];
+  // The handles its <Tailwind tw>s are given.
+  const given: unknown[] = [];
+  if (content && typeof content === "object") {
+    const collected = await internals.collectAsync(root, scope, options, (node, walk) => collectWaiting(internals.engine, node, walk));
+    for (const r of collected.recorded) {
+      if (r.kind !== "tailwind") continue;
+      if (r.props?.tw) given.push(r.props.tw);
+      else scopes.push({ config: r.props?.config, load: typeof r.load === "function" ? r.load : undefined });
+    }
+  }
+  // Each scope's config compiled by its copy's compiler (an older copy's by the one loaded last), once each.
+  const handles = new Map<Load, Map<unknown, TailwindHandle>>();
+  for (const { config, load: own } of scopes) {
+    const load = own ?? (await tailwindLoader());
+    const compiled = handles.get(load) ?? new Map<unknown, TailwindHandle>();
+    handles.set(load, compiled);
+    if (!compiled.has(config)) compiled.set(config, await load(config));
+  }
+  // The handles, in the render's scope, which gives them to its <Tailwind config>s' rewrites: a <Tailwind> says which
+  // it is, by its type (an older copy's doesn't: any compiled for its config). A render the user's code starts has a
+  // scope of its own, without them.
+  scope.tailwind = (config: TailwindConfig | undefined, type?: unknown) => {
+    const own = handles.get((type as Record<symbol, Load> | undefined)?.[LOADER] as Load)?.get(config);
+    if (own) return own;
+    for (const compiled of handles.values()) if (compiled.has(config)) return compiled.get(config);
+    return undefined;
+  };
+  // (Right before the render, which is synchronous: nothing compiles again in between.)
+  const all = [...given, ...[...handles.values()].flatMap((compiled) => [...compiled.values()])];
+  const waiting = compiled(all);
+  if (waiting) await waiting;
+  // A class of its own Tailwind couldn't read makes it compile again as it renders: it waits, and renders again, in
+  // its scope (what it worked out kept, its components not run again), a few times at most (each such class is built
+  // alone first, then refused).
+  for (let again = 3; ; again--) {
+    try {
+      return internals.withScope(scope, () => run(internals.renders, root));
+    } catch (error) {
+      const wait = again > 0 && (error as Record<symbol, { compiling?: boolean }> | null)?.[TAILWIND]?.compiling ? compiled(all) : undefined;
+      if (!wait) throw error;
+      // (What it left out so far is listed and said: it isn't again.)
+      scope.listed = scope.omitted.length;
+      await wait;
+    }
+  }
+}
+
+/**
+ * `renderToHtml`, for templates that load data as they render: async templates and components, Suspense and
+ * `<Tailwind config>` are resolved first. The same document; with `pretty`, formatted for reading.
+ */
+export async function renderToHtml(element: React.ReactElement, options?: RenderToHtmlOptions & PrettyOption): Promise<string> {
+  const { pretty, ...rest } = options ?? {};
+  const html = await render(element, rest, (renders, root) => renders.html(root, rest), "renderToHtml");
+  return pretty ? prettyHtml(html) : html;
+}
+
+/** `renderToPlainText`, for templates that load data as they render (see renderToHtml), with the same options. */
+export function renderToPlainText(element: React.ReactElement, config?: Partial<UnlayerConfig> & PlainTextOptions): Promise<string> {
+  return render(element, config, (renders, root) => renders.text(root, config), "renderToPlainText");
+}
+
+/** `renderToJson`, for templates that load data as they render (see renderToHtml), with the same options. */
+export function renderToJson(element: React.ReactElement, options?: RenderToJsonOptions): Promise<DesignJSON> {
+  return render(element, options, (renders, root) => renders.json(root, options));
+}
+
+/** `renderToHtmlParts`, for templates that load data as they render (see renderToHtml); with `pretty`, its head and body formatted. */
+export async function renderToHtmlParts(element: React.ReactElement, config?: Partial<UnlayerConfig> & PrettyOption): Promise<HtmlParts> {
+  const { pretty, ...rest } = config ?? {};
+  const parts = await render(element, rest, (renders, root) => renders.parts(root, rest), "renderToHtmlParts");
+  return pretty ? { ...parts, head: await prettyHtml(parts.head), body: await prettyHtml(parts.body) } : parts;
+}
diff --git a/packages/react/src/async/pretty.ts b/packages/react/src/async/pretty.ts
new file mode 100644
index 00000000..a2e231ea
--- /dev/null
+++ b/packages/react/src/async/pretty.ts
@@ -0,0 +1,51 @@
+/**
+ * HTML formatted for reading, with prettier (an optional peer dependency, loaded only when it's asked for). Its
+ * whitespace sensitivity is strict: no space is added or taken where it would show (in text, between inline
+ * elements). Comments are set aside first and put back as they were: Outlook's conditional ones (`<!--[if mso]>`)
+ * hold markup that doesn't pair up, which prettier would rewrite. The document shows the same.
+ */
+/**
+ * An optional peer dependency's module, loaded when it runs. Its name isn't a literal, so no bundler follows it into
+ * the bundle: esbuild (wrangler's, a serverless bundler's) failed on an app that imports this entry without prettier
+ * installed; webpack and Vite are told to leave it too.
+ */
+const peer = (name: string): Promise<any> => import(/* webpackIgnore: true */ /* @vite-ignore */ name);
+
+export async function prettyHtml(html: string): Promise<string> {
+  let prettier: { format(text: string, options: Record<string, unknown>): Promise<string> };
+  let plugin: unknown;
+  try {
+    // Not where a bundler would follow it: loaded when it runs (see peer).
+    [prettier, plugin] = await Promise.all([peer("prettier/standalone"), peer("prettier/plugins/html")]);
+  } catch (cause) {
+    // Prettier 2 installs with Elements (the peer dependency takes any version, so a project's prettier 2 doesn't fail
+    // the install), but has no `prettier/plugins/html`: its version says so. (`standalone.js`, which both have: 2 has
+    // no `exports`, so its files are named with their extension.)
+    const version: unknown = await peer("prettier/standalone.js").then((p: Record<string, any>) => p.version ?? p.default?.version, () => undefined);
+    const older = typeof version === "string" && Number.parseInt(version, 10) < 3;
+    throw Object.assign(
+      new Error(older ? `[Unlayer] \`pretty\` needs prettier 3, and prettier ${version} is installed: upgrade it with \`npm install prettier@3\` (an optional peer dependency of @unlayer/react-elements).` : "[Unlayer] `pretty` needs prettier: install it with `npm install prettier` (an optional peer dependency of @unlayer/react-elements)."),
+      { cause }
+    );
+  }
+  const comments: string[] = [];
+  const set = setAside(html, comments);
+  const formatted = await prettier.format(set, { parser: "html", plugins: [plugin], htmlWhitespaceSensitivity: "strict", printWidth: 120 });
+  return formatted.replace(/<!--unlayer-pretty-(\d+)-->/g, (_, i: string) => comments[Number(i)]);
+}
+
+/**
+ * `html` with each comment (`<!--…-->`) set aside in `comments`, a placeholder in its place, as
+ * `/<!--[\s\S]*?-->/g` finds them: read once, where that regex looked from each `<!--` nothing closes to the end.
+ */
+function setAside(html: string, comments: string[]): string {
+  let out = "";
+  let kept = 0;
+  for (let open = html.indexOf("<!--"); open >= 0; open = html.indexOf("<!--", kept)) {
+    const close = html.indexOf("-->", open + 4);
+    if (close < 0) break;
+    out += `${html.slice(kept, open)}<!--unlayer-pretty-${comments.push(html.slice(open, close + 3)) - 1}-->`;
+    kept = close + 3;
+  }
+  return out + html.slice(kept);
+}
diff --git a/packages/react/src/code/CodeBlock.tsx b/packages/react/src/code/CodeBlock.tsx
new file mode 100644
index 00000000..6a8e5ed6
--- /dev/null
+++ b/packages/react/src/code/CodeBlock.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { Html, type HtmlProps } from "@unlayer/react-elements";
+import { highlightCode, type HighlightOptions } from "./highlight";
+
+/** Text children (a string, a template literal, numbers), as written. */
+export const textOf = (node: React.ReactNode): string =>
+  node == null || typeof node === "boolean" ? "" : Array.isArray(node) ? node.map(textOf).join("") : React.isValidElement<{ children?: React.ReactNode }>(node) ? textOf(node.props.children) : String(node);
+
+export interface CodeBlockProps extends HighlightOptions, Omit<HtmlProps, "html" | "values" | "children" | "padding" | "borderRadius" | "fontSize" | "fontFamily" | "lineHeight"> {
+  /** The code (or as `code`). */
+  children?: React.ReactNode;
+  code?: string;
+}
+
+/**
+ * CodeBlock - Syntax-highlighted code that email clients show as it looks here: inline styles only, the code's
+ * spaces and lines kept (in Outlook too, in a monospace font). It's an HTML block in the design.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock language="ts" theme="dark" lineNumbers>{`const total = items.reduce((sum, item) => sum + item.price, 0);`}</CodeBlock>
+ * ```
+ */
+export function CodeBlock({ children, code, language, theme, lineNumbers, fontSize, lineHeight, fontFamily, padding, borderRadius, wrap, ...block }: CodeBlockProps): React.ReactElement {
+  const html = highlightCode(code ?? textOf(children), { language, theme, lineNumbers, fontSize, lineHeight, fontFamily, padding, borderRadius, wrap });
+  return <Html {...(block as Record<string, unknown>)} html={html} />;
+}
+
+CodeBlock.displayName = "CodeBlock";
diff --git a/packages/react/src/code/CodeInline.tsx b/packages/react/src/code/CodeInline.tsx
new file mode 100644
index 00000000..d5fef5f3
--- /dev/null
+++ b/packages/react/src/code/CodeInline.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { attribute, escapeHtml, MONOSPACE } from "./highlight";
+import { themeOf, type CodeTheme, type CodeThemeName } from "./themes";
+import { textOf } from "./CodeBlock";
+
+export interface CodeInlineOptions {
+  /** `light` (the default), `dark`, one of highlight.js's (see CodeBlock's `theme`), or a theme of your own: its `inline` colors. */
+  theme?: CodeThemeName | CodeTheme;
+  /** Its fonts (default: the system's monospace fonts, then Consolas and Courier New). */
+  fontFamily?: string;
+}
+
+/** Inline code's style: a monospace font a little smaller than the text around it, on the theme's background. */
+function styleOf({ theme, fontFamily }: CodeInlineOptions): string {
+  const { inline } = themeOf(theme);
+  return attribute(`font-family: ${fontFamily ?? MONOSPACE}; font-size: 0.9em; color: ${inline.color}; background-color: ${inline.background}; padding: 1px 4px; border-radius: 4px`);
+}
+
+/**
+ * Inline code as HTML, for an `html` prop or a Heading's `text`: a `<code>` with inline styles (Outlook shows it
+ * in Courier New, without the padding and corners).
+ *
+ * @example
+ * ```tsx
+ * <Paragraph html={`Run ${codeInline("npm install")} to start.`} />
+ * ```
+ */
+export function codeInline(code: string, options: CodeInlineOptions = {}): string {
+  return `<code style="${styleOf(options)}">${escapeHtml(code)}</code>`;
+}
+
+export interface CodeInlineProps extends CodeInlineOptions {
+  /** The code (or as `code`). */
+  children?: React.ReactNode;
+  code?: string;
+}
+
+/**
+ * CodeInline - Inline code in a Paragraph's, Heading's or Button's text: `<Paragraph>Run <CodeInline>npm install</CodeInline></Paragraph>`.
+ * It's the `<code>` `codeInline()` writes, in the HTML and the design.
+ */
+export function CodeInline(props: CodeInlineProps): React.ReactElement {
+  return <span dangerouslySetInnerHTML={{ __html: codeInline(props.code ?? textOf(props.children), props) }} />;
+}
+
+CodeInline.displayName = "CodeInline";
diff --git a/packages/react/src/code/code.test.tsx b/packages/react/src/code/code.test.tsx
new file mode 100644
index 00000000..c3bd9a7b
--- /dev/null
+++ b/packages/react/src/code/code.test.tsx
@@ -0,0 +1,411 @@
+import React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+import { Button, Column, Email, Heading, Html, Page, Paragraph, Row, registerTool, renderToHtml, renderToJson, renderToPlainText } from "../index";
+import * as asyncRenderers from "../async";
+import { CodeBlock, CodeInline, codeInline, codeThemes, highlightCode, listLanguages, registerLanguage } from "./index";
+import { escapeHtml, HIGHLIGHT_LIMIT } from "./highlight";
+import { growth, inTime, within } from "../test-timing";
+
+let warn: MockInstance;
+beforeEach(() => {
+  warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+});
+afterEach(() => warn.mockRestore());
+
+const email = (content: React.ReactNode) => (
+  <Email>
+    <Row>
+      <Column>{content}</Column>
+    </Row>
+  </Email>
+);
+const SOURCE = `function total(items) {\n  // the sum\n  return items.reduce((sum, item) => sum + item.price, 0);\n}`;
+
+describe("CodeBlock", () => {
+  it("writes highlighted code with inline styles only, no class an email client would have to resolve", () => {
+    const html = highlightCode(SOURCE, { language: "js" });
+    expect(html).not.toMatch(/\sclass=/);
+    expect(html).toContain('<span style="color: #b0326f">function</span>');
+    expect(html).toContain('<span style="color: #6b7280; font-style: italic">// the sum</span>');
+    // Outlook: a <pre> (spaces and lines kept), a monospace stack ending in Courier New, pixels for the line height.
+    expect(html).toMatch(/<pre style="[^"]*font-family: ui-monospace,[^"]*'Courier New', monospace; font-size: 13px; line-height: 20px; mso-line-height-rule: exactly/);
+    expect(html).toContain('bgcolor="#f6f7f9"');
+    expect(html).toContain('\n  <span style="color: #b0326f">return</span>');
+  });
+
+  it("is an HTML block in the email, the design and the plain text", () => {
+    const element = email(<CodeBlock language="ts" theme="dark" fontSize={14}>{SOURCE}</CodeBlock>);
+    const html = renderToHtml(element);
+    expect(html).toContain("background-color: #1b1f2a");
+    expect(html).toContain("font-size: 14px; line-height: 21px");
+    const block = renderToJson(element).body.rows[0].columns[0].contents[0];
+    expect(block.type).toBe("html");
+    expect(block.values.html).toContain('<span style="color: #f28fbf">function</span>');
+    // The code as written: its indentation kept.
+    expect(renderToPlainText(element)).toBe(SOURCE);
+  });
+
+  it("numbers lines in a row each, numbers left out of the plain text", () => {
+    const html = highlightCode("a\n\n  b", { lineNumbers: 9 });
+    expect(html.match(/<tr>/g)).toHaveLength(4);
+    expect(html).toMatch(/data-skip-in-text="true"[^>]*>9<\/td>[\s\S]*>10<\/td>[\s\S]*>11<\/td>/);
+    expect(renderToPlainText(email(<CodeBlock lineNumbers>{"a\n\n  b"}</CodeBlock>))).toBe("a\n\n  b");
+  });
+
+  it("takes its own themes, and one of yours", () => {
+    expect(Object.keys(codeThemes)).toEqual(["light", "dark", "github-light", "github-dark", "one-dark", "monokai", "dracula", "nord", "solarized-light", "solarized-dark"]);
+    const theme = { ...codeThemes.light, background: "#000000", tokens: { keyword: "color: #ff0000; font-weight: bold" } };
+    const html = highlightCode("const a = 1", { language: "js", theme, lineHeight: "18px", padding: 8, wrap: false });
+    expect(html).toContain('<span style="color: #ff0000; font-weight: bold">const</span>');
+    expect(html).toMatch(/background-color: #000000.*padding: 8px.*line-height: 18px.*white-space: pre; overflow-x: auto/s);
+  });
+
+  it("takes highlight.js's themes by name: their colors, a scope's own style over its parent's", () => {
+    const code = "class A extends B { get() { return 'x'; } } // done";
+    const github = highlightCode(code, { language: "js", theme: "github-light" });
+    expect(github).toContain('<span style="color: #d73a49">class</span>');
+    expect(github).toContain('<span style="color: #032f62">&#x27;x&#x27;</span>');
+    expect(github).toContain('<span style="color: #6a737d">// done</span>');
+    expect(github).toMatch(/bgcolor="#ffffff" style="[^"]*border: 1px solid #d1d9e0/);
+    // Monokai's class names: white (`.hljs-title.class_`), and bold as a title (`.hljs-title`).
+    expect(highlightCode(code, { language: "js", theme: "monokai" })).toContain('<span style="color: white; font-weight: bold">A</span>');
+    for (const name of ["github-dark", "one-dark", "dracula", "nord", "solarized-light", "solarized-dark"] as const) {
+      const theme = codeThemes[name];
+      expect(highlightCode(code, { language: "js", theme: name })).toContain(`bgcolor="${theme.background}"`);
+      expect(theme.tokens.keyword).toMatch(/^color: #[0-9a-f]{6}/);
+      expect(theme.tokens.comment).toMatch(/^color: #[0-9a-f]{6}/);
+    }
+    expect(codeInline("x", { theme: "nord" })).toContain("color: #d8dee9; background-color: #2e3440");
+  });
+
+  it("shows code it has no grammar for without colors, and says so once in a render", () => {
+    const said = '[Unlayer] CodeBlock has no grammar for `brainfudge`, so it\'s shown without colors: add one with registerLanguage() from "@unlayer/react-elements/code".';
+    expect(highlightCode("<b>x</b>", { language: "brainfudge" })).toContain("&lt;b&gt;x&lt;/b&gt;");
+    // Outside a render, each time; in one, once (each render says it).
+    const email = (
+      <Email>
+        <Row>
+          <Column>
+            <CodeBlock language="brainfudge">y</CodeBlock>
+            <CodeBlock language="brainfudge">z</CodeBlock>
+          </Column>
+        </Row>
+      </Email>
+    );
+    renderToHtml(email);
+    renderToHtml(email);
+    expect(warn.mock.calls.map((c) => String(c[0]))).toEqual([said, said, said]);
+    registerLanguage("brainfudge", () => ({ name: "brainfudge", contains: [{ scope: "keyword", match: /\+/ }] }));
+    expect(listLanguages()).toContain("brainfudge");
+    expect(highlightCode("+", { language: "brainfudge" })).toContain('<span style="color: #b0326f">+</span>');
+  });
+
+  it("highlights up to 8,192 characters at once: on some code highlight.js's time grows with its size squared, so a longer block is shown without colors, and said", async () => {
+    // 40 KB took 4.4 s in INI and 2.2 s in Markdown; a line of `$a` in Java 6 s for 32 KB; C# on short lines too.
+    const fill = (unit: string, n: number) => unit.repeat(Math.ceil(n / unit.length)).slice(0, n);
+    const shapes: [string, string][] = [["ini", ".e1"], ["toml", ".e1"], ["markdown", "["], ["java", "$a"], ["csharp", "a a\n"], ["shell", "${"]];
+    for (const [language, unit] of shapes) {
+      const code = fill(unit, 40960).trim();
+      const timing = await within(1000, () => highlightCode(code, { language }));
+      const html = timing.result;
+      expect([language, inTime(timing), html.includes(`${escapeHtml(code)}</code>`), html.includes("<span style=")]).toEqual([language, true, true, false]);
+    }
+    expect(warn.mock.calls[0][0]).toBe("[Unlayer] CodeBlock: its code is 40960 characters, more than the 8192 highlight.js is given at once (on some code its time grows with the code's size squared), so it's shown without colors.");
+    // In the block's own style.
+    const block = renderToHtml(email(<CodeBlock language="ini" theme="dark" code={fill(".e1", 40960)} />));
+    expect(block).toContain('bgcolor="#1b1f2a"');
+    expect(block).toMatch(/<pre style="[^"]*font-family: ui-monospace,[^"]*"><code[^>]*>\.e1\.e1/);
+    // Up to it, highlighted (the slowest grammar's worst, 0.4 s).
+    expect(highlightCode(fill("a = 1\n", 8192), { language: "ini" })).toContain('<span style="color: #b4530a">1</span>');
+  });
+
+  it("takes off its code's trailing whitespace in time linear in its size, before any limit", async () => {
+    // `/\s+$/` tried again from each character of a long run of spaces that `x` ends: 100,000 took 5.7 s, also with no
+    // language, before the 8,192 characters' limit.
+    for (const code of ["a" + " ".repeat(102400) + "x", "\n".repeat(102400) + "x", "a\t \r\n".repeat(25600) + "x  \n\n"]) {
+      for (const language of [undefined, "js"]) {
+        const timing = await within(1000, () => renderToHtml(email(<CodeBlock language={language} code={code} />)));
+        const html = timing.result;
+        expect([JSON.stringify(code.slice(0, 6)), language, inTime(timing)]).toEqual([JSON.stringify(code.slice(0, 6)), language, true]);
+        expect(html).toMatch(/x<\/code>/);
+      }
+    }
+    // As before: a leading line break and the trailing whitespace off, the rest kept.
+    expect(highlightCode("\n  a  \n\t\n ", {})).toContain("<code style=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 13px; line-height: 20px; mso-line-height-rule: exactly\">  a</code>");
+  });
+
+  it("costs about ten times as much for ten times as much code of any short shape, in any language (random, seeded)", async () => {
+    // Past HIGHLIGHT_LIMIT characters code is written without colors; up to it, it's highlighted (checked too).
+    const pieces = ["$", "{", "}", "(", "(", ")", "[", "]", "<", ">", "</", "/*", "*/", "//", "#", '"', "'", "`", "${", "\\", "-", "_", ".", "1", "e", "a", "=", ":", ";", ",", " ", "  ", "\t", "\n", "\n", "\r\n", "<!--", "-->", "<<EOF\n", "@", "%", "!", "?"];
+    const languages = [undefined, ...listLanguages()];
+    let seed = 7;
+    const random = (n: number) => ((seed = (Math.imul(seed, 1103515245) + 12345) >>> 0), Math.floor((seed / 2 ** 32) * n));
+    // A shape: a unit over and over, between a piece before it and one after it (`x` after spaces, say).
+    const fill = (head: string, unit: string, tail: string, bytes: number) => head + unit.repeat(Math.ceil(bytes / unit.length)).slice(0, bytes) + tail;
+    const time = (code: string, language: string | undefined, lineNumbers: boolean) => {
+      const start = performance.now();
+      highlightCode(code, { language, lineNumbers });
+      return performance.now() - start;
+    };
+    const slow: string[] = [];
+    for (let run = 0; run < 150; run++) {
+      let unit = "";
+      for (let i = 0, n = 1 + random(4); i < n; i++) unit += pieces[random(pieces.length)];
+      const [head, tail] = [random(2) ? pieces[random(pieces.length)] : "", random(3) ? pieces[random(pieces.length)] : ""];
+      const language = languages[random(languages.length)];
+      // (Whether each timing numbers its lines, drawn in the order the sizes are first timed: the seeded shapes stay the
+      // same however often one is timed again.)
+      const numbered: Record<number, boolean> = { 10240: random(4) === 0, 102400: random(4) === 0 };
+      const { small: quick, large: fast, grows } = await growth((bytes) => time(fill(head, unit, tail, bytes), language, numbered[bytes]), [10240, 102400], { ratio: 20, floor: 100 });
+      // And up to the limit, highlighted: no shape of any grammar takes more than about a second.
+      const lineNumbers = random(4) === 0;
+      const highlighted = await within(2000, () => highlightCode(fill(head, unit, tail, HIGHLIGHT_LIMIT - 16), { language, lineNumbers }));
+      const shape = JSON.stringify([head, unit, tail]);
+      if (grows || !highlighted.ok) slow.push(`${language} ${shape}: ${quick.toFixed(1)} ms for 10 KB, ${fast.toFixed(1)} ms for 100 KB, ${highlighted.ms.toFixed(0)} ms highlighted`);
+    }
+    expect(slow).toEqual([]);
+  }, 120_000);
+
+  it("writes a token nested deep in others (`${` over and over, in shell) with a style about as long as its theme's", async () => {
+    // Each token's style was its parents' written out, so the HTML grew with the code's size squared: 16 KB of `${`
+    // was more HTML than a string can hold. (1,024 deep: past about 3,000, highlight.js's own recursion can run out of
+    // Node 20's stack before its code is optimized, and it then writes the code without colors.)
+    const timing = await within(1000, () => highlightCode("${".repeat(1024), { language: "shell" }));
+    expect(inTime(timing)).toBe(true);
+    const html = timing.result;
+    expect(html.length).toBeLessThan(4 * 1024 * 1024);
+    expect(html).toContain('<span style="color: #8a5a00">${</span>');
+    // Nested as code is: the parent's declarations, then the token's own, as written.
+    expect(highlightCode("console.log(`at ${line}`)", { language: "js", theme: "github-light" })).toContain('<span style="color: #032f62; color: #24292e">${line}</span>');
+  });
+
+  it("says a bounded number of languages it has no grammar for in a render (a fence's label is whoever writes the Markdown's)", () => {
+    const said = () => warn.mock.calls.map((c) => String(c[0]));
+    const blocks = Array.from({ length: 120 }, (_, i) => <CodeBlock key={i} language={`unknown-${i % 60}`}>x</CodeBlock>);
+    renderToHtml(
+      <Email>
+        <Row>
+          <Column>{blocks}</Column>
+        </Row>
+      </Email>
+    );
+    // Twenty at most in the render (each once), then once that no more are said.
+    expect(said().length).toBe(21);
+    expect(said().at(-1)).toBe("[Unlayer] CodeBlock: more languages with no grammar are shown without colors, and not said.");
+    // The next render says its own (it was a set for every render, said in the first only).
+    renderToHtml(
+      <Email>
+        <Row>
+          <Column>
+            <CodeBlock language="unknown-0">x</CodeBlock>
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(said().length).toBe(22);
+  });
+});
+
+describe("highlightCode() in a render", () => {
+  let warn: MockInstance;
+  beforeEach(() => {
+    warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+  afterEach(() => warn.mockRestore());
+  // (Ending in a `;`: none of it is trimmed, so `code(8192)` is all of a render's work.)
+  const code = (n: number) => "int a = 1;\n".repeat(Math.ceil(n / 11)).slice(0, n - 1) + ";";
+  const colored = (html: string) => (html.match(/<span style="/g) ?? []).length;
+  const budget = () => warn.mock.calls.map((c) => String(c[0])).filter((m) => m.includes("for one render"));
+
+  it("charges a template wrapper's highlightCode() calls to its render, as its CodeBlocks' are", async () => {
+    // A digest that highlights each comment itself: its wrapper ran with no render's work, 12 of 8 KB of `$a` 4.6 s.
+    function Digest({ list }: { list: string[] }) {
+      return (
+        <Email>
+          <Row>
+            <Column>
+              {list.map((c, i) => (
+                <Html key={i} html={highlightCode(c, { language: "java" })} />
+              ))}
+            </Column>
+          </Row>
+        </Email>
+      );
+    }
+    const list = [code(8000), code(8000), code(8000)];
+    for (const html of [renderToHtml(<Digest list={list} />), await asyncRenderers.renderToHtml(<Digest list={list} />)]) {
+      const blocks = html.split('<pre style="').slice(1).map(colored);
+      expect(blocks.map((n) => n > 0)).toEqual([true, false, false]);
+    }
+    expect(budget()).toHaveLength(2);
+  });
+
+  it("gives a render started inside a component's call its own work, its wrappers' calls included", () => {
+    function Snippet() {
+      return (
+        <Email>
+          <Row>
+            <Column>
+              <Html html={highlightCode("const a = 1;", { language: "javascript" })} />
+            </Column>
+          </Row>
+        </Email>
+      );
+    }
+    const alone = renderToHtml(<Snippet />);
+    let inner = "";
+    function Preview() {
+      inner = renderToHtml(<Snippet />);
+      return <Paragraph>preview</Paragraph>;
+    }
+    // The outer render's first block takes all of its work: the inner render has its own.
+    renderToHtml(
+      <Email>
+        <Row>
+          <Column>
+            <CodeBlock language="java" code={code(8192)} />
+            <Preview />
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect([inner === alone, colored(inner) > 0]).toEqual([true, true]);
+    // And the inner render's wrapper takes none of the outer's.
+    function Big() {
+      return (
+        <Email>
+          <Row>
+            <Column>
+              <Html html={highlightCode(code(8192), { language: "java" })} />
+            </Column>
+          </Row>
+        </Email>
+      );
+    }
+    function First() {
+      renderToHtml(<Big />);
+      return null;
+    }
+    const small = (
+      <Row>
+        <Column>
+          <CodeBlock language="javascript" code="const a = 1;" />
+        </Column>
+      </Row>
+    );
+    expect(
+      renderToHtml(
+        <Email>
+          <Row>
+            <Column>
+              <First />
+            </Column>
+          </Row>
+          {small}
+        </Email>
+      )
+    ).toContain(renderToHtml(<Email>{small}</Email>).match(/<pre[\s\S]*<\/pre>/)![0]);
+  });
+
+  it("charges the user's code a render runs outside its components' calls to that render: a Consumer's render prop, a custom tool's exporter", () => {
+    // They ran with the work of whatever render was running: none at the top (12 of 8 KB all highlighted), the outer
+    // render's in one a component starts (the outer render's own block lost its colors).
+    const Theme = React.createContext("light");
+    const consumed = () => <Theme.Consumer>{(theme) => <Html html={highlightCode(code(8000), { language: "java", theme: theme as "light" })} />}</Theme.Consumer>;
+    const Snip = registerTool({ name: "work-snip", values: { code: "" }, renderer: { exporters: { email: (values: { code: string }) => `<div>${highlightCode(values.code, { language: "java" })}</div>` } } });
+    const blocks = (block: (i: number) => React.ReactElement) => (
+      <Email>
+        <Row>
+          <Column>{[0, 1, 2].map(block)}</Column>
+        </Row>
+      </Email>
+    );
+    const each = (html: string) => html.split('<pre style="').slice(1).map((b) => colored(b) > 0);
+    expect(each(renderToHtml(blocks((i) => <React.Fragment key={i}>{consumed()}</React.Fragment>)))).toEqual([true, false, false]);
+    expect(each(renderToHtml(blocks((i) => <Snip key={i} code={code(8000)} />)))).toEqual([true, false, false]);
+    // In a render a component starts: its own, and none of the outer one's.
+    const inner = () => blocks((i) => <React.Fragment key={i}>{i === 0 ? consumed() : null}</React.Fragment>);
+    const alone = renderToHtml(inner());
+    let nested = "";
+    function Embed() {
+      nested = renderToHtml(inner());
+      return <Paragraph>embedded</Paragraph>;
+    }
+    const outer = renderToHtml(
+      <Email>
+        <Row>
+          <Column>
+            <Embed />
+            <CodeBlock language="java" code={code(8000)} />
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect([nested === alone, each(outer)]).toEqual([true, [true]]);
+  });
+
+  it("is a call of its own after an `await` in an async component (there, no render's work is known: CodeBlock's is)", async () => {
+    async function Comment({ c }: { c: string }) {
+      await Promise.resolve();
+      return <Html html={highlightCode(c, { language: "java" })} />;
+    }
+    const html = await asyncRenderers.renderToHtml(
+      <Email>
+        <Row>
+          <Column>
+            <Comment c={code(8000)} />
+            <Comment c={code(8000)} />
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(html.split('<pre style="').slice(1).map((block) => colored(block) > 0)).toEqual([true, true]);
+  });
+
+  it("reads a theme by its name only where it's one of the themes (`__proto__` from data is the default)", () => {
+    for (const theme of ["__proto__", "constructor", "toString"]) expect(highlightCode("a", { language: "js", theme: theme as "light" })).toBe(highlightCode("a", { language: "js" }));
+  });
+});
+
+describe("CodeInline", () => {
+  const style = /<code style="font-family: ui-monospace,[^"]*'Courier New', monospace; font-size: 0.9em; color: #1d2433; background-color: #eef0f4; padding: 1px 4px; border-radius: 4px">npm &amp;&amp; go<\/code>/;
+
+  it("is written into Paragraph, Heading and Button text, in the HTML and the design", () => {
+    const element = email(
+      <>
+        <Paragraph>
+          Run <CodeInline>npm &amp;&amp; go</CodeInline> & wait
+        </Paragraph>
+        <Heading>
+          Use <CodeInline code="npm && go" />
+        </Heading>
+        <Button href="https://example.com">
+          <CodeInline>npm && go</CodeInline>
+        </Button>
+      </>
+    );
+    const html = renderToHtml(element);
+    expect(html.match(new RegExp(style.source, "g"))).toHaveLength(3);
+    expect(html).toContain("&amp; wait");
+    const [paragraph, heading] = renderToJson(element).body.rows[0].columns[0].contents;
+    expect(paragraph.values.text).toMatch(style);
+    expect(heading.values.text).toMatch(style);
+    expect(renderToPlainText(element)).toContain("Run npm && go & wait");
+  });
+
+  it("is a <code> of its own, and HTML for an `html` prop", () => {
+    expect(codeInline("a<b", { theme: "dark" })).toBe(
+      `<code style="font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 0.9em; color: #e8ebf2; background-color: #2a303d; padding: 1px 4px; border-radius: 4px">a&lt;b</code>`
+    );
+    const html = renderToHtml(
+      <Page>
+        <Row>
+          <Column>
+            <Paragraph html={`Run ${codeInline("npm i")}`} />
+          </Column>
+        </Row>
+      </Page>
+    );
+    expect(html).toContain(">npm i</code>");
+  });
+});
diff --git a/packages/react/src/code/highlight.ts b/packages/react/src/code/highlight.ts
new file mode 100644
index 00000000..5716291d
--- /dev/null
+++ b/packages/react/src/code/highlight.ts
@@ -0,0 +1,240 @@
+/**
+ * Code as HTML an email client shows: highlight.js finds the tokens; each is written with the theme's inline style
+ * (no class a stylesheet would have to resolve), in a table with the block's background, in a `<pre>` (which
+ * Outlook keeps, spaces and lines included, in a monospace font) or, with line numbers, a row per line.
+ */
+import core from "highlight.js/lib/core";
+import bash from "highlight.js/lib/languages/bash";
+import c from "highlight.js/lib/languages/c";
+import cpp from "highlight.js/lib/languages/cpp";
+import csharp from "highlight.js/lib/languages/csharp";
+import css from "highlight.js/lib/languages/css";
+import diff from "highlight.js/lib/languages/diff";
+import go from "highlight.js/lib/languages/go";
+import graphql from "highlight.js/lib/languages/graphql";
+import ini from "highlight.js/lib/languages/ini";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import kotlin from "highlight.js/lib/languages/kotlin";
+import markdown from "highlight.js/lib/languages/markdown";
+import php from "highlight.js/lib/languages/php";
+import plaintext from "highlight.js/lib/languages/plaintext";
+import python from "highlight.js/lib/languages/python";
+import ruby from "highlight.js/lib/languages/ruby";
+import rust from "highlight.js/lib/languages/rust";
+import scss from "highlight.js/lib/languages/scss";
+import shell from "highlight.js/lib/languages/shell";
+import sql from "highlight.js/lib/languages/sql";
+import swift from "highlight.js/lib/languages/swift";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+import type { LanguageFn as HighlightLanguage } from "highlight.js";
+import { themeOf, type CodeTheme, type CodeThemeName } from "./themes";
+import { codeWork, CODE_WORK, paidFor, renderWork, sayInRender } from "./work";
+
+/**
+ * A language as highlight.js defines it: a function of highlight.js's API giving the language's grammar (a
+ * `highlight.js/lib/languages/…` module's default export, or one of your own). Elements' own type, not highlight.js's
+ * `LanguageFn`, so its types don't need highlight.js installed: it's built into this entry, not a dependency.
+ */
+type LanguageFn = (hljs: any) => object;
+
+const BUILT_IN: Record<string, HighlightLanguage> = { bash, c, cpp, csharp, css, diff, go, graphql, ini, java, javascript, json, kotlin, markdown, php, plaintext, python, ruby, rust, scss, shell, sql, swift, typescript, xml, yaml };
+
+/** Elements' own highlight.js, its languages registered the first time it's used (nothing runs when it loads). */
+let engine: ReturnType<typeof core.newInstance> | undefined;
+const highlighter = () => {
+  if (!engine) {
+    engine = core.newInstance();
+    for (const [name, language] of Object.entries(BUILT_IN)) engine.registerLanguage(name, language);
+  }
+  return engine;
+};
+
+/**
+ * Adds a language Elements doesn't build in, as highlight.js defines it:
+ * `registerLanguage("elixir", (await import("highlight.js/lib/languages/elixir")).default)`.
+ */
+export function registerLanguage(name: string, language: LanguageFn): void {
+  highlighter().registerLanguage(name, language as HighlightLanguage);
+}
+
+/**
+ * Whether code in `language` is highlighted (highlight.js has a grammar for it, or an alias of one), for the Markdown
+ * entry, which charges only that code to a render's work: on highlightCode, by a symbol, as it's no export of the code
+ * entry's (an older copy's has none).
+ */
+export const HAS_GRAMMAR = Symbol.for("@unlayer/react-elements/has-grammar");
+const hasGrammar = (language: string): boolean => !!highlighter().getLanguage(language);
+
+/** The languages (and their aliases' targets) code can be highlighted in. */
+export const listLanguages = (): string[] => highlighter().listLanguages();
+
+/** The monospace fonts code is shown in: the system's, then Consolas and Courier New (Outlook's). */
+export const MONOSPACE = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+
+const ESCAPES: Record<string, string> = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" };
+export const escapeHtml = (text: string) => text.replace(/[&<>"]/g, (ch) => ESCAPES[ch]);
+/** CSS that can't end the attribute it's written in. */
+export const attribute = (css: string) => css.replace(/[<>"]/g, "");
+
+/**
+ * The most code highlight.js is given at once, in characters. On some code the time it takes grows with the code's
+ * size squared, on long lines and on short ones (a line of `$a` in Java took 0.4 s for 8 KB and 6 s for 32 KB; C#, INI,
+ * shell and Ruby code on lines of 80 characters, 0.2 to 0.9 s for 20 KB), so a longer block is shown without colors
+ * (escaped, in the block's own style), and said.
+ */
+export const HIGHLIGHT_LIMIT = 8192;
+
+/**
+ * Whether code of `size` characters can be highlighted in the render it's in, charged to what's left of the render's
+ * CODE_WORK (its code blocks', its Markdown's and its components' highlightCode() calls, together): past it, it's
+ * shown without colors, said once in the render. Outside a render, each call can (up to HIGHLIGHT_LIMIT).
+ */
+function affordable(size: number, component: string): boolean {
+  const work = codeWork();
+  if (!work || size ** 2 <= work.left) {
+    if (work) work.left -= size ** 2;
+    return true;
+  }
+  sayInRender(
+    "code",
+    `[Unlayer] ${component}: code is shown without colors: the sizes squared of the code blocks highlighted in this render add up to more than the ${CODE_WORK} highlight.js is given for one render (on some code its time grows with a block's size squared).`
+  );
+  return false;
+}
+
+/**
+ * Says `language` has no grammar, once in the render (each time outside one): twenty at most, as a fence's label is
+ * whoever writes the Markdown's.
+ */
+function noGrammar(language: string, component: string): void {
+  const said = renderWork(Symbol.for("@unlayer/react-elements/no-grammar"), () => new Set<string>()) ?? new Set<string>();
+  if (said.has(language) || said.size > 20) return;
+  said.add(language);
+  console.warn(
+    said.size > 20
+      ? `[Unlayer] ${component}: more languages with no grammar are shown without colors, and not said.`
+      : `[Unlayer] ${component} has no grammar for \`${language}\`, so it's shown without colors: add one with registerLanguage() from "@unlayer/react-elements/code".`
+  );
+}
+
+/** A token's style in a theme: its scope's, or its parent's (`title.function` → `title`). */
+function styleOf(theme: CodeTheme, scope: string): string | undefined {
+  for (let s = scope; s; s = s.includes(".") ? s.slice(0, s.lastIndexOf(".")) : "") if (theme.tokens[s]) return theme.tokens[s];
+  return undefined;
+}
+
+/**
+ * Each line of code, as HTML: its tokens in spans with the theme's styles (a token over several lines split at each);
+ * `paid`, where its render's work was charged for it already (see CodeWork).
+ */
+export function highlightLines(code: string, language: string | undefined, theme: CodeTheme, component = "CodeBlock", paid = false): string[] {
+  const hljs = highlighter();
+  let html: string;
+  if (language && hljs.getLanguage(language)) {
+    if (code.length > HIGHLIGHT_LIMIT) {
+      console.warn(`[Unlayer] ${component}: its code is ${code.length} characters, more than the ${HIGHLIGHT_LIMIT} highlight.js is given at once (on some code its time grows with the code's size squared), so it's shown without colors.`);
+      html = escapeHtml(code);
+    } else html = paid || affordable(code.length, component) ? hljs.highlight(code, { language, ignoreIllegals: true }).value : escapeHtml(code);
+  } else {
+    if (language) noGrammar(language, component);
+    html = escapeHtml(code);
+  }
+  const lines: string[] = [""];
+  // The style of each open token, with its parents' (see within).
+  const open: string[] = [];
+  for (const [token, scopes] of [...html.matchAll(/<span class="([^"]*)">|<\/span>|[^<]+/g)]) {
+    if (scopes !== undefined) {
+      // highlight.js's classes, `hljs-title function_`: the scope `title.function`.
+      open.push(within(open[open.length - 1] ?? "", styleOf(theme, scopes.split(" ").map((s) => s.replace(/^hljs-/, "").replace(/_+$/, "")).join("."))));
+    } else if (token === "</span>") open.pop();
+    else {
+      const style = open[open.length - 1];
+      token.split("\n").forEach((piece, i) => {
+        if (i) lines.push("");
+        if (piece) lines[lines.length - 1] += style ? `<span style="${attribute(style)}">${piece}</span>` : piece;
+      });
+    }
+  }
+  return lines;
+}
+
+/** How long a token's style can be with its parents' declarations all written out (see within). */
+const LONG = 512;
+
+/**
+ * A token's style inside its parent's: the parent's declarations, then its own. Past LONG characters (tokens nested
+ * dozens deep: `${` over and over, in shell), the parent's declarations its own override are left out, so a token's
+ * style is never much longer than its theme's, where it grew with how deep the token is (and with it, the HTML with
+ * the code's size squared: 16 KB of `${` was more HTML than a string can hold).
+ */
+function within(parent: string, own: string | undefined): string {
+  if (!own) return parent;
+  if (!parent) return own;
+  const style = `${parent}; ${own}`;
+  if (style.length <= LONG) return style;
+  const set = new Set(own.split(";").map(property));
+  set.delete("");
+  return [...parent.split(";").filter((declaration) => declaration.trim() && !set.has(property(declaration))).map((declaration) => declaration.trim()), own].join("; ");
+}
+
+const property = (declaration: string) => declaration.slice(0, declaration.indexOf(":") >>> 0).trim().toLowerCase();
+
+export interface HighlightOptions {
+  /** A language highlight.js knows (`ts`, `tsx`, `html`, `bash`, …); without one the code isn't colored. */
+  language?: string;
+  /** `light` (the default), `dark`, one of highlight.js's (`github-light`, `github-dark`, `one-dark`, `monokai`, `dracula`, `nord`, `solarized-light`, `solarized-dark`), or a theme of your own. */
+  theme?: CodeThemeName | CodeTheme;
+  /** Numbers each line; a number is the first line's. */
+  lineNumbers?: boolean | number;
+  /** The code's size (default `13px`). */
+  fontSize?: number | string;
+  /** Its line height: a ratio of the size (default 1.5), or a length. */
+  lineHeight?: number | string;
+  /** Its fonts (default: the system's monospace fonts, then Consolas and Courier New). */
+  fontFamily?: string;
+  /** Space around the code (default `16px`). */
+  padding?: number | string;
+  /** The block's corners (default `6px`). */
+  borderRadius?: number | string;
+  /** Long lines wrap (the default), or keep going (they scroll where a client can). */
+  wrap?: boolean;
+}
+
+const px = (value: number | string) => (typeof value === "number" ? `${value}px` : value);
+
+/** The code as email-safe HTML: inline styles only, the code's spaces and lines kept in every client, Outlook's too. */
+export function highlightCode(code: string, options: HighlightOptions = {}): string {
+  const theme = themeOf(options.theme);
+  // (Its trailing whitespace off with trimEnd: `/\s+$/` tries again from each of a long run's characters.)
+  const lines = highlightLines(code.replace(/^\r?\n/, "").trimEnd().replace(/\r\n?/g, "\n"), options.language, theme, "CodeBlock", !!options.language && paidFor(code));
+  const size = px(options.fontSize ?? 13);
+  const ratio = typeof options.lineHeight === "number" ? options.lineHeight : options.lineHeight === undefined ? 1.5 : undefined;
+  // In pixels where the size is: Outlook reads no ratio.
+  const lineHeight = ratio === undefined ? px(options.lineHeight!) : /^[\d.]+px$/.test(size) ? `${Math.round(parseFloat(size) * ratio)}px` : String(ratio);
+  const font = attribute(`font-family: ${options.fontFamily ?? MONOSPACE}; font-size: ${size}; line-height: ${lineHeight}; mso-line-height-rule: exactly`);
+  const pre = `margin: 0; padding: 0; ${font}; color: ${theme.color}; white-space: ${options.wrap === false ? "pre; overflow-x: auto" : "pre-wrap"}; word-wrap: break-word; text-align: left; direction: ltr`;
+  const box = attribute(`width: 100%; border-collapse: separate; background-color: ${theme.background}; border-radius: ${px(options.borderRadius ?? 6)}${theme.border ? `; border: ${theme.border}` : ""}`);
+  const padding = attribute(px(options.padding ?? 16));
+  let inner: string;
+  if (options.lineNumbers) {
+    const first = typeof options.lineNumbers === "number" ? options.lineNumbers : 1;
+    const width = String(first + lines.length - 1).length;
+    // A row per line, so a number stays beside its line when the line wraps; the numbers aren't in the plain text.
+    inner =
+      `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">` +
+      lines
+        .map(
+          (line, i) =>
+            `<tr><td data-skip-in-text="true" width="${width * 8 + 12}" nowrap="nowrap" style="${font}; color: ${theme.lineNumbers}; text-align: right; vertical-align: top; padding: 0 12px 0 0; white-space: nowrap; user-select: none">${first + i}</td>` +
+            `<td style="vertical-align: top"><pre style="${attribute(pre)}">${line || " "}</pre></td></tr>`
+        )
+        .join("") +
+      `</table>`;
+  } else inner = `<pre style="${attribute(pre)}"><code style="${font}">${lines.join("\n")}</code></pre>`;
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="${attribute(theme.background)}" style="${box}"><tr><td style="padding: ${padding}">${inner}</td></tr></table>`;
+}
+Object.defineProperty(highlightCode, HAS_GRAMMAR, { value: hasGrammar });
diff --git a/packages/react/src/code/hljs.d.ts b/packages/react/src/code/hljs.d.ts
new file mode 100644
index 00000000..624d236b
--- /dev/null
+++ b/packages/react/src/code/hljs.d.ts
@@ -0,0 +1,5 @@
+/** highlight.js's core, without its languages (its own types declare the package and each language). */
+declare module "highlight.js/lib/core" {
+  import hljs from "highlight.js";
+  export default hljs;
+}
diff --git a/packages/react/src/code/index.ts b/packages/react/src/code/index.ts
new file mode 100644
index 00000000..9dda981c
--- /dev/null
+++ b/packages/react/src/code/index.ts
@@ -0,0 +1,9 @@
+/**
+ * @unlayer/react-elements/code: syntax-highlighted code (CodeBlock) and inline code (CodeInline) for email, web
+ * pages and documents. highlight.js, which finds the tokens, is built into this entry: the main one never loads it.
+ */
+/*! Includes highlight.js (BSD-3-Clause License, Copyright (c) 2006, Ivan Sagalaev): see THIRD_PARTY_LICENSES.md */
+export { CodeBlock, type CodeBlockProps } from "./CodeBlock";
+export { CodeInline, codeInline, type CodeInlineProps, type CodeInlineOptions } from "./CodeInline";
+export { highlightCode, registerLanguage, listLanguages, type HighlightOptions } from "./highlight";
+export { codeThemes, type CodeTheme, type CodeThemeName } from "./themes";
diff --git a/packages/react/src/code/themes.ts b/packages/react/src/code/themes.ts
new file mode 100644
index 00000000..339c8199
--- /dev/null
+++ b/packages/react/src/code/themes.ts
@@ -0,0 +1,512 @@
+/**
+ * Code themes: a block's colors, and a style for each kind of token, written as inline CSS (an email has no
+ * stylesheet a class could point to). Token kinds are highlight.js's scopes (`keyword`, `string`,
+ * `title.function`, …); a scope a theme doesn't name takes its parent's style (`title.function` → `title`), or none.
+ */
+export interface CodeTheme {
+  /** The block's background. */
+  background: string;
+  /** Text that isn't a token. */
+  color: string;
+  /** A border around the block (`1px solid #e2e5ea`), or none. */
+  border?: string;
+  /** Line numbers. */
+  lineNumbers: string;
+  /** Inline code (CodeInline): its background and text color. */
+  inline: { background: string; color: string };
+  /** CSS declarations by token scope: `{ keyword: "color: #b0326f", comment: "color: #6b7280; font-style: italic" }`. */
+  tokens: Record<string, string>;
+}
+
+export type CodeThemeName =
+  | "light"
+  | "dark"
+  | "github-light"
+  | "github-dark"
+  | "one-dark"
+  | "monokai"
+  | "dracula"
+  | "nord"
+  | "solarized-light"
+  | "solarized-dark";
+
+const light: CodeTheme = {
+  background: "#f6f7f9",
+  color: "#1d2433",
+  border: "1px solid #e3e6eb",
+  lineNumbers: "#9aa1ad",
+  inline: { background: "#eef0f4", color: "#1d2433" },
+  tokens: {
+    comment: "color: #6b7280; font-style: italic",
+    quote: "color: #6b7280; font-style: italic",
+    keyword: "color: #b0326f",
+    "selector-tag": "color: #b0326f",
+    literal: "color: #0f6f9e",
+    number: "color: #b4530a",
+    string: "color: #2e7d3a",
+    regexp: "color: #a3246a",
+    symbol: "color: #a3246a",
+    "template-variable": "color: #a3246a",
+    title: "color: #2554c7",
+    "title.function": "color: #2554c7",
+    "title.class": "color: #7a3fd1",
+    type: "color: #7a3fd1",
+    built_in: "color: #7a3fd1",
+    attr: "color: #0d7387",
+    attribute: "color: #0d7387",
+    property: "color: #0d7387",
+    params: "color: #8a5a00",
+    variable: "color: #8a5a00",
+    tag: "color: #b42318",
+    name: "color: #b42318",
+    "selector-id": "color: #2554c7",
+    "selector-class": "color: #0d7387",
+    meta: "color: #5f6b7a",
+    section: "color: #2554c7; font-weight: bold",
+    bullet: "color: #b4530a",
+    link: "color: #2554c7; text-decoration: underline",
+    addition: "color: #1f6f32; background-color: #e3f4e6",
+    deletion: "color: #a1261b; background-color: #fbe4e2",
+    emphasis: "font-style: italic",
+    strong: "font-weight: bold",
+  },
+};
+
+const dark: CodeTheme = {
+  background: "#1b1f2a",
+  color: "#dfe3ec",
+  lineNumbers: "#636b7c",
+  inline: { background: "#2a303d", color: "#e8ebf2" },
+  tokens: {
+    comment: "color: #8b93a5; font-style: italic",
+    quote: "color: #8b93a5; font-style: italic",
+    keyword: "color: #f28fbf",
+    "selector-tag": "color: #f28fbf",
+    literal: "color: #7fc8f8",
+    number: "color: #f6b46b",
+    string: "color: #a5d98b",
+    regexp: "color: #f39ad2",
+    symbol: "color: #f39ad2",
+    "template-variable": "color: #f39ad2",
+    title: "color: #82b4ff",
+    "title.function": "color: #82b4ff",
+    "title.class": "color: #c6a8ff",
+    type: "color: #c6a8ff",
+    built_in: "color: #c6a8ff",
+    attr: "color: #72d6e6",
+    attribute: "color: #72d6e6",
+    property: "color: #72d6e6",
+    params: "color: #ecc77a",
+    variable: "color: #ecc77a",
+    tag: "color: #ff938a",
+    name: "color: #ff938a",
+    "selector-id": "color: #82b4ff",
+    "selector-class": "color: #72d6e6",
+    meta: "color: #a2aabb",
+    section: "color: #82b4ff; font-weight: bold",
+    bullet: "color: #f6b46b",
+    link: "color: #82b4ff; text-decoration: underline",
+    addition: "color: #9de0a6; background-color: #1f3a27",
+    deletion: "color: #ffaaa1; background-color: #44211f",
+    emphasis: "font-style: italic",
+    strong: "font-weight: bold",
+  },
+};
+
+/*
+ * The themes below are highlight.js's own (BSD-3-Clause; see THIRD_PARTY_LICENSES.md for theirs and their authors'),
+ * each style sheet's colors and font styles as inline CSS: its scopes' rules, a scope's own over its parent's
+ * (`.hljs-title.class_` over `.hljs-title`). The line numbers are its comments' color; a light one has a border.
+ */
+
+// github-light: highlight.js's styles/github.css
+const githubLight: CodeTheme = {
+  background: "#ffffff",
+  color: "#24292e",
+  border: "1px solid #d1d9e0",
+  lineNumbers: "#6a737d",
+  inline: { background: "#ffffff", color: "#24292e" },
+  tokens: {
+    doctag: "color: #d73a49",
+    keyword: "color: #d73a49",
+    "template-tag": "color: #d73a49",
+    "template-variable": "color: #d73a49",
+    type: "color: #d73a49",
+    "variable.language": "color: #d73a49",
+    title: "color: #6f42c1",
+    "title.class": "color: #6f42c1",
+    "title.class.inherited": "color: #6f42c1",
+    "title.function": "color: #6f42c1",
+    attr: "color: #005cc5",
+    attribute: "color: #005cc5",
+    literal: "color: #005cc5",
+    meta: "color: #005cc5",
+    number: "color: #005cc5",
+    operator: "color: #005cc5",
+    variable: "color: #005cc5",
+    "selector-attr": "color: #005cc5",
+    "selector-class": "color: #005cc5",
+    "selector-id": "color: #005cc5",
+    regexp: "color: #032f62",
+    string: "color: #032f62",
+    built_in: "color: #e36209",
+    symbol: "color: #e36209",
+    comment: "color: #6a737d",
+    code: "color: #6a737d",
+    formula: "color: #6a737d",
+    name: "color: #22863a",
+    quote: "color: #22863a",
+    "selector-tag": "color: #22863a",
+    "selector-pseudo": "color: #22863a",
+    subst: "color: #24292e",
+    section: "color: #005cc5; font-weight: bold",
+    bullet: "color: #735c0f",
+    emphasis: "color: #24292e; font-style: italic",
+    strong: "color: #24292e; font-weight: bold",
+    addition: "color: #22863a; background-color: #f0fff4",
+    deletion: "color: #b31d28; background-color: #ffeef0",
+  },
+};
+
+// github-dark: highlight.js's styles/github-dark.css
+const githubDark: CodeTheme = {
+  background: "#0d1117",
+  color: "#c9d1d9",
+  lineNumbers: "#8b949e",
+  inline: { background: "#0d1117", color: "#c9d1d9" },
+  tokens: {
+    doctag: "color: #ff7b72",
+    keyword: "color: #ff7b72",
+    "template-tag": "color: #ff7b72",
+    "template-variable": "color: #ff7b72",
+    type: "color: #ff7b72",
+    "variable.language": "color: #ff7b72",
+    title: "color: #d2a8ff",
+    "title.class": "color: #d2a8ff",
+    "title.class.inherited": "color: #d2a8ff",
+    "title.function": "color: #d2a8ff",
+    attr: "color: #79c0ff",
+    attribute: "color: #79c0ff",
+    literal: "color: #79c0ff",
+    meta: "color: #79c0ff",
+    number: "color: #79c0ff",
+    operator: "color: #79c0ff",
+    variable: "color: #79c0ff",
+    "selector-attr": "color: #79c0ff",
+    "selector-class": "color: #79c0ff",
+    "selector-id": "color: #79c0ff",
+    regexp: "color: #a5d6ff",
+    string: "color: #a5d6ff",
+    built_in: "color: #ffa657",
+    symbol: "color: #ffa657",
+    comment: "color: #8b949e",
+    code: "color: #8b949e",
+    formula: "color: #8b949e",
+    name: "color: #7ee787",
+    quote: "color: #7ee787",
+    "selector-tag": "color: #7ee787",
+    "selector-pseudo": "color: #7ee787",
+    subst: "color: #c9d1d9",
+    section: "color: #1f6feb; font-weight: bold",
+    bullet: "color: #f2cc60",
+    emphasis: "color: #c9d1d9; font-style: italic",
+    strong: "color: #c9d1d9; font-weight: bold",
+    addition: "color: #aff5b4; background-color: #033a16",
+    deletion: "color: #ffdcd7; background-color: #67060c",
+  },
+};
+
+// one-dark: highlight.js's styles/atom-one-dark.css
+const oneDark: CodeTheme = {
+  background: "#282c34",
+  color: "#abb2bf",
+  lineNumbers: "#5c6370",
+  inline: { background: "#282c34", color: "#abb2bf" },
+  tokens: {
+    comment: "color: #5c6370; font-style: italic",
+    quote: "color: #5c6370; font-style: italic",
+    doctag: "color: #c678dd",
+    keyword: "color: #c678dd",
+    formula: "color: #c678dd",
+    section: "color: #e06c75",
+    name: "color: #e06c75",
+    "selector-tag": "color: #e06c75",
+    deletion: "color: #e06c75",
+    subst: "color: #e06c75",
+    literal: "color: #56b6c2",
+    string: "color: #98c379",
+    regexp: "color: #98c379",
+    addition: "color: #98c379",
+    attribute: "color: #98c379",
+    attr: "color: #d19a66",
+    variable: "color: #d19a66",
+    "template-variable": "color: #d19a66",
+    type: "color: #d19a66",
+    "selector-class": "color: #d19a66",
+    "selector-attr": "color: #d19a66",
+    "selector-pseudo": "color: #d19a66",
+    number: "color: #d19a66",
+    symbol: "color: #61aeee",
+    bullet: "color: #61aeee",
+    link: "color: #61aeee; text-decoration: underline",
+    meta: "color: #61aeee",
+    "selector-id": "color: #61aeee",
+    title: "color: #61aeee",
+    built_in: "color: #e6c07b",
+    "title.class": "color: #e6c07b",
+    emphasis: "font-style: italic",
+    strong: "font-weight: bold",
+  },
+};
+
+// monokai: highlight.js's styles/monokai.css
+const monokai: CodeTheme = {
+  background: "#272822",
+  color: "#ddd",
+  lineNumbers: "#75715e",
+  inline: { background: "#272822", color: "#ddd" },
+  tokens: {
+    tag: "color: #f92672",
+    keyword: "color: #f92672; font-weight: bold",
+    "selector-tag": "color: #f92672; font-weight: bold",
+    literal: "color: #f92672; font-weight: bold",
+    strong: "color: #f92672",
+    number: "color: #f92672",
+    name: "color: #f92672",
+    code: "color: #66d9ef",
+    attribute: "color: #bf79db",
+    attr: "color: #bf79db",
+    symbol: "color: #bf79db",
+    regexp: "color: #bf79db",
+    link: "color: #bf79db",
+    string: "color: #a6e22e",
+    bullet: "color: #a6e22e",
+    subst: "color: #a6e22e",
+    title: "color: #a6e22e; font-weight: bold",
+    section: "color: #a6e22e; font-weight: bold",
+    emphasis: "color: #a6e22e",
+    type: "color: #a6e22e; font-weight: bold",
+    built_in: "color: #a6e22e",
+    "selector-attr": "color: #a6e22e",
+    "selector-pseudo": "color: #a6e22e",
+    addition: "color: #a6e22e",
+    variable: "color: #a6e22e",
+    "template-tag": "color: #a6e22e",
+    "template-variable": "color: #a6e22e",
+    "title.class": "color: white; font-weight: bold",
+    comment: "color: #75715e",
+    quote: "color: #75715e",
+    deletion: "color: #75715e",
+    meta: "color: #75715e",
+    doctag: "font-weight: bold",
+    "selector-id": "font-weight: bold",
+  },
+};
+
+// dracula: highlight.js's styles/base16/dracula.css
+const dracula: CodeTheme = {
+  background: "#282936",
+  color: "#e9e9f4",
+  lineNumbers: "#626483",
+  inline: { background: "#282936", color: "#e9e9f4" },
+  tokens: {
+    comment: "color: #626483",
+    tag: "color: #62d6e8",
+    subst: "color: #e9e9f4",
+    punctuation: "color: #e9e9f4",
+    operator: "color: #e9e9f4",
+    bullet: "color: #ea51b2",
+    variable: "color: #ea51b2",
+    "template-variable": "color: #ea51b2",
+    "selector-tag": "color: #ea51b2",
+    name: "color: #ea51b2",
+    deletion: "color: #ea51b2",
+    symbol: "color: #b45bcf",
+    number: "color: #b45bcf",
+    link: "color: #b45bcf",
+    attr: "color: #b45bcf",
+    "variable.constant": "color: #b45bcf",
+    literal: "color: #b45bcf",
+    title: "color: #00f769",
+    "title.class": "color: #00f769",
+    strong: "color: #00f769; font-weight: bold",
+    code: "color: #ebff87",
+    addition: "color: #ebff87",
+    "title.class.inherited": "color: #ebff87",
+    string: "color: #ebff87",
+    built_in: "color: #a1efe4",
+    doctag: "color: #a1efe4",
+    quote: "color: #a1efe4",
+    regexp: "color: #a1efe4",
+    attribute: "color: #62d6e8",
+    "title.function": "color: #62d6e8",
+    section: "color: #62d6e8",
+    type: "color: #b45bcf",
+    "template-tag": "color: #b45bcf",
+    keyword: "color: #b45bcf",
+    emphasis: "color: #b45bcf; font-style: italic",
+    meta: "color: #00f769",
+    "meta-keyword": "font-weight: bold",
+  },
+};
+
+// nord: highlight.js's styles/nord.css
+const nord: CodeTheme = {
+  background: "#2e3440",
+  color: "#d8dee9",
+  lineNumbers: "#4c566a",
+  inline: { background: "#2e3440", color: "#d8dee9" },
+  tokens: {
+    subst: "color: #d8dee9",
+    "selector-tag": "color: #81a1c1",
+    "selector-id": "color: #8fbcbb; font-weight: bold",
+    "selector-class": "color: #8fbcbb",
+    "selector-attr": "color: #8fbcbb",
+    property: "color: #88c0d0",
+    "selector-pseudo": "color: #88c0d0",
+    addition: "background-color: rgba(163, 190, 140, 0.5)",
+    deletion: "background-color: rgba(191, 97, 106, 0.5)",
+    built_in: "color: #8fbcbb",
+    type: "color: #8fbcbb",
+    class: "color: #8fbcbb",
+    function: "color: #88c0d0",
+    keyword: "color: #81a1c1",
+    literal: "color: #81a1c1",
+    symbol: "color: #81a1c1",
+    number: "color: #b48ead",
+    regexp: "color: #ebcb8b",
+    string: "color: #a3be8c",
+    title: "color: #8fbcbb",
+    params: "color: #d8dee9",
+    bullet: "color: #81a1c1",
+    code: "color: #8fbcbb",
+    emphasis: "font-style: italic",
+    formula: "color: #8fbcbb",
+    strong: "font-weight: bold",
+    quote: "color: #4c566a",
+    comment: "color: #4c566a",
+    doctag: "color: #8fbcbb",
+    meta: "color: #5e81ac",
+    attr: "color: #8fbcbb",
+    attribute: "color: #d8dee9",
+    name: "color: #81a1c1",
+    section: "color: #88c0d0",
+    tag: "color: #81a1c1",
+    variable: "color: #d8dee9",
+    "template-variable": "color: #d8dee9",
+    "template-tag": "color: #5e81ac",
+  },
+};
+
+// solarized-light: highlight.js's styles/base16/solarized-light.css
+const solarizedLight: CodeTheme = {
+  background: "#fdf6e3",
+  color: "#586e75",
+  border: "1px solid #eee8d5",
+  lineNumbers: "#839496",
+  inline: { background: "#fdf6e3", color: "#586e75" },
+  tokens: {
+    comment: "color: #839496",
+    tag: "color: #657b83",
+    subst: "color: #586e75",
+    punctuation: "color: #586e75",
+    operator: "color: #586e75",
+    bullet: "color: #dc322f",
+    variable: "color: #dc322f",
+    "template-variable": "color: #dc322f",
+    "selector-tag": "color: #dc322f",
+    name: "color: #dc322f",
+    deletion: "color: #dc322f",
+    symbol: "color: #cb4b16",
+    number: "color: #cb4b16",
+    link: "color: #cb4b16",
+    attr: "color: #cb4b16",
+    "variable.constant": "color: #cb4b16",
+    literal: "color: #cb4b16",
+    title: "color: #b58900",
+    "title.class": "color: #b58900",
+    strong: "color: #b58900; font-weight: bold",
+    code: "color: #859900",
+    addition: "color: #859900",
+    "title.class.inherited": "color: #859900",
+    string: "color: #859900",
+    built_in: "color: #2aa198",
+    doctag: "color: #2aa198",
+    quote: "color: #2aa198",
+    regexp: "color: #2aa198",
+    attribute: "color: #268bd2",
+    "title.function": "color: #268bd2",
+    section: "color: #268bd2",
+    type: "color: #6c71c4",
+    "template-tag": "color: #6c71c4",
+    keyword: "color: #6c71c4",
+    emphasis: "color: #6c71c4; font-style: italic",
+    meta: "color: #d33682",
+    "meta-keyword": "font-weight: bold",
+  },
+};
+
+// solarized-dark: highlight.js's styles/base16/solarized-dark.css
+const solarizedDark: CodeTheme = {
+  background: "#002b36",
+  color: "#93a1a1",
+  lineNumbers: "#657b83",
+  inline: { background: "#002b36", color: "#93a1a1" },
+  tokens: {
+    comment: "color: #657b83",
+    tag: "color: #839496",
+    subst: "color: #93a1a1",
+    punctuation: "color: #93a1a1",
+    operator: "color: #93a1a1",
+    bullet: "color: #dc322f",
+    variable: "color: #dc322f",
+    "template-variable": "color: #dc322f",
+    "selector-tag": "color: #dc322f",
+    name: "color: #dc322f",
+    deletion: "color: #dc322f",
+    symbol: "color: #cb4b16",
+    number: "color: #cb4b16",
+    link: "color: #cb4b16",
+    attr: "color: #cb4b16",
+    "variable.constant": "color: #cb4b16",
+    literal: "color: #cb4b16",
+    title: "color: #b58900",
+    "title.class": "color: #b58900",
+    strong: "color: #b58900; font-weight: bold",
+    code: "color: #859900",
+    addition: "color: #859900",
+    "title.class.inherited": "color: #859900",
+    string: "color: #859900",
+    built_in: "color: #2aa198",
+    doctag: "color: #2aa198",
+    quote: "color: #2aa198",
+    regexp: "color: #2aa198",
+    attribute: "color: #268bd2",
+    "title.function": "color: #268bd2",
+    section: "color: #268bd2",
+    type: "color: #6c71c4",
+    "template-tag": "color: #6c71c4",
+    keyword: "color: #6c71c4",
+    emphasis: "color: #6c71c4; font-style: italic",
+    meta: "color: #d33682",
+    "meta-keyword": "font-weight: bold",
+  },
+};
+
+/** The themes Elements ships: `light` (the default) and `dark`, and highlight.js's, by name. */
+export const codeThemes: Record<CodeThemeName, CodeTheme> = {
+  light,
+  dark,
+  "github-light": githubLight,
+  "github-dark": githubDark,
+  "one-dark": oneDark,
+  monokai,
+  dracula,
+  nord,
+  "solarized-light": solarizedLight,
+  "solarized-dark": solarizedDark,
+};
+
+export const themeOf = (theme: CodeThemeName | CodeTheme | undefined): CodeTheme =>
+  // (A name of its own only: `__proto__` or `constructor`, from data, is no theme.)
+  typeof theme === "object" && theme ? theme : Object.prototype.hasOwnProperty.call(codeThemes, theme ?? "light") ? codeThemes[theme ?? "light"] : light;
diff --git a/packages/react/src/code/work.ts b/packages/react/src/code/work.ts
new file mode 100644
index 00000000..2a29032a
--- /dev/null
+++ b/packages/react/src/code/work.ts
@@ -0,0 +1,101 @@
+/**
+ * The work a render's code blocks and Markdown share: what's left of each of their budgets for the whole render (see
+ * the main entry's sharedByRender, in utils/render-scope.ts), so a template of many blocks (a digest of comments, each a
+ * <Markdown> of its own) takes what one block of their size would, where each block had a budget of its own. It's
+ * reached from a component's or template wrapper's call; outside one (a component React renders, a highlightCode()
+ * call outside any render, an async component's code after an `await`), there's none: each block or call has its own.
+ */
+import type React from "react";
+import { renderToHtml } from "@unlayer/react-elements";
+
+type Shared = Record<symbol, unknown>;
+const INTERNALS = Symbol.for("@unlayer/react-elements/internals");
+
+/**
+ * Where the render running now keeps what its components share: one slot on globalThis for every copy of Elements of
+ * this protocol (see the engine's SLOT), so a render another copy runs (the main entry's ESM build, this entry's
+ * CommonJS one) is the one found. Where the slot is another version's, this copy's main entry keeps its own: its own
+ * renders are found through it, and another version's renders aren't (their blocks each have their own work).
+ */
+const SLOT = Symbol.for("@unlayer/react-elements/render-work");
+const SLOT_VERSION = 1;
+
+/** What the code running now shares with the rest of its render, or undefined outside a render. */
+function shared(): Shared | undefined {
+  const slot = (globalThis as Record<symbol, { version?: number; shared?: Shared } | undefined>)[SLOT];
+  if (slot?.version === SLOT_VERSION) return slot.shared;
+  return (renderToHtml as unknown as Record<symbol, { shared?: () => Shared | undefined } | undefined>)[INTERNALS]?.shared?.();
+}
+
+/**
+ * How the copy of Elements that's rendering makes a part of the template left out alone when it fails (a node of its
+ * walker's own: see the main entry's render-scope.ts), or undefined outside a render.
+ */
+export const renderPart = (): ((child: React.ReactElement) => React.ReactElement) | undefined => shared()?.[Symbol.for("@unlayer/react-elements/part")] as ((child: React.ReactElement) => React.ReactElement) | undefined;
+
+/** The render's work under `key`, `make`'s the first time in the render; undefined outside a render. */
+export function renderWork<T>(key: symbol, make: () => T): T | undefined {
+  const all = shared();
+  if (!all) return undefined;
+  if (!(key in all)) all[key] = make();
+  return all[key] as T;
+}
+
+const SAID = Symbol.for("@unlayer/react-elements/said");
+
+const DONE = Symbol.for("@unlayer/react-elements/when-done");
+
+/**
+ * Says what `say` says once the render's done, once for all of it under `key` (the last `say` given), as it can say
+ * what the whole render did; outside a render, at once.
+ */
+export function sayWhenDone(key: string, say: () => void): void {
+  const done = renderWork(DONE, () => new Map<string, () => void>());
+  if (done) done.set(key, say);
+  else say();
+}
+
+/** Says `message` once in the render, under `key` (each time outside one). */
+export function sayInRender(key: string, message: string): void {
+  const said = renderWork(SAID, () => new Set<string>());
+  if (said?.has(key)) return;
+  said?.add(key);
+  console.warn(message);
+}
+
+/**
+ * The code a render's blocks are highlighted with, together: their sizes squared. highlight.js's time can grow with a
+ * block's size squared (see highlight.ts's HIGHLIGHT_LIMIT, the most it's given at once: this is that squared), so
+ * this is a block of 8,192 characters, or many smaller ones (64 of 1,024, a thousand of 256), about 0.4 s at the most
+ * for the whole render; past it a block is shown without colors.
+ */
+export const CODE_WORK = 8192 ** 2;
+
+/**
+ * What's left of a render's CODE_WORK, and the code a Markdown charged to it already, by its text: a Markdown decides
+ * which of its blocks are highlighted as it reads them, in order, before its CodeBlocks render; highlightCode doesn't
+ * charge that code again (once for each time it was charged).
+ */
+export interface CodeWork {
+  left: number;
+  paid: Map<string, number>;
+}
+
+/** The render's code work (undefined outside a render). */
+export const codeWork = (): CodeWork | undefined => renderWork(Symbol.for("@unlayer/react-elements/code-work"), () => ({ left: CODE_WORK, paid: new Map<string, number>() }));
+
+/** Charges `code`, of `size` squared, to the render's `work`, before it's highlighted (see CodeWork). */
+export function charge(work: CodeWork, code: string, size: number): void {
+  work.left -= size;
+  work.paid.set(code, (work.paid.get(code) ?? 0) + 1);
+}
+
+/** Whether `code` was charged already (see CodeWork), which it then isn't any more. */
+export function paidFor(code: string): boolean {
+  const work = codeWork();
+  const times = work?.paid.get(code);
+  if (!times) return false;
+  if (times > 1) work!.paid.set(code, times - 1);
+  else work!.paid.delete(code);
+  return true;
+}
diff --git a/packages/react/src/codegen/__fixtures__/designs.ts b/packages/react/src/codegen/__fixtures__/designs.ts
new file mode 100644
index 00000000..7d326b2b
--- /dev/null
+++ b/packages/react/src/codegen/__fixtures__/designs.ts
@@ -0,0 +1,365 @@
+/**
+ * Small designs, one setting or block each, written as the editor saves them: codegen's unit tests and its
+ * type-check test convert them. `code` lists what the generated code must contain; `warnings`, what it must say;
+ * `losses`, the paths that don't come back (none, mostly).
+ */
+import type { DesignToElementsOptions } from "../design-to-elements";
+import type { Plain } from "../values";
+
+export interface DesignCase {
+  design: Plain;
+  options?: DesignToElementsOptions;
+  code: string[];
+  warnings?: RegExp[];
+  losses?: string[];
+  /** Code that must not be there. */
+  absent?: string[];
+}
+
+interface Layout {
+  body?: Plain;
+  row?: Plain;
+  column?: Plain;
+  cells?: number[];
+  columns?: Plain[];
+  /** A document's header rows. */
+  headers?: Plain[];
+  /** Top-level keys beside `body`. */
+  extra?: Plain;
+}
+
+/** A design with one row: `blocks` in its one column (or `columns`, each `{ values, contents }`). */
+export function design(blocks: Plain[], { body = {}, row = {}, column = {}, cells, columns, headers, extra = {} }: Layout = {}): Plain {
+  const cols = columns ?? [{ values: column, contents: blocks }];
+  return {
+    counters: {},
+    schemaVersion: 27,
+    ...extra,
+    body: { rows: [{ cells: cells ?? cols.map(() => 1), columns: cols, values: row }], values: body, ...(headers ? { headers } : {}) },
+  };
+}
+
+const block = (type: string, values: Plain, more: Plain = {}) => ({ type, values, ...more });
+
+export const DESIGNS: Record<string, DesignCase> = {
+  // ── Text ──────────────────────────────────────────────────────────────────────────────────────────────────────
+  "paragraph: its text in `html`, which renders as the design has it (children would be in a <p>)": {
+    design: design([block("text", { text: "Hello there, friend", fontSize: "16px" })]),
+    code: ['<Paragraph html="Hello there, friend" fontSize="16px" />'],
+  },
+  "paragraph: markup in `html`": {
+    design: design([block("text", { text: '<p>Hi <strong>you</strong>, see <a href="https://example.com">this</a>.</p>' })]),
+    code: [`<Paragraph html='<p>Hi <strong>you</strong>, see <a href="https://example.com">this</a>.</p>' />`],
+  },
+  "paragraph: entities in an expression (JSX would decode them in a string)": {
+    design: design([block("text", { text: "Fish &amp; chips" })]),
+    code: ['<Paragraph html={"Fish &amp; chips"} />'],
+  },
+  "paragraph: empty text": {
+    design: design([block("text", { text: "" })]),
+    code: ['<Paragraph values={{ text: "" }} />'],
+  },
+  "paragraph: the body's text color, pinned": {
+    design: design([block("text", { text: "Inherits" })], { body: { textColor: "#333333" } }),
+    code: ['<Email textColor="#333333">', '<Paragraph html="Inherits" color="#333333" />'],
+  },
+  "paragraph: link style and font": {
+    design: design([block("text", { text: "Styled", fontFamily: { label: "Georgia", value: "georgia,serif" }, linkStyle: { inherit: false, linkColor: "#ff0000", linkHoverColor: "#0000ee", linkUnderline: true, linkHoverUnderline: true } })]),
+    code: ['fontFamily={{ label: "Georgia", value: "georgia,serif" }}', 'linkStyle={{ inherit: false, linkColor: "#ff0000" }}'],
+  },
+  "paragraph: values a prop would change go in `values`": {
+    design: design([block("text", { text: "Odd", lineHeight: 1.5, fontWeight: "700", letterSpacing: 2 })]),
+    // (As the design has them: the `values` type checks their keys, not what they hold.)
+    code: ['values={{ lineHeight: 1.5, fontWeight: "700", letterSpacing: 2 }}'],
+  },
+  "paragraph: right-to-left design keeps an explicit left alignment": {
+    design: design([block("text", { text: "Left", textAlign: "left" }), block("text", { text: "Right", textAlign: "right" })], { body: { textDirection: "rtl" } }),
+    code: ['<Email textDirection="rtl">', '<Paragraph html="Left" textAlign="left" />', '<Paragraph html="Right" />'],
+  },
+  "paragraph: the editor's Lexical paragraph": {
+    design: design([block("paragraph", { textJson: '{"root":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","text":"Lexical","format":1}]}]}}' })]),
+    code: ['<Paragraph html=\'<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;"><strong>Lexical</strong></p>\' />'],
+    warnings: [/Row 1, column 1, block 1: a "paragraph" block/],
+  },
+  "heading: level, weight and text": {
+    design: design([block("heading", { headingType: "h2", text: "Welcome aboard", fontWeight: 700, fontSize: "30px" })]),
+    code: ['<Heading headingType="h2" fontWeight={700} fontSize="30px">', "Welcome aboard"],
+  },
+  "heading: markup in `text`": {
+    design: design([block("heading", { text: "Big <em>news</em>" })]),
+    code: ['<Heading text="Big <em>news</em>" />'],
+  },
+  "heading: textJson beside text is left out": {
+    design: design([block("heading", { text: "Kept", textJson: "{}" })]),
+    code: ["<Heading>Kept</Heading>"],
+    absent: ["textJson"],
+  },
+
+  // ── Buttons and links ─────────────────────────────────────────────────────────────────────────────────────────
+  "button: link, colors, text": {
+    design: design([block("button", { text: "Shop now", href: { name: "web", values: { href: "https://example.com/shop", target: "_self" } }, buttonColors: { color: "#ffffff", backgroundColor: "#111827", hoverColor: "#FFFFFF", hoverBackgroundColor: "#374151" }, borderRadius: "6px" })]),
+    code: ['href="https://example.com/shop"', 'target="_self"', 'color="#ffffff"', 'backgroundColor="#111827"', 'hoverBackgroundColor="#374151"', 'borderRadius="6px"', "Shop now"],
+    absent: ["hoverColor"],
+  },
+  // A link the editor saves is an action, `{ name, values, attrs }`, whose `attrs` are the templates it fills in with
+  // `values` (see codegen/links.ts): the code has the URL it exports.
+  "button: an email link": {
+    design: design([block("button", { text: "Write to us", href: { name: "email", values: { email: "hi@example.com", subject: "Hello" } } })]),
+    code: ['href="mailto:hi@example.com?subject=Hello"'],
+    absent: ['name: "email"', "target="],
+  },
+  "button: an email link as the editor saves it (its template, what it keeps of other link types, a subject and body to encode)": {
+    design: design([block("button", { text: "Write to us", href: { name: "email", values: { href: "", target: "_blank", email: "support@example.com", subject: "Help & questions?", body: "Hi,\nI have a question" }, attrs: { href: "mailto:{{email}}?subject={{subject}}&body={{body}}" } } })]),
+    code: ['"mailto:support@example.com?subject=Help%20%26%20questions%3F&body=Hi%2C%0AI%20have%20a%20question"'],
+    absent: ["{{email}}", "attrs"],
+  },
+  "button: an email link without a subject (the editor leaves empty ones out)": {
+    design: design([block("button", { text: "Write to us", href: { name: "email", values: { email: "hi@example.com", subject: "", body: "Hello" }, attrs: { href: "mailto:{{email}}?subject={{subject}}&body={{body}}" } } })]),
+    code: ['href="mailto:hi@example.com?body=Hello"'],
+  },
+  "button: a phone link": {
+    design: design([block("button", { text: "Call us", href: { name: "phone", values: { href: "", target: "_blank", phone: "+14154154151" }, attrs: { href: "tel:{{phone}}" } } })]),
+    code: ['href="tel:+14154154151"'],
+  },
+  "button: a text message link": {
+    design: design([block("button", { text: "Text us", href: { name: "sms", values: { phone: "+14154154150" }, attrs: { href: "sms:{{phone}}" } } })]),
+    code: ['href="sms:+14154154150"'],
+  },
+  "button: a web link as the editor saves it (with its templates)": {
+    design: design([block("button", { text: "Visit", href: { name: "web", values: { href: "https://example.com", target: "_self" }, attrs: { href: "{{href}}", target: "{{target}}" } } })]),
+    code: ['href="https://example.com"', 'target="_self"'],
+    absent: ["attrs"],
+  },
+  "button: the editor's empty link is no link": {
+    design: design([block("button", { text: "Nowhere", href: { name: "web", values: { href: "", target: "_blank" }, attrs: { href: "{{href}}", target: "{{target}}" } } })]),
+    code: ["<Button>Nowhere</Button>"],
+  },
+  "button: a link to a page section, which the builder reads back as a web link": {
+    design: design([block("button", { text: "Down", href: { name: "anchor", values: { href: "pricing" }, attrs: { href: "#{{href}}", target: "_self" } } })]),
+    code: ['href="#pricing"', 'target="_self"'],
+    warnings: [/Row 1, column 1, block 1: its "anchor" link is written as the URL the builder exports for it \(`#pricing`\), which the builder opens as a web link\./],
+    losses: ["body.rows[0].columns[0].contents[0].values.href.name", "body.rows[0].columns[0].contents[0].values.href.values.href"],
+  },
+  "button: a link that runs code: as the design has it, said": {
+    design: design([block("button", { text: "Track", href: { name: "track", values: { href: "https://example.com" }, attrs: { href: "{{href}}", onClick: "track()" } } })]),
+    code: ['onClick: "track()"'],
+    warnings: [/Row 1, column 1, block 1: its "track" link has `onClick`, which a URL can't hold/],
+  },
+  "button: fixed width": {
+    design: design([block("button", { text: "Wide", size: { autoWidth: false, width: "60%" } })]),
+    code: ['<Button width="60%">Wide</Button>'],
+  },
+  "button: automatic width that remembers a width": {
+    design: design([block("button", { text: "Auto", size: { autoWidth: true, width: "40%" } })]),
+    code: ['size={{ autoWidth: true, width: "40%" }}'],
+  },
+  "button: border": {
+    design: design([block("button", { text: "Outline", border: { borderTopWidth: "2px", borderTopStyle: "solid", borderTopColor: "#111111" } })]),
+    code: ['border={{', 'borderTopWidth: "2px"'],
+  },
+
+  // ── Images ────────────────────────────────────────────────────────────────────────────────────────────────────
+  "image: a URL, automatic width": {
+    design: design([block("image", { src: { url: "https://example.com/a.png", autoWidth: true, maxWidth: "100%" }, altText: "A" })]),
+    code: ['<Image src="https://example.com/a.png" alt="A" />'],
+  },
+  "image: natural size, automatic width": {
+    design: design([block("image", { src: { url: "https://example.com/a.png", width: 800, height: 400, autoWidth: true, maxWidth: "100%" } })]),
+    code: ['src={{', "width: 800", "height: 400", "autoWidth: true"],
+  },
+  "image: a fixed width that's a whole pixel (45% of 480px)": {
+    design: design([block("image", { src: { url: "https://example.com/a.png", width: 800, height: 400, autoWidth: false, maxWidth: "45%" }, textAlign: "left" })]),
+    code: ["width={216}", 'textAlign="left"'],
+  },
+  "image: a fixed width that isn't (70.87% of 480px is 340.18px)": {
+    design: design([block("image", { src: { url: "https://example.com/a.png", autoWidth: false, maxWidth: "70.87%" } })]),
+    code: ['<Image src="https://example.com/a.png" width="70.87%" />'],
+  },
+  "image: a link": {
+    design: design([block("image", { src: { url: "https://example.com/a.png" }, action: { name: "web", values: { href: "https://example.com", target: "_blank" } } })]),
+    code: ['action={{ name: "web", values: { href: "https://example.com", target: "_blank" } }}'],
+  },
+  "image: an email link": {
+    design: design([block("image", { src: { url: "https://example.com/a.png" }, action: { name: "email", values: { email: "hi@example.com", subject: "Hello", body: "" }, attrs: { href: "mailto:{{email}}?subject={{subject}}&body={{body}}" } } })]),
+    code: ['action={{ name: "web", values: { href: "mailto:hi@example.com?subject=Hello", target: "_blank" } }}'],
+  },
+  "image: the editor's empty link is no link": {
+    design: design([block("image", { src: { url: "https://example.com/a.png" }, action: { name: "web", values: { href: "", target: "_blank" }, attrs: { href: "{{href}}", target: "{{target}}" } } })]),
+    code: ['<Image src="https://example.com/a.png" />'],
+  },
+  "image: a width in px": {
+    design: design([block("image", { src: { url: "https://example.com/a.png", autoWidth: false, maxWidth: "200px" } })]),
+    code: ['<Image src="https://example.com/a.png" width={200} />'],
+    warnings: [/Row 1, column 1, block 1: its fixed width `200px` is written as the percent of its column/],
+    losses: ["body.rows[0].columns[0].contents[0].values.src.maxWidth"],
+  },
+
+  // ── Other blocks ──────────────────────────────────────────────────────────────────────────────────────────────
+  "divider: border and width": {
+    design: design([block("divider", { width: "60%", border: { borderTopWidth: "3px", borderTopStyle: "dashed", borderTopColor: "#cccccc" }, textAlign: "left" })]),
+    code: ['<Divider width="60%" borderTopWidth="3px" borderTopStyle="dashed" borderTopColor="#cccccc" textAlign="left" />'],
+  },
+  "html: as given": {
+    design: design([block("html", { html: '<table><tr><td class="x">Cell</td></tr></table>', containerPadding: "0px" })]),
+    code: ['<Html html=\'<table><tr><td class="x">Cell</td></tr></table>\' containerPadding="0px" />'],
+  },
+  "menu: items": {
+    design: design([block("menu", { menu: { items: [{ key: "1", text: "Docs", link: { name: "web", values: { href: "https://example.com/docs", target: "_blank" } } }, { key: "2", text: "Blog", link: { name: "web", values: { href: "https://example.com/blog", target: "_self" } } }] }, separator: "|", layout: "vertical" })]),
+    code: ['{ text: "Docs", href: "https://example.com/docs" }', 'target: "_self"', 'separator="|"', 'layout="vertical"'],
+  },
+  "menu: an item that calls a phone number": {
+    design: design([block("menu", { menu: { items: [{ key: "1", text: "Call", link: { name: "phone", values: { phone: "+15550100" } } }] } })]),
+    code: ['items={[{ text: "Call", href: "tel:+15550100" }]}'],
+  },
+  "menu: the editor's item keys, kept, and its links as their URLs": {
+    design: design([block("menu", { menu: { items: [{ key: "1606923979749", text: "Mail", link: { name: "email", values: { email: "hi@example.com", subject: "Hi there", body: "" }, attrs: { href: "mailto:{{email}}?subject={{subject}}&body={{body}}" } } }] } })]),
+    code: ['menu={{ items: [{ key: "1606923979749", text: "Mail", link: { name: "web", values: { href: "mailto:hi@example.com?subject=Hi%20there", target: "_blank" } } }] }}'],
+  },
+  "social: icons": {
+    design: design([block("social", { icons: { iconType: "rounded", icons: [{ name: "Facebook", url: "https://facebook.com/acme" }, { name: "X", url: "https://x.com/acme" }] }, iconSize: 24 })]),
+    code: ['{ name: "Facebook", url: "https://facebook.com/acme" }', 'iconType="rounded"', "iconSize={24}"],
+  },
+  "social: an icon set Elements' type doesn't list": {
+    design: design([block("social", { icons: { iconType: "circle-black", icons: [{ name: "Facebook", url: "https://facebook.com/acme" }] } })]),
+    code: ['iconType: "circle-black"'],
+  },
+  "table: headers and data": {
+    design: design([block("table", { columns: 2, rows: 2, enableHeader: true, table: { headers: [{ cells: [{ text: "Item", width: 0 }, { text: "Price", width: 0 }], height: 0 }], rows: [{ cells: [{ text: "Tea", width: 0 }, { text: "$3", width: 0 }], height: 0 }, { cells: [{ text: "Cake", width: 0 }, { text: "$5", width: 0 }], height: 0 }], footers: [] }, stripedRows: true })]),
+    code: ['headers={["Item", "Price"]}', 'data={[', '["Tea", "$3"]', "stripedRows"],
+  },
+  "table: an empty grid": {
+    design: design([block("table", { columns: 3, rows: 2, table: { headers: [], rows: [0, 1].map(() => ({ cells: [0, 1, 2].map(() => ({ text: "", width: 0 })), height: 0 })), footers: [] } })]),
+    code: ["<Table columns={3} rows={2} />"],
+  },
+  "table: footers stay in `values`": {
+    design: design([block("table", { columns: 1, rows: 1, table: { headers: [], rows: [{ cells: [{ text: "A", width: 0 }], height: 0 }], footers: [{ cells: [{ text: "Total", width: 0 }], height: 0 }] } })]),
+    code: ["values={{", "footers: ["],
+    absent: [" as unknown as "],
+  },
+  "video: the editor's (with its URL)": {
+    design: design([block("video", { video: { type: "youtube", videoId: "aqz-KE-bpKQ", thumbnail: "https://img.youtube.com/vi/aqz-KE-bpKQ/0.jpg", loading: false, url: "https://www.youtube.com/watch?v=aqz-KE-bpKQ" } })]),
+    code: ['url: "https://www.youtube.com/watch?v=aqz-KE-bpKQ"'],
+  },
+  "video: Elements' own (a URL gives it all)": {
+    design: design([block("video", { video: { type: "vimeo", videoId: "76979871", thumbnail: "", loading: false } })]),
+    code: ['<Video videoUrl="https://vimeo.com/76979871" />'],
+  },
+  "page break: in a document": {
+    design: design([block("text", { text: "One" }), block("page_break", { color: "#6b7280" }), block("text", { text: "Two" })]),
+    options: { displayMode: "document" },
+    code: ["<Document>", "<PageBreak />"],
+  },
+
+  // ── Device settings ───────────────────────────────────────────────────────────────────────────────────────────
+  "device: phone settings and visibility": {
+    design: design([
+      block("heading", { text: "Phone", fontSize: "32px", _override: { mobile: { fontSize: "24px", textAlign: "center" }, desktop: { hideDesktop: true } } }),
+      block("image", { src: { url: "https://example.com/a.png", autoWidth: false, maxWidth: "50%" }, _override: { mobile: { src: { autoWidth: true } } } }),
+      block("button", { text: "Go", _override: { mobile: { size: { autoWidth: false, width: "100%" }, hideMobile: true } } }),
+    ]),
+    code: ['mobile={{ fontSize: "24px", textAlign: "center" }}', "hideOnDesktop", "mobile={{ autoWidth: true }}", 'mobile={{ width: "100%" }}', "hideOnMobile"],
+  },
+  "lengths: a bare zero comes back as 0px, as the design's schema types it": {
+    design: design([block("text", { text: "Tight", containerPadding: "0 0 12px" }), block("button", { text: "Go", borderRadius: "0", padding: "0 24px" })], { column: { padding: "0 16px" } }),
+    code: ['containerPadding="0 0 12px"', 'padding="0 24px"'],
+  },
+  "device: a setting the props don't have": {
+    design: design([block("text", { text: "Odd", _override: { mobile: { color: "#ff0000" } } })]),
+    code: ['values={{ _override: { mobile: { color: "#ff0000" } } }}'],
+  },
+  "device: a phone setting the block's values type doesn't have": {
+    design: design([block("divider", { _override: { mobile: { color: "#ff0000" } } })]),
+    // (Written as the Divider's values type, which the import names.)
+    code: ['{ _override: { mobile: { color: "#ff0000" } } } as unknown as DividerProps["values"]', "Divider, type DividerProps }"],
+  },
+
+  // ── Rows and columns ──────────────────────────────────────────────────────────────────────────────────────────
+  "row: its padding as the prop (the editor's, around the row)": {
+    design: design([block("text", { text: "Padded" })], { row: { padding: "20px 40px", backgroundColor: "#ffffff" } }),
+    code: ['<Row layout={ColumnLayouts.OneColumn} padding="20px 40px" backgroundColor="#ffffff">'],
+    absent: ["values={{ padding"],
+  },
+  "row: zero padding is left out": {
+    design: design([block("text", { text: "Flat" })], { row: { padding: "0px 0px" } }),
+    code: ["<Row layout={ColumnLayouts.OneColumn}>"],
+  },
+  "row: phone padding, stacking and visibility": {
+    design: design([block("text", { text: "A" })], { row: { _override: { mobile: { padding: "8px", noStackMobile: true, hideMobile: true } } }, cells: [1] }),
+    code: ["noStackMobile", "hideOnMobile", 'mobile={{ padding: "8px" }}'],
+    absent: ["_override"],
+  },
+  "row: cells no layout has": {
+    design: design([], { columns: [{ values: {}, contents: [] }, { values: {}, contents: [] }], cells: [3, 1] }),
+    code: ["<Row cells={[3, 1]}>"],
+  },
+  "row: a background image": {
+    design: design([block("text", { text: "Over" })], { row: { backgroundImage: { url: "https://example.com/bg.png", fullWidth: false, repeat: "no-repeat", size: "cover", position: "center" }, columnsBackgroundColor: "#ffffff" } }),
+    code: ['backgroundImage={{', 'url: "https://example.com/bg.png"', "fullWidth: false", 'size: "cover"', 'columnsBackgroundColor="#ffffff"'],
+  },
+  "column: background, border and phone padding": {
+    design: design([block("text", { text: "Card" })], { column: { backgroundColor: "#f4f4f5", padding: "24px", borderRadius: "8px", border: { borderTopWidth: "1px", borderTopStyle: "solid", borderTopColor: "#e4e4e7" }, _override: { mobile: { padding: "12px" } } } }),
+    code: ['backgroundColor="#f4f4f5"', 'padding="24px"', 'borderRadius="8px"', 'borderTopColor: "#e4e4e7"', 'mobile={{ padding: "12px" }}'],
+  },
+
+  // ── The body ──────────────────────────────────────────────────────────────────────────────────────────────────
+  "body: email settings": {
+    design: design([block("text", { text: "Hi" })], { body: { backgroundColor: "#f0f0f0", contentWidth: "600px", contentAlign: "left", preheaderText: "Your weekly digest", linkStyle: { body: true, linkColor: "#2563eb", linkHoverColor: "#0000ee", linkUnderline: false, linkHoverUnderline: true } } }),
+    code: ['backgroundColor="#f0f0f0"', 'contentWidth="600px"', 'contentAlign="left"', 'previewText="Your weekly digest"', 'linkStyle={{ linkColor: "#2563eb", linkUnderline: false }}'],
+  },
+  "body: a web font, as <Font default>": {
+    design: design([block("text", { text: "Inter" })], { body: { fontFamily: { label: "Inter", value: "'Inter', Arial, sans-serif", url: "https://fonts.googleapis.com/css2?family=Inter" } } }),
+    code: ['import { Font } from "@unlayer/react-elements/font";', '<Font family="Inter" url="https://fonts.googleapis.com/css2?family=Inter" fallback="Arial, sans-serif" default />'],
+    absent: ["fontFamily="],
+  },
+  "body: the editor's web font, kept as it is and loaded": {
+    design: design([block("text", { text: "Montserrat" })], { body: { fontFamily: { label: "Montserrat", value: "'Montserrat',sans-serif", url: "https://fonts.googleapis.com/css?family=Montserrat:400,700", defaultFont: true } } }),
+    code: ['<Font family="Montserrat" url="https://fonts.googleapis.com/css?family=Montserrat:400,700" />', "defaultFont: true"],
+  },
+  "body: a document": {
+    design: design([block("text", { text: "Page" })], { body: { documentSize: "Letter", documentOrientation: "landscape", documentMargin: "48px" } }),
+    options: { displayMode: "document" },
+    code: ['<Document', 'documentSize="Letter"', 'documentOrientation="landscape"', 'values={{ documentMargin: "48px" }}'],
+  },
+  "body: a popup's settings": {
+    design: design([block("text", { text: "Popup" })], { body: { popupWidth: "400px" } }),
+    options: { displayMode: "popup" },
+    code: ["<Page", 'values={{ popupWidth: "400px" }}'],
+    warnings: [/A popup design is written as a <Page>/],
+  },
+  "body: the display mode the design gives": {
+    design: design([block("text", { text: "Web" })], { extra: { displayMode: "web" } }),
+    code: ["<Page>"],
+  },
+
+  // ── Builder settings and blocks without a component ───────────────────────────────────────────────────────────
+  "builder settings: anchor, display condition, locked": {
+    design: design([block("text", { text: "VIP", anchor: "vip", locked: true, displayCondition: { type: "vip", label: "VIP", description: "VIPs only", before: "{% if vip %}", after: "{% endif %}" } })]),
+    code: ['anchor: "vip"', "locked: true", 'before: "{% if vip %}"'],
+    absent: [" as unknown as ", "builderValues"],
+  },
+  "builder flags renderToJson can't keep": {
+    design: design([block("text", { text: "Fixed", selectable: false, deletable: false })], { row: { draggable: false } }),
+    code: ['<Paragraph html="Fixed" />'],
+    warnings: [/Row 1: `draggable` is false/, /Row 1, column 1, block 1: `selectable`, `deletable` are false/],
+    losses: ["body.rows[0].values.draggable", "body.rows[0].columns[0].contents[0].values.selectable", "body.rows[0].columns[0].contents[0].values.deletable"],
+  },
+  "a custom tool, with the exported HTML": {
+    design: design([block("custom", { _meta: { htmlID: "u_content_custom_rating_1", htmlClassNames: "u_content_custom_rating" }, stars: 4, containerPadding: "20px" }, { slug: "rating" })]),
+    options: { html: '<div id="u_content_custom_rating_1" class="u_content_custom_rating"><div class="v-container-padding-padding" style="padding: 20px"><div class="stars">★★★★☆</div></div></div>' },
+    code: ['<Html html=\'<div class="stars">★★★★☆</div>\' containerPadding="20px" />'],
+    warnings: [/Row 1, column 1, block 1: a custom "rating" block has no Elements component, so it's kept as an <Html> block/],
+    losses: ["body.rows[0].columns[0].contents[0].type", "body.rows[0].columns[0].contents[0].slug", "body.rows[0].columns[0].contents[0].values.stars", "body.rows[0].columns[0].contents[0].values.html"],
+  },
+  "a timer without exported HTML": {
+    design: design([block("text", { text: "Before" }), block("timer", { countdown: { endTime: "2026-12-31T00:00:00Z" } })]),
+    code: ['{/* TODO: a "timer" block (Row 1, column 1, block 2) has no Elements component.'],
+    warnings: [/Row 1, column 1, block 2: a "timer" block has no Elements component and no exported HTML/],
+    losses: ["body.rows[0].columns[0].contents"],
+  },
+  "warnings: ids, schema version, document headers": {
+    design: design([{ id: "abc", type: "text", values: { text: "Old" } }], { extra: { schemaVersion: 12 }, headers: [{ cells: [1], columns: [], values: {} }] }),
+    code: ['<Paragraph html="Old" />'],
+    warnings: [/ids aren't kept/, /schema \(version 12\) is older/, /The design's headers/],
+    losses: ["body.headers"],
+  },
+};
diff --git a/packages/react/src/codegen/__fixtures__/editor-kitchen-sink.json b/packages/react/src/codegen/__fixtures__/editor-kitchen-sink.json
new file mode 100644
index 00000000..313e1f08
--- /dev/null
+++ b/packages/react/src/codegen/__fixtures__/editor-kitchen-sink.json
@@ -0,0 +1,770 @@
+{
+  "counters": {
+    "u_row": 3,
+    "u_column": 6,
+    "u_content_image": 1,
+    "u_content_heading": 1,
+    "u_content_text": 1,
+    "u_content_button": 1,
+    "u_content_divider": 1,
+    "u_content_menu": 1,
+    "u_content_social": 1,
+    "u_content_table": 1,
+    "u_content_video": 1,
+    "u_content_html": 1,
+    "u_content_paragraph": 1
+  },
+  "body": {
+    "id": "SiSExv1gBb",
+    "rows": [
+      {
+        "id": "xpWNsssIXj",
+        "cells": [
+          1,
+          2
+        ],
+        "columns": [
+          {
+            "id": "sLVNeeHo2P",
+            "contents": [
+              {
+                "id": "KwkvQGSEaF",
+                "type": "image",
+                "values": {
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "src": {
+                    "url": "https://cdn.tools.unlayer.com/image/placeholder.png",
+                    "width": 800,
+                    "height": 400,
+                    "autoWidth": false,
+                    "maxWidth": "70.87%"
+                  },
+                  "textAlign": "center",
+                  "altText": "Logo",
+                  "action": {
+                    "name": "web",
+                    "values": {
+                      "href": "",
+                      "target": "_blank"
+                    }
+                  },
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "_meta": {
+                    "htmlID": "u_content_image_1",
+                    "htmlClassNames": "u_content_image"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false,
+                  "href": {
+                    "name": "web",
+                    "values": {
+                      "href": "https://example.com/home",
+                      "target": "_blank"
+                    }
+                  }
+                }
+              }
+            ],
+            "values": {
+              "backgroundColor": "#fafafa",
+              "padding": "8px",
+              "border": {},
+              "borderRadius": "0px",
+              "_meta": {
+                "htmlID": "u_column_1",
+                "htmlClassNames": "u_column"
+              },
+              "deletable": true,
+              "locked": false
+            }
+          },
+          {
+            "id": "aH328v7ppa",
+            "contents": [
+              {
+                "id": "3oH3gydyZq",
+                "type": "heading",
+                "values": {
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "headingType": "h2",
+                  "fontWeight": 400,
+                  "fontSize": "28px",
+                  "color": "#1f2937",
+                  "textAlign": "left",
+                  "lineHeight": "140%",
+                  "linkStyle": {
+                    "inherit": true,
+                    "linkColor": "#0000ee",
+                    "linkHoverColor": "#0000ee",
+                    "linkUnderline": true,
+                    "linkHoverUnderline": true
+                  },
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "_meta": {
+                    "htmlID": "u_content_heading_1",
+                    "htmlClassNames": "u_content_heading"
+                  },
+                  "selectable": false,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false,
+                  "text": "Kitchen sink & friends"
+                }
+              },
+              {
+                "id": "m6GydqJwjE",
+                "type": "text",
+                "values": {
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "fontSize": "14px",
+                  "color": "#000000",
+                  "textAlign": "left",
+                  "lineHeight": "160%",
+                  "linkStyle": {
+                    "inherit": true,
+                    "linkColor": "#0000ee",
+                    "linkHoverColor": "#0000ee",
+                    "linkUnderline": true,
+                    "linkHoverUnderline": true
+                  },
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "_meta": {
+                    "htmlID": "u_content_text_1",
+                    "htmlClassNames": "u_content_text"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false,
+                  "text": "<p>Hello <strong>bold</strong> and <a href=\"https://example.com\">a link</a>.</p>"
+                }
+              },
+              {
+                "id": "LwiMP-daEr",
+                "type": "button",
+                "values": {
+                  "href": {
+                    "name": "web",
+                    "values": {
+                      "href": "https://example.com/cta",
+                      "target": "_blank"
+                    }
+                  },
+                  "buttonColors": {
+                    "color": "#ffffff",
+                    "backgroundColor": "#4f46e5",
+                    "hoverColor": "#FFFFFF",
+                    "hoverBackgroundColor": "#0879A1"
+                  },
+                  "size": {
+                    "autoWidth": true,
+                    "width": "100%"
+                  },
+                  "fontSize": "14px",
+                  "lineHeight": "120%",
+                  "textAlign": "center",
+                  "padding": "12px 24px",
+                  "border": {},
+                  "borderRadius": "8px",
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "_meta": {
+                    "htmlID": "u_content_button_1",
+                    "htmlClassNames": "u_content_button"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false,
+                  "text": "Get started"
+                }
+              }
+            ],
+            "values": {
+              "backgroundColor": "",
+              "padding": "0px",
+              "border": {},
+              "borderRadius": "0px",
+              "_meta": {
+                "htmlID": "u_column_2",
+                "htmlClassNames": "u_column"
+              },
+              "deletable": true,
+              "locked": false
+            }
+          }
+        ],
+        "values": {
+          "displayCondition": null,
+          "columns": false,
+          "_styleGuide": null,
+          "backgroundColor": "#ffffff",
+          "columnsBackgroundColor": "",
+          "backgroundImage": {
+            "url": "",
+            "fullWidth": true,
+            "repeat": "no-repeat",
+            "size": "custom",
+            "position": "center"
+          },
+          "padding": "12px",
+          "anchor": "",
+          "hideDesktop": false,
+          "_meta": {
+            "htmlID": "u_row_1",
+            "htmlClassNames": "u_row"
+          },
+          "selectable": true,
+          "draggable": true,
+          "duplicatable": true,
+          "deletable": false,
+          "hideable": true,
+          "locked": false,
+          "noStackMobile": false,
+          "cells": [
+            1,
+            2
+          ]
+        }
+      },
+      {
+        "id": "454ym4AHHf",
+        "cells": [
+          1,
+          1,
+          1
+        ],
+        "columns": [
+          {
+            "id": "PfewCqrv3Y",
+            "contents": [
+              {
+                "id": "MsvxaYCYno",
+                "type": "divider",
+                "values": {
+                  "width": "80%",
+                  "border": {
+                    "borderTopWidth": "2px",
+                    "borderTopStyle": "solid",
+                    "borderTopColor": "#e11d48"
+                  },
+                  "textAlign": "center",
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "_meta": {
+                    "htmlID": "u_content_divider_1",
+                    "htmlClassNames": "u_content_divider"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false
+                }
+              }
+            ],
+            "values": {
+              "backgroundColor": "",
+              "padding": "0px",
+              "border": {},
+              "borderRadius": "0px",
+              "_meta": {
+                "htmlID": "u_column_3",
+                "htmlClassNames": "u_column"
+              },
+              "deletable": true,
+              "locked": false
+            }
+          },
+          {
+            "id": "bITY0uAvSW",
+            "contents": [
+              {
+                "id": "1h85r19HAm",
+                "type": "menu",
+                "values": {
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "menu": {
+                    "items": [
+                      {
+                        "key": "1",
+                        "text": "Docs",
+                        "link": {
+                          "name": "web",
+                          "values": {
+                            "href": "https://docs.example.com",
+                            "target": "_blank"
+                          }
+                        }
+                      },
+                      {
+                        "key": "2",
+                        "text": "Blog",
+                        "link": {
+                          "name": "web",
+                          "values": {
+                            "href": "https://blog.example.com",
+                            "target": "_self"
+                          }
+                        }
+                      }
+                    ]
+                  },
+                  "fontSize": "14px",
+                  "textColor": "#111827",
+                  "linkColor": "#0068A5",
+                  "align": "center",
+                  "layout": "horizontal",
+                  "separator": "",
+                  "padding": "5px 15px",
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "_meta": {
+                    "htmlID": "u_content_menu_1",
+                    "htmlClassNames": "u_content_menu"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false
+                }
+              }
+            ],
+            "values": {
+              "backgroundColor": "",
+              "padding": "0px",
+              "border": {},
+              "borderRadius": "0px",
+              "_meta": {
+                "htmlID": "u_column_4",
+                "htmlClassNames": "u_column"
+              },
+              "deletable": true,
+              "locked": false
+            }
+          },
+          {
+            "id": "Lh7XPNypAi",
+            "contents": [
+              {
+                "id": "24BpI8429G",
+                "type": "social",
+                "values": {
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "icons": {
+                    "iconType": "circle-black",
+                    "icons": [
+                      {
+                        "name": "Facebook",
+                        "url": "https://facebook.com/x"
+                      },
+                      {
+                        "name": "X",
+                        "url": "https://x.com/x"
+                      }
+                    ]
+                  },
+                  "align": "center",
+                  "iconSize": 28,
+                  "spacing": 5,
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "_meta": {
+                    "htmlID": "u_content_social_1",
+                    "htmlClassNames": "u_content_social"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false
+                }
+              }
+            ],
+            "values": {
+              "backgroundColor": "",
+              "padding": "0px",
+              "border": {},
+              "borderRadius": "0px",
+              "_meta": {
+                "htmlID": "u_column_5",
+                "htmlClassNames": "u_column"
+              },
+              "deletable": true,
+              "locked": false
+            }
+          }
+        ],
+        "values": {
+          "displayCondition": null,
+          "columns": false,
+          "_styleGuide": null,
+          "backgroundColor": "",
+          "columnsBackgroundColor": "",
+          "backgroundImage": {
+            "url": "",
+            "fullWidth": true,
+            "repeat": "no-repeat",
+            "size": "custom",
+            "position": "center"
+          },
+          "padding": "0px",
+          "anchor": "",
+          "hideDesktop": false,
+          "_meta": {
+            "htmlID": "u_row_2",
+            "htmlClassNames": "u_row"
+          },
+          "selectable": true,
+          "draggable": true,
+          "duplicatable": true,
+          "deletable": true,
+          "hideable": true,
+          "locked": false,
+          "noStackMobile": false,
+          "cells": [
+            1,
+            1,
+            1
+          ]
+        }
+      },
+      {
+        "id": "mDhK9HpSiB",
+        "cells": [
+          1
+        ],
+        "columns": [
+          {
+            "id": "FkXEwiADXs",
+            "contents": [
+              {
+                "id": "sdJNCwObF8",
+                "type": "table",
+                "values": {
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "columns": 2,
+                  "rows": 2,
+                  "border": {
+                    "borderTopWidth": "1px",
+                    "borderTopStyle": "solid",
+                    "borderTopColor": "#CCC",
+                    "borderLeftWidth": "1px",
+                    "borderLeftStyle": "solid",
+                    "borderLeftColor": "#CCC",
+                    "borderRightWidth": "1px",
+                    "borderRightStyle": "solid",
+                    "borderRightColor": "#CCC",
+                    "borderBottomWidth": "1px",
+                    "borderBottomStyle": "solid",
+                    "borderBottomColor": "#CCC"
+                  },
+                  "stripedRows": true,
+                  "stripedRowsBackgroundColor": "#CCC",
+                  "enableHeader": true,
+                  "repeatHeaderOnEachPage": true,
+                  "headerBackgroundColor": "#DDDDDD",
+                  "headerFontWeight": 700,
+                  "headerFontSize": "14px",
+                  "headerTextAlign": "left",
+                  "headerVerticalAlign": "middle",
+                  "headerPadding": "10px",
+                  "contentBackgroundColor": "#FFFFFF",
+                  "contentFontSize": "14px",
+                  "contentTextAlign": "left",
+                  "contentVerticalAlign": "middle",
+                  "contentLineHeight": "140%",
+                  "contentPadding": "10px",
+                  "enableFooter": false,
+                  "repeatFooterOnEachPage": true,
+                  "footerBackgroundColor": "#DDDDDD",
+                  "footerFontWeight": 700,
+                  "footerFontSize": "14px",
+                  "footerTextAlign": "left",
+                  "footerVerticalAlign": "middle",
+                  "footerPadding": "10px",
+                  "linkStyle": {
+                    "body": true,
+                    "linkColor": "#0000ee",
+                    "linkHoverColor": "#0000ee",
+                    "linkUnderline": true,
+                    "linkHoverUnderline": true
+                  },
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "_meta": {
+                    "htmlID": "u_content_table_1",
+                    "htmlClassNames": "u_content_table"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false,
+                  "table": {
+                    "headers": [],
+                    "rows": [
+                      {
+                        "cells": [
+                          {
+                            "text": "",
+                            "width": 0
+                          },
+                          {
+                            "text": "",
+                            "width": 0
+                          }
+                        ],
+                        "height": 0
+                      },
+                      {
+                        "cells": [
+                          {
+                            "text": "",
+                            "width": 0
+                          },
+                          {
+                            "text": "",
+                            "width": 0
+                          }
+                        ],
+                        "height": 0
+                      }
+                    ],
+                    "footers": []
+                  }
+                }
+              },
+              {
+                "id": "zHMRtL9afo",
+                "type": "video",
+                "values": {
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "video": {
+                    "type": "youtube",
+                    "videoId": "aqz-KE-bpKQ",
+                    "thumbnail": "https://img.youtube.com/vi/aqz-KE-bpKQ/0.jpg",
+                    "loading": false,
+                    "url": "https://www.youtube.com/watch?v=aqz-KE-bpKQ"
+                  },
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "_meta": {
+                    "htmlID": "u_content_video_1",
+                    "htmlClassNames": "u_content_video"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false
+                }
+              },
+              {
+                "id": "HK8TfDjiVQ",
+                "type": "html",
+                "values": {
+                  "html": "<div style=\"color:#0f766e\">Raw &amp; custom <em>HTML</em></div>",
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "_meta": {
+                    "htmlID": "u_content_html_1",
+                    "htmlClassNames": "u_content_html"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false
+                }
+              },
+              {
+                "id": "65J9Wrjhd2",
+                "type": "paragraph",
+                "values": {
+                  "containerPadding": "10px",
+                  "anchor": "",
+                  "fontSize": "14px",
+                  "textAlign": "left",
+                  "lineHeight": "140%",
+                  "linkStyle": {
+                    "inherit": true,
+                    "linkColor": "#0000ee",
+                    "linkHoverColor": "#0000ee",
+                    "linkUnderline": true,
+                    "linkHoverUnderline": true
+                  },
+                  "hideDesktop": false,
+                  "displayCondition": null,
+                  "_styleGuide": null,
+                  "_meta": {
+                    "htmlID": "u_content_paragraph_1",
+                    "htmlClassNames": "u_content_paragraph"
+                  },
+                  "selectable": true,
+                  "draggable": true,
+                  "duplicatable": true,
+                  "deletable": true,
+                  "hideable": true,
+                  "locked": false,
+                  "textJson": "{\"root\":{\"type\":\"root\",\"format\":\"\",\"indent\":0,\"version\":1,\"direction\":\"ltr\",\"children\":[{\"type\":\"paragraph\",\"format\":\"\",\"indent\":0,\"version\":1,\"direction\":\"ltr\",\"textFormat\":0,\"textStyle\":\"\",\"children\":[{\"type\":\"text\",\"text\":\"Lexical with \",\"format\":0,\"detail\":0,\"mode\":\"normal\",\"style\":\"\",\"version\":1},{\"type\":\"text\",\"text\":\"bold\",\"format\":1,\"detail\":0,\"mode\":\"normal\",\"style\":\"\",\"version\":1},{\"type\":\"text\",\"text\":\" text.\",\"format\":0,\"detail\":0,\"mode\":\"normal\",\"style\":\"\",\"version\":1}]}]}}",
+                  "text": "<p dir=\"ltr\" style=\"margin: 0px; margin-block: 0px;\"><span>Lexical with </span><span style=\"font-weight: bold\">bold</span><span> text.</span></p>"
+                }
+              }
+            ],
+            "values": {
+              "backgroundColor": "",
+              "padding": "0px",
+              "border": {},
+              "borderRadius": "0px",
+              "_meta": {
+                "htmlID": "u_column_6",
+                "htmlClassNames": "u_column"
+              },
+              "deletable": true,
+              "locked": false
+            }
+          }
+        ],
+        "values": {
+          "displayCondition": null,
+          "columns": false,
+          "_styleGuide": null,
+          "backgroundColor": "",
+          "columnsBackgroundColor": "",
+          "backgroundImage": {
+            "url": "",
+            "fullWidth": true,
+            "repeat": "no-repeat",
+            "size": "custom",
+            "position": "center"
+          },
+          "padding": "0px",
+          "anchor": "",
+          "hideDesktop": false,
+          "_meta": {
+            "htmlID": "u_row_3",
+            "htmlClassNames": "u_row"
+          },
+          "selectable": true,
+          "draggable": true,
+          "duplicatable": true,
+          "deletable": true,
+          "hideable": true,
+          "locked": false,
+          "noStackMobile": false,
+          "cells": [
+            1
+          ]
+        }
+      }
+    ],
+    "headers": [],
+    "footers": [],
+    "values": {
+      "_styleGuide": null,
+      "popupPosition": "center",
+      "popupDisplayDelay": 0,
+      "popupWidth": "600px",
+      "popupHeight": "auto",
+      "borderRadius": "10px",
+      "contentAlign": "center",
+      "contentVerticalAlign": "middle",
+      "contentWidth": "640px",
+      "fontFamily": {
+        "label": "Arial",
+        "value": "arial,helvetica,sans-serif"
+      },
+      "textColor": "#000000",
+      "popupBackgroundColor": "#FFFFFF",
+      "popupBackgroundImage": {
+        "url": "",
+        "fullWidth": true,
+        "repeat": "no-repeat",
+        "size": "cover",
+        "position": "center"
+      },
+      "popupOverlay_backgroundColor": "rgba(0, 0, 0, 0.1)",
+      "popupCloseButton_position": "top-right",
+      "popupCloseButton_backgroundColor": "#DDDDDD",
+      "popupCloseButton_iconColor": "#000000",
+      "popupCloseButton_borderRadius": "0px",
+      "popupCloseButton_margin": "0px",
+      "popupCloseButton_action": {
+        "name": "close_popup",
+        "attrs": {
+          "onClick": "document.querySelector('.u-popup-container').style.display = 'none';"
+        }
+      },
+      "language": {},
+      "backgroundColor": "#eef1f5",
+      "documentSize": "A4",
+      "documentOrientation": "portrait",
+      "documentMargin": "96px",
+      "preheaderText": "Kitchen sink preview",
+      "linkStyle": {
+        "body": true,
+        "linkColor": "#0000ee",
+        "linkHoverColor": "#0000ee",
+        "linkUnderline": true,
+        "linkHoverUnderline": true
+      },
+      "backgroundImage": {
+        "url": "",
+        "fullWidth": true,
+        "repeat": "no-repeat",
+        "size": "custom",
+        "position": "center"
+      },
+      "accessibilityTitle": "",
+      "_meta": {
+        "htmlID": "u_body",
+        "htmlClassNames": "u_body"
+      }
+    }
+  },
+  "schemaVersion": 27
+}
diff --git a/packages/react/src/codegen/__fixtures__/sources.tsx b/packages/react/src/codegen/__fixtures__/sources.tsx
new file mode 100644
index 00000000..a395e806
--- /dev/null
+++ b/packages/react/src/codegen/__fixtures__/sources.tsx
@@ -0,0 +1,81 @@
+/**
+ * The designs codegen's round trip and type-check tests convert: Elements' own templates (the examples, the demo's
+ * templates, the content-workflows invoice, the regression patterns' designs), each rendered with renderToJson, and
+ * designs the editor saved (the device-settings fixtures and a kitchen sink of every block).
+ */
+import React from "react";
+import { vi } from "vitest";
+import { renderToJson } from "../../index";
+import { invoiceTemplate, sampleInvoice } from "../../../../../examples/content-workflows/src/invoice";
+import deviceParity from "../../utils/fixtures/device-parity.json";
+import kitchenSink from "./editor-kitchen-sink.json";
+import type { DisplayMode } from "../design-to-elements";
+import type { Plain } from "../values";
+
+// Vite's `import.meta.glob` (Vitest runs this file; the package's types don't load Vite's).
+declare global {
+  interface ImportMeta {
+    glob<T>(patterns: string | string[], options: { eager: true; import?: string; query?: string }): Record<string, T>;
+  }
+}
+
+export interface Case {
+  name: string;
+  source: string;
+  design: () => Plain;
+  displayMode?: DisplayMode;
+}
+
+export const quiet = <T,>(run: () => T): T => {
+  const spies = (["warn", "error", "info"] as const).map((level) => vi.spyOn(console, level).mockImplementation(() => {}));
+  try {
+    return run();
+  } finally {
+    spies.forEach((spy) => spy.mockRestore());
+  }
+};
+
+const fromTemplate = (element: () => React.ReactElement) => () => quiet(() => renderToJson(element()) as unknown as Plain);
+const modeOf = (element: React.ReactElement): DisplayMode => {
+  const name = (element.type as { displayName?: string })?.displayName;
+  return name === "Page" ? "web" : name === "Document" ? "document" : "email";
+};
+
+export const SOURCES: Case[] = [];
+const cases = SOURCES;
+
+// The examples (each exports its template as a component; PhoneOverrides renders its HTML, not a template).
+const examples = import.meta.glob<Record<string, unknown>>(["../../examples/*.stories.tsx", "../../SpotifyWelcome.stories.tsx"], { eager: true });
+for (const [path, module] of Object.entries(examples)) {
+  for (const [name, value] of Object.entries(module)) {
+    if (typeof value !== "function" || !/^[A-Z]/.test(name) || name === "PhoneOverrides") continue;
+    const Template = value as React.FC;
+    cases.push({ name, source: `example ${path.split("/").pop()}`, design: fromTemplate(() => <Template />) });
+  }
+}
+
+// The demo's templates.
+const demo = import.meta.glob<{ default: React.FC }>("../../../../demo/src/templates/*.tsx", { eager: true });
+for (const [path, module] of Object.entries(demo)) {
+  const Template = module.default;
+  cases.push({ name: path.split("/").pop()!.replace(/\.tsx$/, ""), source: "demo template", design: fromTemplate(() => <Template />), displayMode: modeOf(Template({}) as React.ReactElement) });
+}
+
+// The content-workflows invoice, in each mode.
+for (const mode of ["email", "web", "document"] as const) {
+  cases.push({ name: `invoice (${mode})`, source: "content-workflows example", design: fromTemplate(() => invoiceTemplate(sampleInvoice, mode)), displayMode: mode });
+}
+
+// The regression patterns' designs (renderToJson's, reviewed).
+const patterns = import.meta.glob<Plain>("../../regression/__snapshots__/patterns/*.json", { eager: true, import: "default" });
+for (const [path, design] of Object.entries(patterns)) {
+  const name = path.split("/").pop()!.replace(/\.json$/, "");
+  cases.push({ name, source: "regression pattern", design: () => design, displayMode: /web-page|html-from/.test(name) ? "web" : name === "print-document" ? "document" : "email" });
+}
+
+// Designs the editor saved.
+for (const [i, fixture] of (deviceParity as Array<{ name: string; mode: DisplayMode; design: Plain }>).entries()) {
+  cases.push({ name: `${fixture.name} (${fixture.mode}) #${i + 1}`, source: "editor design (device settings)", design: () => fixture.design, displayMode: fixture.mode });
+}
+cases.push({ name: "kitchen sink", source: "editor design", design: () => kitchenSink as Plain });
+
diff --git a/packages/react/src/codegen/blocks.ts b/packages/react/src/codegen/blocks.ts
new file mode 100644
index 00000000..a0620ab6
--- /dev/null
+++ b/packages/react/src/codegen/blocks.ts
@@ -0,0 +1,380 @@
+/**
+ * A design's content blocks as Elements components: each type's own props first (text, links, images, menu items,
+ * icons, table data, a video), then its other values (see props.ts) and device settings (see device.ts).
+ */
+import { generateHtmlFromTextJson, safeVideoId } from "@unlayer-internal/shared-elements";
+import { BLOCK_BASE, BLOCK_DEFAULTS, COMPONENT_OF_TYPE } from "./defaults";
+import { placeDevice } from "./device";
+import { attributes, lostThroughValues, placeValues, Props, withoutMeta } from "./props";
+import type { JsxChild } from "./print";
+import { withoutRestoredUrl } from "./fonts";
+import { blockHtml, plainText } from "./text";
+import { contentSlotWidth, pinImageSrc, toPx, type SlotContext } from "../utils/image-sizing";
+import { deepEqual, isPlainObject, omit, type Plain } from "./values";
+import type { ModuleState } from "./state";
+import { dropFixedFlags, warnLost, warnMergeTagRule } from "./warnings";
+import { editorLink, READ_BACK } from "./links";
+
+export interface BlockContext {
+  /** "Row 2, column 1, block 3": where the block is, for warnings. */
+  where: string;
+  state: ModuleState;
+  /** The body's text color, which a text block without its own shows. */
+  textColor?: string;
+  /** A right-to-left design: a text block without an alignment starts on the right. */
+  rtl: boolean;
+  /** The block's place (its body, row, cells and column), for an image's width in px. */
+  slot: Omit<SlotContext, "containerPadding">;
+}
+
+/** Text styles every text block takes as props. */
+const TEXT = ["color", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "textAlign", "linkStyle"];
+
+/** The design keys each component has a flat prop for (beside the ones its own handler writes). */
+const TYPED: Record<string, ReadonlySet<string>> = {
+  Paragraph: new Set([...TEXT, "containerPadding"]),
+  Heading: new Set([...TEXT, "headingType", "containerPadding"]),
+  Button: new Set(["buttonColors", "size", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "textAlign", "padding", "border", "borderRadius", "containerPadding"]),
+  Image: new Set(["altText", "action", "textAlign", "containerPadding"]),
+  Divider: new Set(["width", "border", "textAlign", "containerPadding"]),
+  Html: new Set(["containerPadding"]),
+  Menu: new Set(["menu", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "textColor", "linkColor", "align", "layout", "separator", "padding", "containerPadding"]),
+  Social: new Set(["align", "iconSize", "spacing", "containerPadding"]),
+  // (Only what Table's defaults have: it says it ignores other props, such as `headerColor`, which go in `values`.)
+  Table: new Set([
+    "border", "stripedRows", "stripedRowsBackgroundColor", "enableHeader", "repeatHeaderOnEachPage", "headerBackgroundColor", "headerFontWeight",
+    "headerFontSize", "headerTextAlign", "headerVerticalAlign", "headerPadding", "contentBackgroundColor", "contentFontSize", "contentTextAlign",
+    "contentVerticalAlign", "contentLineHeight", "contentPadding", "enableFooter", "repeatFooterOnEachPage", "footerBackgroundColor",
+    "footerFontWeight", "footerFontSize", "footerTextAlign", "footerVerticalAlign", "footerPadding", "linkStyle", "containerPadding",
+  ]),
+  Video: new Set(["containerPadding"]),
+  PageBreak: new Set(["color", "containerPadding"]),
+};
+
+/** Groups whose changed keys read as flat props. */
+const FLATTEN: Record<string, ReadonlySet<string>> = {
+  Button: new Set(["buttonColors"]),
+  Divider: new Set(["border"]),
+};
+
+/** Keys every block has in the builder that no prop sets: kept in `values` when they're not the builder's default. */
+const BUILDER_ONLY: Plain = { anchor: "", hideDesktop: false, displayCondition: null, _styleGuide: null, locked: false };
+
+const TEXT_TYPES = new Set(["text", "paragraph", "heading"]);
+
+/** A design block as an element, or a comment where Elements has no component for it. */
+export function convertBlock(content: Plain, ctx: BlockContext): JsxChild {
+  const type = String(content.type ?? "");
+  const component = COMPONENT_OF_TYPE[type];
+  if (!component) return withoutComponent(content, type, ctx);
+  ctx.state.use(component);
+
+  const props = new Props(component);
+  let rest: Plain = isPlainObject(content.values) ? { ...content.values } : {};
+  warnMergeTagRule(rest, ctx.where, ctx.state, type === "table");
+  rest = base(rest, props, ctx);
+
+  // The editor's Lexical text (a "paragraph" block, or a text block with only its Lexical JSON): Elements writes a
+  // `text` block holding its HTML.
+  if ((type === "paragraph" || type === "text") && typeof rest.text !== "string" && typeof rest.textJson === "string") rest.text = generateHtmlFromTextJson(rest.textJson);
+  if (type === "paragraph") ctx.state.warn(`${ctx.where}: a "paragraph" block (the editor's Lexical text) becomes a Paragraph, a "text" block with the same HTML.`);
+  // `text` is what the builder shows and exports where a block has both.
+  if (typeof rest.text === "string") delete rest.textJson;
+  // A web font's URL, where its <Font> gives it back (see fonts.ts).
+  if (rest.fontFamily !== undefined) rest.fontFamily = withoutRestoredUrl(rest.fontFamily, ctx.state);
+  // Without a color of its own, a text block shows the body's: Elements writes a color, so it's that one.
+  if (TEXT_TYPES.has(type) && rest.color === undefined && ctx.textColor !== undefined) rest.color = ctx.textColor;
+
+  const defaults: Plain = { ...BLOCK_BASE, ...BLOCK_DEFAULTS[component] };
+  // In a right-to-left design Elements aligns a text block that sets no alignment right, where the builder shows
+  // it as its default (left): so it's written.
+  if (ctx.rtl && defaults.textAlign === "left") {
+    defaults.textAlign = "right";
+    rest.textAlign ??= "left";
+  }
+  rest = OWN_PROPS[component]?.(rest, props, defaults, ctx) ?? rest;
+
+  const override = rest._override;
+  placeValues(omit(rest, ["_override"]), defaults, props, { typed: TYPED[component], flatten: FLATTEN[component], last: ["containerPadding"] });
+  placeDevice(override, props, defaults, "block");
+  warnLost(lostThroughValues(props.values, defaults, component), ctx.where, ctx.state);
+
+  return { tag: component, attrs: attributes(props, ctx.state.types), children: props.text !== undefined ? [{ text: props.text }] : [] };
+}
+
+
+/** The keys every block has: its ids (left out), the builder's flags and settings no prop sets. */
+function base(values: Plain, props: Props, ctx: BlockContext): Plain {
+  const rest = withoutMeta(values, props);
+  dropFixedFlags(rest, ctx.where, ctx.state);
+  for (const [key, value] of Object.entries(BUILDER_ONLY)) {
+    if (key in rest && !deepEqual(rest[key], value)) props.values[key] = rest[key];
+    delete rest[key];
+  }
+  return rest;
+}
+
+type OwnProps = (rest: Plain, props: Props, defaults: Plain, ctx: BlockContext) => Plain;
+
+/**
+ * A Heading's or Button's text as children where it's plain, else in `text` (HTML); a Paragraph's in `html`, always:
+ * a Paragraph's children render as the editor's rich text (in a `<p>`), where the design's text renders as it is.
+ */
+function textProp(prop: "html" | "text"): OwnProps {
+  return (rest, props, defaults) => {
+    const { text, ...others } = rest;
+    if (typeof text !== "string" || (prop === "text" && text === defaults.text)) return others;
+    const plain = prop === "text" ? plainText(text) : undefined;
+    if (plain !== undefined) props.text = plain;
+    // A Paragraph's empty text is `values.text` (its `html` prop takes none).
+    else if (text === "" && prop === "html") props.values.text = "";
+    else props.add(prop, text);
+    return others;
+  };
+}
+
+interface Link {
+  href: string;
+  target: string;
+  /** The design's is a web link with no URL in its values (a Menu item's given no `href`), which a Menu keeps. */
+  bare?: boolean;
+}
+
+/**
+ * A link as Elements' components take it: the URL the editor exports for it (an email's `mailto:…`, see links.ts) and
+ * where it opens, all a component's link takes. Undefined where it has more than a URL holds (code it runs, a class,
+ * a `rel`, any other attribute), which is said: it's written as the design has it. A link the builder doesn't read
+ * back from its URL (a page section's) is said too.
+ */
+function linkOf(link: unknown, ctx: BlockContext, whose = "its"): Link | undefined {
+  const exported = editorLink(link);
+  if (!exported) return undefined;
+  const action = isPlainObject(link) && typeof link.name === "string" ? link.name : undefined;
+  const name = action !== undefined ? `"${action}" link` : "link";
+  if ("lost" in exported) {
+    ctx.state.warn(`${ctx.where}: ${whose} ${name} has ${exported.lost.map((key) => `\`${key}\``).join(" and ")}, which a URL can't hold, so it's written as the design has it (Elements' HTML doesn't write ${exported.lost.length > 1 ? "them" : "it"} as the builder does).`);
+    return undefined;
+  }
+  if (!exported.kept) ctx.state.warn(`${ctx.where}: ${whose} ${name} is written as the URL the builder exports for it (${exported.url ? `\`${exported.url}\`` : "none"}), which the builder opens as ${action !== undefined && READ_BACK.has(action) ? `its own ${name}` : "a web link"}.`);
+  const bare = exported.url === "" && isPlainObject(link) && link.name === "web" && isPlainObject(link.values) && link.values.href === undefined;
+  return { href: exported.url, target: exported.target, ...(bare ? { bare } : {}) };
+}
+
+/** No link: the builder's empty one. */
+const noLink = (link: Link) => link.href === "" && link.target === "_blank";
+
+/** A link in the shape the design keeps it: a web link to its URL. */
+const webLink = (link: Link) => ({ name: "web", values: { href: link.href, target: link.target } });
+
+const OWN_PROPS: Record<string, OwnProps> = {
+  Paragraph: textProp("html"),
+
+  Heading: (rest, props, defaults, ctx) => {
+    const { headingType, ...others } = rest;
+    if (headingType !== undefined && headingType !== defaults.headingType && /^h[1-6]$/.test(String(headingType))) props.add("headingType", headingType);
+    else if (headingType !== undefined) others.headingType = headingType;
+    return textProp("text")(others, props, defaults, ctx);
+  },
+
+  Button: (rest, props, defaults, ctx) => {
+    const { href, ...others } = textProp("text")(rest, props, defaults, ctx);
+    if (href !== undefined && !deepEqual(href, defaults.href)) {
+      const link = linkOf(href, ctx);
+      if (!link) props.add("href", href);
+      else if (!noLink(link)) {
+        props.add("href", link.href);
+        if (link.target !== "_blank") props.add("target", link.target);
+      }
+    }
+    // A fixed width is `width`; other sizes whole (Button reads a `size` with a width and no `autoWidth` as fixed).
+    const { size } = others;
+    if (size !== undefined && !deepEqual(size, defaults.size)) {
+      if (isPlainObject(size) && size.autoWidth === false && size.width !== undefined && Object.keys(size).length === 2) props.add("width", size.width);
+      else props.add("size", size);
+      delete others.size;
+    }
+    return others;
+  },
+
+  Image: (rest, props, defaults, ctx) => {
+    const { src, altText, action, ...others } = rest;
+    const available = contentSlotWidth({ ...ctx.slot, containerPadding: rest.containerPadding ?? defaults.containerPadding });
+    if (src !== undefined) imageSrc(src, props, defaults.src, available, (text) => ctx.state.warn(`${ctx.where}: ${text}.`));
+    if (typeof altText === "string" && altText !== "") props.add("alt", altText);
+    else if (altText !== undefined && altText !== "") others.altText = altText;
+    // Its link (`action`) is written whole, as a web link to the URL.
+    if (action !== undefined && !deepEqual(action, defaults.action)) {
+      const link = linkOf(action, ctx);
+      if (!link) others.action = action;
+      else if (!noLink(link)) others.action = webLink(link);
+    }
+    return others;
+  },
+
+  Html: (rest, props) => {
+    const { html, ...others } = rest;
+    if (typeof html === "string") props.add("html", html);
+    else if (html !== undefined) others.html = html;
+    return others;
+  },
+
+  Menu: (rest, props, defaults, ctx) => {
+    const { menu, ...others } = rest;
+    if (menu === undefined || deepEqual(menu, defaults.menu)) return others;
+    if (!isPlainObject(menu) || !Array.isArray(menu.items)) {
+      others.menu = menu;
+      return others;
+    }
+    const links = menu.items.map((item: unknown, i: number) => (isPlainObject(item) && item.link !== undefined ? linkOf(item.link, ctx, `its item ${i + 1}'s`) : undefined));
+    const items = Object.keys(menu).length === 1 ? menuItems(menu.items, links) : undefined;
+    if (items) props.add("items", items);
+    // The items as the design has them (the editor's keys), each link a web link to its URL (one with none as it is).
+    else
+      others.menu = {
+        ...menu,
+        items: menu.items.map((item: Plain, i: number) => {
+          const link = links[i];
+          return link && !link.bare ? { ...item, link: webLink(link) } : item;
+        }),
+      };
+    return others;
+  },
+
+  Social: (rest, props, defaults) => {
+    const { icons, ...others } = rest;
+    if (icons === undefined || deepEqual(icons, defaults.icons)) return others;
+    const shorthand = isPlainObject(icons) && Object.keys(icons).every((key) => key === "iconType" || key === "icons") && Array.isArray(icons.icons) && icons.icons.every((icon: unknown) => isPlainObject(icon) && Object.keys(icon).every((key) => key === "name" || key === "url") && typeof icon.name === "string" && typeof icon.url === "string");
+    if (shorthand && ["circle", "rounded", "squared"].includes(icons.iconType)) {
+      props.add("icons", icons.icons.map((icon: Plain) => ({ name: icon.name, url: icon.url })));
+      if (icons.iconType !== "circle") props.add("iconType", icons.iconType);
+    } else props.add("icons", icons);
+    return others;
+  },
+
+  Table: (rest, props) => {
+    const { table, columns, rows, enableHeader, ...others } = rest;
+    const shorthand = tableShorthand(table, columns, rows, enableHeader);
+    if (shorthand) {
+      for (const [name, value] of shorthand.attrs) props.add(name, value);
+      if (shorthand.enableHeader !== undefined) others.enableHeader = shorthand.enableHeader;
+    } else {
+      // The counts would make an empty grid of their own (see Table): with the data, in `values`.
+      for (const [key, value] of Object.entries({ table, columns, rows })) if (value !== undefined) props.values[key] = value;
+      if (enableHeader !== undefined) others.enableHeader = enableHeader;
+    }
+    return others;
+  },
+
+  Video: (rest, props, defaults) => {
+    const { video, ...others } = rest;
+    if (video === undefined || deepEqual(video, defaults.video)) return others;
+    const url = isPlainObject(video) ? videoUrl(video) : undefined;
+    if (url) props.add("videoUrl", url);
+    // (Its id as the component renders it, what an id doesn't hold percent-encoded: see safeVideoId.)
+    else if (isPlainObject(video)) props.add("video", safeVideoId(video.videoId) === video.videoId ? video : { ...video, videoId: safeVideoId(video.videoId) });
+    else others.video = video;
+    return others;
+  },
+};
+
+/**
+ * A fixed width as a percent of the column (`available` px wide) in px, where it's a whole pixel the percent is
+ * written from (within 0.05px, as renderToJson writes a px width): Elements renders a px width exactly, a percent
+ * as the px it works out to (`31.99px`).
+ */
+function wholePixels(percent: string, available: number): number | undefined {
+  const px = (parseFloat(percent) / 100) * available;
+  const whole = Math.round(px);
+  return whole > 0 && Math.abs(px - whole) <= 0.05 && pinImageSrc<Plain>({ autoWidth: false, maxWidth: whole }, available).maxWidth === percent ? whole : undefined;
+}
+
+/** An image's `src`: a URL string, or its natural size and display width (see Image). */
+function imageSrc(src: unknown, props: Props, defaults: Plain, available: number, warn: (text: string) => void): void {
+  if (!isPlainObject(src)) {
+    if (typeof src === "string") props.add("src", src);
+    else props.values.src = src;
+    return;
+  }
+  if (deepEqual(src, defaults)) return;
+  const { autoWidth, maxWidth, ...natural } = src;
+  const urlOnly = Object.keys(natural).length === 1 && typeof natural.url === "string";
+  // Responsive (the builder's automatic width): a URL alone, or its natural size with `autoWidth` (a `width` in
+  // `src` alone would pin it).
+  if (autoWidth !== false && (maxWidth === undefined || maxWidth === "100%")) props.add("src", urlOnly ? natural.url : { ...natural, autoWidth: true });
+  // Pinned to a percent of its column: `width`, in px where that's the whole pixel it was written from.
+  else if (autoWidth === false && typeof maxWidth === "string" && /^\d+(\.\d+)?%$/.test(maxWidth) && maxWidth !== "100%") {
+    props.add("src", urlOnly ? natural.url : natural);
+    props.add("width", wholePixels(maxWidth, available) ?? maxWidth);
+  } else if (autoWidth === false && toPx(maxWidth) !== undefined) {
+    // A width in px: as it is (it comes back as the percent of its column it is, as the builder keeps a fixed width).
+    warn(`its fixed width \`${maxWidth}\` is written as the percent of its column it is`);
+    props.add("src", urlOnly ? natural.url : natural);
+    props.add("width", toPx(maxWidth));
+  } else props.add("src", { ...natural, ...(autoWidth !== undefined ? { autoWidth } : {}), ...(maxWidth !== undefined ? { maxWidth } : {}) });
+}
+
+/** Menu items as the `items` shorthand writes them (keys numbered from 1, each a link: `links`), or undefined. */
+function menuItems(items: unknown[], links: Array<Link | undefined>): Plain[] | undefined {
+  const out: Plain[] = [];
+  for (const [i, item] of items.entries()) {
+    const link = links[i];
+    if (!link || !isPlainObject(item) || item.key !== String(i + 1) || typeof item.text !== "string" || Object.keys(item).some((key) => !["key", "text", "link"].includes(key))) return undefined;
+    // An item given no `href` has a link with none (`{ target: "_blank" }`), `href: ""` one with an empty URL.
+    out.push({ text: item.text, ...(link.bare ? {} : { href: link.href }), ...(link.target !== "_blank" ? { target: link.target } : {}) });
+  }
+  return out;
+}
+
+/** A table's data as `headers` and `data` (or `columns` × `rows` of empty cells), as Table writes them, or undefined. */
+function tableShorthand(table: unknown, columns: unknown, rows: unknown, enableHeader: unknown): { attrs: Array<[string, unknown]>; enableHeader?: unknown } | undefined {
+  if (!isPlainObject(table) || Object.keys(table).some((key) => !["headers", "rows", "footers"].includes(key))) return undefined;
+  if (typeof columns !== "number" || typeof rows !== "number") return undefined;
+  const plainRow = (row: unknown): string[] | undefined =>
+    isPlainObject(row) && row.height === 0 && Object.keys(row).length === 2 && Array.isArray(row.cells) && row.cells.every((cell: unknown) => isPlainObject(cell) && cell.width === 0 && typeof cell.text === "string" && Object.keys(cell).length === 2)
+      ? row.cells.map((cell: Plain) => cell.text)
+      : undefined;
+  const headers: unknown[] = Array.isArray(table.headers) ? table.headers : [];
+  const data = (Array.isArray(table.rows) ? table.rows : []).map(plainRow);
+  if ((Array.isArray(table.footers) && table.footers.length) || headers.length > 1 || data.some((row) => !row) || rows !== data.length) return undefined;
+  const cells = data as string[][];
+  if (headers.length) {
+    const header = plainRow(headers[0]);
+    // With `headers` the header row is on, and as many columns as it has.
+    if (!header || enableHeader === false || columns !== header.length) return undefined;
+    return { attrs: [["headers", header], ["data", cells]] };
+  }
+  // An empty grid: its size.
+  if (cells.length && cells.every((row) => row.length === columns && row.every((cell) => cell === ""))) return { attrs: [["columns", columns], ["rows", rows]], enableHeader };
+  return { attrs: [["data", cells], ...(columns !== BLOCK_DEFAULTS.Table.columns ? ([["columns", columns]] as Array<[string, unknown]>) : [])], enableHeader };
+}
+
+/** A video's URL, where `videoUrl` gives exactly its values (Elements' own designs; the editor's keep the URL too). */
+function videoUrl(video: Plain): string | undefined {
+  const { type, videoId, thumbnail, loading = false, ...others } = video;
+  if (Object.keys(others).length || loading !== false || typeof videoId !== "string" || !videoId) return undefined;
+  if (type === "youtube" && thumbnail === `https://img.youtube.com/vi/${videoId}/0.jpg` && /^[\w-]{11}$/.test(videoId)) return `https://www.youtube.com/watch?v=${videoId}`;
+  if (type === "vimeo" && thumbnail === "" && /^\d+$/.test(videoId)) return `https://vimeo.com/${videoId}`;
+  return undefined;
+}
+
+/** A block Elements has no component for: an Html block of its exported HTML, or a TODO comment. */
+function withoutComponent(content: Plain, type: string, ctx: BlockContext): JsxChild {
+  const values: Plain = isPlainObject(content.values) ? content.values : {};
+  const name = type === "custom" && content.slug ? `custom "${content.slug}"` : `"${type || "untyped"}"`;
+  warnMergeTagRule(values, ctx.where, ctx.state, false);
+  const html = blockHtml(ctx.state.html, values._meta?.htmlID);
+  if (html === undefined) {
+    ctx.state.warn(`${ctx.where}: a ${name} block has no Elements component and no exported HTML, so it's left out (a TODO comment marks where it was).`);
+    return { comment: `TODO: a ${name} block (${ctx.where}) has no Elements component. Pass the design's exported HTML (\`html\` option) to keep it as an <Html> block.` };
+  }
+  ctx.state.use("Html");
+  ctx.state.warn(`${ctx.where}: a ${name} block has no Elements component, so it's kept as an <Html> block with its exported HTML (the builder opens it as HTML).`);
+  const props = new Props("Html");
+  props.add("html", html);
+  const defaults: Plain = { ...BLOCK_BASE, ...BLOCK_DEFAULTS.Html };
+  if (values.containerPadding !== undefined && values.containerPadding !== defaults.containerPadding) props.add("containerPadding", values.containerPadding);
+  placeDevice(values._override, props, defaults, "block");
+  // The builder's settings no prop sets, as every block keeps them (a display condition: written around it).
+  for (const [key, value] of Object.entries(BUILDER_ONLY)) if (key in values && !deepEqual(values[key], value)) props.values[key] = values[key];
+  return { tag: "Html", attrs: attributes(props, ctx.state.types), children: [] };
+}
diff --git a/packages/react/src/codegen/checked-values.ts b/packages/react/src/codegen/checked-values.ts
new file mode 100644
index 00000000..80bc26ba
--- /dev/null
+++ b/packages/react/src/codegen/checked-values.ts
@@ -0,0 +1,37 @@
+/**
+ * Whether a component's `values`, as the design has them, type-check as its `values` prop. That prop checks keys, at
+ * every depth, and takes any text, number, true or false in any of them (see `ValuesInput`): so they type-check where
+ * every key is one its type has, and every object or list is under a key whose type has one. Where they don't (a key a
+ * newer builder writes), the module writes them `as unknown as <Component>Props["values"]`, which always compiles.
+ * The keys come from the types themselves (values-shapes.ts, which codegen's type-check test keeps current).
+ */
+import { VALUES_SHAPES, type Shape } from "./values-shapes";
+import { isPlainObject, type Plain } from "./values";
+
+const own = (object: object, key: string) => Object.prototype.hasOwnProperty.call(object, key);
+
+/** Whether `value` fits a key of shape `shape`. */
+function fits(value: unknown, shape: Shape): boolean {
+  if (shape === 1 || value === null || typeof value !== "object") return true;
+  if (Array.isArray(value)) return Array.isArray(shape) && value.every((item) => fits(item, shape[0]));
+  return isPlainObject(value) && shape !== 0 && !Array.isArray(shape) && keysFit(value, shape);
+}
+
+const keysFit = (values: Plain, shape: { [key: string]: Shape }) => Object.entries(values).every(([key, value]) => value === undefined || (own(shape, key) && fits(value, shape[key])));
+
+/** Device settings (`_override`): the component's own keys, for a phone or a desktop, and whether it's hidden there. */
+function overrideFits(override: unknown, shape: { [key: string]: Shape }): boolean {
+  if (override === null || typeof override !== "object") return true;
+  if (!isPlainObject(override)) return false;
+  const devices: Record<string, { [key: string]: Shape }> = { mobile: { ...shape, hideMobile: 0 }, desktop: { ...shape, hideDesktop: 0 } };
+  return Object.entries(override).every(([device, settings]) => settings === undefined || (own(devices, device) && fits(settings, devices[device])));
+}
+
+/** Whether `values` type-check as `component`'s `values` prop written as they are. */
+export function valuesTypeCheck(component: string, values: Plain): boolean {
+  const shape = own(VALUES_SHAPES, component) ? VALUES_SHAPES[component] : 0;
+  if (shape === 1) return true;
+  if (shape === 0 || Array.isArray(shape)) return false;
+  const { _override, ...rest } = values;
+  return keysFit(rest, shape) && overrideFits(_override, shape);
+}
diff --git a/packages/react/src/codegen/codegen.test.tsx b/packages/react/src/codegen/codegen.test.tsx
new file mode 100644
index 00000000..fa0b15cb
--- /dev/null
+++ b/packages/react/src/codegen/codegen.test.tsx
@@ -0,0 +1,424 @@
+/**
+ * designToElements, one setting or block at a time (see __fixtures__/designs.ts): the code it writes, what it says,
+ * and that the code renders back to the design.
+ */
+import { describe, expect, it, vi } from "vitest";
+import * as prettier from "prettier";
+import { DESIGNS, design } from "./__fixtures__/designs";
+import { designToElements } from "./design-to-elements";
+import { inTime, within } from "../test-timing";
+import { formatElements } from "./format";
+import { BLOCK_DEFAULTS } from "./defaults";
+import React from "react";
+import { compareDesigns } from "./compare";
+import { evaluate, roundTrip } from "./test-harness";
+import * as Elements from "../index";
+import { UNLAYER_CONFIG_KEY } from "../utils/create-component";
+import guide from "../../docs/codegen.md?raw";
+import { Font } from "../font/index";
+import { BodyExporters } from "@unlayer/exporters";
+import { editorLink } from "./links";
+import type { Plain } from "./values";
+
+const quiet = <T,>(run: () => T): T => {
+  const spies = (["warn", "error"] as const).map((level) => vi.spyOn(console, level).mockImplementation(() => {}));
+  try {
+    return run();
+  } finally {
+    spies.forEach((spy) => spy.mockRestore());
+  }
+};
+
+/** Code on one line, as written inline (the snippets don't depend on where the printer breaks lines). */
+const inline = (code: string) =>
+  code
+    .replace(/\s+/g, " ")
+    .replace(/,\s*([}\]])/g, " $1")
+    .replace(/\[\s+/g, "[")
+    .replace(/\s+\]/g, "]")
+    .replace(/\s+>/g, ">");
+
+describe("designToElements", () => {
+  it.each(Object.entries(DESIGNS))("%s", (_, c) => {
+    // The code renders without a word from Elements (no prop it ignores, no padding it moves).
+    const said = (["warn", "error"] as const).map((level) => vi.spyOn(console, level));
+    const result = roundTrip(c.design, c.options);
+    for (const spy of said) {
+      expect(spy.mock.calls).toEqual([]);
+      spy.mockRestore();
+    }
+    for (const snippet of c.code) expect(inline(result.code)).toContain(inline(snippet));
+    for (const snippet of c.absent ?? []) expect(inline(result.code)).not.toContain(inline(snippet));
+    for (const warning of c.warnings ?? []) expect(result.warnings).toContainEqual(expect.stringMatching(warning));
+    expect(result.differences.map((d) => d.path)).toEqual(c.losses ?? []);
+  });
+
+  it("writes a whole module: imports (a props type only where `values` is written as it) and the named component", () => {
+    const { code } = designToElements(design([{ type: "text", values: { text: "Hi" } }]), { componentName: "welcome-email" });
+    expect(code).toBe(
+      [
+        'import {',
+        "  Email,",
+        "  Row,",
+        "  Column,",
+        "  ColumnLayouts,",
+        "  Paragraph,",
+        '} from "@unlayer/react-elements";',
+        "",
+        "export default function WelcomeEmail() {",
+        "  return (",
+        "    <Email>",
+        "      <Row layout={ColumnLayouts.OneColumn}>",
+        "        <Column>",
+        '          <Paragraph html="Hi" />',
+        "        </Column>",
+        "      </Row>",
+        "    </Email>",
+        "  );",
+        "}",
+        "",
+      ].join("\n")
+    );
+  });
+
+  it("keeps what a design holds as data: no text, key, type or name of it becomes code", () => {
+    const hostile = '"}/> </Email>; globalThis.hacked = 1; <x a={"`${1}` \\ */ {{x}} \u2028 \n & \'';
+    const source = design(
+      [
+        { type: "text", values: { text: hostile, [`bad"key`]: hostile, color: hostile } },
+        { type: "heading", values: { text: hostile, anchor: hostile } },
+        { type: "button", values: { text: hostile, href: { name: "web", values: { href: hostile, target: hostile } } } },
+        { type: `x */ globalThis.hacked = 2; /*`, values: {} },
+        { type: "custom", slug: hostile, values: {} },
+      ],
+      { body: { preheaderText: hostile, fontFamily: { label: hostile, value: hostile, url: hostile } } }
+    );
+    const result = quiet(() => roundTrip(source, { componentName: hostile }));
+    expect((globalThis as Record<string, unknown>).hacked).toBeUndefined();
+    expect(result.code).toContain("export default function EmailGlobalThisHacked1XA1X()");
+    expect(result.code).toContain('{/* TODO: a "x * / globalThis.hacked = 2; /*" block');
+    // What a block without a component held is a TODO; everything else comes back as it was.
+    expect(result.differences.map((d) => d.path)).toEqual(["body.rows[0].columns[0].contents"]);
+  });
+
+  it("names the component apart from what it imports", () => {
+    expect(designToElements(design([]), { componentName: "Email" }).code).toContain("export default function EmailTemplate()");
+    expect(designToElements(design([]), { componentName: "42" }).code).toContain("export default function Template()");
+  });
+
+  it("takes the design's JSON text, and says what isn't a design", () => {
+    expect(designToElements(JSON.stringify(design([]))).code).toContain("<Email>");
+    expect(() => designToElements({ rows: [] })).toThrow(/expected an Unlayer design/);
+    expect(() => designToElements("{")).toThrow(/isn't valid JSON/);
+  });
+
+  it("takes the root from the displayMode renderToJson writes, which stays out of its props", () => {
+    const { Email, Page, Document, Row, Column, Paragraph } = Elements;
+    for (const [Root, name, mode] of [[Page, "Page", "web"], [Document, "Document", "document"], [Email, "Email", "email"]] as const) {
+      const design = Elements.renderToJson(<Root><Row><Column><Paragraph>Hi</Paragraph></Column></Row></Root>) as any;
+      expect(design.body.values.displayMode).toBe(mode);
+      const result = roundTrip(design);
+      expect(result.code).toContain(`<${name}>`);
+      expect(result.code).not.toContain("displayMode");
+      expect((result.design as any).body.values.displayMode).toBe(mode);
+      expect(result.differences).toEqual([]);
+    }
+    // A design without one (the editor's own saves) is compared without it.
+    const { displayMode: _mode, ...values } = (Elements.renderToJson(<Page><Row><Column><Paragraph>Hi</Paragraph></Column></Row></Page>) as any).body.values;
+    expect(compareDesigns({ body: { rows: [], values } }, { body: { rows: [], values: { ...values, displayMode: "email" } } })).toEqual([]);
+  });
+
+  it("writes an empty design as an empty root", () => {
+    const { code } = designToElements({ body: { rows: [], values: {} } }, { displayMode: "web" });
+    expect(code).toContain("return <Page />;");
+  });
+
+  it("names the row and column in every warning", () => {
+    const { warnings } = designToElements(
+      design([], { columns: [{ values: {}, contents: [{ type: "form", values: {} }] }, { values: {}, contents: [{ type: "carousel", values: {} }] }] })
+    );
+    expect(warnings).toEqual([expect.stringMatching(/^Row 1, column 1, block 1: a "form" block/), expect.stringMatching(/^Row 1, column 2, block 1: a "carousel" block/)]);
+  });
+
+  it("keeps a display condition, which the code's HTML writes around its row or block as the builder does", () => {
+    const condition = { type: "vip", label: "VIP only", description: "", before: "{% if customer.vip %}", after: "{% endif %}" };
+    const source = design([{ type: "text", values: { text: "<p>VIP discount</p>", displayCondition: condition } }], { row: { displayCondition: { ...condition, before: "{% if customer.vip_row %}" } } });
+    const { code, warnings } = designToElements(source);
+    expect(warnings).toEqual([]);
+    const html = Elements.renderToHtml(React.createElement(evaluate(code)));
+    const [row, block, text] = ["{% if customer.vip_row %}", "{% if customer.vip %}", "VIP discount"].map((part) => html.indexOf(part));
+    expect(row).toBeGreaterThan(-1);
+    expect(block).toBeGreaterThan(row);
+    expect(text).toBeGreaterThan(block);
+  });
+
+  it("keeps a block it writes as an <Html> block's display condition and anchor, and says where its merge tag rule isn't applied", () => {
+    const condition = { type: "vip", label: "VIP only", description: "", before: "{% if customer.vip %}", after: "{% endif %}" };
+    const values = { _meta: { htmlID: "u_content_timer_1" }, displayCondition: condition, anchor: "sale", mergeTagGroup: "products", mergeTagRule: "repeat" };
+    const html = '<table id="u_content_timer_1"><tbody><tr><td><div class="v-container-padding-padding"><div class="countdown">VIP SALE ENDS Friday</div></div></td></tr></tbody></table>';
+    const { code, warnings } = designToElements(design([{ type: "timer", values }]), { html });
+    expect(warnings).toEqual([expect.stringMatching(/block 1: its merge tag rule `products\.repeat` isn't applied/), expect.stringMatching(/block 1: a "timer" block has no Elements component, so it's kept as an <Html> block/)]);
+    expect(code).toContain('anchor: "sale"');
+    const rendered = Elements.renderToHtml(React.createElement(evaluate(code)));
+    expect(rendered.indexOf("{% if customer.vip %}")).toBeGreaterThan(-1);
+    expect(rendered.indexOf("VIP SALE")).toBeGreaterThan(rendered.indexOf("{% if customer.vip %}"));
+  });
+
+  it("says where a row's or block's merge tag rule isn't applied in Elements' HTML", () => {
+    const rule = { mergeTagGroup: "products", mergeTagRule: "repeat" };
+    const { warnings } = designToElements(design([{ type: "text", values: { text: "<p>{{name}}</p>", ...rule } }, { type: "table", values: rule }], { row: rule }));
+    expect(warnings).toEqual([
+      expect.stringMatching(/^Row 1: its merge tag rule `products\.repeat` isn't applied/),
+      expect.stringMatching(/^Row 1, column 1, block 1: its merge tag rule `products\.repeat` isn't applied/),
+      expect.stringMatching(/^Row 1, column 1, block 2: its rows repeat by the merge tag rule `products\.repeat` only where the render's `mergeTagState`/),
+    ]);
+  });
+
+  it("is pure: it imports nothing that renders or needs Node", () => {
+    const modules = import.meta.glob<string>(["./*.ts", "!./*.test.ts", "!./test-harness.ts"], { query: "?raw", import: "default", eager: true });
+    expect(Object.keys(modules)).toContain("./design-to-elements.ts");
+    for (const [file, source] of Object.entries(modules)) {
+      for (const [, from] of source.matchAll(/^(?:import|export)\s[^;=(]*?\sfrom "([^"]+)"/gm)) expect(from, file).toMatch(/^(\.\/|\.\.\/utils\/(container-defaults|image-sizing)$|\.\.\/utils\/font-design$|@unlayer\/exporters$|@unlayer-internal\/shared-elements$)/);
+    }
+  });
+
+  it("keeps the defaults it compares with equal to the components' own", () => {
+    const components = Elements as unknown as Record<string, Record<string, { defaultValues: unknown }>>;
+    for (const [name, defaults] of Object.entries(BLOCK_DEFAULTS)) expect(components[name][UNLAYER_CONFIG_KEY].defaultValues, name).toEqual(defaults);
+  });
+
+  it("writes the code as prettier formats it", async () => {
+    for (const c of Object.values(DESIGNS)) {
+      const { code } = quiet(() => designToElements(c.design, c.options));
+      expect(await prettier.format(code, { parser: "typescript" })).toBe(code);
+    }
+  });
+
+  it("writes code in time linear in the design's size: a large table, many menu items, values nested deep", async () => {
+    // The printer took the trailing spaces off all the code written so far at each line break, so the time grew with
+    // the code's size squared, and with the indentation of values nested deep faster: an editor's 100×100 table took
+    // 34 s, 1,000 menu items 13 s, a value 400 deep 47 s (and was 338 KB of code).
+    const cells = (n: number, text: string) => Array.from({ length: n }, (_, i) => ({ text: `${text}${i}` }));
+    const deep = (depth: number) => Array.from({ length: depth }).reduce<Plain>((value) => ({ a: value }), { x: 1 });
+    const nested = (depth: number) => design([{ type: "text", values: { text: "<p>x</p>", custom: deep(depth) } }]);
+    const shapes: [string, Plain][] = [
+      ["table 60×60", design([{ type: "table", values: { table: { headers: [{ cells: cells(60, "h") }], rows: Array.from({ length: 60 }, () => ({ cells: cells(60, "c") })) } } }])],
+      ["menu of 1,000 items", design([{ type: "menu", values: { menu: { items: Array.from({ length: 1000 }, (_, i) => ({ key: `k${i}`, text: `t${i}`, link: { name: "web", values: { href: `https://e.test/${i}` } } })) } } }])],
+      ["values 200 deep", nested(200)],
+      // A px length checked digit by digit every way it could split them: 50,000 digits took a second.
+      ["a padding of 100,000 digits", design([{ type: "text", values: { text: "<p>x</p>", containerPadding: `${"1".repeat(102400)}x` } }])],
+      // A `mailto:` link's empty fields looked for from inside each run of letters: 100,000 took seconds.
+      ["a mailto: link of 100,000 letters", design([{ type: "button", values: { text: "Write", href: { name: "web", values: { href: `mailto:${"a".repeat(102400)}` } } } }])],
+    ];
+    for (const [shape, source] of shapes) expect([shape, inTime(await within(1000, () => quiet(() => designToElements(source))))]).toEqual([shape, true]);
+    // Deeper than 16, a value is written as its JSON, which gives it back the same: as prettier writes it.
+    const result = quiet(() => roundTrip(nested(200)));
+    expect(result.differences).toEqual([]);
+    expect(result.code).toContain(`JSON.parse(\n`);
+    expect(result.code.length).toBeLessThan(5000);
+    expect(await prettier.format(result.code, { parser: "typescript" })).toBe(result.code);
+    // Up to it, written out.
+    expect(quiet(() => designToElements(nested(14))).code).not.toContain("JSON.parse");
+  });
+
+  it("formats with prettier, and the formatted code renders the same design", async () => {
+    const source = design([{ type: "text", values: { text: "A long paragraph of plain words that a narrower print width wraps onto more lines than one" } }]);
+    const { code } = designToElements(source);
+    const narrow = await formatElements(code, { printWidth: 40 });
+    expect(narrow).not.toBe(code);
+    expect(compareDesigns(source, Elements.renderToJson(React.createElement(evaluate(narrow))) as never)).toEqual([]);
+  });
+});
+
+describe("Elements templates come back as they render", () => {
+  const backAgain = (template: React.ReactElement) => {
+    const design = Elements.renderToJson(template) as never;
+    const { code } = designToElements(design);
+    const Back = evaluate(code);
+    return { code, design, back: Elements.renderToJson(React.createElement(Back)) as never, html: Elements.renderToHtml(React.createElement(Back)) };
+  };
+
+  it("keeps a web font declared without `default`: its <Font>, and its URL on the fonts of its family", () => {
+    const url = "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500&display=swap";
+    const serif = "Fraunces, Georgia, 'Times New Roman', serif";
+    const template = (
+      <Elements.Email>
+        <Font family="Fraunces" url={url} fallback="Georgia, serif" />
+        <Elements.Row>
+          <Elements.Column>
+            <Elements.Heading fontFamily={serif}>Welcome</Elements.Heading>
+            <Elements.Paragraph fontFamily="Georgia, serif" html="Hello" />
+          </Elements.Column>
+        </Elements.Row>
+      </Elements.Email>
+    );
+    const { code, design, back, html } = backAgain(template);
+    expect(inline(code)).toContain(inline(`<Font family="Fraunces" url={ "${url}" } />`));
+    // The heading's font without the URL its <Font> gives back.
+    expect(inline(code)).toContain(inline(`fontFamily={{ label: "${serif}", value: "${serif}" }}`));
+    expect(compareDesigns(design, back)).toEqual([]);
+    expect(html).toContain(url.replace(/&/g, "&amp;"));
+    expect(html).toBe(Elements.renderToHtml(template));
+  });
+
+  it("writes an image's px width as the whole pixel its percent was written from", () => {
+    const template = (
+      <Elements.Email>
+        <Elements.Row>
+          <Elements.Column padding="0 24px">
+            <Elements.Image src="https://example.com/logo.png" width={32} containerPadding="0" />
+            <Elements.Image src="https://example.com/mark.png" width={92} />
+          </Elements.Column>
+        </Elements.Row>
+      </Elements.Email>
+    );
+    const { code, design, back, html } = backAgain(template);
+    expect(code).toContain("width={32}");
+    expect(code).toContain("width={92}");
+    expect(compareDesigns(design, back)).toEqual([]);
+    expect(html).toContain("max-width: 32px");
+    expect(html).toContain("max-width: 92px");
+  });
+
+  it("writes a menu item without a link without one: its design's link has no URL", () => {
+    const template = (
+      <Elements.Email>
+        <Elements.Row>
+          <Elements.Column>
+            <Elements.Menu items={[{ text: "Terms", href: "https://example.com/terms" }, { text: "No link" }]} />
+          </Elements.Column>
+        </Elements.Row>
+      </Elements.Email>
+    );
+    const { code, design, back, html } = backAgain(template);
+    expect(inline(code)).toContain(inline(`{ text: "No link" }`));
+    const items = (d: Plain) => (d as any).body.rows[0].columns[0].contents[0].values.menu.items;
+    expect(items(design)[1].link).toEqual({ name: "web", values: { target: "_blank" } });
+    expect(items(back)).toEqual(items(design));
+    expect(html).toBe(Elements.renderToHtml(template));
+  });
+});
+
+describe("links: the URL the editor exports for each", () => {
+  const EMAIL = "mailto:{{email}}?subject={{subject}}&body={{body}}";
+  const WEB = { href: "{{href}}", target: "{{target}}" };
+  /** Links as the editor saves them: an action, its values and the templates they fill in. */
+  const SAVED: Record<string, Plain> = {
+    "an email": { name: "email", values: { href: "", target: "_blank", email: "support@example.com", subject: "Help & questions?", body: "Hi,\nI have a question" }, attrs: { href: EMAIL } },
+    "an email without a subject": { name: "email", values: { email: "hi@example.com", subject: "", body: "Hello" }, attrs: { href: EMAIL } },
+    "an email without a subject or body": { name: "email", values: { email: "hi@example.com", subject: "", body: "" }, attrs: { href: EMAIL } },
+    // (Where the address is shorter than its placeholder, the editor doesn't encode the subject.)
+    "an email without an address": { name: "email", values: { email: "", subject: "Hi there", body: "" }, attrs: { href: EMAIL } },
+    "an email with a merge tag and markup in its subject": { name: "email", values: { email: "hi@example.com", subject: "Hi {{first_name}} <3", body: "" }, attrs: { href: EMAIL } },
+    "a phone call": { name: "phone", values: { href: "", target: "_blank", phone: "+14154154151" }, attrs: { href: "tel:{{phone}}" } },
+    "a text message": { name: "sms", values: { phone: "+14154154150" }, attrs: { href: "sms:{{phone}}" } },
+    "a web page": { name: "web", values: { href: "https://example.com/a b?q=1&r=2", target: "_self" }, attrs: WEB },
+    "a web page from a list of options": { name: "web", values: { href: { label: "Home", value: "https://example.com" }, target: "_blank" }, attrs: WEB },
+    "the empty web link": { name: "web", values: { href: "", target: "_blank" }, attrs: WEB },
+    "a page section": { name: "anchor", values: { href: "pricing" }, attrs: { href: "#{{href}}", target: "_self" } },
+    "a web page with a query its link type adds": { name: "web", values: { href: "https://example.com/", target: "_blank", source: "news letter" }, attrs: { ...WEB, "+href": "?utm_source={{source}}" } },
+  };
+  /** A link with attributes beside its URL and target, which the components' links don't take. */
+  const ATTRIBUTES = { name: "web", values: { href: "https://example.com/", target: "_blank", title: "Our site" }, attrs: { ...WEB, rel: "nofollow", title: "{{title}}", "x-track": "cta" } };
+  /** The pinned exporters' URL for a link and its target: their popup's close button is a link they fill in. */
+  const exported = (link: unknown) => {
+    const tag = /<a [^>]*>/.exec(BodyExporters.popup!("", { popupCloseButton_action: link, _meta: { htmlID: "u_body" } } as never, undefined as never))![0];
+    const attr = (name: string) => (new RegExp(` ${name}="([^"]*)"`).exec(tag)?.[1] ?? "").replace(/&quot;/g, '"').replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+    return { url: attr("href"), target: attr("target") };
+  };
+
+  it.each(Object.entries(SAVED))("%s: as the pinned exporters fill it in", (_, link) => {
+    expect(editorLink(link)).toMatchObject(exported(link));
+  });
+
+  it("fills a value in as it is, its own placeholders as written: values that nest them give a URL their size calls for", () => {
+    // The exporters fill each value's placeholder in the URL filled in so far, so a value's own `{{…}}` was filled in
+    // too: ten of the next one's in each value, eight deep, made a design under 1 KB 10 MB of code, or ran out of memory.
+    const values: Plain = { v8: "x" };
+    for (let i = 0; i < 8; i++) values[`v${i}`] = `{{v${i + 1}}}`.repeat(10);
+    expect(editorLink({ name: "custom", attrs: { href: "https://x.test/{{v0}}" }, values })).toMatchObject({ url: `https://x.test/${"{{v1}}".repeat(10)}` });
+  });
+
+  it("reads a link without its templates (a design the editor didn't save) as its link editor does: with its action's", () => {
+    expect(editorLink({ name: "email", values: { email: "support@example.com", subject: "Help" } })).toEqual({ url: "mailto:support@example.com?subject=Help", target: "_blank", kept: true });
+    expect(editorLink({ name: "phone", values: { phone: "+15550100" } })).toEqual({ url: "tel:+15550100", target: "_blank", kept: true });
+    expect(editorLink({ name: "web", values: { href: "https://example.com" } })).toEqual({ url: "https://example.com", target: "_blank", kept: true });
+    expect(editorLink("https://example.com")).toEqual({ url: "https://example.com", target: "_blank", kept: true });
+  });
+
+  it("says what a URL can't hold, and which actions the builder doesn't read back from their URL", () => {
+    expect(editorLink({ name: "close_popup", attrs: { onClick: "closePopup()" }, values: {} })).toEqual({ lost: ["onClick"] });
+    expect(editorLink({ name: "web", values: { href: "https://example.com", target: "_blank", class: "cta" }, attrs: { ...WEB, "data-id": "{{id}}" } })).toEqual({ lost: ["class", "data-id"] });
+    expect(editorLink(SAVED["a page section"])).toMatchObject({ kept: false });
+    // An email link of the embedder's, which the builder reads back as its own (with a subject and body).
+    expect(editorLink({ name: "email", values: { email: "a@b.com", cc: "c@d.com" }, attrs: { href: "mailto:{{email}}?cc={{cc}}" } })).toEqual({ url: "mailto:a@b.com?cc=c%40d.com", target: "_blank", kept: false });
+    // A web link is one whatever its templates.
+    expect(editorLink(SAVED["a web page with a query its link type adds"])).toMatchObject({ kept: true });
+    // Any other attribute: the components' links are a URL and where it opens.
+    expect(editorLink(ATTRIBUTES)).toEqual({ lost: ["rel", "title", "x-track"] });
+    // One the exporters fill in empty isn't there.
+    expect(editorLink({ name: "web", values: { href: "https://example.com", target: "_blank", title: "" }, attrs: { ...WEB, title: "{{title}}" } })).toMatchObject({ url: "https://example.com", kept: true });
+  });
+
+  it("writes a link with attributes the components don't take as the design has it, and compares it with them", () => {
+    const link = ATTRIBUTES;
+    const source = design([
+      { type: "button", values: { text: "Go", href: link } },
+      { type: "image", values: { src: { url: "https://example.com/a.png" }, action: link } },
+      { type: "menu", values: { menu: { items: [{ key: "1606923979749", text: "Home", link }] } } },
+    ]);
+    const { code, warnings, differences } = roundTrip(source);
+    expect(code.match(/rel: "nofollow"/g)).toHaveLength(3);
+    // Each block's link, which a URL can't hold (and the Image's action, as Elements writes a web link, without its templates).
+    expect(warnings.filter((warning) => warning.includes("link has `rel` and `title` and `x-track`, which a URL can't hold"))).toHaveLength(3);
+    expect(differences).toEqual([]);
+    // The URL alone (what the code was before) is another link: what it lacks shows.
+    const button = (href: unknown) => design([{ type: "button", values: { text: "Go", href } }]);
+    const where = "body.rows[0].columns[0].contents[0].values.href";
+    expect(compareDesigns(button(link), button({ name: "web", values: { href: "https://example.com/", target: "_blank" } })).map((d) => d.path)).toEqual([`${where}.values.title`, `${where}.attrs`]);
+  });
+
+  it("keeps a menu item's web link without a URL as the design has it, with no URL", () => {
+    const bare = { name: "web", values: { target: "_self" } };
+    // Written with the `items` shorthand, and as the design has them (the editor's item keys).
+    const source = design([
+      { type: "menu", values: { menu: { items: [{ key: "1", text: "Home", link: bare }] } } },
+      { type: "menu", values: { menu: { items: [{ key: "1606923979749", text: "Home", link: bare }] } } },
+    ]);
+    const { code, warnings, design: back } = roundTrip(source);
+    expect(inline(code)).toContain(inline(`items={[{ text: "Home", target: "_self" }]}`));
+    expect(code).not.toContain("href");
+    expect(warnings).toEqual([]);
+    const links = (d: Plain) => (d as any).body.rows[0].columns[0].contents.map((block: any) => JSON.stringify(block.values.menu.items[0].link));
+    expect(links(back)).toEqual(links(source));
+  });
+
+  it("writes them in the code, whose HTML links where the editor's does", () => {
+    const keep = ["an email", "an email without a subject", "a phone call", "a text message", "a web page"];
+    const source = design([
+      ...keep.map((name) => ({ type: "button", values: { text: name, href: SAVED[name] } })),
+      { type: "image", values: { src: { url: "https://example.com/a.png" }, action: SAVED["an email without a subject or body"] } },
+      { type: "menu", values: { menu: { items: [{ key: "1606923979749", text: "Call", link: SAVED["a phone call"] }, { key: "1606923979750", text: "Write", link: SAVED["an email"] }] } } },
+    ]);
+    const { code, warnings, differences } = roundTrip(source);
+    expect(code).not.toMatch(/\{\{(href|target|email|subject|body|phone)\}\}/);
+    expect(warnings).toEqual([]);
+    expect(differences).toEqual([]);
+    const html = Elements.renderToHtml(React.createElement(evaluate(code)));
+    const hrefs = [...html.matchAll(/<a [^>]*?href="([^"]*)"/g)].map(([, href]) => href.replace(/&amp;/g, "&"));
+    for (const name of [...keep, "an email without a subject or body"]) expect(hrefs, name).toContain(exported(SAVED[name]).url);
+    expect(hrefs.filter((href) => href === exported(SAVED["a phone call"]).url)).toHaveLength(2);
+    expect(hrefs.filter((href) => href === exported(SAVED["an email"]).url)).toHaveLength(2);
+  });
+});
+
+describe("the codegen guide", () => {
+  it("shows the code its example design gives", () => {
+    const example = guide.slice(guide.indexOf("## What the code looks like"));
+    const json = /```json\n([\s\S]*?)```/.exec(example)![1];
+    const tsx = /```tsx\n([\s\S]*?)```/.exec(example)![1];
+    expect(designToElements(JSON.parse(json), { componentName: "OrderShipped" }).code).toBe(tsx);
+    // And it comes back as the design.
+    expect(roundTrip(JSON.parse(json)).differences).toEqual([]);
+  });
+});
diff --git a/packages/react/src/codegen/compare.test.ts b/packages/react/src/codegen/compare.test.ts
new file mode 100644
index 00000000..654bd8c8
--- /dev/null
+++ b/packages/react/src/codegen/compare.test.ts
@@ -0,0 +1,51 @@
+/** The round trip's comparison: what it finds, and what it leaves aside (see compare.ts). */
+import { describe, expect, it } from "vitest";
+import { design } from "./__fixtures__/designs";
+import { compareDesigns, normalizeDesign } from "./compare";
+
+const paths = (a: Record<string, any>, b: Record<string, any>) => compareDesigns(a, b).map((d) => d.path);
+const text = (values: Record<string, unknown>, body: Record<string, unknown> = {}) => design([{ type: "text", values: { text: "Hi", ...values } }], { body });
+
+describe("compareDesigns", () => {
+  it("finds a value that changed, one that's gone and a block that's gone", () => {
+    expect(paths(text({ color: "#111111" }), text({ color: "#222222" }))).toEqual(["body.rows[0].columns[0].contents[0].values.color"]);
+    expect(paths(text({ fontSize: "20px" }), text({}))).toEqual(["body.rows[0].columns[0].contents[0].values.fontSize"]);
+    expect(paths(design([{ type: "text", values: {} }, { type: "divider", values: {} }]), design([{ type: "text", values: {} }]))).toEqual(["body.rows[0].columns[0].contents"]);
+    expect(paths(design([], { row: { padding: "12px" } }), design([]))).toEqual(["body.rows[0].values.padding"]);
+    expect(paths(design([{ type: "custom", slug: "a", values: {} }]), design([{ type: "html", values: {} }]))).toEqual(["body.rows[0].columns[0].contents[0].type", "body.rows[0].columns[0].contents[0].slug"]);
+  });
+
+  it("leaves aside ids, numbering and values at the builder's defaults", () => {
+    const editor = { ...text({ containerPadding: "10px", anchor: "", hideDesktop: false, _meta: { htmlID: "u_content_text_7", htmlClassNames: "u_content_text" } }), counters: { u_row: 9 }, schemaVersion: 12 };
+    editor.body.rows[0].id = "abc";
+    expect(paths(editor, text({}))).toEqual([]);
+  });
+
+  it("takes a text block's missing color as the body's", () => {
+    expect(paths(text({}, { textColor: "#333333" }), text({ color: "#333333" }, { textColor: "#333333" }))).toEqual([]);
+    expect(paths(text({}, { textColor: "#333333" }), text({ color: "#000000" }, { textColor: "#333333" }))).toEqual(["body.rows[0].columns[0].contents[0].values.color"]);
+  });
+
+  it("reads colors, links and paddings written another way as the same", () => {
+    expect(paths(text({ color: "rgb(0, 0, 0)" }), text({ color: "#000000" }))).toEqual([]);
+    const button = (href: unknown, padding: string) => design([{ type: "button", values: { href, padding } }]);
+    expect(paths(button("https://example.com", "8px 8px"), button({ name: "web", values: { href: "https://example.com", target: "_blank" } }, "8px"))).toEqual([]);
+  });
+
+  it("reads a bare zero in a px length as 0px, and only there", () => {
+    const button = (values: Record<string, unknown>) => design([{ type: "button", values }]);
+    expect(paths(button({ borderRadius: "0", padding: "0 0 12px", border: { borderTopWidth: "0" } }), button({ borderRadius: "0px", padding: "0px 0px 12px", border: { borderTopWidth: "0px" } }))).toEqual([]);
+    expect(paths(button({ borderRadius: "0 1em" }), button({ borderRadius: "0px 1em" }))).toEqual(["body.rows[0].columns[0].contents[0].values.borderRadius"]);
+  });
+
+  it("reads the editor's Lexical paragraph as a text block with its HTML, and leaves textJson beside text aside", () => {
+    const lexical = design([{ type: "paragraph", values: { textJson: '{"root":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","text":"A"}]}]}}' } }]);
+    expect(normalizeDesign(lexical).body.rows[0].columns[0].contents[0]).toEqual({ type: "text", values: { color: "#000000", text: '<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">A</p>' } });
+    expect(paths(text({ textJson: "{}" }), text({}))).toEqual([]);
+  });
+
+  it("reads device settings that are off as missing, and a row's top-level noStackMobile as its phone setting", () => {
+    expect(paths(text({ _override: { mobile: { hideMobile: false }, desktop: {} } }), text({}))).toEqual([]);
+    expect(paths(design([], { row: { noStackMobile: true } }), design([], { row: { _override: { mobile: { noStackMobile: true } } } }))).toEqual([]);
+  });
+});
diff --git a/packages/react/src/codegen/compare.ts b/packages/react/src/codegen/compare.ts
new file mode 100644
index 00000000..b83cc40c
--- /dev/null
+++ b/packages/react/src/codegen/compare.ts
@@ -0,0 +1,190 @@
+/**
+ * Two designs compared as the builder shows them: what a round trip (design → Elements code → `renderToJson`) has
+ * to keep. What the comparison leaves aside, and why:
+ *
+ * - `counters`, `schemaVersion`, node `id`s and `_meta.htmlID`/`htmlClassNames`: numbering, which the editor
+ *   (and renderToJson) assigns.
+ * - The body's `displayMode`: the root's (an Email is an email), which renderToJson writes and a saved design may
+ *   not have.
+ * - A value missing and the same value at the builder's default: the builder fills defaults in (an image without
+ *   `autoWidth` is sized automatically; a video block without a video has none).
+ * - A text block's missing color and the body's text color: that's the color the builder shows it in.
+ * - `textJson` where a block has `text` (what the builder renders and exports), and the editor's Lexical
+ *   `paragraph` block as a `text` block with its HTML.
+ * - Colors and font stacks written another way (`rgb(0, 0, 0)` and `#000000`), links in their other shape (a URL
+ *   string and `{ name: "web", values: { href } }`; an email, phone or text message action and a web link to the URL
+ *   it exports, which the builder reads back as that action), paddings written shorter (`0px 0px` and `0px`), and a
+ *   bare zero in a px length (`0 0 12px` and `0px 0px 12px`: renderToJson writes `0px`, as the design's schema
+ *   types it).
+ * - Device settings that are off (`hideMobile: false`) and empty ones, and a row's `noStackMobile` at the top of its
+ *   values (the exporters read it from its phone settings).
+ * - A font without its family's web font URL, where another font of the family has it: the builder loads the web
+ *   font for the family, and a <Font> writes its URL on each.
+ */
+import { generateHtmlFromTextJson, mergeValues, normalizeCssValues, pxZeros } from "@unlayer-internal/shared-elements";
+import { EDITOR_BODY_DEFAULTS, EDITOR_COLUMN_DEFAULTS, EDITOR_ROW_DEFAULTS, editorBlockDefaults } from "./defaults";
+import { deviceSettings } from "./device";
+import { editorLink } from "./links";
+import { deepEqual, isPlainObject, type Plain } from "./values";
+
+export interface DesignDifference {
+  /** Where, as `body.rows[0].columns[1].contents[2].values.color`. */
+  path: string;
+  /** The value in the first design and in the second (`undefined`: not there). */
+  expected: unknown;
+  actual: unknown;
+}
+
+const TEXT_TYPES = new Set(["text", "paragraph", "heading"]);
+
+/**
+ * A link as the builder shows it: the URL it exports and where it opens, where the builder reads it back from them
+ * (an email action and a web link to its `mailto:` URL are one, see links.ts); else in the shape the components keep
+ * (see `mapSemanticProps`).
+ */
+function link(value: unknown): unknown {
+  const exported = editorLink(value);
+  if (exported && !("lost" in exported) && exported.kept) return { name: "web", values: { href: exported.url, target: exported.target } };
+  if (!isPlainObject(value) || !("name" in value) || !isPlainObject(value.attrs)) return value;
+  const { href, target, ...custom } = value.attrs;
+  if (href === undefined && target === undefined) return value;
+  const values = { ...(isPlainObject(value.values) ? value.values : {}) };
+  if (!values.href && href !== undefined) values.href = href;
+  if (!values.target && target !== undefined) values.target = target;
+  const out: Plain = { ...value, values };
+  if (Object.keys(custom).length) out.attrs = custom;
+  else delete out.attrs;
+  return out;
+}
+
+/** A box's sides, written as short as CSS allows (`10px 10px` is `10px`). */
+function box(value: unknown): unknown {
+  if (typeof value !== "string") return value;
+  const parts = value.trim().split(/\s+/).map((part) => (/^0(\.0+)?(px)?$/.test(part) ? "0px" : part));
+  if (!parts.length || parts.length > 4) return value;
+  const [t, r = t, b = t, l = r] = parts;
+  return l !== r ? `${t} ${r} ${b} ${l}` : b !== t ? `${t} ${r} ${b}` : r !== t ? `${t} ${r}` : t;
+}
+
+/** Values in one form: links, colors, fonts and paddings as the components write them. */
+function canonical(values: Plain): Plain {
+  const out: Plain = {};
+  for (const [key, value] of Object.entries(values)) {
+    if (value === undefined) continue;
+    if (key === "href" || key === "action") out[key] = link(value);
+    else if (/padding$/i.test(key)) out[key] = box(value);
+    else if (key === "menu" && isPlainObject(value) && Array.isArray(value.items)) out[key] = { ...value, items: value.items.map((item: unknown) => (isPlainObject(item) && item.link !== undefined ? { ...item, link: link(item.link) } : item)) };
+    else if (key === "_override") {
+      const settings = deviceSettings(value);
+      if (settings !== undefined) out[key] = isPlainObject(settings) ? Object.fromEntries(Object.entries(settings).map(([device, set]) => [device, isPlainObject(set) ? canonical(set) : set])) : settings;
+    } else out[key] = value;
+  }
+  return normalizeCssValues(pxZeros(out));
+}
+
+/** `value` without what equals `defaults`, deep; undefined when it all does. */
+function withoutDefaults(value: unknown, defaults: unknown): unknown {
+  if (deepEqual(value, defaults)) return undefined;
+  if (!isPlainObject(value) || !isPlainObject(defaults)) return value;
+  const out: Plain = {};
+  for (const [key, item] of Object.entries(value)) {
+    const kept = key in defaults ? withoutDefaults(item, defaults[key]) : item;
+    if (kept !== undefined) out[key] = kept;
+  }
+  return Object.keys(out).length ? out : undefined;
+}
+
+/** A node's values as the builder sees them, without what's at its default. */
+function nodeValues(values: unknown, defaults: Plain): Plain {
+  const given: Plain = isPlainObject(values) ? { ...values } : {};
+  if (isPlainObject(given._meta)) {
+    const { htmlID: _id, htmlClassNames: _classes, ...meta } = given._meta;
+    if (Object.keys(meta).length) given._meta = meta;
+    else delete given._meta;
+  }
+  const base = canonical(defaults);
+  return (withoutDefaults(mergeValues(base, canonical(given)), base) as Plain | undefined) ?? {};
+}
+
+function block(content: unknown, textColor: unknown): Plain {
+  if (!isPlainObject(content)) return { invalid: content };
+  const type = content.type === "paragraph" ? "text" : content.type;
+  const values: Plain = isPlainObject(content.values) ? { ...content.values } : {};
+  if ((content.type === "paragraph" || content.type === "text") && typeof values.text !== "string" && typeof values.textJson === "string") values.text = generateHtmlFromTextJson(values.textJson);
+  if (typeof values.text === "string") delete values.textJson;
+  if (TEXT_TYPES.has(String(content.type)) && values.color === undefined) values.color = textColor;
+  return { type, ...(content.slug !== undefined ? { slug: content.slug } : {}), values: nodeValues(values, editorBlockDefaults(String(type))) };
+}
+
+/**
+ * A design with each web font's URL on every font of its family: the builder loads a family's web font for all its
+ * fonts, and a <Font> writes its URL on each (see the font entry).
+ */
+function withFontUrls(body: Plain): Plain {
+  const urls = new Map<string, unknown>();
+  const fonts = (values: unknown) => (isPlainObject(values) ? Object.entries(values).filter(([key, font]) => /fontFamily$/i.test(key) && isPlainObject(font) && typeof font.value === "string") : []);
+  const family = (font: Plain) => String(font.value).split(",")[0].replace(/['"]/g, "").trim().toLowerCase();
+  const blocks = (Array.isArray(body.rows) ? body.rows : []).flatMap((row: Plain) => (Array.isArray(row?.columns) ? row.columns : []).flatMap((column: Plain) => (Array.isArray(column?.contents) ? column.contents : [])));
+  const all = [body.values, ...blocks.map((content: Plain) => content?.values)];
+  for (const values of all) for (const [, font] of fonts(values)) if (font.url && !urls.has(family(font))) urls.set(family(font), font.url);
+  const filled = (values: unknown) => (isPlainObject(values) ? { ...values, ...Object.fromEntries(fonts(values).filter(([, font]) => font.url === undefined && urls.has(family(font))).map(([key, font]) => [key, { ...font, url: urls.get(family(font)) }])) } : values);
+  return {
+    ...body,
+    values: filled(body.values),
+    rows: (Array.isArray(body.rows) ? body.rows : []).map((row: Plain) => ({
+      ...row,
+      columns: (Array.isArray(row?.columns) ? row.columns : []).map((column: Plain) => ({
+        ...column,
+        contents: (Array.isArray(column?.contents) ? column.contents : []).map((content: Plain) => (isPlainObject(content) ? { ...content, values: filled(content.values) } : content)),
+      })),
+    })),
+  };
+}
+
+/** A design as the builder shows it: what a round trip has to keep (see the top of this file). */
+export function normalizeDesign(design: Plain): Plain {
+  const body: Plain = isPlainObject(design.body) ? withFontUrls(design.body) : {};
+  const { displayMode: _mode, ...shown } = isPlainObject(body.values) ? body.values : {};
+  const bodyValues = nodeValues(shown, EDITOR_BODY_DEFAULTS);
+  const textColor = mergeValues(EDITOR_BODY_DEFAULTS, isPlainObject(body.values) ? body.values : {}).textColor;
+  const rows = (Array.isArray(body.rows) ? body.rows : []).map((row: Plain) => {
+    const given: Plain = isPlainObject(row.values) ? { ...row.values } : {};
+    delete given.cells;
+    if (given.noStackMobile === true) {
+      given._override = { ...given._override, mobile: { ...given._override?.mobile, noStackMobile: true } };
+      given.noStackMobile = false;
+    }
+    return {
+      cells: row.cells,
+      values: nodeValues(given, EDITOR_ROW_DEFAULTS),
+      columns: (Array.isArray(row.columns) ? row.columns : []).map((column: Plain) => ({
+        values: nodeValues(column?.values, EDITOR_COLUMN_DEFAULTS),
+        contents: (Array.isArray(column?.contents) ? column.contents : []).map((content: unknown) => block(content, textColor)),
+      })),
+    };
+  });
+  const out: Plain = { body: { values: bodyValues, rows } };
+  for (const part of ["headers", "footers"]) if (Array.isArray(body[part]) && body[part].length) out.body[part] = body[part];
+  return out;
+}
+
+/** Where two values differ, deep. */
+function differ(expected: unknown, actual: unknown, path: string, out: DesignDifference[]): void {
+  if (deepEqual(expected, actual)) return;
+  if (Array.isArray(expected) && Array.isArray(actual) && expected.length === actual.length) {
+    expected.forEach((item, i) => differ(item, actual[i], `${path}[${i}]`, out));
+    return;
+  }
+  if (isPlainObject(expected) && isPlainObject(actual)) {
+    for (const key of new Set([...Object.keys(expected), ...Object.keys(actual)])) differ(expected[key], actual[key], path ? `${path}.${key}` : key, out);
+    return;
+  }
+  out.push({ path, expected, actual });
+}
+
+/** How `actual` differs from `expected`, as the builder shows them (empty: the same design). */
+export function compareDesigns(expected: Plain, actual: Plain): DesignDifference[] {
+  const out: DesignDifference[] = [];
+  differ(normalizeDesign(expected), normalizeDesign(actual), "", out);
+  return out;
+}
diff --git a/packages/react/src/codegen/containers.ts b/packages/react/src/codegen/containers.ts
new file mode 100644
index 00000000..8840714a
--- /dev/null
+++ b/packages/react/src/codegen/containers.ts
@@ -0,0 +1,113 @@
+/**
+ * The body, rows and columns as the root, `<Row>` and `<Column>` props. A design row's padding is `<Row padding>`
+ * (the editor's, around the row, as Elements renders it).
+ */
+import { ColumnLayouts } from "@unlayer-internal/shared-elements";
+import { fontFamilyOf } from "../utils/font-design";
+import { BODY_DEFAULTS, COLUMN_DEFAULTS, EDITOR_BODY_DEFAULTS, ROW_DEFAULTS } from "./defaults";
+import { placeDevice } from "./device";
+import { withoutRestoredUrl } from "./fonts";
+import { attributes, lostThroughValues, placeValues, Props, withoutMeta } from "./props";
+import { codeValue, type Attr } from "./print";
+import type { ModuleState } from "./state";
+import { deepEqual, isPlainObject, type Plain } from "./values";
+import { dropFixedFlags, warnLost, warnMergeTagRule } from "./warnings";
+
+export type RootName = "Email" | "Page" | "Document";
+
+const BODY_TYPED = ["backgroundColor", "contentWidth", "contentAlign", "contentVerticalAlign", "fontFamily", "fontWeight", "textColor", "linkStyle", "backgroundImage", "textDirection", "accessibilityTitle"];
+const ROW_TYPED = new Set(["backgroundColor", "columnsBackgroundColor", "backgroundImage", "padding"]);
+const COLUMN_TYPED = new Set(["backgroundColor", "padding", "borderRadius", "border"]);
+
+const checkLost = (props: Props, defaults: Plain, where: string, state: ModuleState) => warnLost(lostThroughValues(props.values, defaults, props.component), where, state);
+
+export interface RootResult {
+  attrs: Attr[];
+  /** The `<Font>`s the root holds (the body's own font as `default`, where it's one). */
+  fonts: Array<{ family: string; url: string; fallback?: string; default?: boolean }>;
+}
+
+/** The body's values as the root's props (and `<Font>`s for its web fonts). */
+export function convertBody(values: Plain, root: RootName, state: ModuleState): RootResult {
+  const props = new Props(root);
+  let rest = withoutMeta(values, props);
+  // The builder's popup settings, at their defaults (Elements doesn't write them).
+  for (const key of Object.keys(rest)) if (!(key in BODY_DEFAULTS) && key in EDITOR_BODY_DEFAULTS && deepEqual(rest[key], EDITOR_BODY_DEFAULTS[key])) delete rest[key];
+
+  // (Its `displayMode` is the root's: see designToElements.)
+  const { preheaderText, fontFamily, displayMode: _mode, ...others } = rest;
+  rest = others;
+  if (typeof preheaderText === "string" && preheaderText !== "") props.add("previewText", preheaderText);
+  else if (preheaderText !== undefined && preheaderText !== "") props.values.preheaderText = preheaderText;
+
+  // A web font: a <Font> loads it, and is the template's font where the family is the one <Font default> writes.
+  const fonts: RootResult["fonts"] = [];
+  const font = fontDefault(fontFamily);
+  if (font) fonts.push({ ...font, default: true });
+  else if (fontFamily !== undefined) rest = { fontFamily: withoutRestoredUrl(fontFamily, state), ...rest };
+
+  const typed = new Set([...BODY_TYPED, ...(root === "Document" ? ["documentSize", "documentOrientation"] : [])]);
+  // Not the Document's own (a Document takes its page size and orientation as props).
+  if (root !== "Document") for (const key of ["documentSize", "documentOrientation", "documentMargin"]) if (deepEqual(rest[key], BODY_DEFAULTS[key as keyof typeof BODY_DEFAULTS])) delete rest[key];
+  placeValues(rest, BODY_DEFAULTS, props, { typed, richFonts: true });
+  checkLost(props, BODY_DEFAULTS, "The body", state);
+  return { attrs: attributes(props, state.types), fonts };
+}
+
+/** `<Font default>`'s props where the body's font is exactly what it writes, else undefined. */
+function fontDefault(fontFamily: unknown): { family: string; url: string; fallback: string } | undefined {
+  if (!isPlainObject(fontFamily) || typeof fontFamily.url !== "string" || typeof fontFamily.label !== "string" || typeof fontFamily.value !== "string") return undefined;
+  const stack = /^'([^']*)', (.+)$/.exec(fontFamily.value);
+  if (!stack || stack[1] !== fontFamily.label) return undefined;
+  const font = { family: fontFamily.label, url: fontFamily.url, fallback: stack[2] };
+  return deepEqual(fontFamilyOf(font), fontFamily) ? font : undefined;
+}
+
+/** Keys rows have in the builder that no prop sets, at the value they take when missing. */
+const ROW_BUILDER_ONLY: Plain = { hideDesktop: false, anchor: "", displayCondition: null, _styleGuide: null, locked: false, columns: false };
+
+/** Whether a padding is zero on every side. */
+const zero = (padding: unknown) => typeof padding === "string" && padding.trim().split(/\s+/).every((side) => /^0(\.0+)?[a-z%]*$/.test(side));
+
+/** A row's cells as `layout` (one of ColumnLayouts) or `cells`. */
+function layoutAttr(cells: number[]): Attr {
+  const name = Object.entries(ColumnLayouts).find(([, layout]) => deepEqual(layout.cells, cells))?.[0];
+  return name ? { name: "layout", value: codeValue(`ColumnLayouts.${name}`) } : { name: "cells", value: cells };
+}
+
+/** A design row's values as `<Row>` props (`columns`: how many it has; a layout needs as many as its cells). */
+export function convertRow(row: Plain, cells: number[], columns: number, where: string, state: ModuleState): { attrs: Attr[]; layout: boolean } {
+  const props = new Props("Row");
+  const layout = columns === cells.length ? layoutAttr(cells) : { name: "cells", value: cells };
+  props.attrs.push(layout);
+  const rest = withoutMeta(isPlainObject(row.values) ? row.values : {}, props);
+  warnMergeTagRule(rest, where, state, false);
+  // (renderToJson writes the row's cells in its values too.)
+  delete rest.cells;
+  dropFixedFlags(rest, where, state);
+  for (const [key, value] of Object.entries(ROW_BUILDER_ONLY)) {
+    if (key in rest && !deepEqual(rest[key], value)) props.values[key] = rest[key];
+    delete rest[key];
+  }
+  // A padding of 0 is left out (the row's default).
+  const { _override, ...others } = rest;
+  if (zero(others.padding)) delete others.padding;
+  placeValues(others, ROW_DEFAULTS, props, { typed: ROW_TYPED });
+  placeDevice(_override, props, ROW_DEFAULTS, "row");
+  checkLost(props, ROW_DEFAULTS, where, state);
+  return { attrs: attributes(props, state.types), layout: layout.name === "layout" };
+}
+
+/** A design column's values as `<Column>` props. */
+export function convertColumn(column: Plain, where: string, state: ModuleState): Attr[] {
+  const props = new Props("Column");
+  const { _override, ...rest } = withoutMeta(isPlainObject(column.values) ? column.values : {}, props);
+  for (const key of ["deletable", "locked"]) {
+    if (key in rest && !deepEqual(rest[key], COLUMN_DEFAULTS[key as keyof typeof COLUMN_DEFAULTS])) props.values[key] = rest[key];
+    delete rest[key];
+  }
+  placeValues(rest, COLUMN_DEFAULTS, props, { typed: COLUMN_TYPED });
+  placeDevice(_override, props, COLUMN_DEFAULTS, "column");
+  checkLost(props, COLUMN_DEFAULTS, where, state);
+  return attributes(props, state.types);
+}
diff --git a/packages/react/src/codegen/defaults.ts b/packages/react/src/codegen/defaults.ts
new file mode 100644
index 00000000..295915fd
--- /dev/null
+++ b/packages/react/src/codegen/defaults.ts
@@ -0,0 +1,108 @@
+/**
+ * What each component writes into a design when given no props (so only what differs needs a prop), and what the
+ * builder takes a value missing from a design to be (so a design and its round trip compare as the builder shows
+ * them). From the same source as the components: the editor's schema defaults in `@unlayer/exporters`, with the
+ * additions each component makes (kept equal to them by codegen's tests).
+ */
+import {
+  ButtonDefaults,
+  DividerDefaults,
+  HeadingDefaults,
+  HtmlDefaults,
+  ImageDefaults,
+  MenuDefaults,
+  ParagraphDefaults,
+  SocialDefaults,
+  TableDefaults,
+  TextDefaults,
+  TimerDefaults,
+  VideoDefaults,
+  BodyDefaults,
+} from "@unlayer/exporters";
+import { BODY_DEFAULTS, COLUMN_DEFAULTS, ROW_DEFAULTS } from "../utils/container-defaults";
+import type { Plain } from "./values";
+
+const { height: _placeholderHeight, ...imageSrc } = ImageDefaults.src as Plain;
+
+/** Each block component's own defaults (its `DEFAULT_VALUES`), by component name. */
+export const BLOCK_DEFAULTS: Record<string, Plain> = {
+  Paragraph: { ...ParagraphDefaults, color: "#000000" },
+  Heading: { ...HeadingDefaults, color: "#000000", fontWeight: 400, text: "Heading" },
+  Button: { ...ButtonDefaults, text: "Button" },
+  Image: { ...ImageDefaults, src: { ...imageSrc, autoWidth: true, maxWidth: "100%" } },
+  Divider: { ...DividerDefaults },
+  Html: { ...HtmlDefaults },
+  Menu: { ...MenuDefaults },
+  Social: { ...SocialDefaults },
+  Table: { ...TableDefaults, table: { headers: [], rows: [], footers: [] } },
+  Video: { ...VideoDefaults, video: { type: "youtube", videoId: "", thumbnail: "", loading: false, ...(VideoDefaults.video as Plain) } },
+  PageBreak: { color: "#6b7280" },
+};
+
+/** What renderToJson adds to every block: its padding, and the builder's flags for it. */
+export const BLOCK_BASE = { containerPadding: "10px", selectable: true, draggable: true, duplicatable: true, deletable: true, hideable: true };
+
+/** The flags renderToJson always writes as `true` (a design's `false` can't come back through Elements). */
+export const ALWAYS_TRUE = ["selectable", "draggable", "duplicatable", "deletable", "hideable"] as const;
+
+export { BODY_DEFAULTS, ROW_DEFAULTS, COLUMN_DEFAULTS };
+
+/** Design content types each block component writes (`paragraph` is the editor's Lexical text, read as `text`). */
+export const COMPONENT_OF_TYPE: Record<string, string> = {
+  text: "Paragraph",
+  paragraph: "Paragraph",
+  heading: "Heading",
+  button: "Button",
+  image: "Image",
+  divider: "Divider",
+  html: "Html",
+  menu: "Menu",
+  social: "Social",
+  table: "Table",
+  video: "Video",
+  page_break: "PageBreak",
+};
+
+/** Keys every block has in the builder, at the values it takes when they're missing. */
+const EDITOR_BLOCK_BASE: Plain = {
+  containerPadding: "10px",
+  anchor: "",
+  hideDesktop: false,
+  displayCondition: null,
+  _styleGuide: null,
+  selectable: true,
+  draggable: true,
+  duplicatable: true,
+  deletable: true,
+  hideable: true,
+  locked: false,
+};
+
+/**
+ * What the builder takes a missing value to be, by content type: the schema's defaults (and a heading's weight, which
+ * the exporter writes as 400 when it's missing). A text block's missing color is the body's text color (see compare.ts).
+ */
+export const EDITOR_DEFAULTS: Record<string, Plain> = {
+  text: { ...EDITOR_BLOCK_BASE, ...TextDefaults },
+  paragraph: { ...EDITOR_BLOCK_BASE, ...ParagraphDefaults },
+  heading: { ...EDITOR_BLOCK_BASE, ...HeadingDefaults, fontWeight: 400 },
+  button: { ...EDITOR_BLOCK_BASE, ...ButtonDefaults },
+  // (An image without `autoWidth` and `maxWidth` is sized automatically, as the exporter reads it.)
+  image: { ...EDITOR_BLOCK_BASE, ...ImageDefaults, src: { ...(ImageDefaults.src as Plain), autoWidth: true, maxWidth: "100%" } },
+  divider: { ...EDITOR_BLOCK_BASE, ...DividerDefaults },
+  html: { ...EDITOR_BLOCK_BASE, ...HtmlDefaults },
+  menu: { ...EDITOR_BLOCK_BASE, ...MenuDefaults },
+  social: { ...EDITOR_BLOCK_BASE, ...SocialDefaults },
+  table: { ...EDITOR_BLOCK_BASE, ...TableDefaults },
+  // (A video block without a video: no type, id or thumbnail, as Elements' empty one.)
+  video: { ...EDITOR_BLOCK_BASE, ...VideoDefaults, video: { type: "youtube", videoId: "", thumbnail: "", loading: false, ...(VideoDefaults.video as Plain) } },
+  timer: { ...EDITOR_BLOCK_BASE, ...TimerDefaults },
+  page_break: { ...EDITOR_BLOCK_BASE, color: "#6b7280" },
+};
+
+export const editorBlockDefaults = (type: string): Plain => EDITOR_DEFAULTS[type] ?? EDITOR_BLOCK_BASE;
+
+/** The builder's defaults for the containers (the body's popup settings included). */
+export const EDITOR_BODY_DEFAULTS: Plain = { ...BodyDefaults };
+export const EDITOR_ROW_DEFAULTS: Plain = { ...ROW_DEFAULTS, hideDesktop: false };
+export const EDITOR_COLUMN_DEFAULTS: Plain = { ...COLUMN_DEFAULTS };
diff --git a/packages/react/src/codegen/design-to-elements.ts b/packages/react/src/codegen/design-to-elements.ts
new file mode 100644
index 00000000..320e4818
--- /dev/null
+++ b/packages/react/src/codegen/design-to-elements.ts
@@ -0,0 +1,165 @@
+/**
+ * designToElements: an Unlayer design (the JSON the editor saves) as Elements code, a `.tsx` module whose
+ * component renders back to the same design with `renderToJson()`. Pure: no React rendering and no Node APIs,
+ * so it runs in a browser as well as in a CLI.
+ */
+import { schemaVersion as _schemaVersion } from "@unlayer/exporters";
+import { convertBlock } from "./blocks";
+import { convertBody, convertColumn, convertRow, type RootName } from "./containers";
+import { printModule, type JsxChild, type JsxElement } from "./print";
+import { restoredFonts, webFonts } from "./fonts";
+import { ModuleState } from "./state";
+import { componentIdentifier, isPlainObject, type Plain } from "./values";
+
+const SCHEMA_VERSION: number = _schemaVersion ?? 24;
+
+export type DisplayMode = "email" | "web" | "document" | "popup";
+
+export interface DesignToElementsOptions {
+  /**
+   * Which root to write: `email` (`<Email>`), `web` (`<Page>`) or `document` (`<Document>`). Defaults to the design's
+   * own `displayMode` where it has one, else `email`. A `popup` design is written as a `<Page>`.
+   */
+  displayMode?: DisplayMode;
+  /** The generated component's name (`export default function Template()`). */
+  componentName?: string;
+  /**
+   * The design's exported HTML (the editor's `exportHtml()`), for blocks Elements has no component for (custom
+   * tools, forms, timers, carousels): each is kept as an `<Html>` block with its HTML. Without it they're TODO comments.
+   */
+  html?: string;
+}
+
+export interface DesignToElementsResult {
+  /** The `.tsx` module: imports, and the component as its default export. */
+  code: string;
+  /** What didn't convert as it is, each naming its row and column. */
+  warnings: string[];
+}
+
+const ROOTS: Record<string, RootName> = { email: "Email", web: "Page", popup: "Page", document: "Document" };
+
+/** The design from what was given: a design object, its JSON text. */
+function readDesign(input: unknown): Plain {
+  let value = input;
+  if (typeof value === "string") {
+    try {
+      value = JSON.parse(value);
+    } catch (cause) {
+      throw Object.assign(new Error("[Unlayer] designToElements: the design isn't valid JSON."), { cause });
+    }
+  }
+  if (!isPlainObject(value) || !isPlainObject(value.body) || !Array.isArray(value.body.rows)) {
+    throw new Error("[Unlayer] designToElements: expected an Unlayer design, an object with `body.rows` (the editor's `saveDesign()`).");
+  }
+  return value;
+}
+
+/**
+ * Convert an Unlayer design into Elements code.
+ *
+ * @param design - The design: the editor's `saveDesign()` JSON, as an object or as its text.
+ * @param options - The root (`displayMode`), the component's name, and the design's exported HTML.
+ * @returns The `.tsx` module, and what didn't convert as it is (each warning names its row and column).
+ * @throws If `design` isn't an Unlayer design (no `body.rows`).
+ *
+ * @example
+ * ```ts
+ * import { designToElements } from "@unlayer/react-elements/codegen";
+ *
+ * const { code, warnings } = designToElements(design, { componentName: "Welcome" });
+ * await writeFile("Welcome.tsx", code);
+ * ```
+ */
+export function designToElements(design: unknown, options: DesignToElementsOptions = {}): DesignToElementsResult {
+  const input = readDesign(design);
+  const body: Plain = input.body;
+  const bodyValues: Plain = isPlainObject(body.values) ? body.values : {};
+  const state = new ModuleState(options.html);
+
+  const mode = options.displayMode ?? input.displayMode ?? bodyValues.displayMode ?? "email";
+  const root = ROOTS[mode] ?? "Email";
+  if (!ROOTS[mode]) state.warn(`The display mode "${mode}" isn't one Elements has: the template is an <Email>.`);
+  if (mode === "popup") state.warn("A popup design is written as a <Page>: Elements renders no popup (the design keeps its popup settings).");
+  if (typeof input.schemaVersion === "number" && input.schemaVersion !== SCHEMA_VERSION) {
+    state.warn(
+      input.schemaVersion > SCHEMA_VERSION
+        ? `The design's schema (version ${input.schemaVersion}) is newer than this Elements' (${SCHEMA_VERSION}): settings added since may not convert.`
+        : `The design's schema (version ${input.schemaVersion}) is older than this Elements' (${SCHEMA_VERSION}), which renderToJson writes: open and save it in the editor first, so it's migrated.`
+    );
+  }
+  for (const part of ["headers", "footers"]) {
+    if (Array.isArray(body[part]) && body[part].length) state.warn(`The design's ${part} (a document's, ${body[part].length} row${body[part].length > 1 ? "s" : ""}) have no Elements component and are left out.`);
+  }
+  if (hasIds(body)) state.warn("Row, column and block ids aren't kept: renderToJson writes none, and the editor gives new ones.");
+
+  const fontsUsed = webFonts(body);
+  state.restoredFonts = restoredFonts(fontsUsed);
+  const { attrs, fonts } = convertBody(bodyValues, root, state);
+  const textColor = typeof bodyValues.textColor === "string" ? bodyValues.textColor : undefined;
+  const rtl = String(bodyValues.textDirection ?? "").trim().toLowerCase() === "rtl";
+
+  const used = { Row: false, Column: false, ColumnLayouts: false };
+  const rows: JsxChild[] = body.rows.map((row: unknown, r: number): JsxChild => {
+    const where = `Row ${r + 1}`;
+    if (!isPlainObject(row)) {
+      state.warn(`${where} isn't a row, so it's left out.`);
+      return { comment: `TODO: ${where} isn't a row in the design.` };
+    }
+    const columns: unknown[] = Array.isArray(row.columns) ? row.columns : [];
+    const cells: number[] = Array.isArray(row.cells) && row.cells.length ? row.cells : Array(Math.max(1, columns.length)).fill(1);
+    if (columns.length !== cells.length) state.warn(`${where} has ${columns.length} column${columns.length === 1 ? "" : "s"} and ${cells.length} cell${cells.length === 1 ? "" : "s"}: its cells are kept as they are.`);
+    const converted = convertRow(row, cells, columns.length, where, state);
+    used.Row = true;
+    used.ColumnLayouts ||= converted.layout;
+    used.Column ||= columns.length > 0;
+    const children = columns.map((column, c): JsxChild => {
+      const at = `${where}, column ${c + 1}`;
+      const values: Plain = isPlainObject(column) ? column : {};
+      const contents: unknown[] = Array.isArray(values.contents) ? values.contents : [];
+      // Where its blocks are, for an image's width in px (see image-sizing.ts).
+      const slot = { bodyValues, rowValues: isPlainObject(row.values) ? row.values : {}, rowCells: cells, columnIndex: c, columnValues: isPlainObject(values.values) ? values.values : {} };
+      const blocks = contents.map((content, b) => (isPlainObject(content) ? convertBlock(content, { where: `${at}, block ${b + 1}`, state, textColor, rtl, slot }) : { comment: `TODO: ${at}, block ${b + 1} isn't a block in the design.` }));
+      return { tag: "Column", attrs: convertColumn(values, at, state), children: blocks };
+    });
+    return { tag: "Row", attrs: converted.attrs, children };
+  });
+
+  // Web fonts: a <Font> each, which loads it (the root's own as `default`), from "@unlayer/react-elements/font".
+  for (const [url, family] of fontsUsed) if (!fonts.some((font) => font.url === url)) fonts.push({ family, url });
+  const fontElements: JsxElement[] = fonts.map((font) => ({
+    tag: "Font",
+    attrs: [
+      { name: "family", value: font.family },
+      { name: "url", value: font.url },
+      ...(font.fallback !== undefined ? [{ name: "fallback", value: font.fallback }] : []),
+      ...(font.default ? [{ name: "default", value: true }] : []),
+    ],
+    children: [],
+  }));
+
+  const containers = (["Row", "Column", "ColumnLayouts"] as const).filter((name) => used[name]);
+  // (A props type where the module writes `values` as it: see props.ts.)
+  const types = [...state.types].sort().map((type) => `type ${type}`);
+  const imports = [{ from: "@unlayer/react-elements", names: [root, ...containers, ...[...state.components].sort(), ...types] }];
+  if (fontElements.length) imports.push({ from: "@unlayer/react-elements/font", names: ["Font"] });
+
+  // A name of its own, not one the module imports or declares (`Email` is `EmailTemplate`).
+  let componentName = componentIdentifier(options.componentName);
+  if (imports.some(({ names }) => names.some((name) => name.replace(/^type /, "") === componentName))) componentName += "Template";
+  const code = printModule({
+    imports,
+    componentName,
+    root: { tag: root, attrs, children: [...fontElements, ...rows] },
+  });
+  return { code, warnings: state.warnings };
+}
+
+/** Whether a design's rows, columns or blocks have ids of their own (the editor's newer designs do). */
+function hasIds(body: Plain): boolean {
+  const list = (value: unknown): Plain[] => (Array.isArray(value) ? value.filter(isPlainObject) : []);
+  const rows = list(body.rows);
+  const columns = rows.flatMap((row) => list(row.columns));
+  const blocks = columns.flatMap((column) => list(column.contents));
+  return [...rows, ...columns, ...blocks].some((node) => node.id !== undefined);
+}
diff --git a/packages/react/src/codegen/device.ts b/packages/react/src/codegen/device.ts
new file mode 100644
index 00000000..3415f35d
--- /dev/null
+++ b/packages/react/src/codegen/device.ts
@@ -0,0 +1,74 @@
+/**
+ * A design's device settings (`_override`) as props: `hideOnMobile`, `hideOnDesktop`, a Row's `noStackMobile`, and
+ * the phone settings as `mobile={{ … }}` (an image's and a button's width as they take it). Checked with the
+ * components' own mapper; what doesn't come back the same stays in `values._override`.
+ */
+import { mapSemanticProps } from "@unlayer-internal/shared-elements";
+import { typeChecks, type Props } from "./props";
+import { deepEqual, isPlainObject, type Plain } from "./values";
+
+/** Phone settings blocks take in `mobile` (as the design keeps them). */
+const BLOCK_PHONE = new Set(["padding", "containerPadding", "fontSize", "lineHeight", "textAlign"]);
+const COLUMN_PHONE = new Set(["padding", "border"]);
+const ROW_PHONE = new Set(["padding"]);
+
+/** Device settings as the builder reads them: flags left off and empty settings dropped. */
+export function deviceSettings(override: unknown): unknown {
+  if (!isPlainObject(override)) return override;
+  const out: Plain = {};
+  for (const [device, settings] of Object.entries(override)) {
+    if (!isPlainObject(settings)) {
+      if (settings !== undefined) out[device] = settings;
+      continue;
+    }
+    const kept = Object.fromEntries(Object.entries(settings).filter(([key, value]) => value !== undefined && !(value === false && /^(hideMobile|hideDesktop|noStackMobile)$/.test(key))));
+    if (Object.keys(kept).length) out[device] = kept;
+  }
+  return Object.keys(out).length ? out : undefined;
+}
+
+/** An image's phone `src` sizing, or a button's `size`, as `mobile`'s width settings; undefined when it can't be. */
+function phoneWidth(value: unknown, sizeKey: "maxWidth" | "width"): Plain | undefined {
+  if (!isPlainObject(value) || Object.keys(value).some((key) => key !== "autoWidth" && key !== sizeKey)) return undefined;
+  const { autoWidth } = value;
+  const size = value[sizeKey];
+  if (autoWidth === false && size !== undefined) return { width: size };
+  return { ...(autoWidth !== undefined ? { autoWidth } : {}), ...(size !== undefined ? { [sizeKey]: size } : {}) };
+}
+
+/** Place a design node's `_override` on its props (`kind`: what the node is). */
+export function placeDevice(override: unknown, props: Props, defaults: Plain, kind: "block" | "row" | "column"): void {
+  const settings = deviceSettings(override);
+  if (settings === undefined) return;
+  if (!isPlainObject(settings)) {
+    props.values._override = override;
+    return;
+  }
+  const { mobile: phone = {}, desktop = {}, ...others } = settings as Record<string, Plain>;
+  const attrs: Array<[string, unknown]> = [];
+  const leftover: Plain = { ...others };
+  const keep = (device: string, key: string, value: unknown) => ((leftover[device] ??= {})[key] = value);
+
+  const mobile: Plain = {};
+  for (const [key, value] of Object.entries(phone)) {
+    if (key === "hideMobile" && kind !== "column" && typeof value === "boolean") attrs.push(["hideOnMobile", value]);
+    else if (key === "noStackMobile" && kind === "row" && value === true) attrs.push(["noStackMobile", true]);
+    else if (kind === "block" && props.component === "Image" && key === "src" && phoneWidth(value, "maxWidth")) Object.assign(mobile, phoneWidth(value, "maxWidth"));
+    else if (kind === "block" && props.component === "Button" && key === "size" && phoneWidth(value, "width")) Object.assign(mobile, phoneWidth(value, "width"));
+    else if ((kind === "block" ? BLOCK_PHONE : kind === "column" ? COLUMN_PHONE : ROW_PHONE).has(key) && typeChecks(key, value, props.component)) mobile[key] = value;
+    else keep("mobile", key, value);
+  }
+  for (const [key, value] of Object.entries(desktop)) {
+    if (key === "hideDesktop" && kind !== "column" && typeof value === "boolean") attrs.push(["hideOnDesktop", value]);
+    else keep("desktop", key, value);
+  }
+  if (Object.keys(mobile).length) attrs.unshift(["mobile", mobile]);
+
+  // As the component gives them back (with what's left in `values._override`).
+  const given: Plain = { ...Object.fromEntries(attrs), ...(Object.keys(leftover).length ? { values: { _override: leftover } } : {}) };
+  const back = (mapSemanticProps(given as never, defaults, props.component) as Plain)._override;
+  if (deepEqual(deviceSettings(back), settings)) {
+    for (const [name, value] of attrs) props.add(name, value);
+    if (Object.keys(leftover).length) props.values._override = leftover;
+  } else props.values._override = override;
+}
diff --git a/packages/react/src/codegen/fonts.ts b/packages/react/src/codegen/fonts.ts
new file mode 100644
index 00000000..5137b952
--- /dev/null
+++ b/packages/react/src/codegen/fonts.ts
@@ -0,0 +1,44 @@
+/**
+ * Web fonts: the editor keeps a web font's URL on each font of its family (a block's or the body's `fontFamily`),
+ * loads it from there and exports its `<link>`. In Elements a `<Font>` loads it, and puts its URL back on the fonts
+ * of its family in the design (see the font entry). So the code declares one `<Font>` per web font, and a font that
+ * the `<Font>` gives its URL back to is written without it.
+ */
+import { fontFamilyOf } from "../utils/font-design";
+import type { ModuleState } from "./state";
+import { isPlainObject, type Plain } from "./values";
+
+/** A font stack's first family, as written (without quotes). */
+export const firstFamily = (stack: string) => stack.split(",")[0].replace(/['"]/g, "").trim();
+
+/** The web fonts a design uses (fonts with a URL), by URL: the family each `<Font>` declares. */
+export function webFonts(value: unknown, found = new Map<string, string>(), key = ""): Map<string, string> {
+  if (Array.isArray(value)) value.forEach((item) => webFonts(item, found));
+  else if (isPlainObject(value)) {
+    if (/fontFamily$/i.test(key) && typeof value.url === "string" && value.url && typeof value.value === "string") {
+      if (!found.has(value.url)) found.set(value.url, firstFamily(value.value) || String(value.label ?? ""));
+    } else for (const [name, item] of Object.entries(value)) webFonts(item, found, name);
+  }
+  return found;
+}
+
+/**
+ * The families whose URL a `<Font>` puts back on their fonts, by family (any case): the stylesheets (a font file is
+ * an `@font-face`, which the editor has no place for) whose family is the only one with that name.
+ */
+export function restoredFonts(fonts: Map<string, string>): Map<string, string> {
+  const urls = new Map<string, Set<string>>();
+  for (const [url, family] of fonts) {
+    const key = family.toLowerCase();
+    if (fontFamilyOf({ family, url }).url === url && fontFamilyOf({ family }).label === family) urls.set(key, (urls.get(key) ?? new Set()).add(url));
+  }
+  return new Map([...urls].filter(([, set]) => set.size === 1).map(([key, set]) => [key, [...set][0]]));
+}
+
+/** A font without the URL its family's `<Font>` gives it back (a label and value: what the prop takes). */
+export function withoutRestoredUrl(font: unknown, state: ModuleState): unknown {
+  if (!isPlainObject(font) || typeof font.value !== "string" || Object.keys(font).some((key) => !["label", "value", "url"].includes(key))) return font;
+  if (state.restoredFonts.get(firstFamily(font.value).toLowerCase()) !== font.url) return font;
+  const { url: _url, ...rest } = font as Plain;
+  return rest;
+}
diff --git a/packages/react/src/codegen/format.ts b/packages/react/src/codegen/format.ts
new file mode 100644
index 00000000..cb11a1d0
--- /dev/null
+++ b/packages/react/src/codegen/format.ts
@@ -0,0 +1,25 @@
+/**
+ * Generated code formatted with prettier (an optional peer dependency, loaded only when it's asked for), with the
+ * project's own settings where it passes them. Without prettier the code comes back as it is: designToElements
+ * already writes it as prettier's defaults do.
+ */
+/**
+ * An optional peer dependency's module, loaded when it runs. Its name isn't a literal, so no bundler follows it into
+ * the bundle: esbuild (wrangler's, a serverless bundler's) failed on an app that imports this entry without prettier
+ * installed; webpack and Vite are told to leave it too.
+ */
+const peer = (name: string): Promise<any> => import(/* webpackIgnore: true */ /* @vite-ignore */ name);
+
+export async function formatElements(code: string, options: Record<string, unknown> = {}): Promise<string> {
+  let prettier: { format(text: string, options: Record<string, unknown>): Promise<string> };
+  let plugins: unknown[];
+  try {
+    // Not where a bundler would follow it: loaded when it runs (see peer).
+    const [standalone, typescript, estree] = await Promise.all([peer("prettier/standalone"), peer("prettier/plugins/typescript"), peer("prettier/plugins/estree")]);
+    prettier = standalone.default ?? standalone;
+    plugins = [typescript.default ?? typescript, estree.default ?? estree];
+  } catch {
+    return code;
+  }
+  return prettier.format(code, { ...options, parser: "typescript", plugins });
+}
diff --git a/packages/react/src/codegen/generated.test.ts b/packages/react/src/codegen/generated.test.ts
new file mode 100644
index 00000000..22a1beab
--- /dev/null
+++ b/packages/react/src/codegen/generated.test.ts
@@ -0,0 +1,229 @@
+/**
+ * Designs put together at random from the values the editor writes (and some it doesn't: numbers where it writes
+ * px, `rgb()` colors, alignments no prop takes, links in every shape), each converted, rendered back and compared:
+ * every one must come back the same, render without a word from Elements, type-check, and be written as prettier
+ * writes it.
+ *
+ *   CODEGEN_SEEDS=2000 pnpm vitest run src/codegen/generated.test.ts
+ */
+import { describe, expect, it, vi } from "vitest";
+import path from "node:path";
+import * as prettier from "prettier";
+import { PACKAGE, roundTrip, typecheck } from "./test-harness";
+import type { DisplayMode } from "./design-to-elements";
+import type { Plain } from "./values";
+
+const SEEDS = Number(process.env.CODEGEN_SEEDS ?? 300);
+
+/** A seeded random number generator (mulberry32). */
+function random(seed: number) {
+  let a = seed >>> 0;
+  const next = () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+  const pick = <T,>(list: readonly T[]): T => list[Math.floor(next() * list.length)];
+  const chance = (p: number) => next() < p;
+  /** Some of `entries`, each with probability `p`. */
+  const some = (entries: Record<string, () => unknown>, p = 0.4): Plain => Object.fromEntries(Object.entries(entries).filter(() => chance(p)).map(([key, make]) => [key, make()]));
+  return { next, pick, chance, some };
+}
+
+const COLORS = ["#ffffff", "#1A1F36", "#ff0000", "rgb(10, 20, 30)", "rgba(0, 0, 0, 0.5)", "transparent"];
+const SIZES = ["12px", "16px", "28px", "1.5em", 14];
+const PADDINGS = ["0px", "10px", "8px 16px", "4px 8px 12px 16px", "0px 0px", 12];
+const LINE_HEIGHTS = ["140%", "120%", "1.5", 1.4, "24px"];
+const ALIGNS = ["left", "center", "right", "justify", "start"];
+const WEIGHTS = [400, 600, 700, "700", "bold"];
+const FONTS = [
+  { label: "Georgia", value: "georgia,serif" },
+  { label: "Montserrat", value: "'Montserrat',sans-serif", url: "https://fonts.googleapis.com/css?family=Montserrat:400,700", defaultFont: true },
+  { label: "Inter", value: "'Inter', Arial, sans-serif", url: "https://fonts.googleapis.com/css2?family=Inter" },
+  { label: "Quoted", value: '"Helvetica Neue", Arial, sans-serif' },
+];
+const TEXTS = ["Hello", "Hello there, friend", "Fish & chips", "Fish &amp; chips", "<p>Hi <strong>you</strong></p>", "Don't stop", "{{first_name}}", "  spaced  ", "Line\nbreak", "Café — “quoted”", "<%name%> wins", "a  b", "<p>One</p><p>Two</p>"];
+const LINKS = [
+  { name: "web", values: { href: "https://example.com", target: "_blank" } },
+  { name: "web", values: { href: "https://example.com/self", target: "_self" } },
+  { name: "email", values: { email: "hi@example.com", subject: "Hello", body: "" } },
+  { name: "web", values: { href: "https://example.com/attrs", target: "_blank" }, attrs: { href: "{{href}}", target: "{{target}}" } },
+  "https://example.com/string",
+  // As the editor saves them: their templates, and what they keep of other link types.
+  { name: "email", values: { href: "", target: "_blank", email: "support@example.com", subject: "Help & more?", body: "Hi,\nthere" }, attrs: { href: "mailto:{{email}}?subject={{subject}}&body={{body}}" } },
+  { name: "phone", values: { href: "", target: "_blank", phone: "+15550100" }, attrs: { href: "tel:{{phone}}" } },
+  { name: "sms", values: { phone: "+15550100" }, attrs: { href: "sms:{{phone}}" } },
+  { name: "web", values: { href: "", target: "_blank" }, attrs: { href: "{{href}}", target: "{{target}}" } },
+];
+const URLS = ["https://example.com/a.png", "https://cdn.example.com/photo.jpg?w=1200&q=80"];
+
+function generate(seed: number): { design: Plain; displayMode: DisplayMode } {
+  const r = random(seed);
+  const displayMode = r.pick(["email", "email", "web", "document"] as const);
+  const textStyle = () => r.some({ fontSize: () => r.pick(SIZES), color: () => r.pick(COLORS), textAlign: () => r.pick(ALIGNS), lineHeight: () => r.pick(LINE_HEIGHTS), fontWeight: () => r.pick(WEIGHTS), fontFamily: () => r.pick(FONTS), letterSpacing: () => r.pick(["1px", 2, "0.05em"]) }, 0.3);
+  const base = () =>
+    r.some({
+      containerPadding: () => r.pick(PADDINGS),
+      anchor: () => r.pick(["", "intro"]),
+      locked: () => r.chance(0.5),
+      hideDesktop: () => r.chance(0.3),
+      displayCondition: () => (r.chance(0.5) ? null : { type: "vip", label: "VIP", description: "VIPs", before: "{% if vip %}", after: "{% endif %}" }),
+      _override: () => ({
+        mobile: r.some({ fontSize: () => r.pick(SIZES), textAlign: () => r.pick(ALIGNS), containerPadding: () => r.pick(PADDINGS), lineHeight: () => r.pick(LINE_HEIGHTS), hideMobile: () => r.chance(0.5), color: () => r.pick(COLORS) }, 0.3),
+        desktop: r.some({ hideDesktop: () => r.chance(0.5) }, 0.5),
+      }),
+    }, 0.25);
+  const blocks: Record<string, () => Plain> = {
+    text: () => ({ type: "text", values: { ...base(), ...textStyle(), text: r.pick(TEXTS), ...r.some({ linkStyle: () => ({ inherit: false, linkColor: r.pick(COLORS), linkHoverColor: "#0000ee", linkUnderline: r.chance(0.5), linkHoverUnderline: true }) }, 0.2) } }),
+    paragraph: () => ({ type: "paragraph", values: { ...base(), ...textStyle(), textJson: JSON.stringify({ root: { type: "root", children: [{ type: "paragraph", children: [{ type: "text", text: r.pick(["Lexical", "Bold & sure"]), format: r.pick([0, 1, 2]) }] }] } }) } }),
+    heading: () => ({ type: "heading", values: { ...base(), ...textStyle(), text: r.pick(TEXTS), ...r.some({ headingType: () => r.pick(["h1", "h2", "h3", "h6"]) }, 0.6) } }),
+    button: () => ({
+      type: "button",
+      values: {
+        ...base(),
+        ...textStyle(),
+        text: r.pick(TEXTS),
+        ...r.some({
+          href: () => r.pick(LINKS),
+          buttonColors: () => r.some({ color: () => r.pick(COLORS), backgroundColor: () => r.pick(COLORS), hoverColor: () => r.pick(COLORS), hoverBackgroundColor: () => r.pick(COLORS) }, 0.5),
+          size: () => r.pick([{ autoWidth: true, width: "100%" }, { autoWidth: false, width: "60%" }, { autoWidth: true, width: "40%" }, { autoWidth: false, width: "200px" }]),
+          padding: () => r.pick(PADDINGS),
+          borderRadius: () => r.pick(["4px", "8px", 6]),
+          border: () => ({ borderTopWidth: "2px", borderTopStyle: "solid", borderTopColor: r.pick(COLORS) }),
+          _override: () => ({ mobile: r.pick([{ size: { autoWidth: false, width: "100%" } }, { size: { autoWidth: true } }, { padding: "6px 12px" }]) }),
+        }),
+      },
+    }),
+    image: () => ({
+      type: "image",
+      values: {
+        ...base(),
+        src: r.pick([
+          { url: r.pick(URLS) },
+          { url: r.pick(URLS), autoWidth: true, maxWidth: "100%" },
+          { url: r.pick(URLS), width: 800, height: 400, autoWidth: true, maxWidth: "100%" },
+          { url: r.pick(URLS), width: 800, height: 400, autoWidth: false, maxWidth: r.pick(["45%", "70.87%", "100%"]) },
+          { url: r.pick(URLS), width: 1200, height: 600, autoWidth: false, maxWidth: "50%", contentType: "image/png", filename: "a.png" },
+          { url: r.pick(URLS), width: 800, height: 400 },
+        ]),
+        ...r.some({ altText: () => r.pick(["", "A photo", 'Say "cheese"']), textAlign: () => r.pick(ALIGNS), action: () => r.pick(LINKS.filter((l) => typeof l !== "string")), _override: () => ({ mobile: { src: r.pick([{ autoWidth: true }, { autoWidth: false, maxWidth: "80%" }]) } }) }),
+      },
+    }),
+    divider: () => ({ type: "divider", values: { ...base(), ...r.some({ width: () => r.pick(["100%", "60%"]), textAlign: () => r.pick(ALIGNS), border: () => ({ borderTopWidth: r.pick(["1px", "3px"]), borderTopStyle: r.pick(["solid", "dashed"]), borderTopColor: r.pick(COLORS) }) }) } }),
+    html: () => ({ type: "html", values: { ...base(), html: r.pick(['<div class="x">Raw &amp; <em>HTML</em></div>', "<table><tr><td>Cell</td></tr></table>", "<p>Say 'hi' \"there\"</p>"]) } }),
+    menu: () => ({
+      type: "menu",
+      values: {
+        ...base(),
+        menu: { items: r.pick([[{ key: "1", text: "Docs", link: LINKS[0] }, { key: "2", text: "Blog", link: LINKS[1] }], [{ key: "1606923979749", text: "Call", link: { name: "phone", values: { phone: "+15550100" } } }]]) },
+        ...r.some({ fontSize: () => r.pick(SIZES), textColor: () => r.pick(COLORS), linkColor: () => r.pick(COLORS), align: () => r.pick(ALIGNS), layout: () => r.pick(["horizontal", "vertical"]), separator: () => r.pick(["", "|"]), padding: () => r.pick(PADDINGS) }),
+      },
+    }),
+    social: () => ({
+      type: "social",
+      values: {
+        ...base(),
+        icons: { iconType: r.pick(["circle", "rounded", "squared", "circle-black"]), icons: [{ name: "Facebook", url: "https://facebook.com/acme" }, ...(r.chance(0.3) ? [{ name: "Custom", url: "https://example.com", imgUrl: "https://example.com/icon.png" }] : [])] },
+        ...r.some({ iconSize: () => r.pick([24, 32]), spacing: () => r.pick([5, 10]), align: () => r.pick(ALIGNS) }),
+      },
+    }),
+    table: () => {
+      const columns = r.pick([1, 2, 3]);
+      const rows = r.pick([0, 1, 2]);
+      const cell = (text: string) => ({ text, width: 0 });
+      const row = (fill: (i: number) => string) => ({ cells: Array.from({ length: columns }, (_, i) => cell(fill(i))), height: 0 });
+      const headers = r.chance(0.5) ? [row((i) => `H${i}`)] : [];
+      const empty = r.chance(0.3);
+      return {
+        type: "table",
+        values: {
+          ...base(),
+          columns,
+          rows,
+          enableHeader: r.pick([true, false]),
+          table: { headers, rows: Array.from({ length: rows }, (_, k) => row((i) => (empty ? "" : `R${k}C${i}`))), footers: r.chance(0.2) ? [row(() => "F")] : [] },
+          ...r.some({ stripedRows: () => r.chance(0.5), headerBackgroundColor: () => r.pick(COLORS), contentFontSize: () => r.pick(SIZES), headerColor: () => r.pick(COLORS), headerFontWeight: () => r.pick(WEIGHTS), headerPadding: () => r.pick(PADDINGS) }),
+        },
+      };
+    },
+    video: () => ({
+      type: "video",
+      values: {
+        ...base(),
+        video: r.pick([
+          { type: "youtube", videoId: "aqz-KE-bpKQ", thumbnail: "https://img.youtube.com/vi/aqz-KE-bpKQ/0.jpg", loading: false },
+          { type: "youtube", videoId: "aqz-KE-bpKQ", thumbnail: "https://img.youtube.com/vi/aqz-KE-bpKQ/0.jpg", loading: false, url: "https://www.youtube.com/watch?v=aqz-KE-bpKQ" },
+          { type: "vimeo", videoId: "76979871", thumbnail: "", loading: false },
+          {},
+        ]),
+      },
+    }),
+  };
+  const kinds = Object.keys(blocks);
+  const layouts = [[1], [1, 1], [2, 1], [1, 2], [1, 1, 1], [1, 2, 1], [1, 1, 1, 1], [3, 1]];
+  const rows = Array.from({ length: 1 + Math.floor(r.next() * 3) }, () => {
+    const cells = r.pick(layouts);
+    return {
+      cells,
+      columns: cells.map(() => ({
+        values: r.some({ backgroundColor: () => r.pick(COLORS), padding: () => r.pick(PADDINGS), borderRadius: () => r.pick(["8px", "0px"]), border: () => ({ borderTopWidth: "1px", borderTopStyle: "solid", borderTopColor: r.pick(COLORS) }), _override: () => ({ mobile: { padding: r.pick(PADDINGS) } }) }, 0.3),
+        contents: Array.from({ length: Math.floor(r.next() * 3) }, () => blocks[r.pick(kinds)]()),
+      })),
+      values: r.some({
+        backgroundColor: () => r.pick(COLORS),
+        columnsBackgroundColor: () => r.pick(COLORS),
+        padding: () => r.pick(PADDINGS),
+        backgroundImage: () => ({ url: r.pick(URLS), fullWidth: r.chance(0.5), repeat: "no-repeat", size: r.pick(["cover", "custom"]), position: "center" }),
+        anchor: () => "section",
+        _override: () => ({ mobile: r.some({ padding: () => r.pick(PADDINGS), noStackMobile: () => r.chance(0.7), hideMobile: () => r.chance(0.5) }, 0.5), desktop: r.some({ hideDesktop: () => r.chance(0.5) }, 0.5) }),
+      }, 0.3),
+    };
+  });
+  const body = r.some({
+    backgroundColor: () => r.pick(COLORS),
+    contentWidth: () => r.pick(["600px", 640, "100%"]),
+    textColor: () => r.pick(COLORS),
+    fontFamily: () => r.pick(FONTS),
+    linkStyle: () => ({ body: true, linkColor: r.pick(COLORS), linkHoverColor: "#0000ee", linkUnderline: r.chance(0.5), linkHoverUnderline: true }),
+    preheaderText: () => r.pick(["", "Preview & more"]),
+    textDirection: () => r.pick(["ltr", "rtl"]),
+    contentAlign: () => r.pick(ALIGNS),
+    fontWeight: () => r.pick(WEIGHTS),
+    backgroundImage: () => ({ url: r.pick(URLS), fullWidth: r.chance(0.5), repeat: r.pick(["no-repeat", "repeat"]), size: r.pick(["cover", "custom", "auto"]), position: "center" }),
+    contentVerticalAlign: () => r.pick(["top", "middle", "center"]),
+  }, 0.35);
+  return { design: { counters: {}, schemaVersion: 27, body: { rows, values: body } }, displayMode };
+}
+
+describe("random designs", () => {
+  it(`come back the same, render without a word, type-check and read as prettier writes them (${SEEDS} seeds)`, async () => {
+    const failures: string[] = [];
+    const modules = new Map<string, string>();
+    for (let seed = 1; seed <= SEEDS; seed++) {
+      const { design, displayMode } = generate(seed);
+      const said = (["warn", "error"] as const).map((level) => vi.spyOn(console, level).mockImplementation(() => {}));
+      try {
+        const result = roundTrip(design, { displayMode });
+        // (Advice for a template's author, said of a row with padding and a content background as the editor makes
+        // one: not a problem in the design.)
+        const words = said.flatMap((spy) => spy.mock.calls.map((call) => String(call[0]))).filter((word) => !word.startsWith("[Unlayer] Row padding sits outside"));
+        if (result.differences.length || words.length) {
+          failures.push(`seed ${seed}:\n${result.differences.map((d) => `  ${d.path}: ${JSON.stringify(d.expected)} → ${JSON.stringify(d.actual)}`).join("\n")}${words.map((w) => `\n  said: ${w}`).join("")}`);
+        }
+        modules.set(path.join(PACKAGE, "src/codegen/__generated__", `seed-${seed}.tsx`), result.code);
+      } catch (error) {
+        failures.push(`seed ${seed}: ${(error as Error).message}`);
+      } finally {
+        said.forEach((spy) => spy.mockRestore());
+      }
+    }
+    expect(failures.slice(0, 10).join("\n")).toBe("");
+    expect(typecheck(modules).slice(0, 10)).toEqual([]);
+    // As prettier writes it (the first hundred: prettier takes its time).
+    const unformatted: string[] = [];
+    for (const [file, code] of [...modules].slice(0, 100)) if ((await prettier.format(code, { parser: "typescript" })) !== code) unformatted.push(path.basename(file));
+    expect(unformatted).toEqual([]);
+  }, 300_000);
+});
diff --git a/packages/react/src/codegen/index.ts b/packages/react/src/codegen/index.ts
new file mode 100644
index 00000000..064982d3
--- /dev/null
+++ b/packages/react/src/codegen/index.ts
@@ -0,0 +1,6 @@
+/**
+ * @unlayer/react-elements/codegen: an Unlayer design (the JSON the editor saves) as Elements code. Its own entry,
+ * so the main one doesn't carry it; pure (no React rendering, no Node APIs), so it runs in a browser too.
+ */
+export { designToElements, type DesignToElementsOptions, type DesignToElementsResult, type DisplayMode } from "./design-to-elements";
+export { formatElements } from "./format";
diff --git a/packages/react/src/codegen/links.ts b/packages/react/src/codegen/links.ts
new file mode 100644
index 00000000..65f2e624
--- /dev/null
+++ b/packages/react/src/codegen/links.ts
@@ -0,0 +1,130 @@
+/**
+ * The editor's links as the URLs it exports. The editor saves a link as an action, `{ name, values, attrs }` (a web
+ * page, an email, a phone call, a text message, a page section, or a link type of the embedder's), whose `attrs` are
+ * templates (`mailto:{{email}}?subject={{subject}}&body={{body}}`) its exporters fill in with `values`. Elements'
+ * components take a link as its URL, so codegen writes that URL, filled in as the exporters fill it (`fill`, quirks
+ * and all), and compare.ts compares links by it.
+ */
+import { deepEqual, isPlainObject, type Plain } from "./values";
+
+/** The editor's own actions: their templates, and their fields' defaults, which its link editor fills in. */
+const ACTIONS: Record<string, { attrs: Plain; fields: Plain }> = {
+  web: { attrs: { href: "{{href}}", target: "{{target}}" }, fields: { href: "", target: "_blank" } },
+  email: { attrs: { href: "mailto:{{email}}?subject={{subject}}&body={{body}}" }, fields: { email: "", subject: "", body: "" } },
+  phone: { attrs: { href: "tel:{{phone}}" }, fields: { phone: "" } },
+  sms: { attrs: { href: "sms:{{phone}}" }, fields: { phone: "" } },
+  anchor: { attrs: { href: "#{{href}}", target: "_self" }, fields: { href: "" } },
+};
+
+/** The actions the builder's link editor reads back from their URL: a web link to `mailto:…` opens as an email. */
+export const READ_BACK = new Set(["web", "email", "phone", "sms"]);
+
+/**
+ * A link as the editor exports it: its URL (`""` for none) and where it opens; `kept` where the builder reads the
+ * same action back from that URL. `lost`: what it has beside them, which no URL holds (code it runs, a class, a
+ * download, a `rel`, a `title`, data attributes, any other attribute).
+ */
+export type EditorLink = { url: string; target: string; kept: boolean } | { lost: string[] };
+
+/** A value as the editor writes it into a template: a list option's `value`, a number as its digits. */
+const text = (value: unknown): string => (typeof value === "number" ? `${value}` : `${(isPlainObject(value) && "value" in value ? value.value : undefined) ?? value ?? ""}`);
+
+/** Each character but `{` and `}` (a merge tag's) percent-encoded, as the editor encodes a query's values. */
+const encode = (value: string) => Array.from(value, (c) => (c === "{" || c === "}" ? c : encodeURIComponent(c))).join("");
+
+/** The editor's built-in placeholders: one left unfilled is no link. */
+const PLACEHOLDERS = ["{{href}}", "{{url}}", "{{custom}}"];
+
+/**
+ * An attribute of a link (`href`, `target`, …) as the editor's exporters write it: its template (with what a `+href`
+ * template adds to it) filled in with the link's values, those in a query encoded; or, without a template, the value
+ * of that name. An `href` drops a `mailto:`'s empty fields, and is undefined where it's empty or an unfilled
+ * placeholder.
+ */
+function fill(key: string, attrs: Plain | undefined, values: Plain): string | undefined {
+  let template = `${attrs?.[key] ?? ""}`;
+  const more = attrs?.[`+${key}`];
+  if (more) {
+    const add = String(more);
+    template += template.startsWith("#") && /^[?&]/.test(add) ? "" : add.startsWith("?") && template.includes("?") ? add.replace("?", "&") : add.startsWith("&") && !template.includes("?") ? add.replace("&", "?") : add;
+  }
+  if (!template) return `${values[key] || ""}`;
+  // A value goes in as it is, or encoded after the template's `?` or first `&`: where the placeholder is in the URL
+  // filled in so far, against where those are in the template, as the editor's exporters place it.
+  const query = template.indexOf("?");
+  const amp = template.match(/&(?!amp;)/)?.index ?? Infinity;
+  // The URL in pieces: the template's own, and the values filled in, whose placeholders aren't filled again (the
+  // exporters fill a value's `{{…}}` as the template's: a design under 1 KB, its values nesting them, gave 10 MB).
+  let pieces: Array<{ text: string; filled: boolean }> = [{ text: template, filled: false }];
+  for (const [name, value] of Object.entries(values)) {
+    const list = Array.isArray(value) ? value.map(text).map(encode).join(key === "class" ? " " : ",") : undefined;
+    const placeholder = `{{${name}}}`;
+    const next: typeof pieces = [];
+    // (Where it is in the URL filled in so far, as the exporters read it.)
+    let offset = 0;
+    for (const piece of pieces) {
+      let from = 0;
+      if (!piece.filled) {
+        for (let at = piece.text.indexOf(placeholder); at >= 0; at = piece.text.indexOf(placeholder, from)) {
+          if (at > from) next.push({ text: piece.text.slice(from, at), filled: false });
+          const where = offset + at;
+          next.push({ text: list ?? ((query >= 0 && where > query) || where > amp ? encode(text(value)) : text(value)), filled: true });
+          from = at + placeholder.length;
+        }
+      }
+      if (from < piece.text.length) next.push({ text: piece.text.slice(from), filled: piece.filled });
+      offset += piece.text.length;
+    }
+    pieces = next;
+  }
+  let result = pieces.map((piece) => piece.text).join("");
+  if (key !== "href") return result;
+  // Email clients (Outlook) break on a `mailto:` with an empty field, and a URL doesn't end in `?` or `&`.
+  // (A field's name is read from where its letters start: from inside them, a long run with no `=` was read again from
+  // each of its letters.)
+  if (result.startsWith("mailto:")) result = result.replace(/([?&]?)(?<!\w)(\w+)=(&|$)/g, "$1");
+  result = result.replace(/[?&]$/, "");
+  if (!result.trim()) return undefined;
+  if (PLACEHOLDERS.includes(result) && template.includes(result) && !text(values[result.slice(2, -2)])) return undefined;
+  return result;
+}
+
+/**
+ * A link (a design's `href`, `action` or menu item `link`) as the editor exports it, or undefined where it isn't one.
+ * A link without its templates (a design the editor didn't save) is read as the editor's link editor reads it: with
+ * its action's, its fields' defaults filled in.
+ */
+export function editorLink(link: unknown): EditorLink | undefined {
+  if (typeof link === "string") return { url: link, target: "_blank", kept: true };
+  if (!isPlainObject(link)) return undefined;
+  // The shape the exporters read (Elements' components take it too).
+  if ("url" in link && !("name" in link)) {
+    const lost = Object.keys(link).filter((key) => key !== "url" && key !== "target" && link[key] !== undefined && link[key] !== "" && !(isPlainObject(link[key]) && !Object.keys(link[key]).length));
+    return lost.length ? { lost } : { url: `${link.url || ""}`, target: `${link.target || "_blank"}`, kept: true };
+  }
+  if (typeof link.name !== "string") return undefined;
+  const action = ACTIONS[link.name];
+  const own = isPlainObject(link.attrs) ? link.attrs : undefined;
+  const attrs = own ?? action?.attrs;
+  // In the order the values fill the templates in (which can matter, see fill): the design's, as the exporters take
+  // them, with the fields it doesn't have after; or the link editor's, fields first, where it gives the templates.
+  const given: Plain = isPlainObject(link.values) ? link.values : {};
+  const values: Plain = own ? { ...given } : { ...action?.fields };
+  for (const [key, value] of Object.entries(own ? (action?.fields ?? {}) : given)) if (value !== undefined && (!own || values[key] === undefined)) values[key] = value;
+  // What it has beside its URL and where it opens, which are all a component's link takes (a Button's `href` and
+  // `target`, an Image's action, a Menu item's `href` and `target`): any other attribute, unless it's filled in empty.
+  const others = new Set(Object.keys(attrs ?? {}).map((key) => key.replace(/^\+/, "")));
+  for (const key of ["href", "target", "onClick", "class", "download"]) others.delete(key);
+  const lost = [
+    ...["onClick", "class"].filter((key) => fill(key, attrs, values)),
+    ...(fill("download", attrs, values) === "true" ? ["download"] : []),
+    ...[...others].filter((key) => fill(key, attrs, values) || (key.startsWith("data-") && values[key])),
+  ];
+  if (lost.length) return { lost };
+  return {
+    url: fill("href", attrs, values) ?? "",
+    target: fill("target", attrs, values) || "_blank",
+    // (A web link is one whatever its templates.)
+    kept: link.name === "web" || (READ_BACK.has(link.name) && (!own || deepEqual(own, action.attrs))),
+  };
+}
diff --git a/packages/react/src/codegen/print.ts b/packages/react/src/codegen/print.ts
new file mode 100644
index 00000000..416ea1f6
--- /dev/null
+++ b/packages/react/src/codegen/print.ts
@@ -0,0 +1,298 @@
+/**
+ * The generated module as text: a small JSX tree printed the way prettier prints it (80 columns, two spaces, double
+ * quotes, trailing commas), so the code reads as written by hand and formatting it changes little or nothing.
+ */
+import { isIdentifier, isPlainObject } from "./values";
+
+/** A JavaScript expression written as it is (`ColumnLayouts.TwoEqual`). */
+export interface Code {
+  code: string;
+}
+
+/** A value written as a type, whatever it holds (`{ … } as unknown as ParagraphProps["values"]`). */
+export interface Cast {
+  value: unknown;
+  type: string;
+}
+
+export interface Attr {
+  name: string;
+  /** A JSON-like value, `Code` or `Cast`. `true` prints as the bare attribute. */
+  value: unknown;
+}
+
+export interface JsxElement {
+  tag: string;
+  attrs: Attr[];
+  children: JsxChild[];
+}
+
+/** An element, text (printed as JSX text: no markup or braces in it), or a `{/* comment *\/}`. */
+export type JsxChild = JsxElement | { text: string } | { comment: string };
+
+const isCode = (value: unknown): value is Code => isPlainObject(value) && typeof value.code === "string" && Object.keys(value).length === 1 && CODE.has(value);
+const isCast = (value: unknown): value is Cast => isPlainObject(value) && CAST.has(value);
+// Marked, so a design value shaped like one ({ code: "…" }) stays a value.
+const CODE = new WeakSet<object>();
+const CAST = new WeakSet<object>();
+export function codeValue(text: string): Code {
+  const value = { code: text };
+  CODE.add(value);
+  return value;
+}
+export function castValue(value: unknown, type: string): Cast {
+  const cast = { value, type };
+  CAST.add(cast);
+  return cast;
+}
+
+// ── Documents (as prettier's: text, lines that break or not, indentation and groups) ───────────────────────────
+
+type Doc =
+  | string
+  | Doc[]
+  | { t: "line"; soft?: boolean; hard?: boolean }
+  | { t: "indent"; doc: Doc }
+  | { t: "group"; doc: Doc; broken?: boolean }
+  | { t: "ifBreak"; broken: Doc; flat: Doc }
+  /** Words, as many on a line as fit (prettier's `fill` of JSX text). */
+  | { t: "fill"; words: string[] };
+
+const line: Doc = { t: "line" };
+const softline: Doc = { t: "line", soft: true };
+const hardline: Doc = { t: "line", hard: true };
+const indent = (doc: Doc): Doc => ({ t: "indent", doc });
+const group = (doc: Doc, broken = false): Doc => ({ t: "group", doc, broken: broken || hasHardline(doc) });
+const ifBreak = (broken: Doc, flat: Doc = ""): Doc => ({ t: "ifBreak", broken, flat });
+
+function hasHardline(doc: Doc): boolean {
+  if (typeof doc === "string") return false;
+  if (Array.isArray(doc)) return doc.some(hasHardline);
+  if (doc.t === "line") return !!doc.hard;
+  if (doc.t === "group") return !!doc.broken;
+  if (doc.t === "indent") return hasHardline(doc.doc);
+  if (doc.t === "fill") return false;
+  return hasHardline(doc.broken);
+}
+
+type Mode = "flat" | "break";
+type Command = [number, Mode, Doc];
+
+/** Whether `next`, flat, and what follows it up to the next line break, fit in `width`. */
+function fits(next: Command, rest: Command[], width: number): boolean {
+  const cmds: Command[] = [next];
+  let restAt = rest.length - 1;
+  let remaining = width;
+  while (remaining >= 0) {
+    if (!cmds.length) {
+      if (restAt < 0) return true;
+      cmds.push(rest[restAt--]);
+      continue;
+    }
+    const [ind, mode, doc] = cmds.pop()!;
+    if (typeof doc === "string") remaining -= doc.length;
+    else if (Array.isArray(doc)) for (let i = doc.length - 1; i >= 0; i--) cmds.push([ind, mode, doc[i]]);
+    else if (doc.t === "indent") cmds.push([ind + 2, mode, doc.doc]);
+    else if (doc.t === "group") {
+      if (doc.broken && mode === "flat") return false;
+      cmds.push([ind, doc.broken ? "break" : mode, doc.doc]);
+    } else if (doc.t === "ifBreak") cmds.push([ind, mode, mode === "break" ? doc.broken : doc.flat]);
+    else if (doc.t === "fill") {
+      if (mode === "break") return true;
+      remaining -= doc.words.join(" ").length;
+    } else if (mode === "break" || doc.hard) return true;
+    else remaining -= doc.soft ? 0 : 1;
+  }
+  return false;
+}
+
+/** `text` without the spaces and tabs it ends in (looked for from its end: a regex tries again from each space). */
+function trimEnd(text: string): string {
+  let end = text.length;
+  while (end && (text[end - 1] === " " || text[end - 1] === "\t")) end--;
+  return end === text.length ? text : text.slice(0, end);
+}
+
+const LINE_BREAK = /[\n\r\u2028\u2029]/;
+
+/** `text` without the spaces and tabs before each of its line breaks and at its end. */
+function trimLines(text: string): string {
+  if (!LINE_BREAK.test(text)) return trimEnd(text);
+  let trimmed = "";
+  let start = 0;
+  for (let i = 0; i < text.length; i++) {
+    if (!LINE_BREAK.test(text[i])) continue;
+    trimmed += trimEnd(text.slice(start, i)) + text[i];
+    start = i + 1;
+  }
+  return trimmed + trimEnd(text.slice(start));
+}
+
+function render(doc: Doc, width = 80): string {
+  // The lines written, and the one being written: their trailing spaces taken off once, at the end (taking them off
+  // the whole text at each line break took time growing with the code's size squared, and more).
+  const lines: string[] = [];
+  let out = "";
+  let column = 0;
+  const cmds: Command[] = [[0, "break", doc]];
+  while (cmds.length) {
+    const [ind, mode, d] = cmds.pop()!;
+    if (typeof d === "string") {
+      out += d;
+      column += d.length;
+    } else if (Array.isArray(d)) for (let i = d.length - 1; i >= 0; i--) cmds.push([ind, mode, d[i]]);
+    else if (d.t === "indent") cmds.push([ind + 2, mode, d.doc]);
+    else if (d.t === "group") cmds.push([ind, !d.broken && fits([ind, "flat", d.doc], cmds, width - column) ? "flat" : "break", d.doc]);
+    else if (d.t === "ifBreak") cmds.push([ind, mode, mode === "break" ? d.broken : d.flat]);
+    else if (d.t === "fill") {
+      d.words.forEach((word, i) => {
+        if (i && (mode === "break" && column + 1 + word.length > width)) {
+          out += "\n" + " ".repeat(ind);
+          column = ind;
+        } else if (i) {
+          out += " ";
+          column += 1;
+        }
+        out += word;
+        column += word.length;
+      });
+    } else if (mode === "flat" && !d.hard) {
+      if (!d.soft) {
+        out += " ";
+        column += 1;
+      }
+    } else {
+      lines.push(out);
+      out = " ".repeat(ind);
+      column = ind;
+    }
+  }
+  lines.push(out);
+  return lines.map(trimLines).join("\n");
+}
+
+// ── Values ──────────────────────────────────────────────────────────────────────────────────────────────────────
+
+/** A string literal, quoted as prettier quotes it: double quotes unless that needs more escapes than single. */
+export function stringLiteral(text: string): string {
+  const doubles = (text.match(/"/g) ?? []).length;
+  const singles = (text.match(/'/g) ?? []).length;
+  const quote = doubles > singles ? "'" : '"';
+  const escaped = text.replace(/[\\\n\r\t\u0000-\u001f\u2028\u2029]/g, (c) => ESCAPES[c] ?? `\\u${c.charCodeAt(0).toString(16).padStart(4, "0")}`);
+  return quote + escaped.split(quote).join(`\\${quote}`) + quote;
+}
+const ESCAPES: Record<string, string> = { "\\": "\\\\", "\n": "\\n", "\r": "\\r", "\t": "\\t" };
+
+const propertyKey = (key: string) => (isIdentifier(key) ? key : /^(0|[1-9]\d*)$/.test(key) ? key : stringLiteral(key));
+
+/**
+ * How deep objects and lists in one another are written out. Deeper (a design's values hold nothing nearly as deep),
+ * one is written as its JSON (`JSON.parse('{"a":…}')`), which gives it back the same, where it's only JSON's values:
+ * written out, each level's indentation made the code grow with the depth squared (a value 400 deep was 338 KB).
+ */
+const DEEP = 16;
+
+/** Whether `value` is only what JSON writes as it is (so `JSON.parse(JSON.stringify(value))` is the same): worked out once for each object. */
+function isJson(value: unknown, known = new WeakMap<object, boolean>()): boolean {
+  if (value === null || typeof value === "string" || typeof value === "boolean" || typeof value === "number") return true;
+  if (typeof value !== "object" || isCode(value) || isCast(value) || !(Array.isArray(value) || isPlainObject(value))) return false;
+  let json = known.get(value);
+  if (json === undefined) {
+    json = Array.isArray(value) ? value.every((item) => item !== undefined && isJson(item, known)) : Object.values(value).every((item) => item === undefined || isJson(item, known));
+    known.set(value, json);
+  }
+  return json;
+}
+/** What isJson found, for the module being printed. */
+let JSONS = new WeakMap<object, boolean>();
+
+/** A value too deep to write out, as its JSON (as prettier writes the call: its string on a line of its own where it doesn't fit). */
+const jsonDoc = (value: unknown): Doc => group(["JSON.parse(", indent([softline, stringLiteral(JSON.stringify(value))]), ifBreak(","), softline, ")"]);
+
+function valueDoc(value: unknown, depth = 0): Doc {
+  if (isCode(value)) return value.code;
+  // (`as unknown` first: a value that isn't comparable to the type compiles too.)
+  if (isCast(value)) return [valueDoc(value.value), " as unknown as ", value.type];
+  if (value === undefined) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "string") return stringLiteral(value);
+  if (typeof value === "number") return Number.isFinite(value) ? String(value) : "null";
+  if (typeof value === "boolean") return String(value);
+  if (Array.isArray(value)) {
+    if (!value.length) return "[]";
+    // A list of objects, or of lists, each with more than one item, is one per line (as prettier writes it).
+    if (depth >= DEEP && isJson(value, JSONS)) return jsonDoc(value);
+    const items = value as unknown[];
+    const rows = items.length > 1 && (items.every((item) => isPlainObject(item) && Object.keys(item).length > 1) || items.every((item) => Array.isArray(item) && item.length > 1));
+    return group(["[", indent([softline, join([",", line], items.map((item) => valueDoc(item, depth + 1)))]), ifBreak(","), softline, "]"], rows);
+  }
+  if (isPlainObject(value)) {
+    const entries = Object.entries(value).filter(([, item]) => item !== undefined);
+    if (!entries.length) return "{}";
+    if (depth >= DEEP && isJson(value, JSONS)) return jsonDoc(value);
+    // A string that doesn't fit beside its key goes on the next line, unless the key is short (prettier's rule).
+    const property = ([key, item]: [string, unknown]): Doc => {
+      const name = propertyKey(key);
+      return typeof item === "string" && name.length >= 5 ? group([name, ":", indent([line, valueDoc(item, depth + 1)])]) : [name, ": ", valueDoc(item, depth + 1)];
+    };
+    return group(["{", indent([line, join([",", line], entries.map(property))]), ifBreak(","), line, "}"]);
+  }
+  return stringLiteral(String(value));
+}
+
+function join(separator: Doc, docs: Doc[]): Doc[] {
+  return docs.flatMap((doc, i) => (i ? [separator, doc] : [doc]));
+}
+
+// ── JSX ─────────────────────────────────────────────────────────────────────────────────────────────────────────
+
+/** Whether a string can be a JSX attribute string as it is (JSX decodes entities there, and has no escapes). */
+const attributeSafe = (text: string) => !/[&\n\r\u0000-\u001f\u2028\u2029]/.test(text) && !(text.includes('"') && text.includes("'"));
+
+function attrDoc({ name, value }: Attr): Doc {
+  if (value === true) return name;
+  if (typeof value === "string" && attributeSafe(value)) {
+    const quote = (value.match(/"/g) ?? []).length > (value.match(/'/g) ?? []).length ? "'" : '"';
+    return `${name}=${quote}${value}${quote}`;
+  }
+  // Objects and arrays hug the braces; anything else (a cast) goes on a line of its own when it doesn't fit.
+  if ((isPlainObject(value) && !isCast(value)) || Array.isArray(value)) return [name, "={", valueDoc(value), "}"];
+  return group([name, "={", indent([softline, valueDoc(value)]), softline, "}"]);
+}
+
+function elementDoc(element: JsxElement): Doc {
+  const { tag, attrs, children } = element;
+  // One string attribute stays beside the tag whatever its length, as prettier keeps it.
+  const single = attrs.length === 1 && typeof attrs[0].value === "string" && attributeSafe(attrs[0].value);
+  const attrsDoc: Doc = attrs.length ? (single ? [" ", attrDoc(attrs[0])] : [indent([line, join(line, attrs.map(attrDoc))])]) : "";
+  if (!children.length) return single ? ["<", tag, attrsDoc, " />"] : group(["<", tag, attrsDoc, line, "/>"]);
+  const open = group(["<", tag, attrsDoc, single || !attrs.length ? "" : softline, ">"]);
+  const body = children.map(childDoc);
+  // Elements inside, or more than one attribute, put the children on lines of their own (as prettier does).
+  const broken = attrs.length > 1 || children.some((child) => !("text" in child));
+  return group([open, indent([softline, join(hardline, body)]), softline, "</", tag, ">"], broken);
+}
+
+function childDoc(child: JsxChild): Doc {
+  if ("text" in child) return { t: "fill", words: child.text.split(" ") };
+  // On one line, and unable to end itself.
+  if ("comment" in child) return `{/* ${child.comment.replace(/[\u0000-\u001f\u2028\u2029]+/g, " ").replace(/\*\//g, "* /")} */}`;
+  return elementDoc(child);
+}
+
+export interface ModuleSource {
+  imports: Array<{ from: string; names: string[] }>;
+  componentName: string;
+  root: JsxElement;
+}
+
+/** The module: imports and `export default function Name() { return (…); }`. */
+export function printModule({ imports, componentName, root }: ModuleSource): string {
+  JSONS = new WeakMap();
+  const importDocs: Doc[] = imports.map(({ from, names }) => group(["import {", indent([line, join([",", line], names)]), ifBreak(","), line, "} from ", stringLiteral(from), ";"]));
+  const returned = group(["return ", ifBreak("("), indent([softline, elementDoc(root)]), softline, ifBreak(")"), ";"]);
+  const body: Doc = ["export default function ", componentName, "() {", indent([hardline, returned]), hardline, "}"];
+  const parts: Doc[] = [join(hardline, importDocs)];
+  parts.push(body);
+  return render(join([hardline, hardline], parts)) + "\n";
+}
diff --git a/packages/react/src/codegen/props.ts b/packages/react/src/codegen/props.ts
new file mode 100644
index 00000000..c9647209
--- /dev/null
+++ b/packages/react/src/codegen/props.ts
@@ -0,0 +1,196 @@
+/**
+ * Design values as a component's props: semantic flat props where the component has one (and the value comes back
+ * through it as it is), the rest in its `values` escape hatch. Whether a value comes back is checked with the same
+ * mapper the components use (`mapSemanticProps`), so a prop that the components would normalize differently
+ * (a numeric `fontSize`, a `lineHeight` number, a name a nested group takes) goes in `values` instead.
+ */
+import { mapSemanticProps, mergeValues, normalizeCssValues } from "@unlayer-internal/shared-elements";
+import { castValue, type Attr } from "./print";
+import { valuesTypeCheck } from "./checked-values";
+import { deepEqual, differences, isIdentifier, isPlainObject, type Plain } from "./values";
+
+/** The props of one element, in order, with what goes in `values`. */
+export class Props {
+  readonly attrs: Attr[] = [];
+  readonly values: Plain = {};
+  /** Text children. */
+  text?: string;
+
+  constructor(readonly component: string) {}
+
+  add(name: string, value: unknown): void {
+    this.attrs.push({ name, value });
+  }
+}
+
+/** A node's `_meta`: its ids are left out (renderToJson numbers them), anything else is kept in `values`. */
+export function withoutMeta(values: Plain, props: Props): Plain {
+  const { _meta, ...rest } = values;
+  const meta = isPlainObject(_meta) ? Object.fromEntries(Object.entries(_meta).filter(([key]) => key !== "htmlID" && key !== "htmlClassNames")) : {};
+  if (Object.keys(meta).length) props.values._meta = meta;
+  return rest;
+}
+
+/**
+ * The attributes of an element: its props, then `values`, as they are where they type-check (see checked-values.ts),
+ * else as the component's `values` type (whose props type the module imports, in `types`).
+ */
+export function attributes(props: Props, types: Set<string>): Attr[] {
+  if (!Object.keys(props.values).length) return props.attrs;
+  if (valuesTypeCheck(props.component, props.values)) return [...props.attrs, { name: "values", value: props.values }];
+  const type = `${props.component}Props`;
+  types.add(type);
+  return [...props.attrs, { name: "values", value: castValue(props.values, `${type}["values"]`) }];
+}
+
+/**
+ * Prop names with a meaning of their own on every component (never a design key written as a flat prop). Each
+ * component's own (Image's `width`, Table's `rows`) are left out of its typed keys (see blocks.ts).
+ */
+const RESERVED = new Set([
+  "children", "values", "key", "ref", "mode", "className", "style", "index", "colIndex", "cells", "bodyValues", "rowValues",
+  "columnValues", "_config", "_metaHtmlId", "config", "collection", "mobile", "hideOnMobile", "hideOnDesktop", "skipInText", "target",
+]);
+
+/**
+ * What a prop's type takes, where it's narrower than any value (one of a few strings, a px length): a value outside
+ * it goes in `values` (it wouldn't type-check). By key; `component` where it differs.
+ */
+const ROOTS = new Set(["Email", "Page", "Document"]);
+const oneOf = (...allowed: string[]) => (value: unknown) => typeof value === "string" && allowed.includes(value);
+const ALIGN = oneOf("left", "center", "right", "justify");
+const VERTICAL = oneOf("top", "middle", "bottom");
+// (`\d+(?:\.\d*)?`, not `\d+\.?\d*`: that splits a run of digits every way it can before a value that isn't one is
+// told, which took a second for 50,000 digits in a design's value.)
+const NUMBER = String.raw`-?(?:\d+(?:\.\d*)?|\.\d+)`;
+/** `number | ${number}px` */
+const PX = (value: unknown) => typeof value === "number" || (typeof value === "string" && new RegExp(`^${NUMBER}px$`).test(value));
+/** A box of px lengths, one to four (`8px 16px`). */
+const BOX = (value: unknown) => typeof value === "string" && new RegExp(`^${NUMBER}px(?: ${NUMBER}px){0,3}$`).test(value);
+/** `number | ${number}px | ${number}%` (and `auto`). */
+const LENGTH = (auto: boolean) => (value: unknown) => typeof value === "number" || (typeof value === "string" && (new RegExp(`^${NUMBER}(?:px|%)$`).test(value) || (auto && value === "auto")));
+const CHECKS: Record<string, (value: unknown, component: string) => boolean> = {
+  textAlign: ALIGN,
+  align: ALIGN,
+  contentAlign: oneOf("left", "center", "right"),
+  contentVerticalAlign: VERTICAL,
+  headerTextAlign: ALIGN,
+  contentTextAlign: ALIGN,
+  footerTextAlign: ALIGN,
+  headerVerticalAlign: VERTICAL,
+  footerVerticalAlign: VERTICAL,
+  headingType: oneOf("h1", "h2", "h3", "h4", "h5", "h6"),
+  documentSize: oneOf("A3", "A4", "A5", "Legal", "Letter", "Tabloid"),
+  documentOrientation: oneOf("portrait", "landscape"),
+  textDirection: oneOf("ltr", "rtl", "auto"),
+  layout: oneOf("horizontal", "vertical"),
+  contentWidth: LENGTH(true),
+  width: (value, component) => component !== "Divider" || LENGTH(false)(value),
+  headerFontSize: PX,
+  contentFontSize: PX,
+  footerFontSize: PX,
+  headerPadding: BOX,
+  contentPadding: BOX,
+  footerPadding: BOX,
+  // A block's weight takes a number, a numeric string or a keyword; the root's and a table's, a number.
+  fontWeight: (value, component) => typeof value === "number" || (!ROOTS.has(component) && typeof value === "string" && /^(\d+|normal|bold|lighter|bolder)$/.test(value)),
+  headerFontWeight: (value) => typeof value === "number",
+  contentFontWeight: (value) => typeof value === "number",
+  footerFontWeight: (value) => typeof value === "number",
+  // A Button's size: its width as its type takes it.
+  size: (value) => !isPlainObject(value) || value.width === undefined || LENGTH(false)(value.width),
+  backgroundImage: (value, component) =>
+    !ROOTS.has(component) ||
+    (isPlainObject(value) &&
+      (value.size === undefined || oneOf("custom", "contain", "cover")(value.size)) &&
+      (value.repeat === undefined || oneOf("repeat", "no-repeat", "repeat-x", "repeat-y")(value.repeat)) &&
+      (value.position === undefined || oneOf("custom", "center", "top-left", "top-center", "top-right", "center-left", "center-right", "bottom-left", "bottom-center", "bottom-right")(value.position))),
+};
+
+/** Objects written whole, not as what differs from their default. */
+const WHOLE = new Set(["fontFamily", "href", "action"]);
+
+/** A font as the blocks' `fontFamily` prop types it: a label and a value (the root's also takes a URL and more). */
+const simpleFont = (value: unknown) => isPlainObject(value) && typeof value.label === "string" && typeof value.value === "string" && Object.keys(value).length === 2;
+
+/** Whether `value` type-checks as the `key` prop of `component`. */
+export function typeChecks(key: string, value: unknown, component: string, richFonts = false): boolean {
+  if (value === null) return false;
+  if (key === "fontFamily" && !richFonts) return simpleFont(value);
+  return CHECKS[key]?.(value, component) ?? true;
+}
+
+/** A component's nested groups (as `mapSemanticProps` finds them): each non-empty object default, and its keys. */
+function nestedGroups(defaults: Plain): Map<string, Set<string>> {
+  const groups = new Map<string, Set<string>>();
+  for (const [key, value] of Object.entries(defaults)) {
+    if (key === "_meta" || key === "text" || key === "textJson") continue;
+    if (isPlainObject(value) && Object.keys(value).length) groups.set(key, new Set(Object.keys(value)));
+  }
+  return groups;
+}
+
+/** What a design value becomes in the design the props render to: merged into its default, colors normalized. */
+const expected = (key: string, value: unknown, defaults: Plain) =>
+  normalizeCssValues({ [key]: isPlainObject(value) && isPlainObject(defaults[key]) ? mergeValues(defaults[key], value) : value })[key];
+
+export interface PlaceOptions {
+  /** Design keys this component has a flat prop for (typed in its props). */
+  typed: ReadonlySet<string>;
+  /** Groups whose changed keys read best as flat props (`backgroundColor` for `buttonColors`). */
+  flatten?: ReadonlySet<string>;
+  /** Keys placed last, in this order (`containerPadding`). */
+  last?: string[];
+  /** The `fontFamily` prop takes the builder's whole font (a URL, weights): the root's does. */
+  richFonts?: boolean;
+}
+
+/**
+ * Place `rest` (design values not handled otherwise) on `props`: each value that differs from `defaults` as a flat
+ * prop (a nested object as the part of it that differs, or its keys as flat props), or in `values`.
+ */
+export function placeValues(rest: Plain, defaults: Plain, props: Props, { typed, flatten, last = [], richFonts }: PlaceOptions): void {
+  const groups = nestedGroups(defaults);
+  const groupOf = (name: string) => [...groups].find(([, keys]) => keys.has(name))?.[0];
+  const usable = (name: string) => isIdentifier(name) && !RESERVED.has(name);
+  const placed: Array<{ key: string; attrs: Attr[] }> = [];
+  const keys = [...Object.keys(rest).filter((key) => !last.includes(key)), ...last.filter((key) => key in rest)];
+
+  for (const key of keys) {
+    const value = rest[key];
+    if (value === undefined || deepEqual(value, defaults[key])) continue;
+    // A name a nested group takes (a flat `url` is a background image's): only as itself where it's a value of its own.
+    const routed = !groups.has(key) && !(key in defaults) && groupOf(key) !== undefined;
+    if (!typed.has(key) || !usable(key) || routed || !typeChecks(key, value, props.component, richFonts)) {
+      props.values[key] = value;
+      continue;
+    }
+    if (isPlainObject(value) && isPlainObject(defaults[key])) {
+      const diff = differences(value, defaults[key]) as Plain | undefined;
+      if (!diff) continue;
+      const flat = flatten?.has(key) && Object.keys(diff).every((sub) => usable(sub) && !(sub in defaults) && (groupOf(sub) ?? key) === key && typeChecks(sub, diff[sub], props.component));
+      // (A font and a link are one thing each: written whole.)
+      placed.push({ key, attrs: flat ? Object.entries(diff).map(([name, item]) => ({ name, value: item })) : [{ name: key, value: WHOLE.has(key) ? value : diff }] });
+      continue;
+    }
+    placed.push({ key, attrs: [{ name: key, value }] });
+  }
+
+  // Each value as the props give it back (the components' own mapper), or in `values`.
+  const flatProps = Object.fromEntries(placed.flatMap(({ attrs }) => attrs.map((attr) => [attr.name, attr.value])));
+  const given = mergeValues(defaults, mapSemanticProps(flatProps as never, defaults, props.component) as Plain);
+  for (const { key, attrs } of placed) {
+    if (deepEqual(given[key], expected(key, rest[key], defaults))) props.attrs.push(...attrs);
+    else props.values[key] = rest[key];
+  }
+}
+
+/**
+ * Whether `values` come back as they are through the escape hatch: the keys that don't (a color written another way,
+ * a link in another shape) are what the design can't keep.
+ */
+export function lostThroughValues(values: Plain, defaults: Plain, component: string): string[] {
+  if (!Object.keys(values).length) return [];
+  const given = mergeValues(defaults, mapSemanticProps({ values } as never, defaults, component) as Plain);
+  return Object.keys(values).filter((key) => key !== "_override" && !deepEqual(given[key], expected(key, values[key], defaults)));
+}
diff --git a/packages/react/src/codegen/round-trip.test.tsx b/packages/react/src/codegen/round-trip.test.tsx
new file mode 100644
index 00000000..507886ab
--- /dev/null
+++ b/packages/react/src/codegen/round-trip.test.tsx
@@ -0,0 +1,39 @@
+/**
+ * The round trip that matters: a design → designToElements → the code compiled and rendered with renderToJson →
+ * the same design, as the builder shows it (see compare.ts for what the comparison leaves aside).
+ *
+ * Run over Elements' own templates and designs the editor saved (see __fixtures__/sources.tsx). It prints the pass
+ * rate and every value that doesn't survive; a value that stops surviving fails it.
+ */
+import { afterAll, describe, expect, it, vi } from "vitest";
+import { SOURCES } from "./__fixtures__/sources";
+import { roundTrip } from "./test-harness";
+
+/** What the editor designs keep that renderToJson can't write back (see the codegen guide): nothing else may differ. */
+const KNOWN_LOSSES: Record<string, string[]> = {
+  "kitchen sink": ["body.rows[0].values.deletable", "body.rows[0].columns[1].contents[0].values.selectable"],
+};
+
+const report: string[] = [];
+let passed = 0;
+
+describe("design → Elements code → renderToJson", () => {
+  it.each(SOURCES.map((c) => [`${c.source}: ${c.name}`, c] as const))("%s", (_, c) => {
+    const design = c.design();
+    // (The template may say things as it renders; the generated code renders without a word.)
+    const said = (["warn", "error"] as const).map((level) => vi.spyOn(console, level));
+    const result = roundTrip(design, { displayMode: c.displayMode });
+    for (const spy of said) {
+      expect(spy.mock.calls, c.name).toEqual([]);
+      spy.mockRestore();
+    }
+    const lost = result.differences.map((d) => d.path);
+    if (!lost.length) passed++;
+    else report.push(`${c.source}: ${c.name}\n${result.differences.map((d) => `    ${d.path}: ${JSON.stringify(d.expected)} → ${JSON.stringify(d.actual)}`).join("\n")}`);
+    expect(lost).toEqual(KNOWN_LOSSES[c.name] ?? []);
+  });
+
+  afterAll(() => {
+    console.info(`[codegen round trip] ${passed}/${SOURCES.length} designs come back the same (${((passed / SOURCES.length) * 100).toFixed(1)}%).${report.length ? `\nWhat doesn't survive:\n${report.join("\n")}` : ""}`);
+  });
+});
diff --git a/packages/react/src/codegen/state.ts b/packages/react/src/codegen/state.ts
new file mode 100644
index 00000000..01273b12
--- /dev/null
+++ b/packages/react/src/codegen/state.ts
@@ -0,0 +1,23 @@
+/** What a conversion collects as it goes: the components it uses, its warnings, and the types the module imports. */
+export class ModuleState {
+  readonly warnings: string[] = [];
+  /** Block components used, in order. */
+  readonly components = new Set<string>();
+  /** The web fonts whose `<Font>` gives their URL back to their family's fonts, by family (see fonts.ts). */
+  restoredFonts = new Map<string, string>();
+  /** The props types the module imports, for `values` written as their type (see props.ts). */
+  readonly types = new Set<string>();
+
+  constructor(
+    /** The design's exported HTML, for blocks Elements has no component for. */
+    readonly html?: string
+  ) {}
+
+  use(component: string): void {
+    this.components.add(component);
+  }
+
+  warn(message: string): void {
+    if (!this.warnings.includes(message)) this.warnings.push(message);
+  }
+}
diff --git a/packages/react/src/codegen/test-harness.ts b/packages/react/src/codegen/test-harness.ts
new file mode 100644
index 00000000..98df3a22
--- /dev/null
+++ b/packages/react/src/codegen/test-harness.ts
@@ -0,0 +1,181 @@
+/**
+ * For codegen's tests: generated code compiled (TypeScript's transpiler, as a project's build would), run, and
+ * rendered back to a design with renderToJson.
+ */
+import React from "react";
+import * as jsxRuntime from "react/jsx-runtime";
+import path from "node:path";
+import ts from "typescript";
+import * as Elements from "../index";
+import * as FontEntry from "../font/index";
+import { compareDesigns, type DesignDifference } from "./compare";
+import { designToElements, type DesignToElementsOptions } from "./design-to-elements";
+import type { Plain } from "./values";
+
+const MODULES: Record<string, unknown> = {
+  react: React,
+  "react/jsx-runtime": jsxRuntime,
+  "@unlayer/react-elements": Elements,
+  "@unlayer/react-elements/font": FontEntry,
+};
+
+/** The module's JavaScript (CommonJS, the automatic JSX runtime). */
+export function compile(code: string): string {
+  const { outputText, diagnostics } = ts.transpileModule(code, {
+    fileName: "Template.tsx",
+    reportDiagnostics: true,
+    compilerOptions: { jsx: ts.JsxEmit.ReactJSX, module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020, esModuleInterop: true },
+  });
+  if (diagnostics?.length) throw new Error(`generated code doesn't compile: ${diagnostics.map((d) => ts.flattenDiagnosticMessageText(d.messageText, "\n")).join("; ")}`);
+  return outputText;
+}
+
+/** The generated module's default export. */
+export function evaluate(code: string): React.ComponentType {
+  const module = { exports: {} as Record<string, unknown> };
+  const require = (id: string) => {
+    if (!(id in MODULES)) throw new Error(`generated code imports ${id}`);
+    return MODULES[id];
+  };
+  new Function("require", "module", "exports", compile(code))(require, module, module.exports);
+  return module.exports.default as React.ComponentType;
+}
+
+export interface RoundTrip {
+  code: string;
+  warnings: string[];
+  /** The design the code renders to. */
+  design: Plain;
+  differences: DesignDifference[];
+}
+
+/** design → code → renderToJson, and how what comes back differs from the design. */
+export function roundTrip(design: Plain, options?: DesignToElementsOptions): RoundTrip {
+  const { code, warnings } = designToElements(design, options);
+  const Template = evaluate(code);
+  const back = Elements.renderToJson(React.createElement(Template)) as unknown as Plain;
+  return { code, warnings, design: back, differences: compareDesigns(design, back) };
+}
+
+// (Read by codegen's own tests only. Not with `path`, which the production test run, React's production build, loads
+// as an empty module, where a regression test evaluates generated code.)
+export const PACKAGE = __dirname.replace(/[\\/]src[\\/]codegen[\\/]?$/, "");
+
+/** Diagnostics for `modules` (path → code) type-checked with the package's tsconfig.typecheck.json. */
+export function typecheck(modules: Map<string, string>): string[] {
+  const { config } = ts.readConfigFile(path.join(PACKAGE, "tsconfig.typecheck.json"), ts.sys.readFile);
+  const { options } = ts.parseJsonConfigFileContent(config, ts.sys, PACKAGE);
+  const host = ts.createCompilerHost(options);
+  const { getSourceFile, fileExists, readFile } = host;
+  host.fileExists = (file) => modules.has(file) || fileExists(file);
+  host.readFile = (file) => modules.get(file) ?? readFile(file);
+  host.getSourceFile = (file, language, ...rest) => (modules.has(file) ? ts.createSourceFile(file, modules.get(file)!, language, true, ts.ScriptKind.TSX) : getSourceFile(file, language, ...rest));
+  const program = ts.createProgram([...modules.keys()], { ...options, noEmit: true }, host);
+  return ts
+    .getPreEmitDiagnostics(program)
+    .filter((d) => !d.file || modules.has(d.file.fileName))
+    .map((d) => {
+      const at = d.file && d.start !== undefined ? d.file.getLineAndCharacterOfPosition(d.start).line : undefined;
+      const where = d.file ? `${path.basename(d.file.fileName)}${at !== undefined ? `:${at + 1} \`${d.file.text.split("\n")[at].trim()}\`` : ""}` : "";
+      return `${where}: ${ts.flattenDiagnosticMessageText(d.messageText, " ")}`;
+    });
+}
+
+/** The components whose `values` codegen writes (see checked-values.ts). */
+export const VALUES_COMPONENTS = ["Email", "Page", "Document", "Row", "Column", "Paragraph", "Heading", "Button", "Image", "Divider", "Html", "Menu", "Social", "Table", "Video", "PageBreak"];
+
+/**
+ * The keys each component's `values` prop takes, at every depth, as TypeScript reads its type: the source of
+ * values-shapes.ts. A key's shape is `0` (a value only), `1` (anything), its keys (an object), or `[item]` (a list);
+ * a key typed `never` is left out (it takes no value), and so is `_override`, whose devices take the component's keys.
+ */
+export function valuesShapes(): Record<string, unknown> {
+  const file = path.join(PACKAGE, "src/codegen/__generated__/values-shapes.tsx");
+  const code = `import type * as E from "@unlayer/react-elements";\n${VALUES_COMPONENTS.map((name) => `export declare const ${name}: E.${name}Props["values"];`).join("\n")}\n`;
+  const { config } = ts.readConfigFile(path.join(PACKAGE, "tsconfig.typecheck.json"), ts.sys.readFile);
+  const { options } = ts.parseJsonConfigFileContent(config, ts.sys, PACKAGE);
+  const host = ts.createCompilerHost(options);
+  const { getSourceFile, fileExists, readFile } = host;
+  host.fileExists = (name) => name === file || fileExists(name);
+  host.readFile = (name) => (name === file ? code : readFile(name));
+  host.getSourceFile = (name, language, ...rest) => (name === file ? ts.createSourceFile(name, code, language, true, ts.ScriptKind.TSX) : getSourceFile(name, language, ...rest));
+  const program = ts.createProgram([file], { ...options, noEmit: true }, host);
+  const checker = program.getTypeChecker();
+  const SCALAR = ts.TypeFlags.StringLike | ts.TypeFlags.NumberLike | ts.TypeFlags.BooleanLike | ts.TypeFlags.BigIntLike | ts.TypeFlags.Null | ts.TypeFlags.Undefined | ts.TypeFlags.Void | ts.TypeFlags.Never | ts.TypeFlags.ESSymbolLike;
+  type Shape = 0 | 1 | Shape[] | { [key: string]: Shape };
+  /** Two shapes a key may have (a union's members), as one. */
+  const merge = (a: Shape | undefined, b: Shape): Shape => {
+    if (a === undefined || a === 0) return b;
+    if (b === 0) return a;
+    if (a === 1 || b === 1) return 1;
+    if (Array.isArray(a) && Array.isArray(b)) return [merge(a[0], b[0])];
+    if (Array.isArray(a) || Array.isArray(b)) return 1;
+    const out: Record<string, Shape> = { ...a };
+    for (const [key, shape] of Object.entries(b)) out[key] = merge(out[key], shape);
+    return out;
+  };
+  const shapeOf = (type: ts.Type, depth: number): Shape => {
+    if (depth > 10 || type.flags & (ts.TypeFlags.Any | ts.TypeFlags.Unknown)) return 1;
+    let shape: Shape | undefined;
+    for (const member of type.isUnion() ? type.types : [type]) {
+      if (member.flags & SCALAR) continue;
+      // `string & {}`: a value (see LooseValue).
+      if (member.isIntersection() && member.types.some((part) => part.flags & SCALAR)) continue;
+      if (member.flags & (ts.TypeFlags.Any | ts.TypeFlags.Unknown)) return 1;
+      if (checker.isArrayType(member) || checker.isTupleType(member)) {
+        const items = checker.getTypeArguments(member as ts.TypeReference);
+        shape = merge(shape, [items.reduce<Shape>((all, item) => merge(all, shapeOf(item, depth + 1)), 0)]);
+        continue;
+      }
+      if (member.getCallSignatures().length || checker.getIndexInfoOfType(member, ts.IndexKind.String)) return 1;
+      const keys: Record<string, Shape> = {};
+      for (const property of checker.getPropertiesOfType(member)) {
+        const type = checker.getTypeOfSymbol(property);
+        const members = type.isUnion() ? type.types : [type];
+        if (members.every((part) => part.flags & (ts.TypeFlags.Undefined | ts.TypeFlags.Never))) continue;
+        if (depth === 0 && property.name === "_override") continue;
+        keys[property.name] = shapeOf(type, depth + 1);
+      }
+      shape = merge(shape, keys);
+    }
+    return shape ?? 0;
+  };
+  const source = program.getSourceFile(file)!;
+  const shapes: Record<string, unknown> = {};
+  ts.forEachChild(source, (node) => {
+    if (!ts.isVariableStatement(node)) return;
+    const declaration = node.declarationList.declarations[0];
+    shapes[declaration.name.getText(source)] = shapeOf(checker.getTypeAtLocation(declaration.name), 0);
+  });
+  return shapes;
+}
+
+/** values-shapes.ts, as valuesShapes() gives it (components with the same shape share it). */
+export function valuesShapesModule(): string {
+  const shapes = valuesShapes();
+  const named = new Map<string, string>();
+  const lines: string[] = [];
+  const entries = Object.entries(shapes).map(([component, shape]) => {
+    const text = JSON.stringify(shape);
+    if (!named.has(text)) {
+      named.set(text, component.toUpperCase());
+      lines.push(`const ${component.toUpperCase()}: Shape = ${text};`);
+    }
+    return `  ${component}: ${named.get(text)},`;
+  });
+  return [
+    "/**",
+    " * Generated from the components' `values` types by codegen's type-check test (`vitest run src/codegen -u` writes it",
+    " * again): the keys each `values` takes, at every depth (see checked-values.ts). A key's shape is `0` (a value only),",
+    " * `1` (anything), its keys (an object), or `[item]` (a list).",
+    " */",
+    "export type Shape = 0 | 1 | Shape[] | { [key: string]: Shape };",
+    "",
+    ...lines,
+    "",
+    "export const VALUES_SHAPES: Record<string, Shape> = {",
+    ...entries,
+    "};",
+    "",
+  ].join("\n");
+}
diff --git a/packages/react/src/codegen/text.ts b/packages/react/src/codegen/text.ts
new file mode 100644
index 00000000..5fdd01c1
--- /dev/null
+++ b/packages/react/src/codegen/text.ts
@@ -0,0 +1,56 @@
+/** Text in a design: what can be written as JSX children, and a block's HTML taken from an exported document. */
+
+/**
+ * The text of `html` when it can be JSX children that render back to exactly it: words apart by single spaces, with
+ * nothing React escapes (`&`, `<`, `>`, quotes) and no braces. Otherwise undefined (the HTML goes in a prop).
+ */
+export function plainText(html: unknown): string | undefined {
+  if (typeof html !== "string" || !html) return undefined;
+  return /^[^\s&<>"'{}]+(?: [^\s&<>"'{}]+)*$/.test(html) ? html : undefined;
+}
+
+const VOID = /^(area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)$/i;
+
+/** The element that starts at `start` (a `<tag …>`), as [its inner HTML's start, its inner HTML's end, its end]. */
+function elementAt(html: string, start: number): [number, number, number] | undefined {
+  const name = /^<([a-zA-Z][\w:-]*)/.exec(html.slice(start))?.[1];
+  const openEnd = html.indexOf(">", start);
+  if (!name || openEnd < 0) return undefined;
+  if (VOID.test(name) || html[openEnd - 1] === "/") return [openEnd + 1, openEnd + 1, openEnd + 1];
+  const tags = new RegExp(`<(/?)${name}(?=[\\s>/])`, "gi");
+  tags.lastIndex = openEnd + 1;
+  let depth = 1;
+  for (let m = tags.exec(html); m; m = tags.exec(html)) {
+    depth += m[1] ? -1 : 1;
+    if (depth === 0) return [openEnd + 1, m.index, html.indexOf(">", m.index) + 1];
+  }
+  return undefined;
+}
+
+/** Where the start tag that holds `attribute` (searched from `from`) begins. */
+function tagWith(html: string, attribute: RegExp, from = 0, to = html.length): number | undefined {
+  attribute.lastIndex = from;
+  const match = attribute.exec(html);
+  if (!match || match.index >= to) return undefined;
+  const start = html.lastIndexOf("<", match.index);
+  return start >= from ? start : undefined;
+}
+
+const escapeRegExp = (text: string) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+/**
+ * A block's own HTML in a document the editor exported (`exportHtml`): what's inside its padding, found by its
+ * `_meta.htmlID`. Undefined when the document doesn't have it.
+ */
+export function blockHtml(document: string | undefined, htmlID: unknown): string | undefined {
+  if (!document || typeof htmlID !== "string" || !htmlID) return undefined;
+  const start = tagWith(document, new RegExp(`\\sid=["']${escapeRegExp(htmlID)}["']`, "g"));
+  const block = start === undefined ? undefined : elementAt(document, start);
+  if (!block) return undefined;
+  const [from, to] = block;
+  // The editor wraps a block's HTML in an element with its padding (`v-container-padding-padding`).
+  const padded = tagWith(document, /\sclass=["'][^"']*\bv-container-padding-padding\b/g, from, to);
+  const inner = padded === undefined ? undefined : elementAt(document, padded);
+  const html = (inner ? document.slice(inner[0], inner[1]) : document.slice(from, to)).trim();
+  return html || undefined;
+}
diff --git a/packages/react/src/codegen/typecheck.test.ts b/packages/react/src/codegen/typecheck.test.ts
new file mode 100644
index 00000000..e677993e
--- /dev/null
+++ b/packages/react/src/codegen/typecheck.test.ts
@@ -0,0 +1,25 @@
+/**
+ * The generated code type-checks against the package's types: every design codegen's tests convert, as modules of
+ * one TypeScript program with the package's type-check settings (strict, the automatic JSX runtime).
+ */
+import { describe, expect, it } from "vitest";
+import path from "node:path";
+import { DESIGNS } from "./__fixtures__/designs";
+import { quiet, SOURCES } from "./__fixtures__/sources";
+import { designToElements } from "./design-to-elements";
+import { PACKAGE, typecheck, valuesShapesModule } from "./test-harness";
+
+describe("generated code", () => {
+  it("type-checks against the package's types", () => {
+    const modules = new Map<string, string>();
+    const add = (name: string, code: string) => modules.set(path.join(PACKAGE, "src/codegen/__generated__", `${name.replace(/\W+/g, "-")}-${modules.size}.tsx`), code);
+    for (const [name, c] of Object.entries(DESIGNS)) add(name, quiet(() => designToElements(c.design, c.options)).code);
+    for (const c of SOURCES) add(c.name, quiet(() => designToElements(c.design(), { displayMode: c.displayMode })).code);
+    expect(typecheck(modules)).toEqual([]);
+  }, 120_000);
+
+  it("writes `values` as they are where they type-check, from the keys the types have (values-shapes.ts is current)", async () => {
+    // (When the types change: `vitest run src/codegen -u` writes it again.)
+    await expect(valuesShapesModule()).toMatchFileSnapshot("./values-shapes.ts");
+  }, 60_000);
+});
diff --git a/packages/react/src/codegen/values-shapes.ts b/packages/react/src/codegen/values-shapes.ts
new file mode 100644
index 00000000..df757ca5
--- /dev/null
+++ b/packages/react/src/codegen/values-shapes.ts
@@ -0,0 +1,40 @@
+/**
+ * Generated from the components' `values` types by codegen's type-check test (`vitest run src/codegen -u` writes it
+ * again): the keys each `values` takes, at every depth (see checked-values.ts). A key's shape is `0` (a value only),
+ * `1` (anything), its keys (an object), or `[item]` (a list).
+ */
+export type Shape = 0 | 1 | Shape[] | { [key: string]: Shape };
+
+const EMAIL: Shape = {"_styleGuide":0,"contentWidth":0,"fontFamily":{"label":0,"value":0,"defaultFont":0,"type":0,"url":0,"weights":[{"value":0,"label":0}]},"textColor":0,"language":1,"linkStyle":{"body":0,"inherit":0,"linkColor":0,"linkHoverColor":0,"linkUnderline":0,"linkHoverUnderline":0},"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"backgroundColor":0,"contentAlign":0,"fontWeight":{"value":0,"label":0},"preheaderText":0,"accessibilityTitle":0,"backgroundImage":1,"popupPosition":0,"popupDisplayDelay":0,"popupWidth":0,"popupHeight":0,"borderRadius":0,"contentVerticalAlign":0,"popupBackgroundColor":0,"popupBackgroundImage":1,"popupOverlay_backgroundColor":0,"popupCloseButton_position":0,"popupCloseButton_backgroundColor":0,"popupCloseButton_iconColor":0,"popupCloseButton_borderRadius":0,"popupCloseButton_margin":0,"popupCloseButton_action":{"name":0,"attrs":1,"values":1},"documentSize":0,"documentOrientation":0,"documentMargin":0,"hideDesktop":0};
+const ROW: Shape = 1;
+const COLUMN: Shape = {"border":{"borderBottomColor":0,"borderBottomStyle":0,"borderBottomWidth":0,"borderLeftColor":0,"borderLeftStyle":0,"borderLeftWidth":0,"borderRightColor":0,"borderRightStyle":0,"borderRightWidth":0,"borderTopColor":0,"borderTopStyle":0,"borderTopWidth":0},"backgroundColor":0,"padding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"borderRadius":0,"hideDesktop":0};
+const PARAGRAPH: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"textJson":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"color":0,"textAlign":0,"fontFamily":{"label":0,"value":0,"defaultFont":0,"type":0,"url":0,"weights":[{"value":0,"label":0}]},"fontWeight":{"value":0,"label":0},"fontSize":0,"lineHeight":0,"letterSpacing":0,"linkStyle":{"body":0,"inherit":0,"linkColor":0,"linkHoverColor":0,"linkUnderline":0,"linkHoverUnderline":0},"text":0,"html":0};
+const HEADING: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"text":0,"textJson":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"color":0,"textAlign":0,"fontFamily":{"label":0,"value":0,"defaultFont":0,"type":0,"url":0,"weights":[{"value":0,"label":0}]},"fontWeight":{"value":0,"label":0},"fontSize":0,"lineHeight":0,"letterSpacing":0,"headingType":0,"linkStyle":{"body":0,"inherit":0,"linkColor":0,"linkHoverColor":0,"linkUnderline":0,"linkHoverUnderline":0}};
+const BUTTON: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"text":0,"textJson":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"href":{"name":0,"attrs":1,"values":1},"size":{"autoWidth":0,"width":0},"fontFamily":{"label":0,"value":0,"defaultFont":0,"type":0,"url":0,"weights":[{"value":0,"label":0}]},"fontWeight":{"value":0,"label":0},"buttonColors":{"color":0,"backgroundColor":0,"hoverColor":0,"hoverBackgroundColor":0},"fontSize":0,"lineHeight":0,"letterSpacing":0,"border":{"borderBottomColor":0,"borderBottomStyle":0,"borderBottomWidth":0,"borderLeftColor":0,"borderLeftStyle":0,"borderLeftWidth":0,"borderRightColor":0,"borderRightStyle":0,"borderRightWidth":0,"borderTopColor":0,"borderTopStyle":0,"borderTopWidth":0},"padding":0,"textAlign":0,"borderRadius":0};
+const IMAGE: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"textAlign":0,"src":1,"altText":0,"action":{"name":0,"attrs":1,"values":1}};
+const DIVIDER: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"width":0,"border":{"borderTopColor":0,"borderTopStyle":0,"borderTopWidth":0},"textAlign":0};
+const HTML: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"html":0};
+const MENU: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"menu":{"items":[{"key":0,"text":0,"link":{"name":0,"attrs":1,"values":1}}]},"linkColor":0,"padding":0,"fontFamily":{"label":0,"value":0,"defaultFont":0,"type":0,"url":0,"weights":[{"value":0,"label":0}]},"fontWeight":{"value":0,"label":0},"textColor":0,"fontSize":0,"letterSpacing":0,"layout":0,"align":0,"separator":0};
+const SOCIAL: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"icons":{"iconType":0,"icons":[{"name":0,"url":0,"imgUrl":0}],"editor":{"data":{"customIcons":[{"name":0,"url":0,"icons":1}],"customOptions":[{"value":0,"label":0}],"showDefaultIcons":0,"showDefaultOptions":0}}},"spacing":0,"align":0,"iconSize":0};
+const TABLE: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"table":{"headers":[{"cells":[{"width":0,"textJson":0,"text":0,"backgroundColor":0,"color":0,"textAlign":0,"verticalAlign":0,"padding":0}],"height":0}],"rows":[{"cells":[{"width":0,"textJson":0,"text":0,"backgroundColor":0,"color":0,"textAlign":0,"verticalAlign":0,"padding":0}],"height":0}],"footers":[{"cells":[{"width":0,"textJson":0,"text":0,"backgroundColor":0,"color":0,"textAlign":0,"verticalAlign":0,"padding":0}],"height":0}]},"cellBackgroundColor":{"property":0,"selectedCellId":0},"cellColor":{"property":0,"selectedCellId":0},"cellTextAlign":{"property":0,"selectedCellId":0},"cellVerticalAlign":{"property":0,"selectedCellId":0},"cellPadding":{"property":0,"selectedCellId":0},"border":{"borderBottomColor":0,"borderBottomStyle":0,"borderBottomWidth":0,"borderLeftColor":0,"borderLeftStyle":0,"borderLeftWidth":0,"borderRightColor":0,"borderRightStyle":0,"borderRightWidth":0,"borderTopColor":0,"borderTopStyle":0,"borderTopWidth":0},"columns":0,"rows":0,"stripedRows":0,"stripedRowsBackgroundColor":0,"enableHeader":0,"headerFontFamily":{"label":0,"value":0,"defaultFont":0,"type":0,"url":0,"weights":[{"value":0,"label":0}]},"headerBackgroundColor":0,"headerFontWeight":{"value":0,"label":0},"headerFontSize":0,"headerColor":0,"headerTextAlign":0,"headerVerticalAlign":0,"headerPadding":0,"contentVerticalAlign":0,"contentFontFamily":{"label":0,"value":0,"defaultFont":0,"type":0,"url":0,"weights":[{"value":0,"label":0}]},"contentBackgroundColor":0,"contentFontWeight":{"value":0,"label":0},"contentFontSize":0,"contentColor":0,"contentTextAlign":0,"contentLineHeight":0,"contentLetterSpacing":0,"contentPadding":0,"enableFooter":0,"footerFontFamily":{"label":0,"value":0,"defaultFont":0,"type":0,"url":0,"weights":[{"value":0,"label":0}]},"footerBackgroundColor":0,"footerFontWeight":{"value":0,"label":0},"footerFontSize":0,"footerColor":0,"footerTextAlign":0,"footerVerticalAlign":0,"footerPadding":0,"linkStyle":{"body":0,"inherit":0,"linkColor":0,"linkHoverColor":0,"linkUnderline":0,"linkHoverUnderline":0},"repeatHeaderOnEachPage":0,"repeatFooterOnEachPage":0,"mergeTagGroup":0,"mergeTagRule":0};
+const VIDEO: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"video":{"loading":0,"playIconColor":0,"playIconSize":0,"playIconType":0,"thumbnail":0,"type":0,"url":0,"videoId":0},"href":{"name":0,"attrs":1,"values":1}};
+const PAGEBREAK: Shape = {"displayCondition":{"label":0,"description":0,"type":0,"before":0,"after":0},"_styleGuide":0,"anchor":0,"containerPadding":0,"_meta":{"htmlID":0,"htmlClassNames":0,"labels":[0],"description":0},"deletable":0,"locked":0,"selectable":0,"draggable":0,"duplicatable":0,"hideable":0,"hideDesktop":0,"synced":{"id":0,"dirty":0,"updatedAt":0},"color":0};
+
+export const VALUES_SHAPES: Record<string, Shape> = {
+  Email: EMAIL,
+  Page: EMAIL,
+  Document: EMAIL,
+  Row: ROW,
+  Column: COLUMN,
+  Paragraph: PARAGRAPH,
+  Heading: HEADING,
+  Button: BUTTON,
+  Image: IMAGE,
+  Divider: DIVIDER,
+  Html: HTML,
+  Menu: MENU,
+  Social: SOCIAL,
+  Table: TABLE,
+  Video: VIDEO,
+  PageBreak: PAGEBREAK,
+};
diff --git a/packages/react/src/codegen/values.ts b/packages/react/src/codegen/values.ts
new file mode 100644
index 00000000..7220881f
--- /dev/null
+++ b/packages/react/src/codegen/values.ts
@@ -0,0 +1,59 @@
+/** Small helpers for design values: plain objects, deep equality, and what differs from a default. */
+
+export type Plain = Record<string, any>;
+
+export function isPlainObject(value: unknown): value is Plain {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+
+/** Deep equality for JSON-like values (a key holding `undefined` counts as missing). */
+export function deepEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true;
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+    return a.every((item, i) => deepEqual(item, b[i]));
+  }
+  if (!isPlainObject(a) || !isPlainObject(b)) return false;
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const key of keys) if (!deepEqual(a[key], b[key])) return false;
+  return true;
+}
+
+/**
+ * The part of `value` that differs from `defaults`: keys equal to their default are left out, and an object's keys
+ * are compared one by one (a nested object is merged into its default, so only what differs needs saying).
+ * `undefined` when nothing differs.
+ */
+export function differences(value: unknown, defaults: unknown): unknown {
+  if (deepEqual(value, defaults)) return undefined;
+  if (!isPlainObject(value) || !isPlainObject(defaults)) return value;
+  const out: Plain = {};
+  for (const [key, item] of Object.entries(value)) {
+    if (item === undefined) continue;
+    if (!(key in defaults)) out[key] = item;
+    else {
+      const diff = differences(item, defaults[key]);
+      if (diff !== undefined) out[key] = diff;
+    }
+  }
+  return Object.keys(out).length ? out : undefined;
+}
+
+/** A copy without the given keys. */
+export function omit(value: Plain, keys: Iterable<string>): Plain {
+  const out = { ...value };
+  for (const key of keys) delete out[key];
+  return out;
+}
+
+/** An identifier JavaScript accepts as a property name or JSX attribute without quotes. */
+export const isIdentifier = (name: string): boolean => /^[A-Za-z_$][\w$]*$/.test(name);
+
+/** A component name: PascalCase letters and digits, starting with a letter. */
+export function componentIdentifier(name: string | undefined, fallback = "Template"): string {
+  const words = String(name ?? "").match(/[A-Za-z0-9]+/g) ?? [];
+  const pascal = words.map((w) => w[0].toUpperCase() + w.slice(1)).join("");
+  return /^[A-Z]/.test(pascal) ? pascal : fallback;
+}
diff --git a/packages/react/src/codegen/warnings.ts b/packages/react/src/codegen/warnings.ts
new file mode 100644
index 00000000..682b3606
--- /dev/null
+++ b/packages/react/src/codegen/warnings.ts
@@ -0,0 +1,34 @@
+/** Warnings more than one kind of node gives. */
+import { ALWAYS_TRUE } from "./defaults";
+import type { ModuleState } from "./state";
+import type { Plain } from "./values";
+
+export const list = (keys: string[]) => keys.map((key) => `\`${key}\``).join(", ");
+
+/** Says which values come back in Elements' own form (see lostThroughValues). */
+export function warnLost(keys: string[], where: string, state: ModuleState): void {
+  if (keys.length) state.warn(`${where}: ${list(keys)} ${keys.length > 1 ? "come" : "comes"} back in the form Elements writes ${keys.length > 1 ? "them" : "it"}, not as the design has ${keys.length > 1 ? "them" : "it"}.`);
+}
+
+/** Drops the builder flags renderToJson always writes as `true` from `values`, saying which were `false`. */
+export function dropFixedFlags(values: Plain, where: string, state: ModuleState): void {
+  const fixed = ALWAYS_TRUE.filter((flag) => values[flag] === false);
+  if (fixed.length) state.warn(`${where}: ${list(fixed)} ${fixed.length > 1 ? "are" : "is"} false in the design, but renderToJson writes ${fixed.length > 1 ? "them" : "it"} as true.`);
+  for (const key of ALWAYS_TRUE) delete values[key];
+}
+
+/**
+ * Says where a row's or block's merge tag rule (the editor's `mergeTagGroup` and `mergeTagRule`: rows repeated for
+ * each product, a block shown where a tag is set) isn't applied in Elements' HTML: the code and the design keep it, but
+ * only a Table applies one, where the render's `mergeTagState` names it.
+ */
+export function warnMergeTagRule(values: Plain, where: string, state: ModuleState, table: boolean): void {
+  const { mergeTagGroup: group, mergeTagRule: rule } = values;
+  if (!group || !rule) return;
+  const name = `\`${group}.${rule}\``;
+  state.warn(
+    table
+      ? `${where}: its rows repeat by the merge tag rule ${name} only where the render's \`mergeTagState\` holds your editor's merge tags with \`mergeTagGroup: "${group}", mergeTagRule: "${rule}"\`.`
+      : `${where}: its merge tag rule ${name} isn't applied in Elements' HTML (the code and the design keep it), so the HTML has it once, without the rule's tags around it.`
+  );
+}
diff --git a/packages/react/src/components/Body.tsx b/packages/react/src/components/Body.tsx
index 74b5ffd1..90f22720 100644
--- a/packages/react/src/components/Body.tsx
+++ b/packages/react/src/components/Body.tsx
@@ -1,25 +1,34 @@
 import React from "react";
 import type { RenderMode, UnlayerConfig, BodyValues } from "@unlayer-internal/shared-elements";
-import { DEFAULT_CONFIG, mergeValues } from "@unlayer-internal/shared-elements";
+import { mergeValues } from "@unlayer-internal/shared-elements";
 import { BodyExporters } from "@unlayer/exporters";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
-import { nextHtmlId } from "../utils/create-component";
+import { cssUrl, hatch, nextHtmlId, OWN, safeMeta, safeName, textDirectionOf } from "../utils/create-component";
 import type { SizeInput } from "../types";
 import { BODY_DEFAULTS } from "../utils/container-defaults";
-import { withRenderScope } from "../utils/render-scope";
-import { childrenHtml } from "../utils/normalize";
+import { ROOT } from "../utils/root-type";
+import { contentHtml } from "../utils/root-content";
+import { rootProps } from "../utils/tailwind";
+import { ownMarkup } from "../engine";
+import { useProvidedConfig } from "../context/UnlayerProvider";
+import { rootConfig } from "../context/layer-config";
 
 export type BodyProps = Omit<SemanticProps<BodyValues>, "padding" | "borderRadius"> & {
   children?: React.ReactNode;
   mode?: RenderMode;
+  /** Class names on the body (the wrapper in it, on a web page); HTML only. */
   className?: string;
+  /** Inline CSS on the body (the wrapper in it, on a web page), after the renderer's own (a prop given wins over the same property); HTML only. */
   style?: React.CSSProperties;
   index?: number;
-  /** Optional config (replaces context-based config for Server Component usage) */
+  /**
+   * Config for this root (`cdnBaseUrl`, `textDirection`, `mergeTagState`, …), key by key over the nearest
+   * `<UnlayerProvider>`'s; a render function's options win over it.
+   */
   config?: Partial<UnlayerConfig>;
   /** Preview text shown in email client inboxes (email mode only) */
   previewText?: string;
-  /** Document text direction, also kept in the design JSON. Renderer options can override it. */
+  /** Document text direction, also kept in the design JSON. A `config.textDirection` (or renderer option) wins over it; it wins over an `<UnlayerProvider>`'s. */
   textDirection?: string;
   /** Language of the rendered document (for example, "ar"). */
   lang?: string;
@@ -36,6 +45,8 @@ export type BodyProps = Omit<SemanticProps<BodyValues>, "padding" | "borderRadiu
 
 const DEFAULT_VALUES = BODY_DEFAULTS;
 
+const NAMES: Record<string, string> = { email: "Email", web: "Page", document: "Document" };
+
 // ============================================
 // Preview text (inlined from shared/utils/preview.ts)
 // ============================================
@@ -126,9 +137,9 @@ function renderBodyToHtml(innerHTML: string, values: any, mode: RenderMode, prev
 /**
  * Body - Universal Server/Client Component
  *
- * Works in both Server Components and Client Components.
- * In Server Components, pass config as a prop.
- * In Client Components, config can come from UnlayerProvider context or props.
+ * Works in both Server Components and Client Components. Its config, key by key: a render function's options, its
+ * `config` prop, its `textDirection` prop, the nearest UnlayerProvider's (which the render functions read off the
+ * element, and Body from context where React renders it with one: not in Server Components), then the defaults.
  *
  * @example Server Component
  * ```tsx
@@ -144,11 +155,15 @@ function renderBodyToHtml(innerHTML: string, values: any, mode: RenderMode, prev
  * </UnlayerProvider>
  * ```
  */
-const Body: React.FC<BodyProps> = (props) => {
-  const { children, mode: modeProp, className, style, index = 0, config: configProp, previewText, fonts: _fonts, lang: _lang, ...semanticProps } = props;
+const Body: React.FC<BodyProps> = (given) => {
+  // Classes, from the <Tailwind> its content is in, as props.
+  const props = rootProps(given, NAMES[given.mode ?? ""] ?? "Body");
+  const { children, mode: modeProp, className, style, index = 0, config: _configProp, previewText, fonts: _fonts, lang: _lang, ...semanticProps } = props;
 
-  // Resolve config: explicit prop > default (no hooks, Server Component safe)
-  const resolvedConfig: UnlayerConfig = { ...DEFAULT_CONFIG, ...configProp };
+  // Its config: its `config` prop (a render function passes its options there), its `textDirection`, the nearest
+  // <UnlayerProvider>'s (from its context where React has one: not in Server Components), then the defaults.
+  // (Rendered by the render functions, it has their config, and reads no context of an app's render it's called in.)
+  const resolvedConfig: UnlayerConfig = rootConfig(props, ownMarkup() ? undefined : useProvidedConfig());
 
   // Resolve mode: explicit prop > config > default
   const mode: RenderMode = modeProp ?? resolvedConfig.mode ?? "web";
@@ -169,14 +184,17 @@ const Body: React.FC<BodyProps> = (props) => {
     mapSemanticProps<BodyValues>(semanticProps as SemanticProps<BodyValues>, DEFAULT_VALUES, "Body")
   );
 
-  // Ensure _meta
+  // Its background image's URL as CSS takes it (see cssUrl); the design keeps it as given.
+  cssUrl(values);
+
+  // Ensure _meta, its id and class names kept to what they can hold, as a Row's and a block's are (see safeMeta)
   const valuesWithMeta = {
     ...values,
-    _meta: {
+    _meta: safeMeta({
       htmlID: nextHtmlId(_config, "u_body"),
       htmlClassNames: "u_body",
       ...(values._meta || {})
-    }
+    })
   };
 
   // Clone children with _config AND the body's resolved values so Row/Column
@@ -185,40 +203,19 @@ const Body: React.FC<BodyProps> = (props) => {
   // Without this, Row falls back to BODY_DEFAULTS.contentWidth ("500px") and
   // <Body contentWidth="…"> is silently ignored for layout.
   // Fragments and user components expanded: their rows get the context too.
-  let innerHTML = "";
-  if (children) {
-    try {
-      // A render of its own when Body is rendered straight through React (not renderToHtml).
-      innerHTML = withRenderScope(() => {
-        // One React render collects the rows and blocks; each is then rendered with Body's settings.
-        return childrenHtml(children, (child) => React.cloneElement(child as React.ReactElement<any>, { _config, bodyValues: values }));
-      }, true);
-    } catch (error) {
-      console.error("Body: Failed to render children:", error);
-      innerHTML = "";
-    }
-  }
-
-  try {
-    const html = renderBodyToHtml(innerHTML, valuesWithMeta, mode, previewText);
-
-    return (
-      <div
-        dangerouslySetInnerHTML={{ __html: html }}
-        className={className}
-        style={style}
-      />
-    );
-  } catch (error) {
-    console.error("Body rendering failed:", error);
-    return (
-      <div className={className} style={style}>
-        {children}
-      </div>
-    );
-  }
+  // One walk collects the rows and blocks; each is then rendered with Body's settings (see root-content.ts).
+  const innerHTML = children ? contentHtml(props, resolvedConfig, _config, mode, NAMES[mode] ?? "Body", values, valuesWithMeta) : "";
+
+  // Its `style` and `className` on the body (see hatch); a right-to-left one's direction and language there too, as
+  // Gmail drops the <html>'s.
+  const at = /<[a-z]+ [^>]*u_body[^>]*?(?=\/?>)/;
+  let html = hatch(renderBodyToHtml(innerHTML, valuesWithMeta, mode, previewText), at, style, className, semanticProps);
+  if (textDirectionOf(resolvedConfig.textDirection) === "rtl") html = html.replace(at, (tag) => `${tag} dir="rtl"${_lang ? ` lang="${safeName(_lang)}"` : ""}`);
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
 };
 
 Body.displayName = "Body";
+(Body as unknown as Record<symbol, boolean>)[OWN] = true;
+(Body as unknown as Record<symbol, string>)[ROOT] = "Body";
 
 export default Body;
diff --git a/packages/react/src/components/Button.test.tsx b/packages/react/src/components/Button.test.tsx
index cbb63f6c..e1879bbf 100644
--- a/packages/react/src/components/Button.test.tsx
+++ b/packages/react/src/components/Button.test.tsx
@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import React from "react";
 import { render } from "@testing-library/react";
 import Button from "./Button";
@@ -6,8 +6,23 @@ import Body from "./Body";
 import Row from "./Row";
 import { Column } from "./Column";
 import { renderToJson } from "../utils/render-to-json";
+import * as Roots from "../index";
 
+
+/** A block given a link of null (nullable data) and the same block given none, in each root: the HTML and the design. */
+function asNone(withNull: React.ReactElement, without: React.ReactElement) {
+  for (const Root of [Roots.Email, Roots.Page, Roots.Document]) {
+    const tree = (block: React.ReactElement) => <Root><Roots.Row><Roots.Column>{block}</Roots.Column></Roots.Row></Root>;
+    expect(Roots.renderToHtml(tree(withNull)), Root.displayName).toBe(Roots.renderToHtml(tree(without)));
+    expect(Roots.renderToJson(tree(withNull))).toEqual(Roots.renderToJson(tree(without)));
+  }
+}
 describe("Button Component", () => {
+  it("takes an `href` or `action` of null (nullable data) as none, in each root", () => {
+    asNone(<Button href={null as never}>Go</Button>, <Button>Go</Button>);
+    asNone(<Button action={null as never}>Go</Button>, <Button>Go</Button>);
+  });
+
   it("renders an anchor element with button text", () => {
     const { container } = render(<Button>Click me</Button>);
     const link = container.querySelector("a");
@@ -163,4 +178,39 @@ describe("Button Component", () => {
       ).not.toThrow();
     });
   });
+
+  describe("target", () => {
+    const link = (element: React.ReactElement) => renderToJson(
+      <Body>
+        <Row>
+          <Column>{element}</Column>
+        </Row>
+      </Body>
+    ).body.rows[0].columns[0].contents[0].values.href;
+
+    it("a flat `target` is the link's, in the HTML and the design", () => {
+      const { container } = render(<Button href="https://example.com" target="_self">Go</Button>);
+      expect(container.querySelector("a")!.getAttribute("target")).toBe("_self");
+      expect(link(<Button href="https://example.com" target="_self">Go</Button>)).toEqual({ name: "web", values: { href: "https://example.com", target: "_self" } });
+    });
+
+    it("a new tab (`_blank`) for one that could end its HTML attribute or start a tag, said", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      try {
+        const hostile = '"><img src=x onerror=alert(1)>';
+        const { container } = render(<Button href="https://example.com" target={hostile}>Go</Button>);
+        expect([container.querySelector("a")!.getAttribute("target"), container.querySelectorAll("img").length]).toEqual(["_blank", 0]);
+        expect(link(<Button href="https://example.com" target={hostile}>Go</Button>)).toEqual({ name: "web", values: { href: "https://example.com", target: "_blank" } });
+        expect(warn).toHaveBeenCalledWith(`[Unlayer] Button's target ${JSON.stringify(hostile)} could end its HTML attribute or start a tag, so the link opens in a new tab (_blank).`);
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    it("a new tab (`_blank`) without one, as before", () => {
+      const { container } = render(<Button href="https://example.com">Go</Button>);
+      expect(container.querySelector("a")!.getAttribute("target")).toBe("_blank");
+      expect(link(<Button href="https://example.com">Go</Button>)).toEqual({ name: "web", values: { href: "https://example.com", target: "_blank" } });
+    });
+  });
 });
diff --git a/packages/react/src/components/Button.tsx b/packages/react/src/components/Button.tsx
index 7a825edf..14f07813 100644
--- a/packages/react/src/components/Button.tsx
+++ b/packages/react/src/components/Button.tsx
@@ -1,5 +1,5 @@
 import { ButtonExporters, ButtonDefaults } from "@unlayer/exporters";
-import type { ButtonValues, TextStyleProps, SizeInput, BorderInput } from "../types";
+import type { AlignAlias, ButtonValues, TextColorAlias, TextStyleProps, SizeInput, BorderInput } from "../types";
 import { createItemComponent, type ItemComponentProps } from "../utils/create-component";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
 
@@ -11,7 +11,9 @@ type ButtonSemanticProps = Omit<
   SemanticProps<ButtonValues>,
   keyof TextStyleProps | "width" | "padding" | "borderRadius" | "border"
 > &
-  TextStyleProps & {
+  TextStyleProps &
+  AlignAlias &
+  TextColorAlias & {
     /** Display width — a number/px pins the button; "100%" makes it full-width. */
     width?: SizeInput;
     /** Inner padding — a number (→ px) or CSS string ("14px 28px"). */
@@ -20,6 +22,8 @@ type ButtonSemanticProps = Omit<
     borderRadius?: SizeInput;
     /** Per-side border object (width fields accept a number/px string). */
     border?: BorderInput;
+    /** Where its link (`href`) opens: `_blank` (a new tab, the default), `_self`, … */
+    target?: string;
   };
 
 /**
@@ -76,11 +80,7 @@ const Button = createItemComponent<ButtonValues, ButtonSemanticProps>({
   name: "Button",
   defaultValues: DEFAULT_VALUES,
   propMapper: (props) => {
-    const mapped = mapSemanticProps(
-      props as SemanticProps<ButtonValues>,
-      DEFAULT_VALUES,
-      "Button"
-    );
+    const mapped = mapSemanticProps(props as SemanticProps<ButtonValues>, DEFAULT_VALUES, "Button");
     // In Unlayer's model a button's display width is size.width, used only when
     // size.autoWidth is false (otherwise the width is auto / content-sized). So a
     // user-provided width sets autoWidth:false. Read the MAPPED size, which
@@ -104,6 +104,7 @@ const Button = createItemComponent<ButtonValues, ButtonSemanticProps>({
     return mapped;
   },
   displayName: "Button",
+  at: /<a [^>]*>/,
   exporters: ButtonExporters,
 });
 
diff --git a/packages/react/src/components/Column.test.tsx b/packages/react/src/components/Column.test.tsx
index f4f1058d..a6de81dc 100644
--- a/packages/react/src/components/Column.test.tsx
+++ b/packages/react/src/components/Column.test.tsx
@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import React from "react";
 import { render } from "@testing-library/react";
 import Body from "./Body";
@@ -8,6 +8,9 @@ import Heading from "./Heading";
 import Paragraph from "./Paragraph";
 import Button from "./Button";
 import { renderToHtml } from "../utils/render-to-html";
+import { renderToJson } from "../utils/render-to-json";
+import Email from "./Email";
+import Link from "./Link";
 
 describe("Column Component", () => {
   it("renders column container with correct ID", () => {
@@ -133,4 +136,100 @@ describe("Column Component", () => {
     );
     expect(html).toContain("padding: 7px 9px");
   });
+
+  describe("a link or a rule in it, blocks the design can edit", () => {
+    const column = (...children: React.ReactNode[]) => (
+      <Email>
+        <Row>
+          <Column>{children}</Column>
+        </Row>
+      </Email>
+    );
+    const contents = (element: React.ReactElement) => renderToJson(element).body.rows[0].columns[0].contents;
+
+    it("a <Link> is a Paragraph holding it, with the block's own props", () => {
+      const email = column(<Link key="l" href="https://example.com/docs" containerPadding="4px 10px" hideOnMobile>Read the docs</Link>);
+      const html = renderToHtml(email);
+      expect(html).toContain('<a href="https://example.com/docs" target="_blank" rel="noopener">Read the docs</a>');
+      expect(html).toMatch(/padding:4px 10px/);
+      expect(contents(email)).toEqual([
+        expect.objectContaining({
+          type: "text",
+          values: expect.objectContaining({ text: '<a href="https://example.com/docs" target="_blank" rel="noopener">Read the docs</a>', containerPadding: "4px 10px" }),
+        }),
+      ]);
+    });
+
+    it("a <Link> to an email service's <%name%> tag, or with a quote in its text, is a Paragraph too, its URL as written", () => {
+      const email = column(
+        <Link key="u" href="<%asm_group_unsubscribe_raw_url%>">Unsubscribe</Link>,
+        <Link key="q" href="https://example.com">Don't miss "this"</Link>
+      );
+      expect(renderToHtml(email)).toContain('href="<%asm_group_unsubscribe_raw_url%>"');
+      expect(contents(email).map((c) => c.type)).toEqual(["text", "text"]);
+      expect(contents(email)[0].values).toMatchObject({ text: expect.stringContaining('href="<%asm_group_unsubscribe_raw_url%>"') });
+    });
+
+    it("a bare <a> and <hr> as well; other markup is said, and left out", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      try {
+        const email = column(
+          <a key="a" href="https://example.com" title="Home">Home</a>,
+          <hr key="hr" />,
+          <span key="s">loose</span>
+        );
+        const html = renderToHtml(email);
+        expect(html).toContain('<a href="https://example.com" title="Home">Home</a>');
+        expect(html).toContain("u_content_divider");
+        expect(html).not.toContain("loose");
+        expect(contents(email).map((c) => c.type)).toEqual(["text", "divider"]);
+        expect([...new Set(warn.mock.calls.map((call) => String(call[0])))]).toEqual(["[Unlayer] Column: <span> isn't a block, so it's left out. Put HTML in an <Html> block."]);
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    it("a link with more than text in it, or a styled rule, as an HTML block; a link's other attributes aside, a Paragraph", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      try {
+        const email = column(
+          <a key="r" href="https://example.com/receipt" aria-label="Receipt">Download receipt</a>,
+          <a key="l" href="https://example.com"><img src="https://example.com/logo.png" alt="Logo" /></a>,
+          <hr key="hr" style={{ borderTop: "2px dashed #cccccc" }} />
+        );
+        const html = renderToHtml(email);
+        expect(html).toContain('<a href="https://example.com/receipt">Download receipt</a>');
+        expect(html).toContain('<a href="https://example.com"><img src="https://example.com/logo.png" alt="Logo"/></a>');
+        expect(html).toContain('<hr style="border-top:2px dashed #cccccc"/>');
+        expect(contents(email).map((c) => c.type)).toEqual(["text", "html", "html"]);
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+  });
+
+  describe("a block's displayCondition: the editor's, around the block, as its export writes it", () => {
+    const condition = { type: "vip", label: "VIP only", description: "Customers in the VIP list", before: "{% if customer.vip %}", after: "{% endif %}" };
+
+    it("puts the block's HTML between its before and after, the blocks around it outside them", () => {
+      const html = renderToHtml(
+        <Email><Row><Column>
+          <Paragraph>Everyone</Paragraph>
+          <Button href="https://example.com" values={{ displayCondition: condition }}>VIP discount</Button>
+          <Heading>Everyone again</Heading>
+        </Column></Row></Email>
+      );
+      const [before, after] = [html.indexOf(condition.before), html.indexOf(condition.after)];
+      expect(html.indexOf("Everyone")).toBeLessThan(before);
+      expect(html.slice(before, after)).toContain("VIP discount");
+      expect(html.indexOf("Everyone again")).toBeGreaterThan(after);
+      expect(html.split(condition.before)).toHaveLength(2);
+    });
+
+    it("leaves a block without one as it was", () => {
+      const block = (values?: Record<string, unknown>) => <Email><Row><Column><Paragraph values={values}>Hi</Paragraph></Column></Row></Email>;
+      expect(renderToHtml(block({ displayCondition: null }))).toBe(renderToHtml(block()));
+    });
+  });
 });
diff --git a/packages/react/src/components/Column.tsx b/packages/react/src/components/Column.tsx
index 9d797674..dd41b5ef 100644
--- a/packages/react/src/components/Column.tsx
+++ b/packages/react/src/components/Column.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import type { RenderMode, UnlayerConfig, ColumnValues } from "@unlayer-internal/shared-elements";
 import { ColumnExporters, ContentExporters } from "@unlayer/exporters";
-import { UNLAYER_RENDER_KEY, UNLAYER_CONFIG_KEY, nextHtmlId, safeName, safeMeta } from "../utils/create-component";
+import { UNLAYER_RENDER_KEY, UNLAYER_CONFIG_KEY, nextHtmlId, safeName, safeMeta, hatch, withDisplayCondition } from "../utils/create-component";
+import { RenderError } from "@unlayer-internal/shared-elements";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
 import type { DeviceProps, SizeInput, BorderInput } from "../types";
 import { COLUMN_DEFAULTS } from "../utils/container-defaults";
-import { looseText } from "../utils/render-scope";
-import { collecting, RECORDS } from "../utils/collect";
-import { recordContainer, whileCollecting } from "../utils/record";
+import { failed, failedBefore, looseText, remember } from "../utils/render-scope";
+import { RECORDS, whereIs } from "../utils/collect";
+import { renderContainer } from "../utils/container-render";
 import { DEFAULT_CONTAINER_PADDING } from "../utils/image-sizing";
 
 /** Unlayer's default content-block padding when a block sets none. */
@@ -68,7 +69,9 @@ export type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding" | "border"
   bodyValues?: any;
   rowValues?: any;
   mode?: RenderMode;
+  /** Class names on the column's cell; HTML only. */
   className?: string;
+  /** Inline CSS on the column's cell, after the renderer's own (a prop given wins over the same property); HTML only. */
   style?: React.CSSProperties;
   /** Padding — a CSS string ("0 24px", "10px") or a number (px). */
   padding?: SizeInput;
@@ -81,8 +84,11 @@ export type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding" | "border"
   _config?: UnlayerConfig;
 };
 
-export const Column: React.FC<ColumnProps> = (props) => {
-  if (collecting()) return whileCollecting(() => recordContainer("column", props), () => Column(props), "Column");
+// A collecting walk records a Column (see utils/record.tsx); rendered, it's the collected Column's HTML.
+export const Column: React.FC<ColumnProps> = (props) =>
+  renderContainer("Column", (props as { _record?: object })._record, `Column ${(props.index ?? 0) + 1}`, () => renderColumn(props));
+
+function renderColumn(props: ColumnProps): React.ReactElement {
   const {
     children,
     index = 0,
@@ -93,172 +99,111 @@ export const Column: React.FC<ColumnProps> = (props) => {
     className,
     style,
     _config,
+    _record,
     ...semanticProps
-  } = props;
+  } = props as ColumnProps & { _record?: object };
 
   // Resolve mode: explicit prop > _config > default
   const mode: RenderMode = modeProp ?? _config?.mode ?? "web";
 
-  // Map semantic props to values
-  const values = mapSemanticProps<ColumnValues>(
-    semanticProps as SemanticProps<ColumnValues>,
-    DEFAULT_VALUES,
-    "Column"
-  );
+  // Map semantic props to values (which the head reuses: see remember)
+  const values = mapSemanticProps<ColumnValues>(semanticProps as SemanticProps<ColumnValues>, DEFAULT_VALUES, "Column");
+  remember(_record, values);
 
   // Add _meta (an id or class names given in values kept to what they can hold, as for rows and blocks)
   const valuesWithMeta = { ...values, _meta: safeMeta({ htmlID: nextHtmlId(_config, "u_column"), htmlClassNames: "u_column", ...(values._meta || {}) }) };
 
   // Render children to HTML - extract from dangerouslySetInnerHTML
   let innerHTML = "";
-  if (children) {
+  for (const child of React.Children.toArray(children)) {
+    if (typeof child === "string" || typeof child === "number") {
+      innerHTML += looseText(child, "Column");
+      continue;
+    }
+    // Call component function to get rendered result
+    if (!React.isValidElement(child) || typeof child.type !== "function") continue;
+    // A block whose exporter failed in this render, rendered again with its Row (a Column of it was left out).
+    if (failedBefore((child.props as { _record?: object })._record)) continue;
+    const ComponentType = child.type as any;
+    const config = ComponentType[UNLAYER_CONFIG_KEY];
+    // Use __unlayerRender (hook-free) if available, otherwise call directly
+    const renderFn: Function = ComponentType[UNLAYER_RENDER_KEY] || ComponentType;
+    // Allocate the content id BEFORE rendering and thread it in, so the value-level _meta.htmlID exporters see
+    // (custom tool head css scopes on it) is unique per instance and matches both the wrapper id and the
+    // head-extraction/json numbering. Custom tools carry an explicit meta base (custom_<slug>); built-ins derive it
+    // from the component name.
+    const componentName = config?.metaName ?? (ComponentType.displayName || ComponentType.name || "component").toLowerCase();
+    const contentHtmlId = nextHtmlId(_config, `u_content_${componentName}`);
+    // Thread the column/body context so width-aware item exporters (Image) can size against the real available width
+    // (contentWidth × column fraction) instead of the fallback. Mirrors the editor, which passes this context to the
+    // content exporters.
+    let rendered: any;
     try {
-      const childrenArray = React.Children.toArray(children);
-
-      childrenArray.forEach((child, childIndex) => {
-        if (typeof child === "string" || typeof child === "number") {
-          innerHTML += looseText(child, "Column");
-        } else if (React.isValidElement(child)) {
-          // Call component function to get rendered result
-          if (typeof child.type === "function") {
-            const ComponentType = child.type as any;
-            // Use __unlayerRender (hook-free) if available, otherwise call directly
-            const renderFn: Function = ComponentType[UNLAYER_RENDER_KEY] || ComponentType;
-            // Allocate the content id BEFORE rendering and thread it in, so
-            // the value-level _meta.htmlID exporters see (custom tool head
-            // css scopes on it) is unique per instance and matches both the
-            // wrapper id and the head-extraction/json numbering. Custom
-            // tools carry an explicit meta base (custom_<slug>); built-ins
-            // derive it from the component name.
-            const componentName =
-              ComponentType?.[UNLAYER_CONFIG_KEY]?.metaName ??
-              (
-                ComponentType?.displayName ||
-                ComponentType?.name ||
-                "component"
-              ).toLowerCase();
-            const contentHtmlId = nextHtmlId(_config, `u_content_${componentName}`);
-            // Thread the column/body context so width-aware item exporters (Image)
-            // can size against the real available width (contentWidth × column
-            // fraction) instead of the fallback. Mirrors the editor, which passes
-            // this context to the content exporters.
-            const rendered = renderFn({
-              ...child.props,
-              _config,
-              _metaHtmlId: contentHtmlId,
-              colIndex: index,
-              cells,
-              bodyValues,
-              rowValues,
-              columnValues: valuesWithMeta,
-            });
-
-            // Extract HTML from dangerouslySetInnerHTML
-            if (
-              rendered &&
-              typeof rendered === "object" &&
-              rendered.props &&
-              rendered.props.dangerouslySetInnerHTML
-            ) {
-              const componentHTML =
-                rendered.props.dangerouslySetInnerHTML.__html;
-
-              // Some components intentionally produce no output in unsupported
-              // modes. Do not turn that into a padded content wrapper.
-              if (
-                !componentHTML &&
-                ComponentType?.[UNLAYER_CONFIG_KEY]?.omitEmptyOutput
-              ) return;
-
-              // Resolve the block's OWN containerPadding directly from props.
-              // `containerPadding` is a universal base-content prop: it passes
-              // straight through mapSemanticProps untouched and is not present in
-              // any item's defaultValues, so reading it from props (flat prop +
-              // `values` escape hatch) is equivalent to running the item's full
-              // value pipeline — without paying for a second propMapper call per
-              // child (for Paragraph that re-runs the Lexical textJson convert).
-              // Falls back to Unlayer's content default. (Previously this read
-              // `child.props.values?.containerPadding` only, which is undefined
-              // for the flat-prop API, so every block collapsed to 0px padding.)
-              const childProps = child.props as {
-                containerPadding?: string | number;
-                mobile?: { containerPadding?: string | number };
-                hideOnMobile?: boolean;
-                hideOnDesktop?: boolean;
-                values?: { containerPadding?: string | number; _override?: Record<string, any>; _meta?: Record<string, any> };
-              };
-              const rawContainerPadding =
-                childProps.containerPadding ??
-                childProps.values?.containerPadding ??
-                DEFAULT_CONTAINER_PADDING;
-              // A bare number is treated as px (same idiom as other size props).
-              const containerPadding =
-                typeof rawContainerPadding === "number"
-                  ? `${rawContainerPadding}px`
-                  : rawContainerPadding;
-
-              // A custom tool's props are its own values, as in 0.1.22: a `hideOnMobile` of its own isn't a device setting.
-              const device = ComponentType?.[UNLAYER_CONFIG_KEY]?.contentType === "custom" ? {} : childProps;
-
-              // Wrap via the canonical content-container exporter for this mode.
-              const contentValues = {
-                containerPadding,
-                _override: {
-                  ...childProps.values?._override,
-                  mobile: { ...childProps.values?._override?.mobile,
-                    ...(device.hideOnMobile !== undefined ? { hideMobile: device.hideOnMobile } : {}),
-                  },
-                  desktop: { ...childProps.values?._override?.desktop,
-                    ...(device.hideOnDesktop !== undefined ? { hideDesktop: device.hideOnDesktop } : {}),
-                  },
-                },
-                _meta: {
-                  htmlID: contentHtmlId,
-                  htmlClassNames: `u_content_${componentName}`,
-                  ...(childProps.values?._meta?.htmlID ? { htmlID: safeName(childProps.values._meta.htmlID) } : {}),
-                },
-              };
-              innerHTML += renderContentToHtml(
-                componentHTML,
-                contentValues,
-                bodyValues,
-                mode
-              );
-            } else if (rendered) {
-              const name = (child.type as any)?.displayName || (child.type as any)?.name || "Unknown";
-              console.warn(
-                `Column: <${name}> did not produce renderable HTML. ` +
-                `Ensure it is an Unlayer component (Button, Text, Image, etc.).`
-              );
-            }
-          }
-        }
-      });
+      rendered = renderFn({ ...child.props, _config, _metaHtmlId: contentHtmlId, colIndex: index, cells, bodyValues, rowValues, columnValues: valuesWithMeta });
     } catch (error) {
-      console.error("Column: Failed to render children:", error);
-      innerHTML = "";
+      // Its exporter failed: the render fails, or (`onError: "omit"`) it's left out of the HTML, and by its record
+      // (src/model gives it) of the head and the design too; the next block takes its id.
+      const ids = (_config as { __ids?: Record<string, number> } | undefined)?.__ids;
+      if (ids) ids[`u_content_${componentName}`]--;
+      const record = (child.props as { _record?: { where?: () => string } })._record;
+      const name = config?.name ?? (ComponentType.displayName || ComponentType.name || "Block");
+      failed(error instanceof RenderError ? error : new RenderError(`${name} failed to render: ${String((error as Error)?.message ?? error)}`, name, whereIs(record) ?? `Column ${index + 1} › ${name}`, error), record);
+      continue;
     }
-  }
 
-  try {
-    const html = renderColumnToHtml(innerHTML, valuesWithMeta, index, cells, bodyValues, rowValues, mode);
-
-    return (
-      <div
-        dangerouslySetInnerHTML={{ __html: html }}
-        className={className}
-        style={style}
-      />
-    );
-  } catch (error) {
-    console.error("Column rendering failed:", error);
-    return (
-      <div className={className} style={style}>
-        {children}
-      </div>
-    );
+    // Extract HTML from dangerouslySetInnerHTML
+    const inner = rendered?.props?.dangerouslySetInnerHTML;
+    if (!inner) {
+      if (rendered) console.warn(`Column: <${ComponentType.displayName || ComponentType.name || "Unknown"}> did not produce renderable HTML. Ensure it is an Unlayer component (Button, Text, Image, etc.).`);
+      continue;
+    }
+    const componentHTML = inner.__html;
+
+    // Some components intentionally produce no output in unsupported modes. Do not turn that into a padded
+    // content wrapper.
+    if (!componentHTML && config?.omitEmptyOutput) continue;
+
+    // Resolve the block's OWN containerPadding directly from props. `containerPadding` is a universal base-content
+    // prop: it passes straight through mapSemanticProps untouched and is not present in any item's defaultValues,
+    // so reading it from props (flat prop + `values` escape hatch) is equivalent to running the item's full value
+    // pipeline — without paying for a second propMapper call per child (for Paragraph that re-runs the Lexical
+    // textJson convert). Falls back to Unlayer's content default; a bare number is px.
+    const childProps = child.props as {
+      containerPadding?: string | number;
+      skipInText?: boolean;
+      hideOnMobile?: boolean;
+      hideOnDesktop?: boolean;
+      values?: { containerPadding?: string | number; _override?: Record<string, any>; _meta?: Record<string, any> };
+    };
+    const rawContainerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING;
+    const containerPadding = typeof rawContainerPadding === "number" ? `${rawContainerPadding}px` : rawContainerPadding;
+
+    // A custom tool's props are its own values, as in 0.1.22: a `hideOnMobile` of its own isn't a device setting.
+    const device = config?.contentType === "custom" ? {} : childProps;
+    const override = childProps.values?._override;
+
+    // Wrap via the canonical content-container exporter for this mode.
+    const contentValues = {
+      containerPadding,
+      _override: {
+        ...override,
+        mobile: { ...override?.mobile, ...(device.hideOnMobile !== undefined ? { hideMobile: device.hideOnMobile } : {}) },
+        desktop: { ...override?.desktop, ...(device.hideOnDesktop !== undefined ? { hideDesktop: device.hideOnDesktop } : {}) },
+      },
+      _meta: { htmlID: contentHtmlId, htmlClassNames: `u_content_${componentName}`, ...(childProps.values?._meta?.htmlID ? { htmlID: safeName(childProps.values._meta.htmlID) } : {}) },
+    };
+    const content = renderContentToHtml(componentHTML, contentValues, bodyValues, mode);
+    // `skipInText`: the block isn't in the plain text. Inside its display condition, as the editor's export writes it.
+    innerHTML += withDisplayCondition(childProps.skipInText ? content.replace(/<[a-z]+/, '$& data-skip-in-text="true"') : content, childProps.values);
   }
-};
+
+  // Its `style` and `className` on its column cell (see hatch). Its exporter failing fails it, or leaves it out (see
+  // renderContainer). The cell has the column's width: padding or a border in its `style` go inside it (border-box),
+  // as the Column's own padding does, instead of making the row wider than the email.
+  const insets = style && typeof style === "object" && (style as Record<string, unknown>).boxSizing === undefined && Object.keys(style).some((key) => /^(padding|border(?!Radius|Collapse|Spacing|Image|(Top|Bottom|Start|End)(Left|Right|Start|End)Radius))/.test(key));
+  const html = hatch(renderColumnToHtml(innerHTML, valuesWithMeta, index, cells, bodyValues, rowValues, mode), /<div[^>]*class="u-col[ "][^>]*>/, insets ? { ...style, boxSizing: "border-box" } : style, className, semanticProps);
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+}
 
 Column.displayName = "Column";
 (Column as unknown as Record<symbol, boolean>)[RECORDS] = true;
diff --git a/packages/react/src/components/Divider.tsx b/packages/react/src/components/Divider.tsx
index f78d88e5..73397efd 100644
--- a/packages/react/src/components/Divider.tsx
+++ b/packages/react/src/components/Divider.tsx
@@ -1,9 +1,10 @@
 import { DividerExporters, DividerDefaults } from "@unlayer/exporters";
-import type { DividerValues, BorderInput } from "../types";
+import { divider } from "../exporters/divider";
+import type { AlignAlias, DividerValues, BorderInput } from "../types";
 import { createItemComponent, type ItemComponentProps } from "../utils/create-component";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
 
-type DividerSemanticProps = Omit<SemanticProps<DividerValues>, "border"> & {
+type DividerSemanticProps = Omit<SemanticProps<DividerValues>, "border"> & AlignAlias & {
   /** Per-side border object (width fields accept a number/px string). */
   border?: BorderInput;
 };
@@ -36,7 +37,8 @@ const Divider = createItemComponent<DividerValues, DividerSemanticProps>({
   defaultValues: DEFAULT_VALUES,
   propMapper: (props) => mapSemanticProps(props as SemanticProps<DividerValues>, DEFAULT_VALUES, "Divider"),
   displayName: "Divider",
-  exporters: DividerExporters,
+  // The web and document HTML without react-dom (see exporters/markup.ts).
+  exporters: { ...DividerExporters, web: divider, document: divider },
 });
 
 export default Divider;
diff --git a/packages/react/src/components/Document.tsx b/packages/react/src/components/Document.tsx
index d2d4504c..0515ad0a 100644
--- a/packages/react/src/components/Document.tsx
+++ b/packages/react/src/components/Document.tsx
@@ -1,4 +1,6 @@
 import Body, { type BodyProps } from "./Body";
+import { OWN } from "../utils/create-component";
+import { ROOT } from "../utils/root-type";
 
 export type DocumentPageSize =
   | "A3"
@@ -40,3 +42,5 @@ export default function Document(props: DocumentProps) {
 }
 
 Document.displayName = "Document";
+((Document as unknown) as Record<symbol, boolean>)[OWN] = true;
+((Document as unknown) as Record<symbol, string>)[ROOT] = "Document";
diff --git a/packages/react/src/components/Email.tsx b/packages/react/src/components/Email.tsx
index f7c59415..53a3cbea 100644
--- a/packages/react/src/components/Email.tsx
+++ b/packages/react/src/components/Email.tsx
@@ -1,4 +1,6 @@
 import Body, { type BodyProps } from "./Body";
+import { OWN } from "../utils/create-component";
+import { ROOT } from "../utils/root-type";
 
 export type EmailProps = Omit<BodyProps, "mode">;
 
@@ -19,3 +21,5 @@ export default function Email(props: EmailProps) {
 }
 
 Email.displayName = "Email";
+((Email as unknown) as Record<symbol, boolean>)[OWN] = true;
+((Email as unknown) as Record<symbol, string>)[ROOT] = "Email";
diff --git a/packages/react/src/components/Heading.test.tsx b/packages/react/src/components/Heading.test.tsx
index c85f916a..206122e6 100644
--- a/packages/react/src/components/Heading.test.tsx
+++ b/packages/react/src/components/Heading.test.tsx
@@ -1,7 +1,12 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import React from "react";
 import { render } from "@testing-library/react";
 import Heading from "./Heading";
+import Body from "./Body";
+import Row from "./Row";
+import { Column } from "./Column";
+import { renderToJson } from "../utils/render-to-json";
+import { renderToHtml } from "../utils/render-to-html";
 
 describe("Heading Component", () => {
   it("renders an h1 element by default", () => {
@@ -43,7 +48,70 @@ describe("Heading Component", () => {
     expect(container.innerHTML).not.toContain("[if mso]");
   });
 
+  it("writes a level that isn't h1 to h6 (one from data) as h1, and says so, in the HTML and the design", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      // (Another tag's name too: the exporters write it as the heading's tag, one whose text a browser runs as code.)
+      for (const props of [{ level: "h2 x" }, { as: 'h1"' }, { headingType: "h1>" }, { values: { headingType: "h2/" } }, { level: "textarea" }, { as: "marquee" }, { headingType: "h7" }, { values: { headingType: "title" } }]) {
+        const email = <Body><Row><Column><Heading {...(props as object)}>Title</Heading></Column></Row></Body>;
+        const doc = new DOMParser().parseFromString(renderToHtml(email), "text/html");
+        expect([...doc.querySelectorAll("h1")].some((el) => el.textContent === "Title"), JSON.stringify(props)).toBe(true);
+        expect((renderToJson(email).body.rows[0].columns[0].contents[0].values as any).headingType).toBe("h1");
+      }
+      expect(warn.mock.calls.some((call) => /Heading.*level/.test(String(call[0])))).toBe(true);
+      // Each of h1 to h6 stays itself.
+      for (const level of ["h1", "h2", "h3", "h4", "h5", "h6"] as const) expect(renderToHtml(<Body><Row><Column><Heading level={level}>T</Heading></Column></Row></Body>)).toContain(`<${level}`);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
   it("has correct displayName", () => {
     expect(Heading.displayName).toBe("Heading");
   });
+
+  describe("margin shortcuts (m, mx, my, mt, mr, mb, ml): its containerPadding", () => {
+    const padding = (props: Record<string, unknown>) =>
+      (renderToJson(
+        <Body>
+          <Row>
+            <Column>
+              <Heading {...props}>Title</Heading>
+            </Column>
+          </Row>
+        </Body>
+      ).body.rows[0].columns[0].contents[0].values as Record<string, unknown>).containerPadding;
+
+    it("sets the sides given, the others its default (10px); a number in px", () => {
+      expect(padding({ m: 0 })).toBe("0px 0px 0px 0px");
+      expect(padding({ my: 24, mx: "16px" })).toBe("24px 16px 24px 16px");
+      expect(padding({ mt: 32, mb: 8 })).toBe("32px 10px 8px 10px");
+      expect(padding({ m: 4, ml: 0 })).toBe("4px 4px 4px 0px");
+    });
+
+    it("gives way to an explicit containerPadding, and changes nothing without them", () => {
+      expect(padding({ mt: 32, containerPadding: "2px" })).toBe("2px");
+      expect(padding({})).toBe("10px");
+    });
+
+    it("is in the HTML as in the design, and not said as a prop it ignores", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      try {
+        const html = renderToHtml(
+          <Body>
+            <Row>
+              <Column>
+                <Heading mt={32} mb={8}>Title</Heading>
+              </Column>
+            </Row>
+          </Body>
+        );
+        expect(html).toContain("padding: 32px 10px 8px 10px");
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+  });
 });
+
diff --git a/packages/react/src/components/Heading.tsx b/packages/react/src/components/Heading.tsx
index e466ca97..a71cebd5 100644
--- a/packages/react/src/components/Heading.tsx
+++ b/packages/react/src/components/Heading.tsx
@@ -1,27 +1,49 @@
 import { HeadingExporters, HeadingDefaults } from "@unlayer/exporters";
-import type { HeadingValues, TextStyleProps, HeadingLevel } from "../types";
+import type { AlignAlias, HeadingValues, TextColorAlias, TextStyleProps, HeadingLevel } from "../types";
 import {
   createItemComponent,
   type ItemComponentProps
 } from "../utils/create-component";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
+import { sayOnce } from "../utils/render-scope";
 
 /**
  * Heading semantic props — agent-friendly text/style types (replacing the loose
- * `any` flat props) plus the `level` alias and h1–h6 levels.
+ * `any` flat props) plus the `level` and `as` aliases and h1–h6 levels.
  */
 type HeadingSemanticProps = Omit<
   SemanticProps<HeadingValues>,
   keyof TextStyleProps | "headingType"
 > &
-  TextStyleProps & {
+  TextStyleProps &
+  AlignAlias &
+  TextColorAlias & {
     /** Heading level h1–h6. */
     headingType?: HeadingLevel;
-    /** Alias for `headingType`. */
+    /** Alias of `headingType` (which wins where both are given). */
     level?: HeadingLevel;
+    /** Alias of `headingType`, as React Email's `<Heading as="h2">` names it (`headingType` and `level` win over it). */
+    as?: HeadingLevel;
     /** Heading text (or use children). */
     text?: string;
-  };
+  } & HeadingMargins;
+
+/**
+ * Margin shortcuts, as React Email's Heading takes them: its `containerPadding` (the space around it), each side not
+ * given its default (10px). A number is px. An explicit `containerPadding` wins over them.
+ */
+export interface HeadingMargins {
+  /** All four sides. */
+  m?: number | string;
+  /** Left and right. */
+  mx?: number | string;
+  /** Top and bottom. */
+  my?: number | string;
+  mt?: number | string;
+  mr?: number | string;
+  mb?: number | string;
+  ml?: number | string;
+}
 
 /**
  * Heading Component Props
@@ -60,17 +82,31 @@ const DEFAULT_VALUES = {
 const Heading = createItemComponent<HeadingValues, HeadingSemanticProps>({
   name: "Heading",
   defaultValues: DEFAULT_VALUES,
+  // `level` and `as` are `headingType` (see PROP_ALIASES). The editor's exporters write it as the tag's name, so a
+  // level from data could be any tag (one whose text a browser runs as code): one that isn't h1 to h6 is an h1, and said.
   propMapper: (props) => {
-    const { level, ...rest } = props as SemanticProps<HeadingValues> & { level?: HeadingValues["headingType"] };
-    const result = mapSemanticProps(rest as SemanticProps<HeadingValues>, DEFAULT_VALUES, "Heading");
-    // Map level prop to headingType
-    if (level && !result.headingType) {
-      result.headingType = level;
+    const mapped = mapSemanticProps(props as SemanticProps<HeadingValues>, DEFAULT_VALUES, "Heading");
+    if (mapped.headingType !== undefined && !/^h[1-6]$/i.test(String(mapped.headingType))) {
+      sayOnce("[Unlayer] Heading takes a level from h1 to h6: another is an h1.");
+      mapped.headingType = "h1";
     }
-    return result;
+    return mapped;
   },
   displayName: "Heading",
+  // `style` and `className` go on its text element.
+  at: /<[a-z\d]+ [^>]*v-text-align[^>]*>/,
   exporters: HeadingExporters,
 });
 
+/**
+ * The margin shortcuts (`m`, `mx`, `my`, `mt`, `mr`, `mb`, `ml`: a number in px, or CSS) as the spacing around the
+ * heading, its `containerPadding` (sides not given keep 10px), which the design keeps editable. A `containerPadding`
+ * given wins.
+ */
+export function margins({ m, mx, my, mt, mr, mb, ml, ...props }: Record<string, any>): Record<string, any> {
+  if (props.containerPadding !== undefined || [m, mx, my, mt, mr, mb, ml].every((v) => v === undefined)) return props;
+  const sides = [mt ?? my ?? m, mr ?? mx ?? m, mb ?? my ?? m, ml ?? mx ?? m].map((v) => (typeof v === "number" ? `${v}px` : v ?? "10px"));
+  return { ...props, containerPadding: sides.join(" ") };
+}
+
 export default Heading;
diff --git a/packages/react/src/components/Html.tsx b/packages/react/src/components/Html.tsx
index 46e4bcc6..ebf46875 100644
--- a/packages/react/src/components/Html.tsx
+++ b/packages/react/src/components/Html.tsx
@@ -1,4 +1,5 @@
 import { HtmlExporters, HtmlDefaults } from "@unlayer/exporters";
+import { html } from "../exporters/html";
 import type { HtmlValues } from "../types";
 import { createItemComponent, type ItemComponentProps } from "../utils/create-component";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
@@ -35,7 +36,8 @@ const Html = createItemComponent<HtmlValues, SemanticProps<HtmlValues>>({
   defaultValues: DEFAULT_VALUES,
   propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES, "Html"),
   displayName: "Html",
-  exporters: HtmlExporters,
+  // The web and document HTML without react-dom (see exporters/markup.ts).
+  exporters: { ...HtmlExporters, web: html, document: html },
 });
 
 export default Html;
diff --git a/packages/react/src/components/Image.test.tsx b/packages/react/src/components/Image.test.tsx
index 788c2fc2..ad19e12d 100644
--- a/packages/react/src/components/Image.test.tsx
+++ b/packages/react/src/components/Image.test.tsx
@@ -9,8 +9,22 @@ import { Column } from "./Column";
 import { ColumnLayouts, type ColumnLayout } from "../layouts/ColumnLayouts";
 import { renderToJson } from "../utils/render-to-json";
 import { renderToHtml } from "../utils/render-to-html";
+import * as Roots from "../index";
 
+
+/** A block given a link of null (nullable data) and the same block given none, in each root: the HTML and the design. */
+function asNone(withNull: React.ReactElement, without: React.ReactElement) {
+  for (const Root of [Roots.Email, Roots.Page, Roots.Document]) {
+    const tree = (block: React.ReactElement) => <Root><Roots.Row><Roots.Column>{block}</Roots.Column></Roots.Row></Root>;
+    expect(Roots.renderToHtml(tree(withNull)), Root.displayName).toBe(Roots.renderToHtml(tree(without)));
+    expect(Roots.renderToJson(tree(withNull))).toEqual(Roots.renderToJson(tree(without)));
+  }
+}
 describe("Image Component", () => {
+  it("takes an `action` of null (nullable data) as none, in each root", () => {
+    asNone(<Image src="https://example.com/a.png" alt="A" action={null as never} />, <Image src="https://example.com/a.png" alt="A" />);
+  });
+
   it("renders an img element", () => {
     const { container } = render(<Image src="https://example.com/photo.jpg" />);
     const img = container.querySelector("img");
@@ -59,6 +73,19 @@ describe("Image Component", () => {
     expect(img).not.toBeNull();
   });
 
+  it("puts its style and className on every <img> an email writes for it, Outlook's copy and every other client's", () => {
+    // With its natural size given (`src={{ url, width, height }}`), the email exporter writes the image twice: once in
+    // Outlook's conditional comment, once for every other client.
+    const html = renderToHtml(<Email><Row><Column><Image src={{ url: "https://x.example/a.png", width: 200, height: 200 }} alt="A" className="avatar" style={{ borderRadius: "50%" }} /></Column></Row></Email>);
+    const body = html.slice(html.indexOf("<body"));
+    const images = [...body.matchAll(/<img [^>]*>/g)].map((m) => m[0]);
+    expect(images.length).toBeGreaterThan(1);
+    for (const image of images) {
+      expect(image).toContain("border-radius:50%");
+      expect(image).toMatch(/class="[^"]*\bavatar\b/);
+    }
+  });
+
   it("applies max-width style", () => {
     const { container } = render(<Image src="https://example.com/photo.jpg" />);
     const img = container.querySelector("img");
@@ -205,8 +232,9 @@ describe("Image Component", () => {
   });
 
   // Regression: an image must size against the real available width
-  // (contentWidth × column fraction), not a fixed fallback. The Column threads
-  // its body/column context to the exporter so this matches the editor.
+  // (contentWidth × column fraction, less the block's default 10px padding on
+  // each side), not a fixed fallback. The Column threads its body/column context
+  // to the exporter so this matches the editor.
   describe("sizes against contentWidth × column width (threaded to the exporter)", () => {
     const big = { url: "https://x/p.jpg", width: 1200, height: 600 };
     const imgWidth = (html: string) => {
@@ -226,16 +254,16 @@ describe("Image Component", () => {
       );
     };
 
-    it("a full-width image fills the content width (not the 500 fallback)", () => {
-      expect(imgWidth(renderImg("600px", ColumnLayouts.OneColumn, 1))).toBe(600);
+    it("a full-width image fills the content width less its padding (not the 500 fallback)", () => {
+      expect(imgWidth(renderImg("600px", ColumnLayouts.OneColumn, 1))).toBe(580);
     });
 
     it("an image in a 3-column row sizes to its column (~1/3), staying responsive", () => {
-      expect(imgWidth(renderImg("600px", ColumnLayouts.ThreeEqual, 3))).toBe(200);
+      expect(imgWidth(renderImg("600px", ColumnLayouts.ThreeEqual, 3))).toBe(180);
     });
 
     it("respects a wider contentWidth", () => {
-      expect(imgWidth(renderImg("900px", ColumnLayouts.OneColumn, 1))).toBe(900);
+      expect(imgWidth(renderImg("900px", ColumnLayouts.OneColumn, 1))).toBe(880);
     });
   });
 });
diff --git a/packages/react/src/components/Image.tsx b/packages/react/src/components/Image.tsx
index 515283ae..254f0686 100644
--- a/packages/react/src/components/Image.tsx
+++ b/packages/react/src/components/Image.tsx
@@ -1,7 +1,8 @@
 import { ImageExporters, ImageDefaults } from "@unlayer/exporters";
-import type { ImageValues, ImageSrcInput, SizeInput } from "../types";
+import type { AlignAlias, ImageValues, ImageSrcInput, SizeInput } from "../types";
 import { createItemComponent, type ItemComponentProps } from "../utils/create-component";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
+import { PERCENT, toPx } from "../utils/image-sizing";
 
 /**
  * Image semantic props — agent-friendly `src` (plain URL string or value object)
@@ -11,7 +12,7 @@ import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
 type ImageSemanticProps = Omit<
   SemanticProps<ImageValues>,
   "src" | "width" | "maxWidth"
-> & {
+> & AlignAlias & {
   /** Alt text (alias for altText) */
   alt?: string;
   /** Image URL string, or the value object `{ url, width?, maxWidth?, ... }`. */
@@ -78,11 +79,7 @@ const Image = createItemComponent<ImageValues, ImageSemanticProps>({
         ? { ...rest, values: { ...restValues, src: { url: restValues.src } } }
         : rest;
 
-    const base: Partial<ImageValues> = mapSemanticProps(
-      normalizedRest as SemanticProps<ImageValues>,
-      DEFAULT_VALUES,
-      "Image"
-    );
+    const base: Partial<ImageValues> = mapSemanticProps(normalizedRest as SemanticProps<ImageValues>, DEFAULT_VALUES, "Image");
 
     // Map alt → altText
     if (alt !== undefined) {
@@ -129,51 +126,20 @@ const Image = createItemComponent<ImageValues, ImageSemanticProps>({
       // (the documented full-control form) — is treated as that display intent and
       // pins. This is the canonical pinned shape the editor stores, so it survives
       // the round-trip; an `autoWidth` set explicitly on `src` is honored as-is.
-      const pctRe = /^\d+(?:\.\d+)?%$/;
-      const asPercent = (v: unknown): string | undefined =>
-        typeof v === "string" && pctRe.test(v.trim()) ? v.trim() : undefined;
-      const asPx = (v: unknown): number | undefined => {
-        if (typeof v === "number" && Number.isFinite(v)) return v;
-        if (typeof v === "string") {
-          const t = v.trim();
-          if (pctRe.test(t)) return undefined;
-          const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(t);
-          if (m) return parseFloat(m[1]);
-        }
-        return undefined;
-      };
-
-      // Resolve display intent in priority order: flat `width` → flat `maxWidth`
-      // → object src `maxWidth` → object src `width`.
-      let displayPct: string | undefined;
-      let displayPx: number | undefined;
+      // The display intent, in priority order: flat `width` → flat `maxWidth` → object src `maxWidth` → object src
+      // `width` (a percent, or px; a value that's neither is passed over).
+      let display: string | number | undefined;
       for (const candidate of [widthProp, maxWidthProp, userSrc.maxWidth, userSrc.width]) {
-        if (candidate === undefined) continue;
-        const pct = asPercent(candidate);
-        if (pct) {
-          displayPct = pct;
-          break;
-        }
-        const px = asPx(candidate);
-        if (px != null) {
-          displayPx = px;
-          break;
-        }
+        display = typeof candidate === "string" && PERCENT.test(candidate.trim()) ? candidate.trim() : toPx(candidate);
+        if (display !== undefined) break;
       }
 
       // An explicit escape-hatch `autoWidth` is honored as-is (its own maxWidth
-      // stays); otherwise the display intent decides.
+      // stays); otherwise the display intent decides ("100%" is responsive).
       if (userSrc.autoWidth === undefined) {
-        if (displayPct && displayPct !== "100%") {
-          merged.autoWidth = false;
-          merged.maxWidth = displayPct;
-        } else if (displayPx != null) {
-          merged.autoWidth = false;
-          merged.maxWidth = displayPx;
-        } else {
-          merged.autoWidth = true;
-          merged.maxWidth = "100%";
-        }
+        const pinned = display !== undefined && display !== "100%";
+        merged.autoWidth = !pinned;
+        merged.maxWidth = pinned ? display : "100%";
       }
 
       base.src = merged as ImageValues["src"];
@@ -182,6 +148,9 @@ const Image = createItemComponent<ImageValues, ImageSemanticProps>({
     return base;
   },
   displayName: "Image",
+  // Every <img> it writes: an email's image with its natural size is written twice, in Outlook's conditional comment and
+  // for every other client.
+  at: /<img [^>]*>/g,
   exporters: ImageExporters,
 });
 
diff --git a/packages/react/src/components/Image.width-roundtrip.test.tsx b/packages/react/src/components/Image.width-roundtrip.test.tsx
index ef9a7d11..ebea80f8 100644
--- a/packages/react/src/components/Image.width-roundtrip.test.tsx
+++ b/packages/react/src/components/Image.width-roundtrip.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect } from "vitest";
 import React from "react";
 import Email from "./Email";
 import Page from "./Page";
+import Document from "./Document";
 import Image from "./Image";
 import Row from "./Row";
 import { Column } from "./Column";
@@ -210,10 +211,56 @@ describe("Image fixed-width rendering (renderToHtml)", () => {
         </Row>
       </Page>
     );
-    // The pin renders as `width: <pct>%` (caps at the slot via max-width), so the
-    // image shrinks with a narrow column instead of forcing a fixed 300px box.
-    expect(html).toMatch(/width:\s*51\.72%/);
-    expect(html).not.toMatch(/width:\s*300px/);
+    // The pin renders as `width: <pct>%` (the percent the design stores, rounded as the editor rounds it) with the
+    // px as its max-width, so the image is 300px wide in its 580px slot (299.98px) and shrinks with a narrow column
+    // instead of forcing a fixed 300px box.
+    expect(html).toMatch(/[^-]width:\s*51\.72%;max-width: 300px;/);
+    expect(html).not.toMatch(/[^-]width:\s*300px/);
+  });
+
+  // Regression: a px width rendered wider than asked (`width="120px"` in a two-column row gave `max-width: 130.43px`):
+  // the exporter sized the image in a slot without the block's padding.
+  it("renders a px width at that width in every mode, in any column", () => {
+    const sizes: string[] = [];
+    for (const Root of [Email, Page, Document]) {
+      for (const [layout, width, padding] of [[ColumnLayouts.TwoEqual, "120px", undefined], [ColumnLayouts.OneColumn, 120, undefined], [ColumnLayouts.ThreeEqual, "97px", "4px 13px"]] as const) {
+        const html = renderToHtml(
+          <Root>
+            <Row layout={layout}>
+              {layout.cells.map((_, i) => (
+                <Column key={i}>{i === 0 ? <Image src={{ url: "https://x/p.png", width: 800, height: 400 }} width={width} containerPadding={padding} /> : null}</Column>
+              ))}
+            </Row>
+          </Root>
+        );
+        for (const img of html.match(/<img [^>]*>/g)!) sizes.push(...(img.match(/max-width: [\d.]+px|width="[\d.]+"/g) ?? []));
+        // The percent it scales down by from that (where the image has one) is the design's: of the slot, to 2
+        // decimals, as the editor rounds it.
+        const percent = /[^-]width: ([\d.]+)%/.exec(/<img [^>]*>/.exec(html)![0])?.[1];
+        const slot = 500 / layout.cells.length - (padding ? 26 : 20);
+        if (percent) expect(Math.abs((Number(percent) / 100) * slot - Number(String(width).replace("px", "")))).toBeLessThanOrEqual(slot * 0.00005);
+      }
+    }
+    expect([...new Set(sizes)].sort()).toEqual(['max-width: 120px', 'max-width: 97px', 'width="120"', 'width="97"']);
+  });
+
+  it("stores the same percent in the HTML as in the design, keeping the px as its max-width", () => {
+    // 64px of the 580px slot is 11.034…%: 11.03% in both (the HTML rounded it up to 11.04% before).
+    const tree = (
+      <Email contentWidth="600px">
+        <Row>
+          <Column>
+            <Image src="https://x/p.png" width={64} />
+            <Image src="https://x/p.png" width="120px" />
+          </Column>
+        </Row>
+      </Email>
+    );
+    const design = renderToJson(tree).body.rows[0].columns[0].contents.map((c) => (c.values.src as Record<string, any>).maxWidth);
+    expect(design).toEqual(["11.03%", "20.69%"]);
+    const images = renderToHtml(tree).match(/<img [^>]*>/g)!;
+    expect(images[0]).toMatch(/[^-]width: 11\.03%;max-width: 64px;" width="64"/);
+    expect(images[1]).toMatch(/[^-]width: 20\.69%;max-width: 120px;" width="120"/);
   });
 
   it("caps a too-wide pin at 100% in a narrow column", () => {
@@ -233,7 +280,7 @@ describe("Image fixed-width rendering (renderToHtml)", () => {
       </Page>
     );
     expect(html).toMatch(/width:\s*100%/);
-    expect(html).not.toMatch(/width:\s*300px/);
+    expect(html).not.toMatch(/[^-]width:\s*300px/);
   });
 });
 
diff --git a/packages/react/src/components/Link.tsx b/packages/react/src/components/Link.tsx
new file mode 100644
index 00000000..029c27ce
--- /dev/null
+++ b/packages/react/src/components/Link.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import type { SizeInput } from "../types";
+
+export interface LinkProps {
+  href: string;
+  /** Where it opens (default: a new tab, `_blank`). */
+  target?: string;
+  /** Default `noopener` for a new tab. */
+  rel?: string;
+  title?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: React.ReactNode;
+  /** On its own in a Column (a Paragraph holding it): the spacing around it, and where it's hidden. */
+  containerPadding?: SizeInput;
+  hideOnMobile?: boolean;
+  hideOnDesktop?: boolean;
+}
+
+/**
+ * Link - A link in text (`<Paragraph>Read <Link href="…">the guide</Link></Paragraph>`), or on its own in a Column,
+ * where it's a Paragraph holding it (so the design can edit it).
+ */
+export function Link({ href, target = "_blank", rel = target === "_blank" ? "noopener" : undefined, title, style, className, children }: LinkProps): React.ReactElement {
+  return <a href={href} target={target} rel={rel} title={title} style={style} className={className}>{children}</a>;
+}
+
+Link.displayName = "Link";
+
+export default Link;
diff --git a/packages/react/src/components/Menu.test.tsx b/packages/react/src/components/Menu.test.tsx
index 898aca29..4a7a1d9d 100644
--- a/packages/react/src/components/Menu.test.tsx
+++ b/packages/react/src/components/Menu.test.tsx
@@ -2,8 +2,26 @@ import { describe, it, expect } from "vitest";
 import React from "react";
 import { render } from "@testing-library/react";
 import Menu from "./Menu";
+import * as Roots from "../index";
 
+
+/** A block given a link of null (nullable data) and the same block given none, in each root: the HTML and the design. */
+function asNone(withNull: React.ReactElement, without: React.ReactElement) {
+  for (const Root of [Roots.Email, Roots.Page, Roots.Document]) {
+    const tree = (block: React.ReactElement) => <Root><Roots.Row><Roots.Column>{block}</Roots.Column></Roots.Row></Root>;
+    expect(Roots.renderToHtml(tree(withNull)), Root.displayName).toBe(Roots.renderToHtml(tree(without)));
+    expect(Roots.renderToJson(tree(withNull))).toEqual(Roots.renderToJson(tree(without)));
+  }
+}
 describe("Menu Component", () => {
+  it("skips a null or undefined item (nullable data), in each root", () => {
+    asNone(<Menu items={[{ text: "Home", href: "https://example.com/" }, null as never, { text: "Shop", href: "https://example.com/shop" }, undefined as never]} />, <Menu items={[{ text: "Home", href: "https://example.com/" }, { text: "Shop", href: "https://example.com/shop" }]} />);
+  });
+
+  it("takes an item's `href` of null (nullable data) as none, in each root", () => {
+    asNone(<Menu items={[{ text: "Go", href: null as never }, { text: "Home", href: "https://example.com/" }]} />, <Menu items={[{ text: "Go" }, { text: "Home", href: "https://example.com/" }]} />);
+  });
+
   it("renders menu items with text content", () => {
     const { container } = render(
       <Menu
diff --git a/packages/react/src/components/Menu.tsx b/packages/react/src/components/Menu.tsx
index 9d947ac1..64d04ded 100644
--- a/packages/react/src/components/Menu.tsx
+++ b/packages/react/src/components/Menu.tsx
@@ -1,4 +1,5 @@
 import { MenuExporters, MenuDefaults } from "@unlayer/exporters";
+import { menu } from "../exporters/menu";
 import type { MenuValues, MenuItem, SizeInput, TextStyleProps } from "../types";
 import { createItemComponent, type ItemComponentProps } from "../utils/create-component";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
@@ -6,7 +7,9 @@ import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
 // Menu carries fontFamily/fontWeight/fontSize/letterSpacing (but not color or
 // lineHeight) — relax those to the same agent-friendly inputs Heading/Paragraph
 // use, so a string fontFamily or a number/em size type-checks (normalized at
-// render time). It has no `color` field (uses linkColor/textColor).
+// render time). Its colors are `textColor` (an item without a link, the
+// separator) and `linkColor` (an item with one); `color` stands for both, and
+// `textAlign` for `align` (see PROP_ALIASES).
 type MenuSemanticProps = Omit<
   SemanticProps<MenuValues>,
   "padding" | "fontFamily" | "fontWeight" | "fontSize" | "letterSpacing"
@@ -16,13 +19,14 @@ type MenuSemanticProps = Omit<
     items?: MenuItem[];
     /** Inner padding — a number (→ px) or CSS string. */
     padding?: SizeInput;
+    /** The items' color, linked or not: it stands for `textColor` and `linkColor` (each wins where it's given). */
+    color?: string;
+    /** Alias of `align` (which wins where both are given). */
+    textAlign?: MenuValues["align"];
   };
 
 export interface MenuProps extends ItemComponentProps<MenuSemanticProps> {}
 
-// Defaults from the editor schema
-const DEFAULT_MENU: NonNullable<MenuValues["menu"]> = MenuDefaults.menu ?? { items: [] };
-
 const DEFAULT_VALUES = {
   ...MenuDefaults,
 } as unknown as MenuValues;
@@ -53,31 +57,26 @@ const Menu = createItemComponent<MenuValues, MenuSemanticProps>({
     const { items, ...rest } = props;
 
     if (Array.isArray(items)) {
-      const mapped = items.map((item: MenuItem, i: number) => ({
+      // (An item of null or undefined, from nullable data, is none.)
+      const mapped = items.filter((item) => item != null).map((item: MenuItem, i: number) => ({
         key: String(i + 1),
         text: item.text,
         link: {
           name: "web",
-          values: { href: item.href, target: item.target ?? "_blank" },
+          // (An href of null, from nullable data, is none, as one left out is.)
+          values: { href: item.href ?? undefined, target: item.target ?? "_blank" },
         },
       }));
-      const base: Partial<MenuValues> = mapSemanticProps(
-        rest as SemanticProps<MenuValues>,
-        DEFAULT_VALUES,
-        "Menu"
-      );
+      const base: Partial<MenuValues> = mapSemanticProps(rest as SemanticProps<MenuValues>, DEFAULT_VALUES, "Menu");
       base.menu = { items: mapped };
       return base;
     }
 
-    return mapSemanticProps(
-      props as SemanticProps<MenuValues>,
-      DEFAULT_VALUES,
-      "Menu"
-    );
+    return mapSemanticProps(props as SemanticProps<MenuValues>, DEFAULT_VALUES, "Menu");
   },
   displayName: "Menu",
-  exporters: MenuExporters,
+  // The web HTML (a document's too) without react-dom (see exporters/markup.ts).
+  exporters: { ...MenuExporters, web: menu },
 });
 
 export default Menu;
diff --git a/packages/react/src/components/Page.tsx b/packages/react/src/components/Page.tsx
index 46a44e8d..afe3d2cf 100644
--- a/packages/react/src/components/Page.tsx
+++ b/packages/react/src/components/Page.tsx
@@ -1,4 +1,6 @@
 import Body, { type BodyProps } from "./Body";
+import { OWN } from "../utils/create-component";
+import { ROOT } from "../utils/root-type";
 
 export type PageProps = Omit<BodyProps, "mode">;
 
@@ -19,3 +21,5 @@ export default function Page(props: PageProps) {
 }
 
 Page.displayName = "Page";
+((Page as unknown) as Record<symbol, boolean>)[OWN] = true;
+((Page as unknown) as Record<symbol, string>)[ROOT] = "Page";
diff --git a/packages/react/src/components/Paragraph.tsx b/packages/react/src/components/Paragraph.tsx
index f67255b4..9385a1f8 100644
--- a/packages/react/src/components/Paragraph.tsx
+++ b/packages/react/src/components/Paragraph.tsx
@@ -1,5 +1,6 @@
-import { ParagraphExporters, ParagraphDefaults } from "@unlayer/exporters";
-import type { ParagraphValues, TextStyleProps } from "../types";
+import { ParagraphDefaults, TextExporters } from "@unlayer/exporters";
+import type { AlignAlias, ParagraphValues, TextColorAlias, TextStyleProps } from "../types";
+import { textJsonToText, type ValuesInput } from "@unlayer-internal/shared-elements";
 import { createItemComponent, type ItemComponentProps } from "../utils/create-component";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
 
@@ -9,11 +10,15 @@ import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
  */
 type ParagraphSemanticProps = Omit<
   SemanticProps<ParagraphValues>,
-  keyof TextStyleProps
+  keyof TextStyleProps | "values"
 > &
-  TextStyleProps & {
+  TextStyleProps &
+  AlignAlias &
+  TextColorAlias & {
     /** Plain-text content (or use `html` for inline formatting, or children). */
     text?: string;
+    /** The builder's values (see `SemanticProps`), with its text as HTML in `text` or `html`. */
+    values?: ValuesInput<ParagraphValues & { text: string; html: string }>;
   };
 
 /**
@@ -28,6 +33,17 @@ const DEFAULT_VALUES = {
   color: "#000000", // Not in schema options but used by renderer
 } as unknown as ParagraphValues;
 
+/**
+ * The design holds a Paragraph as the builder's text block (see render-to-json.ts), so its HTML is that block's: the
+ * text block's exporters, on the HTML its textJson holds there. The editor exports the design as it renders.
+ */
+const exporters = Object.fromEntries(
+  Object.entries(TextExporters).map(([mode, exporter]) => [
+    mode,
+    (values: Record<string, any>, ...rest: unknown[]) => (exporter as (...args: unknown[]) => string)(values.textJson ? { ...values, text: textJsonToText(values.textJson) } : values, ...rest),
+  ])
+);
+
 /**
  * Paragraph - Universal SSR/Client Component with Semantic Props API
  *
@@ -54,7 +70,9 @@ const Paragraph = createItemComponent<ParagraphValues, ParagraphSemanticProps>({
   propMapper: (props) =>
     mapSemanticProps(props as SemanticProps<ParagraphValues>, DEFAULT_VALUES, "Paragraph"),
   displayName: "Paragraph",
-  exporters: ParagraphExporters,
+  // `style` and `className` go on its text element.
+  at: /<[a-z\d]+ [^>]*v-text-align[^>]*>/,
+  exporters,
 });
 
 export default Paragraph;
diff --git a/packages/react/src/components/Row.test.tsx b/packages/react/src/components/Row.test.tsx
index 0489871d..6e5ceddc 100644
--- a/packages/react/src/components/Row.test.tsx
+++ b/packages/react/src/components/Row.test.tsx
@@ -1,10 +1,16 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import React from "react";
 import { render } from "@testing-library/react";
 import Body from "./Body";
 import Row from "./Row";
 import { Column } from "./Column";
 import Paragraph from "./Paragraph";
+import Heading from "./Heading";
+import Email from "./Email";
+import Page from "./Page";
+import Document from "./Document";
+import { renderToHtml } from "../utils/render-to-html";
+import { renderRowToJson, renderToJson } from "../utils/render-to-json";
 
 describe("Row Component", () => {
   it("renders row container with correct ID", () => {
@@ -88,7 +94,7 @@ describe("Row Component", () => {
 
 describe("Row layout with columns from components", () => {
   it("counts the columns a Fragment or a component gives", async () => {
-    const { Email, renderToHtml, ColumnLayouts } = await import("../index");
+    const { ColumnLayouts } = await import("../index");
     const Pair = () => (
       <>
         <Column><Paragraph>Left column words</Paragraph></Column>
@@ -99,4 +105,226 @@ describe("Row layout with columns from components", () => {
     expect(html).toContain("Left column words");
     expect(html).toContain("Right column words");
   });
+
+  describe("padding: the editor's, around the row, in every mode", () => {
+    type Props = Record<string, unknown>;
+    const ROOTS = { Email, Page, Document } as const;
+    const template = (Root: (typeof ROOTS)[keyof typeof ROOTS], row: Props, columns: Props[] = [{}]) => (
+      <Root>
+        <Row {...row}>
+          {columns.map((props, i) => (
+            <Column key={i} {...props}>
+              <Paragraph>Words {i}</Paragraph>
+            </Column>
+          ))}
+        </Row>
+      </Root>
+    );
+    const ADVICE = "[Unlayer] Row padding sits outside the row's content background, as in the editor; to inset the content use the Columns' padding.";
+
+    it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: on the row, its phone padding too; the Columns keep theirs", (mode) => {
+      const element = template(ROOTS[mode], { padding: "44px 48px 8px", mobile: { padding: "12px" } }, [{ padding: "4px" }, {}]);
+      const { values, columns } = renderToJson(element).body.rows[0];
+      expect(values.padding).toBe("44px 48px 8px");
+      expect(values._override.mobile.padding).toBe("12px");
+      expect(columns.map((c: { values: Record<string, any> }) => [c.values.padding, c.values._override?.mobile?.padding])).toEqual([["4px", undefined], ["0px", undefined]]);
+      const html = renderToHtml(element);
+      expect(html).toMatch(/<div id="u_row_1" class="[^"]*v-row-padding[^"]*" style="padding: 44px 48px 8px;/);
+      expect(html).toMatch(/class="v-col-padding"[^>]*padding: ?4px;/);
+      // A document has no phones.
+      if (mode !== "Document") expect(html).toContain("#u_row_1.v-row-padding { padding: 12px !important; }");
+    });
+
+    it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: says, once per render, that it's outside a content background", (mode) => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      try {
+        const said = (row: Props) => {
+          warn.mockClear();
+          renderToHtml(template(ROOTS[mode], row, [{}, {}]));
+          return warn.mock.calls.map((call) => String(call[0]));
+        };
+        // A content background: the content-width color, or an image there (not full width).
+        expect(said({ padding: 32, columnsBackgroundColor: "#ffffff" })).toEqual([ADVICE]);
+        expect(said({ padding: "0 24px", backgroundImage: { url: "https://example.com/a.png", fullWidth: false } })).toEqual([ADVICE]);
+        expect(said({ values: { padding: "20px", columnsBackgroundColor: "#fff" } })).toEqual([ADVICE]);
+        // None: no padding, a 0 one, a full-width band behind the row, or no background.
+        for (const row of [{ columnsBackgroundColor: "#ffffff" }, { padding: "0px", columnsBackgroundColor: "#ffffff" }, { padding: 32, backgroundColor: "#ffffff" }, { padding: 32 }, { padding: 32, columnsBackgroundColor: "transparent" }, { padding: 32, backgroundImage: { url: "https://example.com/a.png", fullWidth: true } }]) {
+          expect(said(row)).toEqual([]);
+        }
+        // Once per render, for every row that has it.
+        warn.mockClear();
+        renderToHtml(
+          <Email>
+            <Row padding={16} columnsBackgroundColor="#fff"><Column /></Row>
+            <Row padding={16} columnsBackgroundColor="#fff"><Column /></Row>
+          </Email>
+        );
+        expect(warn).toHaveBeenCalledTimes(1);
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    it("is the same in renderRowToJson", () => {
+      const row = renderRowToJson(
+        <Row padding={24}>
+          <Column><Paragraph>A</Paragraph></Column>
+          <Column><Paragraph>B</Paragraph></Column>
+        </Row>
+      );
+      expect(row.values.padding).toBe("24px");
+      expect(row.columns.map((c) => c.values.padding)).toEqual(["0px", "0px"]);
+    });
+  });
+
+  describe("backgroundImage: the editor's defaults where it sets none, in the HTML as in the design", () => {
+    const ROOTS = { Email, Page, Document } as const;
+    const URL = "https://example.com/bg.png";
+    const template = (Root: (typeof ROOTS)[keyof typeof ROOTS], backgroundImage: Record<string, unknown>) => (
+      <Root>
+        <Row backgroundImage={backgroundImage as never}>
+          <Column><Heading>Over the image</Heading></Column>
+        </Row>
+      </Root>
+    );
+    /** Where the HTML paints the image: the row's full width (outer) or its content box (inner). */
+    const where = (html: string) => [...html.matchAll(/v-row-background-image--(outer|inner)[^"]*" style="[^"]*background-image: url\('([^']*)'\)/g)].map((m) => m[1]);
+
+    it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: full width unless it says otherwise", (mode) => {
+      const Root = ROOTS[mode];
+      // Without `fullWidth`: the editor's default, full width, as the design has it.
+      const omitted = renderToHtml(template(Root, { url: URL }));
+      expect(omitted).toBe(renderToHtml(template(Root, { url: URL, fullWidth: true, repeat: "no-repeat", size: "custom", position: "center" })));
+      expect(new Set(where(omitted))).toEqual(new Set(["outer"]));
+      expect(renderToJson(template(Root, { url: URL })).body.rows[0].values.backgroundImage).toEqual({ url: URL, fullWidth: true, repeat: "no-repeat", size: "custom", position: "center" });
+      // `fullWidth: false`: in the content box, its other settings the editor's defaults too.
+      const boxed = renderToHtml(template(Root, { url: URL, fullWidth: false }));
+      expect(new Set(where(boxed))).toEqual(new Set(["inner"]));
+      expect(boxed).toBe(renderToHtml(template(Root, { url: URL, fullWidth: false, repeat: "no-repeat", size: "custom", position: "center" })));
+      expect(renderToJson(template(Root, { url: URL, fullWidth: false })).body.rows[0].values.backgroundImage).toMatchObject({ fullWidth: false, position: "center" });
+    });
+
+    it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: a URL with quotes, brackets or spaces is whole in the CSS, as given in the design", (mode) => {
+      const Root = ROOTS[mode];
+      const odd = "https://example.com/it's (big) photo.png";
+      const encoded = "https://example.com/it%27s%20%28big%29%20photo.png";
+      for (const fullWidth of [true, false]) {
+        const element = (
+          <Root backgroundImage={{ url: odd, fullWidth: true } as never}>
+            <Row backgroundImage={{ url: odd, fullWidth }}>
+              <Column><Heading>Over the image</Heading></Column>
+            </Row>
+          </Root>
+        );
+        const html = renderToHtml(element);
+        // Every `url('…')` holds the whole address, its quote, brackets and spaces percent-encoded (a browser's same URL).
+        const urls = [...html.matchAll(/url\('([^']*)'\)/g)].map((m) => m[1]);
+        expect(urls.length).toBeGreaterThan(0);
+        expect(new Set(urls)).toEqual(new Set([encoded]));
+        expect(decodeURI(encoded)).toBe(odd);
+        expect(html).not.toContain("it's");
+        // The row's style attribute is whole: its background image is the image, not cut off.
+        const doc = new DOMParser().parseFromString(html, "text/html");
+        const boxes = [...doc.querySelectorAll<HTMLElement>("[style*=background-image]")];
+        expect(boxes.length).toBeGreaterThan(0);
+        for (const box of boxes) expect(box.style.backgroundImage).toContain("it%27s%20%28big%29%20photo.png");
+        // The design keeps the URL as given.
+        const design = renderToJson(element);
+        expect([design.body.values.backgroundImage.url, design.body.rows[0].values.backgroundImage.url]).toEqual([odd, odd]);
+      }
+    });
+
+    it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: an email service's tags in the URL stay as written, their quotes, brackets and spaces too, for it to fill in, as in 0.2.1", (mode) => {
+      const Root = ROOTS[mode];
+      const urls = [
+        "https://cdn.example.com/{{ campaign_id }}/{% if vip %}gold{% endif %}.png",
+        "{{ hero_url | default: 'https://cdn.example.com/hero.png' }}",
+        "https://cdn.example.com/{% if tier > 1 %}gold{% else %}blue{% endif %}.png",
+        "https://cdn.example.com/%%=v(@hero)=%%.png",
+        "%%=Lookup('Heroes','Image','Id',@id)=%%",
+        "<%hero_url%>",
+        // Braze's attribute references, in a Liquid tag and on their own, and Responsys's.
+        "https://cdn.example.com/{{${first_name} | default: 'friend'}}/hero.png",
+        "{% if ${language} == 'fr' %}https://cdn.example.com/fr.png{% else %}https://cdn.example.com/en.png{% endif %}",
+        "https://cdn.example.com/${hero!'default'}.png",
+      ];
+      for (const url of urls) {
+        const html = renderToHtml(
+          <Root backgroundImage={{ url, fullWidth: true } as never}>
+            <Row backgroundImage={{ url }}>
+              <Column><Heading>Over the image</Heading></Column>
+            </Row>
+          </Root>
+        );
+        expect(html).toContain(`url('${url}')`);
+        expect(html).not.toMatch(/url\('[^']*%(20|27|28|29|3C|3E)/);
+      }
+      // A space outside one is encoded, as before; a `"` in one too, which would end the attribute (a tag's strings
+      // go in single quotes there).
+      const row = (url: string) => renderToHtml(<Root><Row backgroundImage={{ url }}><Column><Heading>x</Heading></Column></Row></Root>);
+      expect(row("https://cdn.example.com/a b/{{ id }}.png")).toContain("url('https://cdn.example.com/a%20b/{{ id }}.png')");
+      expect(row('https://cdn.example.com/{{ hero | default: "x" }}.png')).toContain("url('https://cdn.example.com/{{ hero | default: %22x%22 }}.png')");
+    });
+
+    it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: a URL whose quotes, brackets or character references would end its string is encoded whole, so its row's style stays its own", (mode) => {
+      const Root = ROOTS[mode];
+      const declarations = (url: string) => {
+        const html = renderToHtml(<Root backgroundImage={{ url, fullWidth: true } as never}><Row backgroundImage={{ url }}><Column><Heading>x</Heading></Column></Row></Root>);
+        const doc = new DOMParser().parseFromString(html, "text/html");
+        return [...doc.querySelectorAll<HTMLElement>("[style*=background-image]")].map((box) => Array.from({ length: box.style.length }, (_, i) => box.style.item(i)).sort().join(" "));
+      };
+      const plain = declarations("https://x.example/plain.png");
+      for (const url of ["https://x.example/{{ a' ) b }}.png", "https://x.example/{{ a' }}.png", "https://x.example/${a!'('}.png", "https://x.example/{{${a} | b: ')'}}.png", "https://x.example/a&#39;&#41;b.png", "https://x.example/a&apos;&rpar;b.png", "https://x.example/a&quot;b.png", "https://x.example/a&#x5c;b.png"]) {
+        expect(declarations(url)).toEqual(plain);
+      }
+      // Nor can a tag end a comment the URL is written in (Outlook's conditional comment, in an email).
+      const ends = (url: string) => renderToHtml(<Root><Row backgroundImage={{ url }}><Column><Heading>x</Heading></Column></Row></Root>).split(/--!?>/).length;
+      for (const url of ["https://x.example/{{ a --> b }}.png", "https://x.example/{% a --!> b %}.png", "https://x.example/<%a-->%>.png"]) expect(ends(url)).toBe(ends("https://x.example/plain.png"));
+      // A reference that reads as a character that ends nothing stays as written (`&amp;`, as a copied URL has it).
+      expect(renderToHtml(<Root><Row backgroundImage={{ url: "https://x.example/a.png?w=1&amp;h=2&q=80" }}><Column><Heading>x</Heading></Column></Row></Root>)).toContain("url('https://x.example/a.png?w=1&amp;h=2&q=80')");
+    });
+
+    it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: code generated from the design renders the same HTML", async (mode) => {
+      const { designToElements } = await import("../codegen/design-to-elements");
+      const { evaluate } = await import("../codegen/test-harness");
+      for (const backgroundImage of [{ url: URL }, { url: URL, fullWidth: false }]) {
+        const element = template(ROOTS[mode], backgroundImage);
+        const design = renderToJson(element);
+        const { code } = designToElements(design as never, { displayMode: ({ Email: "email", Page: "web", Document: "document" } as const)[mode] });
+        // (The editor's default, full width, isn't written.)
+        expect(code.includes("fullWidth")).toBe(backgroundImage.fullWidth === false);
+        // The code renders as the design's settings, written out, do (and as the template it came from).
+        const html = renderToHtml(React.createElement(evaluate(code)));
+        expect(html).toBe(renderToHtml(template(ROOTS[mode], design.body.rows[0].values.backgroundImage as Record<string, unknown>)));
+        expect(html).toBe(renderToHtml(element));
+      }
+    });
+  });
+
+  describe("displayCondition: the editor's, around the row, as its export writes it", () => {
+    const ROOTS = { Email, Page, Document } as const;
+    const condition = { type: "vip", label: "VIP only", description: "Customers in the VIP list", before: "{% if customer.vip %}", after: "{% endif %}" };
+
+    it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: the row's HTML is between its before and after, for the email service to show it only where it's met", (mode) => {
+      const Root = ROOTS[mode];
+      const html = renderToHtml(
+        <Root>
+          <Row><Column><Paragraph>Everyone</Paragraph></Column></Row>
+          <Row values={{ displayCondition: condition }}><Column><Paragraph>VIP discount</Paragraph></Column></Row>
+        </Root>
+      );
+      const [before, after] = [html.indexOf(condition.before), html.indexOf(condition.after)];
+      expect(before).toBeGreaterThan(html.indexOf("Everyone"));
+      expect(html.slice(before, after)).toContain("VIP discount");
+      expect(html.split(condition.before)).toHaveLength(2);
+      // The design keeps it, for the editor.
+      const design = renderToJson(<Root><Row values={{ displayCondition: condition }}><Column><Paragraph>VIP</Paragraph></Column></Row></Root>);
+      expect((design.body.rows[0].values as Record<string, unknown>).displayCondition).toEqual(condition);
+    });
+
+    it("leaves a row without one as it was", () => {
+      const row = (values?: Record<string, unknown>) => <Email><Row values={values}><Column><Paragraph>Hi</Paragraph></Column></Row></Email>;
+      expect(renderToHtml(row({ displayCondition: null }))).toBe(renderToHtml(row()));
+    });
+  });
 });
diff --git a/packages/react/src/components/Row.tsx b/packages/react/src/components/Row.tsx
index 21afb1e0..ab325ac3 100644
--- a/packages/react/src/components/Row.tsx
+++ b/packages/react/src/components/Row.tsx
@@ -1,16 +1,15 @@
 import React from "react";
-import type { RenderMode, UnlayerConfig, RowValues } from "@unlayer-internal/shared-elements";
-import { validateColumnLayout } from "@unlayer-internal/shared-elements";
+import { escapeText, type RenderMode, type UnlayerConfig, type RowValues } from "@unlayer-internal/shared-elements";
 import type { ColumnLayout } from "@unlayer-internal/shared-elements";
 import { RowExporters } from "@unlayer/exporters";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
-import { nextHtmlId, safeMeta } from "../utils/create-component";
+import { nextHtmlId, safeMeta, hatch, cssUrl, withDisplayCondition } from "../utils/create-component";
 import { bodyContentWidthPx } from "../utils/image-sizing";
 import type { DeviceProps, SizeInput } from "../types";
 import { ROW_DEFAULTS, BODY_DEFAULTS } from "../utils/container-defaults";
-import { looseText } from "../utils/render-scope";
-import { collecting, RECORDS } from "../utils/collect";
-import { recordContainer, whileCollecting } from "../utils/record";
+import { looseText, remember } from "../utils/render-scope";
+import { RECORDS } from "../utils/collect";
+import { renderContainer } from "../utils/container-render";
 
 /**
  * Row - Container for columns in a layout
@@ -36,12 +35,18 @@ export type RowProps = Omit<SemanticProps<RowValues>, "padding" | keyof DevicePr
   layout?: ColumnLayout;
   cells?: number[];
   mode?: RenderMode;
+  /** Class names on the row's container; HTML only. */
   className?: string;
+  /** Inline CSS on the row's container, after the renderer's own (a prop given wins over the same property); HTML only. */
   style?: React.CSSProperties;
   index?: number;
   bodyValues?: any;
   collection?: string;
-  /** Padding — a CSS string ("0 48px", "20px 40px") or a number (px). */
+  /**
+   * The editor's Row padding: around the row, outside its content box. A CSS string ("0 48px") or a number (px). With
+   * a `columnsBackgroundColor` it's outside that background and doesn't inset the content (said once per render): inset
+   * it with the Columns' `padding`. (A Row's Tailwind `p-*` classes do inset it, as in CSS.)
+   */
   padding?: SizeInput;
   /** @internal - Unlayer config threaded from UnlayerProvider via Body */
   _config?: UnlayerConfig;
@@ -245,8 +250,9 @@ function renderRow(props: RowProps): React.ReactElement | null {
     bodyValues = {},
     collection = "rows",
     _config,
+    _record,
     ...semanticProps
-  } = props;
+  } = props as RowProps & { _record?: object };
 
   // Resolve mode: explicit prop > _config > default
   const mode: RenderMode = modeProp ?? _config?.mode ?? "web";
@@ -254,32 +260,27 @@ function renderRow(props: RowProps): React.ReactElement | null {
   // Determine cells from layout or props. With neither, default to one equal
   // cell PER <Column> child (mirroring renderToJson) — `[1]` regardless of column
   // count left the 2nd/3rd column with no cell, rendering width="NaN".
-  // Its Columns, as React rendered them (see normalize.tsx).
+  // Its Columns, as they rendered (see src/model). (The renderers give it its layout's cells, and leave out
+  // or fail on, a Row whose Columns don't fit it.)
   const columnCount = React.Children.toArray(children).filter(
     (c) => React.isValidElement(c) && /^Column$/.test((c.type as any)?.displayName || (c.type as any)?.name || "")
   ).length;
-  let cells: number[];
-  if (layout) {
-    // The Columns as rendered, or as written (a condition's place included, as 0.1.22 counted them): either fits it.
-    if (columnCount !== layout.expectedColumns) validateColumnLayout(layout, React.Children.count(children));
-    cells = layout.cells;
-  } else if (propsCells) {
-    cells = propsCells;
-  } else {
-    cells = Array(Math.max(1, columnCount)).fill(1);
-  }
+  const cells: number[] = layout?.cells ?? propsCells ?? Array(Math.max(1, columnCount)).fill(1);
 
   // Merge body values with defaults
   const safeBodyValues = { ...DEFAULT_BODY_VALUES, ...bodyValues };
 
   // Map semantic props to values
-  const values = mapSemanticProps<RowValues>(
-    semanticProps as SemanticProps<RowValues>,
-    DEFAULT_VALUES,
-    "Row"
-  );
+  const values = mapSemanticProps<RowValues>(semanticProps as SemanticProps<RowValues>, DEFAULT_VALUES, "Row");
+  // (The head reuses them: see remember.)
+  remember(_record, values.backgroundImage ? { ...values } : values);
+  // A background image takes the editor's defaults where it sets none (full width, centered), as the design does; its
+  // URL as CSS takes it (see cssUrl).
+  cssUrl(values, DEFAULT_VALUES.backgroundImage);
 
   const valuesWithMeta = { ...values, cells, _meta: safeMeta({ htmlID: nextHtmlId(_config, "u_row"), htmlClassNames: "u_row", ...(values._meta || {}) }) };
+  // Its anchor, which the exporters write into an `<a name="…">` as it is (0.2.1 did too), escaped: it reads the same.
+  if (values.anchor) valuesWithMeta.anchor = escapeText(String(values.anchor), true);
 
   // Process Column children
   const innerHTML = processChildren(
@@ -291,29 +292,29 @@ function renderRow(props: RowProps): React.ReactElement | null {
     _config
   );
 
-  try {
-    const html = renderRowToHtml(innerHTML, valuesWithMeta, safeBodyValues, mode, cells, collection);
-
-    return (
-      <div
-        dangerouslySetInnerHTML={{ __html: html }}
-        className={className}
-        style={style}
-      />
-    );
-  } catch (error) {
-    console.error("Row rendering failed:", error);
-    return (
-      <div className={className} style={style}>
-        {children}
-      </div>
-    );
-  }
+  // Its `style` and `className` on its row (the box at the content width, see hatch). Its exporter, or a Column's,
+  // failing fails it, or that Row or Column is left out (see renderContainer, and `onError`). But in an email, the
+  // padding in its `style` goes on the row around that box, as 0.2.1 had it: the box and its Columns have the content
+  // width, which padding on it would add to (the email wider than its layout, and wider than a phone).
+  const [around, own] = mode === "email" ? splitPadding(style) : [undefined, style];
+  let html = hatch(renderRowToHtml(innerHTML, valuesWithMeta, safeBodyValues, mode, cells, collection), /<div[^>]*class="u-row[ "][^>]*>/, own, className, semanticProps);
+  if (around) html = hatch(html, /<div[^>]*class="u-row-container[ "][^>]*>/, around, undefined, semanticProps);
+  // Inside its display condition, as the editor's export writes it (see withDisplayCondition).
+  return <div dangerouslySetInnerHTML={{ __html: withDisplayCondition(html, valuesWithMeta) }} />;
+}
+
+/** A style's padding (`padding`, `paddingTop`, `paddingInline`, …) and the rest of it, or undefined for an empty part. */
+function splitPadding(style: unknown): [Record<string, unknown> | undefined, Record<string, unknown> | undefined] {
+  if (!style || typeof style !== "object") return [undefined, style as undefined];
+  const entries = Object.entries(style);
+  const padding = entries.filter(([key]) => /^padding/.test(key));
+  if (!padding.length) return [undefined, style as Record<string, unknown>];
+  const rest = entries.filter(([key]) => !/^padding/.test(key));
+  return [Object.fromEntries(padding), rest.length ? Object.fromEntries(rest) : undefined];
 }
 
-// While a template is collected, a Row records itself (see normalize.tsx); then it renders the collected tree.
-const Row: React.FC<RowProps> = (props) =>
-  collecting() ? whileCollecting(() => recordContainer("row", props), () => renderRow(props), "Row") : renderRow(props);
+// A collecting walk records a Row (see utils/record.tsx); rendered, it's the collected Row's HTML.
+const Row: React.FC<RowProps> = (props) => renderContainer("Row", (props as { _record?: object })._record, "Row", () => renderRow(props));
 
 Row.displayName = "Row";
 (Row as unknown as Record<symbol, boolean>)[RECORDS] = true;
diff --git a/packages/react/src/components/Social.test.tsx b/packages/react/src/components/Social.test.tsx
index e8adbb73..55aee644 100644
--- a/packages/react/src/components/Social.test.tsx
+++ b/packages/react/src/components/Social.test.tsx
@@ -2,8 +2,26 @@ import { describe, it, expect } from "vitest";
 import React from "react";
 import { render } from "@testing-library/react";
 import Social from "./Social";
+import * as Roots from "../index";
 
+
+/** A block given a link of null (nullable data) and the same block given none, in each root: the HTML and the design. */
+function asNone(withNull: React.ReactElement, without: React.ReactElement) {
+  for (const Root of [Roots.Email, Roots.Page, Roots.Document]) {
+    const tree = (block: React.ReactElement) => <Root><Roots.Row><Roots.Column>{block}</Roots.Column></Roots.Row></Root>;
+    expect(Roots.renderToHtml(tree(withNull)), Root.displayName).toBe(Roots.renderToHtml(tree(without)));
+    expect(Roots.renderToJson(tree(withNull))).toEqual(Roots.renderToJson(tree(without)));
+  }
+}
 describe("Social Component", () => {
+  it("skips a null or undefined icon (nullable data), in each root", () => {
+    asNone(<Social icons={[null as never, { name: "Facebook", url: "https://facebook.com/x" }, undefined as never]} />, <Social icons={[{ name: "Facebook", url: "https://facebook.com/x" }]} />);
+  });
+
+  it("takes an icon's `url` of null (nullable data) as none, in each root", () => {
+    asNone(<Social icons={[{ name: "Facebook", url: null as never }, { name: "X", url: "https://x.com/a" }]} />, <Social icons={[{ name: "Facebook" } as never, { name: "X", url: "https://x.com/a" }]} />);
+  });
+
   it("renders icon images with correct URLs", () => {
     const { container } = render(
       <Social icons={[{ name: "Facebook", url: "https://facebook.com/page" }]} />
diff --git a/packages/react/src/components/Social.tsx b/packages/react/src/components/Social.tsx
index 26c33299..e3b58449 100644
--- a/packages/react/src/components/Social.tsx
+++ b/packages/react/src/components/Social.tsx
@@ -1,4 +1,5 @@
 import { SocialExporters, SocialDefaults } from "@unlayer/exporters";
+import { social } from "../exporters/social";
 import type { SocialValues, SocialIcon, SizeInput } from "../types";
 import { createItemComponent, type ItemComponentProps } from "../utils/create-component";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
@@ -15,6 +16,8 @@ type SocialSemanticProps = Omit<SemanticProps<SocialValues>, "iconSize" | "spaci
   iconSize?: SizeInput;
   /** Gap between icons in px — a number or px string. */
   spacing?: SizeInput;
+  /** Alias of `align` (which wins where both are given). */
+  textAlign?: SocialValues["align"];
 };
 
 export interface SocialProps
@@ -23,6 +26,8 @@ export interface SocialProps
   iconType?: "circle" | "rounded" | "squared";
   iconSize?: SizeInput;
   spacing?: SizeInput;
+  /** Alias of `align` (which wins where both are given). */
+  textAlign?: SocialValues["align"];
 }
 
 // Defaults from the editor schema
@@ -55,58 +60,25 @@ const Social = createItemComponent<SocialValues, SocialSemanticProps>({
   defaultValues: DEFAULT_VALUES,
   propMapper: (props) => {
     const { icons, iconType, ...rest } = props;
-
-    // The exporter does arithmetic on iconSize/spacing (icon box sizing and the
-    // container max-width), so coerce a px string or number down to a number.
-    const coerceSizes = (base: Partial<SocialValues>): Partial<SocialValues> => {
-      for (const key of ["iconSize", "spacing"] as const) {
-        const v = (base as Record<string, unknown>)[key];
-        if (typeof v === "string") {
-          // px count only — a non-px unit ("50%", "1.5em") is invalid here, so
-          // drop it and let mergeValues fall back to the schema default.
-          const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(v.trim());
-          if (m) (base as Record<string, unknown>)[key] = parseFloat(m[1]);
-          else delete (base as Record<string, unknown>)[key];
-        }
-      }
-      return base;
-    };
-
-    // Map shorthand icons array → exporter format
-    if (Array.isArray(icons)) {
-      const mapped = icons.map((icon: SocialIcon) => ({
-        name: icon.name,
-        url: icon.url,
-      }));
-      const base: Partial<SocialValues> = mapSemanticProps(
-        rest as SemanticProps<SocialValues>,
-        DEFAULT_VALUES,
-        "Social"
-      );
-      base.icons = {
-        iconType: iconType ?? base.icons?.iconType ?? "circle",
-        icons: mapped,
-      };
-      return coerceSizes(base);
+    const base: Partial<SocialValues> = mapSemanticProps((Array.isArray(icons) || iconType !== undefined ? rest : props) as SemanticProps<SocialValues>, DEFAULT_VALUES, "Social");
+    // Map shorthand icons array → exporter format; an iconType passed without them is threaded into the nested group.
+    if (Array.isArray(icons)) base.icons = { iconType: iconType ?? base.icons?.iconType ?? "circle", icons: icons.filter((icon) => icon != null).map((icon: SocialIcon) => ({ name: icon.name, url: icon.url ?? undefined })) };
+    else if (iconType !== undefined) base.icons = { ...DEFAULT_ICONS, ...base.icons, iconType };
+    // The exporter does arithmetic on iconSize/spacing (icon box sizing and the container max-width), so coerce a px
+    // string or number down to a number. A non-px unit ("50%", "1.5em") is invalid here: dropped, so mergeValues
+    // falls back to the schema default.
+    for (const key of ["iconSize", "spacing"] as const) {
+      const v = (base as Record<string, unknown>)[key];
+      if (typeof v !== "string") continue;
+      const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(v.trim());
+      if (m) (base as Record<string, unknown>)[key] = parseFloat(m[1]);
+      else delete (base as Record<string, unknown>)[key];
     }
-
-    // If iconType passed without shorthand icons, thread it into nested group
-    if (iconType !== undefined) {
-      const base: Partial<SocialValues> = mapSemanticProps(
-        rest as SemanticProps<SocialValues>,
-        DEFAULT_VALUES,
-        "Social"
-      );
-      base.icons = { ...DEFAULT_ICONS, ...base.icons, iconType };
-      return coerceSizes(base);
-    }
-
-    return coerceSizes(
-      mapSemanticProps(props as SemanticProps<SocialValues>, DEFAULT_VALUES, "Social")
-    );
+    return base;
   },
   displayName: "Social",
-  exporters: SocialExporters,
+  // The web HTML (a document's too) without react-dom (see exporters/markup.ts).
+  exporters: { ...SocialExporters, web: social },
 });
 
 export default Social;
diff --git a/packages/react/src/components/Table.test.tsx b/packages/react/src/components/Table.test.tsx
index e2b6d596..9b95a5cd 100644
--- a/packages/react/src/components/Table.test.tsx
+++ b/packages/react/src/components/Table.test.tsx
@@ -2,6 +2,11 @@ import { describe, it, expect } from "vitest";
 import React from "react";
 import { render } from "@testing-library/react";
 import Table from "./Table";
+import Email from "./Email";
+import Row from "./Row";
+import { Column } from "./Column";
+import { renderToHtml } from "../utils/render-to-html";
+import { renderToJson } from "../utils/render-to-json";
 
 describe("Table Component", () => {
   it("renders a table element", () => {
@@ -118,6 +123,18 @@ describe("Table Component", () => {
     );
   });
 
+  it("writes a cell or header from data that isn't a string (a quantity, a year, 0) as its text, in the HTML and the design", () => {
+    // JSON's numbers reach `data` as numbers whatever its type says (`JSON.parse` gives `any`).
+    const headers = ["Item", 2026] as unknown as string[];
+    const data = [["Wool Runner", 1], ["Gift card", 0], ["Sample", true]] as unknown as string[][];
+    const email = <Email><Row><Column><Table headers={headers} data={data} /></Column></Row></Email>;
+    const doc = new DOMParser().parseFromString(renderToHtml(email), "text/html");
+    const texts = [...doc.querySelectorAll("th, td")].map((cell) => cell.textContent!.trim());
+    for (const text of ["Item", "2026", "Wool Runner", "1", "Gift card", "0", "Sample", "true"]) expect(texts).toContain(text);
+    const table = (renderToJson(email).body.rows[0].columns[0].contents[0].values as any).table;
+    expect(table.rows.map((row: any) => row.cells.map((cell: any) => cell.text))).toEqual([["Wool Runner", "1"], ["Gift card", "0"], ["Sample", "true"]]);
+  });
+
   it("has correct displayName", () => {
     expect(Table.displayName).toBe("Table");
   });
diff --git a/packages/react/src/components/Table.tsx b/packages/react/src/components/Table.tsx
index 0acc140e..913e7a5a 100644
--- a/packages/react/src/components/Table.tsx
+++ b/packages/react/src/components/Table.tsx
@@ -3,7 +3,10 @@ import type { TableValues, SizeInput, BorderInput } from "../types";
 import { createItemComponent, type ItemComponentProps } from "../utils/create-component";
 import { mapSemanticProps, type SemanticProps } from "../utils/semantic-props";
 
-type TableSemanticProps = Omit<SemanticProps<TableValues>, "padding" | "border"> & {
+/** Its values, and the editor's merge tag rule its rows repeat by (see the README's UnlayerProvider, mergeTagState). */
+type TableRuleValues = TableValues & { mergeTagGroup?: string; mergeTagRule?: string };
+
+type TableSemanticProps = Omit<SemanticProps<TableRuleValues>, "padding" | "border"> & {
   /** Column headers as string[] */
   headers?: string[];
   /** Row data as 2D string array */
@@ -15,7 +18,7 @@ type TableSemanticProps = Omit<SemanticProps<TableValues>, "padding" | "border">
 };
 
 export interface TableProps
-  extends Omit<ItemComponentProps<Omit<SemanticProps<TableValues>, "padding" | "border">>, "headers" | "data"> {
+  extends Omit<ItemComponentProps<Omit<SemanticProps<TableRuleValues>, "padding" | "border">>, "headers" | "data"> {
   headers?: string[];
   data?: string[][];
   /** Inner padding — a number (→ px) or CSS string. */
@@ -57,6 +60,8 @@ const DEFAULT_VALUES = {
 const Table = createItemComponent<TableValues, TableSemanticProps>({
   name: "Table",
   defaultValues: DEFAULT_VALUES,
+  // Its typed values the editor's defaults leave unset (the body's color and font stand in for them).
+  names: ["headerColor", "headerFontFamily", "contentColor", "contentFontFamily", "contentFontWeight", "contentLetterSpacing", "footerColor", "footerFontFamily", "cellBackgroundColor", "cellColor", "cellPadding", "cellTextAlign", "cellVerticalAlign"],
   propMapper: (props) => {
     // `columns`/`rows` are top-level COUNTS, but the table data lives under the
     // nested `table` group whose keys also include `rows` — so routing the flat
@@ -67,65 +72,22 @@ const Table = createItemComponent<TableValues, TableSemanticProps>({
       rows?: number;
     };
 
-    if (
-      headers ||
-      data ||
-      typeof columns === "number" ||
-      typeof rows === "number"
-    ) {
-      const base: Partial<TableValues> = mapSemanticProps(
-        rest as SemanticProps<TableValues>,
-        DEFAULT_VALUES,
-        "Table"
-      );
-
-      const colCount = headers
-        ? headers.length
-        : typeof columns === "number"
-          ? columns
-          : data?.[0]?.length ?? 0;
-      const blankCells = (n: number) =>
-        Array.from({ length: n }, () => ({ text: "", width: 0 }));
-
-      const tableHeaders = headers
-        ? [{ cells: headers.map((text: string) => ({ text, width: 0 })), height: 0 }]
-        : [];
-
-      const tableRows = data
-        ? data.map((row: string[]) => ({
-            cells: row.map((text: string) => ({ text, width: 0 })),
-            height: 0,
-          }))
-        : typeof rows === "number"
-          ? // No data: build an empty grid sized by `columns` × `rows`.
-            Array.from({ length: rows }, () => ({
-              cells: blankCells(colCount),
-              height: 0,
-            }))
-          : [];
-
-      base.table = { headers: tableHeaders, rows: tableRows, footers: [] };
-
-      if (headers || typeof columns === "number") {
-        base.columns = colCount;
-      }
-      if (headers) {
-        base.enableHeader = true;
-      }
-      if (data) {
-        base.rows = data.length;
-      } else if (typeof rows === "number") {
-        base.rows = rows;
-      }
-
+    if (headers || data || typeof columns === "number" || typeof rows === "number") {
+      const base: Partial<TableValues> = mapSemanticProps(rest as SemanticProps<TableValues>, DEFAULT_VALUES, "Table");
+      const colCount = headers ? headers.length : typeof columns === "number" ? columns : (data?.[0]?.length ?? 0);
+      // A cell from data that isn't a string (JSON's numbers, a year, `0`) is its text; null is none (see mapSemanticProps).
+      const cellsOf = (row: unknown[]) => ({ cells: row.map((text) => ({ text: (text == null ? text : String(text)) as string, width: 0 })), height: 0 });
+      // No data: an empty grid sized by `columns` × `rows`.
+      const tableRows = data ? data.map(cellsOf) : typeof rows === "number" ? Array.from({ length: rows }, () => cellsOf(Array(colCount).fill(""))) : [];
+      base.table = { headers: headers ? [cellsOf(headers)] : [], rows: tableRows, footers: [] };
+      if (headers || typeof columns === "number") base.columns = colCount;
+      if (headers) base.enableHeader = true;
+      if (data) base.rows = data.length;
+      else if (typeof rows === "number") base.rows = rows;
       return base;
     }
 
-    return mapSemanticProps(
-      props as SemanticProps<TableValues>,
-      DEFAULT_VALUES,
-      "Table"
-    );
+    return mapSemanticProps(props as SemanticProps<TableValues>, DEFAULT_VALUES, "Table");
   },
   displayName: "Table",
   exporters: TableExporters,
diff --git a/packages/react/src/components/Video.test.tsx b/packages/react/src/components/Video.test.tsx
index 95b08bef..bb8bbf60 100644
--- a/packages/react/src/components/Video.test.tsx
+++ b/packages/react/src/components/Video.test.tsx
@@ -2,6 +2,10 @@ import { describe, it, expect } from "vitest";
 import React from "react";
 import { render } from "@testing-library/react";
 import Video, { parseVideoUrl } from "./Video";
+import Email from "./Email";
+import Row from "./Row";
+import { Column } from "./Column";
+import { renderToHtml } from "../utils/render-to-html";
 
 describe("parseVideoUrl", () => {
   it("parses youtube.com/watch?v= URL", () => {
@@ -82,4 +86,18 @@ describe("Video Component", () => {
   it("has correct displayName", () => {
     expect(Video.displayName).toBe("Video");
   });
+
+  it("sizes its thumbnail in its slot: the column less the block's default 10px padding, as the editor does", () => {
+    const html = renderToHtml(
+      <Email>
+        <Row padding="24px 0px">
+          <Column padding="0px 24px">
+            <Video videoUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+          </Column>
+        </Row>
+      </Email>
+    );
+    // 500 content − 24px×2 column padding − 10px×2 block padding = 432.
+    expect(html).toMatch(/max-width: 432px;" width="432"/);
+  });
 });
diff --git a/packages/react/src/components/Video.tsx b/packages/react/src/components/Video.tsx
index 1384a070..36c042b7 100644
--- a/packages/react/src/components/Video.tsx
+++ b/packages/react/src/components/Video.tsx
@@ -79,22 +79,14 @@ const Video = createItemComponent<VideoValues, VideoSemanticProps>({
 
     if (typeof videoUrl === "string") {
       const parsed = parseVideoUrl(videoUrl);
-      const base: Partial<VideoValues> = mapSemanticProps(
-        rest as SemanticProps<VideoValues>,
-        DEFAULT_VALUES,
-        "Video"
-      );
+      const base: Partial<VideoValues> = mapSemanticProps(rest as SemanticProps<VideoValues>, DEFAULT_VALUES, "Video");
       if (parsed) {
         base.video = { ...DEFAULT_VIDEO, ...parsed };
       }
       return base;
     }
 
-    return mapSemanticProps(
-      props as SemanticProps<VideoValues>,
-      DEFAULT_VALUES,
-      "Video"
-    );
+    return mapSemanticProps(props as SemanticProps<VideoValues>, DEFAULT_VALUES, "Video");
   },
   displayName: "Video",
   exporters: VideoExporters,
diff --git a/packages/react/src/components/__snapshots__/snapshots.test.tsx.snap b/packages/react/src/components/__snapshots__/snapshots.test.tsx.snap
index 8224ea17..bd57c710 100644
--- a/packages/react/src/components/__snapshots__/snapshots.test.tsx.snap
+++ b/packages/react/src/components/__snapshots__/snapshots.test.tsx.snap
@@ -42,8 +42,8 @@ exports[`Render Snapshots > Body + Row + Column + Items > full tree email 1`] =
     <tr>
       <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
         
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Hello</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Hello
   </div>
 
       </td>
@@ -127,8 +127,8 @@ exports[`Render Snapshots > Body + Row + Column + Items > full tree web 1`] = `
     
   <div id="u_content_paragraph_1" class="u_content_paragraph v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px;">
     
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-    <p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Hello</p>
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Hello
   </div>
 
   </div>
@@ -263,7 +263,7 @@ exports[`Render Snapshots > Image > email 1`] = `
   <tbody><tr>
     <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
       
-      <img align="center" border="0" src="https://example.com/img.png" alt="" title="" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 500px;" width="500" class="v-src-width v-src-max-width">
+      <img align="center" border="0" src="https://example.com/img.png" alt="" title="" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 480px;" width="480" class="v-src-width v-src-max-width">
       
     </td>
   </tr>
@@ -275,7 +275,7 @@ exports[`Render Snapshots > Image > web 1`] = `
 "<div>
 <div class="v-text-align" style="position:relative;line-height:0px;text-align:center">
   
-  <img alt="" class="v-src-width v-src-max-width" src="https://example.com/img.png" style="width: 100%;max-width: 500px;" title="">
+  <img alt="" class="v-src-width v-src-max-width" src="https://example.com/img.png" style="width: 100%;max-width: 480px;" title="">
   
 </div>
 </div>"
@@ -295,7 +295,7 @@ exports[`Render Snapshots > Menu > web 1`] = `"<div></div>"`;
 
 exports[`Render Snapshots > Paragraph > email 1`] = `
 "<div>
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
     
   </div>
 </div>"
@@ -303,7 +303,7 @@ exports[`Render Snapshots > Paragraph > email 1`] = `
 
 exports[`Render Snapshots > Paragraph > web 1`] = `
 "<div>
-  <div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+  <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
     
   </div>
 </div>"
@@ -381,7 +381,7 @@ exports[`Render Snapshots > Video > email 1`] = `
   <tbody><tr>
     <td style="padding-right: 0px; padding-left: 0px;" align="center">
       
-      <img align="center" border="0" src="https://cdn.tools.unlayer.com/video/placeholder.png" alt="Video" title="Video" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;width: 100%;max-width: 500px;" width="500" class="fullwidth" aria-label="video thumbnail">
+      <img align="center" border="0" src="https://cdn.tools.unlayer.com/video/placeholder.png" alt="Video" title="Video" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;width: 100%;max-width: 480px;" width="480" class="fullwidth" aria-label="video thumbnail">
       
     </td>
   </tr>
@@ -393,7 +393,7 @@ exports[`Render Snapshots > Video > web 1`] = `
 "<div>
 <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
   
-    <img aria-label="video placeholder" src="https://cdn.tools.unlayer.com/video/placeholder.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" width="500" height="281.25">
+    <img aria-label="video placeholder" src="https://cdn.tools.unlayer.com/video/placeholder.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" width="480" height="270">
     
   
   
diff --git a/packages/react/src/components/multi-column.test.tsx b/packages/react/src/components/multi-column.test.tsx
index 2f955119..c1715a5c 100644
--- a/packages/react/src/components/multi-column.test.tsx
+++ b/packages/react/src/components/multi-column.test.tsx
@@ -68,22 +68,25 @@ describe("Multi-column layouts", () => {
     expect(container.textContent).toContain("Narrow");
   });
 
-  it("logs error when layout column count mismatches children", () => {
-    // ThreeEqual expects 3 columns but we give 2
-    // Body catches the error from Row, so it doesn't throw — it logs
+  it("fails on a Row whose Columns don't fit its layout, or leaves it out where the root says (onError), saying so", () => {
+    // ThreeEqual expects 3 columns but we give 2 (see nested-renders.test.tsx).
     const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
-    render(
-      <Body>
+    const body = (config?: { onError: "omit" }) => (
+      <Body config={config}>
         <Row layout={ColumnLayouts.ThreeEqual}>
           <Column><Paragraph>Only two</Paragraph></Column>
           <Column><Paragraph>columns</Paragraph></Column>
         </Row>
+        <Row><Column><Paragraph>Kept</Paragraph></Column></Row>
       </Body>
     );
-    expect(errorSpy).toHaveBeenCalledWith(
-      expect.stringContaining("Failed to render"),
-      expect.objectContaining({ message: expect.stringContaining("expects 3") })
-    );
+    const said = "A Row with the ThreeEqual layout, for 3 Columns, has 2 (in <Row> at Row 1)";
+    expect(() => render(body())).toThrow(`[Unlayer] ${said}`);
+    errorSpy.mockClear();
+    const { container } = render(body({ onError: "omit" }));
+    expect(container.textContent).not.toContain("Only two");
+    expect(container.textContent).toContain("Kept");
+    expect(errorSpy.mock.calls).toEqual([[`[Unlayer] Left out: ${said}`]]);
     errorSpy.mockRestore();
   });
 
diff --git a/packages/react/src/context/UnlayerProvider.server-components.test.tsx b/packages/react/src/context/UnlayerProvider.server-components.test.tsx
new file mode 100644
index 00000000..34ed3a32
--- /dev/null
+++ b/packages/react/src/context/UnlayerProvider.server-components.test.tsx
@@ -0,0 +1,55 @@
+// @vitest-environment node
+/**
+ * React Server Components' React has no context (React's `react-server` build has no createContext or useContext).
+ * There an <UnlayerProvider> still configures the root a render function renders, which reads its config off the
+ * element, and where React renders it, it renders what's in it (it can't reach a root through context). Its own file:
+ * React is mocked for all of it.
+ */
+import { describe, it, expect, vi } from "vitest";
+
+vi.mock("react", async (original) => {
+  const real = (await original<typeof import("react")>()) as Record<string, any>;
+  const none = { createContext: undefined, useContext: undefined };
+  return { ...real, ...none, default: { ...real.default, ...none } };
+});
+
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Column, DEFAULT_CONFIG, Email, Paragraph, Row, Social, UnlayerProvider, renderToHtml, renderToJson, useUnlayerConfig } from "../index";
+
+describe("UnlayerProvider with React Server Components' React (no context)", () => {
+  const content = (
+    <Row>
+      <Column>
+        <Paragraph text="Hi" />
+        <Social icons={[{ name: "Facebook", url: "https://facebook.com/acme" }]} />
+      </Column>
+    </Row>
+  );
+  const config = { cdnBaseUrl: "https://provider.example", textDirection: "rtl" };
+
+  it("has no context to create", () => {
+    expect((React as unknown as Record<string, unknown>).createContext).toBeUndefined();
+  });
+
+  it("configures the root the render functions render, and the design", () => {
+    const Welcome = () => <Email>{content}</Email>;
+    for (const element of [<UnlayerProvider config={config}><Email>{content}</Email></UnlayerProvider>, <UnlayerProvider config={config}><Welcome /></UnlayerProvider>]) {
+      const html = renderToHtml(element);
+      expect(html).toContain('src="https://provider.example/social/icons/');
+      expect(html).toMatch(/<html[^>]* dir="rtl"/);
+      expect(renderToJson(element).body.values.textDirection).toBe("rtl");
+    }
+  });
+
+  it("renders what's in it where React renders it, and useUnlayerConfig() gives the defaults", () => {
+    let seen: unknown;
+    const Reads = () => {
+      seen = useUnlayerConfig();
+      return <Paragraph text="Hi" />;
+    };
+    const html = renderToStaticMarkup(<UnlayerProvider config={config}><Email><Row><Column><Reads /></Column></Row></Email></UnlayerProvider>);
+    expect(html).toContain("Hi");
+    expect(seen).toBe(DEFAULT_CONFIG);
+  });
+});
diff --git a/packages/react/src/context/UnlayerProvider.test.tsx b/packages/react/src/context/UnlayerProvider.test.tsx
index bbf7d515..eeddf15a 100644
--- a/packages/react/src/context/UnlayerProvider.test.tsx
+++ b/packages/react/src/context/UnlayerProvider.test.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import React from "react";
-import { renderHook } from "@testing-library/react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { render, renderHook } from "@testing-library/react";
 import { UnlayerProvider, useUnlayerConfig, PROVIDER_ACTIVE_KEY } from "./UnlayerProvider";
+import { Body, Button, Column, Document, Email, Page, Paragraph, Row, Social, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText } from "../index";
 
 describe("UnlayerProvider", () => {
   it("returns default config when no provider", () => {
@@ -34,3 +36,126 @@ describe("UnlayerProvider", () => {
     expect((result.current as any)[PROVIDER_ACTIVE_KEY]).toBeUndefined();
   });
 });
+
+/**
+ * A root's config, most specific first: the render function's options, the root's `config` prop, the nearest
+ * <UnlayerProvider>'s, then the defaults; key by key. The HTML and the design read the same.
+ */
+describe("UnlayerProvider config", () => {
+  const roots = [["Email", Email], ["Page", Page], ["Document", Document]] as const;
+  const provider = { cdnBaseUrl: "https://provider.example", textDirection: "rtl", toSafeHtml: (html: string) => html.replace("Hi", "Hey") };
+  const content = (
+    <Row>
+      <Column>
+        <Paragraph text="Hi there" />
+        <Social icons={[{ name: "Facebook", url: "https://facebook.com/acme" }]} />
+      </Column>
+    </Row>
+  );
+  /** What the config set in some HTML: the icons' CDN, the direction, and whether `toSafeHtml` ran. */
+  const set = (html: string) => ({
+    cdn: /src="(https:\/\/[^"]*?)\/social\/icons\//.exec(html)?.[1],
+    // On <html>, or on the body's own tag (as React renders a root, or the parts' body).
+    rtl: [...html.matchAll(/<[a-z]+ [^>]*>/g)].some(([tag]) => /^<html |\bu_body\b/.test(tag) && / dir="rtl"/.test(tag)),
+    safe: html.includes("Hey there"),
+  });
+  const PROVIDED = { cdn: "https://provider.example", rtl: true, safe: true };
+
+  it.each(roots)("is the root's under its own `config` and the render function's options, key by key (%s)", (_, Root) => {
+    const html = (root: React.ReactElement, options?: Parameters<typeof renderToHtml>[1]) => set(renderToHtml(root, options));
+    expect(html(<Root>{content}</Root>)).toEqual({ cdn: "https://cdn.tools.unlayer.com", rtl: false, safe: false });
+    expect(html(<UnlayerProvider config={provider}><Root>{content}</Root></UnlayerProvider>)).toEqual(PROVIDED);
+    // The root's config wins where it sets a key; the Provider's other keys stay.
+    expect(html(<UnlayerProvider config={provider}><Root config={{ cdnBaseUrl: "https://root.example" }}>{content}</Root></UnlayerProvider>)).toEqual({ ...PROVIDED, cdn: "https://root.example" });
+    // The options win over both, and a key they leave undefined comes from below.
+    expect(html(<UnlayerProvider config={provider}><Root config={{ cdnBaseUrl: "https://root.example" }}>{content}</Root></UnlayerProvider>, { cdnBaseUrl: "https://option.example", textDirection: undefined })).toEqual({ ...PROVIDED, cdn: "https://option.example" });
+    // The root's own `textDirection` is more specific than the Provider's; its `config.textDirection` more than that.
+    expect(html(<UnlayerProvider config={provider}><Root textDirection="ltr">{content}</Root></UnlayerProvider>).rtl).toBe(false);
+    expect(html(<UnlayerProvider config={{ textDirection: "ltr" }}><Root textDirection="ltr" config={{ textDirection: "rtl" }}>{content}</Root></UnlayerProvider>).rtl).toBe(true);
+    // A root rendered as React renders it (renderToStaticMarkup) reads the same.
+    expect(set(renderToStaticMarkup(<UnlayerProvider config={provider}><Root config={{ cdnBaseUrl: "https://root.example" }}>{content}</Root></UnlayerProvider>))).toEqual({ ...PROVIDED, cdn: "https://root.example" });
+    expect(set(renderToStaticMarkup(<UnlayerProvider config={provider}><Root textDirection="ltr">{content}</Root></UnlayerProvider>)).rtl).toBe(false);
+  });
+
+  it.each(roots)("works as the render root and around a template component, through every renderer, and in the design (%s)", (_, Root) => {
+    const Welcome = () => <Root>{content}</Root>;
+    const Wrapped = () => <UnlayerProvider config={provider}><Root>{content}</Root></UnlayerProvider>;
+    for (const element of [<UnlayerProvider config={provider}><Root>{content}</Root></UnlayerProvider>, <UnlayerProvider config={provider}><Welcome /></UnlayerProvider>, <Wrapped />]) {
+      expect(set(renderToHtml(element))).toEqual(PROVIDED);
+      const parts = renderToHtmlParts(element);
+      expect(set(parts.body)).toEqual(PROVIDED);
+      expect(renderToPlainText(element)).toContain("Hey there");
+      const design = renderToJson(element);
+      expect(design.body.values.textDirection).toBe("rtl");
+      // A text block in a right-to-left design starts on the right, as in the HTML.
+      expect((design.body.rows[0].columns[0].contents[0].values as { textAlign?: string }).textAlign).toBe("right");
+      expect(renderToHtml(element)).toMatch(/text-align: ?right/);
+      // React renders it the same.
+      expect(set(renderToStaticMarkup(element))).toEqual(PROVIDED);
+    }
+    // Without a Provider, the design keeps no direction, as before.
+    expect("textDirection" in renderToJson(<Welcome />).body.values).toBe(false);
+    // The root's own config is in the design too.
+    expect(renderToJson(<Root config={{ textDirection: "rtl" }}>{content}</Root>).body.values.textDirection).toBe("rtl");
+  });
+
+  it("gives a <Body> its mode, which Email, Page and Document lock", () => {
+    const body = <Body><Row><Column><Paragraph text="Hi" /></Column></Row></Body>;
+    const layout = (html: string) => (html.includes('xmlns:v="urn:schemas-microsoft-com:vml"') ? "email" : html.startsWith("<!doctype html>") ? "web" : "document");
+    for (const mode of ["email", "web", "document"] as const) {
+      expect(layout(renderToHtml(<UnlayerProvider config={{ mode }}>{body}</UnlayerProvider>))).toBe(mode);
+      expect(layout(renderToHtml(<UnlayerProvider config={{ mode }}><Email><Row><Column><Paragraph text="Hi" /></Column></Row></Email></UnlayerProvider>))).toBe("email");
+    }
+    // As React renders it: an email's tables, or a page's divs.
+    const tables = (element: React.ReactElement) => /<table/.test(renderToStaticMarkup(element));
+    expect(tables(<UnlayerProvider config={{ mode: "email" }}>{body}</UnlayerProvider>)).toBe(true);
+    expect(tables(<UnlayerProvider config={{ mode: "web" }}><Email><Row><Column><Paragraph text="Hi" /></Column></Row></Email></UnlayerProvider>)).toBe(true);
+    expect(tables(<UnlayerProvider config={{ mode: "web" }}>{body}</UnlayerProvider>)).toBe(false);
+    // The render function's mode wins over the Provider's.
+    expect(layout(renderToHtml(<UnlayerProvider config={{ mode: "email" }}>{body}</UnlayerProvider>, { mode: "document" }))).toBe("document");
+  });
+
+  it("configures a root rendered and re-rendered on the client, without a word from React", () => {
+    const error = vi.spyOn(console, "error");
+    try {
+      const tree = (cdnBaseUrl: string) => <UnlayerProvider config={{ ...provider, cdnBaseUrl }}><Email>{content}</Email></UnlayerProvider>;
+      // (The browser drops the email's <body> tag, with its `dir`, inside the page's.)
+      const { container, rerender } = render(tree("https://first.example"));
+      expect(set(container.innerHTML)).toMatchObject({ cdn: "https://first.example", safe: true });
+      rerender(tree("https://second.example"));
+      expect(set(container.innerHTML)).toMatchObject({ cdn: "https://second.example", safe: true });
+      expect(error).not.toHaveBeenCalled();
+    } finally {
+      error.mockRestore();
+    }
+  });
+
+  it("merges a Provider inside another over it, key by key", () => {
+    const element = (
+      <UnlayerProvider config={provider}>
+        <UnlayerProvider config={{ cdnBaseUrl: "https://inner.example" }}>
+          <Email>{content}</Email>
+        </UnlayerProvider>
+      </UnlayerProvider>
+    );
+    expect(set(renderToHtml(element))).toEqual({ ...PROVIDED, cdn: "https://inner.example" });
+    expect(set(renderToStaticMarkup(element))).toEqual({ ...PROVIDED, cdn: "https://inner.example" });
+    expect(renderToJson(element).body.values.textDirection).toBe("rtl");
+  });
+
+  it("gives its headConfig to the head, and its config to useUnlayerConfig() in the template and its content", () => {
+    const hasFeature = vi.fn(() => false);
+    const seen: string[] = [];
+    const Cdn = () => {
+      seen.push(useUnlayerConfig().cdnBaseUrl);
+      return <Paragraph text="Hi" />;
+    };
+    const Welcome = () => {
+      seen.push(useUnlayerConfig().cdnBaseUrl);
+      return <Page><Row><Column><Cdn /><Button href="https://example.com">Go</Button></Column></Row></Page>;
+    };
+    renderToHtmlParts(<UnlayerProvider config={{ cdnBaseUrl: "https://provider.example", headConfig: { hasFeature } }}><Welcome /></UnlayerProvider>);
+    expect(hasFeature).toHaveBeenCalledWith("legacy.disableHoverButtonColors");
+    expect(new Set(seen)).toEqual(new Set(["https://provider.example"]));
+  });
+});
diff --git a/packages/react/src/context/UnlayerProvider.tsx b/packages/react/src/context/UnlayerProvider.tsx
index db8e0d1c..19aa1637 100644
--- a/packages/react/src/context/UnlayerProvider.tsx
+++ b/packages/react/src/context/UnlayerProvider.tsx
@@ -1,8 +1,15 @@
 "use client";
 
-import React, { createContext, useContext, useMemo } from "react";
+import React, { useMemo } from "react";
 import type { UnlayerConfig } from "@unlayer-internal/shared-elements";
 import { DEFAULT_CONFIG } from "@unlayer-internal/shared-elements";
+import { rendering } from "../engine/dispatcher";
+import { layerConfig } from "./layer-config";
+
+// React Server Components' React (its react-server build: Next.js's Server Components and route handlers) has no
+// createContext or useContext. They're read off React, not imported by name: webpack (Next.js 15's default bundler)
+// fails the build of a module that imports by name what the module it imports doesn't export.
+const { createContext, useContext } = React as Partial<Pick<typeof React, "createContext" | "useContext">>;
 
 /**
  * @internal Flag added to context value when a provider is active.
@@ -10,12 +17,18 @@ import { DEFAULT_CONFIG } from "@unlayer-internal/shared-elements";
  */
 export const PROVIDER_ACTIVE_KEY = "__unlayerProviderActive";
 
+/**
+ * @internal On UnlayerProvider: the render functions read its config off the element around a root (see
+ * unwrap-root.ts), where React Server Components have no context to read it from.
+ */
+export const UNLAYER_PROVIDER = Symbol.for("@unlayer/react-elements/provider");
+
 // Lazy-init: createContext is not available in React Server Component modules.
-// Deferring the call ensures it only runs when UnlayerProvider or
-// useUnlayerConfig is actually invoked (always in a client context).
+// Deferring the call ensures it only runs when UnlayerProvider, Body or
+// useUnlayerConfig is actually rendered, and never where React has no context.
 let _UnlayerContext: React.Context<UnlayerConfig> | null = null;
-function getUnlayerContext(): React.Context<UnlayerConfig> {
-  if (!_UnlayerContext) {
+function getUnlayerContext(): React.Context<UnlayerConfig> | null {
+  if (!_UnlayerContext && typeof createContext === "function") {
     _UnlayerContext = createContext<UnlayerConfig>(DEFAULT_CONFIG);
   }
   return _UnlayerContext;
@@ -26,16 +39,24 @@ export interface UnlayerProviderProps {
   children: React.ReactNode;
 }
 
+/**
+ * Config for every root (Email, Page, Document, Body) inside it, key by key under the root's own `config` prop and a
+ * render function's options. Inside another UnlayerProvider, its keys win over that one's.
+ */
 export const UnlayerProvider: React.FC<UnlayerProviderProps> = ({
   config,
   children,
 }) => {
+  const Context = getUnlayerContext();
+  // React Server Components' React has no context: the render functions read the config off this element instead.
+  if (!Context || !useContext) return <>{children}</>;
+  const parent = useContext(Context);
+  // Key by key over the Provider around it (or the defaults): a key it leaves undefined comes from there.
   const merged = useMemo(
-    () => ({ ...DEFAULT_CONFIG, ...config, [PROVIDER_ACTIVE_KEY]: true }),
-    [config]
+    () => ({ ...layerConfig(parent, config), [PROVIDER_ACTIVE_KEY]: true }),
+    [parent, config]
   );
 
-  const Context = getUnlayerContext();
   return (
     <Context.Provider value={merged}>
       {children}
@@ -44,7 +65,22 @@ export const UnlayerProvider: React.FC<UnlayerProviderProps> = ({
 };
 
 UnlayerProvider.displayName = "UnlayerProvider";
+(UnlayerProvider as unknown as Record<symbol, boolean>)[UNLAYER_PROVIDER] = true;
 
 export function useUnlayerConfig(): UnlayerConfig {
-  return useContext(getUnlayerContext());
+  const Context = getUnlayerContext();
+  return Context && useContext ? useContext(Context) : DEFAULT_CONFIG;
+}
+
+/**
+ * The nearest UnlayerProvider's config, for a root React renders (an app's render, `renderToStaticMarkup`); undefined
+ * where there's none, or no context to read it from: React Server Components' React, a React other than the one the
+ * render runs with (a bundler's second copy), or outside a render. The render functions read it off the element too
+ * (see unwrap-root.ts). The check is the same on every render of a root, so its hooks are always the same.
+ */
+export function useProvidedConfig(): Partial<UnlayerConfig> | undefined {
+  const Context = getUnlayerContext();
+  if (!Context || !useContext || !rendering()) return undefined;
+  const { [PROVIDER_ACTIVE_KEY]: active, ...config } = useContext(Context) as UnlayerConfig & Record<string, unknown>;
+  return active ? (config as Partial<UnlayerConfig>) : undefined;
 }
diff --git a/packages/react/src/context/layer-config.ts b/packages/react/src/context/layer-config.ts
new file mode 100644
index 00000000..6f99d41c
--- /dev/null
+++ b/packages/react/src/context/layer-config.ts
@@ -0,0 +1,53 @@
+/**
+ * Where a root's config comes from, most specific first: a render function's options, the root's own `config` prop
+ * (with its `textDirection` prop just under it), the nearest <UnlayerProvider>'s config, then DEFAULT_CONFIG. Merged
+ * key by key: a key a layer leaves out, or sets to undefined, comes from the layer under it.
+ *
+ * The render functions, Body and renderToJson all work a root's config out here, so the HTML and the design agree.
+ */
+import type React from "react";
+import type { RenderMode, UnlayerConfig } from "@unlayer-internal/shared-elements";
+import { DEFAULT_CONFIG } from "@unlayer-internal/shared-elements";
+import { textDirectionOf } from "../utils/create-component";
+import { rootName } from "../utils/root-type";
+
+type Layer = Partial<UnlayerConfig> | false | null | undefined;
+
+/** Config layers merged key by key over DEFAULT_CONFIG, each over the ones before it. */
+export function layerConfig(...layers: Layer[]): UnlayerConfig {
+  const out: Record<string, unknown> = {};
+  for (const layer of [DEFAULT_CONFIG, ...layers]) {
+    if (!layer) continue;
+    for (const [key, value] of Object.entries(layer)) if (value !== undefined) out[key] = value;
+  }
+  return out as unknown as UnlayerConfig;
+}
+
+/** The props of a root (Body, Email, Page, Document) its config reads. */
+export interface RootConfigProps {
+  config?: Partial<UnlayerConfig>;
+  textDirection?: unknown;
+  /** Its `values` escape hatch, which can hold its `textDirection`. */
+  values?: unknown;
+}
+
+/**
+ * A root's config: the render function's `options` over its `config` prop, over its `textDirection` prop (or
+ * `values.textDirection`), over `provided` (the nearest <UnlayerProvider>'s), over DEFAULT_CONFIG.
+ */
+export function rootConfig(props: RootConfigProps | null | undefined, provided?: Partial<UnlayerConfig>, options?: Partial<UnlayerConfig>): UnlayerConfig {
+  const direction = textDirectionOf(props?.textDirection ?? (props?.values as { textDirection?: unknown } | undefined)?.textDirection);
+  return layerConfig(provided, direction && { textDirection: direction }, props?.config, options);
+}
+
+/** The modes Email, Page and Document render in (they render a <Body mode="…">, so their own props never carry it). */
+const ROOT_MODES: Record<string, RenderMode> = { Email: "email", Page: "web", Document: "document" };
+
+/**
+ * The display mode a root renders in: Email's, Page's or Document's own, else its `mode` prop (a Body's), else its
+ * config's (see rootConfig), else web. The HTML's document shell and the design's `displayMode` are this one.
+ */
+export function rootMode(element: React.ReactElement, config: Partial<UnlayerConfig>): RenderMode {
+  const name = rootName(element.type);
+  return (name ? ROOT_MODES[name] : undefined) ?? (element.props as { mode?: RenderMode }).mode ?? config.mode ?? "web";
+}
diff --git a/packages/react/src/docs-links.test.ts b/packages/react/src/docs-links.test.ts
new file mode 100644
index 00000000..e76da458
--- /dev/null
+++ b/packages/react/src/docs-links.test.ts
@@ -0,0 +1,24 @@
+// @vitest-environment node
+
+import { readdirSync, readFileSync, existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+
+describe("the package's docs", () => {
+  it("link only to files the package has (the changelog, the README and the guides)", () => {
+    const files = ["CHANGELOG.md", "README.md", ...readdirSync(join(root, "docs")).filter((name) => name.endsWith(".md")).map((name) => `docs/${name}`)];
+    const missing: string[] = [];
+    for (const file of files) {
+      // A link's target where it's a path of the package's (not a URL or an anchor), outside code (`[a](…`).
+      const text = readFileSync(join(root, file), "utf8").replace(/```[\s\S]*?```|`[^`\n]*`/g, "");
+      for (const [, target] of text.matchAll(/\]\((?!https?:|mailto:|#)([^)\s]+)\)/g)) {
+        const path = target.split("#")[0];
+        if (path && !existsSync(join(root, dirname(file), path))) missing.push(`${file} → ${target}`);
+      }
+    }
+    expect(missing).toEqual([]);
+  });
+});
diff --git a/packages/react/src/dx-behaviors.test.tsx b/packages/react/src/dx-behaviors.test.tsx
index 1050ca53..5f5a7c5f 100644
--- a/packages/react/src/dx-behaviors.test.tsx
+++ b/packages/react/src/dx-behaviors.test.tsx
@@ -1,4 +1,5 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
+import { inTime, within } from "./test-timing";
 import React from "react";
 import {
   renderToHtml,
@@ -11,6 +12,13 @@ import {
   Paragraph,
   Button,
   Table,
+  Email,
+  Page,
+  Document,
+  Menu,
+  Social,
+  Divider,
+  Html,
 } from "./index";
 
 /**
@@ -162,19 +170,19 @@ describe("DX: text components", () => {
   });
 
   it("Paragraph text shorthand renders", () => {
-    expect(html(<Paragraph text={"Hi" as any} />)).toMatch(/<p[^>]*>Hi<\/p>/);
+    expect(html(<Paragraph text={"Hi" as any} />)).toMatch(/word-wrap: break-word;">\s*Hi\s*<\/div>/);
   });
 
-  it("Paragraph <p> carries the editor's inline margin reset", () => {
-    expect(html(<Paragraph>Hi</Paragraph>)).toMatch(
-      /<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Hi<\/p>/
-    );
+  it("Paragraph renders as the editor's text block: its text in no <p>, its line height as given", () => {
+    const out = html(<Paragraph>Hi</Paragraph>);
+    expect(out).toMatch(/line-height: 140%; text-align: left; word-wrap: break-word;">\s*Hi\s*<\/div>/);
+    expect(out).not.toMatch(/<p[\s>]/);
   });
 
-  it("JSX children flatten to text instead of [object Object]", () => {
+  it("JSX children keep their inline formatting instead of [object Object]", () => {
     const out = html(<Heading>Hi <b>x</b></Heading>);
     expect(out).not.toMatch(/\[object Object\]/);
-    expect(out).toMatch(/Hi x/);
+    expect(out).toMatch(/Hi <b>x<\/b>/);
   });
 });
 
@@ -254,3 +262,260 @@ describe("DX: shorthands and JSON output", () => {
     });
   });
 });
+
+describe("DX: style and className, on the element each component renders", () => {
+  const roots = { Email, Page, Document } as const;
+  const template = (Root: (typeof roots)[keyof typeof roots]) => (
+    <Root style={{ outline: "1px solid red" }} className="root">
+      <Row style={{ borderTop: "2px solid #000" }} className="row">
+        <Column style={{ verticalAlign: "middle" }} className="col">
+          <Paragraph style={{ textTransform: "uppercase", color: "red" }} color="#0000ff" className="lead">Hi</Paragraph>
+          <Heading style={{ letterSpacing: 2, lineHeight: 1.2 }} className="title">Head</Heading>
+          <Button style={{ boxShadow: "0 1px 2px #000" }} className="cta" href="https://example.com">Go</Button>
+          <Image style={{ borderRadius: 8 }} className="pic" src="https://example.com/a.png" />
+        </Column>
+      </Row>
+    </Root>
+  );
+  /** The element a class name is on, its tag and its style. */
+  const on = (out: string, name: string) => {
+    const tag = new RegExp(`<([a-z0-9]+) [^>]*class="${name} [^>]*>`).exec(out)!;
+    return { tag: tag[1], style: /style="([^"]*)"/.exec(tag[0])![1], classes: /class="([^"]*)"/.exec(tag[0])![1] };
+  };
+
+  it("writes its own style after the renderer's in time linear in what the renderer's holds", async () => {
+    // The renderer's style lost its trailing spaces and `;`s to `/[\s;]*$/`, which tried again from each of a long run of
+    // them a value of a prop wrote (`color`): 100,000 took seconds.
+    const timing = await within(1000, () => renderToHtml(<Email><Row><Column><Paragraph color={"#000" + " ".repeat(102400) + "a"} style={{ textTransform: "uppercase" }}>Hi</Paragraph></Column></Row></Email>));
+    expect(inTime(timing)).toBe(true);
+    const html = timing.result;
+    expect(html).toMatch(/word-wrap: break-word;text-transform:uppercase"/);
+  });
+
+  it.each(Object.keys(roots) as Array<keyof typeof roots>)("%s: inlined (its own style first), its class names before the renderer's", (mode) => {
+    const out = renderToHtml(template(roots[mode]));
+    // The root's body (or the wrapper in it, on a web page), the Row's container, the Column's cell.
+    expect(on(out, "root")).toMatchObject({ tag: mode === "Page" ? "div" : "body", classes: expect.stringMatching(/^root .*u_body/) });
+    expect(on(out, "root").style).toMatch(/[;"]?outline:1px solid red$/);
+    expect(on(out, "row").classes).toMatch(/^row u-row\b/);
+    expect(on(out, "row").style).toMatch(/border-top:2px solid #000$/);
+    expect(on(out, "col").classes).toMatch(/^col u-col\b/);
+    expect(on(out, "col").style).toMatch(/vertical-align:middle$/);
+    // Text: the element with the text; a prop given wins over the same property in `style`.
+    expect(on(out, "lead")).toMatchObject({ tag: "div", style: expect.stringMatching(/color: #0000ff;.*;text-transform:uppercase$/) });
+    expect(on(out, "lead").style).not.toContain("color:red");
+    expect(on(out, "title")).toMatchObject({ tag: "h1", style: expect.stringMatching(/;letter-spacing:2px;line-height:1.2$/) });
+    expect(on(out, "cta")).toMatchObject({ tag: "a", style: expect.stringMatching(/;box-shadow:0 1px 2px #000$/) });
+    expect(on(out, "pic")).toMatchObject({ tag: "img", style: expect.stringMatching(/;border-radius:8px$/) });
+    expect(out).not.toMatch(/;;/);
+  });
+
+  it.each(Object.keys(roots) as Array<keyof typeof roots>)("%s: keeps padding in a Row's or Column's style inside the layout, not wider than it", (mode) => {
+    const Root = roots[mode];
+    const out = renderToHtml(
+      <Root>
+        <Row style={{ padding: "24px 32px", color: "red" }} className="row">
+          <Column style={{ padding: 16, backgroundColor: "#f5f5f5" }} className="col"><Paragraph>A</Paragraph></Column>
+          <Column style={{ borderRadius: 8 }} className="round"><Paragraph>B</Paragraph></Column>
+        </Row>
+        <Row><Column style={{ border: "1px solid #000", boxSizing: "content-box" }} className="own"><Paragraph>C</Paragraph></Column></Row>
+      </Root>
+    );
+    // An email's row box and its Columns have the content width, which padding on the box would add to (0.2.1 put it
+    // on the row around it): there it goes; on a page and in a document the box is as wide as its container.
+    if (mode === "Email") {
+      expect(on(out, "row").style).toMatch(/color:red$/);
+      expect(on(out, "row").style).not.toContain("padding:24px");
+      expect(/<div[^>]*class="u-row-container[^>]*style="[^"]*padding:24px 32px"/.test(out)).toBe(true);
+    } else expect(on(out, "row").style).toMatch(/padding:24px 32px;color:red$/);
+    // A Column's cell has its width: padding or a border in its style go inside it, unless it says otherwise.
+    expect(on(out, "col").style).toMatch(/padding:16px;background-color:#f5f5f5;box-sizing:border-box$/);
+    expect(on(out, "round").style).not.toContain("box-sizing");
+    expect(on(out, "own").style).toMatch(/border:1px solid #000;box-sizing:content-box$/);
+  });
+
+  it("leaves out what could end the attribute or the rule, and class names that aren't", () => {
+    const out = html(<Paragraph style={{ color: 'red" onclick="x', background: "url(x);}</style>", fontWeight: 700 }} className={'a"b <c>'}>Hi</Paragraph>);
+    expect(out).not.toContain('onclick="x');
+    expect(out).not.toContain("</style>\"");
+    expect(out).toMatch(/class="ab c v-/);
+    expect(out).toMatch(/;font-weight:700"/);
+  });
+
+  it("keeps a declaration with double quotes (a font stack, `url(\"…\")`) as the browser reads it, on a block and a Row, as 0.2.1 did", () => {
+    const style = { fontFamily: '"Helvetica Neue", Arial, sans-serif', backgroundImage: 'url("https://x.example/a.png")' };
+    for (const out of [html(<Paragraph style={style}>Hi</Paragraph>), renderToHtml(<Email><Row style={style}><Column><Paragraph>Hi</Paragraph></Column></Row></Email>)]) {
+      const doc = new DOMParser().parseFromString(out, "text/html");
+      const styled = [...doc.querySelectorAll<HTMLElement>("[style]")].find((el) => el.style.fontFamily.includes("Helvetica Neue"));
+      expect(styled?.style.backgroundImage).toContain("x.example/a.png");
+    }
+  });
+
+  it("keeps a `$` in a value as it is, on a tag without the attribute", () => {
+    const out = html(<Html html='<a href="x" title="y">Hi</a>' style={{ fontFamily: "a$'b$&c$$d" }} className="e$$f" />);
+    expect(out).toContain(`<div style="font-family:a$'b$&c$$d" class="e$$f"><a href="x" title="y">Hi</a></div>`);
+  });
+
+  it("output without them is the same as before", () => {
+    const plain = (props: Record<string, unknown>) => html(<Paragraph {...props}>Hi</Paragraph>);
+    expect(plain({ style: {}, className: "" })).toBe(plain({}));
+    expect(plain({ style: { color: undefined } })).toBe(plain({}));
+  });
+
+  it("the design leaves them out, and says so once per render", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const design = renderToJson(template(Email));
+      for (let i = 0; i < 2; i++) renderToJson(template(Email));
+      const said = warn.mock.calls.map((call) => String(call[0]));
+      expect(said.slice(0, 7)).toEqual([
+        "[Unlayer] Email `style.outline`, `className` are kept in HTML but not in the design for the visual editor.",
+        "[Unlayer] Row `style.borderTop`, `className` are kept in HTML but not in the design for the visual editor.",
+        "[Unlayer] Column `style.verticalAlign`, `className` are kept in HTML but not in the design for the visual editor.",
+        "[Unlayer] Paragraph `style.textTransform`, `style.color`, `className` are kept in HTML but not in the design for the visual editor.",
+        "[Unlayer] Heading `style.letterSpacing`, `style.lineHeight`, `className` are kept in HTML but not in the design for the visual editor.",
+        "[Unlayer] Button `style.boxShadow`, `className` are kept in HTML but not in the design for the visual editor.",
+        "[Unlayer] Image `style.borderRadius`, `className` are kept in HTML but not in the design for the visual editor.",
+      ]);
+      // Once per render: three renders, each says it once.
+      expect(said).toHaveLength(21);
+      const values = JSON.stringify(design);
+      expect(values).not.toContain("textTransform");
+      expect(values).not.toContain('"lead"');
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
+
+describe("DX: what a block can't use is said, not dropped quietly", () => {
+  it("a prop a block has no use for (a link's `target` on a block without one)", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      renderToHtml(
+        <Body>
+          <Row>
+            <Column>
+              <Paragraph textTransfrom="uppercase" {...({ fontSize: "16px" } as object)}>Hi</Paragraph>
+              <Button href="https://example.com" target="_self" buttonColors={{ backgroundColor: "#000" }} onClick={() => {}}>Go</Button>
+              <Image src="https://example.com/a.png" alt="A" width={120} height={60} target="_self" />
+              <Heading target="_self">Title</Heading>
+            </Column>
+          </Row>
+        </Body>
+      );
+      expect(warn.mock.calls.map((call) => String(call[0]))).toEqual([
+        "[Unlayer] Paragraph ignores the prop `textTransfrom`.",
+        "[Unlayer] Button ignores the prop `onClick`.",
+        "[Unlayer] Image ignores the prop `height`.",
+        "[Unlayer] Heading ignores the prop `target`.",
+      ]);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("a prop a slip away from one it takes: the warning names it", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const slips = { textColour: "#f00", fontsize: "20px", textAling: "left", lineHieght: "140%" };
+      renderToHtml(
+        <Body>
+          <Row>
+            <Column>
+              <Menu items={[{ text: "Home", href: "https://example.com" }]} {...({ textColour: slips.textColour } as object)} />
+              <Paragraph {...({ fontsize: slips.fontsize } as object)}>Hi</Paragraph>
+              <Heading {...({ textAling: slips.textAling, lineHieght: slips.lineHieght } as object)}>Title</Heading>
+              <Button {...({ backgroundColour: "#000" } as object)}>Go</Button>
+            </Column>
+          </Row>
+        </Body>
+      );
+      expect(warn.mock.calls.map((call) => String(call[0]))).toEqual([
+        "[Unlayer] Menu ignores the prop `textColour`: did you mean `textColor`?",
+        "[Unlayer] Paragraph ignores the prop `fontsize`: did you mean `fontSize`?",
+        "[Unlayer] Heading ignores the prop `textAling`: did you mean `textAlign`?",
+        "[Unlayer] Heading ignores the prop `lineHieght`: did you mean `lineHeight`?",
+        "[Unlayer] Button ignores the prop `backgroundColour`: did you mean `backgroundColor`?",
+      ]);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("a Table's typed props its defaults leave unset (a header's color, a font): applied, so not said to be ignored", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const font = { label: "Georgia", value: "georgia,serif" };
+      const html = renderToHtml(
+        <Body>
+          <Row>
+            <Column>
+              <Table headers={["A"]} data={[["1"]]} headerColor="#111111" contentColor="#222222" footerColor="#333333" headerFontFamily={font} contentFontFamily={font} footerFontFamily={font} contentFontWeight={700} contentLetterSpacing="3px" />
+            </Column>
+          </Row>
+        </Body>
+      );
+      expect(html).toContain("#111111");
+      expect(html).toContain("#222222");
+      expect(warn).not.toHaveBeenCalled();
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
+
+describe("DX: the names authors reach for (CSS's, React Email's) stand for the component's own prop", () => {
+  const menuItems = [{ text: "Home", href: "https://example.com" }];
+  const json = (el: React.ReactElement) => itemValues(el) as Record<string, any>;
+
+  it("Menu: `color` is its items' color (linked or not), `textAlign` its alignment; its own props win", () => {
+    expect(json(<Menu items={menuItems} color="#ff0000" textAlign="center" />)).toMatchObject({ textColor: "#ff0000", linkColor: "#ff0000", align: "center" });
+    expect(json(<Menu items={menuItems} color="#ff0000" textColor="#00ff00" textAlign="center" align="right" />)).toMatchObject({ textColor: "#00ff00", linkColor: "#ff0000", align: "right" });
+    expect(json(<Menu items={menuItems} color="#ff0000" linkColor="#0000ff" />)).toMatchObject({ textColor: "#ff0000", linkColor: "#0000ff" });
+    expect(json(<Menu items={menuItems} color="#ff0000" />)).not.toHaveProperty("color");
+    // The same in the HTML: a linked item is in the color too.
+    expect(html(<Menu items={menuItems} color="#ff0000" />)).toBe(html(<Menu items={menuItems} textColor="#ff0000" linkColor="#ff0000" />));
+    expect(html(<Menu items={menuItems} color="#ff0000" />)).toMatch(/<a [^>]*color: ?#ff0000[^>]*>\s*Home/);
+  });
+
+  it("Social: `textAlign` is its alignment", () => {
+    const icons = [{ name: "Facebook", url: "https://facebook.com/x" }];
+    expect(json(<Social icons={icons} textAlign="right" />)).toMatchObject({ align: "right" });
+    expect(html(<Social icons={icons} textAlign="right" />)).toBe(html(<Social icons={icons} align="right" />));
+  });
+
+  it("text blocks: `align` is `textAlign`, `textColor` is `color` (a Button's text color)", () => {
+    expect(json(<Paragraph align="center" textColor="#333333">Hi</Paragraph>)).toMatchObject({ textAlign: "center", color: "#333333" });
+    expect(json(<Heading align="right" textColor="#111111">Hi</Heading>)).toMatchObject({ textAlign: "right", color: "#111111" });
+    expect(json(<Button align="left" textColor="#ffffff">Go</Button>)).toMatchObject({ textAlign: "left", buttonColors: { color: "#ffffff" } });
+    expect(json(<Paragraph align="center" textAlign="right">Hi</Paragraph>)).toMatchObject({ textAlign: "right" });
+    expect(json(<Image src="https://example.com/a.png" align="right" />)).toMatchObject({ textAlign: "right" });
+    expect(json(<Divider align="left" />)).toMatchObject({ textAlign: "left" });
+    // On a phone too.
+    expect(json(<Menu items={menuItems} mobile={{ textAlign: "center" }} />)._override.mobile).toMatchObject({ align: "center" });
+  });
+
+  it("Heading: React Email's `as` is its level; `headingType`, then `level`, win over it", () => {
+    expect(html(<Heading as="h2">Hi</Heading>)).toMatch(/<h2[ >]/);
+    expect(json(<Heading as="h2">Hi</Heading>)).toMatchObject({ headingType: "h2" });
+    expect(json(<Heading as="h2">Hi</Heading>)).not.toHaveProperty("as");
+    expect(json(<Heading as="h2" level="h3">Hi</Heading>)).toMatchObject({ headingType: "h3" });
+    expect(json(<Heading as="h2" level="h3" headingType="h4">Hi</Heading>)).toMatchObject({ headingType: "h4" });
+    // A flat prop wins over the `values` escape hatch, as everywhere.
+    expect(json(<Heading as="h5" values={{ headingType: "h1" }}>Hi</Heading>)).toMatchObject({ headingType: "h5" });
+    expect(html(<Heading as="h2" level="h3">Hi</Heading>)).toBe(html(<Heading headingType="h3">Hi</Heading>));
+  });
+
+  it("an alias isn't said to be ignored", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      html(<Menu items={menuItems} color="#ff0000" textAlign="center" />);
+      html(<Paragraph align="center" textColor="#333">Hi</Paragraph>);
+      html(<Heading as="h2">Hi</Heading>);
+      expect(warn).not.toHaveBeenCalled();
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
diff --git a/packages/react/src/dx-types.test-d.tsx b/packages/react/src/dx-types.test-d.tsx
index c97710d2..a425927b 100644
--- a/packages/react/src/dx-types.test-d.tsx
+++ b/packages/react/src/dx-types.test-d.tsx
@@ -129,3 +129,56 @@ export const _phone_reject_visibility: RowProps = { hideOnMobile: "yes" };
 
 // A custom tool's props are its own values, whatever their names (as in 0.1.22): a phone number called `mobile`.
 export const _tool_own_values: ElementsToolProps = { name: "Ada", mobile: "+1 555", hideOnMobile: "yes", hideOnDesktop: 0 };
+
+// ── `values`: as many as you set, keys checked, values as the builder stores them ──
+import type { EmailProps, SocialProps, ValuesInput, ParagraphValues } from "./index";
+export const _values_partial: ParagraphProps = { values: { anchor: "intro" } };
+export const _values_partial_nested: ButtonProps = { values: { buttonColors: { backgroundColor: "#000" } } };
+export const _values_device: DividerProps = { values: { _override: { mobile: { textAlign: "center", hideMobile: true } }, hideDesktop: true } };
+export const _values_column: ColumnProps = { values: { backgroundColor: "#fff", _meta: { htmlID: "x" } } };
+export const _values_root: EmailProps = { values: { popupWidth: "400px" } };
+// What a design may hold that its type doesn't say (a number padding, a weight as text): passed on as it is.
+export const _values_loose_leaf: ParagraphProps = { values: { lineHeight: 1.5, fontWeight: "700", containerPadding: 12 } };
+export const _values_input: ValuesInput<ParagraphValues> = { textAlign: "center" };
+// @ts-expect-error a misspelled key is caught (every component, Button and Image included)
+export const _values_reject_key: ButtonProps = { values: { buttonColour: { color: "#fff" } } };
+// @ts-expect-error a misspelled key in a nested object too
+export const _values_reject_nested: ButtonProps = { values: { buttonColors: { backgroundColour: "#000" } } };
+// @ts-expect-error and in a device's settings
+export const _values_reject_device: ImageProps = { values: { _override: { mobile: { textAling: "left" } } } };
+// @ts-expect-error a nested object holds objects only where its type has one
+export const _values_reject_shape: ParagraphProps = { values: { textAlign: { value: "left" } } };
+
+// ── names authors reach for: aliases of a component's own prop ──────────────
+// (The props the components take in JSX, not only the exported interfaces.)
+import type { ComponentProps } from "react";
+import type { Heading as HeadingComponent, Menu as MenuComponent, Social as SocialComponent } from "./index";
+export const _alias_menu_color: ComponentProps<typeof MenuComponent> = { color: "#ff0000", textAlign: "center" };
+export const _alias_social_align: SocialProps = { textAlign: "right" };
+export const _alias_social_component: ComponentProps<typeof SocialComponent> = { textAlign: "right" };
+export const _alias_text: ParagraphProps = { align: "center", textColor: "#333" };
+export const _alias_heading: HeadingProps = { align: "right", textColor: "#111" };
+// React Email's `<Heading as="h2">`: a heading level, as `headingType` and `level` take one.
+export const _alias_heading_as: HeadingProps = { as: "h2" };
+export const _alias_heading_as_component: ComponentProps<typeof HeadingComponent> = { as: "h3", level: "h4" };
+// @ts-expect-error `as` takes a heading level, not any element
+export const _alias_heading_as_reject: HeadingProps = { as: "div" };
+export const _alias_button: ButtonProps = { align: "left", textColor: "#fff" };
+export const _alias_image: ImageProps = { align: "center" };
+export const _alias_divider: DividerProps = { align: "center" };
+// @ts-expect-error an alias takes what its prop takes
+export const _alias_reject: ParagraphProps = { align: "middle" };
+
+// ── registerLanguage: highlight.js's language modules (typed by highlight.js, where it's installed) and your own ──
+// Elements' types don't import highlight.js (it's built in, not a dependency), and still take what it defines.
+import type { registerLanguage } from "./code";
+import type elixir from "highlight.js/lib/languages/elixir";
+type Language = Parameters<typeof registerLanguage>[1];
+declare const elixirModule: typeof elixir;
+export const _language_module: Language = elixirModule;
+export const _language_own: Language = (hljs) => ({ name: "Pipes", contains: [hljs.QUOTE_STRING_MODE, { scope: "keyword", match: /\|>/ }] });
+// @ts-expect-error a language is the function that defines it, not its name
+export const _language_reject: Language = "elixir";
+
+// The README's Table repeat rule: a Table's values name the editor's merge tag group and rule.
+export const _table_rule: TableProps = { headers: ["Product"], data: [["{{name}}"]], values: { mergeTagGroup: "products", mergeTagRule: "repeat" } };
diff --git a/packages/react/src/engine/async.test.tsx b/packages/react/src/engine/async.test.tsx
new file mode 100644
index 00000000..7889d76d
--- /dev/null
+++ b/packages/react/src/engine/async.test.tsx
@@ -0,0 +1,159 @@
+// @vitest-environment node
+/**
+ * The async walk: siblings' promises start at once, the output is in tree order whatever settles first, ids follow
+ * the tree, the error a render fails with is the first in tree order, and React's hooks dispatcher is the walker's
+ * only while it calls a component (never across an await).
+ */
+import { describe, expect, it, vi } from "vitest";
+import React, { useId } from "react";
+import { Column, Email, Paragraph, RenderError, Row, renderToHtml as renderToHtmlSync } from "../index";
+import { renderToHtml, renderToHtmlParts, renderToJson } from "../async";
+import { theSlot } from "./dispatcher";
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/** A seeded random number generator (mulberry32), for delays. */
+function random(seed: number) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** A template whose parts load at random: async blocks, an async component of Rows, nested ones, all with ids. */
+function template(name: string, delay: () => number) {
+  const Block = async ({ text }: { text: string }) => {
+    const id = useId();
+    await sleep(delay());
+    return <Paragraph>{`${name} ${text} ${id}`}</Paragraph>;
+  };
+  const Nested = async () => {
+    await sleep(delay());
+    return <><Block text="nested one" /><Block text="nested two" /></>;
+  };
+  const Rows = async () => {
+    await sleep(delay());
+    return [1, 2].map((n) => <Row key={n}><Column><Block text={`row ${n}`} /><Nested /></Column></Row>);
+  };
+  return (
+    <Email>
+      <Row><Column><Block text="first" /><Block text="second" /></Column></Row>
+      <Rows />
+      <Row><Column><Paragraph>{`${name} last`}</Paragraph><Block text="third" /></Column></Row>
+    </Email>
+  );
+}
+
+describe("the async walk", () => {
+  it("starts siblings at once, and writes them in tree order", async () => {
+    const started: string[] = [];
+    const Late = async ({ text, ms }: { text: string; ms: number }) => {
+      started.push(text);
+      await sleep(ms);
+      return <Paragraph>{text}</Paragraph>;
+    };
+    const render = () => renderToHtml(<Email><Row><Column><Late text="slow" ms={300} /><Late text="medium" ms={200} /><Late text="fast" ms={100} /></Column></Row></Email>);
+    // At once: about the slowest one's time (300 ms), not the three's (600), the fastest of three renders where one
+    // takes longer (a busy machine's timers run late; this is waiting, not work, so the limit isn't scaled).
+    let start = performance.now();
+    const html = await render();
+    let ms = performance.now() - start;
+    expect(started).toEqual(["slow", "medium", "fast"]);
+    for (let i = 0; i < 2 && ms >= 450; i++) {
+      start = performance.now();
+      await render();
+      ms = Math.min(ms, performance.now() - start);
+    }
+    expect(ms).toBeLessThan(450);
+    expect(html.indexOf("slow")).toBeLessThan(html.indexOf("medium"));
+    expect(html.indexOf("medium")).toBeLessThan(html.indexOf("fast"));
+  });
+
+  it("gives byte-identical output whatever order things settle in, ids by their place in the tree", async () => {
+    const outputs = new Set<string>();
+    const designs = new Set<string>();
+    for (let seed = 1; seed <= 40; seed++) {
+      const delay = random(seed);
+      const ms = () => Math.floor(delay() * 8);
+      outputs.add(await renderToHtml(template("A", ms)));
+      designs.add(JSON.stringify(await renderToJson(template("A", ms))));
+    }
+    expect(outputs.size).toBe(1);
+    expect(designs.size).toBe(1);
+    expect([...outputs][0]).toMatch(/A nested two (:R\w+:|«R\w+»|_R_\w+_)/);
+  });
+
+  it("keeps two renders under way at once apart, with random delays", async () => {
+    const expected = { A: await renderToHtml(template("A", () => 0)), B: await renderToHtml(template("B", () => 0)) };
+    for (let seed = 1; seed <= 20; seed++) {
+      const delay = random(seed);
+      const ms = () => Math.floor(delay() * 10);
+      const [a, b] = await Promise.all([renderToHtml(template("A", ms)), renderToHtml(template("B", ms))]);
+      expect(a).toBe(expected.A);
+      expect(b).toBe(expected.B);
+    }
+  });
+
+  it("fails with the first error in tree order, whatever fails first, without waiting for what comes after it", async () => {
+    const Fails = async ({ text, ms }: { text: string; ms: number }) => {
+      await sleep(ms);
+      throw new Error(text);
+    };
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+    for (const [first, second] of [[5, 30], [30, 5]]) {
+      const email = <Email><Row><Column><Fails text="first" ms={first} /><Fails text="second" ms={second} /></Column></Row><Row><Column><Never /></Column></Row></Email>;
+      await expect(renderToHtml(email)).rejects.toMatchObject({ message: "[Unlayer] first (in <Fails> at Row 1 › Column 1 › Fails)" });
+    }
+  });
+
+  it("leaves failed parts out (onError: \"omit\"), listed in tree order whatever fails first", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const Fails = async ({ text, ms }: { text: string; ms: number }) => {
+        await sleep(ms);
+        throw new Error(text);
+      };
+      for (const [first, second] of [[5, 30], [30, 5]]) {
+        const email = <Email><Row><Column><Paragraph>Kept</Paragraph><Fails text="first" ms={first} /><Fails text="second" ms={second} /></Column></Row></Email>;
+        const parts = await renderToHtmlParts(email, { onError: "omit" });
+        expect(parts.body).toContain("Kept");
+        expect(parts.omitted.map((e) => [e.message, e.position])).toEqual([
+          ["[Unlayer] first (in <Fails> at Row 1 › Column 1 › Fails)", "Row 1 › Column 1 › Fails"],
+          ["[Unlayer] second (in <Fails> at Row 1 › Column 1 › Fails 2)", "Row 1 › Column 1 › Fails 2"],
+        ]);
+        expect(parts.omitted.every((e) => e instanceof RenderError)).toBe(true);
+      }
+    } finally {
+      error.mockRestore();
+    }
+  });
+
+  it("puts React's dispatcher back after each component, never holding it across an await", async () => {
+    const slot = theSlot()!;
+    const before = slot.get();
+    const seen: unknown[] = [];
+    const Watch = async () => {
+      const id = useId(); // the walker's, while it calls this
+      await sleep(1);
+      seen.push(slot.get()); // after an await: not the walker's
+      return <Paragraph>{id}</Paragraph>;
+    };
+    const render = renderToHtml(<Email><Row><Column><Watch /><Watch /></Column></Row></Email>);
+    // While the render waits.
+    seen.push(slot.get());
+    await render;
+    expect(seen).toEqual([before, before, before]);
+    expect(slot.get()).toBe(before);
+    // The synchronous renderers too, and one inside another.
+    const Inner = () => <Paragraph>{renderToHtmlSync(<Email><Row><Column><Paragraph>inner</Paragraph></Column></Row></Email>).length > 0 ? "nested" : ""}</Paragraph>;
+    expect(renderToHtmlSync(<Email><Row><Column><Inner /></Column></Row></Email>)).toContain("nested");
+    expect(slot.get()).toBe(before);
+    expect(React.isValidElement(<Inner />)).toBe(true);
+  });
+});
diff --git a/packages/react/src/engine/attributes.ts b/packages/react/src/engine/attributes.ts
new file mode 100644
index 00000000..81332bbb
--- /dev/null
+++ b/packages/react/src/engine/attributes.ts
@@ -0,0 +1,158 @@
+/**
+ * An element's attributes as react-dom/server writes them (React 18's property table, React 19's attribute switch):
+ * which props it writes, under which name, and how it writes their values, its `style` included; and text, escaped as
+ * React escapes it. The walker's host markup (host.ts) and the string exporters (src/exporters) both write with these.
+ */
+import { unrunUrl } from "@unlayer-internal/shared-elements";
+import { REACT_18, REACT_19_3 } from "./react-compat";
+
+const MATCH_HTML = /["'&<>]/;
+const ESCAPES: Record<string, string> = { '"': "&quot;", "&": "&amp;", "'": "&#x27;", "<": "&lt;", ">": "&gt;" };
+
+/** Text or an attribute's value, escaped as React escapes it. */
+export function escapeText(value: unknown): string {
+  const text = "" + value;
+  return MATCH_HTML.test(text) ? text.replace(/["'&<>]/g, (c) => ESCAPES[c]) : text;
+}
+
+const NAME_START = ":A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
+/** An attribute name React writes (others it leaves out). */
+const SAFE_NAME = new RegExp(`^[${NAME_START}][${NAME_START}\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$`);
+
+/**
+ * A URL attribute's value: a `javascript:` URL (as React 19 tells one) as one that throws, as React 19 writes it, with
+ * any React (React 18 writes it as given), so a link from data runs nothing. (A character reference in it can't make
+ * one: its `&` is written `&amp;`.)
+ */
+const url = (value: string) => unrunUrl(value);
+/** A value React writes as text, a `javascript:` URL as url() writes it; others as they are. */
+export const unrun = (value: unknown) => (value == null || typeof value == "boolean" || typeof value == "function" || typeof value == "symbol" ? value : url("" + value));
+
+/**
+ * How React writes a prop it knows: as a string (S), as a boolean attribute (B: present or not), as either (O), as a
+ * number (N), a positive number (P), "true" or "false" (Y), a URL (U: React 19's; L: React 18's, a string), or not at
+ * all (X).
+ */
+type Kind = "S" | "B" | "O" | "N" | "P" | "Y" | "U" | "L" | "X";
+
+/** The props React writes otherwise than as a string under their own name: the attribute's name, and how. */
+const RULES = new Map<string, [string, Kind]>();
+const rule = (names: string, kind: Kind, attribute: (name: string) => string = (name) => name) => {
+  for (const name of names.split(" ")) RULES.set(name, [attribute(name), kind]);
+};
+const lower = (name: string) => name.toLowerCase();
+// SVG's attributes, XML's and two of HTML's, which their props name in camel case (React's list, and its camel case).
+const CAMEL_CASED = "accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space accept-charset http-equiv";
+for (const attribute of `${CAMEL_CASED}${REACT_18 ? "" : " transform-origin"}${REACT_19_3 ? " mask-type" : ""}`.split(" ")) {
+  RULES.set(attribute.replace(/[-:]([a-z])/g, (_, letter: string) => letter.toUpperCase()), [attribute, "S"]);
+}
+rule("className htmlFor tabIndex crossOrigin", "S", (name) => (name === "className" ? "class" : name === "htmlFor" ? "for" : lower(name)));
+rule("defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning ref key", "X");
+rule("capture download", "O");
+rule("cols rows size span", "P");
+const BOOLEANS = "allowFullScreen async autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope";
+if (REACT_18) {
+  rule(`${BOOLEANS} autoFocus checked multiple muted selected`, "B", lower);
+  rule("contentEditable draggable spellCheck value", "Y", lower);
+  rule("autoReverse externalResourcesRequired focusable preserveAlpha", "Y");
+  rule("rowSpan start", "N", lower);
+  rule("src href action formAction", "L", lower);
+  RULES.set("xlinkHref", ["xlink:href", "L"]);
+} else {
+  rule(`${BOOLEANS} inert${REACT_19_3 ? " credentialless" : ""}`, "B");
+  rule("autoFocus multiple muted", "B", lower);
+  rule("contentEditable draggable spellCheck value autoReverse externalResourcesRequired focusable preserveAlpha", "Y");
+  rule("rowSpan start", "N");
+  rule("src href action formAction", "U");
+  RULES.set("xlinkHref", ["xlink:href", "U"]);
+}
+
+const written = (name: string, value: unknown) => ` ${name}="${escapeText(value)}"`;
+
+/** An `<object>`'s `data` as React 19 writes it: a URL, any value as text (an empty one left out). */
+export function objectData(value: unknown): string {
+  const data = url("" + value);
+  return data ? written("data", data) : "";
+}
+
+/** A prop of an element as React writes it (` name="value"`), or "" where it writes none. */
+export function attribute(name: string, value: unknown): string {
+  if (name === "style") return style(value);
+  const known = RULES.get(name);
+  // An event handler's prop (`onClick`, `onclick`).
+  if (!known && name.length > 2 && (name[0] === "o" || name[0] === "O") && (name[1] === "n" || name[1] === "N")) return "";
+  const [attribute, kind] = known ?? [name, undefined];
+  if (kind === "X" || typeof value === "function" || typeof value === "symbol") return "";
+  switch (kind) {
+    case "B":
+      return value ? ` ${attribute}=""` : "";
+    case "O":
+      return value === true ? ` ${attribute}=""` : value === false ? "" : written(attribute, value);
+    case "Y":
+      return written(attribute, value);
+    case "N":
+    case "P":
+      // (React 18 leaves a boolean out; React 19 writes it, as a number would be.)
+      return (REACT_18 && typeof value === "boolean") || isNaN(value as number) || (kind === "P" && !((value as number) >= 1)) ? "" : written(attribute, value);
+    case "U":
+      return typeof value === "boolean" || (value === "" && (name === "src" || name === "href")) ? "" : written(attribute, url("" + value));
+    case "L":
+    case "S":
+      return typeof value === "boolean" ? "" : written(attribute, kind === "L" ? url("" + value) : value);
+    default:
+      // Any other: written as given, where it's a name an attribute can have (and a boolean only in data-* and aria-*).
+      return !SAFE_NAME.test(attribute) || (typeof value === "boolean" && !/^(data|aria)-/i.test(attribute)) ? "" : written(attribute, value);
+  }
+}
+
+/**
+ * A prop of a custom element (`<my-widget>`; in React 18 also one with an `is`): React 18 writes each as it's given
+ * (`className` too, a boolean as "true" or "false"), React 19 `className` as `class`, `true` as an empty value, and
+ * neither `false` nor an object. (A string handler, `onclick="…"`, is written as any other.)
+ */
+export function customAttribute(name: string, value: unknown): string {
+  if (name === "style") return style(value);
+  if (name === "suppressContentEditableWarning" || name === "suppressHydrationWarning" || typeof value === "function" || typeof value === "symbol") return "";
+  if (REACT_18) return SAFE_NAME.test(name) ? written(name, value) : "";
+  if (name === "className") name = "class";
+  if (name === "ref" || name === "key" || value === false || (typeof value === "object" && value !== null) || !SAFE_NAME.test(name)) return "";
+  return value === true ? ` ${name}=""` : written(name, value);
+}
+
+// The CSS properties whose numbers have no unit: React 18's list, each with the vendor prefixes it adds; React 19's,
+// which adds `scale` and lists its prefixed ones.
+const UNITLESS = "animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth boxFlex boxFlexGroup boxOrdinalGroup columnCount columns flex flexGrow flexPositive flexShrink flexNegative flexOrder gridArea gridRow gridRowEnd gridRowSpan gridRowStart gridColumn gridColumnEnd gridColumnSpan gridColumnStart fontWeight lineClamp lineHeight opacity order orphans tabSize widows zIndex zoom fillOpacity floodOpacity stopOpacity strokeDasharray strokeDashoffset strokeMiterlimit strokeOpacity strokeWidth".split(" ");
+const UNITLESS_NUMBERS = new Set(
+  REACT_18
+    ? UNITLESS.flatMap((name) => [name, ...["Webkit", "ms", "Moz", "O"].map((prefix) => prefix + name[0].toUpperCase() + name.slice(1))])
+    : [
+        ...UNITLESS,
+        ..."scale MozAnimationIterationCount MozBoxFlex MozBoxFlexGroup MozLineClamp msAnimationIterationCount msFlex msZoom msFlexGrow msFlexNegative msFlexOrder msFlexPositive msFlexShrink msGridColumn msGridColumnSpan msGridRow msGridRowSpan WebkitAnimationIterationCount WebkitBoxFlex WebKitBoxFlexGroup WebkitBoxOrdinalGroup WebkitColumnCount WebkitColumns WebkitFlex WebkitFlexGrow WebkitFlexPositive WebkitFlexShrink WebkitLineClamp".split(" "),
+      ]
+);
+
+/** Style properties' names as CSS writes them (`marginTop`: `margin-top`), worked out once each: a thousand kept at most (a style's keys can come from data). */
+export const cssNames = new Map<string, string>();
+
+/** A `style` prop as React writes it: its declarations in order, names in kebab case, numbers in px where they take a unit. */
+export function style(value: unknown): string {
+  if (typeof value !== "object") throw new Error("The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.");
+  let out = "";
+  for (const name in value) {
+    if (!Object.prototype.hasOwnProperty.call(value, name)) continue;
+    const css = (value as Record<string, unknown>)[name];
+    if (css == null || typeof css === "boolean" || css === "") continue;
+    let declaration: string;
+    if (name.indexOf("--") === 0) declaration = `${escapeText(name)}:${escapeText(("" + css).trim())}`;
+    else {
+      let property = cssNames.get(name);
+      if (property === undefined) {
+        property = escapeText(name.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^ms-/, "-ms-"));
+        if (cssNames.size < 1000) cssNames.set(name, property);
+      }
+      declaration = `${property}:${typeof css === "number" ? (css !== 0 && !UNITLESS_NUMBERS.has(name) ? `${css}px` : "" + css) : escapeText(("" + css).trim())}`;
+    }
+    out += out ? ";" + declaration : declaration;
+  }
+  return out ? ` style="${out}"` : "";
+}
diff --git a/packages/react/src/engine/differential.test.tsx b/packages/react/src/engine/differential.test.tsx
new file mode 100644
index 00000000..7582c562
--- /dev/null
+++ b/packages/react/src/engine/differential.test.tsx
@@ -0,0 +1,520 @@
+// @vitest-environment node
+/**
+ * The walker against react-dom/server: the same tree, through `renderToStaticMarkup` and through the engine, must give
+ * the same markup, `useId()`s included (in the installed React's format). Hand-written trees for what templates do,
+ * every element and kind of attribute React writes its own way, then random ones, alone and where templates have
+ * markup (`WALKER_FUZZ_SEEDS=5000` for a longer run, `TEMPLATE_SEEDS` for the templates'; CI's weekly canary runs it on
+ * React's canary). Where the walker means to differ (React 19's hoisting, its document singletons, forms' function
+ * actions, an error in a <Suspense>, React 18's `javascript:` URLs), the differences are listed, each with why; react-dom
+ * 18's markup is compared with its `javascript:` URLs written as the walker writes them, as react-dom 19 does
+ * (`blockedUrls`).
+ */
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+import React, { Component, createContext, forwardRef, Fragment, memo, Suspense, useContext, useId, useMemo, useReducer, useRef, useState } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { renderStatic } from "./index";
+import { cssNames } from "./attributes";
+import { REACT_18 } from "./react-compat";
+import { Column, Page, Row, renderToHtmlParts, renderToJson } from "../index";
+import * as asyncRenderers from "../async";
+import { BLOCKED_URL, blockedUrls } from "../test-utils";
+
+const SEEDS = Number(process.env.WALKER_FUZZ_SEEDS ?? 300);
+const TEMPLATE_SEEDS = Number(process.env.TEMPLATE_SEEDS ?? 40);
+/** createElement, for props no element's types take (a number as a title, a function as a value). */
+const h = React.createElement as (type: any, props?: any, ...children: any[]) => React.ReactElement;
+const Theme = createContext("light");
+const Lang = createContext("en");
+const provide = (context: React.Context<string>, value: string, children: React.ReactNode) => React.createElement(context.Provider, { value }, children);
+
+function Ids({ n = 1, children }: { n?: number; children?: React.ReactNode }) {
+  const ids = Array.from({ length: n }, () => useId());
+  return <span data-ids={ids.join(" ")}>{children}</span>;
+}
+const Themed = () => <i>{`${useContext(Theme)}/${useContext(Lang)}`}</i>;
+const Memo = memo(({ children }: { children?: React.ReactNode }) => <b data-id={useId()}>{children}</b>);
+const Ref = forwardRef<HTMLElement, { children?: React.ReactNode }>(({ children }, _ref) => <em id={useId()}>{children}</em>);
+class Classy extends Component<{ children?: React.ReactNode }> {
+  static contextType = Theme;
+  render() {
+    return <u title={String(this.context)}>{this.props.children}</u>;
+  }
+}
+function Stateful({ children }: { children?: React.ReactNode }) {
+  const [count, setCount] = useState(0);
+  const [reduced] = useReducer((s: number, a: number) => s + a, 2);
+  const ref = useRef("ref");
+  const memo = useMemo(() => count * 10, [count]);
+  if (count < 2) setCount(count + 1);
+  return <p data-state={`${count} ${reduced} ${ref.current} ${memo}`}>{children}</p>;
+}
+
+/**
+ * react-dom's markup, but for React 19's image preloads (hoisted resource hints), which the walker doesn't write, and
+ * with a `javascript:` URL as the walker writes it with any React, as react-dom 19 does (see "differs … only where it
+ * means to").
+ */
+const reactDom = (node: React.ReactElement) => blockedUrls(renderToStaticMarkup(node).replace(/<link rel="preload" as="image"[^>]*\/>/g, ""));
+const same = (node: React.ReactElement) => expect(renderStatic(node)).toBe(reactDom(node));
+
+// React's development warnings for these trees (an attribute it doesn't know, a list without keys), and the walker's.
+beforeAll(() => void vi.spyOn(console, "error").mockImplementation(() => {}));
+afterAll(() => vi.restoreAllMocks());
+
+describe("the walker against react-dom/server", () => {
+  it("writes the same markup: attributes, styles, escaping, void and preformatted elements", () => {
+    same(
+      <div className="a&b" style={{ marginTop: 0, padding: 8, lineHeight: 1.5, WebkitLineClamp: 2, "--brand": " red " } as React.CSSProperties} data-x={true} aria-hidden={false} hidden tabIndex={0} htmlFor="x">
+        {"<script> & \"quotes\" 'single'"}
+        <img src="https://example.com/a.png?a=1&b=2" alt="A > B" width={200} />
+        <br />
+        <input type="checkbox" defaultChecked value="v" readOnly />
+        <textarea defaultValue={"\nline"} />
+        <pre>{"\nkept"}</pre>
+        <a href="javascript:alert(1)">x</a>
+        <table cellPadding={0}><tbody><tr><td colSpan={2} valign="top">{1}{2}{"three"}</td></tr></tbody></table>
+        <div dangerouslySetInnerHTML={{ __html: "<b>raw</b>" }} />
+        <svg viewBox="0 0 10 10" strokeWidth={2}><path d="M0 0" fillOpacity={0.5} /></svg>
+        <my-element class="c" some-attr="v" />
+        {null}{false}{undefined}{0}{""}
+      </div>
+    );
+  });
+
+  it("gives the same useId()s: arrays, Fragments, forks, memo, forwardRef, context and classes", () => {
+    same(
+      <>
+        <Ids n={2} />
+        {[<Ids key="a" />, <Ids key="b" n={3}><Ids /></Ids>, [<Ids key="c" />, <Memo key="d"><Ids /></Memo>]]}
+        <Ref><Ids /></Ref>
+        {provide(Theme, "dark", <Classy><Ids /><Themed /></Classy>)}
+        <Stateful><Ids /></Stateful>
+        <Suspense fallback={<i>loading</i>}><Ids /></Suspense>
+      </>
+    );
+  });
+
+  it("renders a Suspense fallback for what suspends, as react-dom's synchronous render does", () => {
+    const never = new Promise<never>(() => {});
+    const Later = () => {
+      throw never;
+    };
+    same(<div><Suspense fallback={<i>loading</i>}><Ids /><Later /></Suspense><Ids /></div>);
+  });
+
+  it("keeps a bounded number of style names worked out (a style's keys can come from data), and writes the rest the same", () => {
+    const style = Object.fromEntries(Array.from({ length: 3000 }, (_, i) => [`dataProp${i}`, i % 2 ? 1 : "a"])) as React.CSSProperties;
+    for (let round = 0; round < 2; round++) expect(renderStatic(<div style={style} />)).toBe(renderToStaticMarkup(<div style={style} />));
+    expect(cssNames.size).toBeLessThanOrEqual(1000);
+  });
+
+  it("writes each attribute, style and child as react-dom does, on every kind of element", () => {
+    const tags = [
+      "div", "a", "img", "span", "td", "tr", "table", "input", "textarea", "pre", "listing", "svg", "path", "foreignObject", "math", "mi", "my-el", "font-face", "button", "form",
+      "select", "option", "optgroup", "object", "menuitem", "title", "style", "script", "meta", "link", "noscript", "picture", "iframe", "hr", "br", "base", "wbr", "html", "head", "body",
+      "DIV", "IMG", "SELECT", "Title",
+    ];
+    const names = [
+      "data-x", "aria-hidden", "title", "class", "className", "href", "src", "onClick", "onmouseover", "tabIndex", "htmlFor", "hidden", "download", "is", "rowSpan", "cols", "start",
+      "contentEditable", "spellCheck", "allowFullScreen", "inert", "credentialless", "checked", "selected", "multiple", "autoFocus", "readOnly", "itemScope", "action", "formAction",
+      "xlinkHref", "strokeWidth", "transformOrigin", "maskType", "crossOrigin", "httpEquiv", "x y", "defaultValue", "defaultChecked", "value", "capture", "cellPadding", "valign",
+      "suppressHydrationWarning", "suppressContentEditableWarning", "innerHTML", "focusable", "xmlLang", "panose-1", "name", "type", "id", "encType", "method", "target", "formEncType",
+      "formMethod", "formTarget", "data", "label", "rel", "media", "nonce", "precedence", "async", "charSet", "content", "itemProp", "srcSet", "for", "viewBox", "ref", "children",
+    ];
+    const values = [null, undefined, "", 0, 1, 2.5, NaN, true, false, " 5 ", "javascript:alert(1)", "<&\"'>", "\nline", { a: 1 }, [1, 2], () => 1, Symbol.for("x"), BigInt(7)];
+    const styles = [
+      { lineHeight: 1, width: 1, scale: 2, WebkitLineClamp: 2, msFlex: 1, MozBoxFlex: 2, OFlex: 1 },
+      { "--x": " a<b ", "--y": 0, marginTop: 0, padding: "  1px  ", opacity: 0.5, zIndex: 3, flexGrow: 2 },
+      { msTransform: "x", fontWeight: 700, aspectRatio: 1.5, cssFloat: "left", width: NaN, height: Infinity, margin: null, border: false, color: "" },
+    ];
+    const children = ["<&\"'>", 0, true, ["a", 1, null, ["b"]], "\nnl", ["\nnl"], BigInt(7), h("b", null, "x"), [h("i", { key: 1 }, "x"), "t"], () => 1];
+    const html = [{ __html: "<b>\nx</b>" }, { __html: "\nx" }, { __html: ["\nx"] }, { __html: null }, { __html: 0 }, {}, "x"];
+    const different: string[] = [];
+    let checked = 0;
+    const check = (node: React.ReactElement, label: string) => {
+      checked++;
+      const [walker, dom] = [attempt(() => renderStatic(wrapped(node))), attempt(() => reactDom(wrapped(node)))];
+      if (walker !== dom) different.push(`${label}: ${walker} ≠ ${dom}`);
+    };
+    for (const tag of tags) {
+      for (const name of names) {
+        for (const value of values) {
+          // (React 19 writes a form's action function as a script, which the walker doesn't: see "differs … only where it means to".)
+          if (typeof value === "function" && /action/i.test(name)) continue;
+          // (A ref is an object, a function or nothing.)
+          if (name === "ref" && !(value == null || typeof value === "function")) continue;
+          const props = { [name]: value };
+          check(h(tag, props), `<${tag} ${name}=${show(value)}>`);
+          if (name !== "children") check(h(tag, props, "t"), `<${tag} ${name}=${show(value)}>t`);
+        }
+      }
+      for (const style of styles) check(h(tag, { style }), `<${tag} style=${JSON.stringify(style)}>`);
+      for (const child of children) check(h(tag, null, child), `<${tag}>${show(child)}`);
+      for (const __html of html) {
+        check(h(tag, { dangerouslySetInnerHTML: __html }), `<${tag} dangerouslySetInnerHTML=${JSON.stringify(__html)}>`);
+        check(h(tag, { dangerouslySetInnerHTML: __html }, "t"), `<${tag} dangerouslySetInnerHTML=${JSON.stringify(__html)}>t`);
+      }
+    }
+    expect(different.slice(0, 20)).toEqual([]);
+    expect(checked).toBeGreaterThan(100000);
+    // (Over a hundred thousand renders by each: under a second here, several on a CI runner with React's development build.)
+  }, 60_000);
+
+  it("writes form controls as react-dom does: a select's value marking its options, a textarea's value as its text, an input's checked and value last", () => {
+    const Option = ({ value, children }: { value?: unknown; children?: React.ReactNode }) => h("option", { value }, children);
+    const options = [h("option", { key: 1, value: "a" }, "A"), h("option", { key: 2, value: "b" }, "B"), h("option", { key: 3 }, "c"), h("option", { key: 4, value: 1 }, "One")];
+    const trees = [
+      h("select", { defaultValue: "b" }, options),
+      h("select", { value: "b", onChange() {} }, options),
+      h("select", { value: "a", defaultValue: "b", onChange() {} }, options),
+      h("select", { value: null, defaultValue: "c" }, options),
+      h("select", { defaultValue: 1 }, options),
+      h("select", { multiple: true, defaultValue: ["a", "c", 1] }, options),
+      h("select", { multiple: true, defaultValue: [] }, options),
+      h("select", { defaultValue: { toString: () => "b" } }, options),
+      h("select", { defaultValue: "b" }, h("optgroup", { label: "g" }, options)),
+      h("select", { defaultValue: "b" }, h(Fragment, null, h(Option, { value: "a" }, "A")), h(Option, { value: "b" }, "B")),
+      h("select", { defaultValue: "b" }, h("div", null, h("option", { value: "b" }, "B"))),
+      h("select", { defaultValue: "b" }, h("table", null, h("tbody", null, h("tr", null, h("td", null, h("option", { value: "b" }, "B")))))),
+      h("select", { defaultValue: "b" }, h("td", null, h("option", { value: "b" }, "B"))),
+      h("select", { defaultValue: "b" }, h("svg", null, h("foreignObject", null, h("option", { value: "b" }, "B")))),
+      h("select", { defaultValue: "b" }, h("noscript", null, h("option", { value: "b" }, "B")), h("picture", null, h("option", { value: "b" }, "B"))),
+      h("select", { defaultValue: "a" }, h("option", { value: "a" }, "A"), h("select", { defaultValue: "x" }, h("option", { value: "x" }, "X"), h("option", { value: "a" }, "A"))),
+      h("select", { defaultValue: "ab12" }, h("option", null, "a", ["b", [1]], 2), h("option", null, "a", h("b", null, "b")), h("option", null, true, "ab12")),
+      h("select", { defaultValue: "x" }, h("option", { value: "a", selected: true }, "A"), h("option", { dangerouslySetInnerHTML: { __html: "x" } })),
+      h("select", null, h("option", { value: "a", selected: "no" }, "A"), h("option", { selected: 0 }, "B"), h("option", { selected: () => 1 }, "C")),
+      h("SELECT", { defaultValue: "a" }, h("option", { value: "a" }, "A")),
+      h("option", { value: "a", selected: true }, "A"),
+      h("textarea", { value: "a<b", onChange() {} }),
+      h("textarea", { defaultValue: "\nx" }),
+      h("textarea", { defaultValue: ["\nx"] }),
+      h("textarea", { defaultValue: 5, value: null }),
+      h("textarea", { defaultValue: () => 1 }),
+      h("textarea", null, "\nchild"),
+      h("textarea", null, ["x"]),
+      h("textarea", null, [null]),
+      h("textarea", null, h("b")),
+      h("textarea", { defaultValue: "d" }, "c"),
+      h("textarea", null, "a", "b"),
+      h("textarea", { dangerouslySetInnerHTML: { __html: "x" } }),
+      h("input", { name: "n", type: "submit", formAction: "/x", id: "i", formTarget: "t", formMethod: "post", formEncType: "e", value: "v", checked: true, onChange() {} }),
+      h("input", { defaultValue: "d", defaultChecked: true, type: "checkbox", value: "v", checked: false, onChange() {} }),
+      h("input", { value: false, checked: "yes", onChange() {} }),
+      h("input", { value: () => 1, defaultValue: "d", checked: () => 1, defaultChecked: true }),
+      h("button", { name: "n", type: "submit", id: "i", formTarget: "t", formAction: "javascript:x" }, "b"),
+      h("form", { target: "_blank", method: "post", id: "f", encType: "x", action: "/a" }, "f"),
+      h("object", { data: "javascript:x", type: "t" }),
+      h("object", { data: "" }, "x"),
+      h("menuitem", { label: "x" }),
+      h("menuitem", null, "x"),
+    ];
+    const different = trees.map((tree) => [attempt(() => renderStatic(tree)), attempt(() => reactDom(tree))]).filter(([walker, dom]) => walker !== dom);
+    expect(different).toEqual([]);
+  });
+
+  it("writes a style's, a script's and a title's text as react-dom does: escaped in React 18, as written in React 19 (but what would end it)", () => {
+    const Css = () => "a > b { c: 'd' }";
+    const Hostile = ({ text }: { text: string }) => text;
+    const trees = [
+      h("style", null, "body{font-family:'Inter',sans-serif} .a > .b{color:red} </style><x> <style </STYLE"),
+      h("style", { media: "print", nonce: "n" }, ["a>b"]),
+      h("style", null, "a{}", "b{}"),
+      h("style", null, [["a>b"]]),
+      h("style", null, 1),
+      h("style", null, true),
+      h("style", null, BigInt(7)),
+      h("style", null, h("b", null, "x")),
+      h("style", null, h(Css)),
+      h("style", { dangerouslySetInnerHTML: { __html: "a>b{x:'y'}" } }),
+      h("style", { dangerouslySetInnerHTML: { __html: "x" } }, "a"),
+      h("style", { precedence: "p" }, "a>b"),
+      h("style", { href: "h" }, "a>b"),
+      h("svg", null, h("style", null, "a>b")),
+      h("script", null, "if (a < b && c > 'd') {} </script><SCRIPT"),
+      h("script", { type: "application/ld+json" }, '{"a":"</script>"}'),
+      h("script", null, 1),
+      h("script", null, ["a", "b"]),
+      h("script", null, ["a<"]),
+      h("script", null, h("b", null, "x")),
+      h("script", null, h(Css)),
+      // What would end one, from a component, a list, or where it is (react-dom's, outside a <Head>: see head.test.tsx).
+      h("style", null, h(Hostile, { text: "red}</style><script>alert(1)</script><style>" })),
+      h("style", null, [h(Css, { key: "a" }), "</style><script>alert(1)</script>"]),
+      h("script", { type: "application/ld+json" }, h(Hostile, { text: '{"name":"</script><script>alert(1)</script>"}' })),
+      h("script", null, [h(Hostile, { key: "a", text: "</scr" }), "ipt><img src=x onerror=alert(1)>"]),
+      h("svg", null, h("style", null, "<img src=x onerror=alert(1)>")),
+      h("SVG", null, h("style", null, "<img src=x onerror=alert(1)>")),
+      h("math", null, h("mi", null, h("style", null, "<img src=x onerror=alert(1)>"))),
+      h("noscript", null, h("style", null, "</noscript><img src=x onerror=alert(1)>"), h("script", null, "</noscript><img src=x onerror=alert(1)>")),
+      h("title", null, h("style", null, "</title><img src=x onerror=alert(1)>")),
+      h("script", { dangerouslySetInnerHTML: { __html: "a<b" } }),
+      h("script", { async: true }, "x<"),
+      h("script", { src: "x.js" }),
+      h("svg", null, h("title", null, "a", "b")),
+      h("svg", null, h("title", null, "A & B")),
+      h("svg", null, h("title", null, 5)),
+      h("svg", null, h("title", null, h("b"))),
+      h("svg", null, h("title", { dangerouslySetInnerHTML: { __html: "<b>" } })),
+      h("noscript", null, h("title", null, "x"), h("meta", { name: "a" }), h("link", { rel: "icon", href: "x" }), h("style", { precedence: "p", href: "h" }, "a>b"), h("script", { async: true, src: "s.js" })),
+      h("div", null, h("title", { itemProp: "name" }, "x", "y"), h("meta", { itemProp: "x", content: "y" }), h("link", { itemProp: "x", rel: "icon", href: "x" }), h("link", { rel: "icon" }), h("link", { rel: "icon", href: "" })),
+    ];
+    const different = trees.map((tree) => [attempt(() => renderStatic(tree)), attempt(() => reactDom(tree))]).filter(([walker, dom]) => walker !== dom);
+    expect(different).toEqual([]);
+  });
+
+  it("differs from react-dom only where it means to: React 19's hoisting, its document singletons and forms' actions, React 18's `javascript:` URLs", () => {
+    // Each tree, what the walker writes on React 19, and why react-dom 19 writes otherwise (react-dom 18 writes them as
+    // the walker does).
+    const action = () => {};
+    const intended: Array<[React.ReactElement, string, string]> = [
+      [h("div", null, h("title", null, "T")), "<div><title>T</title></div>", "it moves a <title> to the start of the markup: Elements' markup is a part of a document (<Head> puts tags in the head)"],
+      [h("div", null, h("meta", { name: "x", content: "y" })), '<div><meta name="x" content="y"/></div>', "it moves a <meta> to the start"],
+      [h("div", null, h("link", { rel: "icon", href: "x.ico" })), '<div><link rel="icon" href="x.ico"/></div>', "it moves a <link> to the start"],
+      [h("div", null, h("style", { precedence: "default", href: "x" }, "a>b{}")), '<div><style precedence="default" href="x">a>b{}</style></div>', "it moves a <style precedence href> to the start, as `data-precedence`"],
+      [h("div", null, h("script", { async: true, src: "x.js" })), '<div><script async="" src="x.js"></script></div>', "it moves an async <script> to the start"],
+      [h("div", null, h("img", { src: "x.png" })), '<div><img src="x.png"/></div>', "it adds a <link rel=\"preload\"> for an image, which an email has no use for"],
+      [h("html", null, h("body", null, "x")), "<html><body>x</body></html>", "it adds a <head> to an <html> at the top, and moves what it hoists there"],
+      [h("form", { action }, h("button", { formAction: action }, "x")), "<form><button>x</button></form>", "it writes a function as an action as a script that runs it, which an email can't"],
+    ];
+    // In every React: what fails in a <Suspense> fails the render (or is left out with `onError`), where react-dom renders
+    // its fallback (for the browser to render it again): nothing is left out without a word (ARCHITECTURE.md, Errors).
+    const Fails = (): React.ReactElement => {
+      throw new Error("fails");
+    };
+    const suspense = h(Suspense, { fallback: h("i", null, "…") }, h(Fails));
+    expect([attempt(() => renderStatic(suspense)), renderToStaticMarkup(suspense)]).toEqual(["throws", "<i>…</i>"]);
+    for (const [tree, walker, why] of intended) {
+      const dom = renderToStaticMarkup(tree);
+      if (REACT_18) expect([why, renderStatic(tree)]).toEqual([why, dom]);
+      else {
+        expect([why, renderStatic(tree)]).toEqual([why, walker]);
+        expect([why, dom]).not.toEqual([why, walker]);
+      }
+    }
+    // Where it differs from react-dom 18 (react-dom 19 writes them as the walker does): a `javascript:` URL, which
+    // react-dom 18 writes as given, is written as one that throws, so markup from data (a link's URL) runs nothing.
+    const blocked: Array<[React.ReactElement, string]> = [
+      [h("a", { href: "javascript:alert(1)" }, "x"), `<a href="${BLOCKED_URL}">x</a>`],
+      [h("a", { href: [" \u0001java\tscript:alert(1)"] }, "x"), `<a href="${BLOCKED_URL}">x</a>`],
+      [h("img", { src: "JavaScript:x" }), `<img src="${BLOCKED_URL}"/>`],
+      [h("form", { action: "javascript:x" }, h("button", { formAction: "javascript:x" }, "b")), REACT_18 ? `<form action="${BLOCKED_URL}"><button formaction="${BLOCKED_URL}">b</button></form>` : `<form action="${BLOCKED_URL}"><button formAction="${BLOCKED_URL}">b</button></form>`],
+      [h("svg", null, h("use", { xlinkHref: "javascript:x" })), `<svg><use xlink:href="${BLOCKED_URL}"></use></svg>`],
+      [h("object", { data: "javascript:x" }), `<object data="${BLOCKED_URL}"></object>`],
+    ];
+    for (const [tree, walker] of blocked) {
+      const dom = renderToStaticMarkup(tree).replace(/<link rel="preload" as="image"[^>]*\/>/g, "");
+      expect(renderStatic(tree)).toBe(walker);
+      if (REACT_18) expect(dom).not.toBe(walker);
+      else expect(dom).toBe(walker);
+    }
+  });
+
+  it("gives the same useId()s with a prefix, as React's identifierPrefix", () => {
+    const different: number[] = [];
+    for (let seed = 1; seed <= 100; seed++) {
+      const tree = randomTree(seed);
+      const html = renderToStaticMarkup(tree, { identifierPrefix: "em-" }).replace(/<link rel="preload" as="image"[^>]*\/>/g, "");
+      if (renderStatic(tree, { idPrefix: "em-" }) !== html) different.push(seed);
+    }
+    expect(different.slice(0, 10)).toEqual([]);
+  });
+
+  it(`writes the same for ${SEEDS} random trees`, () => {
+    const different: number[] = [];
+    let bytes = 0;
+    for (let seed = 1; seed <= SEEDS; seed++) {
+      const tree = randomTree(seed);
+      const html = attempt(() => reactDom(tree));
+      bytes += html.length;
+      if (attempt(() => renderStatic(tree)) !== html) different.push(seed);
+    }
+    expect(different.slice(0, 10)).toEqual([]);
+    // (Trees of some size: not mostly empty ones.)
+    expect(bytes / SEEDS).toBeGreaterThan(200);
+  });
+
+  it(`writes the same markup where templates have it, for ${TEMPLATE_SEEDS} random trees: a template with no root, a Page's, a component's in a Column, the async renderers'`, async () => {
+    const different: string[] = [];
+    const Holder = ({ children }: { children?: React.ReactNode }) => h("div", null, children);
+    for (let seed = 1; seed <= TEMPLATE_SEEDS; seed++) {
+      // (No useId()s: a template's start where its root's content does, not at the top.)
+      const tree = randomMarkup(seed);
+      const markup = attempt(() => reactDom(tree));
+      // (Markup a component of yours renders in a Column is an Html block's; markup written in one isn't kept.)
+      const inDiv = attempt(() => reactDom(h("div", null, tree)));
+      const contexts: Array<[string, string, () => string | Promise<string>]> = [
+        ["no root", markup, () => renderToHtmlParts(h(Fragment, null, tree)).body],
+        ["no root, async", markup, async () => (await asyncRenderers.renderToHtmlParts(h(Fragment, null, tree))).body],
+        ["a Page's", markup, () => between(renderToHtmlParts(h(Page, null, h("hr", { id: "start" }), tree, h("hr", { id: "end" }))).body)],
+        ["a component's in a Column", inDiv, () => renderToJson(h(Page, null, h(Row, null, h(Column, null, h(Holder, null, tree))))).body.rows[0].columns[0].contents[0].values.html],
+      ];
+      for (const [where, expected, render] of contexts) {
+        let got: string;
+        try {
+          got = await render();
+        } catch {
+          got = "throws";
+        }
+        if (got !== expected) different.push(`seed ${seed}, ${where}: ${got} ≠ ${expected}`);
+      }
+    }
+    expect(different.slice(0, 10)).toEqual([]);
+  });
+});
+
+/** What a render gives, or "throws". */
+function attempt(render: () => string): string {
+  try {
+    return render();
+  } catch {
+    return "throws";
+  }
+}
+
+/** A value, shown in a label. */
+const show = (value: unknown) => (typeof value === "function" ? "fn" : typeof value === "symbol" || typeof value === "bigint" ? String(value) : React.isValidElement(value) ? "<element>" : JSON.stringify(value));
+
+/** The markup between a Page's `<hr id="start"/>` and `<hr id="end"/>`. */
+const between = (body: string) => body.slice(body.indexOf('<hr id="start"/>') + 16, body.indexOf('<hr id="end"/>'));
+
+/**
+ * An element where React 19 writes it in place: a <title>, <meta>, <link>, <style> or <script> in a <noscript> (React
+ * 19 hoists them elsewhere: see "differs … only where it means to"), anything else in a <div> (not the document's own
+ * <html>, <head> or <body>).
+ */
+const wrapped = (node: React.ReactElement) => h(/^(title|meta|link|style|script)$/.test(String(node.type)) ? "noscript" : "div", null, node);
+
+/** A seeded random number generator (mulberry32). */
+function random(seed: number) {
+  let a = seed >>> 0;
+  const next = () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+  return { next, pick: <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)] };
+}
+
+const TAGS = ["div", "span", "p", "b", "a", "td", "li", "section"] as const;
+const WORDS = ["Hi", "a & b", "<x>", "\"q\"", "7", "", " "];
+
+/** A random tree of what templates use: markup, text, arrays, Fragments, components with ids, context, memo, forwardRef. */
+function randomTree(seed: number): React.ReactElement {
+  const r = random(seed);
+  let keys = 0;
+  const node = (depth: number): React.ReactNode => {
+    const roll = r.next();
+    if (depth > 5 || roll < 0.15) return r.pick(WORDS);
+    if (roll < 0.26) return r.pick([null, false, 0, 42]);
+    const children = () => Array.from({ length: 1 + Math.floor(r.next() * 3) }, () => <Fragment key={keys++}>{node(depth + 1)}</Fragment>);
+    if (roll < 0.4) {
+      const tag = r.pick(TAGS);
+      const props: Record<string, unknown> = { className: r.next() < 0.3 ? `c${seed}` : undefined, style: r.next() < 0.3 ? { color: "red", paddingTop: Math.floor(r.next() * 9) } : undefined };
+      if (tag === "a") props.href = "https://example.com/?a=1&b=2";
+      return React.createElement(tag, props, ...children());
+    }
+    if (roll < 0.5) return children();
+    if (roll < 0.58) return <>{children()}</>;
+    if (roll < 0.72) return <Ids n={1 + Math.floor(r.next() * 2)}>{children()}</Ids>;
+    if (roll < 0.78) return <Memo>{children()}</Memo>;
+    if (roll < 0.82) return <Ref>{children()}</Ref>;
+    if (roll < 0.88) return provide(r.next() < 0.5 ? Theme : Lang, `v${Math.floor(r.next() * 9)}`, [<Themed key="t" />, ...children()]);
+    if (roll < 0.92) return <Classy>{children()}</Classy>;
+    if (roll < 0.95) return <Stateful>{children()}</Stateful>;
+    // (Markup React rejects fails the render, also in a <Suspense>: see "differs … only where it means to".)
+    if (roll < 0.97) return markup(r, depth + 1, () => <Fragment key={keys++}>{node(depth + 2)}</Fragment>, true);
+    return <Suspense fallback={<i>…</i>}>{children()}</Suspense>;
+  };
+  return <div>{node(0)}</div>;
+}
+
+const VALUES = ["a", "b", "c", 1, "1", "", "A", null, undefined, true, ["a", "c"], [1], []];
+const TEXTS = ["A", "a", "b", "B", 1, ["a", ["b"]], null, true, "", "\nx", "a > b {c: 'd'}", "</style><style", "</script><script", "x & <y>"];
+const Option = ({ value, children }: { value?: unknown; children?: React.ReactNode }) => h("option", { value }, children);
+const Pass = ({ children }: { children?: React.ReactNode }) => children;
+
+/** A random tree of markup only (no useId()s), of every element React writes its own way. */
+function randomMarkup(seed: number): React.ReactElement {
+  const r = random(seed);
+  let keys = 0;
+  const node = (depth: number): React.ReactNode => (depth > 4 || r.next() < 0.2 ? r.pick(TEXTS) : markup(r, depth, () => <Fragment key={keys++}>{node(depth + 1)}</Fragment>));
+  return <div>{node(0)}</div>;
+}
+
+/**
+ * One of the elements React writes its own way, with random props, holding `child()`ren: form controls (a select's
+ * options inside optgroups, Fragments, components, tables, foreign content), raw text, titles and resources (where
+ * React 19 writes them in place), custom elements, preformatted text, and markup around them. `valid`: none React
+ * rejects (a textarea's value and children, `dangerouslySetInnerHTML` and children).
+ */
+function markup(r: ReturnType<typeof random>, depth: number, child: () => React.ReactNode, valid = false): React.ReactNode {
+  const some = (n = 3) => Array.from({ length: 1 + Math.floor(r.next() * n) }, child);
+  const maybe = (props: Record<string, unknown>) => Object.fromEntries(Object.entries(props).filter(() => r.next() < 0.5));
+  const text = () => r.pick(TEXTS);
+  const option = (): React.ReactNode => {
+    const roll = r.next();
+    const props = { key: `o${r.next()}`, ...maybe({ value: r.pick(VALUES), selected: r.pick([true, false, "x", 0]), label: "l" }) };
+    if (roll < 0.55) return h("option", props, text());
+    if (roll < 0.65) return h("optgroup", { key: `g${r.next()}`, label: "g" }, option(), option());
+    if (roll < 0.72) return h(Fragment, { key: `f${r.next()}` }, option());
+    if (roll < 0.8) return h(Option, { key: `c${r.next()}`, value: r.pick(VALUES) }, text());
+    if (roll < 0.86) return h(r.pick(["div", "noscript", "picture", "td", "svg"]), { key: `w${r.next()}` }, option());
+    if (roll < 0.9) return h("table", { key: `t${r.next()}` }, h("tbody", null, h("tr", null, h("td", null, option()))));
+    if (roll < 0.94) return h("select", { key: `s${r.next()}`, defaultValue: r.pick(VALUES) }, option(), option());
+    return h("option", { ...props, dangerouslySetInnerHTML: { __html: "<b>x</b>" } });
+  };
+  const hoistable = { itemProp: "x" };
+  switch (Math.floor(r.next() * 24)) {
+    case 0:
+    case 1:
+      return h("select", maybe({ value: r.pick(VALUES), defaultValue: r.pick(VALUES), multiple: r.pick([true, false]), onChange: () => {}, name: "s" }), option(), option(), option());
+    case 2:
+      return h("textarea", maybe({ value: r.pick(VALUES), defaultValue: r.pick(VALUES), rows: 2, name: "t", onChange: () => {} }), !valid && r.next() < 0.2 ? text() : undefined);
+    case 3:
+      return h("input", maybe({ name: "n", type: r.pick(["text", "checkbox", "submit"]), value: r.pick(VALUES), defaultValue: "d", checked: r.pick([true, false]), defaultChecked: true, id: "i", formAction: "/x", formTarget: "t", formMethod: "post", formEncType: "e", onChange: () => {} }));
+    case 4:
+      return h("button", maybe({ name: "n", type: "submit", formAction: "javascript:x", formTarget: "t", id: "b" }), some());
+    case 5:
+      return h("form", maybe({ action: "/a", target: "_blank", method: "post", encType: "x", id: "f", name: "f" }), some());
+    case 6:
+      return h("style", maybe({ media: "print", nonce: "n", precedence: "p", type: "text/css" }), r.pick([text(), [text()], [text(), text()], 1, true, h("b", null, "x")]));
+    case 7:
+      return h("script", maybe({ type: "application/ld+json", async: true, nonce: "n" }), r.pick([text(), [text()], [text(), text()], 1, h("b", null, "x")]));
+    case 8:
+      return h(r.next() < 0.5 ? "svg" : "noscript", null, h("title", null, r.pick([text(), [text(), text()], 5])), h("style", null, text()), h("script", null, text()), some(1));
+    case 9:
+      return h("div", null, h("title", hoistable, r.pick([text(), [text(), text()]])), h("meta", { ...hoistable, content: text() }), h("link", { ...hoistable, rel: "icon", href: "x" }), h("link", { rel: "icon" }));
+    case 10:
+      return h("object", maybe({ data: r.pick(["x.swf", "", "javascript:x", true]), type: "t" }), some(1));
+    case 11:
+      return h("menuitem", maybe({ label: "x", disabled: true }));
+    case 12: {
+      const html = r.next() < 0.3;
+      return h(r.pick(["pre", "listing"]), html ? { dangerouslySetInnerHTML: { __html: r.pick(["\nx", "x", ["\nx"]]) } } : null, (valid && html) || r.next() < 0.3 ? undefined : r.pick(["\nx", ["\nx"], text()]));
+    }
+    case 13:
+      return h("my-el", maybe({ className: "c", obj: { a: 1 }, num: 2, t: true, f: false, onClick: () => {}, onclick: "x()", style: { color: "red" }, htmlFor: "x", list: [1, 2] }), some());
+    case 14:
+      return h("div", maybe({ is: "x-y", className: "c", for: "f", tabIndex: 1, t: true }), some());
+    case 15:
+      return h("svg", maybe({ viewBox: "0 0 1 1", xlinkHref: "x", strokeWidth: 2, className: "c" }), h("path", maybe({ d: "M0", fillOpacity: 0.5 })), h("foreignObject", null, some(2)));
+    case 16:
+      return h("math", null, h("mi", maybe({ mathVariant: "normal", className: "c" }), text()));
+    case 17: {
+      const html = r.next() < 0.5;
+      return h("div", html ? { dangerouslySetInnerHTML: { __html: "<b>\nx</b>" } } : maybe({ suppressHydrationWarning: true, suppressContentEditableWarning: true, contentEditable: true, innerHTML: "x" }), (valid && html) || r.next() < 0.5 ? undefined : some());
+    }
+    case 18:
+      return h("table", null, h("tbody", null, h("tr", null, h("td", maybe({ colSpan: 2, rowSpan: "x", valign: "top" }), some()))));
+    case 19:
+      return h(r.pick(["DIV", "SELECT", "Span"]), maybe({ className: "c", defaultValue: "a" }), r.pick([some(), option()]));
+    case 20:
+      return h(Pass, null, some());
+    case 21:
+      return h(r.pick(["img", "br", "hr", "wbr", "col"]), maybe({ src: "data:image/png;base64,x", loading: "lazy", alt: text(), width: 2, className: "c" }));
+    default:
+      return h(r.pick(["div", "span", "p", "b", "a", "td", "section", "font", "center", "html", "head", "body"]), maybe({ className: "c", style: { paddingTop: 2, "--x": "y" }, href: "https://x.com/?a=1&b=2", title: text() }), some());
+  }
+}
diff --git a/packages/react/src/engine/dispatcher.test.tsx b/packages/react/src/engine/dispatcher.test.tsx
new file mode 100644
index 00000000..ff74ddfe
--- /dev/null
+++ b/packages/react/src/engine/dispatcher.test.tsx
@@ -0,0 +1,124 @@
+// @vitest-environment node
+/**
+ * Elements' hooks dispatcher, on the installed React (CI runs it on each version it supports): every hook React
+ * exports works in a template's component as on a server, and a hook it doesn't know fails with a named error.
+ */
+import { describe, expect, it } from "vitest";
+import React, { createContext, useState } from "react";
+import * as ReactDom from "react-dom";
+import { renderToStaticMarkup } from "react-dom/server";
+import { renderStatic } from "./index";
+import { isIdleDispatcher, theSlot } from "./dispatcher";
+
+const R = React as unknown as Record<string, any>;
+const has = (name: string) => typeof R[name] === "function";
+const Theme = createContext("default");
+
+/** What a component gives with the walker and with react-dom/server: the same, where react-dom can render it. */
+const both = (element: React.ReactElement) => ({ walker: renderStatic(element), reactDom: renderToStaticMarkup(element) });
+
+describe("an idle dispatcher (React's between its client renders: no render running, where react-dom puts a context's default back first)", () => {
+  const invalid = () => {
+    throw new Error("Invalid hook call");
+  };
+  const hooks = ["useState", "useEffect", "useContext", "useCallback", "useMemo", "useReducer", "useRef"];
+  it("is none, or one whose hooks are one function (React's ContextOnlyDispatcher), compared without calling anything", () => {
+    expect(isIdleDispatcher(null)).toBe(true);
+    expect(isIdleDispatcher(undefined)).toBe(true);
+    const calls: string[] = [];
+    const contextOnly = new Proxy(Object.fromEntries(hooks.map((hook) => [hook, invalid])), { get: (target, key) => (calls.push(String(key)), target[key as string]) });
+    expect(isIdleDispatcher(contextOnly)).toBe(true);
+    expect(calls.every((key) => hooks.includes(key))).toBe(true);
+  });
+
+  it("isn't a running render's: React Server Components' shares one function for most hooks, but not useContext", () => {
+    const unsupported = () => {
+      throw new Error("This Hook is not supported in Server Components.");
+    };
+    const flight = { ...Object.fromEntries(hooks.map((hook) => [hook, unsupported])), useContext: () => {
+      throw new Error("Cannot read a Client Context from a Server Component.");
+    } };
+    expect(isIdleDispatcher(flight)).toBe(false);
+    // A server's or a client's, with a function each, and a shape this doesn't know: hosts (the safe side, nothing put
+    // back).
+    expect(isIdleDispatcher(Object.fromEntries(hooks.map((hook) => [hook, () => hook])))).toBe(false);
+    expect(isIdleDispatcher({})).toBe(false);
+    expect(isIdleDispatcher({ useState: 1, useEffect: 1, useContext: 1, useCallback: 1 })).toBe(false);
+  });
+});
+
+describe("the hooks dispatcher", () => {
+  it("implements every hook this React exports, as its server renderer does", () => {
+    const store = { subscribe: () => () => {}, get: () => "client", server: () => "server" };
+    function Everything() {
+      const out: unknown[] = [];
+      const [state, setState] = R.useState(() => "state");
+      const [reduced] = R.useReducer((s: number, a: number) => s + a, 1, (n: number) => n + 1);
+      out.push(state, reduced, R.useMemo(() => "memo", []), R.useCallback(() => "cb", [])(), R.useRef("ref").current);
+      out.push(R.useContext(Theme), R.useSyncExternalStore(store.subscribe, store.get, store.server), R.useDeferredValue("deferred"));
+      const [pending] = R.useTransition();
+      out.push(pending, typeof R.useId());
+      // Effects never run on a server.
+      for (const effect of ["useEffect", "useLayoutEffect", "useInsertionEffect"]) R[effect](() => out.push(`ran ${effect}`));
+      R.useImperativeHandle(null, () => ({}));
+      R.useDebugValue("debug");
+      if (has("use")) out.push(R.use(Theme));
+      if (has("useOptimistic")) out.push(R.useOptimistic("optimistic")[0]);
+      if (has("useActionState")) out.push(R.useActionState(() => {}, "action")[0]);
+      if (has("useEffectEvent")) out.push(typeof R.useEffectEvent(() => {}));
+      if (typeof (ReactDom as Record<string, any>).useFormStatus === "function") out.push((ReactDom as Record<string, any>).useFormStatus().pending);
+      void setState;
+      return <p>{out.map(String).join(",")}</p>;
+    }
+    const element = <Theme.Provider value="provided"><Everything /></Theme.Provider>;
+    const { walker, reactDom } = both(element);
+    expect(walker).toBe(reactDom);
+    expect(walker).not.toContain("ran ");
+    // Each hook this React has: the list above covers them (a new one needs a line there and in dispatcher.ts).
+    const covered = ["useState", "useReducer", "useMemo", "useCallback", "useRef", "useContext", "useSyncExternalStore", "useDeferredValue", "useTransition", "useId", "useEffect", "useLayoutEffect", "useInsertionEffect", "useImperativeHandle", "useDebugValue", "use", "useOptimistic", "useActionState", "useEffectEvent"];
+    expect(Object.keys(R).filter((key) => /^use([A-Z]|$)/.test(key) && has(key)).filter((key) => !covered.includes(key))).toEqual([]);
+  });
+
+  it("runs a component again when it sets its state while rendering, as React does", () => {
+    function Counter() {
+      const [n, setN] = useState(0);
+      if (n < 3) setN(n + 1);
+      return <b>{n}</b>;
+    }
+    expect(renderStatic(<Counter />)).toBe("<b>3</b>");
+  });
+
+  it("says what a function from a hook can't do while rendering (useEffectEvent, useOptimistic, useActionState)", () => {
+    for (const [hook, call] of [
+      ["useEffectEvent", () => R.useEffectEvent(() => {})()],
+      ["useOptimistic", () => R.useOptimistic(1)[1](2)],
+      ["useActionState", () => R.useActionState(() => {}, 1)[1]()],
+    ] as const) {
+      if (!has(hook)) continue;
+      const Component = () => (call(), null);
+      expect(() => renderStatic(<Component />), hook).toThrow(/while rendering/);
+    }
+  });
+
+  it("fails a hook it doesn't know (a newer React's) with a named error, and puts React's dispatcher back", () => {
+    const slot = theSlot()!;
+    const before = slot.get();
+    // What a newer React's `useFuture` would do: call it on the dispatcher in its slot.
+    const useFuture = () => (slot.get() as Record<string, () => unknown>).useFuture();
+    function Futuristic() {
+      useFuture();
+      return null;
+    }
+    expect(() => renderStatic(<Futuristic />)).toThrow(`[Unlayer] <Futuristic> calls useFuture, which Elements' renderer doesn't support (React ${React.version}).`);
+    expect(slot.get()).toBe(before);
+    // Not every property: one React reads for something else isn't a hook.
+    expect((slot.get() as Record<string, unknown> | null)?.then).toBeUndefined();
+  });
+
+  it("needs getServerSnapshot for useSyncExternalStore, as React's server renderer does", () => {
+    const Store = () => <i>{R.useSyncExternalStore(() => () => {}, () => "client")}</i>;
+    expect(() => renderStatic(<Store />)).toThrow(/getServerSnapshot/);
+    // Said once as Elements' (it was `[Unlayer] [Unlayer] Missing getServerSnapshot…`).
+    expect(() => renderStatic(<Store />)).toThrow(/^\[Unlayer\] Missing getServerSnapshot, which useSyncExternalStore needs on a server\. \(in <Store>/);
+  });
+});
diff --git a/packages/react/src/engine/dispatcher.ts b/packages/react/src/engine/dispatcher.ts
new file mode 100644
index 00000000..335bdc2f
--- /dev/null
+++ b/packages/react/src/engine/dispatcher.ts
@@ -0,0 +1,337 @@
+/**
+ * Elements' hooks dispatcher: what React's hooks do while the walker (walk.ts) calls a component. React's hook
+ * functions call the dispatcher in a slot of React's internals (see react-compat.ts). The walker puts this one there
+ * synchronously around each component call, and the one that was there back after (in `finally`, never across an
+ * await), so a render it runs inside (the app's react-dom render, Next.js's Server Components) keeps its own.
+ *
+ * Server semantics, as react-dom's static render has them: context from the walker's provider stack (else its
+ * default, whatever renders before it provided, or inside an app's render what's there: see `defaultOf`), `useId`
+ * from the tree position, initial state (a state set while rendering renders the component again, its last render
+ * counts), effects never run, `use()` of a pending thenable suspends. A hook it doesn't know (a newer React's) throws a
+ * named error, instead of React's "dispatcher.useX is not a function".
+ */
+import React from "react";
+import { cleanUp } from "@unlayer/react-elements/fizz-cleanup";
+import { slotOf, type Slot } from "./react-compat";
+import { makeId, type TreeContext } from "./tree-id";
+
+// ── Context: a linked stack the walker passes down (immutable, so a resumed component keeps the one it had) ──
+
+export interface ContextStack {
+  context: object;
+  value: unknown;
+  next: ContextStack | null;
+}
+
+const CONTEXT = Symbol.for("react.context");
+const CONSUMER = Symbol.for("react.consumer");
+
+/** The context a `useContext` argument names: React 19's Consumer, React 18's development Consumer, or the context. */
+export const contextOf = (usable: any): any => (usable?.$$typeof === CONSUMER || (usable?._context && usable.$$typeof === CONTEXT) ? usable._context : usable);
+
+/** What a render reads for each context no provider in it gives, worked out at its first read (see `readContext`). */
+export type Fallbacks = Map<object, unknown>;
+
+/**
+ * A context's value: the nearest provider's in the walk (or around the component that started it), else its fallback
+ * (see `defaultOf`), worked out once per render (`fallbacks`, the top-level render's, which the renders it starts
+ * share: see the engine's Walker), so a render that starts inside an app's render and goes on after it (an async one)
+ * reads one value for it throughout, and react-dom's static renderer renders at most once per context and render.
+ */
+export function readContext(stack: ContextStack | null, usable: unknown, fallbacks?: Fallbacks): unknown {
+  const context = contextOf(usable);
+  const kept = fallbacks && typeof context === "object" && context !== null;
+  // (In a render, worked out where it's provided too, so it's seen while React's values still hold it: see
+  // `defaultOf`. Outside one, as the self-test reads it, only where no provider gives it.)
+  if (kept && !fallbacks.has(context)) fallbacks.set(context, defaultOf(context));
+  for (let s = stack; s; s = s.next) if (s.context === context) return s.value;
+  return kept ? fallbacks.get(context) : defaultOf(context);
+}
+
+/**
+ * A context's default. React keeps it only in two values, which its renders set while they render and don't always
+ * put back: `_currentValue` (react-dom's streaming render's, and its client's: after a stream, what the last part it
+ * waited for was given) and `_currentValue2` (renderToString's and renderToStaticMarkup's, and other secondary
+ * renderers': after one that failed or suspended inside a provider, what it was given there, till react-dom's static
+ * renderer's next render starts and puts it back). So while no render of React's is running, that renderer renders
+ * nothing first (`@unlayer/react-elements/fizz-cleanup`), and the second is then the default. Inside an app's render it's what's there:
+ * inside its renderToString, that render's value; inside its stream or client render, the default, unless a
+ * renderToString that failed inside a provider left another (that renderer can't be asked there: inside the app's
+ * renderToString, it would put back the app's own providers). Where react-dom/server isn't loaded for it (an edge
+ * runtime, a Worker, a browser, React Server Components), the second as it is. Nothing is kept from one render to the
+ * next: where the app's react-dom isn't the one loaded, the cleanup does nothing, and a default kept wrong would stay
+ * wrong. (React 18's `_defaultValue` is a server context's, null for these.)
+ */
+function defaultOf(context: any): unknown {
+  if (!hostRunning()) {
+    const s = theSlot();
+    const held = s?.get() === DISPATCHER;
+    try {
+      cleanUp();
+    } catch {
+      // It can't render here: the value as it is.
+    } finally {
+      // (react-dom puts back the dispatcher it found; this one stays in the slot for the component being called.)
+      if (held) s!.set(DISPATCHER);
+    }
+  }
+  return context._currentValue2;
+}
+
+// ── The component being called ──
+
+export interface HookState {
+  /** Its name, for messages. */
+  name: string;
+  tree: TreeContext;
+  contexts: ContextStack | null;
+  /** What its `useId()`s start with (the render's `idPrefix`). */
+  idPrefix: string;
+  /** What its render reads for contexts no provider gives (see `readContext`). */
+  fallbacks?: Fallbacks;
+  /** useId calls so far (React's localIdCounter): more than 0 gives its children a fork of the tree. */
+  localId: number;
+  /** Thenables `use()` was given, by call order, kept when it's called again (React's thenableState). */
+  thenables: Tracked<unknown>[];
+  thenableIndex: number;
+  /** The thenable a `use()` suspended on. */
+  suspendedOn?: PromiseLike<unknown>;
+  /** Hook slots, kept across the renders a state set while rendering starts again. */
+  hooks?: Record<string, any>[];
+  hookIndex: number;
+  /** It set its state while it rendered: the walker calls it again. */
+  rerender: boolean;
+}
+
+export function hookState(name: string, tree: TreeContext, contexts: ContextStack | null, idPrefix = "", fallbacks?: Fallbacks): HookState {
+  return { name, tree, contexts, idPrefix, fallbacks, localId: 0, thenables: [], thenableIndex: 0, hookIndex: 0, rerender: false };
+}
+
+/** Thrown by `use()` of a pending thenable (the walker reads `suspendedOn`). */
+export const SUSPEND = { toString: () => "[Unlayer] suspended" };
+
+let active: HookState | null = null;
+
+function current(): HookState {
+  if (!active) throw new Error("[Unlayer] Invalid hook call: hooks can only be called inside the body of a function component.");
+  return active;
+}
+
+type Tracked<T> = PromiseLike<T> & { status?: "pending" | "fulfilled" | "rejected"; value?: T; reason?: unknown };
+
+/** React's thenable protocol: `status`, then `value` or `reason`, set once it settles (React 19 reads them too). */
+export function track<T>(thenable: Tracked<T>): void {
+  if (thenable.status) return;
+  thenable.status = "pending";
+  thenable.then(
+    (value) => {
+      if (thenable.status === "pending") Object.assign(thenable, { status: "fulfilled", value });
+    },
+    (reason) => {
+      if (thenable.status === "pending") Object.assign(thenable, { status: "rejected", reason });
+    }
+  );
+}
+
+const noop = () => {};
+
+function useThenable<T>(state: HookState, given: Tracked<T>): T {
+  const index = state.thenableIndex++;
+  let thenable = given;
+  const previous = state.thenables[index] as Tracked<T> | undefined;
+  if (previous === undefined) state.thenables.push(thenable);
+  else if (previous !== thenable) {
+    // Called again, it made a new promise for the same `use()` (`use(fetchData())`): the first one's, as React does.
+    thenable.then(noop, noop);
+    thenable = previous;
+  }
+  track(thenable);
+  if (thenable.status === "fulfilled") return thenable.value as T;
+  if (thenable.status === "rejected") throw thenable.reason;
+  state.suspendedOn = thenable;
+  throw SUSPEND;
+}
+
+/** The component's next hook slot (React's work-in-progress hook list, as Fizz keeps it across render-phase updates). */
+function slotFor(state: HookState): { fresh: boolean; hook: Record<string, any> } {
+  const hooks = (state.hooks ??= []);
+  const index = state.hookIndex++;
+  if (index < hooks.length) return { fresh: false, hook: hooks[index] };
+  const hook = {};
+  hooks.push(hook);
+  return { fresh: true, hook };
+}
+
+const basicStateReducer = (state: unknown, action: unknown) => (typeof action === "function" ? (action as (s: unknown) => unknown)(state) : action);
+
+function useReducer(reducer: (state: unknown, action: unknown) => unknown, arg: unknown, init?: (arg: unknown) => unknown): [unknown, (action: unknown) => void] {
+  const state = current();
+  const { fresh, hook } = slotFor(state);
+  if (fresh) {
+    hook.state = init ? init(arg) : arg;
+    hook.queue = [];
+    // A set while it renders (its own render) is applied when it's called again; any other does nothing on a server.
+    hook.dispatch = (action: unknown) => {
+      if (active !== state) return;
+      hook.queue.push(action);
+      state.rerender = true;
+    };
+  } else if (hook.queue.length) {
+    for (const action of hook.queue) hook.state = reducer(hook.state, action);
+    hook.queue = [];
+  }
+  return [hook.state, hook.dispatch];
+}
+
+const sameDeps = (a: unknown[] | null | undefined, b: unknown[] | null | undefined) => !!a && !!b && a.length === b.length && a.every((v, i) => Object.is(v, b[i]));
+
+function useMemo(make: () => unknown, deps?: unknown[] | null): unknown {
+  const { fresh, hook } = slotFor(current());
+  if (!fresh && deps != null && sameDeps(deps, hook.deps)) return hook.value;
+  hook.value = make();
+  hook.deps = deps;
+  return hook.value;
+}
+
+/** A function a hook gives that can't run while rendering (React's server renderer throws the same). */
+const notWhileRendering = (what: string) => () => {
+  throw new Error(`[Unlayer] ${what} while rendering.`);
+};
+const NOT_PENDING = Object.freeze({ pending: false, data: null, method: null, action: null });
+const MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel");
+
+/** A context's value for the component being called. */
+function contextValue(context: unknown): unknown {
+  const state = current();
+  return readContext(state.contexts, context, state.fallbacks);
+}
+
+const HOOKS = {
+  readContext: contextValue,
+  useContext: contextValue,
+  use(usable: any) {
+    const state = current();
+    if (usable !== null && typeof usable === "object") {
+      if (typeof usable.then === "function") return useThenable(state, usable);
+      if (usable.$$typeof === CONTEXT || usable.$$typeof === CONSUMER) return readContext(state.contexts, usable, state.fallbacks);
+    }
+    throw new Error("[Unlayer] An unsupported type was passed to use(): " + String(usable));
+  },
+  useState: (initial: unknown) => useReducer(basicStateReducer, initial, typeof initial === "function" ? (f) => (f as () => unknown)() : undefined),
+  useReducer,
+  useMemo,
+  useCallback: (callback: unknown, deps?: unknown[] | null) => useMemo(() => callback, deps),
+  useRef(value: unknown) {
+    const { fresh, hook } = slotFor(current());
+    if (fresh) hook.ref = { current: value };
+    return hook.ref;
+  },
+  useId() {
+    const state = current();
+    return makeId(state.tree, state.localId++, state.idPrefix);
+  },
+  // Effects never run on a server.
+  useEffect: noop,
+  useLayoutEffect: noop,
+  useInsertionEffect: noop,
+  useImperativeHandle: noop,
+  useDebugValue: noop,
+  useEffectEvent: () => (current(), notWhileRendering("A function wrapped in useEffectEvent can't be called")),
+  useDeferredValue: (value: unknown, initial?: unknown) => (current(), initial !== undefined ? initial : value),
+  useTransition: () => (current(), [false, notWhileRendering("startTransition can't be called")]),
+  useSyncExternalStore(_subscribe: unknown, _get: unknown, getServerSnapshot?: () => unknown) {
+    current();
+    if (getServerSnapshot === undefined) throw new Error("[Unlayer] Missing getServerSnapshot, which useSyncExternalStore needs on a server.");
+    return getServerSnapshot();
+  },
+  useOptimistic: (passthrough: unknown) => (current(), [passthrough, notWhileRendering("Optimistic state can't be updated")]),
+  useActionState: (_action: unknown, initial: unknown) => (current(), [initial, notWhileRendering("Form state can't be updated"), false]),
+  useFormState: (_action: unknown, initial: unknown) => (current(), [initial, notWhileRendering("Form state can't be updated"), false]),
+  // react-dom's useFormStatus: no form is submitting on a server.
+  useHostTransitionStatus: () => (current(), NOT_PENDING),
+  // The React Compiler's cache: a new one each render, as a server render has.
+  useMemoCache: (size: number) => new Array(size).fill(MEMO_CACHE_SENTINEL),
+  useCacheRefresh: () => notWhileRendering("The cache can't be refreshed"),
+};
+
+/** A hook this dispatcher doesn't have (a newer React's): a named error when it's called, instead of a crash. */
+const unknownHooks = new Proxy(
+  {},
+  {
+    get: (_, key) =>
+      typeof key === "string" && /^use[A-Z]/.test(key)
+        ? () => {
+            throw new Error(`[Unlayer] <${active?.name ?? "component"}> calls ${key}, which Elements' renderer doesn't support (React ${React.version}).`);
+          }
+        : undefined,
+  }
+);
+
+/** The dispatcher the walker installs: the hooks above, unknown ones through the Proxy (lookups of known ones stay fast). */
+export const DISPATCHER: typeof HOOKS = Object.setPrototypeOf(HOOKS, unknownHooks);
+
+let slot: Slot | null | undefined;
+/** React's slot, or null where this React has none the table knows (the self-test says so). */
+export const theSlot = (): Slot | null => (slot === undefined ? (slot = slotOf()) : slot);
+
+/** The dispatcher of the render the walker runs inside (the app's react-dom render, Next.js's), or null. */
+let host: unknown = null;
+
+/**
+ * Whether a dispatcher in React's slot is no running render's: none, or React's between its client renders (its
+ * ContextOnlyDispatcher, which React 18 and 19 leave in the slot after the first one, and hold during effects), whose
+ * hooks are one function that throws "Invalid hook call". Its identities are compared, nothing on it called. A running
+ * render's hooks differ (the server's, the client's mount and update ones; React Server Components' share one function
+ * for most, but not for useContext), so it's a host; and so is a shape this doesn't know, where react-dom's static
+ * renderer then isn't asked to put contexts' values back (the safe side: see `defaultOf`).
+ */
+export function isIdleDispatcher(d: any): boolean {
+  if (d == null) return true;
+  return typeof d.useState === "function" && d.useState === d.useEffect && d.useState === d.useContext && d.useState === d.useCallback;
+}
+
+/** Whether a render other than Elements' is running around this call (the app's react-dom render, Next.js's). */
+function hostRunning(): boolean {
+  const current = theSlot()?.get() ?? null;
+  return !isIdleDispatcher(current === DISPATCHER ? host : current);
+}
+
+/**
+ * Calls `fn` as the component `state` describes: this dispatcher in React's slot, and the one there before put back
+ * after, synchronously. Hooks called after an await in `fn` (an async component's) find whatever's there then.
+ */
+export function callWithHooks<T>(state: HookState, fn: () => T): T {
+  const s = theSlot();
+  const outerState = active;
+  const outerHost = host;
+  active = state;
+  const previous = s?.get();
+  if (previous !== DISPATCHER) host = previous ?? null;
+  s?.set(DISPATCHER);
+  try {
+    return fn();
+  } finally {
+    s?.set(previous);
+    active = outerState;
+    host = outerHost;
+  }
+}
+
+/**
+ * Runs `fn` (Elements' own markup, whose components call no hooks) with the dispatcher of the render the walker runs
+ * inside back in the slot, as if that render ran it: react-dom puts its context back after a render of its own
+ * started inside one of its renders (an exporter's) only when its own dispatcher was there.
+ */
+export function asHost<T>(fn: () => T): T {
+  const s = theSlot();
+  if (!s || s.get() !== DISPATCHER) return fn();
+  s.set(host);
+  try {
+    return fn();
+  } finally {
+    s.set(DISPATCHER);
+  }
+}
+
+/** Whether a React render is under way with this React (its hooks can be called): the app's, or the walker's. */
+export const rendering = (): boolean => (theSlot()?.get() ?? null) !== null;
diff --git a/packages/react/src/engine/errors.ts b/packages/react/src/engine/errors.ts
new file mode 100644
index 00000000..4ca2c2b6
--- /dev/null
+++ b/packages/react/src/engine/errors.ts
@@ -0,0 +1,88 @@
+/**
+ * What a render does when part of a template fails: a component that throws (or is async, or suspends, in a
+ * synchronous render), a Row whose Columns don't fit its layout, an exporter that fails. By default the render
+ * throws a RenderError naming the component and where it is; with `onError: "omit"` (or a function) that part is left
+ * out of the HTML, the plain text and the design alike, and each part left out is a RenderError too, listed.
+ */
+import React from "react";
+import { RenderError, type OnError } from "@unlayer-internal/shared-elements";
+
+export { RenderError, type OnError };
+
+/** Whether a policy leaves failed parts out. */
+export const omits = (policy: OnError | undefined): boolean => policy === "omit" || typeof policy === "function";
+
+/** A part left out under `policy`: said (or given to its function) once. */
+export function reportOmitted(policy: OnError | undefined, error: RenderError): void {
+  if (typeof policy === "function") policy(error);
+  else {
+    const said = `[Unlayer] Left out: ${error.message.replace(/^\[Unlayer\] /, "")}`;
+    const cause = (error as { cause?: unknown }).cause;
+    if (cause === undefined) console.error(said);
+    else console.error(said, cause);
+  }
+}
+
+// ── Where a component is ──
+
+/** A component on the walk's path: its name, its label (`Row 3`, `Hero`, `Paragraph 2`), and the counts of what it renders. */
+export interface Frame {
+  name: string;
+  label: string;
+  parent: Frame | null;
+  counts: Map<string, number> | null;
+}
+
+/** Where a walk starts: the root (`Email`), which positions don't name. */
+export const rootFrame = (name: string): Frame => ({ name, label: name, parent: null, counts: null });
+
+/**
+ * A frame for a `name` its parent renders: Rows and Columns numbered (`Row 3`), others when there's more than one
+ * (`Paragraph 2`). A component rendering one of its own name (a wrapper named like what it wraps) is the same place.
+ */
+export function childFrame(parent: Frame, name: string, numbered = name === "Row" || name === "Column"): Frame {
+  if (parent.name === name && parent.parent) return parent;
+  const counts = (parent.counts ??= new Map());
+  const n = (counts.get(name) ?? 0) + 1;
+  counts.set(name, n);
+  return { name, label: numbered || n > 1 ? `${name} ${n}` : name, parent, counts: null };
+}
+
+/** A frame that isn't counted (markup's, for the position of what it rejects). */
+export const placeFrame = (parent: Frame, name: string): Frame => ({ name, label: name, parent, counts: null });
+
+export function positionOf(frame: Frame | null): string {
+  const labels: string[] = [];
+  for (let f = frame; f && f.parent; f = f.parent) labels.unshift(f.label);
+  return labels.join(" › ");
+}
+
+// ── Names and messages ──
+
+const MEMO = Symbol.for("react.memo");
+const FORWARD_REF = Symbol.for("react.forward_ref");
+
+export function nameOf(type: any): string {
+  if (typeof type === "string") return type;
+  if (!type) return "Unknown";
+  if (type.$$typeof === MEMO) return type.displayName || nameOf(type.type);
+  if (type.$$typeof === FORWARD_REF) return type.displayName || type.render?.displayName || type.render?.name || "ForwardRef";
+  return type.displayName || type.name || "Anonymous";
+}
+
+/**
+ * What React Server Components' React lacks (`useState`, `useContext`, …: Next.js route handlers and Server
+ * Components render with it), said plainly where a template calls one (the runtime's "is not a function").
+ */
+export function serverReactHint(error: unknown): string | undefined {
+  if (!(error instanceof TypeError)) return undefined;
+  const hook = /\b(use[A-Z]\w*|createContext|Component|PureComponent)\)?\s+is not a (function|constructor)/.exec(error.message)?.[1];
+  if (!hook || typeof (React as unknown as Record<string, unknown>)[hook] === "function") return undefined;
+  return `it calls ${hook}, which React Server Components' React doesn't have (Next.js route handlers and Server Components render with it; it has use, useId, useMemo and useCallback): render this template from a Client Component or plain Node.js code, or keep ${hook} out of it`;
+}
+
+/** What a component threw, for the RenderError that names it: its message, or what React Server Components lack. */
+export const threw = (error: unknown): string => (serverReactHint(error) ?? String((error as Error)?.message ?? error)).replace(/^\[Unlayer\] /, "");
+
+export const ASYNC_IN_SYNC =
+  'it is async or suspends, and this renderer is synchronous: render with "@unlayer/react-elements/async", or load its data first and pass it as props';
diff --git a/packages/react/src/engine/fizz-cleanup.d.ts b/packages/react/src/engine/fizz-cleanup.d.ts
new file mode 100644
index 00000000..647e80ec
--- /dev/null
+++ b/packages/react/src/engine/fizz-cleanup.d.ts
@@ -0,0 +1,8 @@
+/**
+ * The package's export that the runtime loading Elements picks (package.json's "exports"): fizz-cleanup.node.ts in
+ * Node, fizz-cleanup.noop.ts elsewhere. Declared, not mapped in tsconfig's `paths`, which esbuild follows from the
+ * built files too, to Node's module in every bundle.
+ */
+declare module "@unlayer/react-elements/fizz-cleanup" {
+  export const cleanUp: () => boolean;
+}
diff --git a/packages/react/src/engine/fizz-cleanup.node.ts b/packages/react/src/engine/fizz-cleanup.node.ts
new file mode 100644
index 00000000..546d3c11
--- /dev/null
+++ b/packages/react/src/engine/fizz-cleanup.node.ts
@@ -0,0 +1,27 @@
+/**
+ * Has react-dom's static renderer (renderToString's and renderToStaticMarkup's) put back what a render of its own left
+ * in contexts' `_currentValue2`: one that failed or suspended inside a provider leaves its value there, which that
+ * renderer puts back when its next render starts. So this renders nothing with it (see `defaultOf` in dispatcher.ts).
+ *
+ * Built on its own, as an ES module and CommonJS (dist/fizz-cleanup.node.js and .cjs), and imported as
+ * `@unlayer/react-elements/fizz-cleanup`, which is this module unless a bundler or runtime names React Server
+ * Components, a browser, a Worker or an edge runtime, where it's fizz-cleanup.noop.ts (package.json's "exports";
+ * Rollup's node-resolve at its defaults names none, bundling a server): bundled for an edge runtime, a Worker or a
+ * browser, react-dom/server is its browser build, and React 19's opens a MessageChannel when it loads, which keeps Node
+ * running; in React Server Components it throws when it loads. In Node, Elements loads react-dom/server anyway
+ * (@unlayer/exporters imports it), so this imports it as any module does: a bundler bundles the app's own copy, and
+ * Vite can run it inlined (a CommonJS file it can't). Deno gets the CommonJS one: its `import` of react-dom/server is
+ * the browser build, its `require` Node's.
+ */
+import * as server from "react-dom/server";
+
+type Server = { renderToStaticMarkup?: (node: null) => string };
+
+/** Whether react-dom's static renderer rendered: false where react-dom/server has no static renderer. */
+export function cleanUp(): boolean {
+  const loaded = server as Server & { default?: Server };
+  const render = loaded.renderToStaticMarkup ?? loaded.default?.renderToStaticMarkup;
+  if (typeof render !== "function") return false;
+  render(null);
+  return true;
+}
diff --git a/packages/react/src/engine/fizz-cleanup.noop.ts b/packages/react/src/engine/fizz-cleanup.noop.ts
new file mode 100644
index 00000000..f6fce19d
--- /dev/null
+++ b/packages/react/src/engine/fizz-cleanup.noop.ts
@@ -0,0 +1,7 @@
+/**
+ * `@unlayer/react-elements/fizz-cleanup` where a bundler or runtime names React Server Components (`react-server`), a
+ * browser, a Worker or an edge runtime (`browser`, `worker`, `workerd`, `edge-light`), and where a bundler doesn't read
+ * package.json's "exports" (webpack 4, Jest before 28: the package's `fizz-cleanup/` folder): react-dom/server isn't
+ * loaded for it (see fizz-cleanup.node.ts), so contexts' values stay as React's renders left them.
+ */
+export const cleanUp = (): boolean => false;
diff --git a/packages/react/src/engine/host.ts b/packages/react/src/engine/host.ts
new file mode 100644
index 00000000..a58dfe6e
--- /dev/null
+++ b/packages/react/src/engine/host.ts
@@ -0,0 +1,224 @@
+/**
+ * Host markup (`<div>`, `<p>`, …) written as react-dom's static render writes it, for the installed React: its
+ * attributes (attributes.ts); void, preformatted and custom elements; a `<select>`'s value marking its `<option>`s, an
+ * `<input>`'s, `<textarea>`'s, `<button>`'s and `<form>`'s own rules; a `<style>`'s, `<script>`'s and `<title>`'s text
+ * (React 18 writes it as any text, escaped; React 19 its one child as it is, but for what would end it). In a <Head>,
+ * a `<style>`'s and `<script>`'s text is written as it is in every React, whatever writes it (but for what would end
+ * it, or what it's in: see `rawText`), and a `<title>`'s children rendered: those tags are the document's head. The
+ * walker writes the markup of a template with it, and the string exporters (src/exporters) the markup of their
+ * blocks.
+ *
+ * Not written as react-dom 19 writes it, on purpose (src/engine/differential.test.tsx lists each): its hoisting (a
+ * `<title>`, `<meta>`, `<link>`, `<style precedence href>` or async `<script>` moved to the start of the markup, and
+ * image preloads added), its document singletons (an `<html>` at the top given a `<head>`), and a form's action that's
+ * a function (a script that runs it). An email's or a page's markup is a part of the document Elements writes, which
+ * has a head of its own (<Head>), and runs no script.
+ */
+import { attribute, customAttribute, escapeText, objectData, unrun } from "./attributes";
+import { REACT_18, REACT_18_2 } from "./react-compat";
+
+export { escapeText };
+
+/**
+ * Where markup is (react-dom's format context): the value of the `<select>` it's in, which marks its `<option>`s;
+ * whether it's in a table, a row or a table's section (whose children start afresh); whether it's a <Head>'s; and in
+ * a <Head>, whether it's the text of a `<style>` or `<script>`, written as it is (`raw`), whether it's under an `<svg>`
+ * or `<math>` (`foreign`), and the elements around it whose content runs to their own end tag (`ends`).
+ */
+export interface Format {
+  selected?: unknown;
+  table?: boolean;
+  head?: boolean;
+  raw?: boolean;
+  foreign?: boolean;
+  ends?: readonly string[];
+}
+export const TOP: Format = {};
+
+/** Where what's in a `type` element is, as react-dom works it out (in a <Head>, as the document's parser reads it). */
+export function childFormat(format: Format, type: string, props: Record<string, any>): Format {
+  const inner = markupFormat(format, type, props);
+  return format.head ? headFormat(format, inner, type) : inner;
+}
+
+function markupFormat(format: Format, type: string, props: Record<string, any>): Format {
+  switch (type) {
+    case "select":
+      return { selected: props.value != null ? props.value : props.defaultValue };
+    case "table":
+    case "thead":
+    case "tbody":
+    case "tfoot":
+    case "colgroup":
+    case "tr":
+      return { table: true };
+    case "svg":
+    case "math":
+    case "foreignObject":
+      return {};
+    case "noscript":
+    case "picture":
+      if (!REACT_18) return {};
+      break;
+  }
+  return format.table ? {} : format;
+}
+
+/** The elements whose content a parser reads to their own end tag (as text: what's in them can't be markup). */
+const TO_END_TAG = new Set(["style", "script", "title", "textarea", "noscript", "noembed", "noframes", "iframe", "xmp"]);
+
+/**
+ * In a <Head>, what's in a `type` element: a `<style>`'s or `<script>`'s content is its text as it is, markup in it
+ * too, to the end of the outermost (`raw`); but under an `<svg>` or `<math>`, where a parser may read it as markup, it's
+ * escaped as any text (`foreign`, to the end of it: what's in their HTML parts too). `ends`: the elements around it,
+ * outermost first, whose content runs to their own end tag, a `<title>`'s, or a `<noscript>`'s where scripts run.
+ */
+function headFormat(format: Format, inner: Format, type: string): Format {
+  if (format.raw) return format;
+  const tag = type.toLowerCase();
+  const foreign = format.foreign || tag === "svg" || tag === "math";
+  return {
+    ...inner,
+    head: true,
+    foreign: foreign || undefined,
+    ends: !foreign && TO_END_TAG.has(tag) ? [...(format.ends ?? []), tag] : format.ends,
+    raw: (!foreign && (type === "style" || type === "script")) || undefined,
+  };
+}
+
+export const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]);
+const VALID_TAG = /^[a-zA-Z][a-zA-Z:_.\-\d]*$/;
+/** SVG's and MathML's elements whose names have a "-", and those react-dom writes its own way: never custom elements. */
+const NOT_CUSTOM = new Set(["annotation-xml", "color-profile", "font-face", "font-face-src", "font-face-uri", "font-face-format", "font-face-name", "missing-glyph", "select", "option", "textarea", "title", "listing", "pre", "html", "menuitem"]);
+/** React 19 writes these after an element's other attributes: a form's, and an input's or a button's form settings. */
+const FIELDS = ["name", "formAction", "formEncType", "formMethod", "formTarget"];
+const LATER: Record<string, string[] | undefined> = REACT_18 ? {} : { form: ["action", "encType", "method", "target"], input: FIELDS, button: FIELDS };
+
+/** What react-dom throws for markup it can't write (the walker says where). */
+export function validateHost(type: string, props: Record<string, any>): void {
+  if (!VALID_TAG.test(type)) throw new Error("Invalid tag: " + type);
+  const html = props.dangerouslySetInnerHTML;
+  const content = props.children != null || html != null;
+  if (VOID.has(type) && content) throw new Error(`${type} is a self-closing tag and must neither have \`children\` nor use \`dangerouslySetInnerHTML\`.`);
+  if (type === "menuitem" && content) throw new Error("menuitems cannot have `children` nor `dangerouslySetInnerHTML`.");
+  if (html != null && (type === "textarea" || (REACT_18_2 && type === "title"))) throw new Error(`\`dangerouslySetInnerHTML\` does not make sense on <${type}>.`);
+  if (props.style != null && typeof props.style !== "object")
+    throw new Error("The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.");
+  if (html != null) {
+    if (props.children != null) throw new Error("Can only set one of `children` or `props.dangerouslySetInnerHTML`.");
+    if (typeof html !== "object" || !("__html" in html)) throw new Error("`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`.");
+  }
+}
+
+/** Whether react-dom writes `type` as a custom element: a name with "-" (in React 18, also one with an `is`). */
+const isCustom = (type: string, props: Record<string, any>) => !VOID.has(type) && !NOT_CUSTOM.has(type) && (type.includes("-") || (REACT_18 && typeof props.is === "string"));
+
+/**
+ * `<type …>` with its attributes as react-dom writes them: an `<input>`'s `checked` and `value` last, an `<option>`'s
+ * `selected` last (where the `<select>` it's in has a value, whether that's its value), React 19's form settings after
+ * the rest, and none for what an element holds as its content (a `<textarea>`'s value) or gives its options (a
+ * `<select>`'s).
+ */
+export function openTag(type: string, props: Record<string, any>, format: Format = TOP): string {
+  const custom = isCustom(type, props);
+  const later = LATER[type];
+  let open = "<" + type;
+  for (const key in props) {
+    if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+    const value = props[key];
+    if (value == null || key === "children" || key === "dangerouslySetInnerHTML" || later?.includes(key)) continue;
+    if (custom) open += customAttribute(key, value);
+    else if (type === "input" ? /^(value|defaultValue|checked|defaultChecked)$/.test(key) : type === "select" || type === "textarea" ? key === "value" || key === "defaultValue" : type === "option" && key === "selected") continue;
+    // A link to nowhere is written (React 19 leaves out other empty URLs).
+    else if (value === "" && key === "href" && type === "a") open += ' href=""';
+    // (An <object>'s `data` is a URL: React 18 writes it as text, a `javascript:` one as React 19 does.)
+    else open += type === "object" && key === "data" ? (REACT_18 ? attribute(key, unrun(value)) : objectData(value)) : attribute(key, value);
+  }
+  if (later) for (const key of later) if (props[key] != null) open += attribute(key, props[key]);
+  if (type === "input") {
+    const checked = props.checked != null ? props.checked : props.defaultChecked;
+    if (checked && typeof checked !== "function" && typeof checked !== "symbol") open += ' checked=""';
+    const value = props.value != null ? props.value : props.defaultValue;
+    if (value != null) open += attribute("value", value);
+  }
+  if (type === "option" && selects(format.selected, props)) open += ' selected=""';
+  return VOID.has(type) ? open + "/>" : open + ">";
+}
+
+/** Whether an `<option>` is selected: where its `<select>` has a value, whether that's its value (or one of them), else its `selected`. */
+function selects(selected: unknown, props: Record<string, any>): boolean {
+  if (selected == null) return !!props.selected;
+  const value = props.value != null ? "" + props.value : optionText(props.children);
+  return Array.isArray(selected) ? selected.some((v) => "" + v === value) : "" + selected === value;
+}
+
+/** An option's value where it has none, as react-dom reads it: its children's text, joined (an element's is `[object Object]`). */
+function optionText(children: unknown): string {
+  let text = "";
+  const add = (child: any): void => {
+    if (child == null || typeof child === "boolean" || typeof child === "function" || typeof child === "symbol" || (REACT_18 && typeof child === "bigint")) return;
+    if (Array.isArray(child)) child.forEach(add);
+    else text += child;
+  };
+  add(children);
+  return text;
+}
+
+/**
+ * What's in the element when its props say it (`dangerouslySetInnerHTML`, a `<textarea>`'s value, React 19's text of a
+ * `<style>`, `<script>` or `<title>`), else undefined: its children are walked. react-dom starts a `<pre>`,
+ * `<textarea>` or `<listing>` whose text starts with a newline with one more (the parser drops it).
+ */
+export function propsBody(type: string, props: Record<string, any>, format: Format = TOP): string | undefined {
+  const html = props.dangerouslySetInnerHTML;
+  if (type === "textarea") return textareaText(props);
+  if (html != null) {
+    const given = html.__html;
+    const body = given == null ? "" : "" + given;
+    return (type === "pre" || type === "listing") && typeof given === "string" && given[0] === "\n" ? "\n" + body : body;
+  }
+  if (type === "menuitem") return "";
+  if (REACT_18 || format.head || !/^(style|script|title)$/.test(type)) return undefined;
+  // React 19: a script's text if it's a string; a style's or a title's one child (none for more than one).
+  const children = props.children;
+  if (type === "script") return typeof children === "string" ? escapeScript(children) : "";
+  const child = Array.isArray(children) ? (children.length < 2 ? children[0] : null) : children;
+  if (child == null || typeof child === "function" || typeof child === "symbol") return "";
+  return type === "style" ? escapeStyle("" + child) : escapeText("" + child);
+}
+
+/** A `<textarea>`'s text: its value, else its default value, else its one child. */
+function textareaText(props: Record<string, any>): string {
+  let value = props.value != null ? props.value : props.defaultValue;
+  const children = props.children;
+  if (children != null) {
+    if (value != null) throw new Error("If you supply `defaultValue` on a <textarea>, do not pass children.");
+    if (Array.isArray(children) && children.length > 1) throw new Error("<textarea> can only have at most one child.");
+    value = "" + children;
+  }
+  return value == null ? "" : (typeof value === "string" && value[0] === "\n" ? "\n" : "") + escapeText("" + value);
+}
+
+/** The newline react-dom adds before a `<pre>`'s or `<listing>`'s text children that start with one. */
+export const leadingNewline = (type: string, children: unknown): string => ((type === "pre" || type === "listing") && typeof children === "string" && children[0] === "\n" ? "\n" : "");
+
+/** A `<style>`'s text as React 19 writes it: what would end one (`</style`) or start one escaped, as CSS reads it. */
+export const escapeStyle = (text: string) => text.replace(/(<\/|<)(s)(tyle)/gi, (_, before: string, s: string, after: string) => before + (s === "s" ? "\\73 " : "\\53 ") + after);
+/** A `<script>`'s text as React 19 writes it: what would end one (`</script`) or start one escaped, as JavaScript reads it. */
+export const escapeScript = (text: string) => text.replace(/(<\/|<)(s)(cript)/gi, (_, before: string, s: string, after: string) => before + (s === "s" ? "\\u0073" : "\\u0053") + after);
+/**
+ * A <Head>'s `<style>`'s or `<script>`'s text (`type`), written as it is, whatever wrote it: what would end it escaped,
+ * as React 19 escapes it, and the end tag of each element it's in that runs to one (`ends`: a `<noscript>`'s, a
+ * `<title>`'s), its first letter escaped as CSS or JavaScript reads it (`</\6e oscript`, `</\u006eoscript`).
+ */
+export function rawText(type: string, text: string, ends: readonly string[] = []): string {
+  let out = type === "style" ? escapeStyle(text) : escapeScript(text);
+  for (const end of ends) {
+    if (end === type) continue;
+    out = out.replace(new RegExp(`</(${end[0]})(?=${end.slice(1)})`, "gi"), (_, first: string) => {
+      const hex = first.charCodeAt(0).toString(16);
+      return "</" + (type === "style" ? `\\${hex} ` : `\\u${hex.padStart(4, "0")}`);
+    });
+  }
+  return out;
+}
diff --git a/packages/react/src/engine/index.ts b/packages/react/src/engine/index.ts
new file mode 100644
index 00000000..318e4148
--- /dev/null
+++ b/packages/react/src/engine/index.ts
@@ -0,0 +1,203 @@
+/**
+ * The engine's entry points: a template's content collected (its Rows, Columns and blocks recorded, see
+ * utils/record.tsx, as a tree of its records, markup and text), synchronously or waiting for what's async in it;
+ * markup rendered (Elements' own components: the root's HTML); one component called with hooks (a template wrapper).
+ * See ARCHITECTURE.md.
+ */
+import React, { cloneElement } from "react";
+import { asHost, type ContextStack, type Fallbacks, type HookState } from "./dispatcher";
+import { childFrame, nameOf, omits, positionOf, RenderError, rootFrame, threw, type OnError } from "./errors";
+import { flatten, type Flat, type Part } from "./output";
+import { checkReact } from "./self-test";
+import { pushTreeContext, ROOT_TREE, type TreeContext } from "./tree-id";
+import { TOP } from "./host";
+import { call, caller, failure, positioned, renderClass, sharedNow, sharing, suspension, thrownBy, walkNode, type Collector, type Shared, type Task, type Wait, type Walker } from "./walk";
+
+export { RenderError, type OnError } from "./errors";
+export { flatten, htmlOf, PENDING, type Flat, type Item, type Markup, type Cut, type Part, type RecordItem } from "./output";
+export { errorPart, passesThrough, sharing, type Task, type Wait } from "./walk";
+export { track } from "./dispatcher";
+export type { TreeContext } from "./tree-id";
+export type { Collector, Recorded, Shared } from "./walk";
+
+export interface CollectOptions {
+  collector: Collector;
+  onError?: OnError;
+  /** The root's name (Email, Page, …): where positions start. */
+  root: string;
+  /** Where the content is in the tree (after the template wrappers called to reach the root: see call()). */
+  tree?: TreeContext;
+  /** Errors passed on as they are. */
+  passes?: (error: unknown) => boolean;
+  /** Components that are no place of their own in positions. */
+  frameless?: (type: unknown) => boolean;
+  /** What the `useId()`s start with (React's `identifierPrefix`). */
+  idPrefix?: string;
+  /** What the render reads for contexts no provider gives, its template's wrappers' (see unwrap-root.ts). */
+  fallbacks?: Fallbacks;
+  /** What the render's components share (see Shared): the render's own, the same in each walk of it. */
+  shared?: Shared;
+}
+
+type WalkerOptions = Pick<CollectOptions, "onError" | "collector" | "passes" | "frameless" | "idPrefix" | "fallbacks" | "shared">;
+
+const walker = (options: Partial<WalkerOptions>, wait?: Wait): Walker => ({
+  // (What it walks once something it waited for settles shares what the rest of it does: a Consumer's render prop.)
+  wait: wait && ((w, task, out, thenable, fill) => wait(w, task, out, thenable, (t, parts) => sharing(w.shared, () => fill(t, parts)))),
+  collector: options.collector,
+  passes: options.passes,
+  frameless: options.frameless,
+  idPrefix: options.idPrefix,
+  fallbacks: options.fallbacks ?? renderFallbacks(),
+  // (A walk of no render of its own, Elements' own markup, shares the one calling it.)
+  shared: options.shared ?? sharedNow() ?? {},
+  omit: omits(options.onError),
+  suspense: 0,
+  made: new WeakSet(),
+  fatal: new WeakSet(),
+});
+
+/**
+ * What a render reads for contexts no provider gives: the walk's calling it (see `caller`), so one value each in a
+ * top-level render however many it starts, else its own.
+ */
+export const renderFallbacks = (): Fallbacks => caller()?.fallbacks ?? new Map();
+
+/**
+ * What the component or template wrapper being called shares with the rest of its render (see Shared), or undefined
+ * where none is: outside such a call (React rendering a component, code of the user's own outside a render, an async
+ * component's code after an `await`).
+ */
+export const renderShared = (): Shared | undefined => sharedNow();
+
+/** Where a walk starts: where the component that started it is, if the walker is calling one (see `caller`). */
+const task = (root: string, tree?: TreeContext): Task => ({ tree: tree ?? caller()?.tree ?? ROOT_TREE, contexts: caller()?.contexts ?? null, format: TOP, frame: rootFrame(root), watch: null });
+
+/** `node` collected synchronously: what's async in it fails (or is left out, as `onError` says). */
+export function collect(node: React.ReactNode, options: CollectOptions): Flat {
+  checkReact();
+  const w = walker(options);
+  const t = task(options.root, options.tree);
+  const out: Part[] = [];
+  try {
+    sharing(w.shared, () => walkNode(w, node, t, out));
+  } catch (error) {
+    throw thrownBy(w, error, t.frame);
+  }
+  return flatten(out, w.omit) as Flat;
+}
+
+/**
+ * `node` walked to collect it, waiting where `wait` says (the async renderers' holes: see src/async/collect.ts), its
+ * output as it is then (holes in it), and whether failed parts are left out: flattened once its holes settle.
+ */
+export function walkAsync(node: React.ReactNode, options: CollectOptions, wait: Wait): { parts: Part[]; omit: boolean } {
+  checkReact();
+  const w = walker(options, wait);
+  const t = task(options.root, options.tree);
+  const out: Part[] = [];
+  try {
+    sharing(w.shared, () => walkNode(w, node, t, out));
+  } catch (error) {
+    out.push({ t: "error", error: thrownBy(w, error, t.frame) as RenderError, fatal: true });
+  }
+  return { parts: out, omit: w.omit };
+}
+
+let own = 0;
+/** Whether Elements' own markup is rendering (see renderStatic): a root reads no context of the render around it. */
+export const ownMarkup = (): boolean => own > 0;
+
+/**
+ * Markup of Elements' own (a root's, a row's) as react-dom's static render writes it: `bare` components (Elements',
+ * which call no hooks) are called with the dispatcher of the render around it in the slot, as that render would call
+ * them (see asHost); others with hooks. A RenderError in it passes as it is.
+ */
+export function renderStatic(node: React.ReactNode, options: { bare?: (type: unknown) => boolean; passes?: (error: unknown) => boolean; idPrefix?: string } = {}): string {
+  checkReact();
+  const w: Walker = { ...walker(options), passAll: true, bare: options.bare };
+  const out: Part[] = [];
+  own++;
+  try {
+    asHost(() => walkNode(w, node, task(""), out));
+  } finally {
+    own--;
+  }
+  return out.join("");
+}
+
+/**
+ * An element of one of Elements' own components (`bare`: a root, a Row, a block, which call no hooks), with `given`
+ * props, as renderStatic renders it, but the HTML it renders in its `<div dangerouslySetInnerHTML>` given as it is
+ * (`inner`): what renderStatic would write, without writing it out again; a root's Body called in turn, as
+ * renderStatic calls it. Where it isn't one, or doesn't render such a `<div>` in the end, `html` is renderStatic's.
+ */
+export function renderOwn(node: React.ReactElement, given: Record<string, unknown>, options: { bare?: (type: unknown) => boolean; passes?: (error: unknown) => boolean } = {}): { html: string; inner?: string } {
+  const bare = options.bare;
+  const type = node.type;
+  if (typeof type !== "function" || !bare?.(type)) return { html: renderStatic(cloneElement(node, given), options) };
+  const props = { ...(node.props as object), ...given };
+  checkReact();
+  own++;
+  try {
+    return asHost(() => {
+      let frame = rootFrame("");
+      let element: any = { type, props };
+      for (;;) {
+        const name = nameOf(element.type);
+        frame = childFrame(frame, name);
+        let result: any;
+        try {
+          result = element.type(element.props);
+        } catch (error) {
+          if (error instanceof RenderError || options.passes?.(error)) throw error;
+          throw new RenderError(threw(error), name, positionOf(frame), error);
+        }
+        const html = result?.type === "div" && Object.keys(result.props).length === 1 ? result.props.dangerouslySetInnerHTML : undefined;
+        if (html && typeof html === "object" && "__html" in html) return { html: "", inner: html.__html == null ? "" : "" + html.__html };
+        if (typeof result?.type !== "function" || !bare(result.type)) return { html: renderStatic(result, options) };
+        element = result;
+      }
+    });
+  } finally {
+    own--;
+  }
+}
+
+/**
+ * A template wrapper (`<Welcome />`, which returns the root) called with hooks: what it returns (an async one's
+ * promise as it is), and where what it returns is in the tree. What it suspends on (`use()` of a pending promise, or a
+ * thrown one: React 18's Suspense) is thrown as it is, for its caller to call it again once it settles (see
+ * utils/unwrap-root.ts): `state` (hookState(), at the wrapper's place and inside the providers around it) is kept.
+ */
+export function callComponent(fn: (props: any, second?: unknown) => unknown, props: Record<string, unknown>, second: unknown, state: HookState): { value: unknown; tree: TreeContext } {
+  checkReact();
+  let value: unknown;
+  try {
+    value = call(state, fn, props, second);
+  } catch (thrown) {
+    const thenable = suspension(thrown, state);
+    if (thenable) {
+      state.hooks = undefined;
+      throw thenable;
+    }
+    throw positioned(walker({}), failure(thrown), state.name, rootFrame(state.name));
+  }
+  return { value, tree: state.localId > 0 ? pushTreeContext(state.tree, 1, 0) : state.tree };
+}
+
+/** A template wrapper that's a class (react-intl's <IntlProvider>), constructed and rendered inside `contexts`: as callComponent. */
+export function callClass(Ctor: any, props: Record<string, unknown>, contexts: ContextStack | null, fallbacks?: Fallbacks): unknown {
+  checkReact();
+  try {
+    return renderClass(Ctor, props, contexts, fallbacks);
+  } catch (thrown) {
+    const thenable = suspension(thrown);
+    if (thenable) throw thenable;
+    const name = nameOf(Ctor);
+    throw positioned(walker({}), failure(thrown), name, rootFrame(name));
+  }
+}
+
+export { hookState, readContext, contextOf, type ContextStack, type Fallbacks, type HookState } from "./dispatcher";
+export { ROOT_TREE } from "./tree-id";
diff --git a/packages/react/src/engine/keys.ts b/packages/react/src/engine/keys.ts
new file mode 100644
index 00000000..f26faece
--- /dev/null
+++ b/packages/react/src/engine/keys.ts
@@ -0,0 +1,51 @@
+/**
+ * React's development warnings for keys in lists, which its renderer gave and the walker, rendering instead of it,
+ * gives too: an element of a list without a `key`, and two with the same one. Development builds only (their elements
+ * carry `_store`: React marks the children it validated there), each once per component.
+ */
+import { createElement } from "react";
+
+/** What's been said, each once: a hundred at most, as a list's keys can come from data (then once that no more are). */
+const said = new Set<string>();
+
+function warnOnce(key: string, message: string): void {
+  if (said.has(key) || said.size > 100) return;
+  said.add(key);
+  console.error(said.size > 100 ? "[Unlayer] More warnings about keys in lists aren't said." : message);
+}
+
+type DevElement = { $$typeof?: unknown; key: string | null; _store?: { validated?: unknown } };
+
+/** Whether React is its development build, whose elements carry `_store` (its production build checks no keys). */
+const DEVELOPMENT = "_store" in createElement("i");
+
+/** Lists Elements made of the template's (already checked, as the template wrote them), which aren't checked again. */
+const made = new WeakSet<object>();
+export const checked = <T extends object>(list: T): T => (DEVELOPMENT && made.add(list), list);
+
+/**
+ * Checks a list of children (`items.map(…)`) the way React's renderer does, for the component `owner` renders it in.
+ * React marks the elements it validated (`_store.validated`: 1, static children and ones it warned for; 2, ones
+ * React.Children gave keys to that it still warns for), which the walker reads and marks the same way.
+ */
+export function checkKeys(list: readonly unknown[], owner: string): void {
+  if (!DEVELOPMENT || made.has(list)) return;
+  let keys: Set<string> | undefined;
+  for (const child of list) {
+    const element = child as DevElement | null;
+    // Only React's elements in a development build (`_store`).
+    if (!element || typeof element !== "object" || !element._store) continue;
+    const validated = element._store.validated;
+    if ((!validated && element.key == null) || validated === 2) {
+      try {
+        element._store.validated = 1;
+      } catch {
+        // A frozen store: said once anyway.
+      }
+      warnOnce(`missing:${owner}`, `[Unlayer] Each child in a list should have a unique "key" prop (in the list <${owner}> renders). See https://react.dev/link/warning-keys.`);
+    } else if (element.key != null) {
+      if ((keys ??= new Set()).has(element.key)) warnOnce(`duplicate:${owner}:${element.key}`, `[Unlayer] Two children in a list have the same key, "${element.key}" (in the list <${owner}> renders): keys should be unique.`);
+      else keys.add(element.key);
+    }
+  }
+}
diff --git a/packages/react/src/engine/output.ts b/packages/react/src/engine/output.ts
new file mode 100644
index 00000000..580630d0
--- /dev/null
+++ b/packages/react/src/engine/output.ts
@@ -0,0 +1,171 @@
+/**
+ * A walk's output: text (escaped, as written), markup, records, and where it isn't settled yet or can fail, parts that
+ * say so. A hole is what a component that suspended renders once its promise settles (the walk goes on with its
+ * siblings meanwhile, so their promises start at once); a boundary is a part of the template that's left out when it
+ * fails (`onError: "omit"`); an error is where one failed. Flattening reads them in tree order, whenever they settle:
+ * so the content, the order of the records and the error a render throws are the same whatever settles first.
+ *
+ * A collecting walk's flattened output is the template's content as a tree (`Item`): its text, the markup it wrote
+ * whole, the markup a record is in (`<p>Hello <Name /></p>`: "cut" by it), and its records with what's inside them.
+ */
+import type { RenderError } from "./errors";
+import { rawText } from "./host";
+
+export interface HostPart {
+  t: "host";
+  tag: string;
+  /** Its start and end tags, as written (no end tag for a void element). */
+  open: string;
+  close: string;
+  parts: Part[];
+  /**
+   * Its content is text written as it is, whatever made it (a <Head>'s `<style>` or `<script>`: see host.ts), but for
+   * what would end it, or the elements it's in whose content runs to their end tag (`ends`).
+   */
+  raw?: boolean;
+  ends?: readonly string[];
+}
+export interface RecordPart {
+  t: "record";
+  record: object;
+  parts: Part[];
+  /** It writes nothing: in the records, not in the content; what's inside it is its record's own (`content`: a <Head>'s tags). */
+  quiet?: boolean;
+}
+export interface Hole {
+  t: "hole";
+  parts: Part[];
+  settled: boolean;
+}
+export interface BoundaryPart {
+  t: "boundary";
+  parts: Part[];
+}
+export interface ErrorPart {
+  t: "error";
+  error: RenderError;
+  /** A template that isn't one (an undefined component, an object as a child): never left out. */
+  fatal: boolean;
+}
+export type Part = string | HostPart | RecordPart | Hole | BoundaryPart | ErrorPart;
+
+/** Markup written whole: no record in it. `inner` is what's between its tags (none for a void element). */
+export interface Markup {
+  kind: "markup";
+  tag: string;
+  html: string;
+  inner?: string;
+}
+/** Markup a record is in, so it's cut where the record is. */
+export interface Cut {
+  kind: "cut";
+  tag: string;
+  open: string;
+  close: string;
+  items: Item[];
+}
+export interface RecordItem {
+  kind: "record";
+  record: object;
+  items: Item[];
+}
+/** The content: text (a string, escaped as written), markup, and records. */
+export type Item = string | Markup | Cut | RecordItem;
+
+export const PENDING = Symbol("pending");
+
+export interface Flat {
+  content: Item[];
+  /** The records, in tree order (quiet ones too). */
+  recorded: object[];
+  /** The parts left out (`onError: "omit"`), in tree order. */
+  omitted: RenderError[];
+}
+
+/** The HTML of content. */
+export function htmlOf(items: readonly Item[]): string {
+  let html = "";
+  for (const item of items) html += typeof item === "string" ? item : item.kind === "markup" ? item.html : item.kind === "cut" ? item.open + htmlOf(item.items) + item.close : htmlOf(item.items);
+  return html;
+}
+
+/** Content added to `into`, text joined to the text before it, as it's written. */
+function add(into: Item[], item: Item): void {
+  const last = into.length - 1;
+  if (typeof item === "string" && typeof into[last] === "string") into[last] += item;
+  else into.push(item);
+}
+
+/** Where a resolution's records and left-out parts go (a boundary's own, until it's resolved), and the policy. */
+interface Found {
+  recorded: object[];
+  omitted: RenderError[];
+  omit: boolean;
+}
+
+/** Parts in tree order as content; the first error that isn't left out, or PENDING before an unsettled hole. */
+function resolve(parts: Part[], into: Item[], found: Found): ErrorPart | typeof PENDING | undefined {
+  for (const part of parts) {
+    if (typeof part === "string") {
+      if (part) add(into, part);
+      continue;
+    }
+    switch (part.t) {
+      case "host": {
+        const inside: Item[] = [];
+        const stop = resolve(part.parts, inside, found);
+        if (stop) return stop;
+        // (A raw one's text is written whole, whatever made it: what its components recorded is in the records.)
+        if (part.raw || inside.every((item) => typeof item === "string" || item.kind === "markup")) {
+          const inner = part.raw ? rawText(part.tag, htmlOf(inside), part.ends) : htmlOf(inside);
+          into.push({ kind: "markup", tag: part.tag, html: part.open + inner + part.close, inner: part.close ? inner : undefined });
+        } else into.push({ kind: "cut", tag: part.tag, open: part.open, close: part.close, items: inside });
+        break;
+      }
+      case "record": {
+        found.recorded.push(part.record);
+        const inside: Item[] = [];
+        const stop = resolve(part.parts, inside, found);
+        if (stop) return stop;
+        if (!part.quiet) into.push({ kind: "record", record: part.record, items: inside });
+        else (part.record as { content?: Item[] }).content = inside;
+        break;
+      }
+      case "hole": {
+        if (!part.settled) return PENDING;
+        const stop = resolve(part.parts, into, found);
+        if (stop) return stop;
+        break;
+      }
+      case "boundary": {
+        const own: Item[] = [];
+        const ownFound: Found = { recorded: [], omitted: [], omit: found.omit };
+        const stop = resolve(part.parts, own, ownFound);
+        if (stop === PENDING) return PENDING;
+        if (stop) {
+          // Left out whole: what it recorded too (its head tags, its scopes).
+          if (found.omit && !stop.fatal) found.omitted.push(stop.error);
+          else return stop;
+        } else {
+          for (const item of own) add(into, item);
+          for (const record of ownFound.recorded) found.recorded.push(record);
+          for (const error of ownFound.omitted) found.omitted.push(error);
+        }
+        break;
+      }
+      default:
+        return part;
+    }
+  }
+  return undefined;
+}
+
+/** The output as content, its records in tree order; PENDING while a hole before any error is open. */
+export function flatten(parts: Part[], omit: boolean): Flat | typeof PENDING {
+  const content: Item[] = [];
+  const found: Found = { recorded: [], omitted: [], omit };
+  const stop = resolve(parts, content, found);
+  if (stop === PENDING) return PENDING;
+  if (stop) throw stop.error;
+  return { content, recorded: found.recorded, omitted: found.omitted };
+}
diff --git a/packages/react/src/engine/react-compat.test.ts b/packages/react/src/engine/react-compat.test.ts
new file mode 100644
index 00000000..35e03a29
--- /dev/null
+++ b/packages/react/src/engine/react-compat.test.ts
@@ -0,0 +1,54 @@
+// @vitest-environment node
+/**
+ * The React versions the walker knows, and the check that the installed one has what it relies on: CI runs this on
+ * each version in the table (see .github/workflows/react-versions.yml), and weekly on React's canary.
+ */
+import { describe, expect, it } from "vitest";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ID_PATTERN, KNOWN_REACT, reactRow, slotOf } from "./react-compat";
+import { checkReact, probe, untested } from "./self-test";
+
+describe("the React compat table", () => {
+  it("has the installed React's minor, or (a newer one) the nearest one before it", () => {
+    const { row, known } = reactRow();
+    const newest = KNOWN_REACT[KNOWN_REACT.length - 1];
+    const newer = Number.parseFloat(React.version) > Number.parseFloat(newest.react);
+    // A version the table should have (one before its newest) is in it; a newer one renders if the self-check passes.
+    if (!newer) expect(known, `React ${React.version} isn't in the table: add its row`).toBe(true);
+    if (known) expect(React.version.startsWith(row.react + ".")).toBe(true);
+    else expect(row).toBe(newest);
+    expect(reactRow("19.2.4").row.react).toBe("19.2");
+    expect(reactRow("19.9.0")).toEqual({ row: KNOWN_REACT[KNOWN_REACT.length - 1], known: false });
+    expect(reactRow("20.0.0-canary-abc").known).toBe(false);
+    // React 18's every minor (the peer range's), 18.0.0 with its build in its version.
+    for (const v of ["18.0.0-fc46dba67-20220329", "18.1.0", "18.2.0", "18.3.1"]) expect(reactRow(v), v).toMatchObject({ row: { react: v.slice(0, 4) }, known: true });
+    expect(reactRow("17.0.2")).toEqual({ row: KNOWN_REACT[0], known: false, older: true });
+  });
+
+  it("says a React it isn't tested with is newer, or older, than those it is", () => {
+    expect(untested("19.9.0")).toBe(`[Unlayer] React 19.9.0 is newer than the versions Elements is tested with (18.0–19.3); it passed Elements' check of the React it relies on.`);
+    expect(untested("17.0.2")).toMatch(/^\[Unlayer\] React 17\.0\.2 is older than the versions Elements is tested with \(18\.0–/);
+  });
+
+  it("gives useId's format as the installed react-dom/server writes it", () => {
+    const ids: string[] = [];
+    const Probe = () => (ids.push(React.useId(), React.useId()), null);
+    renderToStaticMarkup(React.createElement(React.Fragment, null, React.createElement(Probe), React.createElement(Probe)));
+    for (const id of ids) expect(id).toMatch(ID_PATTERN[reactRow().row.id]);
+  });
+
+  it("passes the self-check on the installed React", () => {
+    expect(() => checkReact()).not.toThrow();
+    expect(probe(reactRow().row)).toBeUndefined();
+  });
+
+  it("names what a React without the shapes it relies on lacks", () => {
+    const { row } = reactRow();
+    expect(slotOf({}, row.slots)).toBeNull();
+    expect(probe(row, {}, null)).toBe(`its hooks dispatcher isn't at ${row.slots.join(" or ")}`);
+    // A dispatcher slot that doesn't reach the walker's hooks.
+    const deaf = { get: () => null, set: () => {}, path: "fake.H" };
+    expect(probe(row, React, deaf)).toBe("the dispatcher didn't install at fake.H");
+  });
+});
diff --git a/packages/react/src/engine/react-compat.ts b/packages/react/src/engine/react-compat.ts
new file mode 100644
index 00000000..c4067017
--- /dev/null
+++ b/packages/react/src/engine/react-compat.ts
@@ -0,0 +1,103 @@
+/**
+ * What the walker relies on in React, per minor version it's tested with (CI runs the suite on each: see
+ * .github/workflows/react-versions.yml). A version that isn't here takes the row of the nearest one before it; the
+ * self-test (self-test.ts) checks this React has those shapes before the first render, so an unknown version that
+ * differs fails with a named error instead of rendering wrong.
+ *
+ * | React     | dispatcher slot (client · react-server build)                                | useId   | context  | suspends by     |
+ * |-----------|------------------------------------------------------------------------------|---------|----------|-----------------|
+ * | 18.0–18.3 | __SECRET_INTERNALS….ReactCurrentDispatcher.current · (no react-server build) | `:R1:`  | provider | thrown promises |
+ * | 19.0      | __CLIENT_INTERNALS….H · __SERVER_INTERNALS….H                                | `:R1:`  | context  | use(), thrown   |
+ * | 19.1      | same                                                                         | `«R1»`  | context  | use(), thrown   |
+ * | 19.2      | same                                                                         | `_R_1_` | context  | use(), thrown   |
+ * | 19.3      | same                                                                         | `_R_1_` | context  | use(), thrown   |
+ *
+ * Context: "provider", React 18's (`Ctx.Provider` is `{ $$typeof: react.provider, _context }`; `Ctx.Consumer` the
+ * context itself, or in development `{ $$typeof: react.context, _context }`); "context", React 19's (`<Ctx>` is the
+ * provider, `Ctx.Provider === Ctx`; `Ctx.Consumer` is `{ $$typeof: react.consumer, _context }`). `use()` (19) marks a
+ * thenable with `status` and `value`/`reason`, which the walker reads and sets as React does. The react-server build
+ * (Next.js's Server Components and route handlers) has no `createContext`, `useState`, `useContext`, `useEffect`, …:
+ * only `use`, `useId`, `useMemo`, `useCallback` and `useDebugValue`.
+ *
+ * Errors: the walker throws its own for what React's server renderer rejects (an object as a child, React's #31; an
+ * invalid element type, #130; portals), and never reads React's messages.
+ */
+import React from "react";
+
+export type IdFormat = "colon" | "guillemet" | "underscore";
+export type ContextShape = "provider" | "context";
+
+export interface ReactRow {
+  /** major.minor */
+  react: string;
+  /** The dispatcher slot's path, per build. */
+  slots: string[];
+  id: IdFormat;
+  context: ContextShape;
+  /** Whether it has `use()`. */
+  use: boolean;
+}
+
+const LEGACY = "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current";
+const CLIENT = "__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.H";
+const SERVER = "__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.H";
+
+export const KNOWN_REACT: readonly ReactRow[] = [
+  // React 18's minors are all the same to it.
+  ...["18.0", "18.1", "18.2", "18.3"].map((react): ReactRow => ({ react, slots: [LEGACY], id: "colon", context: "provider", use: false })),
+  { react: "19.0", slots: [CLIENT, SERVER], id: "colon", context: "context", use: true },
+  { react: "19.1", slots: [CLIENT, SERVER], id: "guillemet", context: "context", use: true },
+  { react: "19.2", slots: [CLIENT, SERVER], id: "underscore", context: "context", use: true },
+  { react: "19.3", slots: [CLIENT, SERVER], id: "underscore", context: "context", use: true },
+];
+
+/** What a useId the walker gives looks like, per format (no identifierPrefix). */
+export const ID_PATTERN: Record<IdFormat, RegExp> = {
+  colon: /^:R[0-9a-v]+(H[0-9a-v]+)?:$/,
+  guillemet: /^«R[0-9a-v]+(H[0-9a-v]+)?»$/,
+  underscore: /^_R_[0-9a-v]+(H[0-9a-v]+)?_$/,
+};
+
+const version = (v: string) => v.split(/[.-]/).slice(0, 2).map((n) => Number.parseInt(n, 10) || 0);
+
+const [MAJOR, MINOR] = version(String(React.version));
+/** React 18 renders some elements, attributes, styles and children otherwise than React 19 (see walk.ts, attributes.ts). */
+export const REACT_18 = MAJOR < 19;
+/** React 18.2 and 18.3 reject a `<title>`'s `dangerouslySetInnerHTML` (18.0, 18.1 and 19 write it). */
+export const REACT_18_2 = MAJOR === 18 && MINOR >= 2;
+/** React 19.3 added `credentialless` to its boolean attributes and `maskType` to its SVG attributes. */
+export const REACT_19_3 = MAJOR > 19 || (MAJOR === 19 && MINOR >= 3);
+
+/** The installed React's row: its own, else the nearest before it (`known: false`), or for one older than all, the first. */
+export function reactRow(v: string = React.version): { row: ReactRow; known: boolean; older?: boolean } {
+  const [major, minor] = version(v);
+  const exact = KNOWN_REACT.find((r) => r.react === `${major}.${minor}`);
+  if (exact) return { row: exact, known: true };
+  const before = [...KNOWN_REACT].reverse().find((r) => {
+    const [m, n] = version(r.react);
+    return m < major || (m === major && n <= minor);
+  });
+  return before ? { row: before, known: false } : { row: KNOWN_REACT[0], known: false, older: true };
+}
+
+let row: ReactRow | undefined;
+export const idFormat = (): IdFormat => (row ??= reactRow().row).id;
+
+/** React's dispatcher slot: where its hooks read the dispatcher from. */
+export interface Slot {
+  get(): unknown;
+  set(dispatcher: unknown): void;
+  path: string;
+}
+
+/** The slot of `R` (the React Elements imports, the template's: `react` is a peer dependency), by the table's paths. */
+export function slotOf(R: object = React, paths: string[] = (row ??= reactRow().row).slots): Slot | null {
+  for (const path of paths) {
+    const keys = path.split(".");
+    const field = keys.pop()!;
+    let holder: any = R;
+    for (const key of keys) holder = holder?.[key];
+    if (holder && typeof holder === "object" && field in holder) return { get: () => holder[field], set: (d) => void (holder[field] = d), path };
+  }
+  return null;
+}
diff --git a/packages/react/src/engine/records.ts b/packages/react/src/engine/records.ts
new file mode 100644
index 00000000..2ad12e99
--- /dev/null
+++ b/packages/react/src/engine/records.ts
@@ -0,0 +1,32 @@
+/**
+ * What a collecting walk's collector gives the walker to walk in place of an element it records (see
+ * utils/record.tsx): a record, whose children (a Row's Columns, a rich text block's markup) are walked inside it, or
+ * which writes nothing (`quiet`: a <Head>'s entry, whose children are its own content, its tags); and a boundary around
+ * a component of the template's own, the part left out when it fails (`onError: "omit"`).
+ *
+ * They're the walker's own nodes, never React's: what's walked inside a record is that record's content in the walk's
+ * output (output.ts), so the template comes out as a tree of its records, its markup and its text.
+ */
+import type React from "react";
+
+const NODE = Symbol("@unlayer/react-elements/record");
+
+export interface RecordNode {
+  $$typeof: typeof NODE;
+  record: object;
+  children?: React.ReactNode;
+  quiet?: boolean;
+}
+
+export interface BoundaryNode {
+  $$typeof: typeof NODE;
+  /** Its record (a component's), whose content is what it renders; null for markup, which isn't recorded. */
+  boundary: object | null;
+  child: React.ReactNode;
+}
+
+/** (Typed as React's nodes: they're walked where React's are, and only by the walker.) */
+export const recordNode = (record: object, children?: React.ReactNode, quiet?: boolean): React.ReactElement => ({ $$typeof: NODE, record, children, quiet }) as unknown as React.ReactElement;
+export const boundary = (record: object | null, child: React.ReactNode): React.ReactElement => ({ $$typeof: NODE, boundary: record, child }) as unknown as React.ReactElement;
+
+export const isWalkerNode = (node: any): node is RecordNode | BoundaryNode => node?.$$typeof === NODE;
diff --git a/packages/react/src/engine/self-test.ts b/packages/react/src/engine/self-test.ts
new file mode 100644
index 00000000..acd4b8b7
--- /dev/null
+++ b/packages/react/src/engine/self-test.ts
@@ -0,0 +1,63 @@
+/**
+ * Before the first render, a check that the installed React has the shapes the walker relies on (react-compat.ts):
+ * its dispatcher slot where the table says, the dispatcher installed there and the previous one put back, useId in
+ * its format, context and `use()` as the walker reads them. A version the table doesn't know renders if it passes
+ * (with a warning in development); one that fails throws a named error, unless UNLAYER_SKIP_REACT_CHECK=1.
+ */
+import React from "react";
+import { callWithHooks, DISPATCHER, hookState, theSlot } from "./dispatcher";
+import { ID_PATTERN, KNOWN_REACT, reactRow, type ReactRow, type Slot } from "./react-compat";
+import { ROOT_TREE } from "./tree-id";
+
+const env = (globalThis as { process?: { env?: Record<string, string | undefined> } }).process?.env ?? {};
+
+/** What's wrong with this React (`R`, whose dispatcher slot is `slot`) for the walker, or undefined. */
+export function probe(row: ReactRow, R: any = React, slot: Slot | null = theSlot()): string | undefined {
+  if (!slot) return `its hooks dispatcher isn't at ${row.slots.join(" or ")}`;
+  const before = slot.get();
+  const context = typeof R.createContext === "function" ? R.createContext("default") : undefined;
+  const fulfilled = { status: "fulfilled", value: "used", then() {} };
+  const seen: Record<string, unknown> = {};
+  const state = hookState("Probe", ROOT_TREE, context ? { context, value: "provided", next: null } : null);
+  try {
+    callWithHooks(state, () => {
+      seen.installed = slot.get() === DISPATCHER;
+      seen.memo = R.useMemo(() => "memo", []);
+      if (typeof R.useId === "function") seen.id = R.useId();
+      if (context && typeof R.useContext === "function") seen.context = R.useContext(context);
+      if (row.use && typeof R.use === "function") seen.use = R.use(fulfilled);
+    });
+  } catch (error) {
+    return `a component's hooks failed (${String((error as Error)?.message ?? error)})`;
+  }
+  if (!seen.installed) return `the dispatcher didn't install at ${slot.path}`;
+  if (slot.get() !== before) return `the dispatcher at ${slot.path} wasn't put back`;
+  if (seen.memo !== "memo") return "useMemo didn't reach the dispatcher";
+  if ("id" in seen && !ID_PATTERN[row.id].test(String(seen.id))) return `useId gave ${String(seen.id)}, not React ${row.react}'s format`;
+  if (context) {
+    const shape = row.context === "context" ? context.Provider === context && context.Consumer?.$$typeof === Symbol.for("react.consumer") : context.Provider?.$$typeof === Symbol.for("react.provider");
+    if (!shape) return `its context isn't shaped as React ${row.react}'s`;
+    if ("context" in seen && seen.context !== "provided") return "useContext didn't read the walker's provider";
+  }
+  if ("use" in seen && seen.use !== "used") return "use() didn't read a fulfilled thenable's value";
+  return undefined;
+}
+
+/** What development says of a React the table doesn't have (`v`) that passed the check. */
+export const untested = (v: string): string =>
+  `[Unlayer] React ${v} is ${reactRow(v).older ? "older" : "newer"} than the versions Elements is tested with (${KNOWN_REACT[0].react}–${KNOWN_REACT[KNOWN_REACT.length - 1].react}); it passed Elements' check of the React it relies on.`;
+
+let verdict: string | null | undefined;
+
+/** Throws, on every render, if this React fails the check (run once per process). */
+export function checkReact(): void {
+  if (verdict === undefined) {
+    if (env.UNLAYER_SKIP_REACT_CHECK === "1") verdict = null;
+    else {
+      const { row, known } = reactRow();
+      verdict = probe(row) ?? null;
+      if (!verdict && !known && env.NODE_ENV !== "production") console.warn(untested(React.version));
+    }
+  }
+  if (verdict) throw new Error(`[Unlayer] unsupported React ${React.version}: ${verdict}. Set UNLAYER_SKIP_REACT_CHECK=1 to render anyway.`);
+}
diff --git a/packages/react/src/engine/tree-id.ts b/packages/react/src/engine/tree-id.ts
new file mode 100644
index 00000000..3358493f
--- /dev/null
+++ b/packages/react/src/engine/tree-id.ts
@@ -0,0 +1,54 @@
+/**
+ * Where a component is in the tree, as React's server renderer numbers it (Fizz's tree context): `useId()` is made
+ * from it, so the walker's ids are what react-dom would give the same tree, in the installed React's format.
+ */
+import { idFormat } from "./react-compat";
+
+export interface TreeContext {
+  id: number;
+  overflow: string;
+}
+
+export const ROOT_TREE: TreeContext = { id: 1, overflow: "" };
+
+const clz32 = Math.clz32;
+
+/** The tree context of child `index` of `total` (React's pushTreeContext). */
+export function pushTreeContext(base: TreeContext, total: number, index: number): TreeContext {
+  let baseId = base.id;
+  let baseLength = 32 - clz32(baseId) - 1;
+  baseId &= ~(1 << baseLength);
+  const slot = index + 1;
+  const length = 32 - clz32(total) + baseLength;
+  if (length > 30) {
+    // The id would overflow 32 bits: the bits so far go to `overflow`, in base 32.
+    const overflowBits = baseLength - (baseLength % 5);
+    const overflow = (baseId & ((1 << overflowBits) - 1)).toString(32);
+    baseId >>= overflowBits;
+    baseLength -= overflowBits;
+    return { id: (1 << (32 - clz32(total) + baseLength)) | (slot << baseLength) | baseId, overflow: overflow + base.overflow };
+  }
+  return { id: (1 << length) | (slot << baseLength) | baseId, overflow: base.overflow };
+}
+
+function treeId(tree: TreeContext): string {
+  const id = tree.id;
+  return (id & ~(1 << (32 - clz32(id) - 1))).toString(32) + tree.overflow;
+}
+
+/**
+ * The `local`-th `useId()` of the component at `tree`, after `prefix` as React writes its `identifierPrefix` (the
+ * render's `idPrefix`; Elements' ids carry nothing of its own).
+ */
+export function makeId(tree: TreeContext, local: number, prefix = ""): string {
+  const tid = treeId(tree);
+  const h = local > 0 ? "H" + local.toString(32) : "";
+  switch (idFormat()) {
+    case "underscore":
+      return `_${prefix}R_${tid}${h}_`;
+    case "guillemet":
+      return `«${prefix}R${tid}${h}»`;
+    default:
+      return `:${prefix}R${tid}${h}:`;
+  }
+}
diff --git a/packages/react/src/engine/walk.ts b/packages/react/src/engine/walk.ts
new file mode 100644
index 00000000..dc9d19a1
--- /dev/null
+++ b/packages/react/src/engine/walk.ts
@@ -0,0 +1,633 @@
+/**
+ * The walker: renders a React element tree as react-dom's static server render would, without react-dom. Function
+ * components are called with Elements' hooks dispatcher (dispatcher.ts), class components constructed and rendered,
+ * Context, Fragments, memo, forwardRef, lazy and Suspense handled here, host markup written by host.ts.
+ *
+ * One synchronous walk serves both renderers. Where a component suspends (an async component, `use()` of a pending
+ * promise, a thrown promise, a lazy component, a promise as a child), the synchronous renderer throws (to the nearest
+ * <Suspense>, whose fallback it renders, as react-dom does); the async one (`wait`: the async entry's, see
+ * src/async/collect.ts) leaves a hole in the output, walks on (so siblings start their own work at once) and fills the
+ * hole when the promise settles, with the tree position and context it had (output.ts puts it all in tree order).
+ *
+ * A collecting walk (the template's, see utils/record.tsx) asks its collector about each element first: Elements'
+ * Rows, Columns and blocks are recorded instead of called, and what's inside them walked inside their records; its
+ * output is the template's content as a tree (output.ts).
+ */
+import type React from "react";
+import { callWithHooks, contextOf, hookState, readContext, SUSPEND, track, type ContextStack, type Fallbacks, type HookState } from "./dispatcher";
+import { ASYNC_IN_SYNC, childFrame, nameOf, placeFrame, positionOf, RenderError, threw, type Frame } from "./errors";
+import { childFormat, escapeText, leadingNewline, openTag, propsBody, validateHost, VOID, type Format } from "./host";
+import { REACT_18 } from "./react-compat";
+import { checkKeys } from "./keys";
+import { isWalkerNode, type BoundaryNode, type RecordNode } from "./records";
+import type { BoundaryPart, ErrorPart, HostPart, Part, RecordPart } from "./output";
+import { pushTreeContext, type TreeContext } from "./tree-id";
+
+const ELEMENT = Symbol.for("react.element");
+const TRANSITIONAL = Symbol.for("react.transitional.element");
+const PORTAL = Symbol.for("react.portal");
+const FRAGMENT = Symbol.for("react.fragment");
+const SUSPENSE = Symbol.for("react.suspense");
+const PROVIDER = Symbol.for("react.provider");
+const CONTEXT = Symbol.for("react.context");
+const CONSUMER = Symbol.for("react.consumer");
+const FORWARD_REF = Symbol.for("react.forward_ref");
+const MEMO = Symbol.for("react.memo");
+const LAZY = Symbol.for("react.lazy");
+const CLIENT_REF = Symbol.for("react.client.reference");
+const ACTIVITY = Symbol.for("react.activity");
+/** What renders its children as they are on a server. */
+const PASSTHROUGH = new Set<unknown>([FRAGMENT, Symbol.for("react.strict_mode"), Symbol.for("react.profiler"), Symbol.for("react.suspense_list"), Symbol.for("react.view_transition"), Symbol.for("react.legacy_hidden"), Symbol.for("react.scope")]);
+
+/**
+ * Whether an element type renders what's in it, its children, on a server: a Fragment, StrictMode, a <Suspense> (which
+ * renders its fallback instead only where what's in it suspends), a visible <Activity>, … (template wrappers: see
+ * utils/unwrap-root.ts).
+ */
+export const passesThrough = (type: unknown, props: { mode?: unknown }): boolean => PASSTHROUGH.has(type) || type === SUSPENSE || (type === ACTIVITY && props.mode !== "hidden");
+
+/** What a collecting walk walks for an element instead of calling it (its record), and the name it's at. */
+export interface Recorded {
+  name?: string;
+  /** (`position`, where it is: `Row 3 › Column 1 › Button`, worked out when an error asks.) */
+  record(position: () => string): React.ReactNode;
+}
+export type Collector = (element: React.ReactElement) => Recorded | undefined;
+
+/**
+ * What the components of one render share (the work left to its Markdown and code blocks, together): the render's,
+ * keyed by whoever keeps something in it (see the engine's `renderShared`).
+ */
+export type Shared = Record<symbol, unknown>;
+
+/** What waits for `thenable` (an async walk's hole), and `fill`s the walk's output where it is once it settles. */
+export type Wait = (w: Walker, task: Task, out: Part[], thenable: PromiseLike<unknown>, fill: (task: Task, parts: Part[]) => void) => void;
+
+export interface Walker {
+  /** How it waits for what's async (the async renderers'); a synchronous walk throws to the nearest <Suspense>. */
+  wait?: Wait;
+  /** Pass on any RenderError (a render of Elements' own markup: its components' errors are placed already). */
+  passAll?: boolean;
+  /** Components called as they are, with whatever dispatcher is there (Elements' own, which call no hooks). */
+  bare?: (type: unknown) => boolean;
+  /** Errors passed on as they are (a <Tailwind>'s, which says what to do itself). */
+  passes?: (error: unknown) => boolean;
+  /** Components that are no place of their own in positions (an <UnlayerProvider>: its children are where it is). */
+  frameless?: (type: unknown) => boolean;
+  /** What the `useId()`s start with (the render's `idPrefix`). */
+  idPrefix?: string;
+  /** What its top-level render reads for contexts no provider gives, once each (see the dispatcher's `readContext`). */
+  fallbacks: Fallbacks;
+  /** What the components it calls share with the rest of their render (see Shared). */
+  shared: Shared;
+  collector?: Collector;
+  /** Boundaries leave out what fails (`onError: "omit"`); an async walk's always catch, flattening decides. */
+  omit: boolean;
+  /** The <Suspense>s open where a synchronous walk is: what suspends goes to the nearest, whatever `onError` says. */
+  suspense: number;
+  /** The RenderErrors this walk made (one from a render inside a component is that component's error). */
+  made: WeakSet<object>;
+  /** RenderErrors for a template that isn't one: never left out. */
+  fatal: WeakSet<object>;
+}
+
+export interface Task {
+  tree: TreeContext;
+  contexts: ContextStack | null;
+  /** Where markup is (a `<select>` its options are in, a <Head>): see host.ts. */
+  format: Format;
+  frame: Frame;
+  /** A boundary's own component, whose return value its record keeps (`output`: see src/model/elements.ts's keptMarkup). */
+  watch: { element: unknown; record: Record<string, any> } | null;
+}
+
+/**
+ * Where the component the walker is calling is, for a walk that component starts (a root's content, rendered by
+ * Body; a render the template's code starts): its providers are around that walk, as React's nested renders read the
+ * values of the render they're in, and its place in the tree is where that walk's ids start, so they're the document's.
+ * By design, the one thing outside a render's scope its output depends on (ARCHITECTURE.md, invariant 4): `guest`
+ * doesn't clear it, and a render started outside any component's call starts at the top. A walk started there reads
+ * the contexts no provider gives as the walk calling it does (its `fallbacks`): one value each in a top-level render.
+ */
+let calling: { tree: TreeContext; contexts: ContextStack | null; fallbacks: Fallbacks } | null = null;
+export const caller = () => calling;
+
+/**
+ * What the code running now shares with the rest of its render (see Shared): while a render runs (see the main entry's
+ * withScope), a component the walker calls, a template wrapper its render calls (see `sharing`), each render's own
+ * (one a component starts has its own). None outside a render's synchronous run: an async component's code after an
+ * `await` runs when none is, and can't be told from another render's.
+ *
+ * It's kept in one slot on globalThis (by Symbol.for), for every copy of Elements in the process (a package's ESM and
+ * CommonJS builds, a package still on another version), so a copy's Markdown and code entries read the render another
+ * copy runs (ARCHITECTURE.md, invariant 9). `version` is the shape of what the slot and the work in it hold: a copy
+ * that finds another version's keeps a slot of its own (its renders' blocks then share with each other, and another
+ * version's blocks have their own work, as each block once did). Bump SLOT_VERSION when what's kept in it changes.
+ */
+const SLOT = Symbol.for("@unlayer/react-elements/render-work");
+const SLOT_VERSION = 1;
+type Slot = { version: number; shared: Shared | undefined };
+const slot: Slot = (() => {
+  const global = globalThis as Record<symbol, Slot | undefined>;
+  const found = global[SLOT];
+  if (found?.version === SLOT_VERSION) return found;
+  const own: Slot = { version: SLOT_VERSION, shared: undefined };
+  if (!found) global[SLOT] = own;
+  return own;
+})();
+export const sharedNow = (): Shared | undefined => slot.shared;
+
+/** `fn`, called with what `share` is shared with (see `slot`). */
+export function sharing<T>(share: Shared | undefined, fn: () => T): T {
+  const outer = slot.shared;
+  slot.shared = share;
+  try {
+    return fn();
+  } finally {
+    slot.shared = outer;
+  }
+}
+
+/** `fn`, called as a component at `task` (see `calling`), with what its render's components share. */
+function asCaller<T>(w: Walker, task: Task, fn: () => T): T {
+  const outer = calling;
+  calling = { tree: task.tree, contexts: task.contexts, fallbacks: w.fallbacks };
+  try {
+    return sharing(w.shared, fn);
+  } finally {
+    calling = outer;
+  }
+}
+
+/** A suspension a synchronous walk can't wait for: to the nearest <Suspense>, or a RenderError that says so. */
+export class SyncSuspend {
+  constructor(
+    readonly name: string,
+    readonly frame: Frame
+  ) {}
+}
+
+const isThenable = (value: unknown): value is PromiseLike<unknown> => typeof (value as { then?: unknown } | null)?.then === "function";
+type Thenable = PromiseLike<unknown> & { status?: "pending" | "fulfilled" | "rejected"; value?: unknown; reason?: unknown };
+
+/**
+ * The promise a component's call suspended on, which it's called again once it settles: the one its `use()` waits for,
+ * or one it threw (React 18's Suspense, react-i18next's `useTranslation`). A thrown one that has rejected is what the
+ * call failed with (see `failure`), as `use()` of it fails: it isn't called again for it.
+ */
+export function suspension(thrown: unknown, state?: HookState): PromiseLike<unknown> | undefined {
+  if (thrown === SUSPEND) return state?.suspendedOn;
+  if (!isThenable(thrown)) return undefined;
+  track(thrown as Thenable);
+  return (thrown as Thenable).status === "rejected" ? undefined : thrown;
+}
+
+/** What a component's call failed with: what it threw, or what a promise it threw rejected with (see `suspension`). */
+export const failure = (thrown: unknown): unknown => (isThenable(thrown) && (thrown as Thenable).status === "rejected" ? (thrown as Thenable).reason : thrown);
+
+const isAsyncFunction = (fn: unknown) => (fn as { [Symbol.toStringTag]?: string } | null)?.[Symbol.toStringTag] === "AsyncFunction";
+/** A promise nothing waits for: its rejection mustn't end the process. */
+const settle = (thenable: PromiseLike<unknown>) => void thenable.then(undefined, () => {});
+
+/** `error`, thrown in `name` at `frame`, as the RenderError that says so (one this walk made already stays as it is). */
+export function positioned(w: Walker, error: unknown, name: string, frame: Frame): unknown {
+  if (error instanceof SyncSuspend || (error instanceof RenderError && (w.passAll || w.made.has(error))) || w.passes?.(error)) return error;
+  const made = new RenderError(threw(error), name, positionOf(frame), error);
+  w.made.add(made);
+  return made;
+}
+
+/** A RenderError for a template that isn't one (thrown, whatever `onError` says). */
+function fatal(w: Walker, message: string, frame: Frame): RenderError {
+  const made = new RenderError(message, frame.name || "template", positionOf(frame));
+  w.made.add(made);
+  w.fatal.add(made);
+  return made;
+}
+
+/** What failed, as a RenderError: a suspension a synchronous walk couldn't wait for, too. */
+export function asRenderError(w: Walker, error: unknown, frame: Frame): RenderError {
+  if (error instanceof SyncSuspend) return new RenderError(ASYNC_IN_SYNC, error.name, positionOf(error.frame));
+  return positioned(w, error, frame.name, frame) as RenderError;
+}
+
+/** What a walk throws: a RenderError, or an error passed on as it is. */
+export const thrownBy = (w: Walker, error: unknown, frame: Frame): unknown => (w.passes?.(error) ? error : asRenderError(w, error, frame));
+
+export const errorPart = (w: Walker, error: unknown, frame: Frame): ErrorPart => {
+  const made = thrownBy(w, error, frame) as RenderError;
+  return { t: "error", error: made, fatal: w.fatal.has(made) || !(made instanceof RenderError) };
+};
+
+// ── Nodes ──
+
+export function walkNode(w: Walker, node: unknown, task: Task, out: Part[]): void {
+  if (node === null || node === undefined || typeof node === "boolean") return;
+  if (typeof node === "string") {
+    if (node) out.push(task.format.raw ? node : escapeText(node));
+    return;
+  }
+  if (typeof node === "number") return void out.push("" + node);
+  if (typeof node === "bigint") {
+    // react-dom 18 writes nothing for one.
+    if (!REACT_18) out.push("" + node);
+    return;
+  }
+  if (typeof node === "function" || typeof node === "symbol") return;
+  if (Array.isArray(node)) return walkArray(w, node, task, out);
+  const object = node as Record<string | symbol, any>;
+  const tag = object.$$typeof;
+  if (tag === ELEMENT || tag === TRANSITIONAL) return walkElement(w, object as unknown as React.ReactElement, task, out);
+  if (isWalkerNode(object)) return "boundary" in object ? walkBoundary(w, object, task, out) : walkRecord(w, object, task, out);
+  if (tag === PORTAL) throw fatal(w, "Portals aren't supported by server rendering (React's server renderer has none either)", task.frame);
+  if (tag === LAZY) return walkLazy(w, object, task, out, (resolved, t, parts) => walkNode(w, resolved, t, parts));
+  if (typeof object[Symbol.iterator] === "function") return walkArray(w, Array.from(object as Iterable<unknown>), task, out);
+  if (!REACT_18) {
+    // React 19 renders what a promise child resolves to, as `use()` would, and a context's value.
+    if (isThenable(object)) return walkThenable(w, object, task, out);
+    if (tag === CONTEXT) return walkNode(w, readContext(task.contexts, object, w.fallbacks), task, out);
+  }
+  const keys = Object.prototype.toString.call(object) === "[object Object]" ? `object with keys {${Object.keys(object).join(", ")}}` : Object.prototype.toString.call(object);
+  throw fatal(w, `Objects are not valid as a React child (found: ${keys}). If you meant to render a collection of children, use an array instead`, task.frame);
+}
+
+function walkArray(w: Walker, list: unknown[], task: Task, out: Part[]): void {
+  checkKeys(list, task.frame.name);
+  const parent = task.tree;
+  const total = list.length;
+  try {
+    for (let i = 0; i < total; i++) {
+      task.tree = pushTreeContext(parent, total, i);
+      walkNode(w, list[i], task, out);
+    }
+  } finally {
+    task.tree = parent;
+  }
+}
+
+/** `keep`: the record that keeps what `element` returns, when it's a boundary's own component (see `returned`). */
+function walkElement(w: Walker, element: React.ReactElement, task: Task, out: Part[], keep = watched(task, element)): void {
+  const type = element.type as any;
+  const props = element.props as Record<string, any>;
+  if (typeof type === "string") return walkHost(w, type, props, task, out);
+  const recorded = w.collector?.(element);
+  if (recorded) return walkRecorded(w, recorded, task, out);
+  if (typeof type === "function") {
+    if (type.$$typeof === CLIENT_REF) throw clientReference(w, type, task);
+    if (type.prototype?.isReactComponent) return walkClass(w, type, props, task, out, keep);
+    return walkFunction(w, type, type, props, undefined, task, out, keep);
+  }
+  // What a Provider, a StrictMode or a <Suspense> renders is what's in it (a component's call keeps what it returns).
+  returned(keep, props.children);
+  if (PASSTHROUGH.has(type)) return walkNode(w, props.children, task, out);
+  if (type === SUSPENSE) return walkSuspense(w, props, task, out);
+  if (type === ACTIVITY) return props.mode === "hidden" ? undefined : walkNode(w, props.children, task, out);
+  if (type !== null && typeof type === "object") {
+    switch (type.$$typeof) {
+      case FORWARD_REF: {
+        // React 19 passes `ref` in props, React 18 beside them.
+        let ref: unknown = null;
+        let own = props;
+        if (REACT_18) ref = (element as { ref?: unknown }).ref ?? null;
+        else if ("ref" in props) ({ ref, ...own } = props);
+        return walkFunction(w, type.render, type, own, ref, task, out, keep);
+      }
+      case MEMO: {
+        const inner = type.type;
+        const own = REACT_18 ? withDefaults(inner, props) : props;
+        if (typeof inner === "function" && !inner.prototype?.isReactComponent) return walkFunction(w, inner, type, own, undefined, task, out, keep);
+        return walkElement(w, { ...element, type: inner, props: own } as React.ReactElement, task, out, keep);
+      }
+      case LAZY:
+        return walkLazy(w, type, task, out, (resolved, t, parts) => walkElement(w, { ...element, type: resolved, props: withDefaults(resolved, props) } as React.ReactElement, t, parts, keep));
+      case PROVIDER:
+        return withContext(w, type._context, props, task, out);
+      case CONTEXT:
+        // React 18: a Consumer (the context, or in development an object with `_context`). React 19: the provider.
+        return REACT_18 ? walkNode(w, returned(keep, props.children(readContext(task.contexts, type, w.fallbacks))), task, out) : withContext(w, type, props, task, out);
+      case CONSUMER:
+        return walkNode(w, returned(keep, props.children(readContext(task.contexts, type._context, w.fallbacks))), task, out);
+      case CLIENT_REF:
+        throw clientReference(w, type, task);
+    }
+  }
+  const missing = type === undefined || (typeof type === "object" && type !== null && Object.keys(type).length === 0);
+  throw fatal(
+    w,
+    `Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: ${type === null ? "null" : typeof type}.${missing ? " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports." : ""}`,
+    task.frame
+  );
+}
+
+/** The record that keeps what `element` returns, when it's a boundary's own component. */
+const watched = (task: Task, element: unknown) => (task.watch && task.watch.element === element ? task.watch.record : undefined);
+
+/**
+ * `value`, what a boundary's own component returned (a function's, a class's render, a Consumer's function's; what's
+ * in a Provider, a StrictMode, a <Suspense>), kept on its record (`keep`) as `output`: src/model/elements.ts's
+ * keptMarkup reads it, whatever kind of component it was (a memo's or a lazy one's is the component's in it).
+ */
+function returned<T>(keep: Record<string, any> | undefined, value: T): T {
+  if (keep) keep.output = { value };
+  return value;
+}
+
+const clientReference = (w: Walker, type: any, task: Task) =>
+  fatal(w, `<${type.$$id ?? type.name ?? "component"}> is a Client Component ("use client"): it can't render in server code (a Server Component or route handler). Render it from a Client Component, or import it without "use client"`, task.frame);
+
+function withDefaults(type: any, props: Record<string, unknown>): Record<string, unknown> {
+  const defaults = type?.defaultProps;
+  if (!defaults) return props;
+  const out = { ...props };
+  for (const key in defaults) if (out[key] === undefined) out[key] = defaults[key];
+  return out;
+}
+
+function withContext(w: Walker, context: object, props: Record<string, any>, task: Task, out: Part[]): void {
+  const outer = task.contexts;
+  task.contexts = { context: contextOf(context), value: props.value, next: outer };
+  try {
+    walkNode(w, props.children, task, out);
+  } finally {
+    task.contexts = outer;
+  }
+}
+
+/** What a collecting walk walks for an Elements component: its record, at the place its name takes. */
+function walkRecorded(w: Walker, recorded: Recorded, task: Task, out: Part[]): void {
+  const outer = task.frame;
+  const frame = recorded.name ? childFrame(outer, recorded.name) : outer;
+  let nodes: React.ReactNode;
+  try {
+    nodes = recorded.record(() => positionOf(frame));
+  } catch (error) {
+    throw positioned(w, error, frame.name, frame);
+  }
+  task.frame = frame;
+  try {
+    walkNode(w, nodes, task, out);
+  } finally {
+    task.frame = outer;
+  }
+}
+
+/**
+ * A record, what's inside it walked into it. Its children are where a list of three (its start, them, its end) had
+ * them, as the walk wrote a record's two ends before: their tree positions, so their `useId()`s, are as they were.
+ */
+function walkRecord(w: Walker, node: RecordNode, task: Task, out: Part[]): void {
+  const part: RecordPart = { t: "record", record: node.record, parts: [], quiet: node.quiet };
+  out.push(part);
+  if (node.children === undefined) return;
+  const { tree, format } = task;
+  task.tree = pushTreeContext(tree, 3, 1);
+  // (A quiet record's are a <Head>'s tags: the document's head, see host.ts.)
+  if (node.quiet) task.format = { head: true };
+  try {
+    walkNode(w, node.children, task, part.parts);
+  } finally {
+    task.tree = tree;
+    task.format = format;
+  }
+}
+
+/** A part of the template left out when it fails (`onError: "omit"`): a component's, in its record. */
+function walkBoundary(w: Walker, node: BoundaryNode, task: Task, out: Part[]): void {
+  const part: BoundaryPart = { t: "boundary", parts: [] };
+  out.push(part);
+  let into = part.parts;
+  if (node.boundary) {
+    const record: RecordPart = { t: "record", record: node.boundary, parts: [] };
+    part.parts.push(record);
+    into = record.parts;
+  }
+  const watch = task.watch;
+  task.watch = node.boundary ? { element: node.child, record: node.boundary as Record<string, any> } : null;
+  try {
+    walkNode(w, node.child, task, into);
+  } catch (error) {
+    // (A suspension a <Suspense> around it handles isn't a part that failed: it renders the fallback.)
+    if ((!w.wait && !w.omit) || (error instanceof SyncSuspend && w.suspense > 0)) throw error;
+    part.parts.push(errorPart(w, error, task.frame));
+  } finally {
+    task.watch = watch;
+  }
+}
+
+// ── Components ──
+
+function walkFunction(w: Walker, fn: Function, named: unknown, props: Record<string, any>, secondArg: unknown, task: Task, out: Part[], keep?: Record<string, any>): void {
+  const name = nameOf(named);
+  const frame = w.frameless?.(named) ? task.frame : childFrame(task.frame, name);
+  // Not called when nothing can wait for it (and the promise it gives back could reject unhandled).
+  if (!w.wait && isAsyncFunction(fn)) throw new SyncSuspend(name, frame);
+  const state = hookState(name, task.tree, task.contexts, w.idPrefix, w.fallbacks);
+  if (!w.bare?.(named)) return callAndWalk(w, state, fn, props, secondArg, frame, task, out, keep);
+  let result: unknown;
+  try {
+    result = asCaller(w, task, () => fn(props, secondArg));
+  } catch (error) {
+    throw positioned(w, error, name, frame);
+  }
+  walkResult(w, state, result, frame, task, out);
+}
+
+function callAndWalk(w: Walker, state: HookState, fn: Function, props: Record<string, any>, secondArg: unknown, frame: Frame, task: Task, out: Part[], keep?: Record<string, any>): void {
+  let result: unknown;
+  try {
+    result = asCaller(w, task, () => call(state, fn, props, secondArg));
+  } catch (thrown) {
+    const thenable = suspension(thrown, state);
+    if (!thenable) throw positioned(w, failure(thrown), state.name, frame);
+    // `use()` of a pending promise, or a thrown one (React 18's Suspense): called again once it settles, with fresh
+    // hooks and the results `use()` had, as React does.
+    if (!w.wait) {
+      settle(thenable);
+      throw new SyncSuspend(state.name, frame);
+    }
+    return w.wait(w, task, out, thenable, (t, parts) => {
+      state.hooks = undefined;
+      callAndWalk(w, state, fn, props, secondArg, frame, t, parts, keep);
+    });
+  }
+  if (isThenable(result)) {
+    // An async component: what its promise resolves to (it isn't called again).
+    if (!w.wait) {
+      settle(result);
+      throw new SyncSuspend(state.name, frame);
+    }
+    const promise = result as PromiseLike<unknown> & { status?: string; value?: unknown; reason?: unknown };
+    return w.wait(w, task, out, promise, (t, parts) => {
+      if (promise.status === "rejected") throw positioned(w, promise.reason, state.name, frame);
+      walkResult(w, state, returned(keep, promise.value), frame, t, parts);
+    });
+  }
+  walkResult(w, state, returned(keep, result), frame, task, out);
+}
+
+/** A component's own call (a template wrapper's too), with hooks: again while it sets its state as it renders (its last render counts). */
+export function call(state: HookState, fn: Function, props: Record<string, any>, secondArg: unknown): unknown {
+  for (let renders = 0; ; ) {
+    state.localId = 0;
+    state.thenableIndex = 0;
+    state.hookIndex = 0;
+    state.rerender = false;
+    const result = callWithHooks(state, () => fn(props, secondArg));
+    if (!state.rerender) return result;
+    if (++renders > 25) throw new Error("Too many re-renders: a component sets its state every time it renders.");
+  }
+}
+
+function walkResult(w: Walker, state: HookState, result: unknown, frame: Frame, task: Task, out: Part[]): void {
+  const tree = task.tree;
+  const outer = task.frame;
+  // A component that called useId gives its children a fork of the tree, as React does.
+  if (state.localId > 0) task.tree = pushTreeContext(tree, 1, 0);
+  task.frame = frame;
+  try {
+    walkNode(w, result, task, out);
+  } finally {
+    task.tree = tree;
+    task.frame = outer;
+  }
+}
+
+function walkClass(w: Walker, Ctor: any, given: Record<string, any>, task: Task, out: Part[], keep?: Record<string, any>, frame = childFrame(task.frame, nameOf(Ctor))): void {
+  let result: unknown;
+  try {
+    result = asCaller(w, task, () => renderClass(Ctor, given, task.contexts, w.fallbacks));
+  } catch (thrown) {
+    const thenable = suspension(thrown);
+    if (!thenable) throw positioned(w, failure(thrown), frame.name, frame);
+    // A thrown promise (React 18's Suspense): constructed and rendered again once it settles, as React does.
+    if (!w.wait) {
+      settle(thenable);
+      throw new SyncSuspend(frame.name, frame);
+    }
+    return w.wait(w, task, out, thenable, (t, parts) => walkClass(w, Ctor, given, t, parts, keep, frame));
+  }
+  const outer = task.frame;
+  task.frame = frame;
+  try {
+    walkNode(w, returned(keep, result), task, out);
+  } finally {
+    task.frame = outer;
+  }
+}
+
+/** A class component constructed and rendered as a server renders one (its state from getDerivedStateFromProps, or componentWillMount). */
+export function renderClass(Ctor: any, given: Record<string, any>, contexts: ContextStack | null, fallbacks?: Fallbacks): unknown {
+  const props = withDefaults(Ctor, given) as Record<string, any>;
+  const context = Ctor.contextType ? readContext(contexts, Ctor.contextType, fallbacks) : {};
+  const queue: unknown[] = [];
+  const updater = {
+    isMounted: () => false,
+    enqueueSetState: (_: unknown, partial: unknown) => void queue.push(partial),
+    enqueueReplaceState: (_: unknown, state: unknown) => void ((queue.length = 0), queue.push(state)),
+    enqueueForceUpdate: () => {},
+  };
+  const instance = new Ctor(props, context, updater);
+  Object.assign(instance, { props, context, updater });
+  if (instance.state === undefined) instance.state = null;
+  if (typeof Ctor.getDerivedStateFromProps === "function") {
+    const partial = Ctor.getDerivedStateFromProps(props, instance.state);
+    if (partial != null) instance.state = { ...instance.state, ...partial };
+  } else {
+    const willMount = instance.UNSAFE_componentWillMount ?? instance.componentWillMount;
+    if (typeof willMount === "function") {
+      willMount.call(instance);
+      for (const partial of queue) {
+        const next = typeof partial === "function" ? partial.call(instance, instance.state, props, context) : partial;
+        if (next != null) instance.state = { ...instance.state, ...next };
+      }
+    }
+  }
+  return instance.render();
+}
+
+function walkSuspense(w: Walker, props: Record<string, any>, task: Task, out: Part[]): void {
+  // The async renderer waits for what's in it.
+  if (w.wait) return walkNode(w, props.children, task, out);
+  const inside: Part[] = [];
+  let suspended = false;
+  w.suspense++;
+  try {
+    walkNode(w, props.children, task, inside);
+  } catch (error) {
+    if (!(error instanceof SyncSuspend)) throw error;
+    suspended = true;
+  } finally {
+    w.suspense--;
+  }
+  // What suspended can't be waited for: the fallback (outside this <Suspense>), as react-dom's synchronous render writes it.
+  if (suspended) return walkNode(w, props.fallback, task, out);
+  for (const part of inside) out.push(part);
+}
+
+// ── What waits ──
+
+function walkThenable(w: Walker, thenable: Thenable, task: Task, out: Part[]): void {
+  track(thenable);
+  if (thenable.status === "fulfilled") return walkNode(w, thenable.value, task, out);
+  if (thenable.status === "rejected") throw positioned(w, thenable.reason, task.frame.name, task.frame);
+  if (!w.wait) {
+    settle(thenable);
+    throw new SyncSuspend(task.frame.name, task.frame);
+  }
+  w.wait(w, task, out, thenable, (t, parts) => walkThenable(w, thenable, t, parts));
+}
+
+function walkLazy(w: Walker, lazy: Record<string, any>, task: Task, out: Part[], walk: (resolved: any, task: Task, parts: Part[]) => void): void {
+  let resolved: unknown;
+  try {
+    resolved = lazy._init(lazy._payload);
+  } catch (thrown) {
+    if (!isThenable(thrown)) throw positioned(w, thrown, "lazy", placeFrame(task.frame, "lazy"));
+    if (!w.wait) {
+      settle(thrown);
+      throw new SyncSuspend("lazy", placeFrame(task.frame, "lazy"));
+    }
+    return w.wait(w, task, out, thrown, (t, parts) => walkLazy(w, lazy, t, parts, walk));
+  }
+  walk(resolved, task, out);
+}
+
+// ── Markup ──
+
+function walkHost(w: Walker, type: string, props: Record<string, any>, task: Task, out: Part[]): void {
+  const format = task.format;
+  let open: string;
+  let body: string | undefined;
+  try {
+    validateHost(type, props);
+    open = openTag(type, props, format);
+    body = propsBody(type, props, format);
+  } catch (error) {
+    throw positioned(w, error, type, placeFrame(task.frame, type));
+  }
+  const close = VOID.has(type) ? "" : `</${type}>`;
+  const inner = childFormat(format, type, props);
+  // A collecting walk's markup is content (output.ts): its records are in it, where they are.
+  let into = out;
+  if (w.collector) {
+    const part: HostPart = { t: "host", tag: type, open, close, parts: [] };
+    // (A <Head>'s `<style>` or `<script>`: its text as it is, whatever writes it, but for what would end it or what
+    // it's in. Markup in it is that text.)
+    if (inner.raw && !format.raw) Object.assign(part, { raw: true, ends: format.ends });
+    out.push(part);
+    into = part.parts;
+  } else out.push(open);
+  if (!close) return;
+  if (body !== undefined) into.push(body);
+  else {
+    const lead = leadingNewline(type, props.children);
+    if (lead) into.push(lead);
+    task.format = inner;
+    try {
+      walkNode(w, props.children, task, into);
+    } finally {
+      task.format = format;
+    }
+  }
+  if (!w.collector) out.push(close);
+}
diff --git a/packages/react/src/exporters/__fixtures__/react-19.json b/packages/react/src/exporters/__fixtures__/react-19.json
new file mode 100644
index 00000000..d67ea856
--- /dev/null
+++ b/packages/react/src/exporters/__fixtures__/react-19.json
@@ -0,0 +1,259 @@
+{"attributes":[["data-track","x"," data-track=\"x\""],
+["data-track",1," data-track=\"1\""],
+["aria-hidden","x"," aria-hidden=\"x\""],
+["aria-hidden",1," aria-hidden=\"1\""],
+["rel","x"," rel=\"x\""],
+["rel",1," rel=\"1\""],
+["title","x"," title=\"x\""],
+["title",1," title=\"1\""],
+["class","x"," class=\"x\""],
+["class",1," class=\"1\""],
+["className","x"," class=\"x\""],
+["className",1," class=\"1\""],
+["href","x"," href=\"x\""],
+["href",1," href=\"1\""],
+["href","javascript:alert(1)"," href=\"javascript:throw new Error(&#x27;React has blocked a javascript: URL as a security precaution.&#x27;)\""],
+["src","",""],
+["src","x"," src=\"x\""],
+["src",1," src=\"1\""],
+["src","javascript:alert(1)"," src=\"javascript:throw new Error(&#x27;React has blocked a javascript: URL as a security precaution.&#x27;)\""],
+["action","x"," action=\"x\""],
+["action",1," action=\"1\""],
+["action","javascript:alert(1)"," action=\"javascript:throw new Error(&#x27;React has blocked a javascript: URL as a security precaution.&#x27;)\""],
+["formAction",""," formAction=\"\""],
+["formAction","x"," formAction=\"x\""],
+["formAction",0," formAction=\"0\""],
+["formAction",1," formAction=\"1\""],
+["formAction",2.5," formAction=\"2.5\""],
+["formAction",-1," formAction=\"-1\""],
+["formAction","javascript:alert(1)"," formAction=\"javascript:throw new Error(&#x27;React has blocked a javascript: URL as a security precaution.&#x27;)\""],
+["formAction","<&\"'>"," formAction=\"&lt;&amp;&quot;&#x27;&gt;\""],
+["xlinkHref","x"," xlink:href=\"x\""],
+["xlinkHref",1," xlink:href=\"1\""],
+["xlinkHref","javascript:alert(1)"," xlink:href=\"javascript:throw new Error(&#x27;React has blocked a javascript: URL as a security precaution.&#x27;)\""],
+["target","x"," target=\"x\""],
+["target",1," target=\"1\""],
+["onClick","x",""],
+["onClick",1,""],
+["onclick","x",""],
+["onclick",1,""],
+["tabIndex","x"," tabindex=\"x\""],
+["tabIndex",1," tabindex=\"1\""],
+["htmlFor","x"," for=\"x\""],
+["htmlFor",1," for=\"1\""],
+["hidden","x"," hidden=\"\""],
+["hidden",1," hidden=\"\""],
+["download","x"," download=\"x\""],
+["download",1," download=\"1\""],
+["capture","x"," capture=\"x\""],
+["capture",1," capture=\"1\""],
+["rowSpan",true," rowSpan=\"true\""],
+["rowSpan",false," rowSpan=\"false\""],
+["rowSpan",""," rowSpan=\"\""],
+["rowSpan","x",""],
+["rowSpan",0," rowSpan=\"0\""],
+["rowSpan",1," rowSpan=\"1\""],
+["rowSpan",2.5," rowSpan=\"2.5\""],
+["rowSpan",-1," rowSpan=\"-1\""],
+["start",true," start=\"true\""],
+["start",false," start=\"false\""],
+["start","x",""],
+["start",1," start=\"1\""],
+["cols",true," cols=\"true\""],
+["cols","x",""],
+["cols",1," cols=\"1\""],
+["span",true," span=\"true\""],
+["span","x",""],
+["span",1," span=\"1\""],
+["contentEditable",true," contentEditable=\"true\""],
+["contentEditable",false," contentEditable=\"false\""],
+["contentEditable",""," contentEditable=\"\""],
+["contentEditable","x"," contentEditable=\"x\""],
+["contentEditable",0," contentEditable=\"0\""],
+["contentEditable",1," contentEditable=\"1\""],
+["contentEditable",2.5," contentEditable=\"2.5\""],
+["contentEditable",-1," contentEditable=\"-1\""],
+["contentEditable","javascript:alert(1)"," contentEditable=\"javascript:alert(1)\""],
+["contentEditable","<&\"'>"," contentEditable=\"&lt;&amp;&quot;&#x27;&gt;\""],
+["spellCheck",true," spellCheck=\"true\""],
+["spellCheck",false," spellCheck=\"false\""],
+["spellCheck",""," spellCheck=\"\""],
+["spellCheck","x"," spellCheck=\"x\""],
+["spellCheck",0," spellCheck=\"0\""],
+["spellCheck",1," spellCheck=\"1\""],
+["spellCheck",2.5," spellCheck=\"2.5\""],
+["spellCheck",-1," spellCheck=\"-1\""],
+["spellCheck","javascript:alert(1)"," spellCheck=\"javascript:alert(1)\""],
+["spellCheck","<&\"'>"," spellCheck=\"&lt;&amp;&quot;&#x27;&gt;\""],
+["draggable","x"," draggable=\"x\""],
+["draggable",1," draggable=\"1\""],
+["value","x"," value=\"x\""],
+["value",1," value=\"1\""],
+["focusable","x"," focusable=\"x\""],
+["focusable",1," focusable=\"1\""],
+["allowFullScreen",true," allowFullScreen=\"\""],
+["allowFullScreen","x"," allowFullScreen=\"\""],
+["allowFullScreen",1," allowFullScreen=\"\""],
+["allowFullScreen",2.5," allowFullScreen=\"\""],
+["allowFullScreen",-1," allowFullScreen=\"\""],
+["allowFullScreen","javascript:alert(1)"," allowFullScreen=\"\""],
+["allowFullScreen","<&\"'>"," allowFullScreen=\"\""],
+["autoFocus","x"," autofocus=\"\""],
+["autoFocus",1," autofocus=\"\""],
+["itemScope",true," itemScope=\"\""],
+["itemScope","x"," itemScope=\"\""],
+["itemScope",1," itemScope=\"\""],
+["itemScope",2.5," itemScope=\"\""],
+["itemScope",-1," itemScope=\"\""],
+["itemScope","javascript:alert(1)"," itemScope=\"\""],
+["itemScope","<&\"'>"," itemScope=\"\""],
+["inert",true," inert=\"\""],
+["inert","",""],
+["inert","x"," inert=\"\""],
+["inert",0,""],
+["inert",1," inert=\"\""],
+["inert",2.5," inert=\"\""],
+["inert",-1," inert=\"\""],
+["inert","javascript:alert(1)"," inert=\"\""],
+["inert","<&\"'>"," inert=\"\""],
+["credentialless",true,""," credentialless=\"\""],
+["credentialless",""," credentialless=\"\"",""],
+["credentialless","x"," credentialless=\"x\""," credentialless=\"\""],
+["credentialless",0," credentialless=\"0\"",""],
+["credentialless",1," credentialless=\"1\""," credentialless=\"\""],
+["credentialless",2.5," credentialless=\"2.5\""," credentialless=\"\""],
+["credentialless",-1," credentialless=\"-1\""," credentialless=\"\""],
+["credentialless","javascript:alert(1)"," credentialless=\"javascript:alert(1)\""," credentialless=\"\""],
+["credentialless","<&\"'>"," credentialless=\"&lt;&amp;&quot;&#x27;&gt;\""," credentialless=\"\""],
+["checked",true,""],
+["checked",""," checked=\"\""],
+["checked","x"," checked=\"x\""],
+["checked",0," checked=\"0\""],
+["checked",1," checked=\"1\""],
+["checked",2.5," checked=\"2.5\""],
+["checked",-1," checked=\"-1\""],
+["checked","javascript:alert(1)"," checked=\"javascript:alert(1)\""],
+["checked","<&\"'>"," checked=\"&lt;&amp;&quot;&#x27;&gt;\""],
+["selected",true,""],
+["selected",""," selected=\"\""],
+["selected","x"," selected=\"x\""],
+["selected",0," selected=\"0\""],
+["selected",1," selected=\"1\""],
+["selected",2.5," selected=\"2.5\""],
+["selected",-1," selected=\"-1\""],
+["selected","javascript:alert(1)"," selected=\"javascript:alert(1)\""],
+["selected","<&\"'>"," selected=\"&lt;&amp;&quot;&#x27;&gt;\""],
+["multiple","x"," multiple=\"\""],
+["multiple",1," multiple=\"\""],
+["readOnly",true," readOnly=\"\""],
+["readOnly","x"," readOnly=\"\""],
+["readOnly",1," readOnly=\"\""],
+["readOnly",2.5," readOnly=\"\""],
+["readOnly",-1," readOnly=\"\""],
+["readOnly","javascript:alert(1)"," readOnly=\"\""],
+["readOnly","<&\"'>"," readOnly=\"\""],
+["strokeWidth","x"," stroke-width=\"x\""],
+["strokeWidth",1," stroke-width=\"1\""],
+["transformOrigin",""," transform-origin=\"\""],
+["transformOrigin","x"," transform-origin=\"x\""],
+["transformOrigin",0," transform-origin=\"0\""],
+["transformOrigin",1," transform-origin=\"1\""],
+["transformOrigin",2.5," transform-origin=\"2.5\""],
+["transformOrigin",-1," transform-origin=\"-1\""],
+["transformOrigin","javascript:alert(1)"," transform-origin=\"javascript:alert(1)\""],
+["transformOrigin","<&\"'>"," transform-origin=\"&lt;&amp;&quot;&#x27;&gt;\""],
+["maskType",""," maskType=\"\""," mask-type=\"\""],
+["maskType","x"," maskType=\"x\""," mask-type=\"x\""],
+["maskType",0," maskType=\"0\""," mask-type=\"0\""],
+["maskType",1," maskType=\"1\""," mask-type=\"1\""],
+["maskType",2.5," maskType=\"2.5\""," mask-type=\"2.5\""],
+["maskType",-1," maskType=\"-1\""," mask-type=\"-1\""],
+["maskType","javascript:alert(1)"," maskType=\"javascript:alert(1)\""," mask-type=\"javascript:alert(1)\""],
+["maskType","<&\"'>"," maskType=\"&lt;&amp;&quot;&#x27;&gt;\""," mask-type=\"&lt;&amp;&quot;&#x27;&gt;\""],
+["crossOrigin","x"," crossorigin=\"x\""],
+["crossOrigin",1," crossorigin=\"1\""],
+["acceptCharset","x"," accept-charset=\"x\""],
+["acceptCharset",1," accept-charset=\"1\""],
+["httpEquiv","x"," http-equiv=\"x\""],
+["httpEquiv",1," http-equiv=\"1\""],
+["xlinkTitle","x"," xlink:title=\"x\""],
+["xlinkTitle",1," xlink:title=\"1\""],
+["xmlLang","x"," xml:lang=\"x\""],
+["xmlLang",1," xml:lang=\"1\""],
+["xmlnsXlink","x"," xmlns:xlink=\"x\""],
+["xmlnsXlink",1," xmlns:xlink=\"1\""],
+["panose-1","x"," panose-1=\"x\""],
+["panose-1",1," panose-1=\"1\""],
+["dir","x"," dir=\"x\""],
+["dir",1," dir=\"1\""],
+["role","x"," role=\"x\""],
+["role",1," role=\"1\""],
+["width","x"," width=\"x\""],
+["width",1," width=\"1\""],
+["defaultValue","x",""],
+["defaultValue",1,""],
+["innerHTML","x",""],
+["innerHTML",1,""],
+["suppressHydrationWarning","x",""],
+["suppressHydrationWarning",1,""],
+["x y","x",""],
+["x y",1,""],
+["1abc","x",""],
+["1abc",1,""]],"styles":[["lineHeight",1," style=\"line-height:1\""],
+["lineHeight"," 2px "," style=\"line-height:2px\""],
+["width",1," style=\"width:1px\""],
+["width"," 2px "," style=\"width:2px\""],
+["scale",1," style=\"scale:1\""],
+["scale",2.5," style=\"scale:2.5\""],
+["scale",-2," style=\"scale:-2\""],
+["scale"," 2px "," style=\"scale:2px\""],
+["aspectRatio",1," style=\"aspect-ratio:1\""],
+["aspectRatio"," 2px "," style=\"aspect-ratio:2px\""],
+["zoom",1," style=\"zoom:1\""],
+["zoom"," 2px "," style=\"zoom:2px\""],
+["msTransform",1," style=\"-ms-transform:1px\""],
+["msTransform"," 2px "," style=\"-ms-transform:2px\""],
+["OFlex",1," style=\"-o-flex:1px\""],
+["OFlex",2.5," style=\"-o-flex:2.5px\""],
+["OFlex",-2," style=\"-o-flex:-2px\""],
+["OFlex"," 2px "," style=\"-o-flex:2px\""],
+["MozOpacity",1," style=\"-moz-opacity:1px\""],
+["MozOpacity",2.5," style=\"-moz-opacity:2.5px\""],
+["MozOpacity",-2," style=\"-moz-opacity:-2px\""],
+["MozOpacity"," 2px "," style=\"-moz-opacity:2px\""],
+["WebkitAspectRatio",1," style=\"-webkit-aspect-ratio:1px\""],
+["WebkitAspectRatio",2.5," style=\"-webkit-aspect-ratio:2.5px\""],
+["WebkitAspectRatio",-2," style=\"-webkit-aspect-ratio:-2px\""],
+["WebkitAspectRatio"," 2px "," style=\"-webkit-aspect-ratio:2px\""],
+["msOrder",1," style=\"-ms-order:1px\""],
+["msOrder",2.5," style=\"-ms-order:2.5px\""],
+["msOrder",-2," style=\"-ms-order:-2px\""],
+["msOrder"," 2px "," style=\"-ms-order:2px\""],
+["WebkitBorderImageWidth",1," style=\"-webkit-border-image-width:1px\""],
+["WebkitBorderImageWidth",2.5," style=\"-webkit-border-image-width:2.5px\""],
+["WebkitBorderImageWidth",-2," style=\"-webkit-border-image-width:-2px\""],
+["WebkitBorderImageWidth"," 2px "," style=\"-webkit-border-image-width:2px\""],
+["WebKitBoxFlexGroup",1," style=\"-web-kit-box-flex-group:1\""],
+["WebKitBoxFlexGroup",2.5," style=\"-web-kit-box-flex-group:2.5\""],
+["WebKitBoxFlexGroup",-2," style=\"-web-kit-box-flex-group:-2\""],
+["WebKitBoxFlexGroup"," 2px "," style=\"-web-kit-box-flex-group:2px\""],
+["MozBoxFlex",1," style=\"-moz-box-flex:1\""],
+["MozBoxFlex"," 2px "," style=\"-moz-box-flex:2px\""],
+["msZoom",1," style=\"-ms-zoom:1\""],
+["msZoom"," 2px "," style=\"-ms-zoom:2px\""],
+["WebkitLineClamp",1," style=\"-webkit-line-clamp:1\""],
+["WebkitLineClamp"," 2px "," style=\"-webkit-line-clamp:2px\""],
+["--custom",1," style=\"--custom:1\""],
+["--custom"," 2px "," style=\"--custom:2px\""],
+["flexGrow",1," style=\"flex-grow:1\""],
+["flexGrow"," 2px "," style=\"flex-grow:2px\""],
+["strokeWidth",1," style=\"stroke-width:1\""],
+["strokeWidth"," 2px "," style=\"stroke-width:2px\""]],"children":[["","<span></span>"],
+["text","<span>text</span>"],
+["<&\"'>","<span>&lt;&amp;&quot;&#x27;&gt;</span>"],
+[0,"<span>0</span>"],
+[7,"<span>7</span>"],
+[true,"<span></span>"],
+[false,"<span></span>"],
+[null,"<span></span>"],
+[["a",1,null,["b",2]],"<span>a1b2</span>"]]}
diff --git a/packages/react/src/exporters/__snapshots__/pages.test.tsx.snap b/packages/react/src/exporters/__snapshots__/pages.test.tsx.snap
new file mode 100644
index 00000000..04792de6
--- /dev/null
+++ b/packages/react/src/exporters/__snapshots__/pages.test.tsx.snap
@@ -0,0 +1,393 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`as a document > renders every template with these blocks as 0.3.0 did 1`] = `
+{
+  "SpotifyWelcome: Default": "ed3682c9ef8607744169",
+  "SpotifyWelcome: SpotifyPremiumWelcome": "ed3682c9ef8607744169",
+  "a CDN for the icons": "0e3a4a7a8b9298991e6a",
+  "components/Body: Ecommerce": "1d1fdf9bb06f536d82b2",
+  "components/Body: Magazine": "bd69b286e036642ad31f",
+  "components/Body: Newsletter": "d83a68db1a219a6a509c",
+  "components/Body: Receipt": "a63d2ce8e2abadd35909",
+  "components/Body: SaaSLanding": "a378d84518f9d1d7b996",
+  "components/Column: SidebarArticle": "c945b2ec92f70914f442",
+  "components/Column: TestimonialCards": "9efb2021244aac041988",
+  "components/CompletePixelParityTest: CompleteEmailTemplate": "f459b1203b79d13c7198",
+  "components/Divider: CustomBorder": "dfd93c8d117cdf44ab08",
+  "components/Divider: Dashed": "2aed7f061db23193bf54",
+  "components/Divider: Default": "7c1b7809381774212415",
+  "components/Divider: DividerShowcase": "dea72adbb162a97f588c",
+  "components/Divider: EmailMode": "72146102bdf2cc8aa9e0",
+  "components/Divider: ThickAccent": "de7d6d3402b18747133d",
+  "components/Html: CallToAction": "2b6a2265f59bd96a7292",
+  "components/Html: Default": "6d8c588bdc87cb7ca5ca",
+  "components/Html: EmailHtml": "db0030ebbd9c34c5233e",
+  "components/Html: HtmlShowcase": "e4a62337f9a786b28872",
+  "components/Html: ProgressBars": "1f4a004ae4d5c9d2867f",
+  "components/Html: Statistics": "66eb55ee53eaec65fbdb",
+  "components/Html: StyledCard": "613c048f7b966c1d6e5d",
+  "components/Html: TestimonialCard": "4598723c9f7163ee989b",
+  "components/Menu: Default": "40774842574cf42a603b",
+  "components/Menu: EmailHeader": "6fa0f46b69f32b900c72",
+  "components/Menu: FooterLinks": "f44bfa1da2b9e83bfc96",
+  "components/Menu: FullPropsAPI": "9451f2c517a462967d48",
+  "components/Menu: StyledNavigation": "2eead493dfef469498b8",
+  "components/Row: ProductShowcase": "e1390f3354a4a6140489",
+  "components/Row: ServiceCards": "5562f68c439943ff84f5",
+  "components/Social: ColorfulSocialIcons": "21d94f8090be9b027297",
+  "components/Social: Default": "38e4b389bda59d6af21b",
+  "components/Social: EmailSocialIcons": "e7529d1e6771195978ce",
+  "components/Social: RoundedSocialIcons": "b5bf4ca8951ddf0aba8e",
+  "components/Social: SocialMediaBar": "fd4c48c02f2f9ca42a05",
+  "components/Social: SquaredSocialIcons": "534631481f59624f63c6",
+  "context/UnlayerProvider: FullEmailTemplate": "cf65f92fba06716610e7",
+  "context/UnlayerProvider: SocialWithCDN": "ea4dc47febc6c0afc4b1",
+  "defaults": "fa29d33eceeea7bb752c",
+  "defaults, bare in the root": "51ff39df2462dcbf67cf",
+  "defaults, two columns": "bd0698548be4cd0fa2f6",
+  "design: device: a phone setting the block's values type doesn't have": "590b4c45e725a255fb86",
+  "design: divider: border and width": "72f1c9a60376c195023a",
+  "design: editor kitchen sink": "5b98e76985707dc293e2",
+  "design: html: as given": "2b0e2f4cb445946ae0e0",
+  "design: menu: an item that calls a phone number": "3b372e2dcaff02918837",
+  "design: menu: items": "6f896cb0088bb9adfee0",
+  "design: menu: the editor's item keys, kept, and its links as their URLs": "195ee78d63482de2a398",
+  "design: social: an icon set Elements' type doesn't list": "3a5d37cf73b2fd1056ce",
+  "design: social: icons": "e2af43244fe95e32f834",
+  "divider: dashed, 100%": "cf15a3461afe63796dbb",
+  "divider: dashed, 240px": "c8351e476da11976ad08",
+  "divider: dashed, 50%": "1c0dd2f8e1db5e744e0c",
+  "divider: dotted, 100%": "c07200b1d393c35d750e",
+  "divider: dotted, 240px": "2a67393a1b5082198a8b",
+  "divider: dotted, 50%": "7f5299353984c55db15e",
+  "divider: double, 100%": "20e109b4db9043bbdecb",
+  "divider: double, 240px": "b848aea42a0d5a9e8168",
+  "divider: double, 50%": "ec7990eab201f3dc9c3b",
+  "divider: none, 100%": "b8106218b2591a593f5f",
+  "divider: none, 240px": "2227f166e83aaab0133e",
+  "divider: none, 50%": "0b9f0bbb544c6718e26e",
+  "divider: solid, 100%": "533336b2f94dc5fcf190",
+  "divider: solid, 240px": "592e12e0c5d90d196720",
+  "divider: solid, 50%": "f6da1f0f8cb814a5c524",
+  "editor links": "23d9a212b71c21995e2f",
+  "examples/LumaEventInvite: Default": "258478860a5a5986aa0a",
+  "examples/LumaEventInvite: LumaEventInvite": "258478860a5a5986aa0a",
+  "examples/MercuryReceipt: Default": "8d4ce1c1a7f98344270a",
+  "examples/MercuryReceipt: MercuryReceipt": "8d4ce1c1a7f98344270a",
+  "examples/MorningBrewDigest: Default": "2ccfffc7b217a5d9b233",
+  "examples/MorningBrewDigest: MorningBrewDigest": "2ccfffc7b217a5d9b233",
+  "examples/NikeDrop: Default": "b290e93f43ac97b8c3de",
+  "examples/NikeDrop: NikeDrop": "b290e93f43ac97b8c3de",
+  "examples/NotionWelcome: Default": "3a793de5c539895f05e1",
+  "examples/NotionWelcome: NotionWelcome": "3a793de5c539895f05e1",
+  "examples/ProductDigest: Default": "ab8460537de9356724c0",
+  "examples/ProductDigest: ProductDigest": "ab8460537de9356724c0",
+  "examples/StripeReceipt: Default": "a9b938a1e07f0b7b798f",
+  "examples/StripeReceipt: StripeReceipt": "a9b938a1e07f0b7b798f",
+  "link 0: "https://example.com/"": "2727d376be3cb0012f3f",
+  "link 10: "https://example.com/?u={{user_id}}&t=*|TOKEN|*"": "b2fb79c0f04967994816",
+  "link 11: "<%asm_group_unsubscribe_raw_url%>"": "f6d2bce2e3598c9664e7",
+  "link 12: """: "54ee1e3330f68f4e996e",
+  "link 1: "https://example.com/path?a=1&b=2#hash"": "19fa8e9d2b15570dbd62",
+  "link 2: "http://example.com/a b"": "d49e4bbef2d445fc8413",
+  "link 3: "/relative/path"": "0045870d940cc782b4fb",
+  "link 4: "#anchor"": "57853ee02fb247d9aa4a",
+  "link 5: "mailto:hi@example.com?subject=Hi there"": "15c40ca79e40fff89168",
+  "link 6: "tel:+15550100"": "cfdd8816b42c08bafb97",
+  "link 7: "sms:+15550100"": "9f7dc3dffbdbc9164222",
+  "link 8: "javascript:alert(1)"": "0107f525ae7ac69fda05",
+  "link 9: "{{unsubscribe_url}}"": "86955cf075181838e739",
+  "menu: horizontal, center": "0f4d2a85cf2e3cbbebae",
+  "menu: horizontal, left": "ce963cf2cb97499ec34c",
+  "menu: horizontal, right": "1077a13034232ff6e968",
+  "menu: vertical, center": "0ec6ed14927ad8e8b67f",
+  "menu: vertical, left": "cf9570f2808e0e9cd7d4",
+  "menu: vertical, right": "34292e49e2e5cd288b47",
+  "merge tags": "d0d4f036c1b789541437",
+  "phone settings": "f795758e6020359b40ec",
+  "right-to-left": "cf2d6949578bbcef8879",
+  "social: circle, 16, center": "f9f433789505546da28f",
+  "social: circle, 16, left": "71927f16e271b88c2536",
+  "social: circle, 16, right": "161aa66f812f6aa674c5",
+  "social: circle, 32, center": "a922d739e99666ecc1e6",
+  "social: circle, 32, left": "9fd36a64480e7d159b24",
+  "social: circle, 32, right": "bb127ed1d1ef4864d48a",
+  "social: circle, 48px, center": "b8dddbc12270c93451e2",
+  "social: circle, 48px, left": "eccd0e8e51ff247fabbf",
+  "social: circle, 48px, right": "01a97f72a5cc25377e19",
+  "social: circle-black, 16, center": "afbdacafce4c6c799df6",
+  "social: circle-black, 16, left": "bc13441f196a843af7be",
+  "social: circle-black, 16, right": "c4e4e158c2691adb1daf",
+  "social: circle-black, 32, center": "ee32b7e70754aee628b2",
+  "social: circle-black, 32, left": "de70a4ea32ce3cc82717",
+  "social: circle-black, 32, right": "e4dc3bda003958f7c02a",
+  "social: circle-black, 48px, center": "bcdd8dfbe36d79ff663b",
+  "social: circle-black, 48px, left": "f6b3d49daa72444fe249",
+  "social: circle-black, 48px, right": "c8d3f0925139b86f31f0",
+  "social: circle-white, 16, center": "3d02cf186d70152518e7",
+  "social: circle-white, 16, left": "03e5267f8b2f76764ed0",
+  "social: circle-white, 16, right": "55b5e5faa33f7aa5974f",
+  "social: circle-white, 32, center": "550baef7a13b5e9865d2",
+  "social: circle-white, 32, left": "9b9816bf831a25952058",
+  "social: circle-white, 32, right": "c4c169c5a7e16edd64ac",
+  "social: circle-white, 48px, center": "f7cf2426d030d8173762",
+  "social: circle-white, 48px, left": "4a27d8e8ab5521e6fb7c",
+  "social: circle-white, 48px, right": "d3b027f7922ea0f2266e",
+  "social: custom icons": "edbce64a6f434a04c907",
+  "social: no icons": "71a4bbcce4fd7dd293d2",
+  "social: rounded, 16, center": "7b4dc6b2a49a20f1c857",
+  "social: rounded, 16, left": "7bf012981008873501b3",
+  "social: rounded, 16, right": "2acc2f0275c5a638847c",
+  "social: rounded, 32, center": "d9a540f0f30371e85165",
+  "social: rounded, 32, left": "59c2446ee88e91d6464e",
+  "social: rounded, 32, right": "6308118cf192df80160c",
+  "social: rounded, 48px, center": "b0f7d2b7e6d9cb9c4825",
+  "social: rounded, 48px, left": "f690aae882c1c0d60620",
+  "social: rounded, 48px, right": "02929762be4e90208f35",
+  "social: rounded-black, 16, center": "0e8347e04a5cdae9603f",
+  "social: rounded-black, 16, left": "3ecd8957d113a795597e",
+  "social: rounded-black, 16, right": "b266fddbb80e6bc90a78",
+  "social: rounded-black, 32, center": "a58570fae4144bf9a59e",
+  "social: rounded-black, 32, left": "1b28391b348aa80a3d88",
+  "social: rounded-black, 32, right": "deedb23710a2fcf09c66",
+  "social: rounded-black, 48px, center": "3778f616934c8b6bcafe",
+  "social: rounded-black, 48px, left": "2cdb42e0a38c3bcd7321",
+  "social: rounded-black, 48px, right": "023e983137eb431d1a25",
+  "social: squared, 16, center": "21a95b1be421c611c9eb",
+  "social: squared, 16, left": "1717a112245e80959e9b",
+  "social: squared, 16, right": "464e7bb0a1ca1ce199ca",
+  "social: squared, 32, center": "67e632856dd6f2eace69",
+  "social: squared, 32, left": "d2b7360dd3b5910ee2df",
+  "social: squared, 32, right": "228bea8a590bcc346a56",
+  "social: squared, 48px, center": "ea4e7845d92bbb098d89",
+  "social: squared, 48px, left": "a599f52b0a54ab688a58",
+  "social: squared, 48px, right": "1e796591db6fa3ca73f0",
+  "social: squared-black, 16, center": "6f0413e224d332b9dfbb",
+  "social: squared-black, 16, left": "57495720657324370b6b",
+  "social: squared-black, 16, right": "ea44bacea898fe389dc7",
+  "social: squared-black, 32, center": "af958826b5715080e88a",
+  "social: squared-black, 32, left": "a156774061b1c32c851c",
+  "social: squared-black, 32, right": "3183ee79903bbba36398",
+  "social: squared-black, 48px, center": "04b7f174f6c3543ff1a3",
+  "social: squared-black, 48px, left": "9db6317f26019c76c276",
+  "social: squared-black, 48px, right": "00960a6baa274f70c7d6",
+  "toSafeHtml": "b431fc70b647052545e5",
+  "user text 0: "Home"": "fa73a322dbeb9543490a",
+  "user text 10: "<%a%>\\" x-pwn=\\"1"": "9f09a24c8c1bab2df776",
+  "user text 11: "Fish &amp; chips & <b>bold</b>"": "d1090521cfea2361c6e6",
+  "user text 12: "“Quotes” ‘single’ — dash…"": "b3717a9fc1e254b7ebbe",
+  "user text 13: "مرحبا بالعالم"": "c72ee597f3d3ebe4b486",
+  "user text 14: "שלום עולם"": "c3db2120a182470a02b4",
+  "user text 15: "日本語のテキスト"": "bd02252ffa392b946753",
+  "user text 16: "😀 emoji 👍🏽"": "c59b384c642b53c2cd81",
+  "user text 17: "{{first_name}}"": "871c0eb86e6bfc682224",
+  "user text 18: "*|FNAME|*"": "fd1696638baf58d7687f",
+  "user text 19: "%%name%%"": "4391864f73e320f9d53c",
+  "user text 1: """: "82cec3abd5da9bb11b8b",
+  "user text 20: "line\\nbreak\\ttab"": "6a611d87cf09c91d408c",
+  "user text 2: " padded "": "284711b7e6199b038820",
+  "user text 3: "\\"><x-pwn></x-pwn>"": "891e8ef88ecf9c72bc4e",
+  "user text 4: "'><x-pwn></x-pwn>"": "8dfa4b574e856d09a2c0",
+  "user text 5: "\\" x-pwn=\\"1"": "25a5836d3ba29dd9c82a",
+  "user text 6: "' x-pwn='1"": "56bfd847be158ea5a3e4",
+  "user text 7: "</p></div></td></tr></table><x-pwn></x-pwn>"": "8b0a20bd86bcdca9dc7d",
+  "user text 8: "{{ \\" }} x-pwn=1 y"": "f8613a45bd32fc16a351",
+  "user text 9: "{{ x\\" x-pwn }}"": "794beb4005bf86b59a1c",
+}
+`;
+
+exports[`as a web page > renders every template with these blocks as 0.3.0 did 1`] = `
+{
+  "SpotifyWelcome: Default": "4e61c8fde449a09151cf",
+  "SpotifyWelcome: SpotifyPremiumWelcome": "4e61c8fde449a09151cf",
+  "a CDN for the icons": "0660f7b7fcdf9c7fc7f9",
+  "components/Body: Ecommerce": "4bb21aa39fd244b9c115",
+  "components/Body: Magazine": "499aba3d0b789cff27c5",
+  "components/Body: Newsletter": "1bd4f327dc27d76e76c1",
+  "components/Body: Receipt": "92bc43ea8e35fb353eb1",
+  "components/Body: SaaSLanding": "ac31daf558a1b02aefbb",
+  "components/Column: SidebarArticle": "efef937f2c39a4292e72",
+  "components/Column: TestimonialCards": "2159ca20f80d517c716a",
+  "components/CompletePixelParityTest: CompleteEmailTemplate": "4b2cc0db58361258f972",
+  "components/Divider: CustomBorder": "df8eff96480629a6525d",
+  "components/Divider: Dashed": "73fee244a41596faa8b3",
+  "components/Divider: Default": "8fd91d37ca9fbde2f88c",
+  "components/Divider: DividerShowcase": "6a772ae413a01c28a7f1",
+  "components/Divider: EmailMode": "d457d65b10bf9d421fbc",
+  "components/Divider: ThickAccent": "a46640b94d1932085aca",
+  "components/Html: CallToAction": "499f17408526a19411fe",
+  "components/Html: Default": "10b80318d65255878119",
+  "components/Html: EmailHtml": "5d5272be68adfd470060",
+  "components/Html: HtmlShowcase": "ef62f4cb83182ed87172",
+  "components/Html: ProgressBars": "e9a2af563c11e6696c1b",
+  "components/Html: Statistics": "f969bb0d84fa42348f99",
+  "components/Html: StyledCard": "6bd4084ac5834a5e952d",
+  "components/Html: TestimonialCard": "1c2e3ba84507c626e612",
+  "components/Menu: Default": "9438e80bcc4834d39302",
+  "components/Menu: EmailHeader": "cd093c69fd9e4ffc438e",
+  "components/Menu: FooterLinks": "9472eb6b39eb270d4de8",
+  "components/Menu: FullPropsAPI": "2d762da87efa7293737d",
+  "components/Menu: StyledNavigation": "6296a9027d09c67be80e",
+  "components/Row: ProductShowcase": "ee6b25eab649d9e99d48",
+  "components/Row: ServiceCards": "79af2e195bc50860b336",
+  "components/Social: ColorfulSocialIcons": "bcdcdc0bfdc9a0779067",
+  "components/Social: Default": "798f98ff62a32d288c13",
+  "components/Social: EmailSocialIcons": "67638fa18c175bc0e873",
+  "components/Social: RoundedSocialIcons": "2c934a78310e0bba895b",
+  "components/Social: SocialMediaBar": "91dd0ea6547de6dc5ec9",
+  "components/Social: SquaredSocialIcons": "2684a6e0b423d3b5fddf",
+  "context/UnlayerProvider: FullEmailTemplate": "2496057e3916bcf849a1",
+  "context/UnlayerProvider: SocialWithCDN": "b2d954927fd7d445bda5",
+  "defaults": "743b86aa48932dc3a89e",
+  "defaults, bare in the root": "10a44952f41980aa7816",
+  "defaults, two columns": "bddba025792243931a22",
+  "design: device: a phone setting the block's values type doesn't have": "f185a2d59e82e9f3817c",
+  "design: divider: border and width": "218851537a56191d3f44",
+  "design: editor kitchen sink": "22f8911451b78517fbe4",
+  "design: html: as given": "9baace75fb81bd3b2264",
+  "design: menu: an item that calls a phone number": "51dadcf33e9310d91755",
+  "design: menu: items": "e1d3a5e76d7f715cc20e",
+  "design: menu: the editor's item keys, kept, and its links as their URLs": "d21b05a81197e269e7fd",
+  "design: social: an icon set Elements' type doesn't list": "bc92998e4205552a13dd",
+  "design: social: icons": "c50056eed323ee4a391d",
+  "divider: dashed, 100%": "15c4efbfe8e01b51ed4f",
+  "divider: dashed, 240px": "d04d9601d7269523101f",
+  "divider: dashed, 50%": "230e6e851958f2d50de7",
+  "divider: dotted, 100%": "7d441d480761ab3aa0f9",
+  "divider: dotted, 240px": "2072114bea909183b433",
+  "divider: dotted, 50%": "1b17eb579f501a1b7eb3",
+  "divider: double, 100%": "c99f40910895bd924e33",
+  "divider: double, 240px": "25f5d2d0e44b0de7b4ca",
+  "divider: double, 50%": "04f9f95727073698eb66",
+  "divider: none, 100%": "c0e6af2f478b0faadceb",
+  "divider: none, 240px": "a2fb1503cfa53589408e",
+  "divider: none, 50%": "af2d1d6bf7f96b608dc6",
+  "divider: solid, 100%": "4ae4bb21cd8b4b6d0f98",
+  "divider: solid, 240px": "feb4ba3a23d7dc1fd8ce",
+  "divider: solid, 50%": "243b981ca22f5374f109",
+  "editor links": "406a746eecbd8bf77c6c",
+  "examples/LumaEventInvite: Default": "896a652b54c8d245b55d",
+  "examples/LumaEventInvite: LumaEventInvite": "896a652b54c8d245b55d",
+  "examples/MercuryReceipt: Default": "910e2b64fb26b2249a25",
+  "examples/MercuryReceipt: MercuryReceipt": "910e2b64fb26b2249a25",
+  "examples/MorningBrewDigest: Default": "a4fda7a0f35233e50567",
+  "examples/MorningBrewDigest: MorningBrewDigest": "a4fda7a0f35233e50567",
+  "examples/NikeDrop: Default": "063cf4ff801d3c232898",
+  "examples/NikeDrop: NikeDrop": "063cf4ff801d3c232898",
+  "examples/NotionWelcome: Default": "317e049b907d92618302",
+  "examples/NotionWelcome: NotionWelcome": "317e049b907d92618302",
+  "examples/ProductDigest: Default": "d3ac8d2ee6dc9f82cbe9",
+  "examples/ProductDigest: ProductDigest": "d3ac8d2ee6dc9f82cbe9",
+  "examples/StripeReceipt: Default": "16f3ca0d0f1fefdb9404",
+  "examples/StripeReceipt: StripeReceipt": "16f3ca0d0f1fefdb9404",
+  "link 0: "https://example.com/"": "6dd404a99beb1473c1e0",
+  "link 10: "https://example.com/?u={{user_id}}&t=*|TOKEN|*"": "39c23e4b15f1539d9d75",
+  "link 11: "<%asm_group_unsubscribe_raw_url%>"": "fd1ce7491282150f5820",
+  "link 12: """: "8bf1f3ccc4733d828c73",
+  "link 1: "https://example.com/path?a=1&b=2#hash"": "e8ad468757b85c822863",
+  "link 2: "http://example.com/a b"": "10141ac8282c9ca6cf0d",
+  "link 3: "/relative/path"": "7efebb4fa46c42a8420f",
+  "link 4: "#anchor"": "ca5261edc23cd68f9c7d",
+  "link 5: "mailto:hi@example.com?subject=Hi there"": "4cf11cd1edcd0003a7b4",
+  "link 6: "tel:+15550100"": "a16645b57041d9082308",
+  "link 7: "sms:+15550100"": "0a9dad0f68632b448226",
+  "link 8: "javascript:alert(1)"": "cb5c73844884eb5f608c",
+  "link 9: "{{unsubscribe_url}}"": "65aa393d5732548c2047",
+  "menu: horizontal, center": "32b2f74fa3fe6536046c",
+  "menu: horizontal, left": "96e11f4c7beb15f3eef6",
+  "menu: horizontal, right": "bf0674c86179e9f007ee",
+  "menu: vertical, center": "ec643bb1479027afbbe5",
+  "menu: vertical, left": "080bafada690dbc8e2e8",
+  "menu: vertical, right": "e7b5b4b9b173ca261d6c",
+  "merge tags": "5480835d7a4745631c69",
+  "phone settings": "7a273f90f95ad9ec51fa",
+  "right-to-left": "5a6358c452aaa59b02c7",
+  "social: circle, 16, center": "ed11168c9ea306d85624",
+  "social: circle, 16, left": "fd4e7f21fdab77d12e98",
+  "social: circle, 16, right": "1f0b7225d2211e53861c",
+  "social: circle, 32, center": "9032970e7c21f124cdda",
+  "social: circle, 32, left": "636c37ed14ddcf34b8c0",
+  "social: circle, 32, right": "a8a83d593a6c4eb174b2",
+  "social: circle, 48px, center": "fbb3a983676d15d8d4eb",
+  "social: circle, 48px, left": "72b1062752cb77e17f5e",
+  "social: circle, 48px, right": "c5fc2b57e4cc4bdcd58e",
+  "social: circle-black, 16, center": "0ab8c596df7c17e02458",
+  "social: circle-black, 16, left": "1db7d97faea3781ee530",
+  "social: circle-black, 16, right": "24b9a6e3a294e91e179c",
+  "social: circle-black, 32, center": "34de26b6762b9124d26a",
+  "social: circle-black, 32, left": "7ee383e59a49638e544f",
+  "social: circle-black, 32, right": "c50c4a9c57cd0af262f6",
+  "social: circle-black, 48px, center": "ee4085e7546bd2e0dbc2",
+  "social: circle-black, 48px, left": "d6a76cb842fb1ca0fcc8",
+  "social: circle-black, 48px, right": "4aedeb9af29b5969add9",
+  "social: circle-white, 16, center": "d608b7bfae6ce891653a",
+  "social: circle-white, 16, left": "aaa96eaf0d798fffa2ce",
+  "social: circle-white, 16, right": "4cbe08edefd374b960e0",
+  "social: circle-white, 32, center": "aedfe1aef307ac11edf7",
+  "social: circle-white, 32, left": "478e4e4ada7bceefa935",
+  "social: circle-white, 32, right": "4733dba27a7cd0d7beb9",
+  "social: circle-white, 48px, center": "69c399e892957e5c2cce",
+  "social: circle-white, 48px, left": "ea99f44ea43dcb4aa3ee",
+  "social: circle-white, 48px, right": "ac3ccee680779d436504",
+  "social: custom icons": "e676f0de31c69fa29baa",
+  "social: no icons": "058d8413e11899d73d7f",
+  "social: rounded, 16, center": "cd53ae131ec0b3aa3f65",
+  "social: rounded, 16, left": "3953cb464bd8c5fbfedc",
+  "social: rounded, 16, right": "dbc195a4c991a4873460",
+  "social: rounded, 32, center": "64529e9886cffb8daa67",
+  "social: rounded, 32, left": "b48aad61c2721dfd0ae3",
+  "social: rounded, 32, right": "262aa4bd767dc4ec2896",
+  "social: rounded, 48px, center": "0bc7eb819459bea86d71",
+  "social: rounded, 48px, left": "7932408d20f639544d4f",
+  "social: rounded, 48px, right": "c38b7655d9df5b59e268",
+  "social: rounded-black, 16, center": "7340a9c0fa766c20ad66",
+  "social: rounded-black, 16, left": "6bf7102a82275dcb8ef9",
+  "social: rounded-black, 16, right": "ab092b0db65f847e51f2",
+  "social: rounded-black, 32, center": "4b7555808d56b76aad85",
+  "social: rounded-black, 32, left": "d094d544d6570727337c",
+  "social: rounded-black, 32, right": "5db4c4ca39352d8291e8",
+  "social: rounded-black, 48px, center": "ce4a6399d30854095dd7",
+  "social: rounded-black, 48px, left": "bb2d65f4c1a4894f34b8",
+  "social: rounded-black, 48px, right": "b5404fbf7d8cef5455a6",
+  "social: squared, 16, center": "006b634939cee999e003",
+  "social: squared, 16, left": "225f06ec0c96cd367052",
+  "social: squared, 16, right": "3ff68f37e121385824fd",
+  "social: squared, 32, center": "d978ccc584a55bd2d646",
+  "social: squared, 32, left": "f1b2ac7524d091da0b43",
+  "social: squared, 32, right": "3c3da2e12cc442d52602",
+  "social: squared, 48px, center": "aec4becce2e296838dff",
+  "social: squared, 48px, left": "31a3c9ff21b3d1924a13",
+  "social: squared, 48px, right": "2717197d9f5ca95ea719",
+  "social: squared-black, 16, center": "f82efeecd649ad7e6705",
+  "social: squared-black, 16, left": "10877a72f31066f687c5",
+  "social: squared-black, 16, right": "10d0758f7ef43aba7f44",
+  "social: squared-black, 32, center": "de58d89dab9f168c307c",
+  "social: squared-black, 32, left": "88a7599e5328cb198d34",
+  "social: squared-black, 32, right": "edaa307b39e8a7d02438",
+  "social: squared-black, 48px, center": "f2483cf1a9abacb092fd",
+  "social: squared-black, 48px, left": "4b9d1add65d910f4ed02",
+  "social: squared-black, 48px, right": "368adec94b372b7bf7f8",
+  "toSafeHtml": "a7d2c850aa2c03de2bac",
+  "user text 0: "Home"": "91b4bed4eb702a0aac8d",
+  "user text 10: "<%a%>\\" x-pwn=\\"1"": "3777d9a52800992b0ecd",
+  "user text 11: "Fish &amp; chips & <b>bold</b>"": "9e556173725c7f2f000c",
+  "user text 12: "“Quotes” ‘single’ — dash…"": "8f878df564e707e31915",
+  "user text 13: "مرحبا بالعالم"": "14a74ce37f684dfc7c7b",
+  "user text 14: "שלום עולם"": "b20b763509358f88f9b9",
+  "user text 15: "日本語のテキスト"": "22fe8795c34212eb8636",
+  "user text 16: "😀 emoji 👍🏽"": "e628248998ea3b6e608a",
+  "user text 17: "{{first_name}}"": "24a962757c0ff36807e6",
+  "user text 18: "*|FNAME|*"": "ec989525d2e57725cc49",
+  "user text 19: "%%name%%"": "b85578a453916e5399b2",
+  "user text 1: """: "b5936a19b49144d1c4ea",
+  "user text 20: "line\\nbreak\\ttab"": "59c0441a59bb0e2b7481",
+  "user text 2: " padded "": "e1bd5f6a3aac3f9c8bc8",
+  "user text 3: "\\"><x-pwn></x-pwn>"": "145f08ee7ae18fd5b5b4",
+  "user text 4: "'><x-pwn></x-pwn>"": "a0cb315b7a2703207443",
+  "user text 5: "\\" x-pwn=\\"1"": "bfda6ea714e181a6769a",
+  "user text 6: "' x-pwn='1"": "97f2f447a90a45185633",
+  "user text 7: "</p></div></td></tr></table><x-pwn></x-pwn>"": "752f0ff560e10238e0d5",
+  "user text 8: "{{ \\" }} x-pwn=1 y"": "825a90094bbe818b35b0",
+  "user text 9: "{{ x\\" x-pwn }}"": "71b62234de031bf1d252",
+}
+`;
diff --git a/packages/react/src/exporters/base64.ts b/packages/react/src/exporters/base64.ts
new file mode 100644
index 00000000..721c3789
--- /dev/null
+++ b/packages/react/src/exporters/base64.ts
@@ -0,0 +1,15 @@
+/**
+ * UTF-8 text as base64 and back, as @unlayer/exporters' Menu does it: it writes a link's click handler as a
+ * `data-onclick-encoded` attribute (React leaves out an `onclick` given as a string), then as `onclick` decoded.
+ * With TextEncoder, TextDecoder, btoa and atob, which every runtime Elements runs in has (the exporters' first choice).
+ */
+export function encodeBase64(text: string): string {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += 32768) binary += String.fromCharCode(...bytes.subarray(i, i + 32768));
+  return btoa(binary);
+}
+
+export function decodeBase64(base64: string): string {
+  return new TextDecoder().decode(Uint8Array.from(atob(base64), (char) => char.charCodeAt(0)));
+}
diff --git a/packages/react/src/exporters/divider.ts b/packages/react/src/exporters/divider.ts
new file mode 100644
index 00000000..6f0e4b9d
--- /dev/null
+++ b/packages/react/src/exporters/divider.ts
@@ -0,0 +1,9 @@
+import { element, staticMarkup } from "./markup";
+
+/** Divider's web and document HTML, as @unlayer/exporters' DividerExporters write them with React (byte for byte). */
+export function divider(values: Record<string, any>): string {
+  const { border, width, textAlign } = values;
+  let rule: Record<string, unknown> = { width, display: "inline-block" };
+  if (border) rule = { ...(typeof border == "object" ? border : { borderTop: border }), ...rule, lineHeight: border?.borderTopWidth ?? 1, height: "0px", verticalAlign: "middle" };
+  return staticMarkup(element("div", { style: { textAlign, lineHeight: 0 }, "aria-label": "divider" }, element("div", { style: rule }, " ")));
+}
diff --git a/packages/react/src/exporters/html.ts b/packages/react/src/exporters/html.ts
new file mode 100644
index 00000000..623fa529
--- /dev/null
+++ b/packages/react/src/exporters/html.ts
@@ -0,0 +1,10 @@
+import { element, staticMarkup } from "./markup";
+
+/**
+ * The Html block's web and document HTML, as @unlayer/exporters' HtmlExporters write them with React (byte for
+ * byte): its markup in a `<div>`, through the config's `toSafeHtml` where there's one.
+ */
+export function html(values: Record<string, any>, ...args: any[]): string {
+  const { exporterConfig: config } = args[6] || {};
+  return staticMarkup(element("div", { dangerouslySetInnerHTML: { __html: config?.toSafeHtml ? config.toSafeHtml(values.html) : values.html } }));
+}
diff --git a/packages/react/src/exporters/markup.ts b/packages/react/src/exporters/markup.ts
new file mode 100644
index 00000000..b3db3c68
--- /dev/null
+++ b/packages/react/src/exporters/markup.ts
@@ -0,0 +1,46 @@
+/**
+ * HTML as react-dom/server's renderToStaticMarkup writes it, for the elements the web and document exporters of
+ * Divider, Html, Menu and Social render with React in @unlayer/exporters: so those blocks render without react-dom
+ * (an edge runtime, a React Server Components layer), the same as with it. Written by the engine's host markup
+ * (src/engine/host.ts), as the walker writes a template's; a child that's a React element (a Menu item's text) is
+ * rendered by the walker.
+ */
+import type React from "react";
+import { escapeText, openTag, propsBody, validateHost, VOID } from "../engine/host";
+import { REACT_18 } from "../engine/react-compat";
+import { renderStatic } from "../engine";
+
+/** An element's HTML, kept apart from text (which is escaped where it's put). */
+export class Markup {
+  constructor(readonly html: string) {}
+}
+
+/** Children as React renders them: text escaped, numbers as text, nothing for booleans, null and functions. */
+function children(node: unknown): string {
+  if (node == null || typeof node === "boolean" || typeof node === "function" || typeof node === "symbol") return "";
+  if (typeof node === "string" || typeof node === "number") return escapeText(node);
+  // (React 18 renders no BigInt.)
+  if (typeof node === "bigint") return REACT_18 ? "" : escapeText(node);
+  if (node instanceof Markup) return node.html;
+  if (Array.isArray(node)) return node.map(children).join("");
+  // A React element (an item's text given as JSX), as the walker renders it.
+  return renderStatic(node as React.ReactNode);
+}
+
+/** `React.createElement(tag, props, ...children)`, rendered (the props React keeps for itself left out). */
+export function element(tag: "a" | "div" | "img" | "span", props: Record<string, unknown>, ...given: unknown[]): Markup {
+  const all: Record<string, any> = {};
+  for (const name in props) {
+    // (`key`, `ref`, `__self` and `__source` are React's; React's element can't have its own `__proto__`.)
+    if (!Object.prototype.hasOwnProperty.call(props, name) || name === "key" || name === "ref" || name === "__self" || name === "__source" || name === "__proto__") continue;
+    Object.defineProperty(all, name, { value: props[name], enumerable: true, writable: true, configurable: true });
+  }
+  if (given.length) all.children = given.length > 1 ? given : given[0];
+  validateHost(tag, all);
+  const open = openTag(tag, all);
+  if (VOID.has(tag)) return new Markup(open);
+  return new Markup(`${open}${propsBody(tag, all) ?? children(all.children)}</${tag}>`);
+}
+
+/** HTML as the exporters write what React renders: without the image preloads React 19 adds (nor any in markup given). */
+export const staticMarkup = (markup: Markup | null): string => (markup ? markup.html : "").replace(/<link rel="preload" as="image"[^>]*\/?>/g, "");
diff --git a/packages/react/src/exporters/menu.ts b/packages/react/src/exporters/menu.ts
new file mode 100644
index 00000000..a2f597a6
--- /dev/null
+++ b/packages/react/src/exporters/menu.ts
@@ -0,0 +1,89 @@
+import { decodeBase64, encodeBase64 } from "./base64";
+import { element, staticMarkup } from "./markup";
+import { present } from "./present";
+
+/** lodash's `omit(value, ["onClick"])`: its keys, own and inherited, but `onClick`. */
+function withoutOnClick(value: unknown): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  if (value != null) {
+    const from = Object(value) as Record<string, unknown>;
+    for (const key in from) {
+      if (key === "onClick" || (key === "constructor" && !Object.prototype.hasOwnProperty.call(from, key))) continue;
+      Object.defineProperty(out, key, { value: from[key], enumerable: true, writable: true, configurable: true });
+    }
+  }
+  return out;
+}
+
+/** The keys that aren't undefined. */
+const defined = (attrs: Record<string, unknown>) => Object.keys(attrs).reduce<Record<string, unknown>>((out, key) => (attrs[key] === undefined ? out : { ...out, [key]: attrs[key] }), {});
+
+/** A link's attributes from the link editor's value (`{ url, target, onClick, class, customAttrs }`), as the exporters read it. */
+function linkAttrs(link: any, defaults: Record<string, unknown> = { href: "" }): Record<string, any> {
+  const attrs = { ...withoutOnClick(link?.customAttrs), href: link?.url || undefined, target: link?.target || undefined, onclick: link?.onClick || undefined, class: link?.class || undefined };
+  // Custom attributes, all of them empty, on a link with no URL or click handler: no link.
+  const empty =
+    link?.customAttrs &&
+    Object.keys(link.customAttrs).length > 0 &&
+    Object.keys(link.customAttrs).every((key) => !link.customAttrs[key] || link.customAttrs[key].trim() === "") &&
+    !link?.url &&
+    !link?.onClick;
+  return empty ? {} : { ...defaults, ...defined(attrs) };
+}
+
+/** The menu's markup, as the exporters' React component renders it for an export. */
+function markup(values: Record<string, any>): string {
+  const { menu: { items: given }, fontFamily, fontSize, linkColor, align, separator, textColor, padding, layout, fontWeight, letterSpacing } = values;
+  const items = present(given);
+  if (items.length === 0) return "";
+  return staticMarkup(
+    element(
+      "div",
+      { style: { textAlign: align, letterSpacing }, "aria-label": "menu" },
+      items.map((item, index) => {
+        const attrs = linkAttrs(item.link);
+        // (React leaves out an `onclick` it's given as a string, so it goes in another attribute until it's rendered.)
+        if (typeof attrs.onclick == "string") {
+          attrs["data-onclick-encoded"] = encodeBase64(attrs.onclick);
+          delete attrs.onclick;
+        }
+        const elements = [
+          element(
+            "a",
+            {
+              ...attrs,
+              "aria-label": `Menu item - ${item?.text || index}`,
+              key: `menu-item-${index}`,
+              className: "v-padding v-font-size v-layout-display v-font-weight v-letter-spacing",
+              style: { display: layout === "horizontal" ? "inline-block" : "block", padding, fontSize, fontFamily: fontFamily?.value, color: attrs.href ? linkColor : textColor, textDecoration: "none", fontWeight },
+            },
+            item.text
+          ),
+        ];
+        if (separator && layout !== "vertical" && index + 1 < items.length)
+          elements.push(
+            element(
+              "span",
+              {
+                "aria-label": "menu separator",
+                className: "v-padding v-font-size v-letter-spacing hide-mobile",
+                key: `menu-separator-${index}`,
+                style: { display: "inline-block", padding, fontSize, fontFamily: fontFamily?.value, color: textColor, fontWeight },
+              },
+              separator
+            )
+          );
+        return elements;
+      })
+    )
+  );
+}
+
+/**
+ * Menu's web HTML (which a document uses too), as @unlayer/exporters' MenuExporters write it with React (byte for
+ * byte). Item text or a separator given as an element renders as the walker renders it.
+ */
+export function menu(values: Record<string, any>): string {
+  const html = markup({ ...values, menu: { ...values?.menu, items: present(values?.menu?.items || []) } });
+  return html.replace(/data-onclick-encoded="([^\"]+)"/gi, (_, encoded: string) => `onclick="${decodeBase64(encoded)}"`);
+}
diff --git a/packages/react/src/exporters/no-react-dom.test.tsx b/packages/react/src/exporters/no-react-dom.test.tsx
new file mode 100644
index 00000000..1b0d77d4
--- /dev/null
+++ b/packages/react/src/exporters/no-react-dom.test.tsx
@@ -0,0 +1,119 @@
+/**
+ * Pages and documents render without react-dom: with react-dom/server's renderers made to throw, in this test's
+ * modules and in the @unlayer/exporters module Node loads (where its own web and document exporters of Divider, Html,
+ * Menu and Social call them), each of those blocks renders on a page and in a document, and so does a whole template
+ * with every block, by every renderer, the same as with them. (@unlayer/exporters still imports react-dom/server, so
+ * it has to be installed: it isn't called.)
+ */
+import { createRequire } from "node:module";
+import { describe, expect, it, onTestFinished, vi } from "vitest";
+import { DividerExporters, HtmlExporters, MenuExporters, SocialExporters } from "@unlayer/exporters";
+import { Button, Column, Divider, Document, Heading, Html, Image, Menu, Page, PageBreak, Paragraph, Row, Social, Table, Video, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText } from "../index";
+import * as Async from "../async";
+import { UNLAYER_RENDER_KEY } from "../utils/create-component";
+
+const { RENDERERS, poisoned } = vi.hoisted(() => ({
+  RENDERERS: ["renderToString", "renderToStaticMarkup", "renderToNodeStream", "renderToStaticNodeStream", "renderToPipeableStream", "renderToReadableStream"] as const,
+  poisoned: () => {
+    throw new Error("react-dom/server can't run here");
+  },
+}));
+
+// This test's modules (Elements' own) get a react-dom/server that can't render.
+vi.mock("react-dom/server", async (actual) => ({ ...(await actual<object>()), ...Object.fromEntries(RENDERERS.map((name) => [name, poisoned])) }));
+
+/** The react-dom/server @unlayer/exporters renders with (Node's module, which vi.mock doesn't reach). */
+const exportersServer = createRequire(createRequire(import.meta.url).resolve("@unlayer/exporters"))("react-dom/server") as Record<string, unknown>;
+
+/** Its renderers made to throw, until the test ends. */
+function poisonExporters() {
+  const saved = RENDERERS.map((name) => [name, exportersServer[name]] as const);
+  for (const name of RENDERERS) if (name in exportersServer) exportersServer[name] = poisoned;
+  onTestFinished(() => {
+    for (const [name, renderer] of saved) if (renderer) exportersServer[name] = renderer;
+  });
+}
+
+const BLOCKS = {
+  Divider: [Divider, { width: "80%", border: { borderTopWidth: "2px", borderTopStyle: "dashed", borderTopColor: "#cccccc" }, textAlign: "left" }],
+  Html: [Html, { html: '<p>Hello <b>{{name}}</b> &amp; "you"</p>' }],
+  Menu: [Menu, { items: [{ text: "Home", href: "https://example.com/" }, { text: "Ünï <b>", href: "javascript:alert(1)", target: "_self" }, { text: "No link" }], separator: "|", linkColor: "#2563eb" }],
+  Social: [Social, { icons: [{ name: "Facebook", url: "https://facebook.com/x" }, { name: "Email", url: "hi@example.com" }], iconType: "rounded", iconSize: 24, spacing: 6 }],
+} as const;
+
+/** A block's HTML as its component renders it in a mode (the hook-free render a Column calls). */
+function blockHtml(Component: unknown, props: object, mode: "web" | "document"): string {
+  const element = (Component as Record<string, (props: object) => { props: { dangerouslySetInnerHTML?: { __html: string } } }>)[UNLAYER_RENDER_KEY]({ ...props, mode });
+  const html = element.props.dangerouslySetInnerHTML?.__html;
+  if (html === undefined) throw new Error("rendered its error fallback");
+  return html;
+}
+
+describe.each(Object.entries(BLOCKS))("%s", (name, [Component, props]) => {
+  it.each(["web", "document"] as const)("renders in %s mode where react-dom/server can't render", (mode) => {
+    const before = blockHtml(Component, props, mode);
+    poisonExporters();
+    // (@unlayer/exporters' own exporter for it fails now.)
+    const upstream = { Divider: DividerExporters, Html: HtmlExporters, Menu: MenuExporters, Social: SocialExporters }[name]!;
+    const exporter = (upstream[mode] ?? upstream.web) as (...args: unknown[]) => string;
+    expect(() => exporter({ menu: { items: [{ text: "a" }] }, icons: { icons: [] }, html: "" })).toThrow("react-dom/server can't run here");
+    const error = vi.spyOn(console, "error");
+    try {
+      const html = blockHtml(Component, props, mode);
+      expect(html).toBe(before);
+      expect(html.length).toBeGreaterThan(20);
+      expect(error).not.toHaveBeenCalled();
+    } finally {
+      error.mockRestore();
+    }
+  });
+});
+
+describe("a whole template", () => {
+  const content = (
+    <>
+      <Row cells={[1, 2]}>
+        <Column>
+          <Heading>Hello, <b>world</b></Heading>
+          <Paragraph>
+            Text with a <a href="https://example.com/">link</a>
+          </Paragraph>
+          <Button href="https://example.com/go">Go</Button>
+          <Image src="https://example.com/a.png" alt="A" width={200} />
+        </Column>
+        <Column>
+          <Divider width="80%" />
+          <Html html="<p>Raw <b>HTML</b></p>" />
+          <Menu items={[{ text: "Home", href: "https://example.com/" }, { text: <b>Bold</b> as unknown as string, href: "https://example.com/b" }]} separator="|" />
+          <Social icons={[{ name: "Facebook", url: "https://facebook.com/x" }]} />
+          <Table columns={2} rows={1} />
+          <Video videoUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+          <PageBreak />
+        </Column>
+      </Row>
+    </>
+  );
+  const renders = {
+    renderToHtml: (root: React.ReactElement) => renderToHtml(root),
+    renderToHtmlParts: (root: React.ReactElement) => JSON.stringify(renderToHtmlParts(root)),
+    renderToPlainText: (root: React.ReactElement) => renderToPlainText(root),
+    renderToJson: (root: React.ReactElement) => JSON.stringify(renderToJson(root)),
+    "async renderToHtml": (root: React.ReactElement) => Async.renderToHtml(root),
+  };
+  it.each(Object.entries(renders).flatMap(([name, render]) => [[name, "Page", Page, render], [name, "Document", Document, render]] as const))("%s renders a %s where react-dom/server can't render", async (_, __, Root, render) => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    onTestFinished(() => warn.mockRestore());
+    const root = <Root>{content}</Root>;
+    const before = await render(root);
+    poisonExporters();
+    const error = vi.spyOn(console, "error");
+    try {
+      const after = await render(root);
+      expect(after).toBe(before);
+      expect(after).toContain("Bold");
+      expect(error).not.toHaveBeenCalled();
+    } finally {
+      error.mockRestore();
+    }
+  });
+});
diff --git a/packages/react/src/exporters/pages.test.tsx b/packages/react/src/exporters/pages.test.tsx
new file mode 100644
index 00000000..82f6e0fd
--- /dev/null
+++ b/packages/react/src/exporters/pages.test.tsx
@@ -0,0 +1,62 @@
+/**
+ * The full HTML of every template with a Divider, Html, Menu or Social block (test-corpus.tsx) as a Page and as a
+ * Document, as a digest of each document. The snapshot was written by 0.3.0 (React 18), where these blocks' web and
+ * document exporters rendered with react-dom/server, so the documents must stay the same byte for byte (with React
+ * 19, as react-dom 19 writes them), but for a `javascript:` URL (see BLOCKED).
+ */
+import React from "react";
+import { createHash } from "node:crypto";
+import { describe, expect, it, vi } from "vitest";
+import { Document, Page, renderToHtml } from "../index";
+import { as, corpus } from "./test-corpus";
+
+/** The blocks' HTML, or the class of their wrapper: a template with any of them. */
+const BLOCKS = /aria-label="(divider|menu|social)"|u_content_(divider|html|menu|social)\b|\/social\/icons\//;
+
+const digest = (html: string) => createHash("sha256").update(html).digest("hex").slice(0, 20);
+
+/**
+ * Where a document is written otherwise than react-dom 18 wrote it (the snapshot): a `javascript:` link, which
+ * Elements writes as react-dom 19 does, as a URL that throws, with any React (see attributes.ts), the editor's exporters'
+ * own links too (a Button's, an Image's: see unrunLinks). Each one's digest, the snapshot's and the one written now, by
+ * root.
+ */
+const BLOCKED: Record<string, Record<string, [string, string]>> = {
+  Page: { 'link 8: "javascript:alert(1)"': ["cb5c73844884eb5f608c", "0cc7c54651e42795bbee"] },
+  Document: { 'link 8: "javascript:alert(1)"': ["0107f525ae7ac69fda05", "bf6a9d1c77778cdc7242"] },
+};
+
+/**
+ * A root given the editor's default link style where it sets none, as the snapshot's documents had its rule: Elements
+ * writes no rule for a body's links where its template sets no `linkStyle` now (the exporters' default, for the body's
+ * id, won over a template's own link CSS).
+ */
+const LINK_STYLE = { linkColor: "#0000ee", linkHoverColor: "#0000ee", linkUnderline: true, linkHoverUnderline: true };
+const linked = (node: React.ReactElement<any>): React.ReactElement => {
+  if (node.type === Page || node.type === Document) return node.props.linkStyle !== undefined || node.props.values?.linkStyle !== undefined ? node : React.cloneElement(node, { linkStyle: LINK_STYLE });
+  return React.isValidElement(node.props?.children) ? React.cloneElement(node, undefined, linked(node.props.children as React.ReactElement)) : node;
+};
+
+describe.each([
+  ["a web page", Page],
+  ["a document", Document],
+] as const)("as %s", (_, Root) => {
+  it("renders every template with these blocks as 0.3.0 did", () => {
+    const quiet = [vi.spyOn(console, "warn").mockImplementation(() => {}), vi.spyOn(console, "error").mockImplementation(() => {})];
+    try {
+      const digests: Record<string, string> = {};
+      for (const { name, element, options } of corpus()) {
+        const html = renderToHtml(linked(as(element, Root)), options as never);
+        if (BLOCKS.test(html) || /^components\/(Divider|Html|Menu|Social): /.test(name)) digests[name] = digest(html);
+      }
+      expect(Object.keys(digests).length).toBeGreaterThan(150);
+      for (const [name, [react18, blocked]] of Object.entries(BLOCKED[Root.displayName])) {
+        expect(digests[name], name).toBe(blocked);
+        digests[name] = react18;
+      }
+      expect(digests).toMatchSnapshot();
+    } finally {
+      for (const spy of quiet) spy.mockRestore();
+    }
+  });
+});
diff --git a/packages/react/src/exporters/parity-values.ts b/packages/react/src/exporters/parity-values.ts
new file mode 100644
index 00000000..116346f5
--- /dev/null
+++ b/packages/react/src/exporters/parity-values.ts
@@ -0,0 +1,219 @@
+/**
+ * The values parity.test.ts gives each block's exporter: what the editor and Elements give them (links in the link
+ * editor's shape, icon sets, borders, markup) and past that (empty, null, numbers where text goes, markup and quotes
+ * in every text, `javascript:` URLs, React's own attribute names in a link's custom attributes). Every combination of
+ * the values that shape each block's HTML, then more combinations drawn by a seeded generator.
+ */
+import React from "react";
+import { LINKS, TEXTS } from "./test-corpus";
+
+type Values = Record<string, any>;
+
+/** A seeded generator (mulberry32): the same values on every run. */
+function random(seed: number) {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+const pick = <T>(next: () => number, list: readonly T[]): T => list[Math.floor(next() * list.length)];
+
+/** Every combination of the lists' values, one per key. */
+function combinations(lists: Record<string, readonly unknown[]>): Values[] {
+  return Object.entries(lists).reduce<Values[]>((all, [key, list]) => all.flatMap((values) => list.map((value) => (value === undefined ? { ...values } : { ...values, [key]: value }))), [{}]);
+}
+
+const ODD = [undefined, null, "", 0, 1, -1, 2.5, NaN, true, false, " 5 ", 10n] as const;
+const ALIGNS = ["left", "center", "right", "justify", "", undefined, '"><x>'] as const;
+
+// ---------- Divider ----------
+
+const BORDER_STYLES = ["solid", "dashed", "dotted", "double", "none"];
+const BORDERS = [
+  undefined,
+  null,
+  "",
+  "2px dashed #ff0000",
+  {},
+  ...BORDER_STYLES.flatMap((style) => ["1px", "3px", "10px", 2].map((width) => ({ borderTopWidth: width, borderTopStyle: style, borderTopColor: "#BBBBBB" }))),
+  { borderTopWidth: "1px" },
+  { borderTopColor: "rgba(0, 0, 0, 0.5)", borderTopStyle: "solid" },
+  { borderTopWidth: "2px", borderTopStyle: "solid", borderTopColor: '"><x-pwn>' },
+  { borderTopWidth: 0, borderTopStyle: "", borderTopColor: null },
+  { lineHeight: 3, width: "10px", display: "block", height: 4, borderTopWidth: "1px" },
+  { "--rule-color": " #ccc ", msTransform: "none", WebkitLineClamp: 2, scale: 2, zIndex: 1, opacity: 0, flex: NaN, aspectRatio: 1.5 },
+  { borderTop: "1px solid #000", borderBottom: { a: 1 }, 0: "zero", "a-b": [1, 2] },
+  5,
+  true,
+];
+
+/** CSS properties a border can carry into the rule's style (React writes numbers in px but for its unitless ones), and values. */
+const STYLE_NAMES = ["borderTopWidth", "borderTopStyle", "borderTopColor", "borderTop", "width", "display", "lineHeight", "height", "verticalAlign", "--custom", "msTransform", "MozOpacity", "OFlex", "WebkitLineClamp", "WebkitBoxFlex", "scale", "aspectRatio", "zIndex", "opacity", "fontWeight", "0", "a-b"];
+const STYLE_VALUES = ["1px", "solid", "#BBBBBB", "rgb(1, 2, 3)", 0, 1, 2, -3, 2.5, NaN, Infinity, "", " 3px ", "<&\"'>", null, true, [1, 2], { a: 1 }];
+
+export function dividerValues(): Values[] {
+  const all = combinations({ width: ["100%", "50%", "33.33%", "240px", "", undefined, 0, 80, null], textAlign: ALIGNS, border: BORDERS });
+  // Each property with each value, in a border.
+  for (const name of STYLE_NAMES) for (const value of STYLE_VALUES) all.push({ width: "100%", textAlign: "center", border: { borderTopWidth: "1px", [name]: value } });
+  const next = random(1);
+  for (let i = 0; i < 1500; i++) all.push({ width: pick(next, [...ODD, "60%", "1px"]), textAlign: pick(next, ALIGNS), border: pick(next, [...BORDERS, ...ODD]) });
+  return all;
+}
+
+// ---------- Html ----------
+
+const MARKUP = [
+  ...TEXTS,
+  "<p>Hello <strong>world</strong></p>",
+  '<table role="presentation"><tr><td style="color:#333">Cell</td></tr></table>',
+  '<a href="https://example.com/?a=1&b=2" target="_blank">Link</a>',
+  "<script>alert(1)</script><p>after</p>",
+  '<link rel="preload" as="image" href="https://example.com/a.png"><p>preload</p>',
+  '<link rel="preload" as="image" href="https://example.com/a.png" /><link rel="stylesheet" href="x.css">',
+  "<!-- comment --><p>x</p><!--[if mso]><table><![endif]-->",
+  '<img src="https://example.com/a.png" alt="A &amp; B">',
+  "<p>Hi {{first_name}}, *|FNAME|*</p>",
+  '<p dir="rtl">مرحبا <b>بالعالم</b></p>',
+  ...ODD,
+  { a: 1 },
+  ["<i>a</i>", "b"],
+];
+
+/** The block's config (the 8th argument): none, or `toSafeHtml` of each kind. */
+const HTML_META = [
+  undefined,
+  {},
+  { exporterConfig: {} },
+  { exporterConfig: { toSafeHtml: (html: string) => html } },
+  { exporterConfig: { toSafeHtml: (html: string) => `${html}`.replace(/<script[\s\S]*?<\/script>/g, "") } },
+  { exporterConfig: { toSafeHtml: () => undefined } },
+  { exporterConfig: { toSafeHtml: () => 7 } },
+  { exporterConfig: { toSafeHtml: null } },
+];
+
+export function htmlCases(): [Values, unknown][] {
+  return MARKUP.flatMap((html) => HTML_META.map((meta): [Values, unknown] => [{ html }, meta]));
+}
+
+// ---------- Menu ----------
+
+/** Custom attributes of a link: names React writes as given, renames, writes as booleans or leaves out, and values of each kind. */
+const ATTRIBUTE_NAMES = ["data-track", "data-onclick-encoded", "aria-hidden", "rel", "title", "id", "class", "className", "style", "href", "target", "onClick", "onmouseover", "tabIndex", "htmlFor", "hidden", "download", "is", "children", "dangerouslySetInnerHTML", "key", "ref", "rowSpan", "cols", "contentEditable", "allowFullScreen", "inert", "checked", "autoFocus", "src", "action", "xlinkHref", "strokeWidth", "transformOrigin", "crossOrigin", "x y", "1abc", "__proto__", "constructor", "defaultValue", "value"];
+const ATTRIBUTE_VALUES = [...ODD, "javascript:alert(1)", "<&\"'>", "  sp  ", "noopener", "YWxlcnQoMSk=", { a: 1 }, [1, 2], () => 1, { __html: "<b>i</b>" }];
+
+function customAttrs(next: () => number): Values {
+  const attrs: Values = {};
+  for (let i = Math.floor(next() * 4); i > 0; i--) Object.defineProperty(attrs, pick(next, ATTRIBUTE_NAMES), { value: pick(next, ATTRIBUTE_VALUES), enumerable: true, writable: true, configurable: true });
+  return attrs;
+}
+
+/** Links as the link editor gives them (`{ url, target, onClick, class, customAttrs }`), and none. */
+const LINK_SHAPES: unknown[] = [
+  undefined,
+  null,
+  "https://example.com/",
+  ...LINKS.map((url) => ({ url, target: "_blank" })),
+  ...["_self", "_parent", "_top", "", undefined, null].map((target) => ({ url: "https://example.com/t", target })),
+  { url: "https://example.com/attrs", customAttrs: { "data-track": "menu", rel: "noopener noreferrer", title: 'Say "hi"' } },
+  { url: "", customAttrs: { "data-empty": "", rel: " " } },
+  { url: "", customAttrs: { a: 5 } },
+  { url: "https://example.com/click", onClick: "track('menu', \"home\"); return true;", class: "menu-link primary" },
+  { url: "", onClick: "openChat()" },
+  { url: "", onClick: "é ✓ \ud800" },
+  { url: "https://example.com/", customAttrs: "ab" },
+  { url: "https://example.com/", customAttrs: { "data-onclick-encoded": "YWxlcnQoMSk=" } },
+  { url: "https://example.com/", customAttrs: { "data-onclick-encoded": "!!not base64" } },
+  { url: "https://example.com/", customAttrs: { is: "x-link", className: "c", onClick: "x()", hidden: true } },
+];
+
+/** Item text given as JSX (markup, a component, a Fragment): the string version renders it with the walker. */
+const Em = ({ children }: { children?: React.ReactNode }) => React.createElement("em", { className: "x" }, children);
+const ELEMENT_TEXTS = [
+  React.createElement("b", null, "Bold"),
+  React.createElement("span", { style: { color: "red", lineHeight: 1.5 }, "data-x": 1 }, "a & b"),
+  ["x", React.createElement("i", { key: "i" }, "y")],
+  React.createElement(Em, null, "e"),
+  React.createElement(React.Fragment, null, "f", 1),
+];
+const ITEM_TEXTS = [...TEXTS, 0, 7, null, undefined, ["a", 1, null, ["b"]], ...ELEMENT_TEXTS];
+
+export function menuValues(): Values[] {
+  const all: Values[] = [];
+  const item = (text: unknown, link: unknown) => ({ key: "1", text, link });
+  // Each text, each link, in a menu of each layout with separators.
+  for (const layout of ["horizontal", "vertical", undefined])
+    for (const separator of ["|", "", "•", "<b>/</b>", undefined])
+      for (const [i, link] of LINK_SHAPES.entries()) all.push({ menu: { items: [item(ITEM_TEXTS[i % ITEM_TEXTS.length], link), item("Second", LINK_SHAPES[(i + 1) % LINK_SHAPES.length]), null] }, layout, separator });
+  for (const text of ITEM_TEXTS) all.push({ menu: { items: [item(text, { url: `https://example.com/${text}` }), item(text, undefined)] }, separator: text, layout: "horizontal" });
+  // Each custom attribute name with each value, on a link.
+  for (const name of ATTRIBUTE_NAMES)
+    for (const value of ATTRIBUTE_VALUES) {
+      const customAttrs = Object.defineProperty({}, name, { value, enumerable: true, writable: true, configurable: true });
+      all.push({ menu: { items: [item("Home", { url: "https://example.com/", customAttrs }), item("Empty", { url: "", customAttrs })] }, layout: "horizontal" });
+    }
+  // The style values, each combination.
+  for (const values of combinations({
+    align: ["left", "center", "right", undefined],
+    fontFamily: [{ label: "Arial", value: "arial,helvetica,sans-serif" }, { value: "'Open Sans', sans-serif" }, undefined, "Georgia"],
+    fontWeight: [400, 700, "bold", undefined],
+    letterSpacing: ["0px", "1px", undefined],
+  }))
+    all.push({ ...values, menu: { items: [item("Home", { url: "https://example.com/" }), item("About", undefined)] }, layout: "horizontal", separator: "|", padding: "5px 15px", fontSize: "14px", linkColor: "#0068A5", textColor: "#444444" });
+  // Empty menus, and no menu.
+  for (const menu of [undefined, null, {}, { items: undefined }, { items: null }, { items: [] }, { items: [null, undefined] }, { items: "x" }]) all.push({ menu });
+  const next = random(2);
+  for (let i = 0; i < 2500; i++) {
+    const items = Array.from({ length: Math.floor(next() * 5) }, () => (next() < 0.07 ? null : item(next() < 0.85 ? pick(next, ITEM_TEXTS) : pick(next, ODD), next() < 0.7 ? pick(next, LINK_SHAPES) : { url: pick(next, LINKS), target: pick(next, ["_blank", "_self", undefined]), onClick: next() < 0.2 ? pick(next, ["x()", "", undefined]) : undefined, class: next() < 0.2 ? "c" : undefined, customAttrs: next() < 0.4 ? customAttrs(next) : undefined })));
+    all.push({
+      menu: { items },
+      separator: pick(next, ["|", "", "•", undefined, 0, "<i>-</i>"]),
+      layout: pick(next, ["horizontal", "vertical", undefined, "grid"]),
+      align: pick(next, ALIGNS),
+      padding: pick(next, ["5px 15px", "0px", 4, 0, undefined, " 3px "]),
+      fontSize: pick(next, ["14px", 14, 0, undefined, NaN]),
+      fontWeight: pick(next, [400, 700, "bold", undefined, 0]),
+      fontFamily: pick(next, [{ value: "arial" }, undefined, {}, "Georgia"]),
+      letterSpacing: pick(next, ["1px", 2, undefined, "", 0]),
+      linkColor: pick(next, ["#0068A5", undefined, "", "rgb(1, 2, 3)"]),
+      textColor: pick(next, ["#444444", undefined, "", "<x>"]),
+    });
+  }
+  return all;
+}
+
+// ---------- Social ----------
+
+const ICON_NAMES = ["Facebook", "X", "Twitter", "Instagram", "LinkedIn", "YouTube", "Pinterest", "TikTok", "WhatsApp", "Email", "Custom", "", '"><x>', "Ünï", 5, undefined];
+const ICON_TYPES = ["circle", "rounded", "squared", "circle-black", "circle-white", "rounded-black", "squared-black", "", undefined];
+const ICON_URLS = [...LINKS, "hi@example.com", undefined, 5, ["mailto"]];
+const SOCIAL_META = [undefined, {}, { exporterConfig: {} }, { exporterConfig: { cdnBaseUrl: "https://cdn.tools.unlayer.com" } }, { exporterConfig: { cdnBaseUrl: "https://cdn.example.com/a" } }, { exporterConfig: { cdnBaseUrl: '"><x>' } }];
+const CUSTOM_ICONS = { data: { customIcons: [{ name: "Custom", icons: { circle: "https://example.com/c.png", rounded: "" } }, { name: "Facebook", icons: { circle: "https://example.com/fb.png" } }, null] } };
+
+export function socialCases(): [Values, unknown][] {
+  const all: [Values, unknown][] = [];
+  // (An icon without a name or image throws in both, as the exporters read its name for its image.)
+  const icons = ICON_NAMES.filter((name) => typeof name === "string").map((name, i) => ({ name, url: ICON_URLS[i % ICON_URLS.length] }));
+  // Each icon set, size, spacing and alignment, with each icon.
+  for (const values of combinations({ iconType: ICON_TYPES, iconSize: [32, 16, 48, "40", 0, undefined, NaN], spacing: [5, 0, 10, undefined], align: ["left", "center", "right", undefined] }))
+    all.push([{ icons: { iconType: values.iconType, icons }, iconSize: values.iconSize, spacing: values.spacing, align: values.align }, SOCIAL_META[all.length % SOCIAL_META.length]]);
+  for (const url of ICON_URLS) for (const name of ICON_NAMES) if (name !== undefined || url) all.push([{ icons: { iconType: "circle", icons: [{ name, url }, { name: "X", url, imgUrl: "https://example.com/x.png" }] }, iconSize: 32, spacing: 5, align: "center" }, undefined]);
+  for (const meta of SOCIAL_META) {
+    all.push([{ icons: { iconType: "circle", icons: [] }, iconSize: 32, align: "left" }, meta]);
+    all.push([{ icons: { iconType: "circle", icons: [{ name: "Custom", url: "https://example.com/" }, { name: "Facebook", url: "https://example.com/" }, null], editor: CUSTOM_ICONS }, iconSize: 24, spacing: 4, align: "right" }, meta]);
+  }
+  for (const group of [undefined, {}, { icons: null }, { icons: "x" }, { iconType: "circle" }, { editor: {} }, { editor: { data: {} }, icons: [{ name: "Facebook" }] }]) all.push([{ icons: group, iconSize: 32 }, undefined]);
+  const next = random(3);
+  for (let i = 0; i < 2500; i++) {
+    const set = Array.from({ length: Math.floor(next() * 5) }, () => (next() < 0.06 ? pick(next, [null, undefined, 0, ""]) : { name: pick(next, ICON_NAMES), url: pick(next, ICON_URLS), ...(next() < 0.15 ? { imgUrl: pick(next, ["https://example.com/i.png", "", "javascript:x", '"><x>']) } : {}) }));
+    all.push([
+      { icons: { iconType: pick(next, ICON_TYPES), icons: set, ...(next() < 0.15 ? { editor: CUSTOM_ICONS } : {}) }, iconSize: pick(next, [32, 16, 0, "40", undefined, NaN, 2.5, true]), spacing: pick(next, [5, 0, 10, "8", undefined, -1]), align: pick(next, ALIGNS) },
+      pick(next, SOCIAL_META),
+    ]);
+  }
+  return all;
+}
diff --git a/packages/react/src/exporters/parity.test.tsx b/packages/react/src/exporters/parity.test.tsx
new file mode 100644
index 00000000..5bae5008
--- /dev/null
+++ b/packages/react/src/exporters/parity.test.tsx
@@ -0,0 +1,213 @@
+/**
+ * Divider, Html, Menu and Social write their web and document HTML as strings (divider.ts, html.ts, menu.ts,
+ * social.ts) where @unlayer/exporters renders it with react-dom/server. Both run here, and must write the same HTML
+ * byte for byte (or both throw): for every combination of the values that shape each block's HTML and thousands
+ * more drawn by a seeded generator (parity-values.ts), and for each block Elements renders in the test corpus
+ * (test-corpus.tsx: the stories, the codegen designs, the regression suite's user values) and with its defaults, as
+ * a Page and as a Document, with the values Elements gives the exporter.
+ *
+ * It's also the alarm for the pin: when the catalog moves @unlayer/exporters to a release whose HTML for these
+ * blocks differs, this test fails until the string versions write the new release's HTML (compare its compiled
+ * DividerExporters, HtmlExporters, MenuExporters and SocialExporters with these files). *
+ * Where they mean to differ: a `javascript:` URL (a link's, an icon's image), which the string versions write as
+ * react-dom 19 writes it, a URL that throws, with any React; react-dom 18 writes it as given (see attributes.ts). So
+ * the pinned exporters' HTML is compared with its `javascript:` URLs written so (`blockedUrls`).
+ */
+import { describe, expect, it, vi } from "vitest";
+import { JSDOM, VirtualConsole } from "jsdom";
+import { DividerExporters, HtmlExporters, MenuExporters, SocialExporters } from "@unlayer/exporters";
+import { Column, Divider, Document, Html, Menu, Page, Row, Social, renderToHtml } from "../index";
+import { divider } from "./divider";
+import { html } from "./html";
+import { menu } from "./menu";
+import { social } from "./social";
+import { dividerValues, htmlCases, menuValues, socialCases } from "./parity-values";
+import { as, corpus } from "./test-corpus";
+import { blockedUrls } from "../test-utils";
+
+type Exporter = (...args: any[]) => string;
+
+/** The arguments Elements calls each string exporter with, while a test renders templates. */
+const { calls } = vi.hoisted(() => ({ calls: [] as { block: "divider" | "html" | "menu" | "social"; args: unknown[] }[] }));
+vi.mock("./divider", async (actual) => {
+  const own = await actual<{ divider: Exporter }>();
+  return { divider: (...args: unknown[]) => (calls.push({ block: "divider", args }), own.divider(...args)) };
+});
+vi.mock("./html", async (actual) => {
+  const own = await actual<{ html: Exporter }>();
+  return { html: (...args: unknown[]) => (calls.push({ block: "html", args }), own.html(...args)) };
+});
+vi.mock("./menu", async (actual) => {
+  const own = await actual<{ menu: Exporter }>();
+  return { menu: (...args: unknown[]) => (calls.push({ block: "menu", args }), own.menu(...args)) };
+});
+vi.mock("./social", async (actual) => {
+  const own = await actual<{ social: Exporter }>();
+  return { social: (...args: unknown[]) => (calls.push({ block: "social", args }), own.social(...args)) };
+});
+
+/** The string versions. */
+const OWN: Record<string, Exporter> = { divider, html, menu, social };
+
+/** The upstream exporters each string version stands in for (Menu's and Social's web one renders documents too). */
+const UPSTREAM: Record<string, [string, Exporter][]> = {
+  divider: [["DividerExporters.web", DividerExporters.web as Exporter], ["DividerExporters.document", DividerExporters.document as Exporter]],
+  html: [["HtmlExporters.web", HtmlExporters.web as Exporter], ["HtmlExporters.document", HtmlExporters.document as Exporter]],
+  menu: [["MenuExporters.web", MenuExporters.web as Exporter]],
+  social: [["SocialExporters.web", SocialExporters.web as Exporter]],
+};
+
+const run = (exporter: Exporter, args: unknown[]): { html?: string; threw?: true } => {
+  try {
+    return { html: exporter(...args) };
+  } catch {
+    return { threw: true };
+  }
+};
+
+/** Where the string version and an upstream exporter write different HTML for the same arguments (one line each), and how many were compared. */
+function compare(block: string, own: Exporter, cases: unknown[][]): { compared: number; differences: string[] } {
+  const differences: string[] = [];
+  let compared = 0;
+  const error = vi.spyOn(console, "error").mockImplementation(() => {});
+  try {
+    for (const args of cases) {
+      const mine = run(own, args);
+      for (const [name, upstream] of UPSTREAM[block]) {
+        const theirs = run(upstream, args);
+        if (theirs.html !== undefined) theirs.html = blockedUrls(theirs.html);
+        compared++;
+        if (mine.threw && theirs.threw) continue;
+        if (mine.html !== theirs.html) differences.push(`${name}(${describeArgs(args)}): ${theirs.threw ? "throws" : JSON.stringify(theirs.html)} but the string version ${mine.threw ? "throws" : `gives ${JSON.stringify(mine.html)}`}`);
+      }
+    }
+  } finally {
+    error.mockRestore();
+  }
+  return { compared, differences: differences.slice(0, 5) };
+}
+
+const describeArgs = (args: unknown[]) => {
+  try {
+    return JSON.stringify(args[0], (_, value) => (typeof value === "function" ? "[function]" : typeof value === "bigint" ? `${value}n` : value)).slice(0, 300);
+  } catch {
+    return String(args[0]);
+  }
+};
+
+describe("for the values each block takes", () => {
+  it.each([
+    ["Divider", "divider", divider, () => dividerValues().map((values) => [values])],
+    ["Html", "html", html, () => htmlCases().map(([values, meta]) => [values, 0, 0, [], {}, {}, undefined, meta])],
+    ["Menu", "menu", menu, () => menuValues().map((values) => [values])],
+    ["Social", "social", social, () => socialCases().map(([values, meta]) => [values, 0, 0, [], {}, {}, undefined, meta])],
+  ] as const)("%s writes the pinned exporters' HTML", (_, block, own, cases) => {
+    const { compared, differences } = compare(block, own as Exporter, cases());
+    expect(differences).toEqual([]);
+    expect(compared).toBeGreaterThan(150);
+  });
+});
+
+describe("for the values Elements gives them", () => {
+  /** The calls a render makes of each string exporter. */
+  function rendered(render: () => void): Record<string, unknown[][]> {
+    calls.length = 0;
+    const quiet = [vi.spyOn(console, "warn").mockImplementation(() => {}), vi.spyOn(console, "error").mockImplementation(() => {})];
+    try {
+      render();
+    } finally {
+      for (const spy of quiet) spy.mockRestore();
+    }
+    const byBlock: Record<string, unknown[][]> = { divider: [], html: [], menu: [], social: [] };
+    for (const { block, args } of calls) byBlock[block].push(args);
+    return byBlock;
+  }
+
+  it("each block's defaults write the pinned exporters' HTML, on a page and in a document", () => {
+    const template = <Row><Column><Divider /><Html /><Menu /><Social /></Column></Row>;
+    const byBlock = rendered(() => {
+      renderToHtml(<Page>{template}</Page>);
+      renderToHtml(<Document>{template}</Document>);
+    });
+    for (const [block, cases] of Object.entries(byBlock)) {
+      expect(cases.length, block).toBe(2);
+      expect(compare(block, OWN[block], cases).differences).toEqual([]);
+    }
+  });
+
+  it("every block of the stories, codegen designs and regression values writes the pinned exporters' HTML", () => {
+    const templates = corpus();
+    const byBlock = rendered(() => {
+      for (const { element, options } of templates)
+        for (const Root of [Page, Document]) {
+          try {
+            renderToHtml(as(element, Root), options as never);
+          } catch {
+            // (A story that doesn't render as a page has no blocks to compare.)
+          }
+        }
+    });
+    for (const [block, cases] of Object.entries(byBlock)) {
+      expect(cases.length, block).toBeGreaterThan(40);
+      expect(compare(block, OWN[block], cases).differences).toEqual([]);
+    }
+  });
+});
+
+describe("a `javascript:` URL", () => {
+  const BLOCKED = "javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')";
+  it("is written as react-dom 19 writes it where the pinned exporters' react-dom is 18 (the values above have them)", () => {
+    const values = { menu: { items: [{ key: "1", text: "Go", link: { url: "javascript:alert(1)", target: "_self" } }] } };
+    expect(menu(values)).toBe(blockedUrls(MenuExporters.web(values as never) as string));
+    expect(menu(values)).toContain("javascript:throw new Error(&#x27;React has blocked");
+  });
+
+  // However it's written: React 19's test (C0 controls and spaces before it, tabs and line breaks in it, any case), in
+  // a list (written as its text), and given in a link's attributes.
+  const URLS: unknown[] = ["javascript:globalThis.__probe=1", " \u0001JavaScript:globalThis.__probe=1", "java\tscr\nipt:globalThis.__probe=1", ["javascript:globalThis.__probe=1"]];
+
+  /**
+   * The page's first link, clicked: its href, and whether the URL ran. JSDOM runs it a task later, later still on a
+   * busy machine: `until`, it's waited for (2 s at most), where it should run.
+   */
+  async function click(html: string, until = false): Promise<{ href: string | null; ran: boolean }> {
+    const dom = new JSDOM(html, { url: "https://example.test/", runScripts: "dangerously", virtualConsole: new VirtualConsole() });
+    try {
+      const link = dom.window.document.querySelector("a")!;
+      const ran = () => (dom.window as unknown as { __probe?: number }).__probe === 1;
+      link.click();
+      for (let waits = 0; waits < (until ? 400 : 3) && !ran(); waits++) await new Promise((resolve) => setTimeout(resolve, 5));
+      return { href: link.getAttribute("href"), ran: ran() };
+    } finally {
+      dom.window.close();
+    }
+  }
+
+  it("runs when a link holds one (the check below can see one run)", async () => {
+    expect(await click('<a href="javascript:globalThis.__probe=1" target="_self">Go</a>', true)).toEqual({ href: "javascript:globalThis.__probe=1", ran: true });
+  });
+
+  it.each([
+    ["a web page", Page],
+    ["a document", Document],
+  ] as const)("is written as one that throws, as react-dom 19 writes it, in a Menu's and a Social's links on %s, with any React", async (_, Root) => {
+    for (const url of URLS) {
+      const blocks = {
+        Menu: <Menu items={[{ text: "Go", href: url as string, target: "_self" }]} />,
+        Social: <Social icons={[{ name: "Facebook", url: url as string }]} />,
+        "Menu's link attributes": <Menu values={{ menu: { items: [{ key: "1", text: "Go", link: { name: "web", values: { href: "", target: "_self" }, attrs: { href: url } } }] } } as never} />,
+      };
+      for (const [name, block] of Object.entries(blocks)) expect([name, url, await click(renderToHtml(<Root><Row><Column>{block}</Column></Row></Root>))]).toEqual([name, url, { href: BLOCKED, ran: false }]);
+    }
+  });
+
+  it("is written so as an icon's image too, and as a block's link however it's written", () => {
+    const html = (root: React.ReactElement) => new JSDOM(renderToHtml(root)).window.document;
+    // A block's link written with a character reference: the editor's exporters write it as it is in an email (where a
+    // browser decodes it) and the design holds it so, so it's the URL that throws in every mode.
+    const page = html(<Page><Row><Column><Social icons={{ iconType: "circle", icons: [{ name: "Facebook", url: "&#106;avascript:x", imgUrl: "javascript:x" }] } as never} /></Column></Row></Page>);
+    expect(page.querySelector("img")!.getAttribute("src")).toBe(BLOCKED);
+    expect(page.querySelector("a")!.getAttribute("href")).toBe(BLOCKED);
+    // (Markup React writes escapes its `&`, so a reference in it stays text: see text-children.test.tsx.)
+  });
+});
diff --git a/packages/react/src/exporters/present.ts b/packages/react/src/exporters/present.ts
new file mode 100644
index 00000000..59f52057
--- /dev/null
+++ b/packages/react/src/exporters/present.ts
@@ -0,0 +1,2 @@
+/** The list without its null and undefined items (anything but a list: none), as the exporters read their lists. */
+export const present = (list: unknown): any[] => (list ? (Array.isArray(list) ? list.filter((item) => item != null) : []) : []);
diff --git a/packages/react/src/exporters/react-19.test.ts b/packages/react/src/exporters/react-19.test.ts
new file mode 100644
index 00000000..d0fb97a7
--- /dev/null
+++ b/packages/react/src/exporters/react-19.test.ts
@@ -0,0 +1,38 @@
+/**
+ * The string exporters write HTML as the React that's installed does (react-version.ts), and React 19 writes some
+ * attributes, styles and children otherwise than React 18, which these tests run with (parity.test.tsx compares
+ * with react-dom/server 18). Here React 19's: an element with each attribute name and value where React 19 writes
+ * otherwise than React 18 (and each name with a string and a number), style properties and children, against what
+ * react-dom/server 19.1.0 and 19.3.1 wrote for them (`__fixtures__/react-19.json`; 19.0 and 19.2 write the same as
+ * 19.1, and 19.3 adds `credentialless` and `maskType`).
+ */
+import { describe, expect, it, vi } from "vitest";
+import fixture from "./__fixtures__/react-19.json";
+
+type Entry = [string, unknown, string, string?];
+
+describe.each(["19.1.0", "19.3.1"])("as React %s", (version) => {
+  it("writes each attribute, style and child as react-dom/server does", async () => {
+    vi.resetModules();
+    vi.doMock("react", async () => {
+      const own = await vi.importActual<typeof import("react") & { default: object }>("react");
+      return { ...own, version, default: { ...own.default, version } };
+    });
+    const { element } = await import("./markup");
+    const differences: string[] = [];
+    const expect19 = (entry: Entry) => (version === "19.3.1" && entry[3] !== undefined ? entry[3] : entry[2]);
+    for (const entry of fixture.attributes as Entry[]) {
+      const html = element("a", { [entry[0]]: entry[1] }, "t").html;
+      if (html !== `<a${expect19(entry)}>t</a>`) differences.push(`${entry[0]}=${JSON.stringify(entry[1])}: ${html}`);
+    }
+    for (const entry of fixture.styles as Entry[]) {
+      const html = element("div", { style: { [entry[0]]: entry[1] } }, "t").html;
+      if (html !== `<div${entry[2]}>t</div>`) differences.push(`style ${entry[0]}: ${JSON.stringify(entry[1])}: ${html}`);
+    }
+    for (const [child, html] of fixture.children as [unknown, string][]) if (element("span", {}, child).html !== html) differences.push(`child ${JSON.stringify(child)}`);
+    // (A BigInt, which JSON doesn't hold: React 19 renders it as a number, React 18 not at all.)
+    if (element("span", {}, 10n).html !== "<span>10</span>") differences.push("child 10n");
+    expect(differences).toEqual([]);
+    expect(fixture.attributes.length).toBeGreaterThan(200);
+  });
+});
diff --git a/packages/react/src/exporters/social.ts b/packages/react/src/exporters/social.ts
new file mode 100644
index 00000000..9d8f2a10
--- /dev/null
+++ b/packages/react/src/exporters/social.ts
@@ -0,0 +1,50 @@
+import { element, staticMarkup } from "./markup";
+import { present } from "./present";
+
+/** The icons, each with its image from the editor's custom icons for the icon type where it's one of them. */
+function withCustomIcons({ icons, customIcons, iconType }: { icons: any[]; customIcons?: any[]; iconType?: string }) {
+  return icons
+    .map((icon) => {
+      if (!icon) return;
+      const custom = customIcons?.find((own) => own && own.name === icon.name);
+      return { ...icon, imgUrl: custom ? custom.icons[iconType as string] : icon.imgUrl };
+    })
+    .filter(Boolean);
+}
+
+/** An icon's link: an email address as a `mailto:` link. */
+const href = (icon: any) => (icon?.name !== "Email" || icon?.url?.includes("mailto") ? icon?.url : `mailto:${icon?.url}`);
+
+/**
+ * Social's web HTML (which a document uses too), as @unlayer/exporters' SocialExporters write it with React (byte
+ * for byte): a link and image for each icon, from the config's CDN.
+ */
+export function social(values: Record<string, any>, ...args: any[]): string {
+  const { exporterConfig: config } = args[6] || {};
+  const { icons: { editor: { data } = {}, iconType, icons: given } = {}, align, spacing, iconSize } = values;
+  const cdnBaseUrl = config?.cdnBaseUrl || "";
+  const icons = withCustomIcons({ icons: present(given), customIcons: data?.customIcons, iconType }).map((icon) => ({ ...icon, url: href(icon) }));
+  if (!icons.length)
+    return staticMarkup(element("div", { style: { textAlign: align, lineHeight: "0px" } }, element("img", { src: `${cdnBaseUrl}/social/icons/default.png`, height: iconSize, alt: "social icon" })));
+  return staticMarkup(
+    element(
+      "div",
+      { style: { textAlign: align, lineHeight: "0px", direction: "ltr" }, "aria-label": "social" },
+      icons.map((icon, index) => {
+        if (!icon) return null;
+        const src = icon?.imgUrl || `${cdnBaseUrl}/social/icons/${iconType}/${icon.name.toLowerCase()}.png`;
+        return element(
+          "a",
+          {
+            key: `icon-${index}`,
+            href: href(icon),
+            target: "_blank",
+            "aria-label": `${icon.name} icon`,
+            style: { display: "inline-block", width: `${iconSize}px`, height: `${iconSize}px`, marginRight: `${index == icons.length - 1 ? 0 : spacing}px` },
+          },
+          element("img", { alt: `${icon?.name} icon`, src, width: iconSize, height: iconSize })
+        );
+      })
+    )
+  );
+}
diff --git a/packages/react/src/exporters/test-corpus.tsx b/packages/react/src/exporters/test-corpus.tsx
new file mode 100644
index 00000000..fe638d08
--- /dev/null
+++ b/packages/react/src/exporters/test-corpus.tsx
@@ -0,0 +1,337 @@
+/**
+ * Templates with Divider, Html, Menu and Social blocks, for the tests of their web and document HTML (pages.test.tsx,
+ * parity.test.ts): every story, the codegen fixtures' designs as Elements code, the values the regression suite gives
+ * users' text and links, and templates for what these blocks take (links and targets, icon sets, sizes, alignment,
+ * borders, markup, right-to-left text, merge tags, phone settings). Each renders as a Page and as a Document.
+ */
+import React from "react";
+import * as Elements from "../index";
+import { Body, Column, Divider, Document, Email, Html, Menu, Page, Row, Social, UnlayerProvider } from "../index";
+import { DESIGNS } from "../codegen/__fixtures__/designs";
+import kitchenSink from "../codegen/__fixtures__/editor-kitchen-sink.json";
+import { designToElements } from "../codegen/design-to-elements";
+import { evaluate } from "../codegen/test-harness";
+import type { Plain } from "../codegen/values";
+
+export interface Template {
+  name: string;
+  /** The template, with any root (Email, Page, Document, Body), which `as` replaces. */
+  element: React.ReactElement;
+  /** renderToHtml's options. */
+  options?: Record<string, unknown>;
+}
+
+const ROOTS = new Set<unknown>([Email, Page, Document, Body]);
+const OWN = new Set<unknown>(Object.values(Elements));
+
+/** What a template component renders, where it can be called outside a render (no hooks), or undefined. */
+function rendered(type: (props: object) => React.ReactNode, props: object): React.ReactNode | undefined {
+  const error = console.error;
+  console.error = () => {};
+  try {
+    return type(props);
+  } catch {
+    return undefined;
+  } finally {
+    console.error = error;
+  }
+}
+
+/** The template rendered by `Root` (Page or Document): its root replaced, found through the components that render it. */
+export function as(node: React.ReactNode, Root: typeof Page | typeof Document): React.ReactElement {
+  if (React.isValidElement(node)) {
+    const { type, props } = node as React.ReactElement<Record<string, unknown>>;
+    if (ROOTS.has(type)) {
+      const { mode: _mode, ...rest } = props;
+      return <Root {...rest} />;
+    }
+    if (type === UnlayerProvider) return React.cloneElement(node as React.ReactElement<Record<string, unknown>>, undefined, as(props.children as React.ReactNode, Root));
+    if (typeof type === "function" && !OWN.has(type) && !(type.prototype && type.prototype.isReactComponent)) {
+      const inner = rendered(type as (props: object) => React.ReactNode, props);
+      if (inner !== undefined) return as(inner, Root);
+    }
+  }
+  return <Root>{node}</Root>;
+}
+
+type Story = ((args: object) => React.ReactNode) | { args?: object; render?: (args: object, context: object) => React.ReactNode };
+type StoryModule = Record<string, unknown> & { default?: { component?: React.ComponentType<object>; args?: object; render?: (args: object, context: object) => React.ReactNode } };
+
+const STORY_MODULES = (import.meta as unknown as { glob: (pattern: string, options: { eager: true }) => Record<string, StoryModule> }).glob("../**/*.stories.tsx", { eager: true });
+
+/** Every story, as Storybook renders it: its render function (called in a component, as one can use hooks), or its component with its args. */
+function stories(): Template[] {
+  const out: Template[] = [];
+  for (const [file, module] of Object.entries(STORY_MODULES)) {
+    const meta = module.default ?? {};
+    for (const [name, story] of Object.entries(module)) {
+      if (name === "default" || !story || (typeof story !== "function" && typeof story !== "object")) continue;
+      const own = story as Story;
+      const args = { ...meta.args, ...(typeof own === "object" ? own.args : undefined) };
+      const render = typeof own === "function" ? own : own.render ?? meta.render;
+      let element: React.ReactElement;
+      if (render) {
+        // Called here where it can be (to find its root), else in a component, where its hooks work.
+        const tree = rendered(() => render(args, { args }), {});
+        const Story = () => <>{render(args, { args })}</>;
+        element = tree !== undefined && React.isValidElement(tree) ? tree : <Story />;
+      } else if (meta.component) element = React.createElement(meta.component, args);
+      else continue;
+      out.push({ name: `${file.replace(/^\.\.\//, "").replace(/\.stories\.tsx$/, "")}: ${name}`, element });
+    }
+  }
+  return out;
+}
+
+/** The codegen fixtures' designs (as the editor saves them) as the Elements code codegen writes for them. */
+function designs(): Template[] {
+  const all: [string, Plain][] = [["editor kitchen sink", kitchenSink as unknown as Plain], ...Object.entries(DESIGNS).map(([name, { design }]): [string, Plain] => [name, design])];
+  return all.flatMap(([name, design]) => {
+    const types = JSON.stringify(design).match(/"type":"(divider|html|menu|social)"/);
+    if (!types) return [];
+    const Template = evaluate(designToElements(design).code);
+    return [{ name: `design: ${name}`, element: <Template /> }];
+  });
+}
+
+/** Values from users (the regression suite's), which must render as they did: markup, quotes, entities, other scripts. */
+export const TEXTS = [
+  "Home",
+  "",
+  " padded ",
+  '"><x-pwn></x-pwn>',
+  "'><x-pwn></x-pwn>",
+  '" x-pwn="1',
+  "' x-pwn='1",
+  "</p></div></td></tr></table><x-pwn></x-pwn>",
+  '{{ " }} x-pwn=1 y',
+  '{{ x" x-pwn }}',
+  '<%a%>" x-pwn="1',
+  "Fish &amp; chips & <b>bold</b>",
+  "“Quotes” ‘single’ — dash…",
+  "مرحبا بالعالم",
+  "שלום עולם",
+  "日本語のテキスト",
+  "😀 emoji 👍🏽",
+  "{{first_name}}",
+  "*|FNAME|*",
+  "%%name%%",
+  "line\nbreak\ttab",
+];
+
+export const LINKS = [
+  "https://example.com/",
+  "https://example.com/path?a=1&b=2#hash",
+  "http://example.com/a b",
+  "/relative/path",
+  "#anchor",
+  "mailto:hi@example.com?subject=Hi there",
+  "tel:+15550100",
+  "sms:+15550100",
+  "javascript:alert(1)",
+  "{{unsubscribe_url}}",
+  "https://example.com/?u={{user_id}}&t=*|TOKEN|*",
+  "<%asm_group_unsubscribe_raw_url%>",
+  "",
+];
+
+const ICON_NAMES = ["Facebook", "X", "Twitter", "Instagram", "LinkedIn", "YouTube", "Pinterest", "TikTok", "WhatsApp", "Discord", "Email", "Custom"];
+const ICON_TYPES = ["circle", "rounded", "squared", "circle-black", "circle-white", "rounded-black", "squared-black"];
+
+const row = (...blocks: React.ReactNode[]) => (
+  <Row>
+    <Column>{blocks}</Column>
+  </Row>
+);
+
+/** Templates for the values these blocks take. */
+function values(): Template[] {
+  const out: Template[] = [];
+  const add = (name: string, element: React.ReactElement, options?: Record<string, unknown>) => out.push({ name, element, options });
+
+  add("defaults", <Email>{row(<Divider key="d" />, <Html key="h" />, <Menu key="m" />, <Social key="s" />)}</Email>);
+  add("defaults, bare in the root", <Email><Divider /><Html /><Menu /><Social /></Email>);
+  add("defaults, two columns", <Email><Row layout={Elements.ColumnLayouts.TwoEqual}><Column><Menu /><Divider /></Column><Column><Social /><Html /></Column></Row></Email>);
+
+  TEXTS.forEach((text, i) =>
+    add(
+      `user text ${i}: ${JSON.stringify(text)}`,
+      <Email>
+        {row(
+          <Menu key="m" items={[{ text, href: `https://example.com/${text}` }, { text: `${text} 2` }]} separator={text || "|"} />,
+          <Social key="s" icons={[{ name: text || "Facebook", url: `https://example.com/${text}` }, { name: "X", url: text }]} />,
+          <Html key="h" html={`<p>${text}</p>`} />,
+          <Html key="h2" html={text} />,
+        )}
+      </Email>,
+    ),
+  );
+
+  LINKS.forEach((href, i) =>
+    add(
+      `link ${i}: ${JSON.stringify(href)}`,
+      <Email>
+        {row(
+          <Menu key="m" items={[{ text: "Same tab", href, target: "_self" }, { text: "New tab", href, target: "_blank" }, { text: "Parent", href, target: "_parent" }, { text: "Top", href, target: "_top" }, { text: "No link" }]} separator="•" />,
+          <Social key="s" icons={[{ name: "Facebook", url: href }, { name: "Email", url: href.replace(/^mailto:/, "") }, { name: "Email", url: href }]} />,
+        )}
+      </Email>,
+    ),
+  );
+
+  // Links in the editor's own shapes (`values`): the stored link, and the link editor's render value with
+  // custom attributes, a click handler and a class.
+  const editorLinks: Record<string, unknown>[] = [
+    { name: "web", values: { href: "https://example.com/stored", target: "_self" } },
+    { name: "web", values: { href: "" }, attrs: { href: "https://example.com/attrs", target: "_top", rel: "noopener" } },
+    { name: "email", values: { email: "hi@example.com", subject: "Hello" } },
+    { name: "phone", values: { phone: "+15550100" } },
+    { url: "https://example.com/render", target: "_blank", customAttrs: { "data-track": "menu", rel: "noopener noreferrer", title: 'Say "hi"', id: "m1" } },
+    { url: "https://example.com/render", customAttrs: { "data-empty": "", "aria-hidden": "true" } },
+    { url: "", customAttrs: { "data-empty": " ", rel: "" } },
+    { url: "https://example.com/click", onClick: "track('menu', \"home\"); return true;", class: "menu-link primary" },
+    { url: "", onClick: "openChat()" },
+    { url: "https://example.com/{{id}}", target: "", class: "" },
+  ];
+  add(
+    "editor links",
+    <Email>
+      {row(
+        <Menu
+          key="m"
+          values={{ menu: { items: editorLinks.map((link, i) => ({ key: String(i + 1), text: `Item ${i + 1}`, link })) } } as never}
+          separator="/"
+        />,
+      )}
+    </Email>,
+  );
+
+  for (const layout of ["horizontal", "vertical"] as const)
+    for (const align of ["left", "center", "right"] as const)
+      add(
+        `menu: ${layout}, ${align}`,
+        <Email>
+          {row(
+            <Menu
+              key="m"
+              items={[{ text: "Home", href: "https://example.com/" }, { text: "Shop", href: "https://example.com/shop" }, { text: "Help" }]}
+              layout={layout}
+              align={align}
+              separator={layout === "horizontal" ? "|" : "-"}
+              padding="8px 12px"
+              fontSize="13px"
+              fontWeight={700}
+              fontFamily="Georgia, serif"
+              letterSpacing="1px"
+              linkColor="#1a73e8"
+              textColor="#555555"
+            />,
+            <Menu key="m2" items={[{ text: "A", href: "https://example.com/a" }, { text: "B", href: "https://example.com/b" }]} layout={layout} textAlign={align} color="#ff0000" padding={4} />,
+          )}
+        </Email>,
+      );
+
+  ICON_TYPES.forEach((iconType) =>
+    [16, 32, "48px"].forEach((iconSize) =>
+      (["left", "center", "right"] as const).forEach((align) =>
+        add(
+          `social: ${iconType}, ${iconSize}, ${align}`,
+          <Email>
+            {row(
+              <Social
+                key="s"
+                icons={ICON_NAMES.map((name) => ({ name, url: `https://example.com/${name.toLowerCase()}` }))}
+                iconType={iconType as "circle"}
+                iconSize={iconSize}
+                spacing={iconSize === 16 ? 0 : 10}
+                align={align}
+              />,
+            )}
+          </Email>,
+        ),
+      ),
+    ),
+  );
+  add("social: no icons", <Email>{row(<Social key="s" icons={[]} />, <Social key="s2" values={{ icons: { iconType: "squared", icons: [] } } as never} iconSize={20} />)}</Email>);
+  add(
+    "social: custom icons",
+    <Email>
+      {row(
+        <Social
+          key="s"
+          values={{
+            icons: {
+              iconType: "circle",
+              icons: [{ name: "Mastodon", url: "https://example.com/@me" }, { name: "Facebook", url: "https://facebook.com/x", imgUrl: "https://example.com/fb.png" }],
+              editor: { data: { customIcons: [{ name: "Mastodon", url: "https://mastodon.social", icons: { circle: "https://example.com/mastodon-circle.png" } }] } },
+            },
+          } as never}
+        />,
+      )}
+    </Email>,
+  );
+
+  for (const style of ["solid", "dashed", "dotted", "double", "none"])
+    for (const width of ["100%", "50%", "240px"] as const)
+      add(
+        `divider: ${style}, ${width}`,
+        <Email>
+          {row(
+            <Divider key="a" width={width} borderTopWidth="3px" borderTopStyle={style} borderTopColor="#cc0000" align="left" />,
+            <Divider key="b" width={width} border={{ borderTopWidth: 1, borderTopStyle: style, borderTopColor: "rgb(10, 20, 30)" }} textAlign="right" />,
+            <Divider key="c" values={{ width, border: { borderTopWidth: "10px", borderTopStyle: style, borderTopColor: "#BBBBBB" }, textAlign: "center" } as never} />,
+          )}
+        </Email>,
+      );
+
+  add(
+    "right-to-left",
+    <Email textDirection="rtl" lang="ar">
+      {row(
+        <Menu key="m" items={[{ text: "الرئيسية", href: "https://example.com/ar" }, { text: "اتصل بنا" }]} separator="|" />,
+        <Social key="s" icons={[{ name: "Facebook", url: "https://facebook.com/x" }, { name: "X", url: "https://x.com/x" }]} />,
+        <Divider key="d" width="60%" />,
+        <Html key="h" html={'<p dir="rtl">مرحبا <b>بالعالم</b></p>'} />,
+      )}
+    </Email>,
+  );
+  add(
+    "merge tags",
+    <Email>
+      {row(
+        <Menu key="m" items={[{ text: "Hi {{first_name}}", href: "{{profile_url}}" }, { text: "Unsubscribe", href: "{{unsubscribe_url}}" }]} />,
+        <Social key="s" icons={[{ name: "Facebook", url: "{{facebook_url}}" }, { name: "Email", url: "{{email}}" }]} />,
+        <Html key="h" html="<p>Hello {{first_name}}, your code is <strong>{{code}}</strong>.</p>" />,
+      )}
+    </Email>,
+    { mergeTagState: { first_name: "Ada" } },
+  );
+  add(
+    "phone settings",
+    <Email>
+      {row(
+        <Menu key="m" items={[{ text: "Home", href: "https://example.com/" }]} mobile={{ fontSize: "12px", padding: "2px" } as never} hideOnDesktop />,
+        <Social key="s" icons={[{ name: "X", url: "https://x.com/x" }]} hideOnMobile />,
+        <Divider key="d" mobile={{ width: "40%" } as never} />,
+        <Html key="h" html="<p>Desktop only</p>" hideOnMobile />,
+      )}
+    </Email>,
+  );
+  add(
+    "toSafeHtml",
+    <Email>{row(<Html key="h" html={'<p onclick="x()">Hi</p><script>alert(1)</script><link rel="preload" as="image" href="https://example.com/a.png">'} />)}</Email>,
+    { toSafeHtml: (html: string) => html.replace(/<script[\s\S]*?<\/script>/g, "").replace(/ on\w+="[^"]*"/g, "") },
+  );
+  add(
+    "a CDN for the icons",
+    <UnlayerProvider config={{ cdnBaseUrl: "https://cdn.example.com/assets" }}>
+      <Email>{row(<Social key="s" icons={[{ name: "Facebook", url: "https://facebook.com/x" }]} />, <Social key="s2" icons={[]} />)}</Email>
+    </UnlayerProvider>,
+  );
+  return out;
+}
+
+/** The templates, in order. */
+export function corpus(): Template[] {
+  return [...values(), ...designs(), ...stories()];
+}
diff --git a/packages/react/src/font/font.test.tsx b/packages/react/src/font/font.test.tsx
new file mode 100644
index 00000000..7aec920a
--- /dev/null
+++ b/packages/react/src/font/font.test.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { Column, Email, Heading, Page, Paragraph, Row, renderToHtml, renderToHtmlParts, renderToJson } from "../index";
+import { Font } from "./index";
+
+const SHEET = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap";
+const content = (
+  <Row>
+    <Column>
+      <Paragraph>Hello</Paragraph>
+    </Column>
+  </Row>
+);
+
+describe("Font", () => {
+  it("loads a stylesheet in the head, out of Outlook's sight in an email, and is the template's font", () => {
+    const email = (
+      <Email>
+        <Font family="Inter" url={SHEET} fallback="Arial, sans-serif" default />
+        {content}
+      </Email>
+    );
+    const html = renderToHtml(email);
+    const head = html.slice(0, html.indexOf("</head>"));
+    expect(head).toContain(`<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&amp;display=swap" rel="stylesheet" type="text/css"><!--<![endif]-->`);
+    // On the content, as the root's own fontFamily is.
+    expect(html.slice(html.indexOf("<body"))).toContain("font-family:'Inter', Arial, sans-serif;");
+    expect(renderToJson(email).body.values.fontFamily).toEqual({ label: "Inter", value: "'Inter', Arial, sans-serif", url: SHEET });
+  });
+
+  it("declares a font file with @font-face, as written on a web page", () => {
+    const page = (
+      <Page>
+        <Font family="Brand Sans" url="https://cdn.example.com/brand.woff2" weight={700} style="italic" />
+        <Font family="Mono" url="https://cdn.example.com/mono" format="woff" />
+        {content}
+      </Page>
+    );
+    const { tags, head } = renderToHtmlParts(page);
+    expect(tags).toEqual([
+      "<style type=\"text/css\">@font-face { font-family: 'Brand Sans'; src: url('https://cdn.example.com/brand.woff2'); font-weight: 700; font-style: italic; }</style>",
+      "<style type=\"text/css\">@font-face { font-family: 'Mono'; src: url('https://cdn.example.com/mono') format('woff'); font-weight: 400; font-style: normal; }</style>",
+    ]);
+    expect(head).toContain("@font-face { font-family: 'Brand Sans'");
+    // Not `default`: the root's font is its own.
+    expect(renderToJson(page).body.values.fontFamily.label).toBe("Arial");
+  });
+
+  it("gives way to the root's own fontFamily, and works from a component of yours", () => {
+    const Fonts = () => <Font family="Inter" url={SHEET} default />;
+    const email = (
+      <Email fontFamily="Georgia, serif">
+        <Fonts />
+        {content}
+      </Email>
+    );
+    expect(renderToJson(email).body.values.fontFamily).toEqual({ label: "Georgia, serif", value: "Georgia, serif" });
+    expect(renderToHtml(email)).toContain("fonts.googleapis.com");
+    const json = renderToJson(
+      <Email>
+        <Fonts />
+        {content}
+      </Email>
+    );
+    expect(json.body.values.fontFamily.label).toBe("Inter");
+    // It adds no block to the design.
+    expect(json.body.rows).toHaveLength(1);
+  });
+
+  it("puts its URL on the design's fonts of its family, as the editor keeps a web font, so the editor loads it too", () => {
+    const FRAUNCES = "https://fonts.googleapis.com/css2?family=Fraunces:wght@500&display=swap";
+    const json = renderToJson(
+      <Email fontFamily="'Fraunces', serif">
+        <Font family="Fraunces" url={FRAUNCES} fallback="Georgia, serif" />
+        <Font family="Brand Sans" url="https://cdn.example.com/brand.woff2" />
+        <Row>
+          <Column>
+            <Heading fontFamily="Fraunces, Georgia, 'Times New Roman', serif">Serif</Heading>
+            <Paragraph fontFamily={{ label: "Fraunces", value: "fraunces, serif", url: "https://example.com/own.css" }}>Its own</Paragraph>
+            <Paragraph fontFamily="Georgia, serif">Another family</Paragraph>
+            <Paragraph fontFamily="'Brand Sans', sans-serif">A font file</Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    );
+    const [heading, own, georgia, file] = json.body.rows[0].columns[0].contents.map((content) => content.values.fontFamily);
+    expect(json.body.values.fontFamily).toEqual({ label: "'Fraunces', serif", value: "'Fraunces', serif", url: FRAUNCES });
+    expect(heading).toEqual({ label: "Fraunces, Georgia, 'Times New Roman', serif", value: "Fraunces, Georgia, 'Times New Roman', serif", url: FRAUNCES });
+    // A URL of its own stays; another family, and a font file (an @font-face, which the editor has no place for), get none.
+    expect(own.url).toBe("https://example.com/own.css");
+    expect(georgia.url).toBeUndefined();
+    expect(file.url).toBeUndefined();
+  });
+
+  it("can't end its tags or CSS with what a family or URL holds", () => {
+    const { tags } = renderToHtmlParts(
+      <Page>
+        <Font family={"X'; } body { color: red"} url={"https://x.com/a.woff2') ; </style><script>"} format="woff2" />
+        {content}
+      </Page>
+    );
+    expect(tags[0]).toBe("<style type=\"text/css\">@font-face { font-family: 'X  body  color: red'; src: url('https://x.com/a.woff2%27%29%20;%20%3c/style%3e%3cscript%3e') format('woff2'); font-weight: 400; font-style: normal; }</style>");
+  });
+
+  it("reads a family as a browser reads it in a style attribute: no character reference or control character in it ends its declaration", () => {
+    for (const family of ["X&#39;&#59; color: red", "X&apos;&semi; color: red", "X'\n; color: red", "X&#x27;\u0000&#x3b; color: red"]) {
+      const html = renderToHtml(<Email><Font family={family} url="https://fonts.example.com/x.css" fallback={"Arial&#59; color: red"} default />{content}</Email>);
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      expect([family, [...doc.querySelectorAll<HTMLElement>("[style]")].filter((el) => el.style.color === "red").length]).toEqual([family, 0]);
+    }
+  });
+
+  it("loads nothing from a URL that runs code (`javascript:`, as React tells one), a stylesheet or a font file", () => {
+    for (const url of ["javascript:alert(1)", " JavaScript:alert(1)", "java\tscript:alert(1)", "javascript:alert(1)//x.woff2"]) {
+      for (const Root of [Email, Page]) {
+        const { tags } = renderToHtmlParts(
+          <Root>
+            <Font family="Inter" url={url} />
+            {content}
+          </Root>
+        );
+        expect([url, tags.filter((tag) => /javascript/i.test(tag))]).toEqual([url, []]);
+      }
+    }
+  });
+});
diff --git a/packages/react/src/font/index.tsx b/packages/react/src/font/index.tsx
new file mode 100644
index 00000000..8ace22ec
--- /dev/null
+++ b/packages/react/src/font/index.tsx
@@ -0,0 +1,42 @@
+/**
+ * @unlayer/react-elements/font: `<Font>`, a web font for a template.
+ */
+import type React from "react";
+import { headEntry } from "../head/record";
+import { fontFamilyOf, fontTags, fontUrlInDesign, primaryFamily, type FontProps } from "../utils/font-design";
+
+export { fontFamilyOf, fontTags, type FontProps };
+
+function fontInDesign(font: FontProps, body: Parameters<typeof fontUrlInDesign>[2]): void {
+  const { url, label } = fontFamilyOf(font);
+  const family = primaryFamily(label);
+  if (url && family) fontUrlInDesign(family, url, body);
+}
+
+/**
+ * Font - Declares a web font for the template. Place it in an Email, Page or Document (or a component of yours
+ * there): the document's head loads it (the stylesheet's `<link>`, or an `@font-face` for a font file), and with
+ * `default` it's the root's `fontFamily`, in the HTML and the design. Outlook ignores web fonts: it shows `fallback`.
+ *
+ * @example
+ * ```tsx
+ * <Email>
+ *   <Font family="Inter" url="https://fonts.googleapis.com/css2?family=Inter:wght@400;700" fallback="Arial, sans-serif" default />
+ *   <Row>…</Row>
+ * </Email>
+ * ```
+ */
+export function Font(_: FontProps): React.ReactElement | null {
+  // What it gives the head and the root is recorded where the template is collected; it renders nothing.
+  return null;
+}
+
+Font.displayName = "Font";
+headEntry(Font, (props: FontProps) => ({
+  kind: "head",
+  tags: (mode: string) => fontTags(props, mode),
+  root: props.default ? { fontFamily: fontFamilyOf(props) } : undefined,
+  design: (body: Parameters<typeof fontInDesign>[1]) => fontInDesign(props, body),
+}));
+
+export default Font;
diff --git a/packages/react/src/head/head.test.tsx b/packages/react/src/head/head.test.tsx
new file mode 100644
index 00000000..49d9c8fa
--- /dev/null
+++ b/packages/react/src/head/head.test.tsx
@@ -0,0 +1,322 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { JSDOM, VirtualConsole } from "jsdom";
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+import { Column, Document, Email, Page, Paragraph, RenderError, Row, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText } from "../index";
+import * as asyncRenderers from "../async";
+import { Head } from "./index";
+
+let warn: MockInstance;
+beforeEach(() => {
+  warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+});
+afterEach(() => warn.mockRestore());
+
+const content = (
+  <Row>
+    <Column>
+      <Paragraph>Hello</Paragraph>
+    </Column>
+  </Row>
+);
+const tags = (
+  <Head>
+    <meta name="color-scheme" content="light dark" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <style>{`@media (prefers-color-scheme: dark) { .x > a { color: #fff !important; } }`}</style>
+    <title>Hi &amp; bye</title>
+  </Head>
+);
+/** Random head contents the fuzz renders (`HEAD_FUZZ_RUNS=5000` for a longer run, `HEAD_FUZZ_SEED` for others). */
+const HEAD_FUZZ_RUNS = Number(process.env.HEAD_FUZZ_RUNS ?? 150);
+
+/** A window where scripts run, whose document a parse writes into (one: a window of jsdom's each would add up). */
+let scripted: Window | undefined;
+
+/**
+ * What `read` reads of HTML as a browser parses it: where scripts don't run, and where they do (a <noscript>'s content
+ * is then text, to its end tag). (Markup put in a document runs no script.)
+ */
+function parse<T>(html: string, read: (document: Document) => T): T[] {
+  scripted ??= new JSDOM("", { runScripts: "dangerously", virtualConsole: new VirtualConsole() }).window as unknown as Window;
+  scripted.document.documentElement.innerHTML = html;
+  return [read(new DOMParser().parseFromString(html, "text/html")), read(scripted.document)];
+}
+
+/** A seeded random number generator (mulberry32): the same inputs every run. */
+function random(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+const written = [
+  '<meta name="color-scheme" content="light dark"/>',
+  '<link rel="preconnect" href="https://fonts.gstatic.com"/>',
+  "<style>@media (prefers-color-scheme: dark) { .x > a { color: #fff !important; } }</style>",
+  "<title>Hi &amp; bye</title>",
+].join("");
+
+describe("Head", () => {
+  it("puts its tags in the document's head, before Elements' styles, in every mode", () => {
+    for (const Root of [Email, Page, Document]) {
+      const html = renderToHtml(
+        <Root>
+          {tags}
+          {content}
+        </Root>
+      );
+      const head = html.slice(0, html.indexOf("</head>"));
+      expect(head).toContain(written);
+      expect(head.indexOf(written)).toBeLessThan(head.indexOf('<style type="text/css">'));
+      // Nothing in the body.
+      expect(html.slice(html.indexOf("</head>"))).not.toContain("color-scheme");
+    }
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it("is in the head part, from a component of yours too, and left out of the text", () => {
+    const Meta = () => (
+      <Head>
+        <meta name="x-apple-disable-message-reformatting" />
+      </Head>
+    );
+    const email = (
+      <Email>
+        <Meta />
+        {content}
+      </Email>
+    );
+    const parts = renderToHtmlParts(email);
+    expect(parts.tags).toContain('<meta name="x-apple-disable-message-reformatting"/>');
+    expect(parts.head).toContain('<meta name="x-apple-disable-message-reformatting"/>');
+    expect(parts.body).not.toContain("x-apple");
+    expect(renderToPlainText(email)).toBe("Hello");
+  });
+
+  it("keeps a style's CSS as written, and can't end it early", () => {
+    const html = renderToHtml(
+      <Page>
+        <Head>
+          <style>{"a > b { color: red } </style><script>alert(1)</script>"}</style>
+        </Head>
+        {content}
+      </Page>
+    );
+    expect(html).toContain("<style>a > b { color: red } </\\73 tyle><script>alert(1)</script></style>");
+  });
+
+  it("writes a style's CSS, a script's text and a title as written wherever they are in it: in a component of yours too, in every React", () => {
+    const Brand = () => <style>{"body{font-family:'Inter',sans-serif} .a > .b{color:red}"}</style>;
+    const Css = ({ css }: { css: string }) => css;
+    const name = "Ada";
+    const data = { "@type": "Organization", name: "A & B </script>" };
+    const parts = renderToHtmlParts(
+      <Page>
+        <Head>
+          <Brand />
+          <style>
+            {".x > a { color: red } "}
+            <Css css={"p::after { content: '>' }"} />
+          </style>
+          <script type="application/ld+json">{JSON.stringify(data)}</script>
+          <title>Hi {name} & bye</title>
+        </Head>
+        {content}
+      </Page>
+    );
+    expect(parts.tags).toEqual([
+      [
+        "<style>body{font-family:'Inter',sans-serif} .a > .b{color:red}</style>",
+        "<style>.x > a { color: red } p::after { content: '>' }</style>",
+        '<script type="application/ld+json">{"@type":"Organization","name":"A & B </\\u0073cript>"}</script>',
+        "<title>Hi Ada &amp; bye</title>",
+      ].join(""),
+    ]);
+  });
+
+  it("can't end a style's or a script's text early, whatever writes it: a component of yours, a list, text in parts, markup, what it's in", () => {
+    // A tenant's brand color from the database, a product name in JSON-LD: data a component of yours writes.
+    const brand = "red}</style><script>alert(document.cookie)</script><style>";
+    const BrandCss = ({ color }: { color: string }) => `.brand{color:${color}}`;
+    const JsonLd = ({ data }: { data: object }) => JSON.stringify(data);
+    const Css = ({ css }: { css: string }) => css;
+    const img = "<img src=x onerror=alert(1)>";
+    const cases: Array<[React.ReactNode, string]> = [
+      [<style><BrandCss color={brand} /></style>, "<style>.brand{color:red}</\\73 tyle><script>alert(document.cookie)</script><\\73 tyle>}</style>"],
+      [<script type="application/ld+json" data-own="yes"><JsonLd data={{ name: "</script><script>alert(1)</script>" }} /></script>, '<script type="application/ld+json" data-own="yes">{"name":"</\\u0073cript><\\u0073cript>alert(1)</\\u0073cript>"}</script>'],
+      [<style>{"a{} </sty"}{"le><script>alert(1)</script>"}</style>, "<style>a{} </\\73 tyle><script>alert(1)</script></style>"],
+      [<style>{[<Css key="a" css="a{} </st" />, "yle>", <Css key="b" css={img} />]}</style>, `<style>a{} </\\73 tyle>${img}</style>`],
+      [<style>{"a{}"}<style>{"b{}"}</style>{img}</style>, `<style>a{}<\\73 tyle>b{}</\\73 tyle>${img}</style>`],
+      // Where a style isn't raw text (an <svg>'s, a <math>'s): its text escaped as any.
+      [<svg><style>{img}</style></svg>, "<svg><style>&lt;img src=x onerror=alert(1)&gt;</style></svg>"],
+      [React.createElement("SVG", null, <style>{img}</style>), "<SVG><style>&lt;img src=x onerror=alert(1)&gt;</style></SVG>"],
+      [<math><mi><style>{img}</style></mi></math>, "<math><mi><style>&lt;img src=x onerror=alert(1)&gt;</style></mi></math>"],
+      // In what runs to its own end tag (a <noscript> where scripts run, a <title>), its end tag too.
+      [<noscript><style>{`</noscript>${img}`}</style></noscript>, `<noscript><style></\\6e oscript>${img}</style></noscript>`],
+      [<noscript><script data-own="yes"><Css css={`</NOSCRIPT>${img}`} /></script></noscript>, `<noscript><script data-own="yes"></\\u004eOSCRIPT>${img}</script></noscript>`],
+      [<title><style>{`</title>${img}`}</style></title>, `<title><style></\\74 itle>${img}</style></title>`],
+    ];
+    for (const [tag, written] of cases) {
+      const page = <Page><Head>{tag}</Head>{content}</Page>;
+      expect(renderToHtmlParts(page).tags.join("")).toBe(written);
+      // Parsed, it has no script but the template's, and no element its text would make.
+      expect(parse(renderToHtml(page), (document) => document.querySelectorAll("script:not([data-own]), img, [onerror], [onload]").length), written).toEqual([0, 0]);
+    }
+  });
+
+  it("can't end a style's or a script's text early, or start an element, whatever hostile text it's given (fuzzed)", () => {
+    // Random head content (styles, scripts, titles, noscripts, svg, math and other elements whose text runs to their
+    // end tag, in each other), its text hostile fragments, written as text, by components, in lists and in parts.
+    // Parsed as a browser parses it (where scripts run, and where they don't), it has the template's elements and no
+    // other, and each piece of text is in the element it was written in, as the same content with harmless text has.
+    const fragments = [
+      "</style>", "</STYLE ", "</style/", "<style>", "</script>", "<script>", "<SCRIPT>", "</sCrIpT >", "</sty", "le>", "</scr", "ipt>", "<scr", "<!--", "-->",
+      "</noscript>", "</title>", "</iframe>", "</xmp>", "</noembed>", "</noframes>", "</textarea>", "</svg>", "</math>", "</foreignObject>", "<math><mi>",
+      "<svg onload=alert(1)>", "<img src=x onerror=alert(1)>", "<![CDATA[", "]]>", "&lt;", "&amp;", "\\", "'", '"', "{", "}", "</", "<", ">", "/", " ", "x",
+    ];
+    const tags = ["style", "style", "script", "script", "title", "noscript", "svg", "math", "mi", "foreignObject", "desc", "b", "iframe", "xmp", "noembed", "noframes", "STYLE", "SVG"];
+    type Spec = { tag: string; id: number; type?: string; children: Spec[] } | { text: number; how: "string" | "component" | "list" | "parts" };
+    const Text = ({ text }: { text: string }) => text;
+    const node = (spec: Spec, texts: string[], key?: number): React.ReactNode => {
+      if ("text" in spec) {
+        const text = texts[spec.text];
+        const half = Math.floor(text.length / 2);
+        if (spec.how === "string") return text;
+        if (spec.how === "component") return <Text key={key} text={text} />;
+        if (spec.how === "parts") return <React.Fragment key={key}>{text.slice(0, half)}{text.slice(half)}</React.Fragment>;
+        return <React.Fragment key={key}>{[text.slice(0, half), <Text key="b" text={text.slice(half)} />]}</React.Fragment>;
+      }
+      return React.createElement(spec.tag, { key, "data-t": spec.id, type: spec.tag === "script" ? spec.type : undefined }, ...spec.children.map((child, i) => node(child, texts, i)));
+    };
+    /** Where each piece of text is (the template's element it's in, by its `data-t`), and the elements there are. */
+    const layout = (document: Document) => {
+      const where: string[] = [];
+      const texts = document.createTreeWalker(document, 4 /* NodeFilter.SHOW_TEXT */);
+      for (let text = texts.nextNode(); text; text = texts.nextNode())
+        for (const [mark] of (text as Text).data.matchAll(/([QZ])\d+\1/g)) where.push(`${mark} in ${text.parentElement?.closest("[data-t]")?.getAttribute("data-t") ?? text.parentElement?.localName}`);
+      const elements = [...document.querySelectorAll("*")].map((element) => element.getAttribute("data-t") ?? element.localName);
+      return { where: where.sort(), elements: elements.sort() };
+    };
+    // (The two parsers differ where they should: a <noscript>'s content is text where scripts run.)
+    expect(parse("<head><noscript><style></noscript><img></style>", (document) => document.querySelectorAll("img").length)).toEqual([0, 1]);
+    const r = random(Number(process.env.HEAD_FUZZ_SEED ?? 20261022));
+    const pick = <T,>(list: readonly T[]) => list[Math.floor(r() * list.length)];
+    const bad: string[] = [];
+    for (let run = 0; run < HEAD_FUZZ_RUNS && bad.length < 3; run++) {
+      let ids = 0;
+      let count = 0;
+      const spec = (depth: number): Spec =>
+        depth > 0 && (depth > 3 || r() < 0.4)
+          ? { text: count++, how: pick(["string", "component", "list", "parts"] as const) }
+          : { tag: pick(tags), id: ids++, type: r() < 0.3 ? pick(["application/ld+json", "text/plain"]) : undefined, children: Array.from({ length: 1 + Math.floor(r() * 3) }, () => spec(depth + 1)) };
+      const specs = Array.from({ length: 1 + Math.floor(r() * 3) }, () => spec(0));
+      const hostile = Array.from({ length: count }, (_, i) => {
+        let text = "";
+        for (let n = 1 + Math.floor(r() * 6); n > 0; n--) text += pick(fragments);
+        return `Q${i}Q${text}Z${i}Z`;
+      });
+      const harmless = hostile.map((_, i) => `Q${i}QxZ${i}Z`);
+      const html = (texts: string[]) => renderToHtml(<Page><Head>{specs.map((s, i) => node(s, texts, i))}</Head>{content}</Page>);
+      const [expected, got] = [harmless, hostile].map((texts) => parse(html(texts), layout));
+      if (JSON.stringify(got) !== JSON.stringify(expected)) bad.push(`${JSON.stringify(renderToHtmlParts(<Page><Head>{specs.map((s, i) => node(s, hostile, i))}</Head></Page>).tags)}`);
+    }
+    expect(bad).toEqual([]);
+  }, HEAD_FUZZ_RUNS * 300 + 30000);
+
+  it("says the design can't hold it, once per render", () => {
+    const email = (
+      <Email>
+        {tags}
+        <Head>
+          <meta name="robots" content="noindex" />
+        </Head>
+        {content}
+      </Email>
+    );
+    const design = renderToJson(email);
+    expect(design.body.rows).toHaveLength(1);
+    expect(warn.mock.calls.map((call) => String(call[0]))).toEqual(["[Unlayer] <Head>'s tags are kept in HTML but not in the design for the visual editor."]);
+  });
+
+  it("works with the async renderers", async () => {
+    const html = await asyncRenderers.renderToHtml(
+      <Email>
+        {tags}
+        {content}
+      </Email>
+    );
+    expect(html.slice(0, html.indexOf("</head>"))).toContain(written);
+  });
+
+  it("renders its components as the template's: the async renderers wait for them, siblings at once, in tree order", async () => {
+    const started: string[] = [];
+    const Meta = async ({ name, ms }: { name: string; ms: number }) => {
+      started.push(name);
+      await new Promise((resolve) => setTimeout(resolve, ms));
+      return <meta name={name} />;
+    };
+    const Theme = React.createContext("light");
+    const Scheme = () => <meta name="color-scheme" content={React.useContext(Theme)} />;
+    const email = (
+      <Email>
+        <Theme.Provider value="dark">
+          <Head>
+            <Meta name="first" ms={30} />
+            <Meta name="second" ms={5} />
+            <Scheme />
+          </Head>
+        </Theme.Provider>
+        {content}
+      </Email>
+    );
+    for (const render of [asyncRenderers.renderToHtml, async (e: React.ReactElement) => (await asyncRenderers.renderToHtmlParts(e)).head]) {
+      started.length = 0;
+      const head = await render(email);
+      expect(head).toContain('<meta name="first"/><meta name="second"/><meta name="color-scheme" content="dark"/>');
+      // Both had started before either was done.
+      expect(started).toEqual(["first", "second"]);
+    }
+    // The synchronous ones say what to do, naming it and where it is.
+    const sync = [() => renderToHtml(email), () => renderToHtmlParts(email), () => renderToPlainText(email), () => renderToJson(email)];
+    for (const render of sync) expect(render).toThrow('async or suspends, and this renderer is synchronous: render with "@unlayer/react-elements/async", or load its data first and pass it as props (in <Meta> at Head › Meta)');
+  });
+
+  it("is in the error policy: a component in it that fails fails the render, or is left out of the head and listed", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const Broken = (): React.ReactElement => {
+      throw new Error("no tag");
+    };
+    const email = (
+      <Email>
+        <Head>
+          <meta name="kept" />
+          <Broken />
+        </Head>
+        {content}
+      </Email>
+    );
+    for (const render of [() => renderToHtml(email), () => renderToHtmlParts(email)]) {
+      expect(render).toThrow(RenderError);
+      expect(render).toThrow("[Unlayer] no tag (in <Broken> at Head › Broken)");
+    }
+    await expect(asyncRenderers.renderToHtml(email)).rejects.toMatchObject({ component: "Broken", position: "Head › Broken", cause: new Error("no tag") });
+    const given: RenderError[] = [];
+    for (const parts of [renderToHtmlParts(email, { onError: "omit" }), await asyncRenderers.renderToHtmlParts(email, { onError: "omit" }), renderToHtmlParts(email, { onError: (e) => void given.push(e) })]) {
+      expect(parts.tags).toEqual(['<meta name="kept"/>']);
+      expect(parts.omitted.map((e) => [e.component, e.position])).toEqual([["Broken", "Head › Broken"]]);
+    }
+    expect(given.map((e) => e.message)).toEqual(["[Unlayer] no tag (in <Broken> at Head › Broken)"]);
+    expect(error.mock.calls.map((call) => String(call[0]))).toEqual(["[Unlayer] Left out: no tag (in <Broken> at Head › Broken)", "[Unlayer] Left out: no tag (in <Broken> at Head › Broken)"]);
+    error.mockRestore();
+  });
+
+  it("renders nothing outside a template's render", () => {
+    expect(renderToHtml(<Email>{content}</Email>)).not.toContain("color-scheme");
+    expect(renderToStaticMarkup(<Head><meta name="a" /></Head>)).toBe("");
+  });
+});
diff --git a/packages/react/src/head/index.tsx b/packages/react/src/head/index.tsx
new file mode 100644
index 00000000..a7537707
--- /dev/null
+++ b/packages/react/src/head/index.tsx
@@ -0,0 +1,42 @@
+/**
+ * @unlayer/react-elements/head: `<Head>`, tags of your own for the document's head (meta, link, style, title).
+ */
+import type React from "react";
+import { headEntry } from "./record";
+
+export interface HeadProps {
+  /** `<meta>`, `<link>`, `<style>` and `<title>` elements. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Head - Tags of your own for the document's head: `<meta>`, `<link>`, `<style>`, `<title>`. Place it in an Email,
+ * Page or Document (or a component of yours there); it renders nothing in the body. Components of yours in it render
+ * as the template's do (its context, the async renderers waiting for them, `onError`). The HTML's head has them before
+ * Elements' styles (a rule of yours that overrides one of them needs `!important`, as in most email CSS); the design
+ * for the visual editor can't hold them (`renderToJson` says so).
+ *
+ * @example
+ * ```tsx
+ * <Email>
+ *   <Head>
+ *     <meta name="color-scheme" content="light dark" />
+ *     <style>{`@media (prefers-color-scheme: dark) { .brand { color: #fff !important; } }`}</style>
+ *   </Head>
+ *   <Row>…</Row>
+ * </Email>
+ * ```
+ */
+export function Head(_: HeadProps): React.ReactElement | null {
+  // Its tags are recorded for the head where the template is collected; it renders nothing.
+  return null;
+}
+
+Head.displayName = "Head";
+headEntry(Head, ({ children }: HeadProps) => ({
+  kind: "head",
+  // Walked where the template is collected, as its content is: its tags are the HTML they render (a `<style>`'s and a
+  // `<script>`'s text as written, but for what would end it, in every React: see src/engine/host.ts).
+  children,
+  json: "[Unlayer] <Head>'s tags are kept in HTML but not in the design for the visual editor.",
+}));
diff --git a/packages/react/src/head/record.ts b/packages/react/src/head/record.ts
new file mode 100644
index 00000000..ce5f91fa
--- /dev/null
+++ b/packages/react/src/head/record.ts
@@ -0,0 +1,13 @@
+/**
+ * How `<Head>` and `<Font>` give the document's head what they give it: a template's collecting walk records their
+ * entry (`HEAD_ENTRY`, see the main entry's record.tsx) where it finds them; rendered, they render nothing.
+ */
+import type React from "react";
+
+/** The main entry's (src/utils/collect.ts): one key for every copy of Elements. */
+const HEAD_ENTRY = Symbol.for("@unlayer/react-elements/head-entry");
+
+/** `component` made a head entry: what `entry(props)` gives is recorded for the head, and it renders nothing. */
+export function headEntry<P>(component: (props: P) => React.ReactElement | null, entry: (props: P) => unknown): void {
+  (component as unknown as Record<symbol, unknown>)[HEAD_ENTRY] = entry;
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 59a0d3bd..b919bb58 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -16,6 +16,7 @@ import Body from "./components/Body";
 import Email from "./components/Email";
 import Page from "./components/Page";
 import Document from "./components/Document";
+import Link from "./components/Link";
 import {
   ColumnLayouts,
   validateColumnLayout,
@@ -24,11 +25,13 @@ import {
 } from "./layouts/ColumnLayouts";
 import { UnlayerProvider, useUnlayerConfig } from "./context";
 import { renderToHtml, renderToPlainText, renderToHtmlParts } from "./utils/render-to-html";
+import { internals, INTERNALS } from "./utils/internals";
 export type { HtmlParts, RenderToHtmlOptions } from "./utils/render-to-html";
 import { renderToJson, renderRowToJson } from "./utils/render-to-json";
+export type { RenderToJsonOptions } from "./utils/render-to-json";
 import { registerTool, registerElementsTool } from "./utils/register-tool";
 export type { ElementsToolConfig, ElementsToolProps, ToolExporter } from "./utils/register-tool";
-import { htmlToTextJson } from "@unlayer-internal/shared-elements";
+import { htmlToTextJson, htmlToPlainText as toPlainText } from "@unlayer-internal/shared-elements";
 
 // 🎯 Export clean public types (hiding internal implementation details)
 export type {
@@ -69,6 +72,10 @@ export type {
   FontWeightInput,
   HeadingLevel,
   ImageSrcInput,
+  // What a component's `values` takes; names other props stand for
+  ValuesInput,
+  AlignAlias,
+  TextColorAlias,
 } from "./types";
 
 // Design JSON types (re-export from shared)
@@ -93,7 +100,10 @@ export type { SocialProps } from "./components/Social";
 export type { TableProps } from "./components/Table";
 export type { VideoProps } from "./components/Video";
 export type { RowProps } from "./components/Row";
+export type { ColumnProps } from "./components/Column";
 export type { EmailProps } from "./components/Email";
+export type { LinkProps } from "./components/Link";
+export type { PlainTextOptions } from "@unlayer-internal/shared-elements";
 export type { PageProps } from "./components/Page";
 export type {
   DocumentProps,
@@ -103,6 +113,8 @@ export type {
 
 // Export context (UnlayerProvider, useUnlayerConfig, UnlayerConfig type)
 export type { UnlayerConfig, UnlayerProviderProps } from "./context";
+// What a part of a template that fails throws, or is listed as where the render leaves it out (`onError`).
+export { RenderError, type OnError } from "@unlayer-internal/shared-elements";
 export { DEFAULT_CONFIG } from "./context";
 
 // Export individual renderers
@@ -124,6 +136,7 @@ export {
   Email,
   Page,
   Document,
+  Link,
   ColumnLayouts,
   validateColumnLayout,
   UnlayerProvider,
@@ -136,7 +149,10 @@ export {
   registerTool,
   registerElementsTool,
   htmlToTextJson,
+  toPlainText,
   type ColumnLayout,
   type ValidColumnLayout
 };
 
+// The other entries' way into the main one's internals (see utils/internals.ts).
+(renderToHtml as unknown as Record<symbol, unknown>)[INTERNALS] = internals;
diff --git a/packages/react/src/markdown/Markdown.tsx b/packages/react/src/markdown/Markdown.tsx
new file mode 100644
index 00000000..3eb0f25f
--- /dev/null
+++ b/packages/react/src/markdown/Markdown.tsx
@@ -0,0 +1,401 @@
+import React from "react";
+import { Parser, type Token, type Tokens } from "marked";
+import { Divider, Heading, Html, Image, Paragraph, Table, renderToHtml } from "@unlayer/react-elements";
+import type { DividerProps, HeadingProps, HtmlProps, ImageProps, ParagraphProps, TableProps } from "@unlayer/react-elements";
+import { CodeBlock, codeInline, highlightCode, type CodeBlockProps, type CodeInlineOptions } from "@unlayer/react-elements/code";
+import { escapeAttribute, escapeText, safeUrl, sanitizeHtml } from "./sanitize";
+import { tooLarge, type TooLarge } from "./limits";
+import { lexMarkdown } from "./work";
+import { charge, codeWork, CODE_WORK, renderPart, renderWork, sayWhenDone } from "../code/work";
+
+/** The blocks Markdown becomes, by its element: props each one gets (over Markdown's own defaults). */
+export interface MarkdownBlocks {
+  /** Every heading; `h1` … `h6` for one level. */
+  heading?: Partial<HeadingProps>;
+  h1?: Partial<HeadingProps>;
+  h2?: Partial<HeadingProps>;
+  h3?: Partial<HeadingProps>;
+  h4?: Partial<HeadingProps>;
+  h5?: Partial<HeadingProps>;
+  h6?: Partial<HeadingProps>;
+  paragraph?: Partial<ParagraphProps>;
+  /** A list: a Paragraph holding it. */
+  list?: Partial<ParagraphProps>;
+  /** A quote: a Paragraph holding it. */
+  blockquote?: Partial<ParagraphProps>;
+  /** An image on a line of its own. */
+  image?: Partial<ImageProps>;
+  /** A thematic break (`---`). */
+  divider?: Partial<DividerProps>;
+  table?: Partial<TableProps>;
+  /** Fenced and indented code (a CodeBlock: its theme, line numbers, font size …), also in lists and quotes. */
+  code?: Partial<Omit<CodeBlockProps, "children" | "code">>;
+  /** Raw HTML, and what Markdown has that no block above is. */
+  html?: Partial<HtmlProps>;
+}
+
+/** Markup in text that can be styled: its inline CSS (`{ a: "color: #2563eb", blockquote: "…" }`), over Markdown's own. */
+export type MarkdownStyles = Partial<Record<"a" | "strong" | "em" | "del" | "img" | "ul" | "ol" | "li" | "blockquote" | "p" | "hr", string>>;
+
+type Attributes = Record<string, string> | ((url: string) => Record<string, string>);
+
+export interface MarkdownProps {
+  /** The Markdown (or as `markdown`). Indentation every line shares (a template literal's) is taken off first. */
+  children?: React.ReactNode;
+  markdown?: string;
+  /** Props for the blocks it makes, by element. */
+  blocks?: MarkdownBlocks;
+  /** Inline CSS for markup in its text, by tag. */
+  styles?: MarkdownStyles;
+  /** Inline code's look (`theme`, `fontFamily`): see codeInline. */
+  inlineCode?: CodeInlineOptions;
+  /** Each link's attributes (default `{ target: "_blank", rel: "noopener" }`), or a function of its URL. */
+  linkAttributes?: Attributes;
+  /** Each image in text's attributes, or a function of its URL (an image on a line of its own is an Image block: `blocks.image`). */
+  imageAttributes?: Attributes;
+  /**
+   * Rewrites each link's and image's URL (a CDN, tracking parameters); `undefined` leaves a link out (its text
+   * stays) and an image out. URLs that could run code (`javascript:`) are left out first.
+   */
+  url?: (url: string, kind: "link" | "image") => string | undefined;
+  /**
+   * Raw HTML in the Markdown: kept to the tags and attributes that display, text, links, images, lists, tables and
+   * sections, without event handlers, URLs that run code or CSS that loads anything (`"sanitize"`, the default: the
+   * lists are sanitizeHtml's); shown as text (`"escape"`); or left out (`"drop"`).
+   */
+  html?: "sanitize" | "escape" | "drop";
+  /** A line break in a paragraph is one in the text (GitHub's comments), not a space. */
+  breaks?: boolean;
+}
+
+/** Heading sizes by level, as documents show them. */
+const SIZES = ["28px", "24px", "20px", "18px", "16px", "14px"];
+const STYLES: Required<Omit<MarkdownStyles, "a" | "strong" | "em" | "del">> = {
+  ul: "margin: 0; padding: 0 0 0 24px",
+  ol: "margin: 0; padding: 0 0 0 24px",
+  li: "margin: 0 0 4px",
+  blockquote: "margin: 0; padding: 0 0 0 12px; border-left: 3px solid #d5d9e0; color: #5b6472",
+  p: "margin: 0 0 8px",
+  img: "max-width: 100%; height: auto; border: 0",
+  hr: "border: 0; border-top: 1px solid #d5d9e0; margin: 8px 0",
+};
+
+/** Text taken off the indentation all its lines share (blank lines aside). */
+function dedent(text: string): string {
+  // trimEnd(), not replace(/\s+$/): a regex tries each of a long run of spaces that isn't at the end, to its end.
+  const lines = text.replace(/^\s*\n/, "").trimEnd().split("\n");
+  // A loop, not Math.min(...lines): a spread of a long text's lines overflows the stack.
+  let indent = Infinity;
+  for (const l of lines) if (l.trim()) indent = Math.min(indent, /^[ \t]*/.exec(l)![0].length);
+  return Number.isFinite(indent) && indent ? lines.map((l) => l.slice(indent)).join("\n") : lines.join("\n");
+}
+
+const textOf = (node: React.ReactNode): string =>
+  node == null || typeof node === "boolean" ? "" : Array.isArray(node) ? node.map(textOf).join("") : React.isValidElement<{ children?: React.ReactNode }>(node) ? textOf(node.props.children) : String(node);
+
+/**
+ * On each block that holds Markdown's HTML: it's sanitized, so a <Tailwind> around it inlines no class of it that could
+ * load or run something either (its sanitizer's check: see src/tailwind/load.ts). Last, so `blocks` can't change it.
+ */
+const SANITIZED = { _sanitized: true } as {};
+
+/**
+ * In place of a block Markdown can't render (a table past the cells its tables can have, or the list or quote it's
+ * in): it fails as a component of yours fails, under the render's `onError` (a RenderError naming the Markdown and
+ * where it is; with `onError: "omit"`, left out alone and listed, the Markdown's other blocks rendering).
+ */
+function Unrendered({ reason }: { reason: string }): React.ReactElement {
+  throw new Error(reason);
+}
+// (Named as the Markdown it's in, so the error's position is the Markdown's.)
+Unrendered.displayName = "Markdown";
+
+/** A part of the template left out alone when it fails, as the main entry makes one (see its utils/internals.ts). */
+type Part = (child: React.ReactElement) => React.ReactElement;
+const part: Part = (renderToHtml as unknown as Record<symbol, { part?: Part } | undefined>)[Symbol.for("@unlayer/react-elements/internals")]?.part ?? ((child) => child);
+
+// (The rendering copy's, where it's another copy of Elements than the one this entry imports: see renderPart.)
+const unrendered = (key: number, reason: string) => (renderPart() ?? part)(<Unrendered key={key} reason={reason} />);
+
+type Table = Tokens.Table & { tooLarge?: TooLarge };
+
+/** Turns Markdown's tokens into Elements blocks and the HTML in their text. */
+class Writer {
+  /** Why the block being written can't render (a table in its list or quote is too large: see Unrendered). */
+  private failed: string | undefined;
+  /**
+   * What's left of CODE_WORK (see the code entry's work.ts): the render's, which its code blocks, Markdown's and
+   * CodeBlocks alike, share; outside a render, the Markdown's own. And the code blocks past it (shown without colors).
+   * 46 MB of READMEs and docs held more in 21 of 4,782 documents.
+   */
+  readonly render = codeWork();
+  private code = this.render ?? { left: CODE_WORK };
+  plain = 0;
+
+  constructor(private props: MarkdownProps) {}
+
+  private style(tag: keyof MarkdownStyles): string {
+    const css = this.props.styles?.[tag] ?? STYLES[tag as keyof typeof STYLES];
+    return css ? ` style="${escapeAttribute(css)}"` : "";
+  }
+
+  private attributes(given: Attributes | undefined, url: string): string {
+    const list = typeof given === "function" ? given(url) : (given ?? {});
+    return Object.entries(list)
+      .filter(([name]) => /^[a-z][\w:-]*$/i.test(name) && !/^(on|href$|src$|style$)/i.test(name))
+      .map(([name, value]) => ` ${name}="${escapeAttribute(String(value))}"`)
+      .join("");
+  }
+
+  private url(url: string, kind: "link" | "image"): string | undefined {
+    const safe = safeUrl(url, kind);
+    const out = safe === undefined || !this.props.url ? safe : this.props.url(safe, kind);
+    // A rewritten one is checked again.
+    return out === undefined ? undefined : safeUrl(out, kind);
+  }
+
+  private raw(html: string): string {
+    const mode = this.props.html ?? "sanitize";
+    return mode === "drop" ? "" : mode === "escape" ? escapeText(html) : sanitizeHtml(html);
+  }
+
+  /** Inline tokens as HTML. */
+  inline(tokens: Token[] | undefined): string {
+    return (tokens ?? [])
+      .map((token): string => {
+        switch (token.type) {
+          case "text":
+            return "tokens" in token && token.tokens ? this.inline(token.tokens) : this.text(token.text);
+          case "escape":
+            return escapeText(token.text);
+          case "strong":
+          case "em":
+          case "del":
+            return `<${token.type}${this.style(token.type)}>${this.inline(token.tokens)}</${token.type}>`;
+          case "codespan":
+            return codeInline(token.text, this.props.inlineCode);
+          case "br":
+            return "<br/>";
+          case "link": {
+            const href = this.url(token.href, "link");
+            const inner = this.inline(token.tokens);
+            if (href === undefined) return inner;
+            const title = token.title ? ` title="${escapeAttribute(token.title)}"` : "";
+            return `<a href="${escapeAttribute(href)}"${title}${this.attributes(this.props.linkAttributes ?? { target: "_blank", rel: "noopener" }, href)}${this.style("a")}>${inner}</a>`;
+          }
+          case "image": {
+            const src = this.url(token.href, "image");
+            if (src === undefined) return "";
+            const title = token.title ? ` title="${escapeAttribute(token.title)}"` : "";
+            return `<img src="${escapeAttribute(src)}" alt="${escapeAttribute(token.text)}"${title}${this.attributes(this.props.imageAttributes, src)}${this.style("img")} />`;
+          }
+          case "html":
+            return this.raw(token.text);
+          case "checkbox":
+            return (token as Tokens.Checkbox).checked ? "&#9745; " : "&#9744; ";
+          default:
+            return "tokens" in token && token.tokens ? this.inline(token.tokens as Token[]) : escapeText(String((token as { text?: string }).text ?? ""));
+        }
+      })
+      .join("");
+  }
+
+  /** Text, escaped; with `breaks`, its line breaks as breaks. */
+  private text(text: string): string {
+    const html = escapeText(text);
+    return this.props.breaks ? html.replace(/\n/g, "<br/>") : html;
+  }
+
+  /**
+   * A code block's language, where highlighting it fits in what's left of CODE_WORK; past it none (no colors). Only
+   * code that's highlighted is charged: a fence in a language with no grammar (`dockerfile`, `mermaid`) isn't.
+   */
+  private language(token: Tokens.Code, given: string | undefined): string | undefined {
+    const language = token.lang?.trim().split(/\s+/)[0] || given;
+    if (!language || !highlighted(language)) return language;
+    const work = token.text.length ** 2;
+    if (work <= this.code.left) {
+      // (In a render, charged as it's read, in order: its CodeBlock, which renders after, isn't charged again.)
+      if (this.render) charge(this.render, token.text, work);
+      else this.code.left -= work;
+      return language;
+    }
+    this.plain++;
+    return undefined;
+  }
+
+  private codeBlock(token: Tokens.Code): string {
+    const { language, ...options } = this.props.blocks?.code ?? {};
+    return highlightCode(token.text, { ...options, language: this.language(token, language) });
+  }
+
+  /** A block inside a list or quote, as HTML. */
+  private nested(token: Token, loose: boolean): string {
+    switch (token.type) {
+      case "space":
+        return "";
+      case "text":
+        return "tokens" in token && token.tokens ? this.inline(token.tokens) : this.text(token.text);
+      case "paragraph":
+        return loose ? `<p${this.style("p")}>${this.inline(token.tokens)}</p>` : this.inline(token.tokens);
+      case "heading":
+        return `<p${this.style("p")}><strong>${this.inline(token.tokens)}</strong></p>`;
+      case "list":
+        return this.list(token as Tokens.List);
+      case "blockquote":
+        return this.quote(token as Tokens.Blockquote);
+      case "checkbox":
+        return this.inline([token]);
+      case "code":
+        return this.codeBlock(token as Tokens.Code);
+      case "hr":
+        return `<hr${this.style("hr")} />`;
+      case "html":
+        return this.raw(token.text);
+      case "table":
+        return this.table(token as Table);
+      default:
+        return sanitizeHtml(Parser.parse([token]));
+    }
+  }
+
+  /**
+   * A table in a list or quote, as HTML (laid out as marked writes one): its cells as a top-level table's, their raw
+   * HTML, links and styles as the props say.
+   */
+  private table(token: Table): string {
+    if (token.tooLarge) {
+      this.failed ??= tooLarge(token.tooLarge);
+      return "";
+    }
+    const row = (cells: Tokens.TableCell[], tag: "th" | "td") => `<tr>\n${cells.map((cell) => `<${tag}${cell.align ? ` align="${cell.align}"` : ""}>${this.inline(cell.tokens)}</${tag}>\n`).join("")}</tr>\n`;
+    const body = token.rows.map((cells) => row(cells, "td")).join("");
+    return `<table>\n<thead>\n${row(token.header, "th")}</thead>\n${body && `<tbody>${body}</tbody>`}</table>\n`;
+  }
+
+  /** A block of HTML (a list's, a quote's), or what fails in its place where a table in it can't render. */
+  private written(key: number, html: string, props: Partial<ParagraphProps> | undefined): React.ReactNode {
+    const failed = this.failed;
+    this.failed = undefined;
+    return failed ? unrendered(key, failed) : <Paragraph key={key} {...props} html={html} {...SANITIZED} />;
+  }
+
+  list(token: Tokens.List): string {
+    const tag = token.ordered ? "ol" : "ul";
+    const start = token.ordered && typeof token.start === "number" && token.start !== 1 ? ` start="${token.start}"` : "";
+    // A list in an item starts on a line of its own (in the plain text too).
+    const items = token.items
+      .map((item) => `<li${this.style("li")}>${item.tokens.map((t, i) => (i && t.type === "list" ? "<br/>" : "") + this.nested(t, item.loose)).join("")}</li>`)
+      .join("");
+    return `<${tag}${start}${this.style(tag)}>${items}</${tag}>`;
+  }
+
+  quote(token: Tokens.Blockquote): string {
+    return `<blockquote${this.style("blockquote")}>${token.tokens.map((t) => this.nested(t, true)).join("")}</blockquote>`;
+  }
+
+  /** An image on a line of its own (maybe a link's): its URL, alt text and link. */
+  private alone(token: Tokens.Paragraph): { src: string; alt: string; href?: string } | undefined {
+    const parts = token.tokens.filter((t) => !(t.type === "text" && !t.text.trim()));
+    const link = parts.length === 1 && parts[0].type === "link" ? (parts[0] as Tokens.Link) : undefined;
+    const inner = (link?.tokens ?? parts).filter((t) => !(t.type === "text" && !t.text.trim()));
+    if (inner.length !== 1 || inner[0].type !== "image") return undefined;
+    const image = inner[0] as Tokens.Image;
+    const src = this.url(image.href, "image");
+    const href = link && this.url(link.href, "link");
+    return src === undefined ? undefined : { src, alt: image.text, ...(href ? { href } : {}) };
+  }
+
+  /** Markdown's blocks as Elements blocks. */
+  blocks(tokens: Token[]): React.ReactNode[] {
+    const blocks = this.props.blocks ?? {};
+    return tokens.map((token, key): React.ReactNode => {
+      switch (token.type) {
+        case "space":
+        case "def":
+          return null;
+        case "heading": {
+          const level = `h${token.depth}` as "h1";
+          return <Heading key={key} level={level} fontSize={SIZES[token.depth - 1]} fontWeight={700} {...blocks.heading} {...blocks[level]} text={this.inline(token.tokens)} {...SANITIZED} />;
+        }
+        case "paragraph": {
+          const image = this.alone(token as Tokens.Paragraph);
+          if (image) return <Image key={key} src={image.src} alt={image.alt} {...(image.href ? { action: image.href } : {})} {...blocks.image} />;
+          return <Paragraph key={key} {...blocks.paragraph} html={this.inline(token.tokens)} {...SANITIZED} />;
+        }
+        case "text":
+          return <Paragraph key={key} {...blocks.paragraph} html={"tokens" in token && token.tokens ? this.inline(token.tokens) : this.text(token.text)} {...SANITIZED} />;
+        case "list":
+          return this.written(key, this.list(token as Tokens.List), blocks.list);
+        case "blockquote":
+          return this.written(key, this.quote(token as Tokens.Blockquote), blocks.blockquote);
+        case "hr":
+          return <Divider key={key} {...blocks.divider} />;
+        case "table": {
+          const table = token as Table;
+          if (table.tooLarge) return unrendered(key, tooLarge(table.tooLarge));
+          return <Table key={key} {...blocks.table} headers={table.header.map((cell) => this.inline(cell.tokens))} data={table.rows.map((row) => row.map((cell) => this.inline(cell.tokens)))} />;
+        }
+        case "code": {
+          const { language, ...options } = blocks.code ?? {};
+          return <CodeBlock key={key} {...options} language={this.language(token as Tokens.Code, language)} code={(token as Tokens.Code).text} />;
+        }
+        case "html": {
+          const html = this.raw(token.text);
+          if (!html.trim()) return null;
+          return this.props.html === "escape" ? <Paragraph key={key} {...blocks.paragraph} html={html} {...SANITIZED} /> : <Html key={key} {...blocks.html} html={html} {...SANITIZED} />;
+        }
+        default:
+          return <Html key={key} {...blocks.html} html={sanitizeHtml(Parser.parse([token]))} {...SANITIZED} />;
+      }
+    });
+  }
+}
+
+/**
+ * Markdown - Markdown as Elements blocks: headings are Headings, paragraphs, lists and quotes Paragraphs, images on
+ * a line of their own Images, `---` a Divider, tables Tables, code a CodeBlock, raw HTML an Html block, so the design
+ * stays editable block by block. Place it in a Column. Raw HTML keeps only the tags and attributes that display (see
+ * sanitizeHtml), and links and images that could run code are left out.
+ *
+ * @example
+ * ```tsx
+ * <Column>
+ *   <Markdown blocks={{ paragraph: { fontSize: "16px" } }}>{`
+ *     # Release notes
+ *
+ *     **Faster exports**, and \`renderToJson()\` keeps your [links](https://example.com).
+ *   `}</Markdown>
+ * </Column>
+ * ```
+ */
+export function Markdown(props: MarkdownProps): React.ReactElement {
+  const source = dedent(props.markdown ?? textOf(props.children));
+  // (Its tables, its quotes' and lists' nesting and its inline syntax kept to what its size calls for, its render's
+  // Markdown together: see limits.ts, inline.ts and work.ts.)
+  const tokens = lexMarkdown(source, !!props.breaks);
+  const writer = new Writer(props);
+  const blocks = writer.blocks(tokens);
+  if (writer.plain) {
+    // Said once the render's done, with the code blocks shown without colors in all its Markdown.
+    const plain = renderWork(PLAIN, () => ({ blocks: 0 })) ?? { blocks: 0 };
+    plain.blocks += writer.plain;
+    const are = () => (plain.blocks > 1 ? `${plain.blocks} code blocks in the render's Markdown are` : "1 code block in the render's Markdown is");
+    sayWhenDone("markdown code", () =>
+      console.warn(
+        writer.render
+          ? `[Unlayer] Markdown: ${are()} shown without colors: the render's code blocks' sizes squared add up to more than the ${CODE_WORK} highlight.js is given for one render (on some code its time grows with a block's size squared).`
+          : `[Unlayer] Markdown: ${plain.blocks} of its code blocks ${plain.blocks > 1 ? "are" : "is"} shown without colors: its code blocks' sizes squared add up to more than the ${CODE_WORK} highlight.js is given for one Markdown (on some code its time grows with a block's size squared).`
+      )
+    );
+  }
+  return <>{blocks}</>;
+}
+
+Markdown.displayName = "Markdown";
+
+/** Whether code in `language` is highlighted (see the code entry's HAS_GRAMMAR); where that can't be told, it is. */
+const highlighted = (language: string): boolean => (highlightCode as unknown as Record<symbol, ((language: string) => boolean) | undefined>)[Symbol.for("@unlayer/react-elements/has-grammar")]?.(language) ?? true;
+
+/** The code blocks shown without colors in a render's Markdown, all of it (see Markdown). */
+const PLAIN = Symbol.for("@unlayer/react-elements/markdown-plain");
diff --git a/packages/react/src/markdown/headings.ts b/packages/react/src/markdown/headings.ts
new file mode 100644
index 00000000..578cdf64
--- /dev/null
+++ b/packages/react/src/markdown/headings.ts
@@ -0,0 +1,75 @@
+/**
+ * Whether marked (18.0.14's, the version built in) can read a setext heading (a line underlined with `=` or `-`) from a
+ * place, told in time that doesn't grow with the text after it. marked tries its rule before each line of a list
+ * item's text (`text` takes one line at a time there), and the rule reads every line after it for an underline, to
+ * where the text can't go on: an item of 100 KB of lines (`- [a]: b` and `!@`) took 1.5 s. Its rule is
+ * `^(?!FIRST)((?:.|\n(?!GOES))+?)\n {0,3}(=+|-+) *(?:\n+|$)`: a heading can only start at a place where an underline
+ * follows before the first character the text can't go on to (a `\r`, U+2028 or U+2029, which `.` doesn't read, or a
+ * line break before a line `GOES` stops at), and that's worked out once for each text being read.
+ */
+
+/** A text being read, with where its underlines, the line breaks the text can't go on past and its line ends are, once found. */
+export interface Text {
+  text: string;
+  found?: { underlines: number[]; stops: number[] };
+}
+
+/** The parts of marked's rule (see above), or undefined where it isn't that rule (then it's run as it is). */
+function parts(rule: RegExp): { goes: RegExp; tail: RegExp } | undefined {
+  const source = rule.source;
+  const tail = String.raw`))+?)\n {0,3}(=+|-+) *(?:\n+|$)`;
+  const middle = String.raw`)((?:.|\n(?!`;
+  const at = source.indexOf(middle);
+  if (!source.startsWith("^(?!") || at < 0 || !source.endsWith(tail) || rule.flags.replace(/[dg]/g, "")) return undefined;
+  const goes = source.slice(at + middle.length, source.length - tail.length);
+  try {
+    return { goes: new RegExp(`(?:${goes})`, "y"), tail: /\n {0,3}(=+|-+) *(?:\n+|$)/y };
+  } catch {
+    return undefined;
+  }
+}
+
+const known = new WeakMap<RegExp, ReturnType<typeof parts> | null>();
+
+/** The first place in `list` (sorted) at or after `from`, or Infinity. */
+function next(list: number[], from: number): number {
+  let low = 0;
+  let high = list.length;
+  while (low < high) {
+    const mid = (low + high) >> 1;
+    if (list[mid] < from) low = mid + 1;
+    else high = mid;
+  }
+  return low < list.length ? list[low] : Infinity;
+}
+
+/**
+ * Whether marked's setext heading rule (`rule`) can match `src`, a suffix of `read`'s text: false only where it can't
+ * (it's run where it can, for its token).
+ */
+export function headingCan(rule: RegExp, read: Text, src: string): boolean {
+  let rule_ = known.get(rule);
+  if (rule_ === undefined) known.set(rule, (rule_ = parts(rule) ?? null));
+  if (!rule_) return true;
+  const { text } = read;
+  if (!read.found) {
+    // Each line break an underline line follows, and each the text can't go on past (the next line a block's start,
+    // or blank), and each character `.` doesn't read but `\n` (where the text can't go on either).
+    const underlines: number[] = [];
+    const stops: number[] = [];
+    for (let at = 0; at < text.length; at++) {
+      const char = text[at];
+      if (char === "\n") {
+        rule_.tail.lastIndex = at;
+        if (rule_.tail.test(text)) underlines.push(at);
+        rule_.goes.lastIndex = at + 1;
+        if (rule_.goes.test(text)) stops.push(at);
+      } else if (char === "\r" || char === "\u2028" || char === "\u2029") stops.push(at);
+    }
+    read.found = { underlines, stops };
+  }
+  const from = text.length - src.length;
+  // The heading's text goes on to the first stop (an underline can start there: the line break the text can't take).
+  const underline = next(read.found.underlines, from + 1);
+  return underline < Infinity && underline <= next(read.found.stops, from);
+}
diff --git a/packages/react/src/markdown/index.ts b/packages/react/src/markdown/index.ts
new file mode 100644
index 00000000..af264dc7
--- /dev/null
+++ b/packages/react/src/markdown/index.ts
@@ -0,0 +1,7 @@
+/**
+ * @unlayer/react-elements/markdown: Markdown as Elements blocks, editable in the design. Its parser (marked) is built
+ * into this entry: the main one never loads it.
+ */
+/*! Includes marked (MIT License, Copyright (c) 2018-2026, MarkedJS; Copyright (c) 2011-2018, Christopher Jeffrey): see THIRD_PARTY_LICENSES.md */
+export { Markdown, type MarkdownProps, type MarkdownBlocks, type MarkdownStyles } from "./Markdown";
+export { sanitizeHtml, safeUrl } from "./sanitize";
diff --git a/packages/react/src/markdown/inline.ts b/packages/react/src/markdown/inline.ts
new file mode 100644
index 00000000..c6570e2c
--- /dev/null
+++ b/packages/react/src/markdown/inline.ts
@@ -0,0 +1,234 @@
+/**
+ * What inline Markdown from data can't make marked's inline lexer do: take more than its size calls for. marked reads
+ * an opener (`*`, `_`, `~`, `[`, `<`, a backtick) by looking ahead for what closes it, to the end of the paragraph when
+ * nothing does, and an email's or a URL's characters again at each place it could start, so a paragraph of openers
+ * nothing closes (`*a *a *a …`, `[a]([a](…`) took time growing with its size squared: seconds for 40 KB. Here each
+ * rule is given only as much of the text as it can look at (see `reach.ts`), so it reads the same, and what it looks
+ * at is counted: a Markdown's inline syntax has WORK steps for each of its characters (and BASE more), far more than
+ * Markdown as people write it takes, and past them the rest of its inline Markdown is text. Emphasis, strikethrough and
+ * links nest INLINE_NESTING deep: deeper, their delimiters are text.
+ */
+import { Lexer, type Links, type Token, type Tokens, type TokensList } from "marked";
+import { Limited, QUOTE_BASE, QUOTE_WORK } from "./limits";
+import { autolinkReach, brReach, codeReach, linkReach, reflinkReach, runEnd, tagReach, textReach, urlReach } from "./reach";
+
+/** The steps a Markdown's inline syntax can take for each of its characters, and BASE more (see the comment above). */
+export const WORK = 32;
+export const BASE = 1 << 20;
+
+/** How deep emphasis, strikethrough and links nest in one another: deeper, their delimiters are text. */
+export const INLINE_NESTING = 32;
+
+/** The text rule past the work: the rest of what's being read, as text. */
+const REST = /^[\s\S]+/;
+
+/** marked's tokenizer, keeping to Limited's limits and to the inline work above. */
+class Inline extends Limited {
+  /** Steps left: below zero, the work is spent. */
+  left: number;
+
+  constructor(cells: number, quotes: number, work: number, private breaks: boolean) {
+    super(cells, quotes);
+    this.left = work;
+  }
+
+  /** Whether the work is spent: the rest of the inline Markdown is text. */
+  get spent(): boolean {
+    return this.left < 0;
+  }
+
+  /** Spends `steps`, if they're left; when they aren't, the work is spent. */
+  spend(steps: number): boolean {
+    if (this.left >= steps) {
+      this.left -= steps;
+      return true;
+    }
+    this.left = -1;
+    this.rules.inline.text = REST;
+    return false;
+  }
+
+  /**
+   * Counts the rules marked runs over the text itself (not from where it reads): its own copy of them, so others'
+   * lexers aren't counted (and with no task item found by marked: see limits.ts).
+   */
+  count(): void {
+    this.own();
+    const inline = { ...this.rules.inline };
+    for (const name of ["emStrongRDelimAst", "emStrongRDelimUnd", "delRDelim", "_backpedal"] as const) inline[name] = counted(inline[name], this);
+    this.rules = { ...this.rules, inline };
+  }
+
+  /** What `read` makes of `src` given only as much of it as its rule can look at (`reach`), which is spent. */
+  private within<T>(src: string, reach: number, read: (src: string) => T): T | undefined {
+    if (this.spent) return undefined;
+    const size = Math.min(src.length, reach);
+    return this.spend(size) ? read(size < src.length ? src.slice(0, size) : src) : undefined;
+  }
+
+  /** Whether an emphasis, a strikethrough or a link here would be deeper than INLINE_NESTING. */
+  private get deep(): boolean {
+    return (this.lexer as unknown as Bounded).depth > INLINE_NESTING;
+  }
+
+  tag(src: string): Tokens.Tag | undefined {
+    return src[0] === "<" ? this.within(src, tagReach(src), (part) => super.tag(part)) : super.tag(src);
+  }
+
+  link(src: string): Tokens.Link | Tokens.Image | undefined {
+    if (src[0] !== "[" && !src.startsWith("![")) return super.link(src);
+    if (this.deep || this.spent) return undefined;
+    // What marked reads from each `<` in its text is counted too (see Looks).
+    const looks = { steps: 0 };
+    const reach = linkReach(src, looks);
+    return this.spend(looks.steps) ? this.within(src, reach, (part) => super.link(part)) : undefined;
+  }
+
+  reflink(src: string, links: Links): Tokens.Link | Tokens.Image | Tokens.Text | undefined {
+    if (src[0] !== "[" && !src.startsWith("![")) return super.reflink(src, links);
+    if (this.deep || this.spent) return undefined;
+    const looks = { steps: 0 };
+    const reach = reflinkReach(src, looks);
+    return this.spend(looks.steps) ? this.within(src, reach, (part) => super.reflink(part, links)) : undefined;
+  }
+
+  emStrong(src: string, maskedSrc: string, prevChar?: string): Tokens.Em | Tokens.Strong | undefined {
+    if (src[0] !== "*" && src[0] !== "_") return super.emStrong(src, maskedSrc, prevChar);
+    // Its delimiters, then what closes them (counted as marked looks for it: see count()).
+    if (this.deep || this.spent || !this.spend(runEnd(src, 0, src[0] === "*" ? STARS : UNDERSCORES))) return undefined;
+    return super.emStrong(src, maskedSrc, prevChar);
+  }
+
+  codespan(src: string): Tokens.Codespan | undefined {
+    return src[0] === "`" ? this.within(src, codeReach(src), (part) => super.codespan(part)) : super.codespan(src);
+  }
+
+  br(src: string): Tokens.Br | undefined {
+    return src[0] === " " || src[0] === "\\" || src[0] === "\n" ? this.within(src, brReach(src), (part) => super.br(part)) : super.br(src);
+  }
+
+  del(src: string, maskedSrc: string, prevChar?: string): Tokens.Del | undefined {
+    if (src[0] !== "~") return super.del(src, maskedSrc, prevChar);
+    return this.deep || this.spent ? undefined : super.del(src, maskedSrc, prevChar);
+  }
+
+  autolink(src: string): Tokens.Link | undefined {
+    return src[0] === "<" ? this.within(src, autolinkReach(src), (part) => super.autolink(part)) : super.autolink(src);
+  }
+
+  url(src: string): Tokens.Link | undefined {
+    return URL_START.test(src[0] ?? "") ? this.within(src, urlReach(src), (part) => super.url(part)) : super.url(src);
+  }
+
+  inlineText(src: string): Tokens.Text | undefined {
+    if (this.spent) return super.inlineText(src);
+    return this.within(src, textReach(src, this.breaks), (part) => super.inlineText(part)) ?? super.inlineText(src);
+  }
+}
+
+const STARS = /\**/y;
+const UNDERSCORES = /_*/y;
+/** What a URL marked links by itself starts with (`www.`, `http://`, `mailto:`, an email address). */
+const URL_START = /[A-Za-z0-9._+-]/;
+
+/**
+ * `rule`, counting what it reads: marked runs these over the text from where it last stopped (emphasis's and
+ * strikethrough's closing delimiters) or over a link it trims again and again (`_backpedal`). Past the work, they find
+ * nothing more (a link isn't trimmed further).
+ */
+function counted(rule: RegExp, inline: Inline): RegExp {
+  const trims = !rule.global;
+  return new (class extends RegExp {
+    exec(src: string): RegExpExecArray | null {
+      if (inline.spent) return trims ? ([src] as unknown as RegExpExecArray) : ((this.lastIndex = 0), null);
+      const from = this.lastIndex;
+      const match = super.exec(src);
+      if (inline.spend(trims ? src.length : (match ? this.lastIndex : src.length) - from)) return match;
+      return trims ? ([src] as unknown as RegExpExecArray) : ((this.lastIndex = 0), null);
+    }
+  })(rule.source, rule.flags);
+}
+
+/** The work a Markdown can take: its inline syntax's (see WORK) and its quotes' and list items' lines' (QUOTE_WORK). */
+export interface Work {
+  inline: number;
+  quotes: number;
+}
+
+/**
+ * marked's lexer for a Markdown of `size` characters: its tables and its quotes' and lists' nesting kept to `cells`
+ * and NESTING, its quotes to QUOTE_WORK (see limits.ts), its inline syntax to the work and the nesting above; or to
+ * `work`, where that's given (the render's: see work.ts).
+ */
+export class Bounded extends Lexer {
+  /** How deep in emphasis, strikethrough and links the inline lexer is reading. */
+  depth = 0;
+  private reader: Inline;
+
+  constructor({ breaks, cells, size, work }: { breaks: boolean; cells: number; size: number; work?: Work }) {
+    const inline = new Inline(cells, work?.quotes ?? QUOTE_BASE + QUOTE_WORK * size, work?.inline ?? BASE + WORK * size, breaks);
+    super({ gfm: true, breaks, tokenizer: inline });
+    inline.count();
+    this.reader = inline;
+  }
+
+  /** The work it has left (below zero, spent), and its tables' cells. */
+  get left(): Work & { cells: number } {
+    return { inline: this.reader.left, quotes: this.reader.quotesLeft, cells: this.reader.cellsLeft };
+  }
+
+  blockTokens(src: string, tokens?: Token[], lastParagraphClipped?: boolean): Token[];
+  blockTokens(src: string, tokens?: TokensList, lastParagraphClipped?: boolean): TokensList;
+  /** marked reads each of its blocks from what's left of `src`: the text is kept, for the rules read from it (headings.ts). */
+  blockTokens(src: string, tokens: Token[] = [], lastParagraphClipped = false): Token[] {
+    this.reader.texts.push({ text: src, tokens });
+    try {
+      return super.blockTokens(src, tokens, lastParagraphClipped);
+    } finally {
+      this.reader.texts.pop();
+    }
+  }
+
+  inlineTokens(src: string, tokens: Token[] = []): Token[] {
+    if (this.reader.spent) {
+      // Past the work: all of it, as text (with no looking for links to mask first).
+      const text = src && this.reader.inlineText(src);
+      if (text) tokens.push(text);
+      return tokens;
+    }
+    // marked masks the reference links in the text (`[a][b]`, `[a]`) for its emphasis and strikethrough rules, with a
+    // search from each `[` up to 999 steps long (100 KB of `\[` took 0.4 s). Where the Markdown defines none, it masks
+    // nothing, and where the text has no `*`, `_` or `~`, nothing reads what it masks: there, it isn't run.
+    const inline = this.reader.rules.inline;
+    const search = inline.reflinkSearch;
+    if (!defines(this.tokens.links) || !DELIMITERS.test(src)) inline.reflinkSearch = NO_REFERENCE;
+    this.depth++;
+    try {
+      return super.inlineTokens(src, tokens);
+    } finally {
+      this.depth--;
+      inline.reflinkSearch = search;
+    }
+  }
+}
+
+/** A search that finds nothing: for reference links where there are none to find. */
+const NO_REFERENCE = /(?!)/g;
+/** What marked's emphasis and strikethrough rules, the masked text's only readers, start with. */
+const DELIMITERS = /[*_~]/;
+
+/** A Markdown's link definitions known to hold one: they're only added to, so once they do, they always do. */
+const defining = new WeakSet<Links>();
+
+/**
+ * Whether `links` (a Markdown's link definitions) holds one. Once a time per Markdown: a `for…in` gathers every key
+ * before its first (each inline pass reading thousands of definitions took time growing with the Markdown's size squared).
+ */
+const defines = (links: Links): boolean => {
+  if (defining.has(links)) return true;
+  for (const _ in links) {
+    defining.add(links);
+    return true;
+  }
+  return false;
+};
diff --git a/packages/react/src/markdown/limits.ts b/packages/react/src/markdown/limits.ts
new file mode 100644
index 00000000..d40a2485
--- /dev/null
+++ b/packages/react/src/markdown/limits.ts
@@ -0,0 +1,235 @@
+/**
+ * What Markdown from data can't make Markdown's parser (marked) or the blocks it becomes take more than its size
+ * calls for: tables marked fills out cell by cell, quotes and lists it reads by calling itself, and quotes it reads a
+ * chunk at a time (see quotes.ts).
+ */
+import { Tokenizer, type Token, type Tokens } from "marked";
+import { headingCan, type Text } from "./headings";
+import { readQuote } from "./quotes";
+import { addTasks } from "./tasks";
+
+/**
+ * The `raw` of a quote read from `text` that read `lists` lists again. marked's has a line break more for each (the
+ * line break before the lines after the list), so the lexer read on that much past the quote: what came after it lost
+ * its first characters (`After` was `fter`). Where that's more than line breaks, it's the text the quote was read from.
+ */
+const quoteRaw = (text: string, raw: string, lists: number): string => {
+  const end = raw.length - lists;
+  return (text[end] ?? "\n") === "\n" && /[^\n]/.test(text.slice(end, raw.length)) ? text.slice(0, end) : raw;
+};
+
+/** A rule that finds nothing: marked's tokenizer finds no task item with it (see tasks.ts). */
+const NOTHING = /(?!)/;
+
+/**
+ * The cells a Markdown's tables can have in all, at the least: past it, as many as its text has characters. marked
+ * fills each row out to the header's width (`|a|b|…|` then rows of `|`), so a few kilobytes can be millions of cells,
+ * and a Table block writes about 350 bytes of HTML for each. A table whose cells are all written out (each one at
+ * least its `|`) always fits, however large; these are for one whose rows are short: 1,000 cells is a table of 20
+ * columns and 50 rows, whose HTML (about 350 KB) is already more than three times what Gmail shows before it clips a
+ * message (102 KB).
+ */
+export const TABLE_CELLS = 1000;
+
+/** How deep quotes and lists nest (together): deeper, a quote's `>` and a list's marker are text. */
+export const NESTING = 32;
+
+/**
+ * The work a Markdown's quotes (counted as quotes.ts counts it) and the lines added to a list item's text can take,
+ * for each of its characters, and QUOTE_BASE more: far more than Markdown as people write it takes. Past it, each
+ * quote ends at its first line without a `>` (that line and the rest are read on outside it), so a lazy line no longer
+ * continues a quote's paragraph, and the rest of a list item's text is text.
+ */
+export const QUOTE_WORK = 32;
+export const QUOTE_BASE = 1 << 22;
+
+/** A table past the cells left for a Markdown's tables: its size, nothing of it read but its header. */
+export type TooLarge = { columns: number; rows: number; cells: number };
+
+/** What a table past the cells left is said with (see TooLarge). */
+export const tooLarge = ({ columns, rows, cells }: TooLarge) =>
+  `A table of ${columns} columns and ${rows} rows is ${cells} cells, more than the Markdown can render: a render's Markdown tables can have, in all, as many cells as its Markdown has characters, or ${TABLE_CELLS} where that's more (marked fills each row out to the header's width)`;
+
+/**
+ * marked's tokenizer, keeping to those limits: a table past the cells left is a table token with no rows and its
+ * size in `tooLarge`, which isn't filled out; a quote or a list deeper than NESTING isn't one (its text is a paragraph).
+ */
+export class Limited extends Tokenizer {
+  private depth = 0;
+  /** The last quote or list read: a quote marked reads again starts with it. */
+  private last: Token | undefined;
+  /** The lists the quote being read has read again. */
+  private rereads = 0;
+  /**
+   * Whether the lexer has read on since the last quote or list (it looks for a space first, at each place it reads a
+   * block): where it hasn't, marked is reading that quote or list again, with the lines after it (a quote's lazy
+   * continuation), and the cells its tables were charged (`charged`) are given back first, so each table is charged once.
+   */
+  private reading = true;
+  private charged = 0;
+
+  /** `cells`: the cells the Markdown's tables can have (see TABLE_CELLS); `work`: the work its quotes can take (QUOTE_WORK). */
+  constructor(
+    private cells: number,
+    private work: number
+  ) {
+    super();
+  }
+
+  table(src: string): (Tokens.Table & { tooLarge?: TooLarge }) | undefined {
+    // Whether it's a table, as marked reads one, from its first two lines (its header and delimiter row): marked's rule
+    // reads every line after them as its rows before it tells, and no row makes a table not one. Read from the whole
+    // text, a line a table can't start (`a` over `-`, a setext heading) took time growing with the text after it.
+    const second = src.indexOf("\n");
+    const third = second < 0 ? -1 : src.indexOf("\n", second + 1);
+    if (third >= 0) {
+      const queued = this.lexer.inlineQueue.length;
+      const head = super.table(src.slice(0, third));
+      // (Its cells aren't the Markdown's: what they'd have marked read is left out.)
+      this.lexer.inlineQueue.length = queued;
+      if (!head) return undefined;
+    }
+    const cap = this.rules.block.table.exec(src);
+    if (cap && this.rules.other.tableDelimiter.test(cap[2])) {
+      // As marked counts them: a column for each of the delimiter row's cells (the header must have as many), and a
+      // row for each line after it.
+      const columns = cap[2].replace(this.rules.other.tableAlignChars, "").split("|").length;
+      const rows = cap[3]?.trim() ? cap[3].replace(this.rules.other.tableRowBlankLine, "").split("\n").length : 0;
+      const cells = columns * (rows + 1);
+      if (cells > this.cells) {
+        // Whether it's a table, as marked reads one: from its header alone.
+        const header = super.table(`${cap[1]}\n${cap[2]}`);
+        return header && { ...header, raw: cap[0].replace(/\n+$/, ""), rows: [], tooLarge: { columns, rows, cells } };
+      }
+    }
+    const table = super.table(src);
+    if (table) this.cells -= table.header.length * (table.rows.length + 1);
+    return table;
+  }
+
+  /** The texts being read (the Markdown, a list item's, a quote's), the innermost last, and the blocks read from each so far (see Bounded's blockTokens). */
+  texts: Array<Text & { tokens: Token[] }> = [];
+
+  lheading(src: string): Tokens.Heading | undefined {
+    // Only where an underline can follow (see headings.ts): marked's rule reads to the end of the text for one.
+    const text = this.texts[this.texts.length - 1];
+    return text && !headingCan(this.rules.block.lheading, text, src) ? undefined : super.lheading(src);
+  }
+
+  /**
+   * Whether a line can be added to the text or paragraph before it, the work it takes counted: marked adds each of a
+   * list item's lines to the text before it, reading all of that again (its `endsWith`), so an item of many lines took
+   * time growing with their number squared (400 KB of `+ \[x]` and `@` lines, 1.9 s). Past the work, it can't.
+   */
+  private joins(kinds: string[]): boolean {
+    const text = this.texts[this.texts.length - 1];
+    const before = text?.tokens[text.tokens.length - 1];
+    if (!before || !kinds.includes(before.type)) return true;
+    if (this.work >= before.raw.length) {
+      this.work -= before.raw.length;
+      return true;
+    }
+    this.work = -1;
+    return false;
+  }
+
+  text(src: string): Tokens.Text | undefined {
+    // Past the work, the rest of what's being read is text, added to the text before it at once: nothing is left out.
+    return this.joins(["text"]) ? super.text(src) : { type: "text", raw: src, text: src, tokens: this.lexer.inline(src) };
+  }
+
+  code(src: string): Tokens.Code | undefined {
+    return this.joins(["text", "paragraph"]) ? super.code(src) : undefined;
+  }
+
+  def(src: string): Tokens.Def | undefined {
+    return this.joins(["text", "paragraph"]) ? super.def(src) : undefined;
+  }
+
+  /** The work its quotes and list items' lines have left: below zero, it's spent. */
+  get quotesLeft(): number {
+    return this.work;
+  }
+
+  /** The cells its tables have left (see TABLE_CELLS). */
+  get cellsLeft(): number {
+    return this.cells;
+  }
+
+  space(src: string): Tokens.Space | undefined {
+    const space = super.space(src);
+    if (!space) this.reading = true;
+    return space;
+  }
+
+  blockquote(src: string): Tokens.Blockquote | undefined {
+    if (this.depth >= NESTING || !this.rules.other.blockquoteStart.test(src)) return undefined;
+    // A quote marked reads again (with the lines after it, which continue it): past the work, it's what it was, so
+    // the quote around it ends there and the lines after it are read on outside it.
+    const last = this.reading ? undefined : this.last;
+    const again = last?.type === "blockquote" && src.startsWith(`${last.raw}\n`);
+    const { cut, work } = readQuote(src, this.work, again);
+    this.work -= work;
+    if (again && cut === 0) return last as Tokens.Blockquote;
+    const text = cut === undefined ? src : src.slice(0, cut);
+    const outer = this.rereads;
+    this.rereads = 0;
+    try {
+      return this.nested(() => {
+        const quote = super.blockquote(text);
+        if (quote && this.rereads) quote.raw = quoteRaw(text, quote.raw, this.rereads);
+        return quote;
+      });
+    } finally {
+      this.rereads = outer;
+    }
+  }
+
+  list(src: string): Tokens.List | undefined {
+    // Read again: by the quote it's the last block of, with the lines after it (see blockquote()).
+    const again = !this.reading;
+    return this.nested(() => {
+      const list = super.list(src);
+      if (list) {
+        addTasks(list, this.lexer.inlineQueue);
+        if (again) this.rereads++;
+      }
+      return list;
+    });
+  }
+
+  /**
+   * Its own copy of marked's rules, where it finds no task item itself (its lists are given their tasks after: tasks.ts),
+   * and a paragraph's line is told whether it starts a table from it and the line after: marked's paragraph rule reads,
+   * for each of its lines, the table one could start with all the lines after it as its rows, which don't change
+   * whether one starts (none is a table too), so 100 KB of `|` over `-` took 5 s.
+   */
+  own(): void {
+    const block = { ...this.rules.block };
+    const table = block.table.source.replace(/(^|[^[])\^/g, "$1");
+    const rows = table.indexOf("(?:\\n((?:(?!");
+    const paragraph = block.paragraph.source;
+    if (rows > 0 && paragraph.split(table.slice(rows)).length === 2) block.paragraph = new RegExp(paragraph.replace(table.slice(rows), () => "(?:\\n|$)"), block.paragraph.flags);
+    this.rules = { ...this.rules, block, other: { ...this.rules.other, listIsTask: NOTHING } };
+  }
+
+  /** A quote or a list, read one level deeper, unless that's past NESTING; its tables charged once (see `reading`). */
+  private nested<T extends Token>(read: () => T | undefined): T | undefined {
+    if (this.depth >= NESTING) return undefined;
+    const again = this.reading ? 0 : this.charged;
+    this.cells += again;
+    const cells = this.cells;
+    this.depth++;
+    try {
+      const token = read();
+      if (token) {
+        this.charged = cells - this.cells;
+        this.reading = false;
+        this.last = token;
+      } else this.cells -= again;
+      return token;
+    } finally {
+      this.depth--;
+    }
+  }
+}
diff --git a/packages/react/src/markdown/markdown.test.tsx b/packages/react/src/markdown/markdown.test.tsx
new file mode 100644
index 00000000..1f07e5b4
--- /dev/null
+++ b/packages/react/src/markdown/markdown.test.tsx
@@ -0,0 +1,936 @@
+import React from "react";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, onTestFinished, vi, type MockInstance } from "vitest";
+import { Column, Email, Html, Paragraph, RenderError, Row, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText } from "../index";
+import { Tailwind, loadTailwind, type TailwindHandle } from "../tailwind";
+import * as asyncRenderers from "../async";
+import { Markdown, safeUrl, sanitizeHtml, type MarkdownProps } from "./index";
+import { Lexer } from "marked";
+import { Bounded } from "./inline";
+import { TABLE_CELLS } from "./limits";
+import { CodeBlock, highlightCode } from "../code";
+import { growth, inTime, within } from "../test-timing";
+
+/** `run`'s, saying nothing (a render timed again: see within). */
+const quietly = <T,>(run: () => T): T => {
+  const say = console.warn;
+  console.warn = () => {};
+  try {
+    return run();
+  } finally {
+    console.warn = say;
+  }
+};
+
+let warn: MockInstance;
+beforeEach(() => {
+  warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+});
+afterEach(() => warn.mockRestore());
+
+const email = (props: MarkdownProps) => (
+  <Email>
+    <Row>
+      <Column>
+        <Markdown {...props} />
+      </Column>
+    </Row>
+  </Email>
+);
+/** The design's blocks: their type and the value each is about. */
+const blocks = (props: MarkdownProps) =>
+  renderToJson(email(props)).body.rows[0].columns[0].contents.map((c: any) => [c.type, c.values.text ?? c.values.html ?? c.values.table ?? c.values.src?.url ?? null]);
+
+const RELEASE = `
+  # Release *notes*
+
+  **Faster exports**, and \`renderToJson()\` keeps your [links](https://example.com/docs "Docs").
+
+  - Smaller
+  - [x] Faster
+    1. Nested
+
+  > Worth it.
+
+  ---
+
+  | Plan | Price |
+  | :--- | ----: |
+  | Pro | **$10** |
+
+  \`\`\`ts
+  const plan = "pro";
+  \`\`\`
+
+  ![Chart](https://example.com/chart.png)
+`;
+
+describe("Markdown", () => {
+  it("becomes Elements blocks the design can edit one by one", () => {
+    const design = blocks({ children: RELEASE });
+    expect(design.map(([type]) => type)).toEqual(["heading", "text", "text", "text", "divider", "table", "html", "image"]);
+    expect(design[0][1]).toBe("Release <em>notes</em>");
+    expect(design[1][1]).toMatch(
+      /^<strong>Faster exports<\/strong>, and <code style="font-family: ui-monospace,[^"]*">renderToJson\(\)<\/code> keeps your <a href="https:\/\/example.com\/docs" title="Docs" target="_blank" rel="noopener">links<\/a>\.$/
+    );
+    expect(design[2][1]).toBe(
+      '<ul style="margin: 0; padding: 0 0 0 24px"><li style="margin: 0 0 4px">Smaller</li><li style="margin: 0 0 4px">&#9745; Faster<br/><ol style="margin: 0; padding: 0 0 0 24px"><li style="margin: 0 0 4px">Nested</li></ol></li></ul>'
+    );
+    expect(design[3][1]).toBe('<blockquote style="margin: 0; padding: 0 0 0 12px; border-left: 3px solid #d5d9e0; color: #5b6472"><p style="margin: 0 0 8px">Worth it.</p></blockquote>');
+    expect(design[5][1]).toMatchObject({ headers: [{ cells: [{ text: "Plan" }, { text: "Price" }] }], rows: [{ cells: [{ text: "Pro" }, { text: "<strong>$10</strong>" }] }] });
+    expect(design[6][1]).toContain('<span style="color: #b0326f">const</span>');
+    expect(design[7][1]).toBe("https://example.com/chart.png");
+    const heading = renderToJson(email({ children: RELEASE })).body.rows[0].columns[0].contents[0].values;
+    expect(heading).toMatchObject({ headingType: "h1", fontSize: "28px", fontWeight: 700 });
+  });
+
+  it("renders email HTML with inline styles and no classes of its own, and plain text", () => {
+    const html = renderToHtml(email({ children: RELEASE }));
+    expect(html).not.toMatch(/class="(language-|hljs)/);
+    expect(html).toContain("<em>notes</em>");
+    const text = renderToPlainText(email({ children: RELEASE }));
+    for (const line of ["RELEASE NOTES", "links (https://example.com/docs)", "- Smaller", "Worth it.", 'const plan = "pro";', "[Chart]"]) expect(text).toContain(line);
+  });
+
+  it("takes props for each kind of block, inline styles for its markup, and attributes for links and images", () => {
+    const props: MarkdownProps = {
+      markdown: "## Hi\n\nA [link](https://example.com) and ![dot](https://example.com/dot.png).\n\n![Logo](https://example.com/logo.png)\n\n---",
+      blocks: { heading: { color: "#111111" }, h2: { fontSize: "30px" }, paragraph: { fontSize: "16px" }, image: { width: 120 }, divider: { width: "50%" } },
+      styles: { a: "color: #2563eb", img: "width: 16px" },
+      linkAttributes: (href) => ({ target: "_self", "data-href": href, onclick: "x()" }),
+      imageAttributes: { width: "16" },
+    };
+    const [heading, paragraph, image, divider] = renderToJson(email(props)).body.rows[0].columns[0].contents;
+    expect(heading.values).toMatchObject({ color: "#111111", fontSize: "30px", headingType: "h2" });
+    expect(paragraph.values.fontSize).toBe("16px");
+    expect(paragraph.values.text).toBe(
+      'A <a href="https://example.com" target="_self" data-href="https://example.com" style="color: #2563eb">link</a> and <img src="https://example.com/dot.png" alt="dot" width="16" style="width: 16px" />.'
+    );
+    expect(image.values.src).toMatchObject({ url: "https://example.com/logo.png", autoWidth: false });
+    expect(divider.values.width).toBe("50%");
+  });
+
+  it("leaves out links and images that could run code, and rewrites the rest as asked", () => {
+    const design = blocks({
+      markdown: "[a](javascript:alert(1)) [b](&#106;avascript:x) [c](https://example.com) ![d](data:text/html,x) ![e](data:image/png;base64,AA)",
+      url: (url, kind) => (kind === "link" ? `${url}?utm=mail` : url),
+    });
+    expect(design[0][1]).toBe('a b <a href="https://example.com?utm=mail" target="_blank" rel="noopener">c</a>  <img src="data:image/png;base64,AA" alt="e" style="max-width: 100%; height: auto; border: 0" />');
+    expect(safeUrl("java\nscript:x", "link")).toBeUndefined();
+    expect(safeUrl("{{unsubscribe_url}}", "link")).toBe("{{unsubscribe_url}}");
+    expect(safeUrl("cid:logo", "image")).toBe("cid:logo");
+  });
+
+  it("keeps raw HTML without scripts, handlers, frames or forms; or shows it as text; or leaves it out", () => {
+    const markdown = '<div onclick="x()" class="note">Hi <script>alert(1)</script><a href="javascript:x" title="t">j</a><iframe src="https://x"></iframe><img src=x onerror=alert(1)></div>';
+    expect(blocks({ markdown })).toEqual([["html", '<div class="note">Hi <a title="t">j</a><img src="x"></div>']]);
+    expect(blocks({ markdown: "<b>x</b>", html: "escape" })).toEqual([["text", "&lt;b&gt;x&lt;/b&gt;"]]);
+    expect(blocks({ markdown: "<div>x</div>\n\nText", html: "drop" })).toEqual([["text", "Text"]]);
+    expect(sanitizeHtml('<p style="background: url(javascript:x)">a < b</p><!--[if mso]><x><![endif]-->')).toBe("<p>a &lt; b</p>");
+    // Old Internet Explorer's filters load images too, and so would CSS's `image()`.
+    expect(sanitizeHtml('<p style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=x.png)">a</p><p style="background: image(x.png)">b</p>')).toBe("<p>a</p><p>b</p>");
+    // A numeric reference past Unicode's range reads as U+FFFD, as in a browser, instead of throwing.
+    expect(blocks({ markdown: '<a href="&#99999999;x" style="color: &#x110000;">a</a>' })).toHaveLength(1);
+  });
+
+  it("takes off the indentation a template literal gives, and with `breaks` keeps line breaks", () => {
+    expect(blocks({ children: "\n    Hello\n    world\n  " })).toEqual([["text", "Hello\nworld"]]);
+    expect(blocks({ children: "Hello\nworld", breaks: true })).toEqual([["text", "Hello<br/>world"]]);
+  });
+
+  it("writes a table in a quote or a list as a top-level one's cells: its raw HTML, URLs, link attributes and styles as the props say", () => {
+    const cells = '| a | b |\n|---|--:|\n| <img src="https://tracker.example/p.gif"> <b>raw</b> | [x](https://example.com/x) ![p](https://example.com/p.png) **bold** |';
+    const nested = { quote: cells.replace(/^/gm, "> "), list: `- item\n\n${cells.replace(/^/gm, "  ")}` };
+    for (const [where, markdown] of Object.entries(nested)) {
+      const [[, html]] = blocks({ markdown, html: "escape", styles: { a: "color: #2563eb", strong: "color: #111111" }, linkAttributes: { target: "_self" } });
+      const elements = parsed(html);
+      expect([where, elements.map((e) => e.localName).filter((n) => /^(table|thead|tbody|tr|th|td)$/.test(n))]).toEqual([where, ["table", "thead", "tr", "th", "th", "tbody", "tr", "td", "td"]]);
+      // Raw HTML shown as text, as in a top-level table's cells; the links and images Markdown makes, as the props say.
+      expect([where, elements.filter((e) => e.localName === "b" || (e.localName === "img" && /tracker/.test(e.getAttribute("src")!)))]).toEqual([where, []]);
+      expect(html).toContain("&lt;b&gt;raw&lt;/b&gt;");
+      expect(html).toContain('<a href="https://example.com/x" target="_self" style="color: #2563eb">x</a>');
+      expect(html).toContain('<strong style="color: #111111">bold</strong>');
+      expect(html).toContain('<td align="right">');
+      // Left out (`drop`), or kept as the sanitizer keeps it.
+      expect(parsed(blocks({ markdown, html: "drop" })[0][1] as string).filter((e) => e.localName === "b" || /tracker/.test(e.getAttribute("src") ?? ""))).toEqual([]);
+      expect(blocks({ markdown, html: "drop" })[0][1]).not.toContain("raw</b>");
+      expect(blocks({ markdown })[0][1]).toContain("<b>raw</b>");
+      // A URL policy that leaves every link and image out leaves out theirs too, in a table in a quote or a list as anywhere.
+      const none = parsed(blocks({ markdown, html: "escape", url: () => undefined })[0][1] as string);
+      expect([where, none.filter((e) => (e.localName === "a" && e.hasAttribute("href")) || e.localName === "img")]).toEqual([where, []]);
+    }
+  });
+});
+
+describe("Markdown from data: no more than its size calls for", () => {
+  let error: MockInstance;
+  beforeEach(() => {
+    error = vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+  afterEach(() => error.mockRestore());
+
+  /** A table about `bytes` long: n columns, and n rows of one `|`, which marked fills out to the header's width (n² cells). */
+  const padded = (bytes: number) => {
+    const n = Math.floor(bytes / 6);
+    return "|" + "a|".repeat(n) + "\n|" + "-|".repeat(n) + "\n" + "|\n".repeat(n);
+  };
+
+  it("fails on a table marked would fill out to more cells than the Markdown has characters (or 1,000), as a component of yours fails", async () => {
+    for (const kb of [1, 5, 20, 100]) {
+      const markdown = padded(kb * 1024);
+      // (Without reading the rows: well under a second however large, where filling it out took seconds and gigabytes.)
+      const timing = await within(5000, () => {
+        try {
+          renderToHtml(email({ markdown }));
+        } catch (e) {
+          return e;
+        }
+      });
+      const thrown = timing.result;
+      expect(thrown).toBeInstanceOf(RenderError);
+      expect((thrown as RenderError).message).toMatch(/^\[Unlayer\] A table of \d+ columns and \d+ rows is \d+ cells, more than the Markdown can render: .* \(in <Markdown> at Row 1 › Column 1 › Markdown\)$/);
+      expect(inTime(timing)).toBe(true);
+    }
+    // With `onError: "omit"` it's left out of the HTML, the plain text and the design, listed, and the rest renders.
+    const markdown = `# Before\n\n${padded(5 * 1024)}\nAfter`;
+    const parts = renderToHtmlParts(email({ markdown }), { onError: "omit" });
+    expect(parts.omitted.map((e) => [e.component, e.position])).toEqual([["Markdown", "Row 1 › Column 1 › Markdown"]]);
+    expect(parts.body).not.toContain("u_content_table");
+    expect(renderToJson(email({ markdown }), { onError: "omit" }).body.rows[0].columns[0].contents.map((c: any) => c.type)).toEqual(["heading", "text"]);
+    expect(renderToPlainText(email({ markdown }), { onError: "omit" })).toMatch(/BEFORE[\s\S]*After/);
+    expect(parts.body.length).toBeLessThan(100_000);
+    expect(error.mock.calls.map((call) => String(call[0]))).toContain(`[Unlayer] Left out: ${parts.omitted[0].message.replace(/^\[Unlayer\] /, "")}`);
+    // The async renderers alike.
+    const async = await asyncRenderers.renderToHtmlParts(email({ markdown }), { onError: "omit" });
+    expect([async.omitted.map((e) => e.position), async.body.includes("u_content_table")]).toEqual([["Row 1 › Column 1 › Markdown"], false]);
+    await expect(asyncRenderers.renderToHtml(email({ markdown }))).rejects.toThrow(/A table of \d+ columns/);
+  });
+
+  it("renders a table whose cells are written out, however large, and one with short rows up to 1,000 cells", () => {
+    const row = (n: number, text: string) => "|" + `${text}|`.repeat(n) + "\n";
+    const large = row(30, "head") + row(30, "-") + row(30, "cell").repeat(200);
+    expect(blocks({ markdown: large })[0][1]).toMatchObject({ rows: { length: 200 } });
+    // 20 columns, 49 rows of one cell: 1,000 cells, the rest filled out.
+    const sparse = row(20, "h") + row(20, "-") + "|x|\n".repeat(49);
+    expect(blocks({ markdown: sparse })[0][1]).toMatchObject({ rows: { length: 49 } });
+    expect(() => renderToHtml(email({ markdown: sparse + "|x|\n" }))).toThrow(/A table of 20 columns and 50 rows is 1020 cells/);
+    // The cells are the Markdown's in all: tables that fit one by one don't together.
+    const fit = row(20, "h") + row(20, "-") + "|x|\n".repeat(24);
+    expect(blocks({ markdown: `${fit}\n${fit}` }).map(([type]) => type)).toEqual(["table", "table"]);
+    expect(() => renderToHtml(email({ markdown: `${fit}\n${fit}\n${fit}` }))).toThrow(/A table of 20 columns and 24 rows is 500 cells/);
+  });
+
+  it("charges a table once where marked reads the quotes it's in again (with a line after them that continues them)", () => {
+    const row = (n: number, text: string) => "|" + `${text}|`.repeat(n);
+    const quoted = (prefix: string, lines: string[]) => lines.map((line) => prefix + line).join("\n");
+    // 930 cells, all written out, three quotes deep: marked reads the quotes around it again for the line after them,
+    // which charged it three times (2,790 cells, more than the Markdown's 2,153 characters).
+    const table = [row(30, "h"), row(30, "-"), ...Array.from({ length: 30 }, () => row(30, "x"))];
+    const html = renderToHtml(email({ markdown: `${quoted("> > > ", table)}\nand more` }));
+    expect(new DOMParser().parseFromString(html, "text/html").querySelectorAll("blockquote td")).toHaveLength(900);
+    // Each table is still charged: three of 500 cells with short rows, two quotes deep, fail on the third.
+    const sparse = `${quoted("> > ", [row(20, "h"), row(20, "-"), ...Array.from({ length: 24 }, () => "|x|")])}\nlazy\n\n`;
+    expect(() => renderToHtml(email({ markdown: sparse.repeat(2) }))).not.toThrow();
+    expect(() => renderToHtml(email({ markdown: sparse.repeat(3) }))).toThrow(/A table of 20 columns and 24 rows is 500 cells/);
+  });
+
+  it("leaves out the list or quote a table that's too large is in, as it leaves out the table", () => {
+    const markdown = `Before\n\n${padded(4096).replace(/^/gm, "> ")}\n\nAfter`;
+    expect(() => renderToHtml(email({ markdown }))).toThrow(/A table of \d+ columns .* \(in <Markdown> at Row 1 › Column 1 › Markdown\)$/);
+    const parts = renderToHtmlParts(email({ markdown }), { onError: "omit" });
+    expect(parts.omitted).toHaveLength(1);
+    expect(parts.body).not.toContain("<blockquote");
+    expect(renderToJson(email({ markdown }), { onError: "omit" }).body.rows[0].columns[0].contents.map((c: any) => c.values.text)).toEqual(["Before", "After"]);
+  });
+
+  it("nests quotes and lists 32 deep: deeper, their markers are text, and the rest of the email renders", async () => {
+    for (const markdown of [">".repeat(2500) + " deep", "> - ".repeat(2000) + "deep", "> ".repeat(50000) + "deep", "- ".repeat(5000) + "deep"]) {
+      const timing = await within(5000, () =>
+        renderToHtml(
+          <Email>
+            <Row>
+              <Column>
+                <Markdown markdown={markdown} />
+                <Html html="<p>The rest</p>" />
+              </Column>
+            </Row>
+          </Email>
+        )
+      );
+      const html = timing.result;
+      const body = new DOMParser().parseFromString(html, "text/html").body;
+      let depth = 0;
+      for (let e: Element | null = body.querySelector("blockquote, ul"); e; e = e.querySelector(":scope > blockquote, :scope > li > ul, :scope > ul, :scope > li > blockquote, :scope > p > blockquote")) depth++;
+      expect(depth).toBeGreaterThan(0);
+      expect(depth).toBeLessThanOrEqual(32);
+      expect(body.textContent).toContain("deep");
+      expect(body.textContent).toContain("The rest");
+      expect(inTime(timing)).toBe(true);
+    }
+    // Under the limit, as deep as written.
+    expect(renderToHtml(email({ markdown: "> ".repeat(10) + "x" })).match(/<blockquote/g)).toHaveLength(10);
+  });
+
+  it("reads inline Markdown in time linear in its size, however its delimiters are left open or nested", async () => {
+    // Each 100 KB on one line, or on many: marked looks ahead from each opener to the line's end (or the paragraph's)
+    // for what closes it, and from each place an email or a URL could start for one, so these took up to a minute
+    // (`*a `), or overflowed the stack (emphasis nested deep). Past what an email's Markdown takes, the rest is text.
+    const fill = (unit: string) => unit.repeat(Math.ceil(102400 / unit.length)).slice(0, 102400);
+    const shapes: [string, string, boolean?][] = [];
+    for (const unit of ["*a ", "*a **a ", "_a __a ", "**a *", "<a *", "~a ~~a ", "[a](", "![a](", "[a](b ", "[a](b (", "[a](<", "[`a](", "`a``b```c", "<a ", "[[[a]]](", "a*b", "http", "a_", "a <?a ", "a <!a "]) {
+      shapes.push([unit, fill(unit)], [unit + "\\n", fill(unit + "\n").replace(/\n$/, ")")]);
+    }
+    shapes.push(
+      ["*a nested", "*a ".repeat(17000) + "b" + " a*".repeat(17000)],
+      ["~~a nested", "~~a ".repeat(12800) + "b" + " a~~".repeat(12800)],
+      ["a URL trimmed", "http://a" + "&a;".repeat(34000)],
+      ["an email's characters", "a.".repeat(51200) + "@"],
+      ["spaces, with breaks", "a" + " ".repeat(102400) + "b", true],
+      // A link's text of raw HTML nothing closes: marked reads from each `<` to the end, to see whether it runs past the `]`.
+      ...["<!--", "<?", "<![CDATA[", "<!a ", '<a b="', "<a "].map((open): [string, string] => [`[${open} …](x)`, `[${fill(open).slice(0, 102300)}](x)`])
+    );
+    for (const [shape, markdown, breaks] of shapes) {
+      const timing = await within(3000, () => renderToHtml(email({ markdown, html: "escape", breaks })));
+      expect([shape, timing.result.length > 100000, inTime(timing)]).toEqual([shape, true, true]);
+    }
+  }, 180_000);
+
+  it("nests emphasis, strikethrough and links 32 deep: deeper, their delimiters are text", () => {
+    const depth = (html: string) => {
+      let deepest = 0;
+      for (let e: Element | null = new DOMParser().parseFromString(html, "text/html").body.querySelector("em"), at = 1; e; e = e.querySelector(":scope > em"), at++) deepest = at;
+      return deepest;
+    };
+    expect(depth(renderToHtml(email({ markdown: "*a ".repeat(32) + "b" + " a*".repeat(32) })))).toBe(32);
+    const deeper = renderToHtml(email({ markdown: "*a ".repeat(40) + "b" + " a*".repeat(40) }));
+    expect(depth(deeper)).toBe(32);
+    expect(new DOMParser().parseFromString(deeper, "text/html").body.textContent).toContain("*a *a b a* a*");
+  });
+
+  it("renders the rest of a Markdown's inline syntax as text past the work it can take, leaving nothing out", () => {
+    const markdown = "*a ".repeat(40000) + "\n\nAfter: **bold** and [a link](https://e.test).";
+    const body = new DOMParser().parseFromString(renderToHtml(email({ markdown, html: "escape" })), "text/html").body;
+    expect(body.textContent).toContain("After: **bold** and [a link](https://e.test).");
+    expect(body.querySelector("strong")).toBeNull();
+    // Under it, as written.
+    expect(renderToHtml(email({ markdown: "*a ".repeat(400) + "\n\nAfter: **bold** and [a link](https://e.test)." }))).toContain("<strong>bold</strong>");
+  });
+
+  it("reads an email's emphasis, strikethrough and links as marked does, many and long ones too", () => {
+    // What an email's Markdown has, many times over: each read as marked reads it.
+    const markdown = Array.from({ length: 400 }, (_, i) => `Para ${i}: *em* and **strong** and ~~gone~~, a [link](https://e.test/${i}) and ![img](https://e.test/${i}.png), a * stray star, a [bracket] and an _under_score_word_. *${"Long emphasis that runs on. ".repeat(20).trim()}*`).join("\n\n");
+    const html = renderToHtml(email({ markdown, html: "escape" }));
+    expect(html.match(/<em>em<\/em>/g)).toHaveLength(400);
+    expect(html.match(/<strong>strong<\/strong>/g)).toHaveLength(400);
+    expect(html.match(/<del>gone<\/del>/g)).toHaveLength(400);
+    expect(html.match(/href="https:\/\/e.test\/\d+"/g)).toHaveLength(400);
+    expect(html.match(/<em>Long emphasis/g)).toHaveLength(400);
+  });
+
+  it("renders a very long Markdown: its lines and blocks aren't spread into one call, which would overflow the stack", () => {
+    for (const markdown of ["a\n".repeat(130000), "a\n\n".repeat(130000)]) {
+      const plain = renderToPlainText(email({ markdown }));
+      expect(plain.match(/a/g)?.length).toBe(130000);
+    }
+  }, 60_000);
+
+  it("renders a code block of whitespace in time linear in its size, its colors off or not", async () => {
+    // Its trailing whitespace taken off with a regex that tried again from each space: 100 KB of spaces then `x` took 6 s.
+    for (const markdown of ["```\n" + " ".repeat(102400) + "x\n```", "```js\n" + "\n".repeat(102400) + "x\n```", "- a\n\n  ```\n  " + " ".repeat(102400) + "x\n  ```"]) {
+      const timing = await within(3000, () => renderToHtml(email({ markdown, html: "escape" })));
+      expect([markdown.slice(0, 8), timing.result.includes("x</code>"), inTime(timing)]).toEqual([markdown.slice(0, 8), true, true]);
+    }
+  });
+
+  it("reads a list item of many lines in time linear in its size: marked read the rest of it again for each line", async () => {
+    // In a list item, marked reads one line at a time: before each, its setext heading rule read the rest of the item
+    // for an underline, and each line added to the text before it read all that text again. 200 KB took 6 s.
+    const fill = (unit: string) => unit.repeat(Math.ceil(204800 / unit.length)).slice(0, 204800);
+    for (const unit of ["- [a]: b\n!@", "+ \\[x]\n@", "- \n    -:http://;", "> 1. .<-\n[ ]", "1. `\nwww.", "- a\n    b\n", "- a\n[x]: y\n"]) {
+      const timing = await within(3000, () => renderToHtml(email({ markdown: fill(unit), html: "escape" })));
+      const html = timing.result;
+      expect([unit, html.includes("@") || html.includes("www") || html.includes("b") || html.includes("y"), inTime(timing)]).toEqual([unit, true, true]);
+    }
+    // As marked reads them: headings underlined in list items, lines added to an item's text, code and definitions in it.
+    const samples = ["- a\n  b\n  ---\n- c\n  ===\n", "- a\nb\n=\n", "1. one\n   two\n\n       code\n   [x]: https://e.test\n   three\n", "> - a\n>   b\n>   -\n", "- a\n  \u2028b\n  -\n", "* x\ny\nz\n  ---\nw"];
+    for (const sample of samples) expect([sample, new Bounded({ breaks: false, cells: 1e6, size: sample.length }).lex(sample)]).toEqual([sample, new Lexer({ gfm: true }).lex(sample)]);
+  });
+
+  it("looks for reference links (`[a]`) only where the Markdown defines one", async () => {
+    // marked masks the reference links in a paragraph from each `[`, up to 999 steps each: 1 MB of `\[` took 4 s, with
+    // none to mask. Defined, they're masked as marked masks them.
+    expect(inTime(await within(2000, () => renderToHtml(email({ markdown: "\\[".repeat(524288), html: "escape" }))))).toBe(true);
+    const markdown = "Read *[the guide] and [faq]*, **[a][guide]**.\n\n[guide]: https://e.test/g\n[faq]: https://e.test/f";
+    expect(new Bounded({ breaks: false, cells: 1e6, size: markdown.length }).lex(markdown)).toEqual(new Lexer({ gfm: true }).lex(markdown));
+  });
+
+  it("costs about ten times as much for ten times as much of any short shape of blocks and inline syntax (random, seeded)", async () => {
+    // What each round of review found one shape of at a time: rules that read the rest of the text from each place.
+    const pieces = [">", "> ", "- ", "--", "-", "* ", "+ ", "1. ", "1)", "# ", "=", "|", "|-|", ":-", "`", "```", "~~~", "~~", "_", "**", "[", "]", "(", ")", "![", "]:", "<", "<a>", "<div>", "<!--", "<?", "&", "\\", "a", "b", " ", "  ", "    ", "\t", "[ ]", "http://", "www.", "@", '"', "\\[", "[a]: b"];
+    let seed = 7;
+    const random = (n: number) => ((seed = (Math.imul(seed, 1103515245) + 12345) >>> 0), Math.floor((seed / 2 ** 32) * n));
+    const fill = (unit: string, bytes: number) => unit.repeat(Math.ceil(bytes / unit.length)).slice(0, bytes);
+    const time = (markdown: string, breaks: boolean) => {
+      const start = performance.now();
+      new Bounded({ breaks, cells: Math.max(TABLE_CELLS, markdown.length), size: markdown.length }).lex(markdown);
+      return performance.now() - start;
+    };
+    const slow: string[] = [];
+    for (let run = 0; run < 200; run++) {
+      // One to three lines of a few pieces each (blocks are read by lines), the last one ending the unit or not.
+      let unit = "";
+      for (let line = 0, lines = 1 + random(3); line < lines; line++) {
+        for (let i = 0, n = random(4); i < n; i++) unit += pieces[random(pieces.length)];
+        if (line < lines - 1 || random(4)) unit += random(6) ? "\n" : "\n\n";
+      }
+      unit ||= "a";
+      const breaks = random(4) === 0;
+      // (The seeded shapes stay the same: timing one again draws nothing.)
+      const { small, large, next, grows } = await growth((bytes) => time(fill(unit, bytes), breaks), [10240, 102400], { ratio: 20, floor: 100, next: 1024000 });
+      if (grows) slow.push(`${JSON.stringify(unit)}: ${small.toFixed(1)} ms for 10 KB, ${large.toFixed(1)} ms for 100 KB${next === undefined ? "" : `, ${next.toFixed(0)} ms for 1 MB`}`);
+    }
+    expect(slow).toEqual([]);
+  }, 120_000);
+
+  it("reads lines a table can't start in time linear in their size: marked read every line after them first", async () => {
+    // A line under one that could be a table's header (`a` then `-`, a setext heading) was read with all the lines after
+    // it as the table's rows before marked told it isn't one: 100 KB of `a\n-\n` took 14 s. A paragraph's lines were
+    // too, to tell whether a table starts there (`|` then `-`: 5 s).
+    const fill = (unit: string) => unit.repeat(Math.ceil(102400 / unit.length)).slice(0, 102400);
+    for (const unit of ["a\n-\n", "a\n--\n", "a\n:-\n", "> --\n", "--    \n", "-\n~<!--    > ```\n", "a|b\n|-|\n", "|-|-|\n|-|\n", "- a\n  -\n", "|\n-\n", "a\n|\n-\n"]) {
+      const timing = await within(3000, () => renderToHtml(email({ markdown: fill(unit), html: "escape" })));
+      expect([unit, timing.result.length > 100000, inTime(timing)]).toEqual([unit, true, true]);
+    }
+    expect(inTime(await within(3000, () => asyncRenderers.renderToHtml(email({ markdown: fill("a\n-\n"), html: "drop" }))))).toBe(true);
+    // As marked reads them: a heading underlined with `-`, and a table after many of them, with its rows.
+    const markdown = `${"Title\n-\n\n".repeat(500)}| a | b |\n|---|:-:|\n| 1 | 2 |\n| 3 | 4 |`;
+    expect(blocks({ markdown }).map(([type]) => type)).toEqual([...Array(500).fill("heading"), "table"]);
+    expect(blocks({ markdown }).at(-1)?.[1]).toMatchObject({ rows: { length: 2 } });
+  }, 120_000);
+
+  it("reads quotes in time linear in their size, however lines without a `>` continue them, and lists, quotes and code in them", async () => {
+    // marked reads a quote a chunk at a time (up to a line without a `>` that continues it), and after each chunk the
+    // lines left, and where the chunk ends in a list that list again with all of them: 100 KB of `>- a\nb\n` took 6.6
+    // s, and blocked the event loop as long. And each quote looked to its end, so 50 KB of quotes that end at once
+    // (`> ```\na\n`) took 1.1 s.
+    const fill = (unit: string, bytes: number) => unit.repeat(Math.ceil(bytes / unit.length)).slice(0, bytes);
+    const shapes: [string, number][] = [">- a\nb\n", "> - a\nb\n", "> 1) a\nb\n", ">>- a\nb\n", ">- >- a\nb\n", "> - a\n>   - b\nc\n", "> - [ ] a\nb\n", ">a\nb\n", "> a\nb\n", "> a\n=\n", "> | a |\n|-|\nb\n"].map((unit) => [unit, 102400]);
+    shapes.push(["> ```\na\n", 51200]);
+    // Each against a quarter of it, timed on the same machine, however fast: four times the size costs about four times
+    // as much, where marked's reading cost sixteen (`>- a\nb\n`: 0.45 s for 25 KB, 7.4 s for 100 KB).
+    const timed = async (render: () => unknown) => {
+      const start = performance.now();
+      await render();
+      return performance.now() - start;
+    };
+    for (const [unit, bytes] of shapes) {
+      // (The last timed is the whole size: its HTML.)
+      let html = "";
+      const { small, large, grows } = await growth((size) => timed(() => (html = renderToHtml(email({ markdown: fill(unit, size), html: "escape" }), { onError: "omit" }))), [bytes / 4, bytes], { ratio: 8, floor: 100 });
+      expect([unit, html.length > 100000, grows ? `${small.toFixed(0)} ms for a quarter, ${large.toFixed(0)} ms` : "linear"]).toEqual([unit, true, "linear"]);
+    }
+    // The async renderers too.
+    const { small, large, grows } = await growth((size) => timed(() => asyncRenderers.renderToHtml(email({ markdown: fill(">- a\nb\n", size), html: "escape" }), { onError: "omit" })), [25600, 102400], { ratio: 8, floor: 100 });
+    expect(grows ? `${small.toFixed(0)} ms for a quarter, ${large.toFixed(0)} ms` : "linear").toBe("linear");
+  }, 180_000);
+
+  it("reads link reference definitions in time linear in their number, each used once or not at all", async () => {
+    // Each paragraph's inline pass asked whether the Markdown defines a reference by gathering all its definitions'
+    // names (a `for…in` gathers every key before its first): 10,000 definitions (134 KB) took 2.7 s, and blocked the
+    // event loop as long.
+    const ids = (n: number) => [...Array(n).keys()].map((i) => i.toString(36));
+    const used = (n: number) => `${ids(n).map((id) => `[${id}]:x`).join("\n")}\n\n${ids(n).map((id) => `[${id}]`).join(" ")}`;
+    const paragraphs = (n: number) => `${ids(n).map((id) => `[${id}]:x`).join("\n")}\n\n${ids(n).map((id) => `p ${id}`).join("\n\n")}`;
+    const timed = (markdown: string) => {
+      const start = performance.now();
+      renderToHtml(email({ markdown, html: "escape" }));
+      return performance.now() - start;
+    };
+    for (const shape of [used, paragraphs]) {
+      const { small, large, grows } = await growth((n) => timed(shape(n)), [2500, 10000], { ratio: 8, floor: 100 });
+      expect(grows ? `${small.toFixed(0)} ms for a quarter, ${large.toFixed(0)} ms` : "linear").toBe("linear");
+    }
+    // A definition is still read: the last of 10,000 links where it points.
+    expect(renderToHtml(email({ markdown: used(10000), html: "escape" }))).toMatch(new RegExp(`href="x"[^>]*>${(9999).toString(36)}</a>`));
+  }, 120_000);
+
+  it("past the work its quotes can take, ends each quote at its first line without a `>`, leaving nothing out", () => {
+    const words = (html: string) => new DOMParser().parseFromString(html, "text/html").body.textContent!.match(/\b[abc]\d+\b/g)!;
+    const numbered = (n: number) => Array.from({ length: n }, (_, i) => `>- a${i}\nb${i}\n`).join("");
+    // Under it, as marked reads them: the line without a `>` continues the list item in the quote.
+    const few = renderToHtml(email({ markdown: numbered(3) }));
+    expect(new DOMParser().parseFromString(few, "text/html").querySelectorAll("blockquote li")).toHaveLength(3);
+    expect(few).toMatch(/<li[^>]*>a0\s*b0<\/li>/);
+    // Past it, each quote is its `>` lines, and the line after it a paragraph: each word once, in order.
+    const many = renderToHtml(email({ markdown: `${numbered(3000)}\nc0` }));
+    expect(words(many)).toEqual([...Array.from({ length: 3000 }, (_, i) => [`a${i}`, `b${i}`]).flat(), "c0"]);
+  }, 60_000);
+
+  it("keeps what follows a quote that holds lists continued by lines without a `>` (marked read past the quote into it)", () => {
+    // marked's quote counted a character more for each list it read again, and the text after it lost as many.
+    const markdown = ">- a\nb\n>- c\nd\n>- e\nf\n\nAfter the quote.";
+    expect(renderToPlainText(email({ markdown }))).toMatch(/\nAfter the quote\.\s*$/);
+    expect(blocks({ markdown }).at(-1)).toEqual(["text", "After the quote."]);
+  });
+
+  it("highlights its code blocks while their sizes squared add up to 8,192²: past that, a block is shown without colors, and said once", async () => {
+    // highlight.js's time grows with a block's size squared on some code: 100 KB of INI in a fence took 27 s, and 40
+    // KB of Markdown 2.2 s.
+    const fill = (unit: string, n: number) => unit.repeat(Math.ceil(n / unit.length)).slice(0, n);
+    for (const [language, unit] of [["ini", ".e1"], ["markdown", "["], ["java", "$a"]]) {
+      const render = () => renderToHtml(email({ markdown: "```" + language + "\n" + fill(unit, 102400) + "\n```", html: "escape" }));
+      // (A render timed again says nothing: what the first said is what's read after.)
+      const timing = await within(3000, render, { again: () => quietly(render) });
+      expect([language, timing.result.includes(fill(unit, 1000)), inTime(timing)]).toEqual([language, true, true]);
+    }
+    const said = () => warn.mock.calls.map((call) => String(call[0])).filter((message) => message.startsWith("[Unlayer] Markdown"));
+    expect(said()).toEqual(Array(3).fill("[Unlayer] Markdown: 1 code block in the render's Markdown is shown without colors: the render's code blocks' sizes squared add up to more than the 67108864 highlight.js is given for one render (on some code its time grows with a block's size squared)."));
+    warn.mockClear();
+    // Sixteen blocks of 2,048 characters are 8,192²; the four after them (in a list too) are shown without colors.
+    const block = (i: number) => "```js\n" + `${i};`.padEnd(2048, "1") + "\n```";
+    const markdown = Array.from({ length: 18 }, (_, i) => block(i)).join("\n\n") + `\n\n- item\n\n  ${block(18).replace(/\n/g, "\n  ")}\n\n${block(19)}`;
+    const colored = (value: string) => value.includes('<span style="color');
+    const values = renderToJson(email({ markdown })).body.rows[0].columns[0].contents.map((c: any) => c.values.html ?? c.values.text);
+    expect(values.map(colored)).toEqual([...Array(16).fill(true), false, false, false, false]);
+    expect(said()).toEqual([
+      "[Unlayer] Markdown: 4 code blocks in the render's Markdown are shown without colors: the render's code blocks' sizes squared add up to more than the 67108864 highlight.js is given for one render (on some code its time grows with a block's size squared).",
+    ]);
+  });
+
+  it("reads a long task list in time linear in its size, its items as marked reads them", async () => {
+    // marked took each task item's `[ ]` out of what's left to read by looking for it from the end, again for each
+    // item: 400 KB of task items took 13 s.
+    const markdown = "- [ ] a\n- [x] b\n".repeat(25000);
+    const timing = await within(3000, () => renderToHtml(email({ markdown })));
+    expect(inTime(timing)).toBe(true);
+    const html = timing.result;
+    expect([html.match(/&#9744;|☐/g)?.length, html.match(/&#9745;|☑/g)?.length]).toEqual([25000, 25000]);
+    // The tokens marked makes of task items: tight and loose lists, nested ones, in quotes, with code or a link after
+    // the box, a box that isn't one (no text after it, or not at the item's start), and many items.
+    const samples = [
+      "- [ ] one\n- [x] two\n  - [ ] nested\n  - [X] nested `code`\n- plain",
+      "- [ ] loose\n\n- [x] [a link](https://e.test)\n\n  More text.\n",
+      "> - [ ] quoted\n> - [x] task\n>   more\nlazy\n",
+      "- [ ]\n- [x]   \n- a [ ] b\n1. [x] ordered\n2) [ ] other\n",
+      "* [ ] [ ] twice\n* [x] **bold** ~~gone~~\n\n  [ ] a paragraph\n",
+      Array.from({ length: 300 }, (_, i) => `- [${i % 3 ? " " : "x"}] item ${i}\n${i % 7 ? "" : "\n"}`).join(""),
+    ];
+    for (const sample of samples) expect([sample, new Bounded({ breaks: false, cells: 1e6, size: sample.length }).lex(sample)]).toEqual([sample, new Lexer({ gfm: true }).lex(sample)]);
+  });
+});
+
+describe("Markdown from data, in a render of many blocks: no more than their size calls for", () => {
+  // A digest of comments, each a <Markdown> of its own (as notification emails are built): each had all the work a
+  // Markdown can take, so a render's time grew with their number: 12 comments of 8 KB of Java took 4.8 s, 60 took 23.5 s.
+  const fill = (unit: string, n: number) => unit.repeat(Math.ceil(n / unit.length)).slice(0, n);
+  const digest = (children: React.ReactNode[]) => (
+    <Email>
+      {children.map((child, i) => (
+        <Row key={i}>
+          <Column>{child}</Column>
+        </Row>
+      ))}
+    </Email>
+  );
+  /** Each row's blocks' HTML (or text). */
+  const rows = (template: React.ReactElement) => renderToJson(template).body.rows.map((row: any) => row.columns[0].contents.map((c: any) => String(c.values.html ?? c.values.text ?? "")));
+  const colored = (html: string) => html.includes('<span style="');
+  const said = () => warn.mock.calls.map((call) => String(call[0]));
+  const time = (render: () => unknown) => {
+    const start = performance.now();
+    render();
+    return performance.now() - start;
+  };
+
+  it("highlights its Markdown's and CodeBlocks' code while their sizes squared add up to 8,192², said once", async () => {
+    const code = fill("int a = 1;\n", 8000);
+    const fence = "```java\n" + code + "\n```";
+    const template = digest([<Markdown markdown={fence} />, <CodeBlock language="java" code={code} />, <Markdown markdown={fence} />, <CodeBlock language="java" code={code} />, <Markdown markdown={"```java\nint b;\n```"} />]);
+    // The first takes nearly all of it; a small block after the others still fits.
+    expect(rows(template).map((blocks: string[]) => blocks.map(colored))).toEqual([[true], [false], [false], [false], [true]]);
+    expect(said()).toEqual([
+      "[Unlayer] CodeBlock: code is shown without colors: the sizes squared of the code blocks highlighted in this render add up to more than the 67108864 highlight.js is given for one render (on some code its time grows with a block's size squared).",
+      "[Unlayer] Markdown: 1 code block in the render's Markdown is shown without colors: the render's code blocks' sizes squared add up to more than the 67108864 highlight.js is given for one render (on some code its time grows with a block's size squared).",
+    ]);
+    // An async render's parts share it as the synchronous render's do; each render has its own.
+    expect(await asyncRenderers.renderToHtml(template)).toBe(renderToHtml(template));
+    // Outside a render, each highlightCode() call has its own (up to 8,192 characters).
+    expect([highlightCode(code, { language: "java" }), highlightCode(code, { language: "java" })].map(colored)).toEqual([true, true]);
+  });
+
+  it("gives its Markdown's inline syntax, together, the work one Markdown of their size can take: past it, the rest is text", () => {
+    // `*a ` over and over takes marked about 0.7 million steps for 2 KB: alone, a comment of it has the million.
+    const comment = fill("*a ", 2048) + "\n\n*end*";
+    const emphasis = (blocks: string[]) => blocks.some((html) => /<em[^>]*>end<\/em>/.test(html));
+    expect(rows(digest([<Markdown markdown={comment} />])).map(emphasis)).toEqual([true]);
+    expect(rows(digest(Array.from({ length: 6 }, (_, i) => <Markdown key={i} markdown={comment} />))).map(emphasis)).toEqual([true, false, false, false, false, false]);
+    expect(said()).toEqual(["[Unlayer] Markdown: it takes marked more work to read than a render's Markdown can (32 steps for each of its characters, and about a million more for its inline syntax, four million for its quotes), so the rest of its inline syntax is text: nothing is left out."]);
+  });
+
+  it("gives its Markdown's quotes, together, the work one Markdown of their size can take: past it, each quote ends at its first line without a `>`", () => {
+    // A quote whose every other line continues it without a `>` takes marked about 0.6 million steps for 2 KB.
+    const comment = fill("> a\nb\n", 2048);
+    const counts = rows(digest(Array.from({ length: 12 }, (_, i) => <Markdown key={i} markdown={comment} />))).map((blocks: string[]) => blocks.length);
+    expect([counts[0], counts[11] > 100]).toEqual([1, true]);
+    expect(said()).toEqual(["[Unlayer] Markdown: it takes marked more work to read than a render's Markdown can (32 steps for each of its characters, and about a million more for its inline syntax, four million for its quotes), so each quote ends at its first line without a `>`, and the rest of a list item's lines is text: nothing is left out."]);
+    expect(rows(digest([<Markdown markdown={comment} />])).map((blocks: string[]) => blocks.length)).toEqual([1]);
+  });
+
+  it("says what's past the render's work where it's rendered as markup too (in a Paragraph's children)", () => {
+    // Elements' own markup was walked with work of its own, which no render said once it was done.
+    const fence = "```java\n" + fill("int a = 1;\n", 7999) + ";\n```";
+    renderToHtml(
+      <Email>
+        <Row>
+          <Column>
+            <Paragraph>
+              x <Markdown markdown={fence + "\n\n" + fence} />
+            </Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(said().filter((message) => message.startsWith("[Unlayer] Markdown"))).toHaveLength(1);
+  });
+
+  it("charges only the code it highlights: a fence in a language with no grammar takes none of the render's work", () => {
+    // A `dockerfile` fence (no grammar: shown without colors) was charged as highlighted, and the Java after it lost
+    // its colors, said as past the work.
+    const code = fill("int a = 1;\n", 7999) + ";";
+    const markdown = "```dockerfile\n" + code + "\n```\n\n```java\n" + code.slice(0, 5000) + "\n```";
+    expect(rows(digest([<Markdown markdown={markdown} />]))[0].map(colored)).toEqual([false, true]);
+    expect(said()).toEqual(['[Unlayer] CodeBlock has no grammar for `dockerfile`, so it\'s shown without colors: add one with registerLanguage() from "@unlayer/react-elements/code".']);
+  });
+
+  it("gives its Markdown's tables, together, the cells one Markdown of their size can have: past them, a table is too large", () => {
+    // Each Markdown had a thousand cells of its own: 562 comments of a sparse table (20 columns, 49 rows of `|`, 182
+    // bytes), 100 KB, were 197 MB of HTML, and ran a 350 MB heap out of memory.
+    const table = "|" + "a|".repeat(20) + "\n|" + "-|".repeat(20) + "\n" + "|\n".repeat(49);
+    // (Each table left out is said: console.error.)
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    onTestFinished(() => error.mockRestore());
+    const tables = (template: React.ReactElement) => {
+      const html = renderToHtml(template, { onError: "omit" });
+      return (html.match(/<table[^>]*class="[^"]*u_content_table/g) ?? []).length;
+    };
+    const many = digest(Array.from({ length: 40 }, (_, i) => <Markdown key={i} html="escape" markdown={table} />));
+    const one = digest([<Markdown html="escape" markdown={Array(40).fill(table).join("\n\n")} />]);
+    expect([tables(many), tables(many) === tables(one)]).toEqual([tables(one), true]);
+    expect([tables(one) > 4, tables(one) < 10]).toEqual([true, true]);
+    expect(() => renderToHtml(many)).toThrow(/A table of 20 columns and 49 rows is 1000 cells, more than the Markdown can render: a render's Markdown tables can have, in all, as many cells as its Markdown has characters/);
+    // A table whose cells are written out fits, in a render of many as alone.
+    expect(tables(digest(Array.from({ length: 40 }, (_, i) => <Markdown key={i} markdown={"| a | b |\n|---|---|\n| 1 | 2 |"} />)))).toBe(40);
+  });
+
+  it("says once, when the render's done, how many of all its Markdown's code blocks are shown without colors", () => {
+    const fence = "```js\n" + "a;".repeat(4096) + "\n```";
+    renderToHtml(digest([<Markdown markdown={fence} />, <Markdown markdown={[fence, fence].join("\n\n")} />, <Markdown markdown={[fence, fence].join("\n\n")} />]));
+    expect(said().filter((message) => message.startsWith("[Unlayer] Markdown"))).toEqual([
+      "[Unlayer] Markdown: 4 code blocks in the render's Markdown are shown without colors: the render's code blocks' sizes squared add up to more than the 67108864 highlight.js is given for one render (on some code its time grows with a block's size squared).",
+    ]);
+  });
+
+  it("renders many blocks from data in about the time one of their size takes", async () => {
+    const java = "```java\n" + fill("$a", 8170) + "\n```";
+    const shapes: Array<[string, React.ReactElement]> = [
+      ["12 comments of 8 KB of Java", digest(Array.from({ length: 12 }, (_, i) => <Markdown key={i} markdown={java} />))],
+      ["12 CodeBlocks of 8 KB of Java", digest(Array.from({ length: 12 }, (_, i) => <CodeBlock key={i} language="java" code={fill("$a", 8190)} />))],
+      ["50 comments of 2 KB of `*a `", digest(Array.from({ length: 50 }, (_, i) => <Markdown key={i} markdown={fill("*a ", 2048)} />))],
+    ];
+    for (const [name, template] of shapes) expect([name, inTime(await within(1500, () => renderToHtml(template), { again: () => quietly(() => renderToHtml(template)) }))]).toEqual([name, true]);
+  });
+
+  it("costs about ten times as much for ten times as many blocks, and about what one Markdown of them all costs (random, seeded)", async () => {
+    const pieces = ["*a ", "_a ", "**a ", "[a](", "> a\nb\n", ">- a\nb\n", "a\n-\n", "|\n-\n", "- a\n  b\n", "\\[", "<!--", "```java\n$a", "```ini\n-", "```csharp\ndef ", "```c\n//", "Some text. ", "\n\n"];
+    let seed = 7;
+    const random = (n: number) => ((seed = (Math.imul(seed, 1103515245) + 12345) >>> 0), Math.floor((seed / 2 ** 32) * n));
+    const slow: string[] = [];
+    for (let run = 0; run < 24; run++) {
+      const unit = pieces[random(pieces.length)] + (random(2) ? pieces[random(pieces.length)] : "");
+      const block = fill(unit, 2048);
+      const blocks = (n: number) => digest(Array.from({ length: n }, (_, i) => (random(4) || !block.startsWith("```") ? <Markdown key={i} markdown={block} /> : <CodeBlock key={i} language="java" code={block} />)));
+      // (Each template made once, in the order its blocks draw, so the seeded shapes stay the same however often one
+      // is timed.)
+      const templates: Record<number, React.ReactElement> = { 5: blocks(5), 50: blocks(50) };
+      const one = digest([<Markdown markdown={Array(50).fill(block).join("\n\n")} />]);
+      const { small: few, large, grows } = await growth((n) => time(() => renderToHtml(templates[n])), [5, 50], { ratio: 20, floor: 100 });
+      // And about what one Markdown of them all takes, the fastest of three where it looks more.
+      let many = large;
+      let whole = time(() => renderToHtml(one));
+      if (many > 3 * whole + 1000) {
+        for (let i = 0; i < 2; i++) many = Math.min(many, time(() => renderToHtml(templates[50])));
+        for (let i = 0; i < 2; i++) whole = Math.min(whole, time(() => renderToHtml(one)));
+      }
+      if (grows || many > 3 * whole + 1000) slow.push(`${JSON.stringify(unit)}: ${few.toFixed(0)} ms for 5 blocks of 2 KB, ${many.toFixed(0)} ms for 50, ${whole.toFixed(0)} ms for one of 100 KB`);
+    }
+    expect(slow).toEqual([]);
+  }, 120_000);
+});
+
+/** Random inputs the sanitizer is given (`SANITIZE_FUZZ_RUNS=300000` for a longer run, `SANITIZE_FUZZ_SEED` for others). */
+const FUZZ_RUNS = Number(process.env.SANITIZE_FUZZ_RUNS ?? 2000);
+
+/** The elements an HTML parser makes of HTML in a page's body. */
+const parsed = (html: string) => [...new DOMParser().parseFromString(`<!doctype html><body>${html}`, "text/html").body.querySelectorAll("*")];
+
+/** Whether a style (as the browser reads it: its escapes decoded, its spaces gone) could load or run something. */
+const loads = (style: string) =>
+  /expression|javascript:|behavior|-moz-binding|progid|url\(|image\(|image-set\(|\/\*/i.test(style.replace(/\\([\da-f]{1,6})\s?|\\(.)/gi, (_, hex, ch) => (hex ? String.fromCodePoint(Math.min(parseInt(hex, 16), 0x10ffff)) : ch)).replace(/\s/g, ""));
+
+describe("sanitizeHtml", () => {
+  it("leaves no tag that what's around a part it takes out joins into", () => {
+    const markdown = "<div>\n<scr<script></script>ipt>alert(1)</script>\n</div>";
+    // (`<scr<script>` is one tag to a browser, named `scr<script`: left out, as is the `</script>` after it.)
+    expect(sanitizeHtml(markdown)).toBe("<div>\nipt>alert(1)\n</div>");
+    const [[type, html]] = blocks({ markdown });
+    expect([type, parsed(html).map((e) => e.localName)]).toEqual(["html", ["div"]]);
+    expect(renderToHtml(email({ markdown }))).not.toMatch(/<script/i);
+    expect(sanitizeHtml("<<script>script>alert(1)<</script>/script>")).toBe("&lt;/script>");
+    expect(sanitizeHtml("<scr<style>x</style>ipt>a</script>")).toBe("xipt>a");
+  });
+
+  it("reads tags and attributes as a browser does, and writes back only those that display", () => {
+    const cases: Array<[string, string]> = [
+      ["<img/src=x/onerror=alert(1)>", '<img src="x/onerror=alert(1)">'],
+      ['<a href="java&#x09;script:alert(1)">a</a><a href="&#x6A;avascript:x">b</a><a href=" &#106avascript:x">c</a><a href="javascript&colon;x">d</a>', "<a>a</a><a>b</a><a>c</a><a>d</a>"],
+      ['<p style="background:url&lpar;x)">a</p><p style="b\\61 ckground: \\75 rl(x)">b</p><p style="width: expr/**/ession(1)">c</p><p style="color: red">d</p>', '<p>a</p><p>b</p><p>c</p><p style="color: red">d</p>'],
+      ['<a href="https://example.com" href="javascript:x" onclick="x()" data-x="1" aria-label="Go" title=\'say "hi" `x`\'>a</a>', '<a href="https://example.com" aria-label="Go" title="say &quot;hi&quot; &#96;x&#96;">a</a>'],
+      ["<custom-tag><o:p>Kept text</o:p></custom-tag><form action=x><input value=y><button>Go</button></form>", "Kept textGo"],
+      ['<svg onload="alert(1)"/>after<svg><script>alert(1)</script></svg>end<math><mi>x</mi></math><template><img src=x></template><svg/onload=alert(1)>gone', "afterend"],
+      ["<!doctype html><?xml version='1.0'?><![CDATA[x]]><!-- a --><!--> b<!---> c<!-- open", " b c"],
+      ["a < b > c & d &copy; <b>e", "a &lt; b > c & d &copy; <b>e"],
+      ['a <a href="x', "a "],
+      ["<b>bold</b> <img src=x onerror=alert(1)", "<b>bold</b> "],
+      ["<b\u0000>x</b>\u0000", "x</b>\ufffd"],
+      ["<td nowrap background=cid:logo colspan=2><br/><hr noshade /></td>", '<td nowrap background="cid:logo" colspan="2"><br /><hr noshade /></td>'],
+      ["<base href=//evil><meta http-equiv=refresh content=0><link rel=stylesheet href=x><embed src=x>text", "text"],
+    ];
+    for (const [html, kept] of cases) expect([html, sanitizeHtml(html)]).toEqual([html, kept]);
+  });
+
+  it("keeps no class whose arbitrary value could load or run something, whatever renders it later", () => {
+    const cases: Array<[string, string]> = [
+      ['<p class="note bg-[url(https://x.test/a.gif)] p-2">a</p>', '<p class="note p-2">a</p>'],
+      ['<p class="[background:u&#114;l(x)] max-[480px]:[background:u\\72l(x)] [behavior:x] [--x:image-set(a.png_1x)]">a</p>', "<p>a</p>"],
+      ['<p class="bg-&#91;url(x)] hover:bg-[u/**/rl(x)] [filter:progid:x] text-red-500">a</p>', '<p class="text-red-500">a</p>'],
+      // A `_` is a space to Tailwind, which ends an escape: `\75_rl(` is `url(` to it.
+      ['<p class="[background-image:\\75_rl(https://x.test/a.gif)] note">a</p>', '<p class="note">a</p>'],
+      // What isn't one (a class of yours) and arbitrary values that load nothing stay as written.
+      ['<p class="expression-box w-[calc(100%-2px)] bg-[#ff0000] font-[&#39;Open_Sans&#39;]">a</p>', '<p class="expression-box w-[calc(100%-2px)] bg-[#ff0000] font-[&#39;Open_Sans&#39;]">a</p>'],
+    ];
+    for (const [html, kept] of cases) expect([html, sanitizeHtml(html)]).toEqual([html, kept]);
+    // The design, which any renderer may render again (in a <Tailwind>), holds none.
+    expect(blocks({ markdown: '<div class="bg-[url(https://x.test/a.gif)] note">a</div>' })).toEqual([["html", '<div class="note">a</div>']]);
+  });
+
+  it("reads a long input in one pass, whatever it leaves open", async () => {
+    const opens = ['<a x="', "<b ", "<!", "<", "<script>", "<x y=", "<!--"];
+    const timing = await within(2000, () => opens.map((open) => sanitizeHtml(`<p>${open.repeat(40000)}text`).length));
+    for (const length of timing.result) expect(length).toBeLessThan(400000);
+    expect(inTime(timing)).toBe(true);
+  });
+
+  it("keeps only display tags and safe attributes, whatever hostile fragments it's given (fuzzed)", () => {
+    // Every element and attribute a browser reads from its output is on the allowlists, no URL runs code, no style
+    // loads or runs anything, and sanitizing its output again changes nothing.
+    const fragments = [
+      "<scr", "ipt>", "<script>", "</script>", "<!--", "-->", "--!>", "<svg/onload=alert(1)>", "<img src=x onerror=alert(1)>", "<img/src=", "/onerror=",
+      "javascript:alert(1)", "&#x6A;avascript:", "java&#x09;script:", "&#106;", "&colon;", "&lpar;", "<iframe", "<iframe src=x>", "<style>", "</style>",
+      "<math>", "<math><mi><mglyph>", "<svg><style>", "<template>", "<noscript>", "<textarea>", "</textarea>", "<title>", "<xmp>", "<plaintext>",
+      "<base href=", "<meta http-equiv=refresh content=0;url=javascript:alert(1)>", "<form action=", "<object data=", "<embed src=", "<link rel=",
+      "<a href=", '<a href="', "<a href=java&#x0A;script:x>", "<td background=javascript:x>", '<p style="', "background:url(", "\\75 rl(", "expression(",
+      "/*", "*/", "-moz-binding:", "behavior:", "<details open ontoggle=alert(1)>", "<font color=red>", "<div>", "</div>", "<b>", "</", "<", "<!", "<?xml ",
+      "<!doctype html>", "<![CDATA[", "]]>", '"', "'", "`", ">", "/", "=", " ", "\n", "\t", "\0", "&#0;", "text", "data:text/html,", "data:image/png;base64,AA", "cid:x",
+      ' class="', " class=", "bg-[", "[background:", "&#91;", "]", "u&#114;l(", "u\\72l(", "u/**/rl(", "image(", "progid:", "&#32;", "p-2", "&lpar;",
+      ' class="bg-[url(x)] p-2', " class='[background:u&#114;l(x)]", ' class="p-2&#32;bg-[u\\72l(x)]"', " class=bg-&#91;url(x)]", ' class="[filter:progid:x]',
+    ];
+    const kept = new Set("a abbr address article aside b bdi bdo big blockquote br caption center cite code col colgroup dd del details dfn div dl dt em figcaption figure font footer h1 h2 h3 h4 h5 h6 header hr i img ins kbd li main mark nav ol p pre q s samp section small span strike strong sub summary sup table tbody td tfoot th thead time tr tt u ul var wbr".split(" "));
+    const attributes = new Set("abbr align alt axis background bgcolor border cellpadding cellspacing char charoff cite class clear color colspan compact datetime dir face frame headers height href hreflang hspace id lang name noshade nowrap open rel reversed role rowspan rules scope size span src start style summary target title type valign value vspace width".split(" "));
+    // A URL's scheme as the browser resolves it (a relative one on the page's; one it can't parse goes nowhere), and CSS
+    // as it reads it, its escapes decoded.
+    const scheme = (url: string) => {
+      try {
+        const { protocol, href } = new URL(url, "https://example.com/");
+        return protocol === "data:" ? (/^data:image\/(png|gif|jpe?g|webp)[;,]/i.test(href) ? "image" : "data") : protocol.slice(0, -1);
+      } catch {
+        return "none";
+      }
+    };
+    const r = random(Number(process.env.SANITIZE_FUZZ_SEED ?? 20261018));
+    const bad: string[] = [];
+    for (let run = 0; run < FUZZ_RUNS && bad.length < 5; run++) {
+      let input = "";
+      for (let n = 1 + Math.floor(r() * 16); n > 0; n--) input += fragments[Math.floor(r() * fragments.length)];
+      const out = sanitizeHtml(input);
+      const wrong = (why: string) => bad.push(`${JSON.stringify(input)} → ${JSON.stringify(out)}: ${why}`);
+      if (sanitizeHtml(out) !== out) wrong("not idempotent");
+      for (const element of parsed(out)) {
+        if (!kept.has(element.localName) || element.namespaceURI !== "http://www.w3.org/1999/xhtml") wrong(`<${element.localName}>`);
+        for (const { name, value } of element.attributes) {
+          if (!attributes.has(name) && !/^aria-[a-z]+$/.test(name)) wrong(`attribute ${name}`);
+          if ((name === "href" || name === "cite") && !["https", "http", "mailto", "tel", "none"].includes(scheme(value))) wrong(`${name}=${value}`);
+          if ((name === "src" || name === "background") && !["https", "http", "cid", "image", "none"].includes(scheme(value))) wrong(`${name}=${value}`);
+          if (name === "style" && loads(value)) wrong(`style=${value}`);
+          // (A class's arbitrary value, what Tailwind would inline: from its first bracket.)
+          if (name === "class") for (const token of value.split(/[\t\n\f\r ]+/)) if (/[[(]/.test(token) && loads(token.slice(token.search(/[[(]/)))) wrong(`class ${token}`);
+        }
+      }
+    }
+    expect(bad).toEqual([]);
+  }, FUZZ_RUNS * 5 + 30000);
+});
+
+describe("Markdown in a <Tailwind>", () => {
+  let tw: TailwindHandle;
+  beforeAll(async () => {
+    tw = await loadTailwind();
+  });
+  /** The HTML of each block in the design. */
+  const design = (content: React.ReactNode) =>
+    renderToJson(
+      <Tailwind tw={tw}>
+        <Email>
+          <Row>
+            <Column>{content}</Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    ).body.rows[0].columns[0].contents.map((c: any) => c.values.text ?? c.values.html);
+  const styles = (html: string) => parsed(html).map((element) => element.getAttribute("style") ?? "");
+
+  it("inlines no class into its HTML that could load or run something, as its sanitizer keeps no such style", () => {
+    // Arbitrary values and properties, written plain or hidden from a check: an HTML reference (`&#114;`), a CSS escape
+    // (`\\72`), a comment Tailwind takes out.
+    const vectors = [
+      "[background:url(https://x.test/a.gif)]",
+      "bg-[url(https://x.test/a.gif)]",
+      "bg-[u&#114;l(https://x.test/a.gif)]",
+      "bg-[u&#x72;l(https://x.test/a.gif)]",
+      "bg-[u\\72l(https://x.test/a.gif)]",
+      "bg-[u\\rl(https://x.test/a.gif)]",
+      "[background:URL(https://x.test/a.gif)]",
+      "[background:u/**/rl(https://x.test/a.gif)]",
+      "[list-style-image:url(https://x.test/a.gif)]",
+      "[behavior:url(x.htc)]",
+      "[-moz-binding:url(x.xml)]",
+      "[background:expression(alert(1))]",
+      "[filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://x.test/a.png)]",
+      "[background:image(https://x.test/a.png)]",
+    ];
+    for (const vector of vectors) {
+      // In a raw HTML block, and in a paragraph's HTML; the other classes inlined.
+      for (const markdown of [`<div class="${vector} text-red-500">a</div>`, `Text <span class="${vector} text-red-500">a</span>`]) {
+        const [html] = design(<Markdown markdown={markdown} />);
+        expect([vector, styles(html)]).toEqual([vector, ["color: #fb2c36"]]);
+      }
+    }
+    // The sanitizer left them out; what Tailwind inlines into sanitized HTML is checked again (as a block holding
+    // Markdown's HTML is marked).
+    expect(design(<Html html={'<div class="[background:url(https://x.test/a.gif)] text-red-500">a</div>'} {...({ _sanitized: true } as {})} />)).toEqual(['<div style="color: #fb2c36">a</div>']);
+    expect(warn.mock.calls.map((call) => String(call[0]))).toContain(
+      "[Unlayer] Html can't inline `[background:url(https://x.test/a.gif)]`'s `background` in its markup: it could load or run something, which Markdown's sanitized HTML doesn't allow."
+    );
+    // A phone, breakpoint or hover variant is in no style, inline or in the head.
+    const variants = renderToHtml(<Tailwind tw={tw}><Email><Row><Column><Markdown markdown={'<div class="sm:bg-[url(https://x.test/a.gif)] max-sm:bg-[url(https://x.test/a.gif)] hover:bg-[url(https://x.test/a.gif)]">a</div>'} /></Column></Row></Email></Tailwind>);
+    expect(variants).toContain(">a</div>");
+    expect(variants).not.toContain("x.test");
+  });
+
+  it("renders Markdown from data in about the time its size calls for: elements nested deep in one with a class, many classes", async () => {
+    // Each about 300 KB. Nested 30,000 deep took seconds, growing with the square of the depth; 9,000 classes Tailwind
+    // hadn't built, in one paragraph or one to a paragraph, took minutes (each read alone built its whole stylesheet
+    // again), then hundreds of megabytes built at once: a render reads its first 2,000 (CLASSES), the others as written.
+    const n = 9000;
+    for (const [markdown, style, past] of [
+      ['<div class="p-1">' + "<div>".repeat(30_000) + "x" + "</div>".repeat(30_000) + "</div>", "padding: 4px"],
+      [Array.from({ length: n }, (_, i) => `<span class="p-[${i}px]">x</span>`).join(" "), "padding: 1999px", '<span class="p-[2000px]">'],
+      [Array.from({ length: n }, (_, i) => `<span class="m-[${i}px]">x</span>`).join("\n\n"), "margin: 1999px", '<span class="m-[8999px]">'],
+    ]) {
+      // (Timed again on a fresh handle: one reads the classes it built from what it built.)
+      let again = 0;
+      const render = (handle: TailwindHandle) => renderToHtml(<Tailwind tw={handle}><Email><Row><Column><Markdown markdown={markdown} /></Column></Row></Email></Tailwind>);
+      const timing = await within(5000, () => render(tw), { before: () => loadTailwind({ again: again++ }), again: render });
+      const html = timing.result;
+      expect(html).toContain(style);
+      if (past) expect(html).toContain(past);
+      expect(inTime(timing)).toBe(true);
+    }
+  }, 120_000);
+
+  it("renders headings with a class each in time linear in their number: their `text`'s classes are built at once", async () => {
+    // A heading's sanitized HTML is its `text`, whose classes were built one heading at a time, each build Tailwind's
+    // whole stylesheet again: 2,000 headings (73 KB) took 4.7 s.
+    // (Each timed on a fresh handle: one reads the classes it built from what it built.)
+    let handles = 0;
+    const time = async (n: number) => {
+      const handle = await loadTailwind({ headings: handles++ });
+      const markdown = Array.from({ length: n }, (_, i) => `# <span class="w-[${i + 1}px]">x</span>`).join("\n\n");
+      const start = performance.now();
+      const html = renderToHtml(<Tailwind tw={handle}><Email><Row><Column><Markdown markdown={markdown} /></Column></Row></Email></Tailwind>);
+      const ms = performance.now() - start;
+      expect(html).toMatch(new RegExp(`width: ?${n}px`));
+      return ms;
+    };
+    await time(20);
+    const { small, large, grows } = await growth(time, [200, 2000], { ratio: 20, floor: 100 });
+    expect(grows, `${small.toFixed(0)} ms for 200 headings, ${large.toFixed(0)} ms for 2,000`).toBe(false);
+  }, 60_000);
+
+  it("inlines your own markup's classes as written: only Markdown's HTML is sanitized", () => {
+    expect(design(<Html html={'<div class="bg-[url(https://x.test/a.gif)]">a</div>'} />)).toEqual(['<div style="background-image: url(https://x.test/a.gif)">a</div>']);
+  });
+
+  /** Classes whose variables use each other twice over, `n` deep, the last `x`, for `property`. */
+  const chain = (n: number, property: string) => [...Array.from({ length: n }, (_, i) => `[--v${i}:var(--v${i + 1})_var(--v${i + 1})]`), `[--v${n}:x]`, `[${property}:var(--v0)]`].join(" ");
+
+  it("renders a class string whose variables come to too much at once, leaving out (and saying) what can't be inlined", async () => {
+    const markdown = `Hello\n\n<p class="${chain(31, "font-family")} text-red-500">raw</p>\n`;
+    // (Timed again on a fresh handle, saying nothing: one reads the classes it built from what it built.)
+    let again = 0;
+    const timing = await within(5000, () => design(<Markdown markdown={markdown} />), {
+      before: () => loadTailwind({ chain: again++ }),
+      again: (handle) => quietly(() => renderToJson(<Tailwind tw={handle}><Email><Row><Column><Markdown markdown={markdown} /></Column></Row></Email></Tailwind>)),
+    });
+    expect(styles(timing.result[1])).toEqual(["color: #fb2c36"]);
+    expect(warn.mock.calls.map((call) => String(call[0]))).toContain("[Unlayer] Html ignores class `[font-family:var(--v0)]` in its markup: `font-family`'s variables come to more than 4096 characters.");
+    expect(inTime(timing)).toBe(true);
+  }, 30000);
+
+  it("inlines nothing that loads or runs anything, whatever classes its HTML is given (fuzzed)", () => {
+    // An arbitrary value or property (`bg-[…]`, `[background:…]`) of random parts, some hiding a `url(` from a check
+    // (an HTML reference, a CSS escape, a comment Tailwind takes out), its brackets, quotes and comments closed or not.
+    const opens = ["bg-[", "[background:", "[background-image:", "[list-style-image:", "[behavior:", "[-moz-binding:", "[border-image:", "[color:"];
+    const parts = ["url(", "URL(", "u&#114;l(", "u&#x72;l(", "u\\72l(", "u\\72_l(", "u\\rl(", "u/**/rl(", "image-set(", "expression(", "x&lpar;", "x&#40;", "javascript:", "https://x.test/a.gif", "x", "_", "&amp;", ",", ")", "(", "[", "]", "/*", "*/", "\\", "'", "&quot;"];
+    const r = random(Number(process.env.SANITIZE_FUZZ_SEED ?? 20261018));
+    const pick = (list: string[]) => list[Math.floor(r() * list.length)];
+    const bad: string[] = [];
+    let dropped = 0;
+    for (let run = 0; run < FUZZ_RUNS / 10 && bad.length < 5; run++) {
+      let value = "";
+      for (let n = 1 + Math.floor(r() * 5); n > 0; n--) value += pick(parts);
+      // Some with variables that use each other twice over (2^n characters, past what memory holds at 31 unchecked).
+      const vars = r() < 0.3 ? chain(1 + Math.floor(r() * 31), pick(["font-family", "background", "letter-spacing"])) : "";
+      const className = `${pick(opens)}${value}${r() < 0.5 ? ")" : ""}${r() < 0.8 ? "]" : ""} ${vars} text-red-500`;
+      if (!sanitizeHtml(`<b class="${className}">`).includes(className)) dropped++;
+      for (const html of design(<Markdown markdown={`<div class="${className}">a</div>\n\nText <span class="${className}">b</span>`} />)) {
+        for (const style of styles(html)) if (loads(style)) bad.push(`${JSON.stringify(className)} → ${JSON.stringify(style)}`);
+        // (What Tailwind can't read doesn't stop it reading the rest.)
+        if (!html.includes("color: #fb2c36")) bad.push(`${JSON.stringify(className)} → ${JSON.stringify(html)}: no color`);
+      }
+    }
+    expect(bad).toEqual([]);
+    // (The inputs reach the checks: the sanitizer left many out, and Tailwind couldn't read others.)
+    expect(dropped).toBeGreaterThan(FUZZ_RUNS / 100);
+    expect(warn.mock.calls.filter((call) => String(call[0]).includes("isn't a class Tailwind can read here")).length).toBeGreaterThan(FUZZ_RUNS / 100);
+  }, FUZZ_RUNS * 5 + 30000);
+});
+
+/** A seeded random number generator (mulberry32): the same inputs every run. */
+function random(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
diff --git a/packages/react/src/markdown/quotes.ts b/packages/react/src/markdown/quotes.ts
new file mode 100644
index 00000000..4536fb99
--- /dev/null
+++ b/packages/react/src/markdown/quotes.ts
@@ -0,0 +1,96 @@
+/**
+ * What a quote costs marked (18.0.14's, the version built in) to read, and where to end it when that's more than is
+ * left. marked reads a quote a chunk at a time: its `>` lines, up to a line without one that continues its paragraph
+ * (a lazy line), then the lazy lines with the `>` lines after them, and so on. After each chunk it copies the lines
+ * left; where the chunk ends in a list, it reads that list again with all the lines left (joining them, and the quote
+ * so far, once more); where it ends in a quote, that quote, once. So a quote with a lazy line every other line took time
+ * growing with its size squared: `>- a\nb\n` repeated took 1.5 s for 50 KB and 6.6 s for 100 KB, `> a\nb\n` 15 s for
+ * 800 KB. And each quote looks to its end, so a line that ends a quote at once, repeated (`> ```\na\n`), did too.
+ *
+ * The work counted here is marked's for a quote, at the most: its characters (marked looks for its end, splits it into
+ * lines and reads each chunk), the lines left after each chunk, and the quote's characters again for each chunk that
+ * can end in a list and once where one can end in a quote.
+ */
+
+/**
+ * How a quote is read: all of it (`cut` undefined), or up to `cut`, its first chunk's end (a quote of one chunk is read
+ * at once); and the work counted for it.
+ */
+export type QuoteRead = { cut?: number; work: number };
+
+const QUOTE = / {0,3}>/y;
+const MARKER = / {0,3}>[ \t]?/y;
+const BLANK = /[ \t]*(?:\n|$)/y;
+/** A line that can start a list, after its `>`: its bullet or number at any indentation. */
+const BULLET = /[ \t]*(?:[*+-]|\d{1,9}[.)])(?:[ \t\n]|$)/y;
+/** A line that can start a quote, after its `>`. */
+const NESTED = /[ \t]*>/y;
+/** A line that may add no block of its own (blank, or a link's definition): a list before it is still the last block. */
+const INERT = /[ \t]*(?:\[|\n|$)/y;
+
+const at = (pattern: RegExp, src: string, index: number): boolean => {
+  pattern.lastIndex = index;
+  return pattern.test(src);
+};
+
+/** Where a `>` line's content starts: after its `>` and a space or tab. */
+const content = (src: string, index: number): number => {
+  MARKER.lastIndex = index;
+  MARKER.test(src);
+  return MARKER.lastIndex;
+};
+
+/**
+ * How a quote at the start of `src` is read with `left` work left: all of it where its work fits, else its first chunk
+ * (cut before its first line without a `>`, which is read on as Markdown outside the quote: nothing is left out). The
+ * text is read only as far as it's needed: to the quote's end at the most, no further than `left` (and the first
+ * chunk's end) where that's less. With `again` (a quote marked reads again), past the work it isn't read: `cut` is 0.
+ */
+export function readQuote(src: string, left: number, again = false): QuoteRead {
+  let off = 0;
+  let line = 0;
+  // Whether the line before is a `>` line; where the first chunk ends.
+  let quoted = false;
+  let first: number | undefined;
+  // The chunks that ended (and the lines before each), and those of them that can end in a list.
+  let chunks = 0;
+  let before = 0;
+  let lists = 0;
+  // In the chunk being read: whether it can end in a list, whether it may add no block; and whether the quote can hold one.
+  let list = false;
+  let inert = true;
+  let wasList = false;
+  let nested = false;
+  const work = () => off + (chunks * line - before) + lists * off + (nested ? off : 0);
+  const over = (): QuoteRead | undefined => (again ? { cut: 0, work: 0 } : first !== undefined ? { cut: first, work: Infinity } : undefined);
+  if (again && left < 0) return { cut: 0, work: 0 };
+  for (;;) {
+    const quote = at(QUOTE, src, off);
+    if (!quote && (off >= src.length || at(BLANK, src, off))) break;
+    if (!quote && quoted) {
+      // A chunk ends.
+      first ??= off;
+      wasList = list || (inert && wasList);
+      if (wasList) lists++;
+      chunks++;
+      before += line;
+      list = false;
+      inert = true;
+    }
+    const text = quote ? content(src, off) : off;
+    if (at(BULLET, src, text)) list = true;
+    if (!at(INERT, src, text)) inert = false;
+    if (quote && at(NESTED, src, text)) nested = true;
+    quoted = quote;
+    const end = src.indexOf("\n", off);
+    line++;
+    off = end < 0 ? src.length : end + 1;
+    if (end < 0) break;
+    // Past what's left already (it only grows as more is read).
+    if (work() > left) {
+      const read = over();
+      if (read) return read;
+    }
+  }
+  return work() <= left || !chunks ? { work: work() } : over()!;
+}
diff --git a/packages/react/src/markdown/reach.ts b/packages/react/src/markdown/reach.ts
new file mode 100644
index 00000000..39937d39
--- /dev/null
+++ b/packages/react/src/markdown/reach.ts
@@ -0,0 +1,246 @@
+/**
+ * How much of the text marked's inline rules (marked 18.0.14's, the version built in) can look at, from where they
+ * read: given that much, a rule reads as it does given all of it, and doesn't look further. A reach is a number of
+ * characters, past the last one the rule can look at; the length of the text where it could look to the end.
+ */
+
+/** The end of what `run` (sticky) matches at `from`, or `from`. */
+export const runEnd = (src: string, from: number, run: RegExp): number => {
+  run.lastIndex = from = Math.min(from, src.length);
+  return run.test(src) ? run.lastIndex : from;
+};
+
+/** Where `pattern` (global) first matches at or after `from`, or the text's length. */
+const first = (src: string, from: number, pattern: RegExp): number => {
+  pattern.lastIndex = from;
+  return pattern.exec(src)?.index ?? src.length;
+};
+
+const WHITESPACE = /\s*/y;
+const SPACES = / */y;
+const TICKS = /`*/y;
+const TILDES = /~*/y;
+/** What an email address is made of, as marked looks for one before an `@`. */
+const EMAIL = /[a-zA-Z0-9.!#$%&'*+/=?_`{|}~-]*/y;
+
+/**
+ * Text: up to where marked's text rule stops (before a character that could start something else, `http`, `www.`,
+ * an email address, two spaces at a line's end), and what it looks at past that, the email address or the spaces it's
+ * in. With `breaks` it stops at each line's end too, before its spaces: there marked looks for that line's end again
+ * at each of a run of spaces, so text with a long run of them is read up into the run (it reads on from there).
+ */
+const TEXT_STOP = /[\\<!\[`*~_]|[hH][tT][tT][pP]|[fF][tT][pP]:\/\/|www\.|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+/=?_`{|}~-](?=[a-zA-Z0-9.!#$%&'*+/=?_`{|}~-]+@)|[^a-zA-Z0-9](?=(?:mailto|xmpp):)/g;
+const TEXT_STOP_BREAKS = new RegExp(`${TEXT_STOP.source}|\\n`, "g");
+/** In text, with `breaks`: a run of spaces long enough that marked reads it in time growing with its length squared. */
+const LONG_SPACES = / {64}/g;
+
+export const textReach = (src: string, breaks: boolean): number => {
+  const start = src[0] === "`" ? runEnd(src, 0, TICKS) : src[0] === "~" ? runEnd(src, 0, TILDES) : 1;
+  const pattern = breaks ? TEXT_STOP_BREAKS : TEXT_STOP;
+  pattern.lastIndex = start;
+  const match = pattern.exec(src);
+  let stop = match ? match.index : src.length;
+  if (breaks && match?.[0] === "\n") while (stop > start && src[stop - 1] === " ") stop--;
+  stop++;
+  if (breaks) {
+    const spaces = first(src.slice(0, stop), start, LONG_SPACES);
+    if (spaces + 65 < stop) return spaces + 32;
+  }
+  if (stop >= src.length) return src.length;
+  return Math.max(stop + 8, runEnd(src, stop, EMAIL), runEnd(src, stop, SPACES)) + 1;
+};
+
+/** A URL or an email address marked links by itself: no further than the first whitespace. */
+export const urlReach = (src: string): number => first(src, 0, /\s/g) + 1;
+
+/** What can't be in an autolink. */
+const AUTOLINK_END = /[\s\x00-\x1f<>]/g;
+
+/** `<scheme:…>` or `<address@…>`: to its `>`, or what can't be in one. */
+export const autolinkReach = (src: string): number => first(src, 1, AUTOLINK_END) + 1;
+
+/** Code: to the next run of as many backticks. */
+export const codeReach = (src: string): number => {
+  const ticks = runEnd(src, 0, TICKS);
+  const runs = /`+/g;
+  runs.lastIndex = ticks;
+  for (let run; (run = runs.exec(src)); ) if (run[0].length === ticks) return runs.lastIndex + 1;
+  return src.length;
+};
+
+/** A line break: two spaces or a backslash at a line's end, and the whitespace after it. */
+export const brReach = (src: string): number => {
+  const end = src[0] === "\\" ? 1 : runEnd(src, 0, SPACES);
+  return src[end] === "\n" ? runEnd(src, end + 1, WHITESPACE) + 1 : end + 1;
+};
+
+/** Where a string is next in the text from a place, or -1: `src.indexOf`, or the same read once (see `searches`). */
+type Find = (text: string, from: number) => number;
+
+/**
+ * `src.indexOf`, reading the text for each string once: the places it's at, found as far as asked, so a search from
+ * each of many places (each `<` in a link's text) reads the text once for each string, wherever they are.
+ */
+const searches = (src: string): Find => {
+  const found = new Map<string, { at: number[]; read: number }>();
+  return (text, from) => {
+    let places = found.get(text);
+    if (!places) found.set(text, (places = { at: [], read: 0 }));
+    const { at } = places;
+    while ((!at.length || at[at.length - 1] < from) && places.read <= src.length) {
+      const next = src.indexOf(text, places.read);
+      places.read = next < 0 ? src.length + 1 : next + 1;
+      if (next >= 0) at.push(next);
+    }
+    // The first place at or after `from`.
+    let low = 0;
+    let high = at.length;
+    while (low < high) {
+      const mid = (low + high) >> 1;
+      if (at[mid] < from) low = mid + 1;
+      else high = mid;
+    }
+    return low < at.length ? at[low] : -1;
+  };
+};
+
+/** Raw HTML: a comment, a tag with its attributes (each quoted value to its quote), `<?…?>`, `<!…>`, CDATA. */
+export const tagReach = (src: string): number => tagEnd(src, 0, (text, from) => src.indexOf(text, from));
+
+/** tagReach for the `<` at `start` of `src`, as a place in `src`, its searches by `find`. */
+function tagEnd(src: string, start: number, find: Find): number {
+  const to = (end: string, from: number) => {
+    const at = find(end, from);
+    return at < 0 ? src.length : at + end.length;
+  };
+  if (src.startsWith("<!--", start)) return to("-->", start + 4) + 1;
+  if (src.startsWith("<![CDATA[", start)) return to("]]>", start + 9) + 1;
+  if (src[start + 1] === "?") return to("?>", start + 2) + 1;
+  if (src[start + 1] === "!") {
+    const name = runEnd(src, start + 2, LETTERS);
+    return name > start + 2 && /\s/.test(src[name] ?? "") ? to(">", name) + 1 : name + 1;
+  }
+  if (src[start + 1] === "/") return runEnd(src, runEnd(src, start + 2, TAG_NAME), WHITESPACE) + 2;
+  if (!/[a-zA-Z]/.test(src[start + 1] ?? "")) return start + 2;
+  // A tag: its name, then attributes, each after whitespace, with a value or not.
+  let at = runEnd(src, start + 1, TAG_NAME);
+  for (;;) {
+    const space = runEnd(src, at, WHITESPACE);
+    const end = src[space] === "/" ? space + 1 : space;
+    if (src[end] === ">" || space === at || !ATTRIBUTE.test(src[space] ?? "")) return end + 2;
+    at = runEnd(src, space, ATTRIBUTE_NAME);
+    const equals = runEnd(src, at, WHITESPACE);
+    if (src[equals] !== "=") continue;
+    const value = runEnd(src, equals + 1, WHITESPACE);
+    const quote = src[value];
+    if (quote === '"' || quote === "'") {
+      const close = find(quote, value + 1);
+      if (close < 0) return src.length;
+      at = close + 1;
+    } else {
+      at = runEnd(src, value, UNQUOTED);
+      if (at === value) return value + 2;
+    }
+  }
+}
+
+const LETTERS = /[a-zA-Z]*/y;
+const TAG_NAME = /[a-zA-Z][a-zA-Z0-9-]*/y;
+const ATTRIBUTE = /[a-zA-Z:_]/;
+const ATTRIBUTE_NAME = /[a-zA-Z:_][\w.:-]*/y;
+const UNQUOTED = /[^\s"'=<>`]*/y;
+
+/**
+ * A link's text: from `[` (after `!` for an image) to its `]` outside the brackets it holds (two deep at most), its
+ * escapes and its code skipped (a run of backticks to the next run, as code can hold a `]`). Its `]`, or (as a negative
+ * number, -1 - reach) how far marked looks where it hasn't one.
+ */
+const label = (src: string): number => {
+  let at = src[0] === "!" ? 2 : 1;
+  for (let depth = 0; at < src.length; at++) {
+    const char = src[at];
+    if (char === "\\") at++;
+    else if (char === "`" && !depth) {
+      const ticks = runEnd(src, at, TICKS);
+      // Two or more before a `]` may end the text there too: then marked may look either way.
+      const next = ticks - at > 1 && src[ticks] === "]" ? -1 : src.indexOf("`", ticks);
+      if (next < 0) return -1 - src.length;
+      at = runEnd(src, next, TICKS) - 1;
+    } else if (char === "[" && ++depth > 2) return -1 - (at + 1);
+    else if (char === "]" && !depth--) return at;
+  }
+  return -1 - src.length;
+};
+
+/**
+ * How far marked looks from each `<` in a link's text (from `from` to `to`): it reads raw HTML and autolinks there
+ * again. Each `<`'s search for what ends it (`-->`, `>`, a quote) goes on from where the one before found it: from each
+ * `<` again, `[` and `<!--` 25,000 times took 7 s.
+ */
+const angles = (src: string, from: number, to: number, looks?: Looks): number => {
+  const find = searches(src);
+  // (Its `<`s looked for up to `to`: from each `[` past it, to the end, `[` over and over took time growing with its size squared.)
+  const text = src.slice(0, to);
+  let reach = 0;
+  for (let at = text.indexOf("<", from); at >= 0; at = text.indexOf("<", at + 1)) {
+    const tag = tagEnd(src, at, find);
+    const autolink = first(src, at + 1, AUTOLINK_END) + 1;
+    reach = Math.max(reach, tag, autolink);
+    if (looks) looks.steps += tag + autolink - 2 * at;
+  }
+  return reach;
+};
+
+/**
+ * What marked reads in a link's text besides its reach: from each `<` in it, the raw HTML or the autolink there, to see
+ * whether it runs past the text's `]` (at the most: it skips one that ends inside). An unclosed one, `<!--`, is read to
+ * the end from each, so `[` and `<!--` 25,000 times took 7 s: the inline lexer counts it (see inline.ts).
+ */
+export type Looks = { steps: number };
+
+/** `[text](url "title")`: its text, then from `(` its URL and title as marked tries them, and `)`. */
+export const linkReach = (src: string, looks?: Looks): number => {
+  const end = label(src);
+  if (end < 0) return -1 - end;
+  const text = angles(src, 1, end, looks);
+  if (src[end + 1] !== "(") return Math.max(text, end + 2);
+  const start = runEnd(src, end + 2, WHITESPACE);
+  // Its URL: `<…>`, or up to whitespace.
+  let angle = start + 1;
+  if (src[start] === "<") {
+    while (angle < src.length && src[angle] !== "\n" && src[angle] !== "<" && src[angle] !== ">") angle += src[angle] === "\\" && !LINE_END.test(src[angle + 1] ?? "\n") ? 2 : 1;
+    angle = src[angle] === ">" ? after(src, angle + 1) : angle + 1;
+  }
+  return Math.max(text, angle, after(src, start), after(src, runEnd(src, start, HREF))) + 1;
+};
+
+const HREF = /[^ \t\n\x00-\x1f]*/y;
+/** What `.` doesn't match: a backslash before one doesn't escape it. */
+const LINE_END = /[\n\r\u2028\u2029]/;
+
+/** From where a link's URL may end: whitespace, a title in `"…"`, `'…'` or `(…)` to its end, whitespace and `)`. */
+const after = (src: string, from: number): number => {
+  const space = runEnd(src, from, WHITESPACE);
+  const quote = src[space];
+  if (space === from || (quote !== '"' && quote !== "'" && quote !== "(")) return space + 1;
+  const close = quote === "(" ? ")" : quote;
+  let at = space + 1;
+  while (at < src.length && src[at] !== close) at += src[at] === "\\" && src[at + 1] === close ? 2 : 1;
+  return at < src.length ? runEnd(src, at + 1, WHITESPACE) + 1 : src.length;
+};
+
+/** `[text][label]`, `[label][]` and `[label]`: the text, then the label, to their `]`. */
+export const reflinkReach = (src: string, looks?: Looks): number => {
+  const start = src[0] === "!" ? 2 : 1;
+  // `[label]` (and `[]` after it): to the first bracket, its escapes skipped.
+  let bracket = start;
+  while (bracket < src.length && src[bracket] !== "[" && src[bracket] !== "]") bracket += src[bracket] === "\\" ? 2 : 1;
+  const plain = Math.max(bracket + 3, angles(src, start, bracket, looks));
+  const end = label(src);
+  if (end < 0) return Math.max(-1 - end, plain);
+  const text = Math.max(plain, angles(src, start, end, looks));
+  if (src[end + 1] !== "[") return Math.max(end + 2, text);
+  let close = end + 2;
+  while (close < src.length && src[close] !== "[" && src[close] !== "]") close += src[close] === "\\" ? 2 : 1;
+  return Math.max(close + 2, text);
+};
diff --git a/packages/react/src/markdown/sanitize.ts b/packages/react/src/markdown/sanitize.ts
new file mode 100644
index 00000000..20aec13b
--- /dev/null
+++ b/packages/react/src/markdown/sanitize.ts
@@ -0,0 +1,145 @@
+/**
+ * What Markdown can hold that an email shouldn't: URLs that run code (`javascript:`), and raw HTML with scripts,
+ * event handlers, frames or forms. Raw HTML is kept to tags and attributes that only display (allowlists), read in one
+ * pass as a browser reads it and written again: what's left out can't join what's around it into a tag.
+ */
+
+import { commentEnd, rawTextEnd, readTag, type Attribute } from "../utils/html-tags";
+import { codePoint, decoded, entities, tight } from "../utils/entities";
+
+const ESCAPES: Record<string, string> = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "`": "&#96;" };
+
+/** Text as HTML; an entity reference written in it (`&copy;`) is kept, as Markdown keeps it. */
+export const escapeText = (text: string) => text.replace(/&(?!#\d+;|#x[\da-f]+;|[a-z][\da-z]*;)|[<>"]/gi, (ch) => ESCAPES[ch]);
+/** An attribute's value: every `&` escaped too, so an entity in a URL (`&#106;avascript:`) stays text. */
+export const escapeAttribute = (text: string) => text.replace(/[&<>"]/g, (ch) => ESCAPES[ch]);
+
+/**
+ * A link's or an image's URL when it's safe: a web, mail or phone link, an image on the web (or a `cid:` attachment,
+ * or a PNG, GIF, JPEG or WebP data URL), or a URL with no scheme (relative, `#anchor`, `{{merge_tag}}`).
+ */
+export function safeUrl(url: string, kind: "link" | "image"): string | undefined {
+  const value = url.trim();
+  const scheme = /^([a-z][\w+.-]*):/i.exec(decoded(value))?.[1]?.toLowerCase();
+  if (!scheme) return value;
+  if (kind === "link" ? /^(https?|mailto|tel)$/.test(scheme) : /^(https?|cid)$/.test(scheme) || /^data:image\/(png|gif|jpe?g|webp)[;,]/i.test(decoded(value))) return value;
+  return undefined;
+}
+
+/**
+ * Whether CSS could load or run something (`url()`, `image()`, `image-set()`, `expression()`, `behavior`,
+ * `-moz-binding`, an old Internet Explorer's `progid:` filter, a `javascript:` URL), read as the browser reads it: its escapes decoded (`\75 rl(`); a comment, which can hide one
+ * from a check (`expr/**\/ession(`), counts as one. A `style` it keeps passes; so does what a <Tailwind> inlines into
+ * Markdown's HTML for its classes (src/tailwind/html.ts).
+ */
+export const unsafeStyle = (css: string) => /expression|javascript:|vbscript:|behavior|-moz-binding|progid|url\(|image\(|image-set\(|\/\*/i.test(readCss(css));
+
+/** CSS as the browser reads it: its references and escapes decoded (`\75 rl(`), its spaces and control characters gone. */
+const readCss = (css: string) => tight(entities(css).replace(/\\(?:([\da-f]{1,6})[\t\n\f\r ]?|([\s\S]))/gi, (_, hex?: string, ch?: string) => (hex ? codePoint(parseInt(hex, 16)) : ch!)));
+
+/**
+ * Whether CSS has a `url()` whose URL isn't a web one (`http:`, `https:`), a relative one, an inline attachment's
+ * (`cid:`, an email's) or a PNG, GIF, JPEG or WebP data URL, read as the browser reads it (see unsafeStyle): a class's
+ * `bg-[url(javascript:…)]`, which a <Tailwind> doesn't write (src/tailwind/props.ts).
+ */
+export const unsafeUrl = (css: string) => /url\(["']?(?!https?:|cid:|data:image\/(?:png|gif|jpe?g|webp)[;,]|(?![a-z][\w+.-]*:))/i.test(readCss(css));
+
+/** The elements kept, as an email or a page shows them: text and its formatting, links, images, lists, tables, sections. */
+const KEPT = new Set(
+  "a abbr address article aside b bdi bdo big blockquote br caption center cite code col colgroup dd del details dfn div dl dt em figcaption figure font footer h1 h2 h3 h4 h5 h6 header hr i img ins kbd li main mark nav ol p pre q s samp section small span strike strong sub summary sup table tbody td tfoot th thead time tr tt u ul var wbr".split(" ")
+);
+/**
+ * Elements left out with what's in them: scripts and style sheets, frames and embedded objects, form controls' text,
+ * templates, and SVG and MathML (which a browser reads by rules of their own). Others not kept are left out alone, what's
+ * in them kept.
+ */
+const WITH_CONTENT = /^(script|style|iframe|frameset|noframes|noembed|noscript|object|applet|template|svg|math|select|textarea|title|xmp|plaintext)$/;
+/** The attributes kept (and `aria-*`): how an element displays, what it says, where it links. */
+const ATTRIBUTES = new Set(
+  "abbr align alt axis background bgcolor border cellpadding cellspacing char charoff cite class clear color colspan compact datetime dir face frame headers height href hreflang hspace id lang name noshade nowrap open rel reversed role rowspan rules scope size span src start style summary target title type valign value vspace width".split(" ")
+);
+const URL_ATTRIBUTES: Record<string, "link" | "image"> = { href: "link", src: "image", background: "image", cite: "link" };
+
+/**
+ * A class attribute's names but those whose arbitrary value (Tailwind's `bg-[…]`, `[background:…]`: from the first
+ * bracket, as the browser reads the attribute) is CSS that could load or run something, as a <Tailwind> would inline
+ * it, or any renderer of the design later.
+ */
+function keptClasses(value: string): string {
+  const names = value.split(/[\t\n\f\r ]+/);
+  const kept = names.filter((name) => {
+    const read = entities(name);
+    const at = read.search(/[[(]/);
+    // (Its `_`s spaces, as Tailwind reads them: `\75_rl(` is `url(` to it.)
+    return at < 0 || !unsafeStyle(read.slice(at).replace(/(?<!\\)_/g, " "));
+  });
+  // (As written where it keeps them all.)
+  return kept.length === names.length ? value : kept.join(" ");
+}
+
+/** A kept tag's attributes, written again: those on the list, each once (the first of a name, as a browser reads it). */
+function keptAttributes(list: Attribute[]): string {
+  let kept = "";
+  const seen = new Set<string>();
+  for (const { name: key, value } of list) {
+    if (seen.has(key)) continue;
+    seen.add(key);
+    if (!ATTRIBUTES.has(key) && !/^aria-[a-z]+$/.test(key)) continue;
+    if (URL_ATTRIBUTES[key] && safeUrl(value ?? "", URL_ATTRIBUTES[key]) === undefined) continue;
+    if (key === "style" && unsafeStyle(value ?? "")) continue;
+    const written = key === "class" && value !== undefined ? keptClasses(value) : value;
+    if (key === "class" && value && !written!.trim()) continue;
+    kept += written === undefined ? ` ${key}` : ` ${key}="${written.replace(/["<>`]/g, (ch) => ESCAPES[ch])}"`;
+  }
+  return kept;
+}
+
+/**
+ * Raw HTML kept as it displays, read as a browser reads it and written again (what's left out can't join what's around
+ * it into a tag):
+ * - Tags kept: `a abbr address article aside b bdi bdo big blockquote br caption center cite code col colgroup dd del
+ *   details dfn div dl dt em figcaption figure font footer h1`–`h6 header hr i img ins kbd li main mark nav ol p pre q
+ *   s samp section small span strike strong sub summary sup table tbody td tfoot th thead time tr tt u ul var wbr`.
+ * - Attributes kept: `abbr align alt axis background bgcolor border cellpadding cellspacing char charoff cite class
+ *   clear color colspan compact datetime dir face frame headers height href hreflang hspace id lang name noshade nowrap
+ *   open rel reversed role rowspan rules scope size span src start style summary target title type valign value vspace
+ *   width` and `aria-*`: `href` and `cite` with a web, `mailto:` or `tel:` URL (or one with no scheme), `src` and
+ *   `background` with a web or `cid:` URL or a PNG, GIF, JPEG or WebP data URL (or one with no scheme), `style`
+ *   without `url()`, `image()`, `image-set()`, `expression()`, `behavior`, `-moz-binding`, a `progid:` filter,
+ *   `javascript:` or a comment, and `class` without a name whose arbitrary value (`bg-[…]`) would be such CSS. No event
+ *   handler (`on…`), `data-*`, `srcset` or `srcdoc`.
+ * - Left out with what's in them: `script style iframe frameset noframes noembed noscript object applet template svg
+ *   math select textarea title xmp plaintext`. Other tags are left out alone, what's in them kept; comments, doctypes,
+ *   CDATA and a tag the HTML ends in are left out. A `<` that starts no tag is text (`&lt;`).
+ */
+export function sanitizeHtml(html: string): string {
+  // (A NUL is U+FFFD to a browser, in a tag's name too.)
+  const s = html.replace(/\0/g, "�");
+  let out = "";
+  for (let i = 0; i < s.length; ) {
+    const lt = s.indexOf("<", i);
+    if (lt < 0) return out + s.slice(i);
+    out += s.slice(i, lt);
+    const comment = commentEnd(s, lt);
+    if (comment !== undefined) {
+      i = comment;
+      continue;
+    }
+    const tag = readTag(s, lt);
+    if (tag === undefined) {
+      out += "&lt;";
+      i = lt + 1;
+      continue;
+    }
+    // A tag the input ends in is left out with the rest, as a browser leaves it out.
+    if (!tag) return out;
+    i = tag.end;
+    if (KEPT.has(tag.name)) out += tag.close ? `</${tag.name}>` : `<${tag.name}${keptAttributes(tag.attributes)}${tag.selfClosing ? " /" : ""}>`;
+    else if (!tag.close && WITH_CONTENT.test(tag.name) && !(tag.selfClosing && /^(svg|math)$/.test(tag.name))) {
+      // Left out to its end tag (or the input's end), with what's in it. (An empty `<svg … />` has nothing in it.)
+      const end = rawTextEnd(s, tag.name, i);
+      i = readTag(s, end)?.end || s.length;
+    }
+  }
+  return out;
+}
diff --git a/packages/react/src/markdown/tasks.ts b/packages/react/src/markdown/tasks.ts
new file mode 100644
index 00000000..34a6d54c
--- /dev/null
+++ b/packages/react/src/markdown/tasks.ts
@@ -0,0 +1,48 @@
+/**
+ * A list's task items (`- [ ] …`, `- [x] …`), read as marked (18.0.14's, the version built in) reads them, in time
+ * linear in the list. marked takes each task item's `[ ]` out of the text its inline syntax is read from by looking
+ * for it from the end of everything left to read, for each item again, so a list of n task items took time growing
+ * with n squared (0.8 s for 100 KB of `- [ ] a`). Here marked's tokenizer is given a rule that finds no task (see
+ * limits.ts), and the list it returns is given its tasks after, as marked gives them: the same `[ ]` taken out of the
+ * same texts, in the same order (each from the end, where the one before was), so the tokens are the same.
+ */
+import type { Tokens } from "marked";
+
+/** A list item's task, as marked finds one (`listIsTask`, `listReplaceTask`, `listTaskCheckbox`). */
+const TASK = /^\[[ xX]\] +\S/;
+const MARK = /^\[[ xX]\] +/;
+const CHECKBOX = /\[[ xX]\]/;
+
+/** `list` (as marked returns it with no task found) given its tasks; `queue`: the texts left to read (marked's `inlineQueue`). */
+export function addTasks(list: Tokens.List, queue: { src: string }[]): void {
+  // Where the last `[ ]` was taken out: nothing after it has one.
+  let from = queue.length - 1;
+  for (const item of list.items) {
+    item.task = TASK.test(item.text);
+    if (!item.task) continue;
+    const first = item.tokens[0];
+    if (first?.type !== "text" && first?.type !== "paragraph") {
+      item.task = false;
+      continue;
+    }
+    item.text = item.text.replace(MARK, "");
+    first.raw = first.raw.replace(MARK, "");
+    first.text = first.text.replace(MARK, "");
+    for (; from >= 0; from--) {
+      if (TASK.test(queue[from].src)) {
+        queue[from].src = queue[from].src.replace(MARK, "");
+        break;
+      }
+    }
+    const mark = CHECKBOX.exec(item.raw);
+    if (!mark) continue;
+    const checkbox: Tokens.Checkbox = { type: "checkbox", raw: `${mark[0]} `, checked: mark[0] !== "[ ]" };
+    item.checked = checkbox.checked;
+    if (!list.loose) item.tokens.unshift(checkbox);
+    else if ("tokens" in first && first.tokens) {
+      first.raw = checkbox.raw + first.raw;
+      first.text = checkbox.raw + first.text;
+      first.tokens.unshift(checkbox);
+    } else item.tokens.unshift({ type: "paragraph", raw: checkbox.raw, text: checkbox.raw, tokens: [checkbox] });
+  }
+}
diff --git a/packages/react/src/markdown/work.ts b/packages/react/src/markdown/work.ts
new file mode 100644
index 00000000..fc75fb8b
--- /dev/null
+++ b/packages/react/src/markdown/work.ts
@@ -0,0 +1,39 @@
+/**
+ * A Markdown read with the work its render has left (see the code entry's work.ts): the inline syntax's (WORK steps
+ * for each character of the render's Markdown, and BASE more), its quotes' and list items' lines' (QUOTE_WORK, and
+ * QUOTE_BASE more) and its tables' cells (as many as the render's Markdown has characters, or TABLE_CELLS where that's
+ * more), for all its Markdown together, as one Markdown of their size has, so many of them can't take more than one
+ * would. Outside a render, a Markdown has its own. Past the work, the rest of its inline syntax is text and its quotes
+ * end at their first line without a `>` (nothing is left out), said once in the render; a table past the cells is too
+ * large (see limits.ts), as it is in one Markdown of their size.
+ */
+import type { Token } from "marked";
+import { renderWork, sayInRender } from "../code/work";
+import { BASE, Bounded, WORK, type Work } from "./inline";
+import { QUOTE_BASE, QUOTE_WORK, TABLE_CELLS } from "./limits";
+
+const MARKDOWN = Symbol.for("@unlayer/react-elements/markdown-work");
+
+/** `source`'s tokens, read with what's left of its render's work (its own outside a render), which it spends. */
+export function lexMarkdown(source: string, breaks: boolean): Token[] {
+  const make = () => ({ inline: BASE, quotes: QUOTE_BASE, size: 0, cells: 0 });
+  // (`size`: the render's Markdown's characters so far; `cells`: the cells its tables took.)
+  const work: Work & { size: number; cells: number } = renderWork(MARKDOWN, make) ?? make();
+  work.inline += WORK * source.length;
+  work.quotes += QUOTE_WORK * source.length;
+  work.size += source.length;
+  const cells = Math.max(TABLE_CELLS, work.size) - work.cells;
+  const lexer = new Bounded({ breaks, cells, size: source.length, work });
+  const tokens = lexer.lex(source);
+  const left = lexer.left;
+  work.inline = Math.max(0, left.inline);
+  work.quotes = Math.max(0, left.quotes);
+  work.cells += cells - left.cells;
+  const past = [left.inline < 0 && "the rest of its inline syntax is text", left.quotes < 0 && "each quote ends at its first line without a `>`, and the rest of a list item's lines is text"].filter(Boolean);
+  if (past.length)
+    sayInRender(
+      "markdown work",
+      `[Unlayer] Markdown: it takes marked more work to read than a render's Markdown can (${WORK} steps for each of its characters, and about a million more for its inline syntax, four million for its quotes), so ${past.join("; and ")}: nothing is left out.`
+    );
+  return tokens;
+}
diff --git a/packages/react/src/model/collect.ts b/packages/react/src/model/collect.ts
new file mode 100644
index 00000000..edda4249
--- /dev/null
+++ b/packages/react/src/model/collect.ts
@@ -0,0 +1,59 @@
+/**
+ * A root's content collected: the walker (src/engine) renders it once per render, recording Elements' Rows, Columns,
+ * blocks, scopes and head entries (see utils/record.tsx), and gives it as a tree of its records, markup and text,
+ * which the model (elements.ts) is made from.
+ */
+import type React from "react";
+import type { Recorded } from "../utils/collect";
+import { collector, guard } from "../utils/record";
+import { contentTree, isUnlayerProvider, nestedRoot, UNREAD } from "../utils/unwrap-root";
+import { ROOTLESS } from "../utils/root-type";
+import { guest, idPrefix, omitted, onError, sayer, scopeCache, sharedByRender, unwrapped } from "../utils/render-scope";
+import { isTailwindError } from "../utils/tailwind";
+import { collect as walk, type Flat, type Item, type RenderError } from "../engine";
+import { omits } from "../engine/errors";
+
+/** One render of a root's children, collected. */
+export interface Collected {
+  content: Item[];
+  /** What's recorded, in tree order (head entries too, which aren't in the content). */
+  recorded: Recorded[];
+  /** What was said once (the HTML, the head and the design build from the same render), by record. */
+  told: Set<object>;
+  /** Each component's kept markup, worked out once. */
+  kept?: Map<object, React.ReactElement | undefined>;
+  /** Props with their classes turned into props (see styled), by record (null: left out). */
+  styled?: Map<object, Record<string, any> | null>;
+  /** The records in each <Tailwind> scope, by its record (see inScope). */
+  scopes?: Map<object, object[]>;
+  /** The root's props (its classes as props, its mode), for a scope's rewrite of a Row (see utils/tailwind.ts). */
+  root?: Record<PropertyKey, any>;
+  /** Each Row, Column and block, as the Elements component it is, made once (see elements.ts), by record. */
+  made?: Map<object, React.ReactElement | null>;
+}
+
+/** How `children` (a root's, `root` naming it) are walked to collect them: the collector, and the walk's options. */
+export function collecting(children: React.ReactNode, root: string) {
+  const policy = onError();
+  // A template with no root's: a root its walk meets in it is said, once in this render (see nestedRoot).
+  const say = root === ROOTLESS ? sayer() : undefined;
+  const options = { omit: omits(policy), nested: say && ((name: string) => say(nestedRoot(name), UNREAD)) };
+  // (What its template's wrappers read for contexts no provider gives, it reads too: one value each, the render's.)
+  return { node: guard(children, options, root), options: { collector: collector(options), onError: policy, idPrefix: idPrefix(), root, tree: contentTree(children), fallbacks: unwrapped()?.fallbacks, shared: sharedByRender(), passes: isTailwindError, frameless: isUnlayerProvider } };
+}
+
+/** A collecting walk's output as the collected template; what it left out listed and said (this render's). */
+export function collectedFrom(flat: { content: Item[]; recorded: object[]; omitted: RenderError[] }): Collected {
+  for (const error of flat.omitted) omitted(error);
+  return { content: flat.content, recorded: flat.recorded as Recorded[], told: new Set() };
+}
+
+/** `children` collected synchronously: its components run outside this render's scope (one they start is its own). */
+function collected(children: React.ReactNode, root: string): Collected {
+  const { node, options } = collecting(children, root);
+  return collectedFrom(guest(() => walk(node, options)) as Flat);
+}
+
+/** `children` collected, once per render (the HTML, the head and the design ask for the same). */
+export const collect = (children: React.ReactNode, root = ROOTLESS): Collected =>
+  children !== null && typeof children === "object" ? scopeCache(children, () => collected(children, root)) : collected(children, root);
diff --git a/packages/react/src/model/content.ts b/packages/react/src/model/content.ts
new file mode 100644
index 00000000..9fc63aee
--- /dev/null
+++ b/packages/react/src/model/content.ts
@@ -0,0 +1,80 @@
+/**
+ * A collected template's content (the walker's: see src/engine/output.ts), read: its text as React wrote it and as
+ * it reads, the markup a component of the template's own rendered, and markup cut by what's recorded in it.
+ */
+import { htmlOf, type Item, type Markup, type RecordItem } from "../engine";
+import type { Recorded } from "../utils/collect";
+
+export { htmlOf };
+
+const ENTITIES: Record<string, string> = { "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&#x27;": "'" };
+
+/** Text as it reads: what React escaped (or markup given as HTML spelled), unescaped. */
+export const textOf = (html: string): string => html.replace(/&amp;|&lt;|&gt;|&quot;|&#x27;/g, (e) => ENTITIES[e]);
+
+/** An item's record, typed. */
+export const recordOf = (item: RecordItem) => item.record as Recorded & Record<string, any>;
+
+/** What's in a scope or a component of the template's own: their content is where they are. */
+export const transparent = (item: Item): item is RecordItem => typeof item !== "string" && item.kind === "record" && (recordOf(item).kind === "boundary" || recordOf(item).kind === "tailwind");
+
+/** An element of markup at the top of some content: its tag, its HTML, and what's between its tags. */
+export interface Part {
+  tag: string;
+  html: string;
+  inner?: string;
+}
+
+/** Content that's markup only (its components' markup in, those that failed left out): its text and top elements. */
+export function partsOf(items: readonly Item[], out: Array<string | Part> = []): Array<string | Part> {
+  for (const item of items) {
+    if (typeof item === "string") {
+      if (typeof out[out.length - 1] === "string") out[out.length - 1] += item;
+      else out.push(item);
+    } else if (item.kind === "markup") out.push(item);
+    else if (item.kind === "cut") out.push({ tag: item.tag, html: htmlOf([item]), inner: htmlOf(item.items) });
+    else partsOf(item.items, out);
+  }
+  return out;
+}
+
+/** What content renders when it's markup only, as HTML (undefined when a Row, Column or block is in it). */
+export const markupOnly = (items: readonly Item[]): string | undefined => (items.every(onlyMarkup) ? htmlOf(items) : undefined);
+
+const onlyMarkup = (item: Item): boolean => typeof item === "string" || item.kind === "markup" || ((item.kind === "cut" || transparent(item)) && item.items.every(onlyMarkup));
+
+/** Whether content has markup in it, at its top. */
+export const hasMarkup = (items: readonly Item[]): boolean => items.some((item) => typeof item !== "string" && item.kind !== "record");
+
+/** A piece of markup between records: text, markup written whole, and the tags of markup a record cuts. */
+export type Token = string | Markup | { open: string } | { close: true };
+
+/**
+ * Content as it's written, cut where it's recorded in: the records in it (not what's in them), and the runs of markup
+ * and text between them. React writes markup whole, so markup a record is in (a `<div>` around a block, a `<p>`
+ * around a component) starts in one run and ends in another.
+ */
+export function runs(items: readonly Item[], out: Array<RecordItem | Token[]> = []): Array<RecordItem | Token[]> {
+  const token = (t: Token) => {
+    const run = out[out.length - 1];
+    if (!Array.isArray(run)) out.push([t]);
+    else if (typeof t === "string" && typeof run[run.length - 1] === "string") run[run.length - 1] += t;
+    else run.push(t);
+  };
+  for (const item of items) {
+    if (typeof item === "string" || item.kind === "markup") token(item);
+    else if (item.kind === "record") out.push(item);
+    else {
+      token({ open: item.tag });
+      runs(item.items, out);
+      if (item.close) token({ close: true });
+    }
+  }
+  return out;
+}
+
+/** The tag a run starts with (none where it starts with text or an end tag). */
+export const startOf = (run: Token[]): string | undefined => {
+  const first = run[0];
+  return typeof first === "string" || "close" in first ? undefined : "open" in first ? first.open : first.tag;
+};
diff --git a/packages/react/src/model/elements.ts b/packages/react/src/model/elements.ts
new file mode 100644
index 00000000..d63ec88c
--- /dev/null
+++ b/packages/react/src/model/elements.ts
@@ -0,0 +1,505 @@
+/**
+ * A collected template (collect.ts) as Elements components only, Email > Row > Column > blocks, with their resolved
+ * props: the model the HTML, the head and the design are made from, so they can't disagree. Made from the collected
+ * content as it is, a tree of records, markup and text: nothing is parsed.
+ *
+ * What a template puts among them that isn't one keeps what it did before: markup among the rows is kept as it is;
+ * text in a Row or Column shows as text (with a warning); a component of the user's own that renders markup in a
+ * Column is an HTML block named after it; other markup in a Row or Column is left out. A component that fails fails
+ * the render, or with `onError: "omit"` is left out of all three (see engine/errors.ts).
+ */
+import React from "react";
+// (React 19 takes the props object as it's given, where createElement copies it.)
+import { jsx, jsxs } from "react/jsx-runtime";
+import type { Item, RecordItem } from "../engine";
+import { whereIs } from "../utils/collect";
+import { RenderError } from "../engine";
+import { failed, failedBefore, guest, rightToLeft, sayOnce } from "../utils/render-scope";
+import { containerOf } from "../utils/container-render";
+import { classProps, isTailwindError, prepareClasses, TAILWIND } from "../utils/tailwind";
+import { OWN, UNLAYER_CONFIG_KEY } from "../utils/create-component";
+import { asWritten, inlineHtml } from "../utils/inline-html";
+import { closestName } from "../utils/closest-name";
+import { MEMO } from "../utils/unwrap-root";
+import { COLUMN_DEFAULTS, ROW_DEFAULTS } from "../utils/container-defaults";
+import { PROP_ALIASES } from "@unlayer-internal/shared-elements";
+import Row from "../components/Row";
+import Column from "../components/Column";
+import Html from "../components/Html";
+import Link from "../components/Link";
+import Paragraph from "../components/Paragraph";
+import Divider from "../components/Divider";
+import Heading, { margins } from "../components/Heading";
+import Button from "../components/Button";
+import Image from "../components/Image";
+import Menu from "../components/Menu";
+import Social from "../components/Social";
+import Table from "../components/Table";
+import Video from "../components/Video";
+import PageBreak from "../components/PageBreak";
+import { hasMarkup, markupOnly, partsOf, recordOf, runs, startOf, textOf, type Part, type Token } from "./content";
+import type { Collected } from "./collect";
+
+/**
+ * On markup a component of the user's own rendered in a Column (see `keptMarkup`): the Html block the design
+ * keeps it as. The HTML numbers it after the component, and the head counts it so too.
+ */
+export const KEPT = Symbol.for("@unlayer/react-elements/kept");
+
+type Place = "root" | "row" | "column";
+/** A record's item, and the <Tailwind> it's in (whose classes its `className` takes). */
+type Scoped = { item: RecordItem; tw?: Record<string, any> };
+
+function innerType(type: any): any {
+  while (type?.$$typeof === MEMO) type = type.type;
+  return type;
+}
+
+const nameOf = (element: React.ReactElement): string => {
+  if (typeof element.type === "string") return element.type;
+  const type = innerType(element.type);
+  return type?.displayName || type?.name || "component";
+};
+
+/**
+ * A component of the user's own that rendered markup in a Column: an HTML block of it, named after the component
+ * (with its props, for its padding and visibility). An element given `dangerouslySetInnerHTML` gives what's in it,
+ * as 0.1.22 kept it (the element itself left out), whatever that holds (a `<div/>`, a stray end tag, a comment);
+ * other markup, which 0.1.22 left out (a link, a table, an image, elements side by side), is kept as it is.
+ */
+function keptMarkup(c: Collected, item: RecordItem): React.ReactElement | undefined {
+  c.kept ??= new Map();
+  if (!c.kept.has(item.record)) c.kept.set(item.record, keptMarkupOnce(item));
+  return c.kept.get(item.record);
+}
+
+function keptMarkupOnce(item: RecordItem): React.ReactElement | undefined {
+  const raw = markupOnly(item.items);
+  if (raw === undefined) return undefined;
+  const list = partsOf(item.items);
+  // Text alone shows as text (see `elements`).
+  if (!list.some((p) => typeof p !== "string")) return undefined;
+  const element = recordOf(item).element as React.ReactElement<any>;
+  // A link alone (a <Link>) is a Paragraph holding it, a rule a Divider: blocks the design can edit.
+  const solo = list.filter((p) => typeof p !== "string" || textOf(p).trim());
+  const { containerPadding, hideOnMobile, hideOnDesktop } = (element.props ?? {}) as Record<string, unknown>;
+  const props = { containerPadding, hideOnMobile, hideOnDesktop };
+  const block = solo.length === 1 && typeof solo[0] !== "string" ? (rendersLink(item) ? linkBlock(solo[0], props) : asBlock(solo[0], props, true)) : undefined;
+  if (block) return block;
+  // One element: React writes `dangerouslySetInnerHTML` and children alike, so what the component returned says which
+  // it gave (the walker keeps it, whatever kind of component it is: engine/walk.ts's `returned`). Children are kept
+  // with the element around them, its styles with them.
+  const one = list.length === 1 && typeof list[0] !== "string" && list[0].inner !== undefined ? list[0] : undefined;
+  const out = (recordOf(item).output as { value: unknown } | undefined)?.value as React.ReactElement<{ dangerouslySetInnerHTML?: unknown }> | undefined;
+  const given = React.isValidElement(out) && typeof out.type === "string" && out.props.dangerouslySetInnerHTML != null;
+  const html = one && given ? one.inner! : raw;
+  const Rendered = () => React.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
+  Rendered.displayName = nameOf(element);
+  (Rendered as unknown as Record<symbol, unknown>)[OWN] = true;
+  (Rendered as unknown as Record<symbol, unknown>)[KEPT] = React.createElement(Html, {
+    html,
+    ...(containerPadding !== undefined ? { containerPadding } : {}),
+    ...(hideOnMobile !== undefined ? { hideOnMobile } : {}),
+    ...(hideOnDesktop !== undefined ? { hideOnDesktop } : {}),
+  } as Record<string, unknown>);
+  return React.createElement(Rendered, { ...element.props });
+}
+
+/** Collected content as HTML: markup as it is, each row, column or block by `render`. */
+export function markup(c: Collected, items: readonly Item[], render: (element: React.ReactElement) => string, tw?: Record<string, any>): string {
+  let html = "";
+  for (const item of items) {
+    if (typeof item === "string") html += item;
+    else if (item.kind === "markup") html += item.html;
+    else if (item.kind === "cut") html += item.open + markup(c, item.items, render, tw) + item.close;
+    else {
+      const r = recordOf(item);
+      if (r.kind === "boundary") html += markup(c, item.items, render, tw);
+      else if (r.kind === "tailwind") html += markup(c, item.items, render, r);
+      else html += recordHtml(c, { item, tw }, render);
+    }
+  }
+  return html;
+}
+
+/**
+ * A recorded row (or a block among the rows) as HTML, by `render`. A Row or Column whose own HTML fails (see
+ * renderContainer) fails the render, or is left out (`onError: "omit"`): a Column with its cell, the Row made again
+ * without it (the Columns after it move up, as a block's siblings do), and the Row with its last Column.
+ */
+function recordHtml(c: Collected, scoped: Scoped, render: (element: React.ReactElement) => string): string {
+  const r = recordOf(scoped.item);
+  for (let out = element(c, scoped); out; out = element(c, scoped)) {
+    try {
+      return render(out);
+    } catch (error) {
+      const container = containerOf(error);
+      if (!container || failedBefore(container)) {
+        // A block's failure says which block it was.
+        if (error instanceof RenderError) throw error;
+        failed(new RenderError(`${String((error as Error)?.message ?? error)}`, r.kind === "row" ? "Row" : nameOf(out), whereIs(r) ?? "", error), r);
+        return "";
+      }
+      failed(error as RenderError, container);
+      if (container === r) return "";
+      c.made!.delete(r);
+    }
+  }
+  return "";
+}
+
+/**
+ * The Rows, Columns and blocks in a <Tailwind> (`tw`, its record) and in the render's others with its `tw` (or
+ * `config`), not in one inside it with another: the records whose classes its handle rewrites, built at once, once per
+ * render (one list for the scopes of a handle). Worked out once per render, for every scope.
+ */
+function inScope(c: Collected, tw: object): object[] {
+  if (!c.scopes) {
+    const scopes = (c.scopes = new Map<object, object[]>());
+    const byHandle = new Map<unknown, object[]>();
+    const walk = (items: readonly Item[], list?: object[]) => {
+      for (const item of items) {
+        if (typeof item === "string" || item.kind === "markup") continue;
+        let inner = list;
+        if (item.kind === "record") {
+          const r = recordOf(item);
+          if (r.kind === "tailwind") {
+            const key = r.props?.tw ?? r.props?.config ?? r;
+            scopes.set(r, (inner = byHandle.get(key) ?? byHandle.set(key, []).get(key)!));
+          } else if (list && r.kind !== "boundary") {
+            // A block with rich text: its markup, under the prop its rewrite reads it as (see made), for its classes.
+            const key = r.rich ? ((r.type as any)?.[UNLAYER_CONFIG_KEY]?.name === "Paragraph" ? "html" : "text") : undefined;
+            list.push(key ? { ...r, props: { ...r.props, [key]: markupOnly(item.items) } } : r);
+          }
+        }
+        walk(item.items, inner);
+      }
+    };
+    walk(c.content);
+  }
+  return c.scopes.get(tw) ?? [];
+}
+
+/**
+ * A recorded Row's, Column's or block's props, with its `className` turned into props by the <Tailwind> it's in
+ * (worked out once: the HTML, the head and the design ask for the same); null where reading its classes failed (a
+ * Tailwind plugin threw) and the render leaves it out (`onError: "omit"`).
+ */
+function styled(c: Collected, tw: Record<string, any> | undefined, r: Record<string, any>, props: Record<string, any>, type: any = r.type): Record<string, any> | null {
+  // (Classes in a block's `html` or `text` are inlined too: one that has a class attribute, however it's written.)
+  if (tw === undefined || !(props.className || /class/i.test(props.html) || /class/i.test(props.text))) return props;
+  c.styled ??= new Map();
+  if (!c.styled.has(r)) {
+    // (First, the classes of the records in its scope, built at once: see prepareClasses.)
+    if (!c.styled.has(tw)) c.styled.set(tw, (prepareClasses(tw.props, inScope(c, tw)), {}));
+    const config = type?.[UNLAYER_CONFIG_KEY];
+    const [name, defaults] = r.kind === "row" ? ["Row", ROW_DEFAULTS] : r.kind === "column" ? ["Column", COLUMN_DEFAULTS] : [config?.name ?? type?.displayName ?? "Block", config?.defaultValues];
+    let own: Record<string, any> | null;
+    try {
+      own = classProps(tw.props, name, defaults, props);
+    } catch (error) {
+      // What reading its classes threw (a Tailwind plugin's error) is its: it fails the render, or it's left out.
+      if (isTailwindError(error) || error instanceof RenderError) throw error;
+      failed(new RenderError(`${String((error as Error)?.message ?? error)}`, name, whereIs(r) ?? name, error), r);
+      own = null;
+    }
+    c.styled.set(r, own);
+  }
+  return c.styled.get(r)!;
+}
+
+/**
+ * A block markup in a Column is (a link alone, a <Link>, is a Paragraph holding it: see asBlock), its markup's classes
+ * inlined by the <Tailwind> it's in, as a block's are (once per render, by `key`); none where reading them failed.
+ */
+function restyled(c: Collected, tw: Record<string, any> | undefined, key: object, block: React.ReactElement<any>): React.ReactElement[] {
+  if (block.type !== Paragraph && block.type !== Html) return [block];
+  const own = styled(c, tw, key, block.props, block.type);
+  return own === block.props ? [block] : own ? [jsx(block.type, own)] : [];
+}
+
+/** Props any block takes beside its values (its defaults' keys); `font…` in camel case (`fontsize` is a slip). */
+const KNOWN = /^(children|className|style|mode|values|containerPadding|hideOn(Mobile|Desktop)|mobile|skipInText|html|text|href|action|alt|src|width|maxWidth|items|icons|icon\w+|spacing|videoUrl|headers|data|columns|rows|font[A-Z]\w*|letterSpacing|color|lineHeight|textAlign|padding|border\w*|backgroundColor|hover\w*|_\w+)$/;
+
+type ItemConfig = { name: string; defaultValues: Record<string, unknown>; names?: readonly string[] };
+
+/** A block's props: its values' names (flat too) and the names it takes for them (see PROP_ALIASES), once per block. */
+const propNames = new WeakMap<object, { names: string[]; known: Map<string, boolean> }>();
+
+/** Whether a block takes a prop: one of its names (see namesOf), one any block takes, or a link's `target`. */
+function takes(config: ItemConfig, key: string): boolean {
+  const { names, known } = namesOf(config);
+  let takes = known.get(key);
+  if (takes === undefined) {
+    const values = config.defaultValues;
+    // (`target` is a link's: a block without one has no use for it.)
+    takes = names.includes(key) || KNOWN.test(key) || (key === "target" && ("href" in values || "action" in values));
+    // (Names a template gives: a few per block, kept.)
+    if (known.size < 500) known.set(key, takes);
+  }
+  return takes;
+}
+
+function namesOf(config: ItemConfig): { names: string[]; known: Map<string, boolean> } {
+  let entry = propNames.get(config);
+  if (!entry) {
+    const values = config.defaultValues;
+    const names = Object.keys({ ...values, ...PROP_ALIASES[config.name] }).concat(config.names ?? [], ...Object.values(values).map((v) => (v && typeof v == "object" ? Object.keys(v) : [])));
+    propNames.set(config, (entry = { names, known: new Map() }));
+  }
+  return entry;
+}
+
+/** The tags in markup, in order (attributes aside). */
+const tagsOf = (html: string) => String(html.match(/<\/?[a-zA-Z][\w:-]*/g));
+
+/**
+ * Markup that is a block: an <a> whose tags are all ones text holds a Paragraph holding it (its link kept to what text
+ * can hold), a bare <hr> a Divider. Another <a> or <hr> (an image in the link, a styled rule) is an HTML block, as it
+ * is; with `exact` (a component's markup, kept as HTML anyway), nothing, unless the block keeps all of it.
+ */
+const asBlock = (part: Part, props: Record<string, unknown> = {}, exact = false): React.ReactElement | undefined => {
+  if (!/^(a|hr)$/.test(part.tag)) return undefined;
+  const text = part.tag === "a" ? inlineHtml(part.html) : "";
+  // (A component's markup, kept whole: as text writes it, its quotes and <%name%> tags as written.)
+  if (text && (exact ? text === asWritten(part.html) : tagsOf(text) === tagsOf(part.html))) return React.createElement(Paragraph, { ...props, html: text });
+  if (part.html === "<hr/>") return React.createElement(Divider, props);
+  return exact ? undefined : React.createElement(Html, { ...props, html: part.html });
+};
+
+/** Whether a component is Elements' <Link>, or one around it: `memo(Link)`, `forwardRef` to it. */
+const isLink = (type: unknown): boolean => type === Link || (!!type && typeof type === "object" && (isLink((type as { type?: unknown }).type) || isLink((type as { render?: unknown }).render)));
+
+/**
+ * Whether what a component in a Column rendered is a <Link>'s: it's one, or returned one (a design system's link
+ * component, `forwardRef` to it). Its markup is then the Link's, cleaned as a Paragraph cleans it (see linkBlock); a
+ * component's own markup is kept as it is.
+ */
+function rendersLink(item: RecordItem): boolean {
+  const returned = (recordOf(item).output as { value: unknown } | undefined)?.value;
+  return isLink(recordOf(item).element?.type) || isLink(onlyElement(returned)?.type);
+}
+
+/** What renders what's in it without markup of its own: a Fragment, StrictMode, a Profiler, Suspense, a context's provider. */
+const PASSES_THROUGH = new Set<unknown>([React.Fragment, React.StrictMode, React.Profiler, React.Suspense]);
+const passesThrough = (type: any): boolean => PASSES_THROUGH.has(type) || (!!type && typeof type === "object" && (type.$$typeof === Symbol.for("react.provider") || type.$$typeof === Symbol.for("react.context")));
+
+/** The one element what a component returned renders (an array of it, through what passes it through: see above). */
+function onlyElement(node: unknown, depth = 0): React.ReactElement | undefined {
+  const nodes = React.Children.toArray(node as React.ReactNode).filter((n) => !(typeof n === "string" && !n.trim()));
+  if (nodes.length !== 1 || !React.isValidElement(nodes[0]) || depth > 32) return undefined;
+  const element = nodes[0] as React.ReactElement<{ children?: unknown }>;
+  return passesThrough(element.type) ? onlyElement(element.props.children, depth + 1) : element;
+}
+
+/**
+ * A <Link> alone: a Paragraph holding it, its markup cleaned as a Paragraph cleans text (a component's HTML in it too,
+ * which can be any HTML), or where it holds more than text can (an image, a link's logo), an HTML block of what a link
+ * holds, cleaned so too: never its markup as it is.
+ */
+const linkBlock = (part: Part, props: Record<string, unknown>): React.ReactElement | undefined => {
+  if (part.tag !== "a") return asBlock(part, props, true);
+  const text = inlineHtml(part.html);
+  if (text && tagsOf(text) === tagsOf(part.html)) return React.createElement(Paragraph, { ...props, html: text });
+  return React.createElement(Html, { ...props, html: inlineHtml(part.html, true) });
+};
+
+/**
+ * This copy's blocks, by name. A block of another copy of Elements (a package still on an earlier release, in a
+ * monorepo) is this copy's block of its name, so its HTML is this release's, the export of its design (a custom tool
+ * stays its own).
+ */
+const BLOCKS: Record<string, React.ComponentType<any>> = { Paragraph, Heading, Button, Image, Divider, Html, Menu, Social, Table, Video, PageBreak };
+
+/**
+ * A recorded Row, Column or block, as the Elements component it was, with what rendered in it (null: left out), made
+ * once per render: the HTML, the head and the design ask for the same. `_record` is its record: a Column names a block
+ * by it when its exporter fails, and the head and the design leave out what failed in the HTML (see `failedBefore`).
+ */
+export function element(c: Collected, scoped: Scoped): React.ReactElement | null {
+  const r = recordOf(scoped.item);
+  // A row or block whose exporter failed in this render's HTML (`onError: "omit"`): left out of the head and design too.
+  if (failedBefore(r)) return null;
+  c.made ??= new Map();
+  if (!c.made.has(r)) c.made.set(r, made(c, scoped, r));
+  return c.made.get(r)!;
+}
+
+function made(c: Collected, scoped: Scoped, r: ReturnType<typeof recordOf>): React.ReactElement | null {
+  const { item, tw } = scoped;
+  if (r.kind === "block") {
+    let props: Record<string, any> = r.props;
+    // Its text as it rendered (see record.tsx): HTML, kept to inline formatting.
+    const html = r.rich ? markupOnly(item.items) : undefined;
+    const config = (r.type as any)[UNLAYER_CONFIG_KEY];
+    if (html !== undefined) props = { ...props, children: undefined, [config.name === "Paragraph" ? "html" : "text"]: inlineHtml(html) };
+    if (config?.name === "Heading") props = margins(props);
+    // A prop a block has no use for is said, not dropped quietly (a custom tool's props are its own).
+    if (config && !config.contentType) {
+      for (const key in props) {
+        if (takes(config, key) || props[key] === undefined) continue;
+        const near = closestName(key, namesOf(config).names);
+        sayOnce(`[Unlayer] ${config.name} ignores the prop \`${key}\`${near ? `: did you mean \`${near}\`?` : "."}`);
+      }
+    }
+    const own = styled(c, tw, r, props);
+    return own && jsx((config?.contentType !== "custom" && BLOCKS[config?.name]) || r.type, { ...own, _record: r });
+  }
+  const own = styled(c, tw, r, r.props);
+  if (!own) return null;
+  if (r.kind === "column") return jsxs(Column, { ...own, children: elements(c, item.items, "column", tw), _record: r });
+  const props: Record<PropertyKey, any> = { ...own };
+  let list = elements(c, item.items, "row", tw);
+  // Columns whose own HTML failed in this render (`onError: "omit"`), by their places among the Columns: left out with
+  // their cells, and the Row with the last of them (see `recordHtml`).
+  const gone = leftOut(list);
+  if (gone.length) {
+    list = list.filter((child) => child !== LEFT_OUT);
+    if (!list.some((child: any) => child?.type === Column)) return null;
+    if (!props.layout && props.cells) props.cells = without(props.cells, gone);
+  }
+  // A layout counts the Columns as written (a condition's place included) or as rendered (from Fragments and
+  // components): either fits it. The rendered Row is then given its cells, which hold no condition's place. A Row
+  // neither fits is left out, of the HTML and the design alike, and said once.
+  const layout = props.layout;
+  if (layout) {
+    const columns = list.filter((child: any) => child?.type === Column).length + gone.length;
+    if (columns !== layout.expectedColumns && React.Children.count(props.children) !== layout.expectedColumns) {
+      // It fails the render, or is left out (once: the HTML, the head and the design ask).
+      if (!c.told.has(r)) {
+        c.told.add(r);
+        failed(new RenderError(`A Row with the ${layout.name} layout, for ${layout.expectedColumns} Columns, has ${columns}`, "Row", whereIs(r) ?? "Row"));
+      }
+      return null;
+    }
+    props.cells = without(layout.cells, gone);
+    delete props.layout;
+  }
+  // A scope's rewrite, the Row's, one its Columns' classes give, or the root's, can put what its classes give the Row
+  // in its Columns (Tailwind's padding and margins, and text styles for the text in them: see utils/tailwind.ts).
+  const rewrite = props[TAILWIND] ?? columnsRewrite(list) ?? c.root?.[TAILWIND];
+  const rtl = rightToLeft();
+  const children = (rewrite && guest(() => rewrite(list, props, c.root, rtl))) ?? list;
+  // Its own padding is the editor's: around the row, outside its content background (a hook's warned already).
+  if (!props[TAILWIND] && /[1-9]/.test(String(given(props, "padding") ?? ""))) {
+    const image = given(props, "backgroundImage");
+    if (/^(transparent)?$/.test(given(props, "columnsBackgroundColor") ?? "") ? image?.url && image.fullWidth === false : 1)
+      sayOnce("[Unlayer] Row padding sits outside the row's content background, as in the editor; to inset the content use the Columns' padding.");
+  }
+  return jsxs(Row, { ...props, children, _record: r });
+}
+
+/** Where a Column left out was, among its Row's Columns (see `elements`). */
+const LEFT_OUT = React.createElement(() => null);
+
+function leftOut(list: React.ReactNode[]): number[] {
+  const places: number[] = [];
+  let column = 0;
+  for (const child of list) {
+    if (child === LEFT_OUT) places.push(column++);
+    else if ((child as React.ReactElement | null)?.type === Column) column++;
+  }
+  return places;
+}
+
+const without = (cells: number[], places: number[]): number[] => (places.length ? cells.filter((_, i) => !places.includes(i)) : cells);
+
+/** A prop as given, or in `values` (where it's given as neither, undefined). */
+const given = (props: Record<string, any>, key: string) => (key in props ? props[key] : props.values?.[key]);
+
+/** The rewrite a Row's Columns' classes give it (see utils/tailwind.ts). */
+function columnsRewrite(list: React.ReactNode[]): unknown {
+  for (const child of list) {
+    const rewrite = (child as React.ReactElement<any> | null)?.props?.style?.[TAILWIND]?.row;
+    if (rewrite) return rewrite;
+  }
+  return undefined;
+}
+
+/** Text among the rows, or straight in a Row or Column, as it reads. */
+const text = (html: string): React.ReactNode[] => [textOf(html)];
+
+/** `out.push(...list)` for a list of any length: a spread of a long one (Markdown's blocks) overflows the stack. */
+function append(out: React.ReactNode[], list: readonly React.ReactNode[]): void {
+  for (const node of list) out.push(node);
+}
+
+/**
+ * What's among the rows, or in a Row or a Column, as Elements components. In a Row or Column, markup a record cuts
+ * (`<p>Hello <Name />, welcome back</p>`, a `<div>` around a block) is left out whole, as 0.1.22 left it out, with
+ * what's in it (text, markup a component renders there); a Row, Column or block in it is kept, as one beside it is,
+ * and a Row says where markup starts in it isn't a Column.
+ */
+export function elements(c: Collected, items: readonly Item[], place: Place, tw?: Record<string, any>, owner?: React.FC, inMarkup = false): React.ReactNode[] {
+  const out: React.ReactNode[] = [];
+  const inColumn = place === "column";
+  /** A record, `inside` markup it cuts. */
+  const recorded = (item: RecordItem, inside: boolean) => {
+    const r = recordOf(item);
+    if (r.kind === "tailwind") return void append(out, elements(c, item.items, place, r, owner, inside));
+    if (r.kind !== "boundary") {
+      const made = element(c, { item, tw });
+      if (made) out.push(made);
+      // (Its place among the Columns, for its Row's cells: see made.)
+      else if (place === "row" && r.kind === "column" && failedBefore(r)) out.push(LEFT_OUT);
+      return;
+    }
+    const kept = inColumn && !inside ? keptMarkup(c, item) : undefined;
+    if (kept) return void out.push(...restyled(c, tw, r, kept));
+    // Markup it renders, where it isn't kept, is named after it in the messages that say so.
+    const Named = () => null;
+    Named.displayName = nameOf(r.element);
+    if (inColumn && !inside && !c.told.has(r) && hasMarkup(item.items)) {
+      c.told.add(r);
+      console.warn(`Column: <${Named.displayName}> rendered markup that isn't a block, so it's left out. Put HTML in an <Html> block.`);
+    }
+    append(out, elements(c, item.items, place, tw, Named, inside));
+  };
+  // Among the rows, and in markup a record cuts, the content as it's written: its records, and its markup between them.
+  if (place === "root" || inMarkup) {
+    for (const run of runs(items)) {
+      if (!Array.isArray(run)) recorded(run, inMarkup);
+      else if (!inMarkup) append(out, rootMarkup(run, owner));
+    }
+    return out;
+  }
+  for (const item of items) {
+    if (typeof item === "string") out.push(...text(item));
+    else if (item.kind === "record") recorded(item, false);
+    else if (item.kind === "cut") {
+      // Left out whole, the records in it kept (a Row says where markup starts in it isn't a Column).
+      for (const run of runs([item])) {
+        if (!Array.isArray(run)) recorded(run, true);
+        else if (place === "row" && startOf(run)) out.push(React.createElement(owner ?? startOf(run)!));
+      }
+    }
+    // Other markup isn't a Column, which a Row says (and leaves it out); in a Column, an <a> or <hr> is a block (see
+    // asBlock), other markup is said and left out.
+    else if (!inColumn) out.push(React.createElement(owner ?? item.tag));
+    else {
+      const block = asBlock(item);
+      // (A component's markup is said where it's left out, above.)
+      if (!block && !owner) sayOnce(`[Unlayer] Column: <${item.tag}> isn't a block, so it's left out. Put HTML in an <Html> block.`);
+      if (block) out.push(...restyled(c, tw, item, block));
+    }
+  }
+  return out;
+}
+
+/**
+ * Markup among the rows between records, as Elements components for the head and the design (the HTML has it as it
+ * is): text as it reads, and each element, which isn't a Row (the design says so). Markup a record cuts, from its
+ * start or end tag to the next record, is one element (a `div` unless a component of the template's own wrote it).
+ */
+function rootMarkup(run: Token[], owner?: React.FC): React.ReactNode[] {
+  const out: React.ReactNode[] = [];
+  for (const token of run) {
+    if (typeof token === "string") out.push(...text(token));
+    else if ("tag" in token) out.push(React.createElement(owner ?? token.tag));
+    else {
+      out.push(React.createElement(owner ?? "div"));
+      break;
+    }
+  }
+  return out;
+}
diff --git a/packages/react/src/model/index.ts b/packages/react/src/model/index.ts
new file mode 100644
index 00000000..e2f1af38
--- /dev/null
+++ b/packages/react/src/model/index.ts
@@ -0,0 +1,51 @@
+/**
+ * The model of a template: its root's content collected once per render (collect.ts) and made Elements components
+ * only (elements.ts), with the user's components, Fragments, conditions, hooks and Context rendered as React renders
+ * them. The HTML (Body), the head (utils/extract-head.ts) and the design (utils/render-to-json.ts) are made from it.
+ */
+import React from "react";
+import { rootProps } from "../utils/tailwind";
+import { collect } from "./collect";
+import { elements, markup } from "./elements";
+
+export { collect, collectedFrom, collecting, type Collected } from "./collect";
+export { KEPT } from "./elements";
+
+/**
+ * A root's children as HTML (what Body puts inside it): markup among the rows as it is, and each row or block
+ * rendered by Elements with `render` (with the root's settings).
+ */
+export function childrenHtml(children: React.ReactNode, render: (child: React.ReactElement) => string, root: Record<string, any>, name: string): string {
+  const c = collect(children, name);
+  c.root = root;
+  return markup(c, c.content, render);
+}
+
+/** Children (a root's, with its props, or a Row on its own) as Elements components only, for the head and the design. */
+export function normalizedChildren(children: React.ReactNode, root?: Record<string, any>, name?: string): React.ReactNode[] {
+  const c = collect(children, name);
+  c.root = root;
+  return elements(c, c.content, "root");
+}
+
+/** What a root's content gives the document's head and the root (a <Font>, from "@unlayer/react-elements/font"). */
+export const heads = (children: React.ReactNode, root?: string) => collect(children, root).recorded.flatMap((r) => (r.kind === "head" ? [r] : []));
+export const headTags = (children: React.ReactNode, mode: string, root?: string) => heads(children, root).flatMap((r) => r.tags(mode));
+
+/** The props a root's content gives it (a <Font default>'s `fontFamily`), where it sets none of them. */
+export function rootDefaults(props: Record<string, any>, name?: string): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const { root } of heads(props.children, name)) for (const key in root) if (props[key] === undefined && props.values?.[key] === undefined) out[key] ??= root[key];
+  return out;
+}
+
+/**
+ * `root` with its children as Elements components only (and its classes and default font as props), in `mode` (the
+ * mode it renders in, which its rows' Tailwind rewrites read, as where Body renders them).
+ */
+export function normalizedRoot(root: React.ReactElement, mode?: string): React.ReactElement {
+  const props = root.props as { className?: string; children?: React.ReactNode };
+  const name = (root.type as { displayName?: string }).displayName ?? "Body";
+  const styled = rootProps(props, name);
+  return React.cloneElement(root, { ...styled, ...rootDefaults(styled, name) }, ...normalizedChildren(props.children, mode ? { ...styled, mode } : styled, name));
+}
diff --git a/packages/react/src/regression/__snapshots__/examples/AirbnbConfirmation.html b/packages/react/src/regression/__snapshots__/examples/AirbnbConfirmation.html
index c4ab68b6..b9ddc3f0 100644
--- a/packages/react/src/regression/__snapshots__/examples/AirbnbConfirmation.html
+++ b/packages/react/src/regression/__snapshots__/examples/AirbnbConfirmation.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,15 +34,8 @@
   }
   
   
-  #u_content_body_1 a {
-  
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
-
-
   
 
 </style>
@@ -188,7 +184,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
-<img align="center" border="0" src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1200&q=80" alt="Oceanview Villa" title="Oceanview Villa" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 520px;" width="520" class="v-src-width v-src-max-width"/>
+<img align="center" border="0" src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1200&q=80" alt="Oceanview Villa" title="Oceanview Villa" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 500px;" width="500" class="v-src-width v-src-max-width"/>
 </td>
 </tr>
 </table>
@@ -280,7 +276,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #717171; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #717171; line-height: 150%; text-align: left; word-wrap: break-word;">
     Your stay at <b>Oceanview Villa</b> in Malibu is booked. We can't wait to host you.
   </div>
 </td>
@@ -434,7 +430,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #717171; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #717171; line-height: 140%; text-align: left; word-wrap: break-word;">
     Property
   </div>
 </td>
@@ -469,7 +465,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #222222; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #222222; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>Oceanview Villa · Malibu, CA</b>
 </div>
 </td>
@@ -543,7 +539,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #717171; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #717171; line-height: 140%; text-align: left; word-wrap: break-word;">
     Check-in
   </div>
 </td>
@@ -578,7 +574,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #222222; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #222222; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>Fri, Jul 18 · 3:00 PM</b>
 </div>
 </td>
@@ -652,7 +648,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #717171; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #717171; line-height: 140%; text-align: left; word-wrap: break-word;">
     Check-out
   </div>
 </td>
@@ -687,7 +683,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #222222; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #222222; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>Mon, Jul 21 · 11:00 AM</b>
 </div>
 </td>
@@ -761,7 +757,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #717171; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #717171; line-height: 140%; text-align: left; word-wrap: break-word;">
     Guests
   </div>
 </td>
@@ -796,7 +792,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #222222; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #222222; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>2 adults</b>
 </div>
 </td>
@@ -870,7 +866,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #717171; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #717171; line-height: 140%; text-align: left; word-wrap: break-word;">
     Total
   </div>
 </td>
@@ -905,7 +901,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #222222; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #222222; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>$1,248.00</b>
 </div>
 </td>
@@ -1063,7 +1059,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 13px; color: #717171; line-height: 1.5;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 13px; color: #717171; line-height: 150%; text-align: center; word-wrap: break-word;">
     Questions about your trip? <a href='https://airbnb.com/help'>Visit the Help Center</a>.
   </div>
 </td>
diff --git a/packages/react/src/regression/__snapshots__/examples/LumaEventInvite.html b/packages/react/src/regression/__snapshots__/examples/LumaEventInvite.html
index 82b08245..93b6f081 100644
--- a/packages/react/src/regression/__snapshots__/examples/LumaEventInvite.html
+++ b/packages/react/src/regression/__snapshots__/examples/LumaEventInvite.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,15 +34,8 @@
   }
   
   
-  #u_content_body_1 a {
-  
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
-
-
   
 
 </style>
@@ -188,7 +184,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
-<img align="center" border="0" src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=1200&q=80" alt="Rooftop launch party at golden hour" title="Rooftop launch party at golden hour" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 600px;" width="600" class="v-src-width v-src-max-width"/>
+<img align="center" border="0" src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=1200&q=80" alt="Rooftop launch party at golden hour" title="Rooftop launch party at golden hour" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 580px;" width="580" class="v-src-width v-src-max-width"/>
 </td>
 </tr>
 </table>
@@ -261,7 +257,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #FF5C38; letter-spacing: 1.4px; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #FF5C38; letter-spacing: 1.4px; line-height: 140%; text-align: left; word-wrap: break-word;">
 <b>YOU'RE INVITED</b>
 </div>
 </td>
@@ -352,7 +348,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #0B0B0F; line-height: 1.7;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #0B0B0F; line-height: 170%; text-align: left; word-wrap: break-word;">
     🗓️  <b>Thursday, July 9, 2026</b>  ·  7:00 – 11:00 PM PDT
   </div>
 </td>
@@ -363,7 +359,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #6B6B76; line-height: 1.7;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #6B6B76; line-height: 170%; text-align: left; word-wrap: break-word;">
     📍  <b>The Skydeck</b> — 450 Market St, San Francisco, CA
   </div>
 </td>
@@ -521,7 +517,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #0B0B0F; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #0B0B0F; line-height: 140%; text-align: left; word-wrap: break-word;">
 <a href='https://lu.ma/neon-nights/calendar' style='color:#0B0B0F;text-decoration:underline'>+ Add to calendar</a>
 </div>
 </td>
@@ -671,7 +667,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 11px; color: #6B6B76; letter-spacing: 1.1px; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 11px; color: #6B6B76; letter-spacing: 1.1px; line-height: 140%; text-align: left; word-wrap: break-word;">
 <b>HOSTED BY</b>
 </div>
 </td>
@@ -748,7 +744,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="left">
-<img align="left" border="0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=120&q=80" alt="Maya Okonkwo" title="Maya Okonkwo" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 20%;max-width: 52px;" width="52" class="v-src-width v-src-max-width"/>
+<img align="left" border="0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=120&q=80" alt="Maya Okonkwo" title="Maya Okonkwo" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 20%;max-width: 48px;" width="48" class="v-src-width v-src-max-width"/>
 </td>
 </tr>
 </table>
@@ -760,7 +756,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #0B0B0F; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #0B0B0F; line-height: 140%; text-align: left; word-wrap: break-word;">
 <b>Maya Okonkwo</b>
 </div>
 </td>
@@ -771,7 +767,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 13px; color: #6B6B76; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 13px; color: #6B6B76; line-height: 140%; text-align: left; word-wrap: break-word;">
     Founder, Lumen
   </div>
 </td>
@@ -809,7 +805,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="left">
-<img align="left" border="0" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=120&q=80" alt="Theo Park" title="Theo Park" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 20%;max-width: 52px;" width="52" class="v-src-width v-src-max-width"/>
+<img align="left" border="0" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=120&q=80" alt="Theo Park" title="Theo Park" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 20%;max-width: 48px;" width="48" class="v-src-width v-src-max-width"/>
 </td>
 </tr>
 </table>
@@ -821,7 +817,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #0B0B0F; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #0B0B0F; line-height: 140%; text-align: left; word-wrap: break-word;">
 <b>Theo Park</b>
 </div>
 </td>
@@ -832,7 +828,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 13px; color: #6B6B76; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 13px; color: #6B6B76; line-height: 140%; text-align: left; word-wrap: break-word;">
     Head of Community
   </div>
 </td>
@@ -904,7 +900,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #6B6B76; line-height: 1.6;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #6B6B76; line-height: 160%; text-align: center; word-wrap: break-word;">
     You're receiving this because you joined the Lumen waitlist. <a href='https://lu.ma/settings'>Manage notifications</a>.
   </div>
 </td>
diff --git a/packages/react/src/regression/__snapshots__/examples/MercuryReceipt.html b/packages/react/src/regression/__snapshots__/examples/MercuryReceipt.html
index e634ac68..d3c6163d 100644
--- a/packages/react/src/regression/__snapshots__/examples/MercuryReceipt.html
+++ b/packages/react/src/regression/__snapshots__/examples/MercuryReceipt.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,15 +34,8 @@
   }
   
   
-  #u_content_body_1 a {
-  
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
-
-
   
 
 </style>
@@ -185,7 +181,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; font-weight: 700; color: #1F9D55; letter-spacing: 0.06em; line-height: 1;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; font-weight: 700; color: #1F9D55; letter-spacing: 0.06em; line-height: 100%; text-align: left; word-wrap: break-word;">
     PAYMENT SENT
   </div>
 </td>
@@ -337,7 +333,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #6B6B70; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #6B6B70; line-height: 150%; text-align: left; word-wrap: break-word;">
     Your transfer to Olivia Hart is on its way.
   </div>
 </td>
@@ -409,7 +405,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; font-weight: 700; color: #6B6B70; letter-spacing: 0.06em; line-height: 1;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; font-weight: 700; color: #6B6B70; letter-spacing: 0.06em; line-height: 100%; text-align: left; word-wrap: break-word;">
     DETAILS
   </div>
 </td>
@@ -483,7 +479,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #6B6B70; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #6B6B70; line-height: 140%; text-align: left; word-wrap: break-word;">
     To
   </div>
 </td>
@@ -518,7 +514,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #0E0E10; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #0E0E10; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>Olivia Hart</b>
 </div>
 </td>
@@ -592,7 +588,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #6B6B70; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #6B6B70; line-height: 140%; text-align: left; word-wrap: break-word;">
     From
   </div>
 </td>
@@ -627,7 +623,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #0E0E10; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #0E0E10; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>Acme Inc · ••4291</b>
 </div>
 </td>
@@ -701,7 +697,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #6B6B70; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #6B6B70; line-height: 140%; text-align: left; word-wrap: break-word;">
     Date
   </div>
 </td>
@@ -736,7 +732,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #0E0E10; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #0E0E10; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>Jul 1, 2026</b>
 </div>
 </td>
@@ -810,7 +806,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #6B6B70; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #6B6B70; line-height: 140%; text-align: left; word-wrap: break-word;">
     Reference
   </div>
 </td>
@@ -845,7 +841,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #0E0E10; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #0E0E10; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>INV-2705</b>
 </div>
 </td>
@@ -1081,7 +1077,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #6B6B70; line-height: 1.7;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #6B6B70; line-height: 170%; text-align: left; word-wrap: break-word;">
     Meridian Financial · This receipt confirms a completed transfer. Need help? <a href="https://meridian.example.com/support" style="color:#5A4FCF;text-decoration:none;">Contact support</a>.
   </div>
 </td>
diff --git a/packages/react/src/regression/__snapshots__/examples/MorningBrewDigest.html b/packages/react/src/regression/__snapshots__/examples/MorningBrewDigest.html
index a0341266..f44de15c 100644
--- a/packages/react/src/regression/__snapshots__/examples/MorningBrewDigest.html
+++ b/packages/react/src/regression/__snapshots__/examples/MorningBrewDigest.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,7 +34,7 @@
   }
   
   
-  #u_content_body_1 a {
+  #u_body_1 a {
   
     color: #1463FF;
     text-decoration: underline;
@@ -183,7 +186,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #8A8A8F; line-height: 1.4;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #8A8A8F; line-height: 140%; text-align: center; word-wrap: break-word;">
     MONDAY, JUNE 22, 2026  ·  ISSUE #418
   </div>
 </td>
@@ -333,7 +336,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #3F3F46; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #3F3F46; line-height: 160%; text-align: left; word-wrap: break-word;">
     Good morning. The sun's up, the coffee's hot, and the markets are already misbehaving. Here's everything you need to sound smart before your first meeting — in five minutes flat. Let's get into it. 👇
   </div>
 </td>
@@ -408,7 +411,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
-<img align="center" border="0" src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=1040&q=80" alt="Stock market chart on a screen" title="Stock market chart on a screen" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 504px;" width="504" class="v-src-width v-src-max-width"/>
+<img align="center" border="0" src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=1040&q=80" alt="Stock market chart on a screen" title="Stock market chart on a screen" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 484px;" width="484" class="v-src-width v-src-max-width"/>
 </td>
 </tr>
 </table>
@@ -500,7 +503,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #3F3F46; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #3F3F46; line-height: 160%; text-align: left; word-wrap: break-word;">
     Stocks clawed back early losses to close green, with the S&P 500 inching to a fresh record as traders bet the Fed is finally done hiking. Chipmakers led the charge, but analysts warn the rally is leaning on a <i>very</i> short list of names. <a href='https://example.com/markets'>Read the full market wrap →</a>
 </div>
 </td>
@@ -669,7 +672,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #3F3F46; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #3F3F46; line-height: 160%; text-align: left; word-wrap: break-word;">
     Every major platform rolled out an AI “agent” this quarter, and the marketing is officially out of control. The real story is quieter: a handful of teams are shipping tools that genuinely save people hours, while the rest are slapping a chatbot on a login screen. We sorted the signal from the noise. <a href='https://example.com/tech'>See which ones are actually useful →</a>
 </div>
 </td>
@@ -838,7 +841,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #3F3F46; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #3F3F46; line-height: 160%; text-align: left; word-wrap: break-word;">
     A small-town library replaced its overdue fines with “read it forward” donations — and circulation jumped 40%. Turns out, dropping the guilt got more people through the door. Proof that the gentlest policy can move the biggest numbers. <a href='https://example.com/good-news'>Read the heartwarming bit →</a>
 </div>
 </td>
@@ -1009,7 +1012,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #3F3F46; line-height: 1.55;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #3F3F46; line-height: 155%; text-align: left; word-wrap: break-word;">
     📈 <b>Oil dips</b> below $70 as supply worries ease for the first time in weeks. <a href='https://example.com/oil'>More</a>
 </div>
 </td>
@@ -1020,7 +1023,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #3F3F46; line-height: 1.55;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #3F3F46; line-height: 155%; text-align: left; word-wrap: break-word;">
     🏠 <b>Mortgage rates</b> tick down to a 9-month low, nudging buyers off the sidelines. <a href='https://example.com/housing'>More</a>
 </div>
 </td>
@@ -1055,7 +1058,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #3F3F46; line-height: 1.55;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #3F3F46; line-height: 155%; text-align: left; word-wrap: break-word;">
     🚀 <b>A startup</b> you've never heard of just raised $200M to build cheaper satellites. <a href='https://example.com/space'>More</a>
 </div>
 </td>
@@ -1066,7 +1069,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #3F3F46; line-height: 1.55;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #3F3F46; line-height: 155%; text-align: left; word-wrap: break-word;">
     🎬 <b>Streaming wars</b> heat up again as two giants merge their catalogs. <a href='https://example.com/streaming'>More</a>
 </div>
 </td>
@@ -1340,7 +1343,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #8A8A8F; line-height: 1.5;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #8A8A8F; line-height: 150%; text-align: center; word-wrap: break-word;">
     The Daily Pour · 123 Roastery Lane, Brewville · You're getting this because you have great taste.
   </div>
 </td>
diff --git a/packages/react/src/regression/__snapshots__/examples/NikeDrop.html b/packages/react/src/regression/__snapshots__/examples/NikeDrop.html
index a9d02d73..afba04f9 100644
--- a/packages/react/src/regression/__snapshots__/examples/NikeDrop.html
+++ b/packages/react/src/regression/__snapshots__/examples/NikeDrop.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,15 +34,8 @@
   }
   
   
-  #u_content_body_1 a {
-  
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
-
-
   
 
 </style>
@@ -188,7 +184,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
-<img align="center" border="0" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=1200&q=80" alt="New sneaker drop" title="New sneaker drop" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 600px;" width="600" class="v-src-width v-src-max-width"/>
+<img align="center" border="0" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=1200&q=80" alt="New sneaker drop" title="New sneaker drop" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 580px;" width="580" class="v-src-width v-src-max-width"/>
 </td>
 </tr>
 </table>
@@ -280,7 +276,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 17px; color: #B3B3B3; line-height: 1.5;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 17px; color: #B3B3B3; line-height: 150%; text-align: center; word-wrap: break-word;">
     The Air Max 2026. Limited stock. Move fast.
   </div>
 </td>
diff --git a/packages/react/src/regression/__snapshots__/examples/NotionWelcome.html b/packages/react/src/regression/__snapshots__/examples/NotionWelcome.html
index 848fbb09..8fa26cfb 100644
--- a/packages/react/src/regression/__snapshots__/examples/NotionWelcome.html
+++ b/packages/react/src/regression/__snapshots__/examples/NotionWelcome.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,15 +34,8 @@
   }
   
   
-  #u_content_body_1 a {
-  
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
-
-
   
 
 </style>
@@ -266,7 +262,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #6B6F76; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #6B6F76; line-height: 160%; text-align: left; word-wrap: break-word;">
     We're so glad you're here. Lumen is the calm, all-in-one workspace where your notes, docs, and plans finally live together. Let's get you set up in just a few minutes.
   </div>
 </td>
@@ -341,7 +337,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
-<img align="center" border="0" src="https://images.unsplash.com/photo-1517842645767-c639042777db?w=1040&q=80" alt="A tidy desk workspace" title="A tidy desk workspace" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 504px;" width="504" class="v-src-width v-src-max-width"/>
+<img align="center" border="0" src="https://images.unsplash.com/photo-1517842645767-c639042777db?w=1040&q=80" alt="A tidy desk workspace" title="A tidy desk workspace" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 484px;" width="484" class="v-src-width v-src-max-width"/>
 </td>
 </tr>
 </table>
@@ -435,7 +431,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #6B6F76; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #6B6F76; line-height: 150%; text-align: left; word-wrap: break-word;">
     Docs, notes, and wikis that feel effortless to create.
   </div>
 </td>
@@ -489,7 +485,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #6B6F76; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #6B6F76; line-height: 150%; text-align: left; word-wrap: break-word;">
     Tasks and timelines that keep the whole team in sync.
   </div>
 </td>
@@ -582,7 +578,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #6B6F76; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #6B6F76; line-height: 150%; text-align: left; word-wrap: break-word;">
     Instant search across everything you've ever written.
   </div>
 </td>
@@ -636,7 +632,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #6B6F76; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #6B6F76; line-height: 150%; text-align: left; word-wrap: break-word;">
     Invite teammates and guests with a single link.
   </div>
 </td>
@@ -949,7 +945,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #9CA0A6; line-height: 1.5;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #9CA0A6; line-height: 150%; text-align: center; word-wrap: break-word;">
     Lumen · 100 Market St, San Francisco, CA · <a href='https://example.com/unsubscribe'>Unsubscribe</a>
 </div>
 </td>
diff --git a/packages/react/src/regression/__snapshots__/examples/ProductDigest.html b/packages/react/src/regression/__snapshots__/examples/ProductDigest.html
index 5190e311..0fc779cc 100644
--- a/packages/react/src/regression/__snapshots__/examples/ProductDigest.html
+++ b/packages/react/src/regression/__snapshots__/examples/ProductDigest.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,11 +34,7 @@
   }
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
 
@@ -201,7 +200,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 16px; color: #52525B; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 16px; color: #52525B; line-height: 160%; text-align: left; word-wrap: break-word;">
     Three improvements shipped this month to make you faster.
   </div>
 </td>
@@ -292,7 +291,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #52525B; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #52525B; line-height: 160%; text-align: left; word-wrap: break-word;">
     The command palette now opens in under 50ms. Read the full <a href='https://linear.app/changelog'>changelog entry</a> for the details.
   </div>
 </td>
@@ -385,7 +384,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #52525B; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #52525B; line-height: 160%; text-align: left; word-wrap: break-word;">
     Break work down without leaving the issue view.
   </div>
 </td>
@@ -439,7 +438,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #52525B; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #52525B; line-height: 160%; text-align: left; word-wrap: break-word;">
     Pin the filters you use every day to the sidebar.
   </div>
 </td>
@@ -713,7 +712,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #A1A1AA; line-height: 1.4;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #A1A1AA; line-height: 140%; text-align: center; word-wrap: break-word;">
     You're receiving this because you use Linear.
   </div>
 </td>
diff --git a/packages/react/src/regression/__snapshots__/examples/StripeReceipt.html b/packages/react/src/regression/__snapshots__/examples/StripeReceipt.html
index d23673dd..85444a2d 100644
--- a/packages/react/src/regression/__snapshots__/examples/StripeReceipt.html
+++ b/packages/react/src/regression/__snapshots__/examples/StripeReceipt.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,15 +34,8 @@
   }
   
   
-  #u_content_body_1 a {
-  
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
-
-
   
 
 </style>
@@ -186,7 +182,7 @@ <h4 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; font-weight: 700; color: #697386; letter-spacing: 0.06em; line-height: 1;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; font-weight: 700; color: #697386; letter-spacing: 0.06em; line-height: 100%; text-align: left; word-wrap: break-word;">
     RECEIPT
   </div>
 </td>
@@ -338,7 +334,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #697386; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #697386; line-height: 150%; text-align: left; word-wrap: break-word;">
     Receipt #2705 · Paid Jul 1, 2026
   </div>
 </td>
@@ -490,7 +486,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #697386; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #697386; line-height: 140%; text-align: left; word-wrap: break-word;">
     Pro Plan (monthly)
   </div>
 </td>
@@ -525,7 +521,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #1A1F36; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #1A1F36; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>$25.00</b>
 </div>
 </td>
@@ -599,7 +595,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #697386; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #697386; line-height: 140%; text-align: left; word-wrap: break-word;">
     Additional seats × 3
   </div>
 </td>
@@ -634,7 +630,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #1A1F36; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #1A1F36; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>$36.00</b>
 </div>
 </td>
@@ -708,7 +704,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #697386; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #697386; line-height: 140%; text-align: left; word-wrap: break-word;">
     Usage overage
   </div>
 </td>
@@ -743,7 +739,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #1A1F36; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #1A1F36; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>$4.50</b>
 </div>
 </td>
@@ -1104,7 +1100,7 @@ <h3 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #697386; line-height: 1.6;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #697386; line-height: 160%; text-align: left; word-wrap: break-word;">
     Questions about this receipt? Contact <a href='mailto:support@acme.com'>support@acme.com</a>.
   </div>
 </td>
diff --git a/packages/react/src/regression/__snapshots__/examples/WarbyOrderShipped.html b/packages/react/src/regression/__snapshots__/examples/WarbyOrderShipped.html
index 25ef4e35..c571fa66 100644
--- a/packages/react/src/regression/__snapshots__/examples/WarbyOrderShipped.html
+++ b/packages/react/src/regression/__snapshots__/examples/WarbyOrderShipped.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,15 +34,8 @@
   }
   
   
-  #u_content_body_1 a {
-  
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
-
-
   
 
 </style>
@@ -189,7 +185,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
-<img align="center" border="0" src="https://images.unsplash.com/photo-1574258495973-f010dfbb5371?auto=format&fit=crop&w=1200&q=80" alt="A pair of eyeglasses resting on a clean surface" title="A pair of eyeglasses resting on a clean surface" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 600px;" width="600" class="v-src-width v-src-max-width"/>
+<img align="center" border="0" src="https://images.unsplash.com/photo-1574258495973-f010dfbb5371?auto=format&fit=crop&w=1200&q=80" alt="A pair of eyeglasses resting on a clean surface" title="A pair of eyeglasses resting on a clean surface" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 580px;" width="580" class="v-src-width v-src-max-width"/>
 </td>
 </tr>
 </table>
@@ -262,7 +258,7 @@ <h2 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; font-weight: 700; color: #3B5BDB; letter-spacing: 0.06em; line-height: 1;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; font-weight: 700; color: #3B5BDB; letter-spacing: 0.06em; line-height: 100%; text-align: center; word-wrap: break-word;">
     SHIPPED
   </div>
 </td>
@@ -414,7 +410,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #767676; line-height: 1.64;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #767676; line-height: 164%; text-align: center; word-wrap: break-word;">
     Hi Alex — your new frames have left our lab and are headed your way. We'll email you again the moment they land on your doorstep.
   </div>
 </td>
@@ -486,7 +482,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; font-weight: 700; color: #767676; letter-spacing: 0.06em; line-height: 1;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; font-weight: 700; color: #767676; letter-spacing: 0.06em; line-height: 100%; text-align: left; word-wrap: break-word;">
     TRACKING DETAILS
   </div>
 </td>
@@ -560,7 +556,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #767676; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #767676; line-height: 140%; text-align: left; word-wrap: break-word;">
     Carrier
   </div>
 </td>
@@ -595,7 +591,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #2A2A2A; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #2A2A2A; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>USPS Priority</b>
 </div>
 </td>
@@ -669,7 +665,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #767676; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #767676; line-height: 140%; text-align: left; word-wrap: break-word;">
     Tracking number
   </div>
 </td>
@@ -704,7 +700,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #2A2A2A; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #2A2A2A; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>9400 1234 5678 9012 3456</b>
 </div>
 </td>
@@ -778,7 +774,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #767676; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #767676; line-height: 140%; text-align: left; word-wrap: break-word;">
     Estimated delivery
   </div>
 </td>
@@ -813,7 +809,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #2A2A2A; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #2A2A2A; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>Mon, Jul 8</b>
 </div>
 </td>
@@ -971,7 +967,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; font-weight: 700; color: #767676; letter-spacing: 0.06em; line-height: 1;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; font-weight: 700; color: #767676; letter-spacing: 0.06em; line-height: 100%; text-align: left; word-wrap: break-word;">
     IN THIS ORDER
   </div>
 </td>
@@ -1045,7 +1041,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #2A2A2A; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #2A2A2A; line-height: 150%; text-align: left; word-wrap: break-word;">
 <b>Percey</b>
 </div>
 </td>
@@ -1056,7 +1052,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 13px; color: #767676; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 13px; color: #767676; line-height: 150%; text-align: left; word-wrap: break-word;">
     Whiskey Tortoise
   </div>
 </td>
@@ -1091,7 +1087,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #2A2A2A; line-height: 1.5;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #2A2A2A; line-height: 150%; text-align: right; word-wrap: break-word;">
 <b>$145</b>
 </div>
 </td>
@@ -1165,7 +1161,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #2A2A2A; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #2A2A2A; line-height: 150%; text-align: left; word-wrap: break-word;">
 <b>Haskell</b>
 </div>
 </td>
@@ -1176,7 +1172,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 13px; color: #767676; line-height: 1.5;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 13px; color: #767676; line-height: 150%; text-align: left; word-wrap: break-word;">
     Crystal
   </div>
 </td>
@@ -1211,7 +1207,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 15px; color: #2A2A2A; line-height: 1.5;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 15px; color: #2A2A2A; line-height: 150%; text-align: right; word-wrap: break-word;">
 <b>$95</b>
 </div>
 </td>
@@ -1285,7 +1281,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #767676; line-height: 1.4;  text-align: left; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #767676; line-height: 140%; text-align: left; word-wrap: break-word;">
     Total
   </div>
 </td>
@@ -1320,7 +1316,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #2A2A2A; line-height: 1.4;  text-align: right; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #2A2A2A; line-height: 140%; text-align: right; word-wrap: break-word;">
 <b>$240</b>
 </div>
 </td>
@@ -1392,7 +1388,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #767676; line-height: 1.64;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #767676; line-height: 164%; text-align: center; word-wrap: break-word;">
     Questions about your order? Our team is here to help — just reply to this email or visit the <a href='https://www.warbyparker.com/help' style='color:#3B5BDB;'>Help Center</a>.
   </div>
 </td>
@@ -1464,7 +1460,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #767676; line-height: 1.6;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #767676; line-height: 160%; text-align: center; word-wrap: break-word;">
     Warby Parker · 233 Spring Street, New York, NY 10013
   </div>
 </td>
@@ -1536,7 +1532,7 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 12px; color: #767676; line-height: 1.6;  text-align: center; word-wrap: break-word;">
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 12px; color: #767676; line-height: 160%; text-align: center; word-wrap: break-word;">
 <a href='#' style='color:#767676;'>Unsubscribe</a>  ·  <a href='#' style='color:#767676;'>Privacy Policy</a>
 </div>
 </td>
diff --git a/packages/react/src/regression/__snapshots__/patterns/fragments-and-components.html b/packages/react/src/regression/__snapshots__/patterns/fragments-and-components.html
index 3857a503..cf99b3ee 100644
--- a/packages/react/src/regression/__snapshots__/patterns/fragments-and-components.html
+++ b/packages/react/src/regression/__snapshots__/patterns/fragments-and-components.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,11 +34,7 @@
   }
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
 
@@ -102,9 +101,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">From a Fragment</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    From a Fragment
+  </div>
 </td>
 </tr>
 </tbody>
@@ -174,9 +173,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">From a component</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    From a component
+  </div>
 </td>
 </tr>
 </tbody>
@@ -246,9 +245,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">From an array</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    From an array
+  </div>
 </td>
 </tr>
 </tbody>
@@ -318,9 +317,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Second of the array</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Second of the array
+  </div>
 </td>
 </tr>
 </tbody>
@@ -390,9 +389,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">From memo</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    From memo
+  </div>
 </td>
 </tr>
 </tbody>
@@ -462,9 +461,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">From forwardRef</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    From forwardRef
+  </div>
 </td>
 </tr>
 </tbody>
@@ -534,9 +533,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">From a component with hooks</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    From a component with hooks
+  </div>
 </td>
 </tr>
 </tbody>
diff --git a/packages/react/src/regression/__snapshots__/patterns/fragments-and-components.json b/packages/react/src/regression/__snapshots__/patterns/fragments-and-components.json
index 60cf7718..ed62d9ba 100644
--- a/packages/react/src/regression/__snapshots__/patterns/fragments-and-components.json
+++ b/packages/react/src/regression/__snapshots__/patterns/fragments-and-components.json
@@ -602,7 +602,8 @@
    "_meta": {
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
-   }
+   },
+   "displayMode": "email"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/__snapshots__/patterns/hidden-on-a-device.html b/packages/react/src/regression/__snapshots__/patterns/hidden-on-a-device.html
index 08c91799..60dcc6df 100644
--- a/packages/react/src/regression/__snapshots__/patterns/hidden-on-a-device.html
+++ b/packages/react/src/regression/__snapshots__/patterns/hidden-on-a-device.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,11 +34,7 @@
   }
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
 
@@ -104,9 +103,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Phones only</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Phones only
+  </div>
 </td>
 </tr>
 </tbody>
@@ -116,9 +115,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Desktop only</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Desktop only
+  </div>
 </td>
 </tr>
 </tbody>
@@ -191,7 +190,7 @@
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">
-<img align="center" border="0" src="https://example.com/a.png" alt="Desktop image" title="Desktop image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 41.67%;max-width: 208.35px;" width="208.35" class="v-src-width v-src-max-width"/>
+<img align="center" border="0" src="https://example.com/a.png" alt="Desktop image" title="Desktop image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 41.67%;max-width: 200px;" width="200" class="v-src-width v-src-max-width"/>
 </td>
 </tr>
 </table>
diff --git a/packages/react/src/regression/__snapshots__/patterns/hidden-on-a-device.json b/packages/react/src/regression/__snapshots__/patterns/hidden-on-a-device.json
index 5671b49e..ef7d757f 100644
--- a/packages/react/src/regression/__snapshots__/patterns/hidden-on-a-device.json
+++ b/packages/react/src/regression/__snapshots__/patterns/hidden-on-a-device.json
@@ -248,7 +248,8 @@
    "_meta": {
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
-   }
+   },
+   "displayMode": "email"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/__snapshots__/patterns/html-block.html b/packages/react/src/regression/__snapshots__/patterns/html-block.html
index f5a21822..75a3abce 100644
--- a/packages/react/src/regression/__snapshots__/patterns/html-block.html
+++ b/packages/react/src/regression/__snapshots__/patterns/html-block.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,11 +34,7 @@
   }
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
 
diff --git a/packages/react/src/regression/__snapshots__/patterns/html-block.json b/packages/react/src/regression/__snapshots__/patterns/html-block.json
index 717d62b2..04bc8fd6 100644
--- a/packages/react/src/regression/__snapshots__/patterns/html-block.json
+++ b/packages/react/src/regression/__snapshots__/patterns/html-block.json
@@ -111,7 +111,8 @@
    "_meta": {
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
-   }
+   },
+   "displayMode": "email"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/__snapshots__/patterns/html-from-a-component.html b/packages/react/src/regression/__snapshots__/patterns/html-from-a-component.html
index c12edea3..82292bc6 100644
--- a/packages/react/src/regression/__snapshots__/patterns/html-from-a-component.html
+++ b/packages/react/src/regression/__snapshots__/patterns/html-from-a-component.html
@@ -6,6 +6,9 @@
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style type="text/css">
+body,html{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:14px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}p{margin:0}.container{--bs-gutter-x:0px;--bs-gutter-y:0;margin-left:auto;margin-right:auto;padding-left:calc(var(--bs-gutter-x)*.5);padding-right:calc(var(--bs-gutter-x)*.5);width:100%}sub,sup{line-height:0}
+
+a[onclick]{cursor:pointer}
 @media (max-width: 480px) { .hide-mobile { display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { display: none !important; } }
 
@@ -25,16 +28,9 @@
 
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
-  #u_content_body_1 a:hover {
-    color: #0000ee;
-    text-decoration: underline;
-  }
+  
   
   
 
@@ -75,9 +71,9 @@
 <div id="u_column_1" class="u-col u-col-100 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
 <div class="v-col-padding" style="width: 100%;padding:0px;">
 <div id="u_content_paragraph_1" class="u_content_paragraph v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px;">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">After the footer</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    After the footer
+  </div>
 </div>
 </div>
 </div>
diff --git a/packages/react/src/regression/__snapshots__/patterns/html-from-a-component.json b/packages/react/src/regression/__snapshots__/patterns/html-from-a-component.json
index b3866a21..ad2a783a 100644
--- a/packages/react/src/regression/__snapshots__/patterns/html-from-a-component.json
+++ b/packages/react/src/regression/__snapshots__/patterns/html-from-a-component.json
@@ -122,7 +122,8 @@
    "_meta": {
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
-   }
+   },
+   "displayMode": "web"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/__snapshots__/patterns/print-document.html b/packages/react/src/regression/__snapshots__/patterns/print-document.html
index 9d7cc8a5..29acbd73 100644
--- a/packages/react/src/regression/__snapshots__/patterns/print-document.html
+++ b/packages/react/src/regression/__snapshots__/patterns/print-document.html
@@ -3,6 +3,9 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style type="text/css">
+body,html{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:14px}p{margin:0}sub,sup{line-height:0}
+
+a[onclick]{cursor:pointer}
 
   
 
@@ -38,16 +41,9 @@
 
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
-  #u_content_body_1 a:hover {
-    color: #0000ee;
-    text-decoration: underline;
-  }
+  
   
   
 
@@ -77,9 +73,9 @@
 <div id="u_column_1" class="u-col u-col-100 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
 <div class="v-col-padding" style="width: 100%;padding:0px;">
 <div id="u_content_paragraph_1" data-page-row="u_content_paragraph_1" class="u_content_paragraph v-container-padding" style="overflow-wrap: break-word;padding: 10px;font-family: arial,helvetica,sans-serif;">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">A document</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    A document
+  </div>
 </div>
 </div>
 </div>
diff --git a/packages/react/src/regression/__snapshots__/patterns/print-document.json b/packages/react/src/regression/__snapshots__/patterns/print-document.json
index 9402d4d5..ac79cbae 100644
--- a/packages/react/src/regression/__snapshots__/patterns/print-document.json
+++ b/packages/react/src/regression/__snapshots__/patterns/print-document.json
@@ -122,7 +122,8 @@
    "_meta": {
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
-   }
+   },
+   "displayMode": "document"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/__snapshots__/patterns/reused-element.html b/packages/react/src/regression/__snapshots__/patterns/reused-element.html
index 15b7636c..06500a97 100644
--- a/packages/react/src/regression/__snapshots__/patterns/reused-element.html
+++ b/packages/react/src/regression/__snapshots__/patterns/reused-element.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,11 +34,7 @@
   }
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
 
@@ -102,9 +101,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">From a component</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    From a component
+  </div>
 </td>
 </tr>
 </tbody>
@@ -174,9 +173,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">From a component</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    From a component
+  </div>
 </td>
 </tr>
 </tbody>
diff --git a/packages/react/src/regression/__snapshots__/patterns/reused-element.json b/packages/react/src/regression/__snapshots__/patterns/reused-element.json
index 0c603660..57fd9e29 100644
--- a/packages/react/src/regression/__snapshots__/patterns/reused-element.json
+++ b/packages/react/src/regression/__snapshots__/patterns/reused-element.json
@@ -202,7 +202,8 @@
    "_meta": {
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
-   }
+   },
+   "displayMode": "email"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/__snapshots__/patterns/right-to-left.html b/packages/react/src/regression/__snapshots__/patterns/right-to-left.html
index 9992dd5d..b2bfb9f8 100644
--- a/packages/react/src/regression/__snapshots__/patterns/right-to-left.html
+++ b/packages/react/src/regression/__snapshots__/patterns/right-to-left.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,20 +34,13 @@
   }
   
   
-  #u_content_body_1 a {
-  
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
-
-
   
 
 </style>
 </head>
-<body class="clean-body u_body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #F7F8F9;color: #000000">
+<body class="clean-body u_body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #F7F8F9;color: #000000" dir="rtl" lang="ar">
 <!--[if IE]>
 <div class="ie-container">
 <![endif]-->
@@ -110,7 +106,7 @@
 <tr>
 <td>
 <![endif]-->
-<h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter-spacing" style="margin: 0px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word; font-size: 22px; font-weight: 400;" dir="rtl" >مرحبا</h1>
+<h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter-spacing" style="margin: 0px; color: #000000; line-height: 140%; text-align: right; word-wrap: break-word; font-size: 22px; font-weight: 400;" dir="rtl" >مرحبا</h1>
 <!--[if mso]>
 </td>
 </tr>
@@ -124,9 +120,9 @@ <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight v-letter
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;" dir="rtl">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">نص</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: right; word-wrap: break-word;" dir="rtl">
+    نص
+  </div>
 </td>
 </tr>
 </tbody>
diff --git a/packages/react/src/regression/__snapshots__/patterns/right-to-left.json b/packages/react/src/regression/__snapshots__/patterns/right-to-left.json
index a4b8cae3..1f7e008b 100644
--- a/packages/react/src/regression/__snapshots__/patterns/right-to-left.json
+++ b/packages/react/src/regression/__snapshots__/patterns/right-to-left.json
@@ -21,7 +21,7 @@
          "containerPadding": "10px",
          "headingType": "h1",
          "fontSize": "22px",
-         "textAlign": "left",
+         "textAlign": "right",
          "lineHeight": "140%",
          "linkStyle": {
           "inherit": true,
@@ -49,7 +49,7 @@
         "values": {
          "containerPadding": "10px",
          "fontSize": "14px",
-         "textAlign": "left",
+         "textAlign": "right",
          "lineHeight": "140%",
          "linkStyle": {
           "inherit": true,
@@ -193,7 +193,8 @@
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
    },
-   "textDirection": "rtl"
+   "textDirection": "rtl",
+   "displayMode": "email"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/__snapshots__/patterns/template-component.html b/packages/react/src/regression/__snapshots__/patterns/template-component.html
index c375e755..a5619b61 100644
--- a/packages/react/src/regression/__snapshots__/patterns/template-component.html
+++ b/packages/react/src/regression/__snapshots__/patterns/template-component.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,11 +34,7 @@
   }
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
 
@@ -103,9 +102,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">Hi Ada</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    Hi Ada
+  </div>
 </td>
 </tr>
 </tbody>
diff --git a/packages/react/src/regression/__snapshots__/patterns/template-component.json b/packages/react/src/regression/__snapshots__/patterns/template-component.json
index ae320bb3..1ebbb3ae 100644
--- a/packages/react/src/regression/__snapshots__/patterns/template-component.json
+++ b/packages/react/src/regression/__snapshots__/patterns/template-component.json
@@ -122,7 +122,8 @@
    "_meta": {
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
-   }
+   },
+   "displayMode": "email"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/__snapshots__/patterns/text-straight-in-rows-and-columns.html b/packages/react/src/regression/__snapshots__/patterns/text-straight-in-rows-and-columns.html
index ab7efd77..798a0749 100644
--- a/packages/react/src/regression/__snapshots__/patterns/text-straight-in-rows-and-columns.html
+++ b/packages/react/src/regression/__snapshots__/patterns/text-straight-in-rows-and-columns.html
@@ -17,6 +17,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--<![endif]-->
 <style type="text/css">
+sub,sup{line-height:0}
+
+body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
 @media (min-width: 0px) { .hide-default__display-block { display: block !important; mso-hide: unset !important; } .hide-default__display-table { display: table !important; mso-hide: unset !important; } }
 @media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { max-height: 0px; overflow: hidden; display: none !important; } }
@@ -31,11 +34,7 @@
   }
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
   
 
@@ -104,9 +103,9 @@
 <tbody>
 <tr>
 <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">In a paragraph</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    In a paragraph
+  </div>
 </td>
 </tr>
 </tbody>
diff --git a/packages/react/src/regression/__snapshots__/patterns/text-straight-in-rows-and-columns.json b/packages/react/src/regression/__snapshots__/patterns/text-straight-in-rows-and-columns.json
index 4935e1b5..05e6b176 100644
--- a/packages/react/src/regression/__snapshots__/patterns/text-straight-in-rows-and-columns.json
+++ b/packages/react/src/regression/__snapshots__/patterns/text-straight-in-rows-and-columns.json
@@ -122,7 +122,8 @@
    "_meta": {
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
-   }
+   },
+   "displayMode": "email"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/__snapshots__/patterns/web-page.html b/packages/react/src/regression/__snapshots__/patterns/web-page.html
index fdf2d02d..3da57ef1 100644
--- a/packages/react/src/regression/__snapshots__/patterns/web-page.html
+++ b/packages/react/src/regression/__snapshots__/patterns/web-page.html
@@ -6,6 +6,9 @@
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style type="text/css">
+body,html{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:14px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}p{margin:0}.container{--bs-gutter-x:0px;--bs-gutter-y:0;margin-left:auto;margin-right:auto;padding-left:calc(var(--bs-gutter-x)*.5);padding-right:calc(var(--bs-gutter-x)*.5);width:100%}sub,sup{line-height:0}
+
+a[onclick]{cursor:pointer}
 @media (max-width: 480px) { .hide-mobile { display: none !important; } }
 @media (min-width: 481px) { .hide-desktop { display: none !important; } }
 
@@ -25,16 +28,9 @@
 
   
   
-  #u_content_body_1 a {
   
-    color: #0000ee;
-    text-decoration: underline;
-  }
   
-  #u_content_body_1 a:hover {
-    color: #0000ee;
-    text-decoration: underline;
-  }
+  
   
   
 
@@ -72,9 +68,9 @@
 <div id="u_column_1" class="u-col u-col-100 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
 <div class="v-col-padding" style="width: 100%;padding:0px;">
 <div id="u_content_paragraph_1" class="u_content_paragraph v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px;">
-<div class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align" style="font-size: 14px; color: #000000; line-height: 1.4;  text-align: left; word-wrap: break-word;">
-<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">A web page</p>
-</div>
+<div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing" style="font-size: 14px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
+    A web page
+  </div>
 </div>
 </div>
 </div>
diff --git a/packages/react/src/regression/__snapshots__/patterns/web-page.json b/packages/react/src/regression/__snapshots__/patterns/web-page.json
index 6ea6f996..e317146b 100644
--- a/packages/react/src/regression/__snapshots__/patterns/web-page.json
+++ b/packages/react/src/regression/__snapshots__/patterns/web-page.json
@@ -122,7 +122,8 @@
    "_meta": {
     "htmlID": "u_body",
     "htmlClassNames": "u_body"
-   }
+   },
+   "displayMode": "web"
   }
  },
  "schemaVersion": 27
diff --git a/packages/react/src/regression/client-render.test.tsx b/packages/react/src/regression/client-render.test.tsx
index bfc57fa0..a9a260ce 100644
--- a/packages/react/src/regression/client-render.test.tsx
+++ b/packages/react/src/regression/client-render.test.tsx
@@ -4,9 +4,10 @@
  * renders it, whatever is added, removed or moved around it.
  */
 import { afterEach, describe, expect, it, vi } from "vitest";
-import React, { act, useId, useState } from "react";
+import React, { useId, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { Column, Email, Html, Paragraph, Row, renderToHtml, renderToPlainText } from "../index";
+import { act } from "../test-utils";
 
 // Renders run inside act(), as React's testing setup expects.
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
diff --git a/packages/react/src/regression/edge-cases.test.tsx b/packages/react/src/regression/edge-cases.test.tsx
index e4228d41..2ec341b3 100644
--- a/packages/react/src/regression/edge-cases.test.tsx
+++ b/packages/react/src/regression/edge-cases.test.tsx
@@ -2,16 +2,18 @@
  * Edges where Elements meets React's own rules, rendered with this build and with the last published Elements
  * (`@unlayer/react-elements-previous`): markup React rejects, pieces rendered on their own, odd children, React's
  * hooks and wrappers, and Elements' renders called inside another render (an app's server render, a component
- * Elements renders, the browser). 0.2.0 renders templates with React, which is stricter than 0.1.22's walk of the
- * tree and keeps a render's state in its module: these are where that shows. Wherever the previous release
- * rendered, this build must too (no throw), and show every word it showed (it may show more: what React shows).
+ * Elements renders, the browser). This build renders templates as React does, which is stricter than 0.1.22's walk
+ * of the tree: these are where that shows. Wherever the previous release rendered, this build must too (no throw),
+ * and show every word it showed (it may show more: what React shows). Markup React rejects fails the render, naming
+ * it; with `onError: "omit"` it's left out, and then the rest renders where the previous release did.
  */
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
-import React, { Component, Fragment, createContext, forwardRef, memo, useContext, useDeferredValue, useLayoutEffect, useMemo, useState, useSyncExternalStore, useTransition, act } from "react";
+import React, { Component, Fragment, createContext, forwardRef, memo, useContext, useDeferredValue, useLayoutEffect, useMemo, useState, useSyncExternalStore, useTransition } from "react";
 import { renderToString } from "react-dom/server";
 import { createRoot } from "react-dom/client";
 import * as current from "../index";
 import * as previous from "@unlayer/react-elements-previous";
+import { act } from "../test-utils";
 
 type Lib = typeof current;
 const releases = { current, previous: previous as unknown as Lib };
@@ -143,11 +145,15 @@ const CASES: Record<string, (L: Lib) => React.ReactElement> = {
   },
 };
 
+/** Markup React rejects: the render fails (a RenderError naming it), and leaves it out with `onError: "omit"`. */
+const REJECTED = new Set(["markup React rejects among the rows (a string style)", "markup React rejects in a component in a Column", "dangerouslySetInnerHTML given as a string", "children and dangerouslySetInnerHTML both", "a void element with children"]);
+
 type Api = "html" | "plain" | "json";
-const API: Record<Api, (L: Lib, element: React.ReactElement) => string[]> = {
-  html: (L, element) => words(L.renderToHtml(element)),
-  plain: (L, element) => L.renderToPlainText(element).split(/\s+/).filter(Boolean),
-  json: (L, element) => designWords(L.renderToJson(element)),
+type Options = { onError?: "omit" };
+const API: Record<Api, (L: Lib, element: React.ReactElement, options?: Options) => string[]> = {
+  html: (L, element, options) => words(L.renderToHtml(element, options)),
+  plain: (L, element, options) => L.renderToPlainText(element, options).split(/\s+/).filter(Boolean),
+  json: (L, element, options) => designWords(L.renderToJson(element, options)),
 };
 
 /** Where the render is called: directly, or from a page an app renders on the server, using hooks after. */
@@ -180,13 +186,15 @@ beforeAll(() => {
 });
 afterAll(() => vi.restoreAllMocks());
 
-describe.each(Object.entries(CASES))("%s", (_, build) => {
+describe.each(Object.entries(CASES))("%s", (name, build) => {
+  const options: Options | undefined = REJECTED.has(name) ? { onError: "omit" } : undefined;
   for (const api of Object.keys(API) as Api[]) {
     for (const [place, within] of Object.entries(PLACES)) {
       it(`${api}, ${place}: renders where the previous release did, with every word it showed`, () => {
+        if (options) expect(attempt(() => within(() => API[api](releases.current, build(releases.current)))).error).toBeInstanceOf(current.RenderError);
         const before = attempt(() => within(() => API[api](releases.previous, build(releases.previous))));
         if (before.error) return; // the previous release didn't render it: nothing to keep
-        const now = attempt(() => within(() => API[api](releases.current, build(releases.current))));
+        const now = attempt(() => within(() => API[api](releases.current, build(releases.current), options)));
         expect(now.error).toBeUndefined();
         expect(contains(now.words!, before.words!)).toEqual([]);
       });
@@ -197,25 +205,37 @@ describe.each(Object.entries(CASES))("%s", (_, build) => {
 describe("blocks and Rows of the previous release inside this one's (a package still on it, in a monorepo)", () => {
   const P = releases.previous;
   const C = releases.current;
-  const build = (B: Lib, R: Lib) => (
-    <C.Email>
+  const build = (B: Lib, R: Lib, E: Lib = C) => (
+    <E.Email backgroundColor="#f4f4f4">
       <R.Row><R.Column>
         <B.Paragraph color="#ff0000">Same text</B.Paragraph>
         <B.Button href="https://example.com">Go</B.Button>
-        <B.Image src="https://example.com/a.png" alt="A" width="120px" />
+        <B.Image src="https://example.com/a.png" alt="A" width="200px" />
       </R.Column></R.Row>
-    </C.Email>
+    </E.Email>
   );
   it.each([
-    ["its blocks in this release's Row", P, C],
-    ["its Row, Column and blocks", P, P],
-  ] as const)("render as this release's do: %s", (_, blocks, rows) => {
-    expect(C.renderToHtml(build(blocks, rows))).toBe(C.renderToHtml(build(C, C)));
-    expect(JSON.stringify(C.renderToJson(build(blocks, rows)))).toBe(JSON.stringify(C.renderToJson(build(C, C))));
+    ["its blocks in this release's Row", P, C, C],
+    ["its Row, Column and blocks", P, P, C],
+    // (Its root carries no marker: it's known by its name and its code, see utils/root-type.ts.)
+    ["its Email, Row, Column and blocks", P, P, P],
+  ] as const)("render as this release's do: %s", (_, blocks, rows, root) => {
+    expect(C.renderToHtml(build(blocks, rows, root))).toBe(C.renderToHtml(build(C, C)));
+    expect(JSON.stringify(C.renderToJson(build(blocks, rows, root)))).toBe(JSON.stringify(C.renderToJson(build(C, C))));
+  });
+
+  it.each(["Body", "Page", "Document"] as const)("render as this release's do: its %s", (name) => {
+    const template = (L: Lib) => {
+      const Root = L[name] as React.ComponentType<{ backgroundColor?: string; children?: React.ReactNode }>;
+      return <Root backgroundColor="#f4f4f4"><C.Row><C.Column><C.Paragraph>Same text</C.Paragraph></C.Column></C.Row></Root>;
+    };
+    expect(C.renderToHtml(template(P))).toBe(C.renderToHtml(template(C)));
+    expect(JSON.stringify(C.renderToJson(template(P)))).toBe(JSON.stringify(C.renderToJson(template(C))));
   });
 });
 
-describe("in the browser (a live preview)", () => {
+// (React's act(), which this needs, is in its development build only.)
+describe.skipIf(process.env.NODE_ENV === "production")("in the browser (a live preview)", () => {
   (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
   it("renders the email, and works out its design and HTML while rendering, as the previous release did", async () => {
     const shown: Record<string, string[]> = {};
diff --git a/packages/react/src/regression/generated.test.tsx b/packages/react/src/regression/generated.test.tsx
index 824e2dd8..fda513eb 100644
--- a/packages/react/src/regression/generated.test.tsx
+++ b/packages/react/src/regression/generated.test.tsx
@@ -259,16 +259,23 @@ const BLOCKS: Record<string, (L: any, r: Random) => React.ReactElement> = {
   Image: (L, r) => <L.Image src="https://example.com/a.png" alt="Alt words" {...some(r, { width: ["120px", "50%", "300px"], textAlign: ALIGNS, href: ["https://example.com/i"], containerPadding: PADDINGS })} />,
   Divider: (L, r) => <L.Divider {...some(r, { containerPadding: PADDINGS, textAlign: ALIGNS })} />,
   Html: (L, r) => <L.Html html="<p>Html words</p>" {...some(r, { containerPadding: PADDINGS })} />,
-  Menu: (L, r) => <L.Menu items={[{ text: "Home", href: "https://example.com/" }, { text: "About", href: "https://example.com/a" }]} {...some(r, { color: COLORS, fontSize: SIZES, textAlign: ALIGNS, containerPadding: PADDINGS })} />,
-  Social: (L, r) => <L.Social icons={[{ name: "Facebook", url: "https://facebook.com/x" }, { name: "Twitter", url: "https://twitter.com/x" }]} {...some(r, { textAlign: ALIGNS, containerPadding: PADDINGS })} />,
+  Menu: (L, r) => <L.Menu items={[{ text: "Home", href: "https://example.com/" }, { text: "About", href: "https://example.com/a" }]} {...some(r, { textColor: COLORS, fontSize: SIZES, align: ALIGNS, containerPadding: PADDINGS })} />,
+  Social: (L, r) => <L.Social icons={[{ name: "Facebook", url: "https://facebook.com/x" }, { name: "Twitter", url: "https://twitter.com/x" }]} {...some(r, { align: ALIGNS, containerPadding: PADDINGS })} />,
 };
 
 /**
- * The body's HTML with ids and the documented changes to the device CSS left out: no-stack rules
- * written `.u-row.no-stack` (a later row's rules overrode them), and the rules that hide content on a device.
+ * The body's HTML with ids and the documented changes left out: in the device CSS, no-stack rules written
+ * `.u-row.no-stack` (a later row's rules overrode them) and the rules that hide content on a device; an image's size
+ * (a px width renders at that width now: the previous release sized it in a slot without the block's padding); a
+ * Paragraph's markup, now the editor's text block's (its text in no `<p>`, its line height as given, `140%` and not
+ * `1.4`, its classes in that block's order).
  */
 function comparable(html: string): string {
   return html
+    .replace(/<img [^>]*>/g, (img) => img.replace(/(width|height)(: |=")[\d.]+/g, "$1$2N"))
+    .replace(/class="v-color v-line-height v-font-weight v-font-family v-font-size v-letter-spacing v-text-align"/g, 'class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size v-letter-spacing"')
+    .replace(/<p style="margin: 0px; margin-block-start: 0px; margin-block-end: 0px;">([\s\S]*?)<\/p>/g, "$1")
+    .replace(/line-height: ([^;"]+);\s+text-align/g, (_, value: string) => `line-height: ${value.endsWith("%") ? parseFloat(value) / 100 : value}; text-align`)
     .replace(/<head[\s\S]*?<\/head>/i, "")
     .replace(/<style[\s\S]*?<\/style>/gi, (css) =>
       css
@@ -280,8 +287,8 @@ function comparable(html: string): string {
     .replace(/u_[a-z_]+_\d+/g, "ID")
     .replace(/\s+/g, " ");
 }
-/** A design without its ids, counters and the phone settings the previous release didn't keep. */
-const designOf = (design: unknown) => JSON.stringify(design, (key, value) => (["_meta", "counters", "schemaVersion", "_override", "hideMobile", "hideDesktop"].includes(key) ? undefined : value));
+/** A design without its ids, counters, and the phone settings and the body's mode the previous release didn't keep. */
+const designOf = (design: unknown) => JSON.stringify(design, (key, value) => (["_meta", "counters", "schemaVersion", "_override", "hideMobile", "hideDesktop", "displayMode"].includes(key) ? undefined : value));
 
 describe("each block with its props", () => {
   it.each(Object.keys(BLOCKS))("%s renders as the previous release did, in every mode", (name) => {
diff --git a/packages/react/src/regression/hostile-input.test.tsx b/packages/react/src/regression/hostile-input.test.tsx
index 3a7c601d..58150f31 100644
--- a/packages/react/src/regression/hostile-input.test.tsx
+++ b/packages/react/src/regression/hostile-input.test.tsx
@@ -2,16 +2,25 @@
  * Values that often come from users (a name, a link, a language) can't add
  * markup: each is given markup that would add an element or an attribute, in
  * every mode, and the parsed output must have neither. Raw HTML is what the
- * Html block and the `text` prop of Heading and Button are for, so they aren't
- * tested; design props (colors, sizes) come from the template's author. Phone
- * settings are written into the head's CSS, where a value could end the
- * `<style>` element or add rules, so they're tested too.
+ * Html block, the `text` prop of Heading and Button, Paragraph's `html` and a
+ * Table's cells (`headers`, `data`: HTML, as the editor's table holds them) are
+ * for, so they're written as given (pinned below); style props (colors, sizes,
+ * a Menu's separator) are written as given too, as in 0.2.1, and come from the
+ * template's author (only `style`, phone settings and Tailwind classes are
+ * checked). Phone settings are written into the head's CSS, where a value could
+ * end the `<style>` element or add rules, so they're tested too.
  */
-import { describe, expect, it, vi } from "vitest";
+import { beforeAll, describe, expect, it, vi } from "vitest";
 import React from "react";
-import { renderToHtml } from "../utils/render-to-html";
+import { renderToHtml, renderToPlainText } from "../utils/render-to-html";
 import { renderToJson } from "../utils/render-to-json";
-import { Email, Page, Document, Row, Column, Paragraph, Heading, Button, Image, Menu, Social, Html } from "../index";
+import { Email, Page, Document, Row, Column, Paragraph, Heading, Button, Image, Link, Menu, Social, Html, Divider, Table, Video } from "../index";
+import { designToElements } from "../codegen";
+import { evaluate } from "../codegen/test-harness";
+import { Tailwind, loadTailwind, type TailwindHandle } from "../tailwind";
+import { CLASS_LIMITS } from "../tailwind/declarations";
+import { Markdown } from "../markdown";
+import { growth, inTime, within } from "../test-timing";
 
 const PAYLOADS = [
   '"><x-pwn></x-pwn>', "'><x-pwn></x-pwn>", '" x-pwn="1', "' x-pwn='1", "</p></div></td></tr></table><x-pwn></x-pwn>",
@@ -50,6 +59,20 @@ const CASES: Record<string, (v: string) => React.ReactElement> = {
   "Image text": (v) => <Row><Column><Image src="https://example.com/a.png" width="100px" alt={v} /></Column></Row>,
   "Image link": (v) => <Row><Column><Image src="https://example.com/a.png" width="100px" alt="x" href={`https://example.com/${v}`} /></Column></Row>,
   "Menu item": (v) => <Row><Column><Menu items={[{ text: v, href: `https://example.com/${v}` }]} /></Column></Row>,
+  // A link's target, written into its `target="…"` as it is.
+  "Button target": (v) => <Row><Column><Button href="https://example.com" target={v}>Go</Button></Column></Row>,
+  "Menu item target": (v) => <Row><Column><Menu items={[{ text: "Home", href: "https://example.com", target: v }]} /></Column></Row>,
+  // A row's anchor, which the exporters write into an `<a name="…">` (0.2.1 did too).
+  "Row anchor": (v) => <Row anchor={`top${v}`}><Column><Paragraph>Hello</Paragraph></Column></Row>,
+  "Row anchor in values": (v) => <Row values={{ anchor: `top${v}` }}><Column><Paragraph>Hello</Paragraph></Column></Row>,
+  // A video's link and thumbnail, which an email writes into an `href` and a `src` as they are (0.2.1 did too).
+  "Video link": (v) => <Row><Column><Video video={{ url: `https://youtu.be/${v}`, type: "youtube", videoId: "abc", thumbnail: "https://img.youtube.com/vi/abc/0.jpg" }} /></Column></Row>,
+  "Video thumbnail": (v) => <Row><Column><Video values={{ video: { url: "https://youtu.be/abc", type: "youtube", videoId: "abc", thumbnail: `https://example.com/${v}.jpg` } }} /></Column></Row>,
+  // A video's id, which a page's and a document's player writes into its `src` as it is (0.2.1 did too).
+  "Video id": (v) => <Row><Column><Video video={{ type: "youtube", videoId: `abc${v}`, thumbnail: "https://img.youtube.com/vi/abc/0.jpg" }} /></Column></Row>,
+  "Vimeo id in values": (v) => <Row><Column><Video values={{ video: { type: "vimeo", videoId: `76979871${v}`, thumbnail: "" } }} /></Column></Row>,
+  // A social icon's own image, which an email writes into its `src` as it is.
+  "Social icon image": (v) => <Row><Column><Social values={{ icons: { iconType: "circle", icons: [{ name: "Custom", url: "https://example.com", imgUrl: `https://example.com/${v}.png` }] } } as never} /></Column></Row>,
   "Social link": (v) => <Row><Column><Social icons={[{ name: "Twitter", url: `https://twitter.com/${v}` }]} /></Column></Row>,
   "Social name": (v) => <Row><Column><Social icons={[{ name: v, url: "https://twitter.com/x" }]} /></Column></Row>,
   "text in a Column": (v) => <Row><Column>{v}</Column></Row>,
@@ -60,6 +83,8 @@ const ROOT_PROPS: Record<string, (v: string) => Record<string, unknown>> = {
   textDirection: (v) => ({ textDirection: v }),
   lang: (v) => ({ lang: v }),
   "font URL": (v) => ({ fonts: [{ url: `https://example.com/${v}.css` }] }),
+  // An id or class name given in the root's `values`, as on a Row, a Column or a block.
+  htmlId: (v) => ({ values: { _meta: { htmlID: `u_body${v}`, htmlClassNames: `u_body${v}` } } }),
 };
 const ROOTS = { email: Email, web: Page, document: Document } as const;
 
@@ -88,6 +113,492 @@ describe.each(Object.entries(ROOTS))("%s", (_, Root) => {
   });
 });
 
+describe("a design's values, as designToElements writes them", () => {
+  // The code it writes renders a design's values through the same components: a row's anchor, a video's link and
+  // thumbnail, an icon's own image (0.2.1 wrote them as given, and the codegen now takes them from a design).
+  const designOf = (mode: string, payload: string, url = `https://youtu.be/${payload}`) => ({
+    counters: {},
+    schemaVersion: 16,
+    body: {
+      values: { displayMode: mode },
+      rows: [
+        {
+          cells: [1],
+          values: { anchor: `promo${payload}` },
+          columns: [
+            {
+              values: {},
+              contents: [
+                { type: "video", values: { video: { url, videoId: "abc", type: "youtube", thumbnail: `https://img.example/${payload}.jpg` } } },
+                { type: "video", values: { video: { videoId: `abc${payload}`, type: "youtube", thumbnail: "https://img.youtube.com/vi/abc/0.jpg" } } },
+                { type: "social", values: { icons: { iconType: "circle", icons: [{ name: "Custom", url: "https://example.com", imgUrl: `https://example.com/${payload}.png` }] } } },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  });
+
+  it.each(Object.keys(ROOTS))("%s: can't add markup, or link to a URL that runs code", (mode) => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      for (const payload of PAYLOADS) {
+        const Template = evaluate(designToElements(designOf(mode, payload)).code);
+        expect(injected(renderToHtml(<Template />)), payload).toEqual([]);
+      }
+      const Template = evaluate(designToElements(designOf(mode, "x", "&#106;avascript:alert(1)")).code);
+      const links = Array.from(new DOMParser().parseFromString(renderToHtml(<Template />), "text/html").querySelectorAll("a[href]")).map((a) => a.getAttribute("href")!);
+      expect(links.filter((href) => /^javascript:/i.test(href) && !href.startsWith("javascript:throw new Error('React has blocked"))).toEqual([]);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
+
+describe("a video's id, which a page's and a document's player writes into its URL as it is", () => {
+  const payload = 'abc" onload="alert(document.domain)';
+  const encoded = "abc%22%20onload%3D%22alert%28document.domain%29";
+  const PLAYERS = { youtube: "https://www.youtube.com/embed/", vimeo: "https://player.vimeo.com/video/" } as const;
+  const block = (json: any) => json.body.rows[0].columns[0].contents[0].values.video;
+  const designOf = (type: string, videoId: string) => ({
+    counters: {},
+    schemaVersion: 16,
+    body: { values: { displayMode: "web" }, rows: [{ cells: [1], values: {}, columns: [{ values: {}, contents: [{ type: "video", values: { video: { type, videoId, thumbnail: "" } } }] }] }] },
+  });
+
+  it.each(Object.keys(PLAYERS) as Array<keyof typeof PLAYERS>)("%s: is percent-encoded where it holds what an id doesn't, in the HTML, the design and the code designToElements writes", (type) => {
+    for (const element of [<Video video={{ type, videoId: payload, thumbnail: "" }} />, <Video values={{ video: { type, videoId: payload, thumbnail: "" } }} />]) {
+      for (const Root of [Page, Document]) {
+        const doc = new DOMParser().parseFromString(renderToHtml(<Root><Row><Column>{element}</Column></Row></Root>), "text/html");
+        const iframe = doc.querySelector("iframe")!;
+        expect(iframe.getAttribute("src")).toBe(PLAYERS[type] + encoded);
+        expect(iframe.hasAttribute("onload")).toBe(false);
+      }
+      for (const Root of Object.values(ROOTS)) expect(block(renderToJson(<Root><Row><Column>{element}</Column></Row></Root>)).videoId).toBe(encoded);
+    }
+    const { code } = designToElements(designOf(type, payload));
+    expect(code).toContain(encoded);
+    expect(code).not.toContain("onload=");
+    const Template = evaluate(code);
+    expect(new DOMParser().parseFromString(renderToHtml(<Template />), "text/html").querySelector("iframe")!.getAttribute("src")).toBe(PLAYERS[type] + encoded);
+  });
+
+  it("stays as it is where it's one the editor writes (a Vimeo one with its hash too)", () => {
+    for (const [type, videoId] of [["youtube", "dQw4w9WgXcQ"], ["youtube", "a.b_c%20-d"], ["vimeo", "76979871"], ["vimeo", "76979871/abcdef1234"]]) {
+      const element = <Page><Row><Column><Video video={{ type, videoId, thumbnail: "" }} /></Column></Row></Page>;
+      expect(block(renderToJson(element)).videoId).toBe(videoId);
+      expect(renderToHtml(element)).toContain(`src="${PLAYERS[type as keyof typeof PLAYERS]}${videoId}"`);
+      // (As its id, or in the `videoUrl` it's from.)
+      expect(designToElements(designOf(type, videoId)).code).toMatch(new RegExp(`["/]${videoId.replace(/[.%/]/g, "\\$&")}"`));
+    }
+  });
+});
+
+describe("values that aren't strings, as data gives them (an array from a JSON body, an object with toString, a number)", () => {
+  const SHAPES: Record<string, (v: string) => unknown> = { array: (v) => [v], "object with toString": (v) => ({ toString: () => v }) };
+  const NOT_TEXT: Record<string, (v: unknown) => React.ReactElement> = {
+    "Button target": (v) => <Row><Column><Button href="https://example.com" target={v as never}>Go</Button></Column></Row>,
+    "Menu item target": (v) => <Row><Column><Menu items={[{ text: "Home", href: "https://example.com", target: v as never }]} /></Column></Row>,
+    "Menu item text": (v) => <Row><Column><Menu items={[{ text: v as never, href: "https://example.com" }]} /></Column></Row>,
+    "Button link": (v) => <Row><Column><Button href={v as never}>Go</Button></Column></Row>,
+    "Image link": (v) => <Row><Column><Image src="https://example.com/a.png" width="100px" alt="x" href={v as never} /></Column></Row>,
+    "Menu link": (v) => <Row><Column><Menu items={[{ text: "Home", href: v as never }]} /></Column></Row>,
+    "Social link": (v) => <Row><Column><Social icons={[{ name: "Twitter", url: v as never }]} /></Column></Row>,
+    "Social name": (v) => <Row><Column><Social icons={[{ name: v as never, url: "https://twitter.com/x" }]} /></Column></Row>,
+    "Video id": (v) => <Row><Column><Video video={{ type: "youtube", videoId: v as never, thumbnail: "" }} /></Column></Row>,
+  };
+  const cases = Object.entries(ROOTS).flatMap(([mode, Root]) => Object.keys(NOT_TEXT).map((name) => [mode, name, Root] as const));
+
+  it.each(cases)("%s: a %s can't add markup", (_, name, Root) => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    // (A page's or a document's Menu renders its text as React does: an object that isn't an element fails, as there.)
+    const html = (element: React.ReactElement) => {
+      try {
+        return renderToHtml(element);
+      } catch (error) {
+        if (Root !== Email && name === "Menu item text" && /Objects are not valid as a React child/.test(String(error))) return "";
+        throw error;
+      }
+    };
+    try {
+      for (const [shape, make] of Object.entries(SHAPES)) {
+        for (const payload of PAYLOADS) expect(injected(html(<Root>{NOT_TEXT[name](make(payload))}</Root>)), `${shape} ${payload}`).toEqual([]);
+      }
+      // A number holds no markup: it renders.
+      expect(renderToHtml(<Root>{NOT_TEXT[name](5)}</Root>)).toContain("<");
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("a content prop given as null (nullable data) is no content, as in 0.2.1: not the block's placeholder, with <Tailwind> too", async () => {
+    const blocks = (
+      <Row>
+        <Column>
+          <Html html={null as never} />
+          <Heading text={null as never} />
+          <Button text={null as never} href="https://example.com" />
+        </Column>
+      </Row>
+    );
+    const placeholders = /Hello, world!|>\s*Heading\s*<|>\s*Button\s*<|HEADING/;
+    for (const Root of Object.values(ROOTS)) {
+      const template = <Root>{blocks}</Root>;
+      const tw = await loadTailwind();
+      for (const html of [renderToHtml(template), renderToHtml(<Tailwind tw={tw}>{template}</Tailwind>), renderToPlainText(template)]) expect(html).not.toMatch(placeholders);
+      expect(renderToJson(template).body.rows[0].columns[0].contents.map((c: any) => c.values.html ?? c.values.text ?? null)).toEqual([null, null, null]);
+    }
+  });
+
+  it("a link's target that isn't a string is a new tab (`_blank`), in the HTML and the design, and a Button's is said", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      for (const target of [["_self"], { toString: () => "_self" }, 5]) {
+        const targets = (html: string) => Array.from(new DOMParser().parseFromString(html, "text/html").querySelectorAll("a")).map((a) => a.getAttribute("target"));
+        expect(targets(renderToHtml(<Email><Row><Column><Button href="https://example.com" target={target as never}>Go</Button></Column></Row></Email>)), String(target)).toEqual(["_blank"]);
+        expect(targets(renderToHtml(<Email><Row><Column><Menu items={[{ text: "Home", href: "https://example.com", target: target as never }]} /></Column></Row></Email>)), String(target)).toEqual(["_blank"]);
+        const design = renderToJson(<Email><Row><Column><Button href="https://example.com" target={target as never}>Go</Button></Column></Row></Email>);
+        expect(design.body.rows[0].columns[0].contents[0].values.href).toEqual({ name: "web", values: { href: "https://example.com", target: "_blank" } });
+      }
+      expect(warn).toHaveBeenCalledWith("[Unlayer] Button's target isn't text, so the link opens in a new tab (_blank).");
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
+
+describe("a link's `javascript:` URL, as data gives it", () => {
+  const BLOCKED = "javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')";
+  // Each block's link as a template or a design gives it (a prop, the link's storage shape, `values`), with a URL as
+  // React 19 tells a `javascript:` one (controls and spaces before it, tabs and line breaks in it, any case).
+  const LINKS: Record<string, (url: string) => React.ReactElement> = {
+    "Button href": (url) => <Button href={url}>Go</Button>,
+    "Button href, same tab": (url) => <Button href={url} target="_self">Go</Button>,
+    "Button link's storage shape": (url) => <Button href={{ name: "web", values: { href: url, target: "_self" } } as never}>Go</Button>,
+    "Button values": (url) => <Button values={{ href: url } as never}>Go</Button>,
+    "Button link's attrs": (url) => <Button href={{ name: "web", attrs: { href: url } } as never}>Go</Button>,
+    "Image action": (url) => <Image src="https://example.com/a.png" width="100px" alt="x" action={url as never} />,
+    "Menu item": (url) => <Menu items={[{ text: "Shop", href: url, target: "_self" }]} />,
+    "Menu values": (url) => <Menu values={{ menu: { items: [{ key: "1", text: "Shop", link: { name: "web", values: { href: url, target: "_self" } } }] } } as never} />,
+    "Menu values' attrs": (url) => <Menu values={{ menu: { items: [{ key: "1", text: "Shop", link: { name: "web", attrs: { href: url } } }] } } as never} />,
+    "Menu values' render shape": (url) => <Menu values={{ menu: { items: [{ key: "1", text: "Shop", link: { url: "", customAttrs: { href: url } } }] } } as never} />,
+    "Social icon": (url) => <Social icons={[{ name: "Facebook", url }]} />,
+    "Video link": (url) => <Video video={{ url, type: "youtube", videoId: "abc", thumbnail: "https://img.youtube.com/vi/abc/0.jpg" }} />,
+    "Video values": (url) => <Video values={{ video: { url, type: "youtube", videoId: "abc", thumbnail: "https://img.youtube.com/vi/abc/0.jpg" } }} />,
+    "Link": (url) => <Link href={url}>Read</Link>,
+    "Heading's inline link": (url) => <Heading>Read <a href={url}>this</a></Heading>,
+    "Paragraph's inline link": (url) => <Paragraph>Read <a href={url}>this</a></Paragraph>,
+  };
+  // And written with character references, which the exporters write as they are, and a browser decodes: a numeric one, a
+  // hex one, and named ones (`&colon;`, `&Tab;`, `&NewLine;`, in any case and without their `;`).
+  const URLS = ["javascript:alert(1)", " \u0001JavaScript:alert(1)", "java\tscr\nipt:alert(1)", "&#106;avascript:alert(1)", "&#x6A;avascript:alert(1)", "javascript&colon;alert(1)", "java&Tab;script:alert(1)", "java&NewLine;script&COLON;alert(1)", "&#0000106avascript:alert(1)"];
+  /** Each link's and image's URL in the HTML, as a browser reads it. */
+  const urls = (html: string) => Array.from(new DOMParser().parseFromString(html, "text/html").querySelectorAll("a[href], img[src]")).map((e) => e.getAttribute(e.tagName === "A" ? "href" : "src")!);
+  /** A URL that runs code: `javascript:` as a browser reads a URL (controls and spaces before, tabs and line breaks dropped). */
+  const runs = (url: string) => /^javascript:/i.test(url.replace(/^[\u0000-\u0020]+/, "").replace(/[\t\n\r]/g, "")) && !url.startsWith(BLOCKED);
+
+  it.each(Object.entries(ROOTS).flatMap(([mode, Root]) => Object.keys(LINKS).map((name) => [mode, name, Root] as const)))("%s: a %s runs nothing (0.2.1 wrote some as given)", (_, name, Root) => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      for (const url of URLS) {
+        const template = <Root><Row><Column>{LINKS[name](url)}</Column></Row></Root>;
+        expect([url, urls(renderToHtml(template)).filter(runs)]).toEqual([url, []]);
+        // In the design too: a link the editor opens and exports is the URL that throws.
+        if (!/inline|^Link$/.test(name)) expect([url, JSON.stringify(renderToJson(template)).includes("React has blocked a javascript: URL")]).toEqual([url, true]);
+      }
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("leaves a URL that isn't one as it is, its character references too", () => {
+    for (const url of ["https://example.com/?a=1&b=2", "https://example.com/?a=1&amp;b=2&copy=3", "https://example.com/&#106;avascript", "mailto:a@b.test?subject=a&body=b"]) {
+      const design = renderToJson(<Email><Row><Column><Button href={url}>Go</Button></Column></Row></Email>);
+      expect(design.body.rows[0].columns[0].contents[0].values.href.values.href).toBe(url);
+    }
+  });
+
+  it("is written as react-dom 19 writes it, a URL that throws, where a Button's link would run", () => {
+    const html = renderToHtml(<Page><Row><Column><Button href="javascript:alert(1)" target="_self">Go</Button></Column></Row></Page>);
+    expect(urls(html)).toEqual([BLOCKED]);
+  });
+});
+
+describe("a Tailwind class from data", () => {
+  // Arbitrary values whose quotes or brackets would end the `style="…"` the exporters write a prop into, or start a tag
+  // (Tailwind reads `_` as a space: a class has none).
+  const CLASSES = (property: string) => [`[${property}:'"><x-pwn></x-pwn>']`, `[${property}:'"_x-pwn="1']`, `[${property}:\\22><x-pwn></x-pwn>]`, `[${property}:'\\3c_x-pwn_\\3e']`, `[${property}:'<x-pwn></x-pwn>']`];
+  const BLOCKS: Record<string, (className: string) => React.ReactElement> = {
+    Paragraph: (className) => <Paragraph className={className}>Hi</Paragraph>,
+    Heading: (className) => <Heading className={className}>Hi</Heading>,
+    Button: (className) => <Button href="https://example.com" className={className}>Go</Button>,
+    Menu: (className) => <Menu className={className} items={[{ text: "Home", href: "https://example.com" }]} />,
+    Divider: (className) => <Divider className={className} />,
+    Image: (className) => <Image className={className} src="https://example.com/a.png" alt="x" />,
+    markup: (className) => <Html html={`<p class="${className.replace(/"/g, "&quot;")}">Hi</p>`} />,
+  };
+  const PROPERTIES = ["color", "background-color", "font-size", "font-family", "padding", "border-color", "width", "text-transform"];
+  let tw: TailwindHandle;
+  beforeAll(async () => {
+    tw = await loadTailwind();
+  });
+
+  it.each(Object.entries(ROOTS))("%s: can't add markup through a prop, an inline style, or the text styles a container passes on", (_, Root) => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      for (const property of PROPERTIES) {
+        for (const className of CLASSES(property)) {
+          for (const [name, block] of Object.entries(BLOCKS)) {
+            const html = renderToHtml(
+              <Tailwind tw={tw}>
+                <Root className={className}>
+                  <Row className={className}>
+                    <Column className={className}>{block(className)}</Column>
+                  </Row>
+                </Root>
+              </Tailwind>
+            );
+            expect(injected(html), `${name} ${className}`).toEqual([]);
+          }
+        }
+      }
+      // Said, as each class no prop can take.
+      expect(warn.mock.calls.map((call) => String(call[0]))).toContainEqual(expect.stringMatching(/^\[Unlayer\] Paragraph ignores `color: '"><x-pwn><\/x-pwn>'` from class `\[color:'"><x-pwn><\/x-pwn>'\]`: it could end the HTML attribute it's written in, start a tag, or end its CSS\.$/));
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("writes no `url()` whose URL isn't a web one or relative (`javascript:`), however it's written, and says so", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    // As the browser reads a style: its references and CSS escapes decoded, its spaces gone.
+    const read = (style: string) => style.replace(/&#(\d+);?/g, (_, n) => String.fromCodePoint(Number(n))).replace(/\\([\da-f]{1,6})\s?|\\(.)/gi, (_, hex, ch) => (hex ? String.fromCodePoint(parseInt(hex, 16)) : ch)).replace(/\s/g, "");
+    const styles = (html: string) => Array.from(new DOMParser().parseFromString(html, "text/html").querySelectorAll("[style]")).map((e) => read(e.getAttribute("style")!));
+    const render = (className: string) =>
+      renderToHtml(
+        <Tailwind tw={tw}>
+          <Email className={className}>
+            <Row className={className}>
+              <Column className={className}>
+                <Paragraph className={className}>Hi</Paragraph>
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+    try {
+      for (const className of ["bg-[url(javascript:alert(1))]", "bg-[url('javascript:alert(1)')]", 'bg-[url("JavaScript:alert(1)")]', "bg-[url(j\\61vascript:alert(1))]", "bg-[u\\72l(javascript:alert(1))]", "[background:url(vbscript:msgbox(1))]", "[background-image:url(data:text/html,x)]", "[list-style-image:url(javascript:alert(1))]"]) {
+        expect([className, styles(render(className)).filter((style) => /url\(["']?(?!https?:|\/)/i.test(style))]).toEqual([className, []]);
+      }
+      expect(warn.mock.calls.map((call) => String(call[0]))).toContain("[Unlayer] Column ignores `background-image: url(javascript:alert(1))` from class `bg-[url(javascript:alert(1))]`: its URL isn't a web one (`http:` or `https:`), a relative one, an inline attachment's (`cid:`), or an image's data URL.");
+      // A web URL, a relative one, an inline attachment's (an email's `cid:`) and an image's data URL, in base64 too, are
+      // kept: a base64 one's `;` is in its URL, which CSS reads to its `)`.
+      for (const url of ["https://example.com/a.png", "/images/a.png", "cid:logo", "data:image/png,x", "data:image/png;base64,iVBORw0KGgo+/A==", "'data:image/gif;base64,R0lGOD'"])
+        expect(styles(render(`bg-[url(${url})]`)).some((style) => style.includes(`url(${url})`)), url).toBe(true);
+      // But only a whole one: a `;` after it, an image of another kind, or a quote it doesn't close ends the declaration.
+      for (const className of ["bg-[url(data:image/png;base64,AAAA);color:red]", "[background:url(data:image/png;base64,AAAA);color:red]", "bg-[url(data:image/svg+xml;base64,AAAA)]", "bg-[url('data:image/png;base64,AAAA)]", "bg-[url(data:image/png;charset=x;base64,AAAA)]"])
+        expect([className, styles(render(className)).filter((style) => /url\(|color:red/.test(style))]).toEqual([className, []]);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  // A template giving one class to the root, a Row and a Column (with a gutter), a Paragraph and markup in its children,
+  // a Button, an Image and an Html block's markup: every place a class is read.
+  const everywhere = (handle: TailwindHandle, className: string) => {
+    const attribute = className.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return renderToHtml(
+      <Tailwind tw={handle}>
+        <Email className={className}>
+          <Row className={`bg-white ${className}`}>
+            <Column className={`bg-zinc-50 ${className}`}>
+              <Paragraph className={className}>Hi <span className={className}>there</span></Paragraph>
+              <Button href="https://example.com" className={className}>Go</Button>
+              <Image src="https://example.com/a.png" alt="x" className={className} />
+            </Column>
+            <Column className="bg-zinc-50 ml-2">
+              <Html html={`<p class="${attribute}">Hi</p>`} />
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+  };
+
+  it("inlines in markup what it can write safely, and leaves out what could end the attribute or run code, and says so", async () => {
+    // Markup's `style` is written escaped, so it takes a value a prop can't: a theme's font in double quotes (Tailwind's
+    // docs' config style), a `url("…")`, a string's `;` (left out in 1894c35, inlined before). Not a CSS escape of a
+    // quote and markup in a font's name (refused as a Paragraph's prop, it was written into a Markdown paragraph's
+    // `style`, `<img …>` and all, escaped), nor a `url(javascript:…)` (refused on a component, inlined in markup).
+    const handle = await loadTailwind({ theme: { extend: { fontFamily: { brand: ['"Brandon\'s Grotesque"', "Arial", "sans-serif"] } } } });
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const markup = (className: string) => {
+      const html = renderToHtml(
+        <Tailwind tw={handle}>
+          <Email>
+            <Row>
+              <Column>
+                <Html html={`<div class="${className.replace(/"/g, "&quot;")}">block</div>`} />
+                <Paragraph>a <span className={className}>inline</span> b</Paragraph>
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+      return [/<div style="([^"]*)">block</.exec(html)?.[1], /<span style="([^"]*)">inline</.exec(html)?.[1]];
+    };
+    try {
+      for (const [className, style] of [
+        ["font-brand", "font-family: &quot;Brandon's Grotesque&quot;, Arial, sans-serif"],
+        ['font-["Open_Sans",sans-serif]', "font-family: 'Open Sans',sans-serif"],
+        ['bg-[url("https://cdn.example.com/hero.png")]', "background-image: url('https://cdn.example.com/hero.png')"],
+        ['[font-feature-settings:"tnum"]', "font-feature-settings: &quot;tnum&quot;"],
+        ["bg-[url('/img/a.png?v=1;2')]", "background-image: url('/img/a.png?v=1;2')"],
+        ["bg-[url('data:image/svg+xml;base64,PHN2Zz4=')]", "background-image: url('data:image/svg+xml;base64,PHN2Zz4=')"],
+      ]) expect([className, ...markup(className)]).toEqual([className, style, style]);
+      for (const className of ["font-['\\22><img_src=x_onerror=alert(1)>']", "bg-[url(javascript:alert(1))]"]) {
+        for (const block of [<Markdown markdown={`<p class="${className}">x</p>\n`} />, <Html html={`<p class="${className}">x</p>`} />, <Paragraph className={className}>x</Paragraph>, <Paragraph>a <span className={className}>x</span></Paragraph>]) {
+          const html = renderToHtml(<Tailwind tw={handle}><Email><Row><Column>{block}</Column></Row></Email></Tailwind>);
+          expect(html).not.toMatch(/onerror|\\22>|javascript:alert/);
+        }
+      }
+      expect(warn.mock.calls.map((call) => String(call[0]))).toContain("[Unlayer] Html ignores `background-image: url(javascript:alert(1))` from class `bg-[url(javascript:alert(1))]` in its markup: it could end the HTML attribute it's written in, start a tag, or end its CSS, or its URL isn't a web one, a relative one, an inline attachment's or an image's.");
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  /** `body` with Tailwind given classes of any length (a class past CLASS_LIMITS isn't: see compile.test.tsx), its reading's own time then measured. */
+  const unlimited = async (body: () => Promise<void> | void) => {
+    const { characters } = CLASS_LIMITS;
+    CLASS_LIMITS.characters = Infinity;
+    try {
+      await body();
+    } finally {
+      CLASS_LIMITS.characters = characters;
+    }
+  };
+
+  /**
+   * Whether Tailwind's own compiler reads a class of this shape in time growing with its size squared: a variant with
+   * an arbitrary value (`min-[…]:`, `max-[…]:`) holding `-`s. Tailwind looks a variant up by each prefix of it up to a
+   * `-` (`variants.has`), each a new string as long as that prefix: 20 KB of `var(--x)` in `min-[…]` took 45 ms, 2 KB
+   * 1.8 ms. A class from data is read with CLASS_LIMITS.characters at most (512), where it's about a short class's
+   * cost (see the test after the one that leaves them out).
+   */
+  const TAILWIND_SQUARED = (head: string, unit: string) => /^(min|max)-\[/.test(head) && unit.includes("-");
+
+  it("costs about ten times as much for ten times as long a class of any short shape, arbitrary variants and values too (random, seeded; Tailwind given classes of any length)", () => unlimited(async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    // A class: what starts it (a utility taking a value, an arbitrary property, value or variant: `[@media(…)]:`,
+    // `max-[…]:`), a unit over and over, and what ends it.
+    const heads = ["", "p-[", "m-[", "mr-[", "px-[", "w-[", "max-w-[", "leading-[", "text-[", "tracking-[", "rounded-[", "border-[", "bg-[url(", "[margin:", "[color:a", "[padding:calc(", "[font-family:", "[@media(", "[@media_screen_and_(", "[@media_(max-width:", "max-[", "min-[", "sm:p-[", "hover:bg-["];
+    const pieces = ["0", "9", "1", ".", "1.5", "_", "__", "-", "+", "*", "(", ")", "px", "rem", "em", "%", "e", "<", ">", "=", ":", ",", "/", "!", "x", "a", "and", "calc(", "var(--x)", "'", '"', "\\", "[", "]", "!important", "\t"];
+    const tails = ["", "]", "x]", "]!", "px]", "x)]", ")]", "]:p-1", "width)]:p-1", "px)]:p-1", ")]:p-1", "x]:p-1", "b]!", ")width)]:p-1"];
+    let seed = 11;
+    const random = (n: number) => ((seed = (Math.imul(seed, 1103515245) + 12345) >>> 0), Math.floor((seed / 2 ** 32) * n));
+    const fill = (head: string, unit: string, tail: string, bytes: number) => head + unit.repeat(Math.ceil(bytes / unit.length)).slice(0, bytes) + tail;
+    // And the shapes a regex read in time growing with their size squared, or worse: a number from where it could
+    // start in a media query, an arbitrary value's number, the spaces before an `!important`.
+    const shapes: string[][] = [["[@media(", "9", "width)]:p-1"], ["[@media_(max-width:", ".", ")]:p-1"], ["[color:a", "_", "b]!"], ["leading-[", "0", "x]"], ["w-[", "0", "x]"], ["m-[", "0", "x]"], ["mr-[", "0", "x]"], ["px-[", "0", "x]"], ["[margin:", "0", "x]"], ["[padding:calc(", "0", "x)]"]];
+    for (let run = 0; run < 120; run++) {
+      let unit = "";
+      for (let i = 0, n = 1 + random(4); i < n; i++) unit += pieces[random(pieces.length)];
+      shapes.push([heads[random(heads.length)], unit, tails[random(tails.length)]]);
+    }
+    const slow: string[] = [];
+    try {
+      for (const [run, [head, unit, tail]] of shapes.entries()) {
+        // Not a variant with a value whose `-`s Tailwind reads in time growing with the class's size squared (see
+        // TAILWIND_SQUARED): a class is read with CLASS_LIMITS.characters at most, which bounds it.
+        if (TAILWIND_SQUARED(head, unit)) continue;
+        // (A fresh handle for each: one compiles each new class with the ones it had, which grow. A size timed again,
+        // as one that looks slow is, is timed on another: a handle reads a class it built from what it built.)
+        const handle = await loadTailwind({ theme: { extend: { colors: { [`run${run}`]: "#000000" } } } });
+        everywhere(handle, "p-2");
+        const timed = new Set<number>();
+        let again = 0;
+        const time = async (bytes: number) => {
+          const on = timed.has(bytes) ? await loadTailwind({ theme: { extend: { colors: { [`run${run}-again${again++}`]: "#000000" } } } }) : handle;
+          if (on !== handle) everywhere(on, "p-2");
+          timed.add(bytes);
+          const start = performance.now();
+          everywhere(on, fill(head, unit, tail, bytes));
+          return performance.now() - start;
+        };
+        const { small, large, grows } = await growth(time, [2048, 20480], { ratio: 20, floor: 100 });
+        if (grows) slow.push(`${JSON.stringify([head, unit, tail])}: ${small.toFixed(1)} ms for 2 KB, ${large.toFixed(1)} ms for 20 KB`);
+      }
+    } finally {
+      warn.mockRestore();
+    }
+    expect(slow).toEqual([]);
+  }), 120_000);
+
+  it("reads a class at CLASS_LIMITS of each shape Tailwind reads in time growing with its size squared at about a short class's cost", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const { characters } = CLASS_LIMITS;
+      for (const [head, unit, tail] of [["min-[", "var(--x)", "x]:p-1"], ["max-[", "var(--x)", "x]:p-1"], ["min-[", "-", "px]:p-1"], ["max-[", "a-b", "]:p-1"]]) {
+        expect(TAILWIND_SQUARED(head, unit)).toBe(true);
+        const className = head + unit.repeat(Math.ceil(characters / unit.length)).slice(0, characters - head.length - tail.length) + tail;
+        expect(className).toHaveLength(characters);
+        // (Timed again on a fresh handle: one reads a class it built from what it built.)
+        let handles = 0;
+        const fresh = async () => {
+          const handle = await loadTailwind({ theme: { extend: { colors: { [`limit${head}${unit}${handles++}`]: "#000000" } } } });
+          everywhere(handle, "p-2");
+          return handle;
+        };
+        const first = await fresh();
+        const timing = await within(100, () => everywhere(first, className), { before: fresh, again: (handle) => everywhere(handle, className) });
+        expect([className.slice(0, 20), inTime(timing)]).toEqual([className.slice(0, 20), true]);
+      }
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("reads a media query of many parts, each with two widths, in time linear in their number (its regex was exponential in it)", () => unlimited(async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      // (Each timed on a fresh handle: one reads a class it built from what it built.)
+      let handles = 0;
+      const time = async (parts: number) => {
+        const handle = await loadTailwind({ theme: { extend: { colors: { [`media${handles++}`]: "#000000" } } } });
+        const start = performance.now();
+        everywhere(handle, `[@media${"(width<1px_or_width>2px)and".repeat(parts)}x]:p-1`);
+        everywhere(handle, `[@media${"(widthwidth)and".repeat(parts)}x]:p-1`);
+        return performance.now() - start;
+      };
+      await time(4);
+      const { small, large, grows } = await growth(time, [12, 24], { ratio: 20, floor: 100 });
+      expect(grows, `${small.toFixed(1)} ms for 12 parts, ${large.toFixed(1)} ms for 24`).toBe(false);
+    } finally {
+      warn.mockRestore();
+    }
+  }));
+
+  it("keeps a font family's names in double quotes (`font-[\"Open_Sans\"]`), in single ones", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const design = renderToJson(<Tailwind tw={tw}><Email><Row><Column><Paragraph className={'font-["Open_Sans"] [color:#123456]'}>Hi</Paragraph></Column></Row></Email></Tailwind>);
+      expect(design.body.rows[0].columns[0].contents[0].values).toMatchObject({ fontFamily: { value: "'Open Sans'" }, color: "#123456" });
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
+
+describe("a Table's cells", () => {
+  // HTML, as the editor's table holds them: written as given, so data put in them is escaped first (see the README).
+  it.each(Object.entries(ROOTS))("%s: are written as given, markup and all", (_, Root) => {
+    const html = renderToHtml(<Root><Row><Column><Table headers={["<b>Plan</b>", "A &amp; B"]} data={[["<i>Pro</i>", "<x-pwn></x-pwn>"]]} /></Column></Row></Root>);
+    expect([html.includes("<b>Plan</b>"), html.includes("A &amp; B"), html.includes("<i>Pro</i>"), injected(html)]).toEqual([true, true, true, ["element"]]);
+  });
+});
+
 describe("HTML a sanitizer returned", () => {
   // As DOMPurify on jsdom writes it: a "<" in an attribute stays as it is. Inert as given; nothing Elements does
   // afterwards (taking out its own render markers) may move where an attribute ends.
diff --git a/packages/react/src/regression/node-exit.test.ts b/packages/react/src/regression/node-exit.test.ts
index 9e9807f3..d883e37e 100644
--- a/packages/react/src/regression/node-exit.test.ts
+++ b/packages/react/src/regression/node-exit.test.ts
@@ -11,18 +11,21 @@ import { pathToFileURL } from "node:url";
  * The built package in a Node script of its own: it must exit when it's done, on React 18 and 19, imported as a
  * module and required. React 19's browser server build opens a MessageChannel when it loads, which kept Node
  * running forever. Each script also renders Elements inside an app's own server render (renderToJson in a
- * component, then a hook): in react-dom/server's renderToString, Elements loads another module of react-dom's then
- * (see src/utils/server-renderer.ts), which must not keep Node running either.
+ * component, then a hook), which must not keep Node running either.
  */
 const root = path.resolve(import.meta.dirname, "../..");
 // esbuild through tsup, which depends on it (a clean install links no esbuild binary into this package).
 const esbuild = createRequire(createRequire(path.join(root, "package.json")).resolve("tsup/package.json"))("esbuild") as typeof import("esbuild");
 const dist = path.join(root, "dist");
-const reacts = {
-  "React 18": [path.join(root, "node_modules/react"), path.join(root, "node_modules/react-dom")],
-  // React 19, from the migration CLI's tests (aliases there).
-  "React 19": [path.join(root, "../migrate/node_modules/react19"), path.join(root, "../migrate/node_modules/react-dom19")],
-};
+const versionOf = (dir: string): string => JSON.parse(fs.readFileSync(path.join(dir, "package.json"), "utf8")).version;
+/** `React.version` of the React in `dir`: its package's (React 18.0.0's has its build after it). */
+const reactVersion = (dir: string) => expect.stringMatching(new RegExp(`^${versionOf(dir).replace(/\./g, "\\.")}(-|$)`));
+const is19 = (dir: string) => Number.parseInt(versionOf(dir)) >= 19;
+// This package's React (18 here; CI runs the suite on others too), and React 19 from the migration CLI's tests (its
+// aliases): two installs.
+const own = [path.join(root, "node_modules/react"), path.join(root, "node_modules/react-dom")];
+const other = [path.join(root, "../migrate/node_modules/react19"), path.join(root, "../migrate/node_modules/react-dom19")];
+const reacts: Record<string, string[]> = { [`React ${versionOf(own[0])}`]: own, [`React ${versionOf(other[0])}, another install`]: other };
 
 const script = (format: "module" | "commonjs", noChannel = false, react19 = false) => {
   // No MessageChannel, and on React 19 no TextEncoder (Jest 30's jsdom environment): React 19's browser build throws
@@ -37,8 +40,16 @@ const email = h(E.Email, null, h(E.Row, null, h(E.Column, null, h(E.Paragraph, n
 const html = E.renderToHtml(email);
 // In an app's own render: the design worked out in a component, then a hook.
 const Page = () => { const rows = React.useMemo(() => E.renderToJson(email).body.rows.length, []); const [open] = React.useState(false); return h("pre", null, rows + " rows, open=" + open); };
-// In react-dom/server's renderToString, Elements loads another module of react-dom's: Node still exits.
-console.log(JSON.stringify({ react: React.version, html: html.includes("Hi there"), page: renderToString(h(Page)) }));
+// Inside react-dom/server's renderToString: Node still exits.
+const page = renderToString(h(Page));
+// A page that failed inside its tenant's provider (react-dom left the value in the context), then an email that reads
+// the context without providing it: its default, as react-dom's static renderer is asked to put it back first.
+const Tenant = React.createContext("default");
+const Fails = () => { throw new Error("the page failed"); };
+try { renderToString(h(Tenant.Provider, { value: "TenantA" }, h(Fails))); } catch {}
+const Footer = () => h(E.Paragraph, null, "brand=" + React.useContext(Tenant));
+const brand = /brand=(\\w+)/.exec(E.renderToPlainText(h(E.Email, null, h(E.Row, null, h(E.Column, null, h(Footer))))))[1];
+console.log(JSON.stringify({ react: React.version, html: html.includes("Hi there"), page, brand }));
 `;
 };
 
@@ -50,6 +61,7 @@ function project(react: string, reactDom: string, type: "module" | "commonjs", d
   const elements = path.join(modules, "@unlayer/react-elements");
   fs.mkdirSync(elements, { recursive: true });
   fs.cpSync(dist, path.join(elements, "dist"), { recursive: true });
+  fs.cpSync(path.join(root, "fizz-cleanup"), path.join(elements, "fizz-cleanup"), { recursive: true });
   fs.copyFileSync(path.join(root, "package.json"), path.join(elements, "package.json"));
   for (const dependency of ["exporters", "types"]) fs.symlinkSync(fs.realpathSync(path.join(root, "node_modules/@unlayer", dependency)), path.join(modules, "@unlayer", dependency), "dir");
   fs.writeFileSync(path.join(dir, "package.json"), JSON.stringify({ type }));
@@ -59,9 +71,12 @@ function project(react: string, reactDom: string, type: "module" | "commonjs", d
 describe("importing the built package", () => {
   // Next.js 14's server layer can't render when a module loads, an edge runtime has no MessageChannel, and Jest's
   // jsdom no TextEncoder: importing Elements renders nothing, and loads no react-dom module but react-dom/server
-  // (react-dom's browser build needs both when it loads), as 0.1.22.
+  // (the exporters', for web pages; react-dom's browser build needs both when it loads), as 0.1.22. Rendering an
+  // email calls none of react-dom's renderers: Elements renders templates itself. One that reads a context it doesn't
+  // provide has the app's react-dom/server render nothing, once a render, before it reads the default (see the
+  // engine's `defaultOf`).
   for (const [name, [react, reactDom]] of Object.entries(reacts)) {
-    it(`renders nothing and loads only react-dom/server (${name})`, () => {
+    it(`renders nothing and loads only react-dom/server, and renders an email without it (${name})`, () => {
       expect(fs.existsSync(path.join(dist, "index.cjs")), "build the package first (pnpm build)").toBe(true);
       const dir = project(react, reactDom, "commonjs");
       try {
@@ -76,12 +91,16 @@ const atImport = calls;
 const reactDom = [...new Set(Object.keys(require.cache).filter((file) => /react-dom[\\/]/.test(file)).map((file) => file.split(/react-dom[\\/]/).pop()).filter((file) => file.startsWith("server")))];
 const h = React.createElement;
 const html = E.renderToHtml(h(E.Email, null, h(E.Row, null, h(E.Column, null, h(E.Paragraph, null, "Hi there")))));
-console.log(JSON.stringify({ atImport, reactDom, rendered: calls > 0 && html.includes("Hi there") }));
+const reactDomRenders = calls;
+const Tenant = React.createContext("default");
+const Footer = () => h(E.Paragraph, null, React.useContext(Tenant) + " " + React.useContext(Tenant));
+const text = E.renderToPlainText(h(E.Email, null, h(E.Row, null, h(E.Column, null, h(Footer))))).trim();
+console.log(JSON.stringify({ atImport, reactDom, rendered: html.includes("Hi there"), reactDomRenders, text, contextRenders: calls - reactDomRenders }));
 `
         );
         const run = spawnSync(process.execPath, ["import.js"], { cwd: dir, encoding: "utf8", timeout: 20_000 });
         expect(run.status, run.stderr).toBe(0);
-        expect(JSON.parse(run.stdout.trim().split("\n").pop()!)).toEqual({ atImport: 0, reactDom: ["server.node.js"], rendered: true });
+        expect(JSON.parse(run.stdout.trim().split("\n").pop()!)).toEqual({ atImport: 0, reactDom: ["server.node.js"], rendered: true, reactDomRenders: 0, text: "default default", contextRenders: 1 });
       } finally {
         fs.rmSync(dir, { recursive: true, force: true });
       }
@@ -93,8 +112,8 @@ describe("an app that's a module, started from another folder than its own", ()
   // The second react-dom module was looked for from the folder Node was started in: from a folder whose React is 19,
   // a React 18 app loaded React 19's browser build (rejected, but its MessageChannel kept Node running), and from one
   // with no React, none was found (a design worked out in `useMemo`, then a hook, failed). 0.1.22 did neither.
-  const [react18, reactDom18] = reacts["React 18"];
-  const [react19, reactDom19] = reacts["React 19"];
+  const [react18, reactDom18] = own;
+  const [react19, reactDom19] = other;
   const page = `import React from "react";
 import { renderToString } from "react-dom/server";
 import * as E from "@unlayer/react-elements";
@@ -116,7 +135,7 @@ console.log(JSON.stringify({ react: React.version, page: renderToString(h(Page))
       fs.writeFileSync(path.join(app, "body.js"), page.replace(/const Page = .*\n/, 'const Page = () => h("pre", { dangerouslySetInnerHTML: { __html: "1 rows, open=false, " + E.renderToHtml(email).includes("Hi there") } });\n'));
       const body = spawnSync(process.execPath, [path.join(app, "body.js")], { cwd: parent, encoding: "utf8", timeout: 20_000 });
       expect(body.error, "still running after 20s: something keeps Node alive").toBeUndefined();
-      expect(JSON.parse(body.stdout.trim().split("\n").pop()!)).toEqual({ react: "18.3.1", page: "<pre>1 rows, open=false, true</pre>" });
+      expect(JSON.parse(body.stdout.trim().split("\n").pop()!)).toEqual({ react: reactVersion(react18), page: "<pre>1 rows, open=false, true</pre>" });
       // Run as its folder (its package's `main`), through a link to it elsewhere, imported by a script elsewhere, and
       // from `node -e`: Node's script isn't the app's, but Elements is where it is.
       fs.writeFileSync(path.join(app, "package.json"), JSON.stringify({ type: "module", main: "page.js" }));
@@ -133,7 +152,7 @@ console.log(JSON.stringify({ react: React.version, page: renderToString(h(Page))
         const run = spawnSync(process.execPath, args, { cwd, encoding: "utf8", timeout: 20_000 });
         expect(run.error, `still running after 20s: node ${args.join(" ")}`).toBeUndefined();
         expect(run.status, `node ${args.join(" ")}: ${run.stderr}`).toBe(0);
-        expect(JSON.parse(run.stdout.trim().split("\n").pop()!)).toEqual({ react: "18.3.1", page: "<pre>1 rows, open=false, true</pre>" });
+        expect(JSON.parse(run.stdout.trim().split("\n").pop()!)).toEqual({ react: reactVersion(react18), page: "<pre>1 rows, open=false, true</pre>" });
       }
     } finally {
       fs.rmSync(parent, { recursive: true, force: true });
@@ -143,10 +162,11 @@ console.log(JSON.stringify({ react: React.version, page: renderToString(h(Page))
 });
 
 describe("a template with a list written without keys (`items.map(…)`)", () => {
-  // React 19 warns about an element of such a list wherever it's rendered, on every render. 0.1.22 never rendered the
-  // template's lists, so it said nothing: the collecting render places copies of them, with the keys a list gives.
+  // React warns about an element of such a list in its development build: React 18 where the list is made (the
+  // template's own code), React 19 where it's rendered. Elements renders the template, and says so as React 19 does,
+  // once for each component a list is in, not on every render.
   for (const [name, [react, reactDom]] of Object.entries(reacts)) {
-    it(`renders without React's key warning, as 0.1.22 did (${name})`, () => {
+    it(`warns once per component, as React does (${name})`, () => {
       expect(fs.existsSync(path.join(dist, "index.cjs")), "build the package first (pnpm build)").toBe(true);
       const dir = project(react, reactDom, "commonjs");
       try {
@@ -166,14 +186,111 @@ const templates = [
 ];
 // React 18 warns once, where the list is made (the template's own code, as with 0.1.22): only renders are counted.
 let warnings = 0;
-console.error = (message) => { if (/unique "key"/.test(String(message))) warnings++; };
+console.error = (message) => { if (String(message).startsWith("[Unlayer]") && /unique "key"/.test(String(message))) warnings++; };
 for (const template of templates) for (const render of [E.renderToHtml, E.renderToPlainText, E.renderToJson, E.renderToHtml]) render(template);
 console.log(JSON.stringify({ warnings }));
 `
         );
         const run = spawnSync(process.execPath, ["keys.js"], { cwd: dir, encoding: "utf8", timeout: 20_000 });
         expect(run.status, run.stderr).toBe(0);
-        expect(JSON.parse(run.stdout.trim().split("\n").pop()!)).toEqual({ warnings: 0 });
+        // Lists in a Column, the root and a Row: one each, however many renders, on React 19 (React 18 said it before);
+        // none in React's production build.
+        expect(JSON.parse(run.stdout.trim().split("\n").pop()!)).toEqual({ warnings: is19(react) && process.env.NODE_ENV !== "production" ? 3 : 0 });
+      } finally {
+        fs.rmSync(dir, { recursive: true, force: true });
+      }
+    }, 30_000);
+  }
+});
+
+describe("the module and CommonJS builds loaded together", () => {
+  // tsx, and @unlayer/migrate, load a template's `@unlayer/react-elements` as one build and render with the other: a
+  // template of one copy's components, rendered by the other copy's renderers. The copy whose renderer was called
+  // renders it all, as one copy alone does: what fails is left out of the HTML, the plain text and the design alike,
+  // listed, and each message said once a render. (The other copy's root rendered the HTML with its own scope: a block
+  // left out of the HTML stayed in the design, `omitted` lacked it, messages were said twice, and the async renderers
+  // failed for an async component; a <Tailwind> didn't see the other copy's Columns, so a Row's padding classes stayed
+  // around the row.)
+  const script = `import { createRequire } from "node:module";
+import React from "react";
+import * as esm from "@unlayer/react-elements";
+import * as esmAsync from "@unlayer/react-elements/async";
+import * as esmTailwind from "@unlayer/react-elements/tailwind";
+const require = createRequire(import.meta.url);
+const copies = {
+  esm: { ...esm, async: esmAsync, tailwind: esmTailwind },
+  cjs: { ...require("@unlayer/react-elements"), async: require("@unlayer/react-elements/async"), tailwind: require("@unlayer/react-elements/tailwind") },
+};
+for (const E of Object.values(copies)) E.tw = await E.tailwind.loadTailwind();
+const h = React.createElement;
+const later = (value) => new Promise((resolve) => setTimeout(() => resolve(value), 5));
+const Broken = () => { throw new Error("no data"); };
+const tools = {};
+for (const [name, E] of Object.entries(copies)) tools[name] = E.registerElementsTool({ name: "failing_tool", values: {}, renderer: { exporters: { email: () => { throw new Error("exporter down"); } } } });
+// A component that throws, a Row whose Columns don't fit its layout, a block whose exporter fails, a Row whose
+// padding is said, and (for the async renderers) an async component.
+const template = (from, late) => {
+  const E = copies[from];
+  const Late = async () => h(E.Paragraph, null, await later("Late"));
+  return h(E.Email, null,
+    h(E.Row, null, h(E.Column, null, h(E.Paragraph, null, "First"), h(Broken), h(E.Paragraph, null, "Second"))),
+    h(E.Row, { layout: E.ColumnLayouts.TwoEqual }, h(E.Column, null, h(E.Paragraph, null, "Lonely"))),
+    h(E.Row, { padding: "10px", columnsBackgroundColor: "#ffffff" }, h(E.Column, null, h(tools[from]), h(E.Paragraph, null, "Third"), late ? h(Late) : null)));
+};
+// A <Tailwind>: a Row's padding classes go to its Columns, text classes to the text blocks. (With a config, the async
+// renderers compile it with its copy's compiler, and give its rewrite what they compiled.)
+const styled = (from, config) => {
+  const E = copies[from];
+  return h(E.tailwind.Tailwind, config ? { config } : { tw: E.tw }, h(E.Email, null, h(E.Row, { className: "p-4" }, h(E.Column, null, h(E.Paragraph, { className: "text-red-500" }, "Styled")))));
+};
+const words = (html) => html.match(/First|Second|Third|Lonely|Late|failing_tool/g) ?? [];
+const said = [];
+console.error = console.warn = (message) => void said.push(String(message));
+const run = async (render) => { said.length = 0; const value = await render(); return { value, said: [...said] }; };
+const omit = { onError: "omit" };
+const out = {};
+for (const [by, from] of [["esm", "esm"], ["esm", "cjs"], ["cjs", "esm"], ["cjs", "cjs"]]) {
+  const R = copies[by];
+  out[by + " renders " + from] = {
+    html: await run(() => words(R.renderToHtml(template(from), omit))),
+    text: await run(() => words(R.renderToPlainText(template(from), omit))),
+    design: await run(() => words(JSON.stringify(R.renderToJson(template(from), omit)))),
+    omitted: await run(() => R.renderToHtmlParts(template(from), omit).omitted.map((error) => error.position)),
+    asyncHtml: await run(async () => words(await R.async.renderToHtml(template(from, true), omit))),
+    asyncDesign: await run(async () => words(JSON.stringify(await R.async.renderToJson(template(from, true), omit)))),
+    asyncOmitted: await run(async () => (await R.async.renderToHtmlParts(template(from, true), omit)).omitted.map((error) => error.position)),
+    tailwind: await run(() => ({ html: R.renderToHtml(styled(from)), column: R.renderToJson(styled(from)).body.rows[0].columns[0].values.padding })),
+    asyncTailwind: await run(async () => ({ red: (await R.async.renderToHtml(styled(from, {}))).includes("color: #fb2c36"), column: (await R.async.renderToJson(styled(from, {}))).body.rows[0].columns[0].values.padding })),
+  };
+}
+process.stdout.write(JSON.stringify(out) + "\\n");
+`;
+  for (const [name, [react, reactDom]] of Object.entries(reacts)) {
+    it(`render a template of either build's components as one build alone does (${name})`, () => {
+      expect(fs.existsSync(path.join(dist, "async.cjs")), "build the package first (pnpm build)").toBe(true);
+      const dir = project(react, reactDom, "module");
+      try {
+        fs.symlinkSync(fs.realpathSync(path.join(root, "node_modules/tailwindcss")), path.join(dir, "node_modules/tailwindcss"), "dir");
+        fs.writeFileSync(path.join(dir, "both.js"), script);
+        const run = spawnSync(process.execPath, ["both.js"], { cwd: dir, encoding: "utf8", timeout: 20_000 });
+        expect(run.status, run.stderr).toBe(0);
+        const out = JSON.parse(run.stdout.trim().split("\n").pop()!);
+        const one = out["esm renders esm"];
+        expect(one.html.value).toEqual(["First", "Second", "Third"]);
+        expect(one.design.value).toEqual(["First", "Second", "Third"]);
+        expect(one.asyncHtml.value).toEqual(["First", "Second", "Third", "Late"]);
+        expect(one.omitted.value).toEqual(["Row 1 › Column 1 › Broken", "Row 2", "Row 3 › Column 1 › failing_tool"]);
+        expect(one.tailwind.value.column).toBe("16px");
+        expect(one.asyncTailwind.value).toEqual({ red: true, column: "16px" });
+        // Each part left out said once (and the Row's padding), in every render.
+        for (const [render, { said }] of Object.entries(one) as Array<[string, { said: string[] }]>) {
+          if (render === "tailwind" || render === "asyncTailwind") continue;
+          expect(said).toHaveLength(4);
+          expect(new Set(said).size).toBe(4);
+        }
+        expect(out["esm renders cjs"]).toEqual(one);
+        expect(out["cjs renders esm"]).toEqual(one);
+        expect(out["cjs renders cjs"]).toEqual(one);
       } finally {
         fs.rmSync(dir, { recursive: true, force: true });
       }
@@ -184,8 +301,9 @@ console.log(JSON.stringify({ warnings }));
 describe("the built package's own requires", () => {
   // A bundler warns on a require of a path worked out when it runs (and the migration CLI can't follow one): the
   // build requires modules by name only. (The CommonJS build once wrote `import.meta.url` as `require('u' + 'rl')`.)
+  const entries = ["index", "tailwind", "font", "code", "markdown", "async"].flatMap((entry) => [`${entry}.js`, `${entry}.cjs`]);
   it("name the modules they load", () => {
-    for (const file of ["index.js", "index.cjs"]) {
+    for (const file of entries) {
       const code = fs.readFileSync(path.join(dist, file), "utf8");
       expect(code.match(/\brequire\((?!(?:"[^"]*"|'[^']*')\))[^)]*\)/g) ?? [], file).toEqual([]);
     }
@@ -193,14 +311,303 @@ describe("the built package's own requires", () => {
 
   // webpack 4 (Create React App 4, Storybook 6), which 0.1.22 built with, can't parse `import.meta`.
   it("use no syntax webpack 4 can't parse (import.meta)", () => {
-    for (const file of ["index.js", "index.cjs"]) expect(fs.readFileSync(path.join(dist, file), "utf8"), file).not.toMatch(/import\.meta/);
+    for (const file of entries) expect(fs.readFileSync(path.join(dist, file), "utf8"), file).not.toMatch(/import\.meta/);
+  });
+});
+
+describe("the package's fizz-cleanup export", () => {
+  // Node's module imports react-dom/server (which Elements loads in Node anyway), so that its static renderer puts back
+  // what one of its renders left in a context (see the engine's `defaultOf`); everywhere else it's one that loads
+  // nothing: bundled for an edge runtime, a Worker or a browser, react-dom/server is its browser build (React 19's keeps
+  // Node running), and under react-server it throws when it loads. package.json's "exports" picks it: the one that loads
+  // nothing where a bundler or runtime names React Server Components (their bundles are Node's too), a browser, a
+  // Worker or an edge runtime, and Node's everywhere else, each in both formats: the CommonJS build requires them.
+  it("is Node's module in Node, and one that loads nothing in an edge runtime, a Worker, a browser and React Server Components", async () => {
+    expect(fs.existsSync(path.join(dist, "fizz-cleanup.node.cjs")), "build the package first (pnpm build)").toBe(true);
+    const dir = project(own[0], own[1], "module");
+    try {
+      /** The fizz-cleanup modules in a bundle of the package's module and CommonJS builds. */
+      const bundled = async (platform: "node" | "browser" | "neutral", conditions: string[]) => {
+        const found: string[] = [];
+        for (const contents of ['export * from "@unlayer/react-elements";', 'module.exports = require("@unlayer/react-elements");']) {
+          // (Neutral: React, react-dom and the exporters left out, as they'd need Node's modules or a browser's.)
+          const external = ["tailwindcss", "tailwindcss/*", ...(platform === "neutral" ? ["react", "react-dom", "react-dom/*", "@unlayer/exporters", "@unlayer/types"] : [])];
+          const { metafile } = await esbuild.build({ stdin: { contents, resolveDir: dir, loader: "js" }, bundle: true, write: false, metafile: true, format: "esm", platform, conditions, external, logLevel: "silent" });
+          found.push(...Object.keys(metafile.inputs).filter((input) => input.includes("fizz-cleanup")).map((input) => path.basename(input)));
+        }
+        return found;
+      };
+      const noop = ["fizz-cleanup.noop.js", "fizz-cleanup.noop.cjs"];
+      expect(await bundled("node", [])).toEqual(["fizz-cleanup.node.js", "fizz-cleanup.node.cjs"]);
+      // Deno's `import` of react-dom/server is its browser build (React 19's keeps Deno running), its `require` Node's.
+      expect(await bundled("node", ["deno"])).toEqual(["fizz-cleanup.node.cjs", "fizz-cleanup.node.cjs"]);
+      expect(await bundled("node", ["react-server"])).toEqual(noop);
+      // A bundler that names neither Node nor a browser (Rollup's node-resolve at its defaults, bundling a server) gets
+      // Node's: the one that loads nothing would leave a failed render's context value to the next request's email.
+      expect(await bundled("neutral", [])).toEqual(["fizz-cleanup.node.js", "fizz-cleanup.node.cjs"]);
+      for (const conditions of [["worker", "browser"], ["workerd", "worker", "browser"], ["edge-light", "worker", "browser"], ["browser"]]) expect(await bundled("browser", conditions), conditions.join()).toEqual(noop);
+      // Node itself: imported and required, and under react-server.
+      fs.writeFileSync(path.join(dir, "probe.mjs"), `import { createRequire } from "node:module";
+import { cleanUp } from "@unlayer/react-elements/fizz-cleanup";
+const required = createRequire(import.meta.url)("@unlayer/react-elements/fizz-cleanup").cleanUp;
+console.log(JSON.stringify({ imported: cleanUp(), required: required() }));
+`);
+      for (const [args, cleaned] of [[[], true], [["--conditions=react-server"], false]] as const) {
+        const run = spawnSync(process.execPath, [...args, "probe.mjs"], { cwd: dir, encoding: "utf8", timeout: 20_000 });
+        expect(run.status, run.stderr).toBe(0);
+        expect(JSON.parse(run.stdout.trim().split("\n").pop()!), args.join()).toEqual({ imported: cleaned, required: cleaned });
+      }
+    } finally {
+      fs.rmSync(dir, { recursive: true, force: true });
+    }
+  }, 60_000);
+
+  // Vite runs a package it doesn't externalize (`ssr.noExternal`, Vitest's `server.deps.inline`, a package linked into
+  // a monorepo) as ES modules it transforms itself, where a CommonJS file fails ("module is not defined").
+  it("runs inlined by Vite's server render, and asks react-dom to put back what a failed render left", async () => {
+    const dir = project(own[0], own[1], "module");
+    try {
+      fs.writeFileSync(path.join(dir, "app.mjs"), `import React from "react";
+import { renderToString } from "react-dom/server";
+import * as E from "@unlayer/react-elements";
+const h = React.createElement;
+export function run() {
+  const html = E.renderToHtml(h(E.Email, null, h(E.Row, null, h(E.Column, null, h(E.Paragraph, null, "Hi there"))))).includes("Hi there");
+  const Tenant = React.createContext("default");
+  try { renderToString(h(Tenant.Provider, { value: "TenantA" }, h(() => { throw new Error("the page failed"); }))); } catch {}
+  const Footer = () => h(E.Paragraph, null, "brand=" + React.useContext(Tenant));
+  return { html, brand: /brand=(\\w+)/.exec(E.renderToPlainText(h(E.Email, null, h(E.Row, null, h(E.Column, null, h(Footer))))))[1] };
+}
+`);
+      // Vite through Vitest, which depends on it.
+      const vite = (await import(pathToFileURL(createRequire(createRequire(path.join(root, "package.json")).resolve("vitest/package.json")).resolve("vite")).href)) as typeof import("vite");
+      const server = await vite.createServer({ root: dir, configFile: false, envFile: false, logLevel: "silent", appType: "custom", server: { middlewareMode: true, hmr: false, ws: false, watch: null }, ssr: { noExternal: ["@unlayer/react-elements"] }, optimizeDeps: { noDiscovery: true, include: [] } });
+      try {
+        const app = await server.ssrLoadModule(path.join(dir, "app.mjs"));
+        expect(app.run()).toEqual({ html: true, brand: "default" });
+      } finally {
+        await server.close();
+      }
+    } finally {
+      fs.rmSync(dir, { recursive: true, force: true });
+    }
+  }, 60_000);
+
+  // Vite's Worker build (`ssr.target: "webworker"`, everything bundled) followed the async entry's import() of the
+  // Tailwind entry, a literal, into `tailwindcss`, an optional peer dependency: where it isn't installed, the module
+  // threw as it loaded.
+  it("renders with the async entry in Vite's Worker build, tailwindcss not installed", async () => {
+    const dir = project(own[0], own[1], "module");
+    try {
+      fs.writeFileSync(path.join(dir, "entry.mjs"), `import React from "react";
+import { Email, Row, Column, Paragraph } from "@unlayer/react-elements";
+import { renderToHtml } from "@unlayer/react-elements/async";
+const h = React.createElement;
+renderToHtml(h(Email, null, h(Row, null, h(Column, null, h(Paragraph, null, "Hi there"))))).then((html) => console.log(html.includes("Hi there")));
+`);
+      const vite = (await import(pathToFileURL(createRequire(createRequire(path.join(root, "package.json")).resolve("vitest/package.json")).resolve("vite")).href)) as typeof import("vite");
+      const outDir = path.join(dir, "out");
+      await vite.build({ root: dir, configFile: false, logLevel: "silent", mode: "production", ssr: { target: "webworker", noExternal: true }, build: { ssr: path.join(dir, "entry.mjs"), outDir, emptyOutDir: true, minify: false, rollupOptions: { output: { format: "es", entryFileNames: "[name].mjs" } } } });
+      const run = spawnSync(process.execPath, [path.join(outDir, "entry.mjs")], { encoding: "utf8", timeout: 20_000 });
+      expect(run.status, run.stderr).toBe(0);
+      expect(run.stdout.trim().split("\n").pop()).toBe("true");
+    } finally {
+      fs.rmSync(dir, { recursive: true, force: true });
+    }
+  }, 60_000);
+
+  // webpack 4 (Create React App 4, Storybook 6) and Jest before 28 don't read "exports": they find the package's
+  // fizz-cleanup/ folder, whose package.json names the module that loads nothing (Node's would load react-dom/server's
+  // browser build in a browser bundle). There, contexts' values stay as React's renders left them.
+  it("is the one that loads nothing where a bundler doesn't read package.json's exports", () => {
+    const folder = path.join(root, "fizz-cleanup");
+    expect(JSON.parse(fs.readFileSync(path.join(root, "package.json"), "utf8")).files).toContain("fizz-cleanup");
+    const { main, module } = JSON.parse(fs.readFileSync(path.join(folder, "package.json"), "utf8"));
+    expect([path.resolve(folder, main), path.resolve(folder, module)]).toEqual([path.join(dist, "fizz-cleanup.noop.cjs"), path.join(dist, "fizz-cleanup.noop.js")]);
+    // (A folder's path, required: its package.json's `main`, as those resolvers read it.)
+    expect(createRequire(import.meta.url)(folder).cleanUp()).toBe(false);
+  });
+});
+
+describe("the Tailwind entry (@unlayer/react-elements/tailwind), built", () => {
+  // Tailwind is an optional peer dependency: the main entry never loads it, and the Tailwind entry loads it only when
+  // it's asked to compile, both as a module and required.
+  const [react, reactDom] = own;
+  const template = `const h = React.createElement;
+const email = (root, block) => h(E.Email, { className: root }, h(E.Row, null, h(E.Column, null, h(E.Paragraph, { className: block }, "Hi there"))));`;
+  const scripts = {
+    // No tailwindcss: Elements renders (a <Tailwind> with no classes to read too), and compiling says what to install.
+    without: `const plain = E.renderToHtml(h(T.Tailwind, { config: {} }, email()));
+const error = await T.loadTailwind().then(() => "compiled", (e) => e.message);
+console.log(JSON.stringify({ plain: plain.includes("Hi there"), same: E.Tailwind === undefined, error }));`,
+    with: `const tw = await T.loadTailwind();
+const html = E.renderToHtml(h(T.Tailwind, { tw }, email("bg-gray-100", "text-red-500")));
+const json = await T.renderToJson(h(T.Tailwind, { config: { theme: { extend: { colors: { brand: "#007291" } } } } }, email(undefined, "text-brand")));
+console.log(JSON.stringify({ html: html.includes("#f3f4f6") && html.includes("#fb2c36"), json: json.body.rows[0].columns[0].contents[0].values.color }));`,
+  };
+  // Tailwind CSS 3 as its package is (no `exports`, a PostCSS plugin required by its `main`), which installs with
+  // Elements: the peer dependency takes any Tailwind, so a project's own doesn't fail the install.
+  const tailwind3 = (dir: string) => {
+    const modules = path.join(dir, "node_modules/tailwindcss");
+    fs.mkdirSync(path.join(modules, "lib"), { recursive: true });
+    fs.writeFileSync(path.join(modules, "package.json"), JSON.stringify({ name: "tailwindcss", version: "3.4.17", main: "lib/index.js" }));
+    fs.writeFileSync(path.join(modules, "lib/index.js"), 'module.exports = function tailwindcss() { return { postcssPlugin: "tailwindcss", plugins: [] }; };\nmodule.exports.postcss = true;\n');
+  };
+  const cases = { without: "without tailwindcss installed", older: "with Tailwind CSS 3 installed", with: "Tailwind to compile" } as const;
+  for (const format of ["module", "commonjs"] as const) {
+    for (const [installed, name] of Object.entries(cases) as [keyof typeof cases, string][]) {
+      it(`loads ${name} (${format})`, () => {
+        expect(fs.existsSync(path.join(dist, "tailwind.cjs")), "build the package first (pnpm build)").toBe(true);
+        const dir = project(react, reactDom, format);
+        try {
+          if (installed === "with") fs.symlinkSync(fs.realpathSync(path.join(root, "node_modules/tailwindcss")), path.join(dir, "node_modules/tailwindcss"), "dir");
+          if (installed === "older") tailwind3(dir);
+          const load =
+            format === "module"
+              ? `import * as E from "@unlayer/react-elements"; import * as T from "@unlayer/react-elements/tailwind"; import React from "react";`
+              : `const E = require("@unlayer/react-elements"); const T = require("@unlayer/react-elements/tailwind"); const React = require("react");`;
+          const body = `${template}\n${installed === "with" ? scripts.with : scripts.without}`;
+          fs.writeFileSync(path.join(dir, "tailwind.js"), format === "module" ? `${load}\n${body}` : `${load}\n(async () => {\n${body}\n})();`);
+          const run = spawnSync(process.execPath, ["tailwind.js"], { cwd: dir, encoding: "utf8", timeout: 20_000 });
+          expect(run.status, run.stderr).toBe(0);
+          const out = JSON.parse(run.stdout.trim().split("\n").pop()!);
+          if (installed === "with") expect(out).toEqual({ html: true, json: "#007291" });
+          else if (installed === "older") expect(out).toEqual({ plain: true, same: true, error: "[Unlayer] loadTailwind needs Tailwind CSS 4, and the tailwindcss installed is Tailwind CSS 3 or older (a PostCSS plugin): upgrade it with `npm install tailwindcss@4` (it's an optional peer dependency of @unlayer/react-elements)." });
+          else expect(out).toEqual({ plain: true, same: true, error: expect.stringMatching(/loadTailwind needs Tailwind CSS 4: install it/) });
+        } finally {
+          fs.rmSync(dir, { recursive: true, force: true });
+        }
+      }, 30_000);
+    }
+  }
+
+  it("leaves Tailwind out of the main entry", () => {
+    for (const file of ["index.js", "index.cjs"]) expect(fs.readFileSync(path.join(dist, file), "utf8"), file).not.toMatch(/tailwindcss/);
+  });
+});
+
+describe("the async renderers (@unlayer/react-elements/async), built", () => {
+  // Async templates and components (anywhere, on React 18 too), use() on React 19, and thrown promises (Suspense).
+  const script = (react19: boolean) => `const E = require("@unlayer/react-elements"); const A = require("@unlayer/react-elements/async"); const React = require("react");
+const h = React.createElement;
+const later = (value) => new Promise((resolve) => setTimeout(() => resolve(value), 5));
+const Name = async () => h("b", null, await later("Ada"));
+let state = {};
+const Thrown = () => { state.promise ??= later("thrown").then((v) => (state.value = v)); if (!state.value) throw state.promise; return h(E.Paragraph, null, state.value); };
+const used = later("used");
+const Used = () => h(E.Paragraph, null, React.use(used));
+const Inner = async () => h("i", null, await later("deep"));
+const Deep = () => h(Inner);
+// An async component another component of yours renders, which no Elements component's children hold.
+const InnerBlock = async () => h(E.Paragraph, null, await later("deep block"));
+const DeepBlock = () => h(InnerBlock);
+async function Template() {
+  const title = await later("Order 7");
+  return h(E.Email, null, h(E.Row, null, h(E.Column, null, h(E.Heading, null, title), h(E.Paragraph, null, "Hi ", h(Name), "!"), h(Thrown)${react19 ? ", h(Used), h(E.Paragraph, null, h(Deep))" : ""})));
+}
+const boom = new Error("down");
+async function Broken() { await later(null); throw boom; }
+(async () => {
+  const design = await A.renderToJson(h(Template));
+  const texts = design.body.rows[0].columns[0].contents.map((c) => c.values.text);
+  const failure = await A.renderToHtml(h(E.Email, null, h(E.Row, null, h(E.Column, null, h(Broken))))).catch((e) => e);
+  const deep = await A.renderToHtml(h(E.Email, null, h(E.Row, null, h(E.Column, null, h(DeepBlock))))).then((html) => (html.includes("deep block") ? "rendered" : html), (e) => e.message);
+  console.log(JSON.stringify({ texts, cause: failure.cause === boom, message: failure.message, deep }));
+})();`;
+  for (const [name, [react, reactDom]] of Object.entries(reacts)) {
+    it(`resolve async templates and components, and Suspense (${name})`, () => {
+      expect(fs.existsSync(path.join(dist, "async.cjs")), "build the package first (pnpm build)").toBe(true);
+      const react19 = is19(react);
+      const dir = project(react, reactDom, "commonjs");
+      try {
+        fs.writeFileSync(path.join(dir, "async.js"), script(react19));
+        const run = spawnSync(process.execPath, ["async.js"], { cwd: dir, encoding: "utf8", timeout: 20_000 });
+        expect(run.status, run.stderr).toBe(0);
+        const out = JSON.parse(run.stdout.trim().split("\n").pop()!);
+        expect(out.texts).toEqual(["Order 7", "Hi <b>Ada</b>!", "thrown", ...(react19 ? ["used", "<i>deep</i>"] : [])]);
+        expect(out).toMatchObject({ cause: true, message: "[Unlayer] down (in <Broken> at Row 1 › Column 1 › Broken)" });
+        // An async component another component renders: rendered on React 18 too (Elements renders it, not react-dom).
+        expect(out.deep).toBe("rendered");
+      } finally {
+        fs.rmSync(dir, { recursive: true, force: true });
+      }
+    }, 30_000);
+  }
+
+  // `pretty` loads prettier (an optional peer dependency) when it's asked to format: it says what to install without
+  // it, and to upgrade prettier 2, which installs with Elements (the peer dependency takes any prettier, so a
+  // project's own doesn't fail the install). Prettier 2 as its package is: no `exports`, no `plugins/` folder.
+  const prettier2 = (dir: string) => {
+    const modules = path.join(dir, "node_modules/prettier");
+    fs.mkdirSync(modules, { recursive: true });
+    fs.writeFileSync(path.join(modules, "package.json"), JSON.stringify({ name: "prettier", version: "2.8.8", main: "./index.js", browser: "./standalone.js" }));
+    for (const file of ["index.js", "standalone.js"]) fs.writeFileSync(path.join(modules, file), 'module.exports = { version: "2.8.8", format: (text) => text };\n');
+    fs.writeFileSync(path.join(modules, "parser-html.js"), "module.exports = { parsers: {} };\n");
+  };
+  const prettiers = { without: "without prettier installed", older: "with prettier 2 installed", with: "with prettier 3" } as const;
+  for (const format of ["module", "commonjs"] as const) {
+    for (const [installed, name] of Object.entries(prettiers) as [keyof typeof prettiers, string][]) {
+      it(`format with \`pretty\`, or say what to install (${name}, ${format})`, () => {
+        expect(fs.existsSync(path.join(dist, "async.cjs")), "build the package first (pnpm build)").toBe(true);
+        const dir = project(own[0], own[1], format);
+        try {
+          if (installed === "with") fs.symlinkSync(fs.realpathSync(path.join(root, "node_modules/prettier")), path.join(dir, "node_modules/prettier"), "dir");
+          if (installed === "older") prettier2(dir);
+          const load = format === "module" ? `import * as A from "@unlayer/react-elements/async";` : `const A = require("@unlayer/react-elements/async");`;
+          const body = `const out = await A.pretty("<div><p>Hi</p></div>").then((html) => ({ html }), (e) => ({ error: e.message }));\nconsole.info(JSON.stringify(out));`;
+          fs.writeFileSync(path.join(dir, "pretty.js"), format === "module" ? `${load}\n${body}` : `${load}\n(async () => {\n${body}\n})();`);
+          const run = spawnSync(process.execPath, ["pretty.js"], { cwd: dir, encoding: "utf8", timeout: 20_000 });
+          expect(run.status, run.stderr).toBe(0);
+          const out = JSON.parse(run.stdout.trim().split("\n").pop()!);
+          if (installed === "with") expect(out).toEqual({ html: "<div><p>Hi</p></div>\n" });
+          else if (installed === "older") expect(out).toEqual({ error: "[Unlayer] `pretty` needs prettier 3, and prettier 2.8.8 is installed: upgrade it with `npm install prettier@3` (an optional peer dependency of @unlayer/react-elements)." });
+          else expect(out).toEqual({ error: "[Unlayer] `pretty` needs prettier: install it with `npm install prettier` (an optional peer dependency of @unlayer/react-elements)." });
+        } finally {
+          fs.rmSync(dir, { recursive: true, force: true });
+        }
+      }, 30_000);
+    }
+  }
+});
+
+describe("the Markdown, code and font entries, built", () => {
+  // Their parser and highlighter are built in: a project installs nothing more, as a module or required, and the
+  // main entry has neither.
+  const [react, reactDom] = own;
+  const body = `const h = React.createElement;
+const email = h(E.Email, null, h(F.Font, { family: "Inter", url: "https://fonts.example.com/inter.css", default: true }), h(E.Row, null, h(E.Column, null,
+  h(M.Markdown, null, "# Hi\\n\\nSome **bold** text.\\n\\n\\u0060\\u0060\\u0060js\\nconst a = 1;\\n\\u0060\\u0060\\u0060"),
+  h(E.Paragraph, null, "Run ", h(C.CodeInline, null, "npm i")))));
+const json = E.renderToJson(email);
+const html = E.renderToHtml(email);
+console.log(JSON.stringify({ blocks: json.body.rows[0].columns[0].contents.map((c) => c.type), font: json.body.values.fontFamily.label, keyword: html.includes(">const</span>"), link: html.includes("inter.css") }));`;
+  for (const format of ["module", "commonjs"] as const) {
+    it(`render, with nothing more installed (${format})`, () => {
+      expect(fs.existsSync(path.join(dist, "markdown.cjs")), "build the package first (pnpm build)").toBe(true);
+      const dir = project(react, reactDom, format);
+      try {
+        const load =
+          format === "module"
+            ? `import * as E from "@unlayer/react-elements"; import * as M from "@unlayer/react-elements/markdown"; import * as C from "@unlayer/react-elements/code"; import * as F from "@unlayer/react-elements/font"; import React from "react";`
+            : `const E = require("@unlayer/react-elements"); const M = require("@unlayer/react-elements/markdown"); const C = require("@unlayer/react-elements/code"); const F = require("@unlayer/react-elements/font"); const React = require("react");`;
+        fs.writeFileSync(path.join(dir, "content.js"), `${load}\n${body}`);
+        const run = spawnSync(process.execPath, ["content.js"], { cwd: dir, encoding: "utf8", timeout: 20_000 });
+        expect(run.status, run.stderr).toBe(0);
+        expect(JSON.parse(run.stdout.trim().split("\n").pop()!)).toEqual({ blocks: ["heading", "text", "html", "text"], font: "Inter", keyword: true, link: true });
+      } finally {
+        fs.rmSync(dir, { recursive: true, force: true });
+      }
+    }, 30_000);
+  }
+
+  it("leave the parser and the highlighter out of the main entry", () => {
+    for (const file of ["index.js", "index.cjs"]) expect(fs.readFileSync(path.join(dist, file), "utf8"), file).not.toMatch(/marked|highlight\.js|hljs/i);
   });
 });
 
 describe("a bundle with React in it, which renders with react-dom/server", () => {
-  // There Elements has no other module of react-dom's that renders with that React (a browser bundle, a bundled
-  // server): called in a component that render renders, it renders with the module it's in, as 0.1.22 did (it threw,
-  // and React 19 kept Node running). An email that render renders itself renders too.
+  // Called in a component that render renders (a browser bundle, a bundled server), Elements renders, as 0.1.22 did
+  // (0.2 threw there, and React 19 kept Node running). An email that render renders itself renders too.
   for (const [name, [react, reactDom]] of Object.entries(reacts)) {
     for (const platform of ["browser", "node"] as const) {
       it(`renders an email it renders, and Elements called in its components (${name}, ${platform} bundle)`, () => {
@@ -221,18 +628,28 @@ const direct = renderToStaticMarkup(email).includes("Hi there");
 const Preview = () => h("iframe", { srcDoc: E.renderToHtml(email) });
 const Rows = () => h("pre", null, E.renderToJson(email).body.rows.length + " rows");
 const page = renderToString(h("main", null, h(Preview), h(Rows)));
-console.log(JSON.stringify({ html: E.renderToHtml(email).includes("Hi there"), direct, preview: page.includes("Hi there"), rows: page.includes("1 rows") }));
+const out = { html: E.renderToHtml(email).includes("Hi there"), direct, preview: page.includes("Hi there"), rows: page.includes("1 rows") };
+${platform === "node" ? `// A page that failed inside its tenant's provider, then an email reading the context without providing it: its
+// default, as the static renderer of the react-dom/server bundled with the app is asked to put it back first.
+const Tenant = React.createContext("default");
+try { renderToString(h(Tenant.Provider, { value: "TenantA" }, h(() => { throw new Error("the page failed"); }))); } catch {}
+const Footer = () => h(E.Paragraph, null, "brand=" + React.useContext(Tenant));
+out.brand = /brand=(\\w+)/.exec(E.renderToPlainText(h(E.Email, null, h(E.Row, null, h(E.Column, null, h(Footer))))))[1];
+` : ""}console.log(JSON.stringify(out));
 ${platform === "browser" ? "// React 19's browser build, bundled for the app, keeps Node running (as without Elements).\nprocess.exit(0);\n" : ""}`
           );
           // A Node bundle is CommonJS (an ES module bundle can't require Node's own modules, which react-dom's Node build
           // does), with one React: the project's, also for the packages linked in from the workspace.
           const out = platform === "node" ? "out.cjs" : "out.mjs";
           const alias = platform === "node" ? { react: path.join(dir, "node_modules/react"), "react-dom": path.join(dir, "node_modules/react-dom") } : {};
-          esbuild.buildSync({ absWorkingDir: dir, entryPoints: ["app.js"], bundle: true, platform, format: platform === "node" ? "cjs" : "esm", outfile: out, alias, define: { "process.env.NODE_ENV": '"production"' }, logLevel: "error" });
+          const { metafile } = esbuild.buildSync({ absWorkingDir: dir, entryPoints: ["app.js"], bundle: true, platform, format: platform === "node" ? "cjs" : "esm", outfile: out, alias, define: { "process.env.NODE_ENV": '"production"' }, logLevel: "error", metafile: true });
+          // The package's fizz-cleanup export (package.json's "exports"): Node's module in a Node bundle, and in a browser
+          // bundle the one that loads nothing.
+          expect(Object.keys(metafile.inputs).filter((input) => input.includes("fizz-cleanup")).map((input) => path.basename(input))).toEqual([platform === "node" ? "fizz-cleanup.node.js" : "fizz-cleanup.noop.js"]);
           const run = spawnSync(process.execPath, [out], { cwd: dir, encoding: "utf8", timeout: 20_000 });
           expect(run.error, "still running after 20s: something keeps Node alive").toBeUndefined();
           expect(run.status, run.stderr).toBe(0);
-          expect(JSON.parse(run.stdout.trim().split("\n").pop()!)).toEqual({ html: true, direct: true, preview: true, rows: true });
+          expect(JSON.parse(run.stdout.trim().split("\n").pop()!)).toEqual({ html: true, direct: true, preview: true, rows: true, ...(platform === "node" ? { brand: "default" } : {}) });
         } finally {
           fs.rmSync(dir, { recursive: true, force: true });
         }
@@ -258,13 +675,13 @@ describe("a Node script that renders with the built package", () => {
           fs.copyFileSync(path.join(root, "package.json"), path.join(elements, "package.json"));
           for (const dependency of ["exporters", "types"]) fs.symlinkSync(fs.realpathSync(path.join(root, "node_modules/@unlayer", dependency)), path.join(modules, "@unlayer", dependency), "dir");
           fs.writeFileSync(path.join(dir, "package.json"), JSON.stringify({ type: format }));
-          fs.writeFileSync(path.join(dir, "render.js"), script(format, noChannel, name === "React 19"));
+          fs.writeFileSync(path.join(dir, "render.js"), script(format, noChannel, is19(react)));
           const run = spawnSync(process.execPath, ["render.js"], { cwd: dir, encoding: "utf8", timeout: 20_000 });
           expect(run.error, "still running after 20s: something keeps Node alive").toBeUndefined();
           expect(run.status, run.stderr).toBe(0);
           const out = JSON.parse(run.stdout.trim().split("\n").pop()!);
-          expect(out.react.split(".")[0]).toBe(name.split(" ")[1]);
-          expect(out).toMatchObject({ html: true, page: "<pre>1 rows, open=false</pre>" });
+          expect(out.react).toEqual(reactVersion(react));
+          expect(out).toMatchObject({ html: true, page: "<pre>1 rows, open=false</pre>", brand: "default" });
         } finally {
           fs.rmSync(dir, { recursive: true, force: true });
         }
@@ -272,3 +689,25 @@ describe("a Node script that renders with the built package", () => {
     }
   }
 });
+
+describe("the built entries, bundled by esbuild (wrangler's, a serverless bundler's) without prettier installed", () => {
+  // prettier is an optional peer dependency (`pretty`, codegen's formatting): a bundler that follows every literal
+  // import() failed on an app that imports the async, Tailwind or codegen entry without it ("Could not resolve
+  // prettier/standalone"), a Cloudflare Worker's build among them. It's loaded by a name that isn't a literal.
+  const exports = JSON.parse(fs.readFileSync(path.join(root, "package.json"), "utf8")).exports;
+  const entries = Object.keys(exports).filter((key) => !key.endsWith(".json"));
+  /** The file package.json's "exports" gives an entry imported as an ES module in a Worker. */
+  const target = (value: unknown): string => (typeof value === "string" ? value : target(Object.entries(value as object).find(([condition]) => ["worker", "browser", "import", "default"].includes(condition))![1]));
+  it.each(entries)("%s bundles", async (entry) => {
+    const notInstalled: import("esbuild").Plugin = {
+      name: "prettier-not-installed",
+      setup: (build) => build.onResolve({ filter: /^prettier(\/|$)/ }, ({ path: name }) => ({ errors: [{ text: `${name} isn't installed` }] })),
+    };
+    const result = await esbuild.build({
+      stdin: { contents: `export * from ${JSON.stringify(path.join(root, target(exports[entry])))};`, resolveDir: root, loader: "js" },
+      bundle: true, write: false, format: "esm", platform: "browser", conditions: ["worker", "browser"], logLevel: "silent",
+      external: ["tailwindcss", "tailwindcss/*"], plugins: [notInstalled],
+    }).then(() => [], (error: { errors: { text: string }[] }) => error.errors.map((e) => e.text));
+    expect(result).toEqual([]);
+  }, 60_000);
+});
diff --git a/packages/react/src/regression/patterns.test.tsx b/packages/react/src/regression/patterns.test.tsx
index 5533af31..27c45274 100644
--- a/packages/react/src/regression/patterns.test.tsx
+++ b/packages/react/src/regression/patterns.test.tsx
@@ -4,7 +4,7 @@
  * the snapshot is updated (`vitest -u`) and reviewed.
  */
 import { describe, expect, it, vi } from "vitest";
-import React, { forwardRef, memo, useState } from "react";
+import React, { forwardRef, memo, useId, useState } from "react";
 import { renderToHtml } from "../utils/render-to-html";
 import { renderToJson } from "../utils/render-to-json";
 import { Email, Page, Document, Row, Column, Paragraph, Heading, Button, Image, Html } from "../index";
@@ -150,3 +150,31 @@ describe("a Context Provider placed in the email", () => {
   });
 });
 
+
+describe("the patterns and the realistic examples, kept and rendered again", () => {
+  // Each element made once, rendered twice in a shuffled order, with a template that calls useId() around each one
+  // rendered between: the reviewed HTML and design each time (a render reads nothing an earlier one left).
+  it("render the reviewed HTML and design every time, whatever rendered before", async () => {
+    const names = ["AirbnbConfirmation", "LumaEventInvite", "MercuryReceipt", "MorningBrewDigest", "NikeDrop", "NotionWelcome", "ProductDigest", "StripeReceipt", "WarbyOrderShipped"];
+    const examples = await Promise.all(names.map(async (name) => [name, (await import(`../examples/${name}.stories.tsx`))[name]()] as const));
+    const kept = [...Object.keys(PATTERNS).map((name) => [name, PATTERNS[name]()] as const), ...examples];
+    const snapshots = import.meta.glob<string>("./__snapshots__/*/*.{html,json}", { query: "?raw", import: "default", eager: true });
+    const reviewed = (name: string, kind: "html" | "json") => snapshots[`./__snapshots__/${names.includes(name) ? "examples" : "patterns"}/${name}.${kind}`];
+    const Forked = ({ of }: { of: React.ReactElement }) => (useId(), of);
+    let seed = 7;
+    const shuffled = <T,>(list: readonly T[]) => list.map((item) => [(seed = (seed * 16807) % 2147483647), item] as const).sort((a, b) => a[0] - b[0]).map(([, item]) => item);
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      for (const pass of [1, 2]) {
+        for (const [name, element] of shuffled(kept)) {
+          renderToHtml(<Forked of={element} />);
+          renderToJson(<Forked of={element} />);
+          expect(lines(renderToHtml(element)), `${name}, pass ${pass}`).toBe(reviewed(name, "html"));
+          if (!names.includes(name)) expect(`${JSON.stringify(renderToJson(element), null, 1)}\n`, `${name}, pass ${pass}`).toBe(reviewed(name, "json"));
+        }
+      }
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
diff --git a/packages/react/src/regression/previous-release-patterns.test.tsx b/packages/react/src/regression/previous-release-patterns.test.tsx
index b0c3ca07..61a7d306 100644
--- a/packages/react/src/regression/previous-release-patterns.test.tsx
+++ b/packages/react/src/regression/previous-release-patterns.test.tsx
@@ -17,8 +17,8 @@ type Lib = typeof current;
 const previousHasTheBugs = /^0\.1\./.test(previousPackage.version);
 const releases = { current, previous: previous as unknown as Lib };
 
-/** React's `useId()` values (`:R1:` in React 18, `«R1»` in 19). */
-const REACT_ID = /:[\w-]*R[\w-]*:|«[\w-]*R[\w-]*»/g;
+/** React's `useId()` values (`:R1:` in React 18 and 19.0, `«R1»` in 19.1, `_R_1_` in 19.2 and later). */
+const REACT_ID = /:[\w-]*R[\w-]*:|«[\w-]*R[\w-]*»|_R_[0-9a-v]+(?:H[0-9a-v]+)?_/g;
 
 /** What a reader sees: the body's text, tags and entities gone (React's ids as "‹id›", whatever their format). */
 function visible(html: string): string {
@@ -50,6 +50,8 @@ type Pattern = {
   json?: false;
   /** How many different `useId()` values the HTML shows. */
   ids?: number;
+  /** Part of it fails: the render throws a RenderError naming it, and leaves it out with `onError: "omit"` (compared so). */
+  omit?: true;
 };
 
 const PATTERNS: Record<string, Pattern> = {
@@ -61,8 +63,9 @@ const PATTERNS: Record<string, Pattern> = {
         <L.Paragraph>After the rule</L.Paragraph>
       </L.Column></L.Row></L.Email>
     ),
-    // The element is left out (with a message); the rest renders.
+    // The element fails the render; left out (`onError: "omit"`), the rest renders.
     shows: "Before the rule After the rule",
+    omit: true,
     json: false, // 0.1.22's renderToJson throws on markup in a Column: this build's design is checked in render-to-json.test
   },
   // Markup written in a Row or Column is left out whole, as 0.1.22 left it out, also with a component or block in it.
@@ -212,6 +215,7 @@ const PATTERNS: Record<string, Pattern> = {
       return <L.Email><L.Row><L.Column><L.Paragraph>Thanks for your order</L.Paragraph><Recommendations /><L.Paragraph>See you soon</L.Paragraph></L.Column></L.Row></L.Email>;
     },
     shows: "Thanks for your order See you soon",
+    omit: true,
     json: false, // 0.1.22's design read the async component's promise as a block
   },
   "a component that throws, among a Row's columns": {
@@ -220,6 +224,7 @@ const PATTERNS: Record<string, Pattern> = {
       return <L.Email><L.Row><L.Column><L.Paragraph>Thanks for your order</L.Paragraph></L.Column></L.Row><L.Row><ItemColumns order={{}} /><L.Column><L.Paragraph>Total 0 dollars</L.Paragraph></L.Column></L.Row><L.Row><L.Column><L.Paragraph>Footer</L.Paragraph></L.Column></L.Row></L.Email>;
     },
     shows: "Thanks for your order Total 0 dollars Footer",
+    omit: true,
     json: false,
   },
   "a Column shown under a condition, in a Row with a layout": {
@@ -251,7 +256,8 @@ const PATTERNS: Record<string, Pattern> = {
       const MemoBanner = memo(Banner);
       return <L.Email><MemoBanner /><L.Row><L.Column><L.Paragraph>Footer</L.Paragraph></L.Column></L.Row></L.Email>;
     },
-    shows: "Banner: default title Footer",
+    // React 19 doesn't fill a function component's defaultProps (memo'd or not); React 18 does.
+    shows: Number.parseInt(React.version) >= 19 ? "Banner: undefined Footer" : "Banner: default title Footer",
     json: false, // 0.1.22's design left out components among the rows
   },
   "headings, buttons and text with &, < and quotes": {
@@ -271,20 +277,27 @@ const PATTERNS: Record<string, Pattern> = {
   },
 };
 
-// An async or throwing component is left out with a message: keep the test output quiet.
+// A part left out (`onError: "omit"`) is said: keep the test output quiet.
 beforeAll(() => {
   vi.spyOn(console, "error").mockImplementation(() => {});
   vi.spyOn(console, "warn").mockImplementation(() => {});
 });
 afterAll(() => vi.restoreAllMocks());
 
-describe.each(Object.entries(PATTERNS))("%s", (_, { build, shows, fixed, json, ids }) => {
+describe.each(Object.entries(PATTERNS))("%s", (_, { build, shows, fixed, json, ids, omit }) => {
   const now = build(releases.current);
   const before = build(releases.previous);
+  const options = omit ? ({ onError: "omit" } as const) : undefined;
+
+  if (omit) {
+    it("fails the render by default, naming the part that failed", () => {
+      for (const render of [() => current.renderToHtml(now), () => current.renderToPlainText(now), () => current.renderToJson(now)]) expect(render).toThrow(current.RenderError);
+    });
+  }
 
   it("shows what React shows", () => {
-    expect(visible(current.renderToHtml(now))).toBe(shows);
-    if (ids) expect(new Set(current.renderToHtml(now).match(REACT_ID)).size).toBe(ids);
+    expect(visible(current.renderToHtml(now, options))).toBe(shows);
+    if (ids) expect(new Set(current.renderToHtml(now, options).match(REACT_ID)).size).toBe(ids);
     // The previous release showed it too, or (while it's a release before the fix) it's a fix: a pattern that
     // changes either way is a decision to make.
     if (!fixed || previousHasTheBugs) expect(visible(previous.renderToHtml(before)) === shows).toBe(!fixed);
@@ -294,13 +307,15 @@ describe.each(Object.entries(PATTERNS))("%s", (_, { build, shows, fixed, json, i
     it("gives the previous release's plain text", () => {
       // React's useId() values are opaque: where React places a component in its tree sets them.
       const ids = (text: string) => text.replace(REACT_ID, "‹id›");
-      expect(ids(current.renderToPlainText(now))).toBe(ids(previous.renderToPlainText(before)));
+      expect(ids(current.renderToPlainText(now, options))).toBe(ids(previous.renderToPlainText(before)));
     });
   }
 
   if (!fixed && json !== false) {
     it("gives the previous release's design", () => {
-      expect(JSON.stringify(current.renderToJson(now), null, 1)).toBe(JSON.stringify(previous.renderToJson(before), null, 1));
+      // (But for the body's `displayMode`, which this release writes.)
+      const design = JSON.stringify(current.renderToJson(now, options), (key, value) => (key === "displayMode" ? undefined : value), 1);
+      expect(design).toBe(JSON.stringify(previous.renderToJson(before), null, 1));
     });
   }
 });
diff --git a/packages/react/src/regression/previous-release.test.tsx b/packages/react/src/regression/previous-release.test.tsx
index b081b2a5..d13813d7 100644
--- a/packages/react/src/regression/previous-release.test.tsx
+++ b/packages/react/src/regression/previous-release.test.tsx
@@ -2,13 +2,16 @@
  * Output against the previous release, so a change for existing users is never
  * silent. The realistic examples are rendered with this build and with the
  * last published Elements (`@unlayer/react-elements-previous`): their designs
- * and plain text must be the same. Their HTML is compared with a reviewed
+ * and plain text must be the same (but for bare zeros in a design's px lengths,
+ * now written `0px` as its schema types them: see pxZeros, and the body's
+ * `displayMode`, now written). Their HTML is compared with a reviewed
  * snapshot, as it changed on purpose (a full document, escaping, device CSS):
  * any further change fails until the snapshot is updated (`vitest -u`) and
  * reviewed. After a release, move the alias in package.json to it.
  */
 import { describe, expect, it, vi } from "vitest";
 import { lines } from "./lines";
+import { pxZeros } from "@unlayer-internal/shared-elements";
 import type React from "react";
 
 const EXAMPLES = [
@@ -48,7 +51,11 @@ describe.each(EXAMPLES)("%s", (name) => {
     expect(previous.element.type).toBe((previous.render as unknown as { Email: unknown }).Email);
     expect(current.element.type).toBe((current.render as unknown as { Email: unknown }).Email);
     expect(previous.element.type).not.toBe(current.element.type);
-    expect(JSON.stringify(current.render.renderToJson(current.element), null, 1)).toBe(JSON.stringify(previous.render.renderToJson(previous.element), null, 1));
+    // (And for its body's `displayMode`, which this release writes.)
+    const design = current.render.renderToJson(current.element) as { body: { values: Record<string, unknown> } };
+    expect(design.body.values.displayMode).toBe("email");
+    delete design.body.values.displayMode;
+    expect(JSON.stringify(design, null, 1)).toBe(JSON.stringify(pxZeros(previous.render.renderToJson(previous.element)), null, 1));
     expect(current.render.renderToPlainText(current.element)).toBe(previous.render.renderToPlainText(previous.element));
   });
 
@@ -66,7 +73,9 @@ describe("a component that renders plain HTML in a Column", () => {
       const html: string = E.renderToHtml(
         <E.Email><E.Row><E.Column><E.Paragraph>Start</E.Paragraph><Footer /><E.Paragraph>End</E.Paragraph></E.Column></E.Row></E.Email>
       );
-      return html.slice(html.indexOf("Start"), html.indexOf("End"));
+      // (From the end of the first Paragraph's text element to the start of the last's: their markup is the editor's
+      // text block's now.)
+      return html.slice(html.indexOf("</div>", html.indexOf("Start")), html.lastIndexOf("<div", html.indexOf("End")));
     });
     expect(current).toContain('<a href="https://example.com/unsubscribe">Unsubscribe</a>');
     expect(current).toBe(previous);
diff --git a/packages/react/src/regression/react-copies.test.tsx b/packages/react/src/regression/react-copies.test.tsx
new file mode 100644
index 00000000..3db19344
--- /dev/null
+++ b/packages/react/src/regression/react-copies.test.tsx
@@ -0,0 +1,213 @@
+// @vitest-environment node
+/**
+ * Elements' React isn't the one react-dom renders with (see react-copy.ts), as in a Next.js App Router route handler
+ * or Server Component. Elements renders templates itself (src/engine), never with react-dom, so it renders them as
+ * anywhere else; and a collecting walk records Rows, Columns and blocks by their markers, another copy's of Elements
+ * (with another React) too. (0.3.0's react-dom renders couldn't tell, and needed a "blind" mode for it.)
+ */
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("react-dom/server", async () => (await import("./react-copy")).reactCopy()("react-dom/server"));
+
+import React from "react";
+import * as server from "react-dom/server";
+import { Button, Column, ColumnLayouts, Email, Paragraph, Row, renderToHtml as renderToHtmlSync, renderToJson as renderToJsonSync } from "../index";
+import { renderToHtml, renderToJson, renderToPlainText } from "../async";
+import { Head } from "../head";
+import { Font } from "../font";
+import { CodeBlock } from "../code";
+import { Markdown } from "../markdown";
+import { StripeReceipt } from "../examples/StripeReceipt.stories";
+
+const tables = (html: string) => (html.match(/<table/g) ?? []).length;
+const later = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+// The email tests/nextjs-integration renders.
+const Welcome = ({ name }: { name: string }) => (
+  <Email>
+    <Row><Column><Paragraph>{`Hello ${name}`}</Paragraph><Button href="https://example.com">Get started</Button></Column></Row>
+    <Row layout={ColumnLayouts.TwoEqual}><Column><Paragraph>Left</Paragraph></Column><Column><Paragraph>Right</Paragraph></Column></Row>
+  </Email>
+);
+
+let said: string[] = [];
+beforeEach(() => {
+  said = [];
+  // React's development build says "Invalid hook call" for the check that finds this out (once per collection).
+  vi.spyOn(console, "error").mockImplementation((message) => void (/Invalid hook call/.test(String(message)) || said.push(String(message))));
+  vi.spyOn(console, "warn").mockImplementation((message) => void said.push(String(message)));
+});
+afterEach(() => vi.restoreAllMocks());
+afterAll(async () => (await import("./react-copy")).removeReactCopy());
+
+describe("another copy of React than react-dom's", () => {
+  it("is what this file renders with", () => {
+    expect(server.renderToStaticMarkup(<p>ok</p>)).toBe("<p>ok</p>");
+    let thrown: unknown;
+    const Hooks = () => {
+      try {
+        React.useId();
+      } catch (error) {
+        thrown = error;
+      }
+      return null;
+    };
+    server.renderToStaticMarkup(<Hooks />);
+    expect(thrown).toBeDefined();
+  });
+
+  it("renders an email as the synchronous renderers do, from the async ones", async () => {
+    for (const element of [<StripeReceipt key="stripe" />, <Welcome key="welcome" name="Ada" />]) {
+      const html = renderToHtmlSync(element);
+      const design = renderToJsonSync(element);
+      expect(tables(html)).toBeGreaterThan(10);
+      expect(design.body.rows.length).toBeGreaterThan(1);
+      expect(await renderToHtml(element)).toBe(html);
+      expect(await renderToJson(element)).toEqual(design);
+    }
+    expect(renderToJsonSync(<StripeReceipt />).body.rows).toHaveLength(12);
+    expect((await renderToJson(<Welcome name="Ada" />)).body.rows.map((row) => row.columns.length)).toEqual([1, 2]);
+    expect(await renderToPlainText(<Welcome name="Ada" />)).toContain("Hello Ada");
+    expect(said).toEqual([]);
+  });
+
+  /** A template whose Rows come in late (an async component among them, and one in a Column), named `name`. */
+  const late = (name: string, ms: number, log: string[] = []) => {
+    const Rows = async () => {
+      log.push(`start ${name}`);
+      await later(ms);
+      log.push(`end ${name}`);
+      return resolved(name).props.children.slice(1);
+    };
+    const Block = async () => <Paragraph>{`Block ${name}${await later(ms / 2).then(() => "")}`}</Paragraph>;
+    return (
+      <Email>
+        <Row><Column><Paragraph>{`Top ${name}`}</Paragraph><Block /></Column></Row>
+        <Rows />
+      </Email>
+    );
+  };
+  /** The same template, its data there: what the synchronous renderers make of it. */
+  const resolved = (name: string) => (
+    <Email>
+      <Row><Column><Paragraph>{`Top ${name}`}</Paragraph><Paragraph>{`Block ${name}`}</Paragraph></Column></Row>
+      <Row><Column><Paragraph>{`First ${name}`}</Paragraph></Column></Row>
+      <Row><Column><Paragraph>{`Second ${name}`}</Paragraph></Column></Row>
+    </Email>
+  );
+  const texts = (design: { body: { rows: any[] } }) => design.body.rows.flatMap((row) => row.columns.flatMap((column: any) => column.contents.map((c: any) => c.values.text)));
+
+  it("keeps each async render's rows its own when they render at once", async () => {
+    const names = ["A", "B", "C", "D"];
+    const log: string[] = [];
+    // Started in order, finished in reverse: each one's components run with the others under way.
+    const designs = await Promise.all(names.map((name, i) => renderToJson(late(name, 40 - i * 10, log))));
+    const htmls = await Promise.all(names.map((name, i) => renderToHtml(late(name, 5 + i * 10))));
+    expect(log).toEqual([...names.map((name) => `start ${name}`), ...names.map((name) => `end ${name}`).reverse()]);
+    names.forEach((name, i) => {
+      expect(texts(designs[i])).toEqual(["Top", "Block", "First", "Second"].map((text) => `${text} ${name}`));
+      expect(designs[i]).toEqual(renderToJsonSync(resolved(name)));
+      expect(htmls[i]).toBe(renderToHtmlSync(resolved(name)));
+    });
+    expect(said).toEqual([]);
+  });
+});
+
+describe("Rows of another copy of Elements, with another React", () => {
+  // The app's Elements, with another React than this file's: the Rows, Columns and blocks of this file's (another
+  // copy of Elements) are recorded by their markers, as the app's own are.
+  let app: typeof import("../index") & { async: typeof import("../async"); Head: typeof Head; Font: typeof Font };
+  beforeAll(async () => {
+    vi.resetModules();
+    const copy = (await import("./react-copy")).reactCopy()("react");
+    vi.doMock("react", () => ({ ...copy, default: copy }));
+    app = { ...(await import("../index")), async: await import("../async"), Head: (await import("../head")).Head, Font: (await import("../font")).Font };
+    vi.doUnmock("react");
+  });
+  it("are collected, as the app's own are", async () => {
+    const Content = () => <Row><Column><Paragraph>Hello</Paragraph></Column></Row>;
+    const own = <app.Email><app.Row><app.Column><app.Paragraph>Hello</app.Paragraph></app.Column></app.Row></app.Email>;
+    // Among the root's children, and in a component of the template's.
+    for (const element of [<app.Email key="plain">{Content()}</app.Email>, <app.Email key="component"><Content /></app.Email>]) {
+      expect(app.renderToHtml(element)).toBe(app.renderToHtml(own));
+      expect(app.renderToJson(element)).toEqual(app.renderToJson(own));
+      expect(await app.async.renderToHtml(element)).toBe(app.renderToHtml(own));
+      expect(await app.async.renderToJson(element)).toEqual(app.renderToJson(own));
+    }
+    expect(app.renderToJson(own).body.rows).toHaveLength(1);
+  });
+
+  it("leave alone a template with no Rows to collect", async () => {
+    const url = "https://fonts.googleapis.com/css2?family=Inter";
+    const blind = { Email, Head, Font, renderToHtml: renderToHtmlSync, renderToJson: renderToJsonSync, async: { renderToHtml, renderToJson } };
+    // Both renders: the app's, and a blind one (this file's).
+    for (const { Email, Head, Font, renderToHtml: html, renderToJson: json, async } of [app, blind]) {
+      const templates = [
+        <Email key="empty" />,
+        <Email key="null">{null}</Email>,
+        <Email key="text">Just text</Email>,
+        <Email key="markup"><div>Markup</div></Email>,
+        <Email key="head"><Head><title>Hi</title></Head><Font family="Inter" url={url} /></Email>,
+      ];
+      for (const element of templates) {
+        expect(html(element)).toContain("<html");
+        expect(json(element).body.rows).toEqual([]);
+        expect(await async.renderToHtml(element)).toContain("<html");
+        expect((await async.renderToJson(element)).body.rows).toEqual([]);
+      }
+    }
+  });
+});
+
+describe("Markdown and code blocks of another copy of Elements (a package's CommonJS build, its ESM one rendering)", () => {
+  // Their entries reached the render's work through the main entry they imported, and another copy's render was none
+  // of theirs: each block had all of it (12 fences of 8 KB of Java took 4.5 s, 562 sparse tables 195 MB of HTML).
+  const SLOT = Symbol.for("@unlayer/react-elements/render-work");
+  const fill = (unit: string, n: number) => unit.repeat(Math.ceil(n / unit.length)).slice(0, n);
+  const java = fill("int a = 1;\n", 7999) + ";";
+  const colored = (html: string) => html.split('<pre style="').slice(1).map((block) => block.includes('<span style="'));
+  const blocks = (n: number, block: (i: number) => React.ReactElement) => (
+    <Email>
+      <Row>
+        <Column>{Array.from({ length: n }, (_, i) => block(i))}</Column>
+      </Row>
+    </Email>
+  );
+  // This file's (the copy renderToHtmlSync is), and another's.
+  const own = { CodeBlock, Markdown };
+  let other: typeof import("../code") & typeof import("../markdown") & { renderToHtml: typeof renderToHtmlSync };
+  beforeAll(async () => {
+    vi.resetModules();
+    other = { ...(await import("../code")), ...(await import("../markdown")), renderToHtml: (await import("../index")).renderToHtml };
+  });
+
+  it("share the work of the render another copy runs, as its own copy's blocks do", () => {
+    for (const { CodeBlock, Markdown } of [own, other]) {
+      expect(colored(renderToHtmlSync(blocks(3, (i) => <CodeBlock key={i} language="java" code={java} />)))).toEqual([true, false, false]);
+      expect(colored(renderToHtmlSync(blocks(3, (i) => <Markdown key={i} markdown={"```java\n" + java + "\n```"} />)))).toEqual([true, false, false]);
+    }
+    // And its tables, the cells one Markdown of them all has.
+    const table = "|" + "a|".repeat(20) + "\n|" + "-|".repeat(20) + "\n" + "|\n".repeat(49);
+    const tables = (html: string) => (html.match(/<table[^>]*class="[^"]*u_content_table/g) ?? []).length;
+    const sparse = (Markdown: typeof own.Markdown) => renderToHtmlSync(blocks(40, (i) => <Markdown key={i} html="escape" markdown={table} />), { onError: "omit" });
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(tables(sparse(other.Markdown))).toBe(tables(sparse(own.Markdown)));
+    expect(tables(sparse(own.Markdown))).toBeLessThan(10);
+  });
+
+  it("keep work of their own where the other copy's is another version's (its slot's another protocol)", async () => {
+    const global = globalThis as Record<symbol, unknown>;
+    const slot = global[SLOT];
+    global[SLOT] = { version: 0, shared: undefined };
+    try {
+      vi.resetModules();
+      const skewed = { ...(await import("../code")), renderToHtml: (await import("../index")).renderToHtml };
+      // Its own renders share their work among its blocks; this copy's renders' work it can't read: each block has its own.
+      expect(colored(skewed.renderToHtml(blocks(3, (i) => <skewed.CodeBlock key={i} language="java" code={java} />)))).toEqual([true, false, false]);
+      expect(colored(renderToHtmlSync(blocks(3, (i) => <skewed.CodeBlock key={i} language="java" code={java} />)))).toEqual([true, true, true]);
+      expect(colored(renderToHtmlSync(blocks(3, (i) => <own.CodeBlock key={i} language="java" code={java} />)))).toEqual([true, false, false]);
+    } finally {
+      global[SLOT] = slot;
+    }
+  });
+});
diff --git a/packages/react/src/regression/react-copy.ts b/packages/react/src/regression/react-copy.ts
new file mode 100644
index 00000000..3ba11dd4
--- /dev/null
+++ b/packages/react/src/regression/react-copy.ts
@@ -0,0 +1,33 @@
+/**
+ * Another copy of React than the tests' (with its react-dom), as a second install or a bundler gives one: Next.js's
+ * App Router renders with react-dom's React, and Elements' components in a route handler or a Server Component call
+ * React Server Components' own. Copied into a temporary folder (a link would resolve back to the same files) and
+ * loaded with Node's require, so nothing the tests import shares it.
+ */
+import fs from "node:fs";
+import { createRequire } from "node:module";
+import os from "node:os";
+import path from "node:path";
+
+// One for the test file (it's loaded again after `vi.resetModules()`).
+const COPY = Symbol.for("@unlayer/react-elements/test-react-copy");
+
+export function reactCopy(): (id: "react" | "react-dom/server") => any {
+  const shared = globalThis as Record<symbol, string | undefined>;
+  let dir = shared[COPY];
+  if (!dir) {
+    dir = shared[COPY] = fs.mkdtempSync(path.join(os.tmpdir(), "elements-react-copy-"));
+    const own = createRequire(import.meta.url);
+    for (const name of ["react", "react-dom"]) {
+      fs.cpSync(path.dirname(fs.realpathSync(own.resolve(`${name}/package.json`))), path.join(dir, "node_modules", name), { recursive: true });
+    }
+  }
+  return createRequire(path.join(dir, "index.js"));
+}
+
+/** The copy's folder taken away, once the test file is done with it (what it loaded stays loaded). */
+export function removeReactCopy(): void {
+  const shared = globalThis as Record<symbol, string | undefined>;
+  if (shared[COPY]) fs.rmSync(shared[COPY], { recursive: true, force: true });
+  shared[COPY] = undefined;
+}
diff --git a/packages/react/src/regression/react-server-build.test.ts b/packages/react/src/regression/react-server-build.test.ts
new file mode 100644
index 00000000..153f4b70
--- /dev/null
+++ b/packages/react/src/regression/react-server-build.test.ts
@@ -0,0 +1,108 @@
+// @vitest-environment node
+/**
+ * The built package with React's react-server build, as Next.js's Server Components and route handlers give it (its
+ * `react-server` export condition): a template's hooks that build has (useId, useMemo, use) work, one it hasn't
+ * (useState) fails with a RenderError that says so, and React's dispatcher slot is as it was after. Each ESM entry
+ * loads there too: that build has no createContext or useContext, and a module importing one by name fails to link
+ * (in Node, and in webpack, which fails the build: Next.js 15's default bundler). React 18 has no react-server build.
+ */
+import { describe, expect, it } from "vitest";
+import { spawnSync } from "node:child_process";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import React from "react";
+
+const root = path.resolve(import.meta.dirname, "../..");
+const dist = path.join(root, "dist");
+const reactDir = fs.realpathSync(path.join(root, "node_modules/react"));
+
+// `react` (and its JSX runtime) as the react-server build, wherever it's required: what the export condition does.
+const server = `const server = { react: ${JSON.stringify(path.join(reactDir, "react.react-server.js"))}, "react/jsx-runtime": ${JSON.stringify(path.join(reactDir, "jsx-runtime.react-server.js"))} };`;
+const required = `${server}
+const resolveFilename = Module._resolveFilename;
+Module._resolveFilename = function (request, ...rest) { return server[request] ?? resolveFilename.call(this, request, ...rest); };`;
+const script = `const Module = require("module");
+${required}
+const React = require("react");
+const E = require("@unlayer/react-elements");
+const h = React.createElement;
+const slot = React.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+const before = slot.H;
+const Greeting = () => h(E.Paragraph, null, "Hello " + React.useMemo(() => "Ada", []) + " " + React.useId());
+const Counter = () => { const [n] = React.useState(1); return h(E.Paragraph, null, String(n)); };
+const email = (block) => h(E.Email, null, h(E.Row, null, h(E.Column, null, h(block))));
+const html = E.renderToHtml(email(Greeting));
+let failure;
+try { E.renderToHtml(email(Counter)); } catch (error) { failure = error; }
+console.log(JSON.stringify({ react: React.version, hasUseState: typeof React.useState, greeting: /Hello Ada /.test(html), error: failure && { name: failure.name, message: failure.message, cause: String(failure.cause) }, restored: slot.H === before }));
+`;
+
+// The same for ESM (a resolve hook for `import "react"`, and `require` as above for the CommonJS modules it loads),
+// each entry imported.
+const hooks = `import { pathToFileURL } from "node:url";
+${server}
+export async function resolve(specifier, context, next) {
+  return server[specifier] ? { url: pathToFileURL(server[specifier]).href, shortCircuit: true } : next(specifier, context);
+}
+`;
+const entries = ["", "/async", "/tailwind", "/font", "/head", "/code", "/markdown", "/codegen"];
+const esm = `import Module, { register } from "node:module";
+${required}
+register("./hooks.mjs", import.meta.url);
+const loaded = [];
+for (const entry of ${JSON.stringify(entries)}) {
+  try { await import("@unlayer/react-elements" + entry); loaded.push(entry || "."); } catch (error) { loaded.push((entry || ".") + ": " + error.message); }
+}
+const React = await import("react");
+const out = { hasCreateContext: typeof React.createContext, loaded };
+if (loaded[0] === ".") {
+  const E = await import("@unlayer/react-elements");
+  const h = React.createElement;
+  const html = E.renderToHtml(h(E.UnlayerProvider, { config: { textDirection: "rtl" } }, h(E.Email, null, h(E.Row, null, h(E.Column, null, h(E.Paragraph, null, "Hello Ada"))))));
+  Object.assign(out, { greeting: /Hello Ada/.test(html), provider: /<html[^>]* dir="rtl"/.test(html) });
+}
+console.log(JSON.stringify(out));
+`;
+
+// A folder with React, react-dom and the built package in its node_modules, and the script; what it printed last.
+function runWithPackage(file: string, source: string, extra: Record<string, string> = {}) {
+  expect(fs.existsSync(path.join(dist, "index.cjs")), "build the package first (pnpm build)").toBe(true);
+  // Its real path: macOS's tmpdir is a symlink, and ESM would load `react` twice, by that path and by the real one.
+  const dir = fs.realpathSync(fs.mkdtempSync(path.join(os.tmpdir(), "elements-react-server-")));
+  try {
+    const modules = path.join(dir, "node_modules");
+    fs.cpSync(reactDir, path.join(modules, "react"), { recursive: true });
+    fs.cpSync(fs.realpathSync(path.join(root, "node_modules/react-dom")), path.join(modules, "react-dom"), { recursive: true });
+    const elements = path.join(modules, "@unlayer/react-elements");
+    fs.mkdirSync(elements, { recursive: true });
+    fs.cpSync(dist, path.join(elements, "dist"), { recursive: true });
+    fs.copyFileSync(path.join(root, "package.json"), path.join(elements, "package.json"));
+    for (const dependency of ["exporters", "types"]) fs.symlinkSync(fs.realpathSync(path.join(root, "node_modules/@unlayer", dependency)), path.join(modules, "@unlayer", dependency), "dir");
+    fs.writeFileSync(path.join(dir, "package.json"), JSON.stringify({ type: "commonjs" }));
+    // The script's React is the copy's: `react` resolved from there.
+    const copied = (text: string) => text.replaceAll(JSON.stringify(reactDir).slice(1, -1), path.join(modules, "react"));
+    for (const [name, text] of Object.entries({ ...extra, [file]: source })) fs.writeFileSync(path.join(dir, name), copied(text));
+    const run = spawnSync(process.execPath, [file], { cwd: dir, encoding: "utf8", timeout: 20_000 });
+    expect(run.status, run.stderr).toBe(0);
+    return JSON.parse(run.stdout.trim().split("\n").pop()!);
+  } finally {
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+describe.runIf(Number.parseInt(React.version) >= 19)("React's react-server build", () => {
+  it("renders a template's hooks it has, and names the one it hasn't", () => {
+    const out = runWithPackage("server.js", script);
+    expect(out).toMatchObject({ hasUseState: "undefined", greeting: true, restored: true });
+    expect(out.error).toMatchObject({ name: "RenderError", cause: expect.stringMatching(/useState/) });
+    expect(out.error.message).toBe(
+      "[Unlayer] it calls useState, which React Server Components' React doesn't have (Next.js route handlers and Server Components render with it; it has use, useId, useMemo and useCallback): render this template from a Client Component or plain Node.js code, or keep useState out of it (in <Counter> at Row 1 › Column 1 › Counter)"
+    );
+  }, 30_000);
+
+  it("loads each ESM entry, which imports nothing by name that it lacks, and renders", () => {
+    const out = runWithPackage("server.mjs", esm, { "hooks.mjs": hooks });
+    expect(out).toEqual({ hasCreateContext: "undefined", loaded: entries.map((entry) => entry || "."), greeting: true, provider: true });
+  }, 30_000);
+});
diff --git a/packages/react/src/regression/render-isolation.test.tsx b/packages/react/src/regression/render-isolation.test.tsx
index eef8eaae..0b4ffa49 100644
--- a/packages/react/src/regression/render-isolation.test.tsx
+++ b/packages/react/src/regression/render-isolation.test.tsx
@@ -2,13 +2,20 @@
  * One render never leaks into the next: data read by a component, an element
  * kept between renders, and the order renders run in don't carry over, and the
  * same input always gives the same output.
+ *
+ *   ISOLATION_RUNS=2000 ISOLATION_SEED=7 pnpm vitest run src/regression/render-isolation.test.tsx
  */
-import { describe, expect, it, vi } from "vitest";
-import React, { memo, useId, useState } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+import React, { Component, createContext, memo, Suspense, useContext, useEffect, useId, useState } from "react";
+import { flushSync } from "react-dom";
+import { createRoot, type Root } from "react-dom/client";
+import { renderToPipeableStream, renderToStaticMarkup, renderToString } from "react-dom/server";
+import { act } from "../test-utils";
+import { isIdleDispatcher, theSlot } from "../engine/dispatcher";
 import { renderToHtml, renderToHtmlParts, renderToPlainText } from "../utils/render-to-html";
 import { renderRowToJson, renderToJson } from "../utils/render-to-json";
-import { Email, Row, Column, Paragraph, Html } from "../index";
+import { Email, Page, Row, Column, Paragraph, Html, UnlayerProvider, registerTool } from "../index";
+import * as asyncRenderers from "../async";
 
 let user = "Alice";
 const Greeting = () => <Row><Column><Paragraph>Hi {user}</Paragraph></Column></Row>;
@@ -151,6 +158,347 @@ describe("an email rendered inside a component", () => {
   });
 });
 
+describe("a context the template doesn't provide", () => {
+  // react-dom's renders leave what their providers gave in the context once they're done: its streaming render, the
+  // values of the last part it waited for (a page's tenant, theme or locale); renderToString and renderToStaticMarkup,
+  // those of a render that failed or suspended inside a provider. A template reads the context's default, as
+  // react-dom's own static render (0.2's renderer) does, never what another request's render provided.
+  type Brand = { name: string };
+  const tenant: Brand = { name: "Tenant A Inc" };
+  const BRAND: Brand = { name: "Default Brand" };
+
+  /** A react-dom streaming render of a page, `around` its content, to its end: a part it waits for is inside. */
+  const streamed = (around: (page: React.ReactNode) => React.ReactElement) =>
+    new Promise<void>((resolve, reject) => {
+      let ready = false;
+      // (Its data comes once the shell is written, so the part always waits for it: from a timer, it could come before
+      // react-dom's scheduled render started, on a busy machine, which then rendered the page in one pass and left
+      // the context as it was.)
+      let release = () => {};
+      const data = new Promise<void>((done) => (release = done)).then(() => void (ready = true));
+      const Slow = () => {
+        if (!ready) throw data;
+        return <p>loaded</p>;
+      };
+      const page = around(<main><Suspense fallback={<i>…</i>}><Slow /></Suspense></main>);
+      // (Written nowhere: Node's streams aren't in this test's environment.)
+      const sink = { write: () => true, end: () => {}, destroy: () => {}, on: () => sink } as unknown as NodeJS.WritableStream;
+      const stream = renderToPipeableStream(page, { onShellReady: () => (stream.pipe(sink), release()), onAllReady: resolve, onShellError: reject });
+    });
+  const tenantPage = (context: React.Context<any>, value: unknown) => streamed((page) => <context.Provider value={value}>{page}</context.Provider>);
+  /** renderToString of a page that fails inside a provider (the app catches it), and of one that suspends there. */
+  const failed = (context: React.Context<any>, value: unknown) => {
+    const Fails = () => {
+      throw new Error("the page failed");
+    };
+    expect(() => renderToString(<context.Provider value={value}><Fails /></context.Provider>)).toThrow("the page failed");
+  };
+  const suspended = (context: React.Context<any>, value: unknown) => {
+    const Never = () => {
+      throw new Promise(() => {});
+    };
+    renderToString(<context.Provider value={value}><Suspense fallback="…"><Never /></Suspense></context.Provider>);
+  };
+  const footer = (context: React.Context<Brand>) => {
+    const Footer = () => <Paragraph>{`(c) ${useContext(context).name}`}</Paragraph>;
+    return <Email><Row><Column><Footer /></Column></Row></Email>;
+  };
+  const text = (email: React.ReactElement) => renderToPlainText(email).trim();
+  /** What a component reading it gives, in a template. */
+  const read = (context: React.Context<unknown>) => {
+    const Reads = () => <Paragraph>{String(useContext(context))}</Paragraph>;
+    return text(<Email><Row><Column><Reads /></Column></Row></Email>);
+  };
+
+  it("reads its default after react-dom streamed another request's page that provided it, as react-dom's own render does", async () => {
+    const Brand = createContext(BRAND);
+    expect(text(footer(Brand))).toBe("(c) Default Brand");
+    await tenantPage(Brand, tenant);
+    // (react-dom left the page's value in the context.)
+    expect((Brand as unknown as { _currentValue: Brand })._currentValue).toBe(tenant);
+    expect(text(footer(Brand))).toBe("(c) Default Brand");
+    expect(renderToHtml(footer(Brand))).not.toContain("Tenant A");
+    expect(JSON.stringify(renderToJson(footer(Brand)))).not.toContain("Tenant A");
+    expect((await asyncRenderers.renderToPlainText(footer(Brand))).trim()).toBe("(c) Default Brand");
+    const Reads = () => <>{useContext(Brand).name}</>;
+    expect(renderToStaticMarkup(<Reads />)).toBe("Default Brand");
+    // One no render has read before.
+    const Fresh = createContext(BRAND);
+    await tenantPage(Fresh, tenant);
+    expect(text(footer(Fresh))).toBe("(c) Default Brand");
+  });
+
+  it("reads it so in every way a component can: useContext, use(), a Consumer, a class's contextType", async () => {
+    const Brand = createContext(BRAND);
+    await tenantPage(Brand, tenant);
+    const use = (React as unknown as { use?: (usable: unknown) => Brand }).use;
+    const Hook = () => <Paragraph>{`hook ${useContext(Brand).name}`}</Paragraph>;
+    const Used = () => <Paragraph>{`use ${use!(Brand).name}`}</Paragraph>;
+    const Consumer = () => <Brand.Consumer>{(brand) => <Paragraph>{`consumer ${brand.name}`}</Paragraph>}</Brand.Consumer>;
+    class Classy extends Component {
+      static contextType = Brand;
+      render() {
+        return <Paragraph>{`class ${(this.context as Brand).name}`}</Paragraph>;
+      }
+    }
+    const kinds = use ? ["hook", "use", "consumer", "class"] : ["hook", "consumer", "class"];
+    const email = <Email><Row><Column><Hook />{use ? <Used /> : null}<Consumer /><Classy /></Column></Row></Email>;
+    for (const output of [renderToPlainText(email), await asyncRenderers.renderToPlainText(email)]) {
+      expect(output.split("\n").map((line) => line.trim()).filter(Boolean)).toEqual(kinds.map((kind) => `${kind} Default Brand`));
+    }
+  });
+
+  it("reads a default of undefined, an object default as itself, and a context no render ever provided", async () => {
+    const Maybe = createContext<string | undefined>(undefined);
+    const Same = createContext(BRAND);
+    const Never = createContext("never provided");
+    await streamed((page) => <Maybe.Provider value="tenant"><Same.Provider value={tenant}>{page}</Same.Provider></Maybe.Provider>);
+    const Reads = () => <Paragraph>{`${String(useContext(Maybe))} ${useContext(Same) === BRAND} ${useContext(Never)}`}</Paragraph>;
+    expect(text(<Email><Row><Column><Reads /></Column></Row></Email>)).toBe("undefined true never provided");
+  });
+
+  it("reads the template's own provider, and the providers around a component that starts a render, whatever another render left", async () => {
+    const Brand = createContext(BRAND);
+    await tenantPage(Brand, tenant);
+    const Footer = () => <Paragraph>{`(c) ${useContext(Brand).name}`}</Paragraph>;
+    expect(text(<Email><Brand.Provider value={{ name: "Its own" }}><Row><Column><Footer /></Column></Row></Brand.Provider></Email>)).toBe("(c) Its own");
+    let inner = "";
+    const Starts = () => ((inner = text(footer(Brand))), <Paragraph>outer</Paragraph>);
+    renderToHtml(<Email><Brand.Provider value={{ name: "The outer email" }}><Row><Column><Starts /></Column></Row></Brand.Provider></Email>);
+    expect(inner).toBe("(c) The outer email");
+  });
+
+  it("reads its default in async renders at once, when react-dom streams another page while they wait", async () => {
+    const Brand = createContext(BRAND);
+    // (One only read once they've waited: no render has read it before.)
+    const Later = createContext(BRAND);
+    let open = false;
+    const gate = streamed((page) => <Brand.Provider value={tenant}><Later.Provider value={tenant}>{page}</Later.Provider></Brand.Provider>).then(() => void (open = true));
+    const Before = () => <Paragraph>{`before ${useContext(Brand).name}`}</Paragraph>;
+    const After = () => {
+      if (!open) throw gate;
+      return <Paragraph>{`after ${useContext(Brand).name} ${useContext(Later).name}`}</Paragraph>;
+    };
+    const rows = <Row><Column><Before /><After /></Column></Row>;
+    const own = { name: "Its own" };
+    const [plain, provided] = await Promise.all([
+      asyncRenderers.renderToPlainText(<Email>{rows}</Email>),
+      asyncRenderers.renderToPlainText(<Email><Brand.Provider value={own}><Later.Provider value={own}>{rows}</Later.Provider></Brand.Provider></Email>),
+    ]);
+    expect((Brand as unknown as { _currentValue: Brand })._currentValue).toBe(tenant);
+    expect(plain.split(/\n+/).map((line) => line.trim())).toEqual(["before Default Brand", "after Default Brand Default Brand"]);
+    expect(provided.split(/\n+/).map((line) => line.trim())).toEqual(["before Its own", "after Its own Its own"]);
+  });
+
+  it("reads its default after renderToString failed or suspended inside a provider of it, whether a render read it before or not", async () => {
+    // An app's page that failed inside its tenant's provider, then the emails after it. A 0.3.0 build read the page's
+    // value in a context no render had read before, in every email till react-dom's next renderToString (0.2.1, which
+    // rendered with react-dom's renderToStaticMarkup, had react-dom put it back first).
+    const Brand = createContext(BRAND);
+    failed(Brand, tenant);
+    // (react-dom left the page's value in the context: renderToString's own.)
+    expect((Brand as unknown as { _currentValue2: Brand })._currentValue2).toBe(tenant);
+    expect(text(footer(Brand))).toBe("(c) Default Brand");
+    // Again, after each of the renderers had read it.
+    const renders = [() => text(footer(Brand)), () => renderToHtml(footer(Brand)), () => JSON.stringify(renderToJson(footer(Brand))), () => asyncRenderers.renderToPlainText(footer(Brand))];
+    for (const render of renders) {
+      failed(Brand, tenant);
+      expect(await render()).toContain("Default Brand");
+      suspended(Brand, tenant);
+      expect(await render()).not.toContain("Tenant A");
+    }
+    const Suspends = createContext(BRAND);
+    suspended(Suspends, tenant);
+    expect(text(footer(Suspends))).toBe("(c) Default Brand");
+  });
+
+  it("reads its default where a stream and a failed renderToString left another request's value in both of React's values", async () => {
+    // React keeps a context's default nowhere but in those two values (`_currentValue`, react-dom's streaming
+    // render's, and `_currentValue2`, renderToString's and renderToStaticMarkup's). A 0.3.0 build took a value both
+    // held for the default, and kept it for every render after: here, the tenant's, also over the default it had read
+    // before. react-dom's static renderer puts the second back before Elements reads it.
+    const Learned = createContext<unknown>("default");
+    expect(read(Learned)).toBe("default");
+    const Fresh = createContext<unknown>("default");
+    for (const context of [Learned, Fresh]) {
+      await tenantPage(context, "TenantA");
+      failed(context, "TenantA");
+      const values = context as unknown as { _currentValue: unknown; _currentValue2: unknown };
+      expect([values._currentValue, values._currentValue2]).toEqual(["TenantA", "TenantA"]);
+      expect(read(context)).toBe("default");
+      renderToString(<p />);
+      expect(read(context)).toBe("default");
+      await streamed((page) => <>{page}</>);
+      expect(read(context)).toBe("default");
+    }
+  });
+
+  it("after renderToString failed inside a provider of it: reads its default alone, and inside a later stream what the failed one left, till react-dom puts it back", async () => {
+    /** What a template reads in a component of a react-dom stream (no provider of the context in it). */
+    const inStream = async (context: React.Context<unknown>) => {
+      let seen = "";
+      const Page = () => ((seen = read(context)), <div />);
+      await streamed((page) => <><Page />{page}</>);
+      return seen;
+    };
+    // Inside an app's render, Elements reads what's there: react-dom's static renderer can't be asked to put back
+    // what one of its renders left there (inside the app's renderToString, that would be the app's own providers'),
+    // and react-dom's stream never sets the value the failed renderToString left (`_currentValue2`). Whether a render
+    // read it before or not; the case ARCHITECTURE.md lists (invariant 4).
+    const Learned = createContext<unknown>("default");
+    expect(read(Learned)).toBe("default");
+    const Fresh = createContext<unknown>("default");
+    for (const context of [Learned, Fresh]) {
+      failed(context, "TenantB");
+      expect(await inStream(context)).toBe("TenantB");
+      expect((context as unknown as { _currentValue2: unknown })._currentValue2).toBe("TenantB");
+      expect(read(context)).toBe("default");
+      expect(await inStream(context)).toBe("default");
+    }
+  });
+});
+
+describe("a context's default around an app's renders", () => {
+  // While no render of React's is running, Elements has react-dom's static renderer put back what a render of its own
+  // left in a context's value before it reads its default there (see a context the template doesn't provide, above).
+  // Inside an app's render it reads what's there: inside its renderToString, what that render provides.
+  const tenant = "TenantA";
+  /** A context, and what a template reading it renders (its plain text). */
+  const brand = <T,>(fallback: T) => {
+    const Brand = createContext<T>(fallback);
+    const Footer = () => <Paragraph>{`brand=${String(useContext(Brand))}`}</Paragraph>;
+    const email = <Email><Row><Column><Footer /></Column></Row></Email>;
+    return { Brand, email, read: () => renderToPlainText(email).trim() };
+  };
+  /** What a component of an app's renderToString reads, `value` provided around it. */
+  const inRenderToString = (Brand: React.Context<any>, read: () => string, value: unknown) => {
+    let seen = "";
+    const Page = () => ((seen = read()), <div />);
+    renderToString(<Brand.Provider value={value}><Page /></Brand.Provider>);
+    return seen;
+  };
+  /** renderToString of a page that fails inside a provider of `Brand` (the app catches it): its value stays in `_currentValue2`. */
+  const failedInside = (Brand: React.Context<any>, value: unknown) => {
+    const Fails = () => {
+      throw new Error("the page failed");
+    };
+    expect(() => renderToString(<Brand.Provider value={value}><Fails /></Brand.Provider>)).toThrow("the page failed");
+    expect((Brand as unknown as { _currentValue2: unknown })._currentValue2).toBe(value);
+  };
+  /** A client render to its end: act() in development, flushSync in production builds (which have no act()). */
+  const onClient = (root: Root, element: React.ReactElement) => (process.env.NODE_ENV === "production" ? flushSync(() => root.render(element)) : act(() => root.render(element)));
+  const acting = (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT;
+  beforeAll(() => void ((globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true));
+  afterAll(() => void ((globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = acting));
+  /** `element` rendered on the client to its end, and unmounted. */
+  const client = (element: React.ReactElement) => {
+    const root = createRoot(document.createElement("div"));
+    try {
+      onClient(root, element);
+      return root;
+    } finally {
+      onClient(root, <></>);
+    }
+  };
+
+  it("reads an app's renderToString provider, as 0.2 did, before and after a render alone", () => {
+    const { Brand, read } = brand("default");
+    expect(inRenderToString(Brand, read, tenant)).toBe("brand=TenantA");
+    expect(inRenderToString(Brand, read, tenant)).toBe("brand=TenantA");
+    expect(read()).toBe("brand=default");
+    // (A 0.3.0 build read its default there once a render alone had read it.)
+    expect(inRenderToString(Brand, read, tenant)).toBe("brand=TenantA");
+    expect(read()).toBe("brand=default");
+  });
+
+  it("reads one value for a context throughout a render that starts inside an app's renderToString and goes on after it", async () => {
+    const Brand = createContext("default");
+    let open = false;
+    const gate = new Promise((done) => setTimeout(done, 5)).then(() => void (open = true));
+    // The wrapper reads it inside renderToString; the content's components, after renderToString returned (the walk waits).
+    const Later = () => {
+      if (!open) throw gate;
+      return <Paragraph>{`later=${useContext(Brand)}`}</Paragraph>;
+    };
+    const Welcome = () => (
+      <Email>
+        <Row>
+          <Column>
+            <Paragraph>{`wrapper=${useContext(Brand)}`}</Paragraph>
+            <Brand.Consumer>{(value) => <Paragraph>{`consumer=${value}`}</Paragraph>}</Brand.Consumer>
+            <Later />
+          </Column>
+        </Row>
+      </Email>
+    );
+    const started = () => {
+      let text: Promise<string> | undefined;
+      const Page = () => ((text = asyncRenderers.renderToPlainText(<Welcome />)), <div />);
+      renderToString(<Brand.Provider value={tenant}><Page /></Brand.Provider>);
+      return text!.then((plain) => plain.split(/\n+/).map((line) => line.trim()));
+    };
+    // renderToString's value, throughout (react-dom has put the default back after it returned); alone, the default.
+    expect(await started()).toEqual(["wrapper=TenantA", "consumer=TenantA", "later=TenantA"]);
+    expect((await asyncRenderers.renderToPlainText(<Welcome />)).split(/\n+/).map((line) => line.trim())).toEqual(["wrapper=default", "consumer=default", "later=default"]);
+    expect(await started()).toEqual(["wrapper=TenantA", "consumer=TenantA", "later=TenantA"]);
+  });
+
+  it("reads a default of undefined", () => {
+    const { Brand, read } = brand<string | undefined>(undefined);
+    failedInside(Brand, "TenantB");
+    expect(read()).toBe("brand=undefined");
+    failedInside(Brand, "TenantB");
+    expect(read()).toBe("brand=undefined");
+  });
+
+  it("reads its default after a client render: React leaves its idle dispatcher in the slot, which is no render running", () => {
+    client(<p>an app's client render</p>);
+    // (React's ContextOnlyDispatcher, its hooks one function: a React that changes it fails here, not by reading what
+    // a failed renderToString left.)
+    expect(isIdleDispatcher(theSlot()?.get())).toBe(true);
+    const { Brand, read } = brand("default");
+    failedInside(Brand, "TenantB");
+    expect(read()).toBe("brand=default");
+  });
+
+  it("reads its default in an effect of a client render, where React's dispatcher is idle", async () => {
+    const { Brand, read } = brand("default");
+    const seen: string[] = [];
+    const Preview = () => {
+      useEffect(() => void seen.push(read()), []);
+      return <div />;
+    };
+    failedInside(Brand, "TenantB");
+    client(<Preview />);
+    await new Promise((done) => setTimeout(done, 0));
+    expect(seen).toEqual(["brand=default"]);
+  });
+
+  it("reads what's there while a client render runs: its dispatchers aren't idle", () => {
+    const { Brand, read } = brand("default");
+    expect(read()).toBe("brand=default");
+    // Inside an app's render, react-dom's static renderer isn't asked to put back what one of its renders left (see
+    // a context the template doesn't provide, above): here, what a renderToString left, which is also the client's
+    // provider's.
+    failedInside(Brand, "TenantB");
+    const seen: Array<[boolean, string]> = [];
+    const Preview = ({ n }: { n: number }) => (seen.push([isIdleDispatcher(theSlot()?.get()), read()]), <div>{n}</div>);
+    const root = createRoot(document.createElement("div"));
+    try {
+      onClient(root, <Brand.Provider value="TenantB"><Preview n={1} /></Brand.Provider>);
+      onClient(root, <Brand.Provider value="TenantB"><Preview n={2} /></Brand.Provider>);
+    } finally {
+      onClient(root, <></>);
+    }
+    // Mounting and updating, a host: what's there is read.
+    expect(seen.map(([idle]) => idle)).toEqual(seen.map(() => false));
+    expect(seen.map(([, text]) => text)).toEqual(seen.map(() => "brand=TenantB"));
+    expect(seen.length).toBeGreaterThanOrEqual(2);
+    expect(read()).toBe("brand=default");
+    renderToString(<p />);
+  });
+});
+
 describe("a render", () => {
   // A prerendered page that reads one of these changes with each build: Next.js's Cache Components (its new apps'
   // default since 16) fail the build on one. 0.2.0 asked crypto.getRandomValues() for each render's nonce, so no
@@ -204,3 +552,192 @@ describe("a render", () => {
     }
   });
 });
+
+// ── What rendered before ────────────────────────────────────────────────────
+
+/** The text of a component's `useId()` (`uid1 :R5:`), where it shows in the HTML, the plain text and the design. */
+const Uid = ({ n }: { n: number }) => <Paragraph>{`uid${n} ${useId()}`}</Paragraph>;
+const uids = (output: string) => [...output.matchAll(/uid\d [^<"\\\n]+/g)].map((m) => m[0]);
+
+describe("a root kept between renders, with useId() in its content", () => {
+  // A template wrapper that calls useId() moves the ids of the content after it, as React's do. The ids it moved were
+  // kept by the root's content, so the root rendered again on its own, or by a wrapper that calls none, had them.
+  const content = <Row><Column><Uid n={1} /></Column></Row>;
+  const root = <Email>{content}</Email>;
+  const Forked = () => (useId(), root);
+  const Plain = () => root;
+
+  it("gives the ids of its own render, whatever wrapper returned it before", () => {
+    const outputs = () => [renderToHtml(root), renderToHtml(<Plain />), renderToHtmlParts(root).body, renderToPlainText(<Plain />), JSON.stringify(renderToJson(root)), JSON.stringify(renderToJson(<Plain />))];
+    const before = outputs();
+    const forked = [renderToHtml(<Forked />), JSON.stringify(renderToJson(<Forked />))];
+    // (The wrapper's useId() moves the content's.)
+    expect(uids(forked[0])).not.toEqual(uids(before[0]));
+    expect(uids(forked[1])).toEqual(uids(forked[0]));
+    expect(outputs()).toEqual(before);
+    expect(new Set(outputs().map((output) => uids(output).join()))).toEqual(new Set([uids(before[0]).join()]));
+  });
+});
+
+describe("a template whose root's settings can't be read (its root inside markup, or one of several)", () => {
+  it("says so on every render of it, not only the first, in every renderer", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const email = <Email><Row><Column><Paragraph>Hi</Paragraph></Column></Row></Email>;
+      const Welcome = () => email;
+      const InMarkup = () => <div>{email}</div>;
+      // (Where unwrapping stops, or inside what a component renders, where only the walk finds it.)
+      for (const element of [<InMarkup />, <div>{email}</div>, <><Welcome /><Welcome /></>]) {
+        warn.mockClear();
+        const said = () => warn.mock.calls.filter((call) => String(call[0]).includes("couldn't unwrap")).length;
+        const html = renderToHtml(element);
+        expect(said()).toBe(1);
+        expect(renderToHtml(element)).toBe(html);
+        expect(said()).toBe(2);
+        renderToHtmlParts(element);
+        renderToPlainText(element);
+        expect(said()).toBe(4);
+        expect(await asyncRenderers.renderToHtml(element)).toBe(html);
+        await asyncRenderers.renderToHtmlParts(element);
+        await asyncRenderers.renderToPlainText(element);
+        expect(said()).toBe(7);
+        // What each says, sync or async, but for the render function's name.
+        expect(new Set(warn.mock.calls.map((call) => String(call[0]).replace(/^\[Unlayer\] \w+: /, "[Unlayer] "))).size).toBe(1);
+      }
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
+
+describe("a root kept between renders, under an <UnlayerProvider config> in one of them", () => {
+  it("has that config in that render only", () => {
+    const root = <Email><Row><Column><Uid n={1} /></Column></Row></Email>;
+    const Provided = () => <UnlayerProvider config={{ textDirection: "rtl", idPrefix: "p-" }}>{root}</UnlayerProvider>;
+    const outputs = () => [renderToHtml(root), JSON.stringify(renderToJson(root))];
+    const before = outputs();
+    const provided = [renderToHtml(<Provided />), JSON.stringify(renderToJson(<Provided />))];
+    expect(provided[0]).toContain('dir="rtl"');
+    expect(uids(provided[0])[0]).toContain("p-");
+    expect(provided[1]).toContain('"textDirection":"rtl"');
+    expect(outputs()).toEqual(before);
+    expect(before[0]).not.toContain('dir="rtl"');
+  });
+});
+
+/** A seeded random number generator (mulberry32): the same templates and order every run. */
+function random(seed: number) {
+  let a = seed >>> 0;
+  const next = () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+  return { next, pick: <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)] };
+}
+
+describe("templates that share elements kept between renders, at random", () => {
+  // The kept elements renders shared what they found in (a root and its content, an <UnlayerProvider> around it), in
+  // templates with and without wrappers that call useId(), a custom tool with a head, a block whose exporter fails, and
+  // each renderer's options. Each template's output, and what each render says, is the one its first render gave,
+  // whatever rendered before it; and two async renders at once give what each gives alone.
+  const Badge = registerTool({
+    name: "isolation_badge",
+    values: { label: "" },
+    renderer: {
+      exporters: { email: (values) => `<b>badge ${values.label}</b>`, web: (values) => `<i>badge ${values.label}</i>` },
+      head: { css: (values) => `.${values._meta?.htmlID} { color: #c00; }` },
+    },
+  });
+  const Broken = registerTool({ name: "isolation_broken", renderer: { exporters: { web: () => { throw new Error("broken exporter"); } } } });
+  const contents = [
+    <Row><Column><Uid n={1} /><Badge label="a" /></Column></Row>,
+    [<Row key="1"><Column><Paragraph>Two rows</Paragraph></Column></Row>, <Row key="2"><Column><Uid n={2} /></Column></Row>],
+    <><Row><Column><Badge label="c" /><Uid n={3} /></Column></Row><Row><Column><Uid n={4} /></Column></Row></>,
+    <Row><Column><Paragraph>Before</Paragraph><Broken /><Uid n={5} /></Column></Row>,
+  ];
+  const roots = contents.flatMap((content) => [<Email>{content}</Email>, <Page>{content}</Page>, <Email textDirection="rtl" config={{ idPrefix: "r-" }}>{content}</Email>]);
+  const kept = [
+    ...roots,
+    ...roots.slice(0, 6).map((root) => <UnlayerProvider config={{ textDirection: "rtl", idPrefix: "p-" }}>{root}</UnlayerProvider>),
+    <Suspense>{roots[0]}</Suspense>,
+    // (Said, as its root's settings go unread.)
+    <div>{roots[1]}</div>,
+  ];
+  const Forked = ({ of }: { of: React.ReactElement }) => (useId(), of);
+  const Plain = ({ of }: { of: React.ReactElement }) => of;
+  const Twice = ({ of }: { of: React.ReactElement }) => (useId(), useId(), <Plain of={of} />);
+  const MemoForked = memo(Forked);
+  const wrappers = [Forked, Plain, Twice, MemoForked] as React.ComponentType<{ of: React.ReactElement }>[];
+  const options = [{}, { idPrefix: "o-" }, { textDirection: "rtl" }, { onError: "omit" }] as const;
+  type Template = { element: React.ReactElement; options: (typeof options)[number] };
+
+  const parts = (p: { omitted: Array<{ message: string; component: string; position: string }> }) => JSON.stringify({ ...p, omitted: p.omitted.map((e) => [e.message, e.component, e.position]) });
+  const renderers: Record<string, (t: Template) => unknown> = {
+    html: (t) => renderToHtml(t.element, t.options),
+    parts: (t) => parts(renderToHtmlParts(t.element, t.options)),
+    text: (t) => renderToPlainText(t.element, t.options),
+    json: (t) => JSON.stringify(renderToJson(t.element, t.options as object)),
+    "async html": (t) => asyncRenderers.renderToHtml(t.element, t.options),
+    "async parts": async (t) => parts(await asyncRenderers.renderToHtmlParts(t.element, t.options)),
+    "async text": (t) => asyncRenderers.renderToPlainText(t.element, t.options),
+    "async json": async (t) => JSON.stringify(await asyncRenderers.renderToJson(t.element, t.options as object)),
+  };
+  const RUNS = Number(process.env.ISOLATION_RUNS ?? 120);
+  const SEED = Number(process.env.ISOLATION_SEED ?? 20261018);
+
+  it(`each give their own output after any other (${RUNS} pairs, seed ${SEED})`, async () => {
+    const r = random(SEED);
+    const templates: Template[] = Array.from({ length: 24 }, () => {
+      let element = r.pick(kept);
+      for (let n = Math.floor(r.next() * 3); n > 0; n--) element = React.createElement(r.pick(wrappers), { of: element });
+      return { element, options: r.pick(options) };
+    });
+    const said: string[] = [];
+    const spies = (["warn", "error"] as const).map((level) => vi.spyOn(console, level).mockImplementation((...args) => void said.push(`${level}: ${String(args[0])}`)));
+    /** What a render gives: its output or its error, and what it said. */
+    const observe = async (name: string, t: Template) => {
+      const from = said.length;
+      let out: unknown;
+      try {
+        out = await renderers[name](t);
+      } catch (error) {
+        out = `threw ${(error as Error).message}`;
+      }
+      return JSON.stringify({ out, said: said.slice(from) });
+    };
+    const first = new Map<string, string>();
+    const check = async (name: string, i: number, after: string) => {
+      const got = await observe(name, templates[i]);
+      const key = `${name} ${i}`;
+      if (!first.has(key)) first.set(key, got);
+      expect(got, `${key}, after ${after} (seed ${SEED})`).toBe(first.get(key));
+    };
+    try {
+      for (let run = 0; run < RUNS; run++) {
+        const [a, b] = [Math.floor(r.next() * templates.length), Math.floor(r.next() * templates.length)];
+        for (const name of Object.keys(renderers)) {
+          await check(name, b, "nothing");
+          await check(name, a, `${name} ${b}`);
+          await check(name, b, `${name} ${a}`);
+          await check(name, a, `${name} ${b}`);
+        }
+        // Two async renders at once: what each gives alone.
+        for (const name of Object.keys(renderers).filter((n) => n.startsWith("async"))) {
+          const outputs = await Promise.all([a, b].map(async (i) => {
+            try {
+              return await renderers[name](templates[i]);
+            } catch (error) {
+              return `threw ${(error as Error).message}`;
+            }
+          }));
+          [a, b].forEach((i, k) => expect(JSON.stringify(JSON.parse(first.get(`${name} ${i}`)!).out), `${name} ${i} with ${a === i ? b : a} at once (seed ${SEED})`).toBe(JSON.stringify(outputs[k])));
+        }
+      }
+    } finally {
+      for (const spy of spies) spy.mockRestore();
+    }
+  }, Math.max(20_000, RUNS * 100));
+});
diff --git a/packages/react/src/render-contract.test.tsx b/packages/react/src/render-contract.test.tsx
index aeeb490c..017c15b2 100644
--- a/packages/react/src/render-contract.test.tsx
+++ b/packages/react/src/render-contract.test.tsx
@@ -6,6 +6,15 @@ import Row from "./components/Row";
 import { Column } from "./components/Column";
 import Paragraph from "./components/Paragraph";
 import Heading from "./components/Heading";
+import Image from "./components/Image";
+import Divider from "./components/Divider";
+import Video from "./components/Video";
+import Email from "./components/Email";
+import Page from "./components/Page";
+import Document from "./components/Document";
+import { renderToJson } from "./utils/render-to-json";
+import { exporters as EXPORTERS, TextExporters } from "@unlayer/exporters";
+import { generateHtmlFromTextJson } from "@unlayer-internal/shared-elements";
 
 /**
  * Output-contract tests.
@@ -91,3 +100,80 @@ describe("Body carries its default values", () => {
     expect(html).toContain("padding:10px"); // email content wrapper (no spaces)
   });
 });
+
+/**
+ * Editor parity: what renderToHtml writes for a block is what the editor exports for the design renderToJson writes,
+ * its content type's exporter on its values, in its column, row and body. (Ids aside: the HTML numbers a Paragraph
+ * `u_content_paragraph_N`, the design `u_content_text_N`.)
+ */
+describe("a block's HTML is the editor's export of its design", () => {
+  const TYPES: Record<string, keyof typeof EXPORTERS> = { text: "Text", heading: "Heading", image: "Image", divider: "Divider", video: "Video", html: "Html" };
+  const LEXICAL = JSON.stringify({ root: { type: "root", children: [
+    { type: "paragraph", children: [{ type: "text", text: "Bold", format: 1 }, { type: "text", text: " and " }, { type: "link", url: "https://example.com", children: [{ type: "text", text: "a link" }] }] },
+    { type: "paragraph", children: [{ type: "text", text: "A second paragraph" }] },
+  ] } });
+  const tree = (Root: React.FC<any>) => (
+    <Root contentWidth="600px">
+      <Row>
+        <Column>
+          <Paragraph fontSize="16px">Plain &amp; text with "quotes" &lt;tags&gt;</Paragraph>
+          <Paragraph html={'Per <span style="font-size: 40px">$20</span>, H<sub>2</sub>O, x<sup>2</sup>, <code>code</code>'} lineHeight="1.6" />
+          <Paragraph values={{ textJson: LEXICAL }} lineHeight="24px" />
+          <Heading>A heading</Heading>
+          <Image src="https://example.com/a.png" alt="Responsive" />
+          <Image src="https://example.com/b.png" alt="Half" width="50%" />
+          <Image src="https://example.com/c.png" alt="Pinned" width={290} />
+          <Divider />
+          <Video videoUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+        </Column>
+      </Row>
+      <Row cells={[1, 2]} padding="0px 20px">
+        <Column padding="8px">
+          <Paragraph text="In a narrow column" />
+          <Image src="https://example.com/d.png" alt="Narrow" />
+        </Column>
+        <Column>
+          <Image src="https://example.com/e.png" alt="Wide" width="100%" />
+        </Column>
+      </Row>
+    </Root>
+  );
+
+  it.each([["email", Email], ["web", Page], ["document", Document]] as const)("%s", (mode, Root) => {
+    const html = renderToHtml(tree(Root));
+    const design = renderToJson(tree(Root)) as any;
+    const body = design.body.values;
+    let blocks = 0;
+    for (const row of design.body.rows) {
+      row.columns.forEach((column: any, columnIndex: number) => {
+        for (const content of column.contents) {
+          const meta = { exporterConfig: { generateHtmlFromTextJson }, columnIndex, columnValues: column.values, rowCells: row.cells, rowValues: row.values, bodyValues: body };
+          // (A block with no document exporter exports as on the web, in the editor too.)
+          const exporter = (EXPORTERS[TYPES[content.type]] as any)[mode] ?? (EXPORTERS[TYPES[content.type]] as any).web;
+          const exported = String(exporter(content.values, 0, columnIndex, row.cells, body, row.values, undefined, meta));
+          expect(html, `${content.type} ${content.values._meta.htmlID}`).toContain(exported.trim());
+          blocks++;
+        }
+      });
+    }
+    expect(blocks).toBe(12);
+  });
+
+  it("a Paragraph's HTML is the text block's exporter on its design's text (no <p>, its line height as given)", () => {
+    for (const mode of ["email", "web", "document"] as const) {
+      const Root = { email: Email, web: Page, document: Document }[mode];
+      const one = (
+        <Root>
+          <Row>
+            <Column>
+              <Paragraph>Hello</Paragraph>
+            </Column>
+          </Row>
+        </Root>
+      );
+      const values = (renderToJson(one) as any).body.rows[0].columns[0].contents[0].values;
+      expect(values.text).toBe("Hello");
+      expect(renderToHtml(one)).toContain(String(TextExporters[mode]!(values, 0, 0, [], {}, {}, undefined, { exporterConfig: {} } as any)).trim());
+    }
+  });
+});
diff --git a/packages/react/src/tailwind/Tailwind.tsx b/packages/react/src/tailwind/Tailwind.tsx
new file mode 100644
index 00000000..13f62e11
--- /dev/null
+++ b/packages/react/src/tailwind/Tailwind.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+
+/** A Tailwind config, as React Email's `<Tailwind config>` takes it: `{ theme: { extend: { colors: { brand: "#007291" } } } }`. */
+export type TailwindConfig = { theme?: Record<string, unknown>; presets?: TailwindConfig[]; plugins?: unknown[]; [key: string]: unknown };
+
+/** Tailwind compiled for one config: `await loadTailwind(config)`. */
+export interface TailwindHandle {
+  /** The config it was compiled from (undefined: Tailwind's default theme). */
+  readonly config: TailwindConfig | undefined;
+}
+
+export interface TailwindProps {
+  children?: React.ReactNode;
+  /** Tailwind compiled for your config: `await loadTailwind(config)`. */
+  tw?: TailwindHandle;
+  /**
+   * A Tailwind config, as React Email's `<Tailwind>` takes it. The renderers from "@unlayer/react-elements" are
+   * synchronous, so they need `tw` too; the async renderers ("@unlayer/react-elements/async") compile it.
+   */
+  config?: TailwindConfig;
+}
+
+/** On a compiled Tailwind (its resolver), on <Tailwind> (its rewrite), and on its errors: one for every copy of Elements. */
+export const TAILWIND = Symbol.for("@unlayer/react-elements/tailwind");
+
+/**
+ * What a handle does with a component's classes: its props, explicit ones kept over those from classes (`rtl`: in a
+ * right-to-left document); and, before a render rewrites any, the classes in its components' props (`records`, each
+ * with its component's `props`), all built at once (`prepare`: see the rewrite's). `render`: the render's key (each
+ * render's classes are read together: a render reads its first 2,000 different ones), where the main entry gives one.
+ */
+export interface Resolver {
+  props(name: string, className: string, explicit: Record<string, any>, defaults?: Record<string, any>, rtl?: boolean, render?: object): Record<string, any>;
+  prepare?(records: readonly unknown[], render?: object): void;
+  /** Where its classes can't be read till Tailwind has compiled again: when they can (the async renderers wait for it). */
+  ready?(): Promise<void> | undefined;
+}
+
+/**
+ * The handles an async render compiled, by config and by the <Tailwind> it's for (this copy's): the main entry gives
+ * them to a rewrite in that render (from its scope), never one a synchronous render could find warm.
+ */
+type Compiled = (config: TailwindConfig | undefined, type: unknown) => unknown;
+
+function resolver({ tw, config }: TailwindProps, compiled?: unknown): Resolver {
+  const handle = (tw ?? (typeof compiled === "function" ? (compiled as Compiled)(config, Tailwind) : undefined)) as Record<symbol, Resolver> | undefined;
+  if (handle?.[TAILWIND]) return handle[TAILWIND];
+  throw Object.assign(
+    new Error(
+      tw
+        ? '[Unlayer] <Tailwind tw> takes `await loadTailwind(config)` from "@unlayer/react-elements/tailwind".'
+        : '[Unlayer] <Tailwind config> needs `tw`: `await loadTailwind(config)` from "@unlayer/react-elements/tailwind", or the async renderers ("@unlayer/react-elements/async"), which compile it (these are synchronous).'
+    ),
+    { [TAILWIND]: { config } }
+  );
+}
+
+/**
+ * A component's props with its `className` (and classes in its `html`) turned into props: the scope's rewrite. `rtl`:
+ * the render's root reads right to left, as the main entry's render says (an older copy of it gives none); `compiled`:
+ * what the render compiled, where it's an async render's (see Compiled).
+ */
+function rewrite(scope: TailwindProps, name: string, defaults: Record<string, any> | undefined, props: Record<string, any>, rtl?: boolean, compiled?: unknown, render?: object): Record<string, any> {
+  const { className, ...explicit } = props;
+  return resolver(scope, compiled).props(name, className ?? "", explicit, defaults, rtl, render);
+}
+
+/**
+ * Before a render rewrites any component's props: the records in its scopes with this handle (`records`, each with
+ * its component's `props`, whose `className` and `html` are read; the same list for each of those scopes), their
+ * classes built at once by the scope's handle, once per render. Tailwind builds its whole stylesheet again for each
+ * class it hasn't built, so the classes met one component at a time would take the square of their number. The main
+ * entry calls it, where the scope's rewrite has it (an older copy's doesn't), with one object, which a later release
+ * can give more in; what it returns isn't read. A scope without a handle is left for the rewrite to say, at the
+ * component it's for; what Tailwind throws (a plugin's error) fails the render, and a later one where the component
+ * whose class it was reads it (see declarationReader).
+ */
+function prepare({ scope, records, compiled, render }: { scope: TailwindProps; records: readonly unknown[]; compiled?: unknown; render?: object }): void {
+  let handle: Resolver;
+  try {
+    handle = resolver(scope, compiled);
+  } catch {
+    return;
+  }
+  handle.prepare?.(records, render);
+}
+(rewrite as unknown as Record<string, unknown>).prepare = prepare;
+
+const ROOTS = new Set(["Body", "Email", "Page", "Document"]);
+
+/** Rendered (not collected): it goes inside the roots it's around (their classes are its, see the root's Body). */
+function placed({ children, ...props }: TailwindProps): React.ReactNode {
+  return React.Children.map(children, (child) =>
+    React.isValidElement<{ children?: React.ReactNode }>(child) && ROOTS.has((child.type as { displayName?: string })?.displayName ?? "")
+      ? React.cloneElement(child, undefined, React.createElement(Tailwind, props, child.props.children))
+      : child
+  );
+}
+
+/**
+ * Tailwind - Turns the `className` of the Elements components inside it into their props.
+ *
+ * `<Button className="bg-blue-600 px-6 text-white">` renders as `<Button backgroundColor="#155dfc" padding="10px 24px"
+ * color="#fff">`, so the design stays editable; props you set win over classes, styles no prop takes are inline
+ * styles, and a class that can't apply in an email is reported. Put it around the root (or inside it, around
+ * everything) to style the root too.
+ *
+ * @example
+ * ```tsx
+ * const tw = await loadTailwind({ theme: { extend: { colors: { brand: "#007291" } } } });
+ * renderToHtml(
+ *   <Tailwind tw={tw}>
+ *     <Email className="bg-gray-100">
+ *       <Row className="bg-white"><Column className="p-6"><Paragraph className="text-lg text-brand">Hi</Paragraph></Column></Row>
+ *     </Email>
+ *   </Tailwind>
+ * );
+ * ```
+ */
+export function Tailwind(props: TailwindProps): React.ReactElement {
+  return <>{placed(props)}</>;
+}
+
+Tailwind.displayName = "Tailwind";
+// A template's collecting walk records it, with this rewrite (see the main entry's utils/tailwind.ts and record.tsx).
+(Tailwind as unknown as Record<symbol, unknown>)[TAILWIND] = rewrite;
+
+export default Tailwind;
diff --git a/packages/react/src/tailwind/color.ts b/packages/react/src/tailwind/color.ts
new file mode 100644
index 00000000..160d7ee2
--- /dev/null
+++ b/packages/react/src/tailwind/color.ts
@@ -0,0 +1,205 @@
+/**
+ * Colors as email clients read them. Tailwind's palette is written in `oklch()`, and its opacity modifiers
+ * (`bg-black/50`) in `color-mix()`, which no email client and few older browsers support: each color function is
+ * converted to `#rrggbb`, or `rgba(r, g, b, a)` when it's translucent (the forms the exporters expect). Colors
+ * outside sRGB are clipped to it, as the hex values Tailwind's documentation lists are.
+ */
+import { skip, split } from "./css";
+
+/** Red, green, blue in sRGB (0–1, maybe outside it before clipping), and alpha. */
+type Rgba = [number, number, number, number];
+
+const toLinear = (c: number) => Math.sign(c) * (Math.abs(c) <= 0.04045 ? Math.abs(c) / 12.92 : ((Math.abs(c) + 0.055) / 1.055) ** 2.4);
+const toGamma = (c: number) => Math.sign(c) * (Math.abs(c) <= 0.0031308 ? 12.92 * Math.abs(c) : 1.055 * Math.abs(c) ** (1 / 2.4) - 0.055);
+const multiply = (m: number[][], v: number[]) => m.map((row) => row[0] * v[0] + row[1] * v[1] + row[2] * v[2]);
+
+function oklabToRgb([l, a, b]: number[]): number[] {
+  const lms = multiply(
+    [
+      [1, 0.3963377774, 0.2158037573],
+      [1, -0.1055613458, -0.0638541728],
+      [1, -0.0894841775, -1.291485548],
+    ],
+    [l, a, b]
+  ).map((x) => x ** 3);
+  return multiply(
+    [
+      [4.0767416621, -3.3077115913, 0.2309699292],
+      [-1.2684380046, 2.6097574011, -0.3413193965],
+      [-0.0041960863, -0.7034186147, 1.707614701],
+    ],
+    lms
+  ).map(toGamma);
+}
+
+function rgbToOklab(rgb: number[]): number[] {
+  const lms = multiply(
+    [
+      [0.4122214708, 0.5363325363, 0.0514459929],
+      [0.2119034982, 0.6806995451, 0.1073969566],
+      [0.0883024619, 0.2817188376, 0.6299787005],
+    ],
+    rgb.map(toLinear)
+  ).map(Math.cbrt);
+  return multiply(
+    [
+      [0.2104542553, 0.793617785, -0.0040720468],
+      [1.9779984951, -2.428592205, 0.4505937099],
+      [0.0259040371, 0.7827717662, -0.808675766],
+    ],
+    lms
+  );
+}
+
+/** CIE Lab (D50, as CSS's `lab()`) to sRGB. */
+function labToRgb([l, a, b]: number[]): number[] {
+  const fy = (l + 16) / 116;
+  const fx = fy + a / 500;
+  const fz = fy - b / 200;
+  const k = 24389 / 27;
+  const e = 216 / 24389;
+  const xyz = [
+    ((fx ** 3 > e ? fx ** 3 : (116 * fx - 16) / k) * 0.3457) / 0.3585,
+    l > k * e ? fy ** 3 : l / k,
+    ((fz ** 3 > e ? fz ** 3 : (116 * fz - 16) / k) * (1 - 0.3457 - 0.3585)) / 0.3585,
+  ];
+  // D50 to D65 (Bradford), then XYZ to linear sRGB: CSS Color 4's matrices.
+  const d65 = multiply(
+    [
+      [0.955473421488075, -0.02309845494876471, 0.06325924320057072],
+      [-0.0283697093338637, 1.0099953980813041, 0.021041441191917323],
+      [0.012314014864481998, -0.020507649298898964, 1.330365926242124],
+    ],
+    xyz
+  );
+  return multiply(
+    [
+      [3.2409699419045226, -1.537383177570094, -0.4986107602930034],
+      [-0.9692436362808796, 1.8759675015077202, 0.04155505740717559],
+      [0.05563007969699366, -0.20397695888897652, 1.0569715142428786],
+    ],
+    d65
+  ).map(toGamma);
+}
+
+function hslToRgb(h: number, s: number, l: number): number[] {
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    return l - s * Math.min(l, 1 - l) * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+  };
+  return [f(0), f(8), f(4)];
+}
+
+/** A number, a percentage of `full`, or `none` (0). */
+function number(text: string, full = 1): number {
+  if (text === "none") return 0;
+  const value = parseFloat(text);
+  return text.endsWith("%") ? (value / 100) * full : value;
+}
+
+/** An angle in degrees. */
+function angle(text: string): number {
+  if (text === "none") return 0;
+  const value = parseFloat(text);
+  if (text.endsWith("turn")) return value * 360;
+  if (text.endsWith("grad")) return value * 0.9;
+  if (text.endsWith("rad")) return (value * 180) / Math.PI;
+  return value;
+}
+
+const HEX = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const NAMED: Record<string, Rgba> = { transparent: [0, 0, 0, 0], black: [0, 0, 0, 1], white: [1, 1, 1, 1] };
+
+/** A color's channels: the functions Tailwind writes, hex, and the names it uses; undefined for others. */
+function parse(text: string): Rgba | undefined {
+  const value = text.trim().toLowerCase();
+  if (NAMED[value]) return NAMED[value];
+  const hex = HEX.exec(value)?.[1];
+  if (hex) {
+    const [r, g, b, a = 1] = (hex.length <= 4 ? [...hex].map((d) => d + d) : hex.match(/../g)!).map((d) => parseInt(d, 16) / 255);
+    return [r, g, b, a];
+  }
+  const open = value.indexOf("(");
+  if (open < 0 || !value.endsWith(")")) return undefined;
+  const name = value.slice(0, open);
+  const inner = value.slice(open + 1, -1);
+  if (name === "color-mix") return mix(inner);
+  const [channels, slashed] = split(inner, "/");
+  const parts = channels.split(/[\s,]+/).filter(Boolean);
+  if (slashed === undefined && parts.length === 4) parts.length = 3;
+  const alphaText = slashed?.trim() ?? split(inner, ",")[3]?.trim();
+  const alpha = alphaText === undefined ? 1 : number(alphaText);
+  if (parts.length !== 3) return undefined;
+  const [x, y, z] = parts;
+  let rgb: number[];
+  if (name === "rgb" || name === "rgba") rgb = [number(x, 255), number(y, 255), number(z, 255)].map((c) => c / 255);
+  else if (name === "hsl" || name === "hsla") rgb = hslToRgb(angle(x), number(y, 100) / 100, number(z, 100) / 100);
+  else if (name === "hwb") {
+    const [w, b] = [number(y, 100) / 100, number(z, 100) / 100];
+    rgb = w + b >= 1 ? [w / (w + b), w / (w + b), w / (w + b)] : hslToRgb(angle(x), 1, 0.5).map((c) => c * (1 - w - b) + w);
+  } else if (name === "oklab") rgb = oklabToRgb([number(x), number(y, 0.4), number(z, 0.4)]);
+  else if (name === "oklch") {
+    const [c, h] = [number(y, 0.4), (angle(z) * Math.PI) / 180];
+    rgb = oklabToRgb([number(x), c * Math.cos(h), c * Math.sin(h)]);
+  } else if (name === "lab") rgb = labToRgb([number(x, 100), number(y, 125), number(z, 125)]);
+  else if (name === "lch") {
+    const [c, h] = [number(y, 150), (angle(z) * Math.PI) / 180];
+    rgb = labToRgb([number(x, 100), c * Math.cos(h), c * Math.sin(h)]);
+  } else return undefined;
+  return [rgb[0], rgb[1], rgb[2], Math.max(0, Math.min(1, alpha))];
+}
+
+/** `color-mix(in <space>, a [p], b [p])`, mixed in oklab (oklch, lab and lch too) or in sRGB, alpha premultiplied. */
+function mix(inner: string): Rgba | undefined {
+  const [space, ...colors] = split(inner, ",").map((s) => s.trim());
+  if (colors.length !== 2 || !space.startsWith("in ")) return undefined;
+  const stops = colors.map((stop) => {
+    const percent = /\s(-?[\d.]+)%$/.exec(stop) ?? /^(-?[\d.]+)%\s/.exec(stop);
+    return { color: parse(percent ? stop.replace(percent[0], " ").trim() : stop), weight: percent ? parseFloat(percent[1]) / 100 : undefined };
+  });
+  const [a, b] = stops;
+  if (!a.color || !b.color) return undefined;
+  let p = a.weight ?? (b.weight === undefined ? 0.5 : 1 - b.weight);
+  let q = b.weight ?? 1 - p;
+  const sum = p + q;
+  if (sum <= 0) return undefined;
+  [p, q] = [p / sum, q / sum];
+  const linear = /srgb/.test(space) && !/oklab|oklch|lab|lch/.test(space);
+  const into = (c: Rgba) => (linear ? (space.includes("linear") ? c.slice(0, 3).map(toLinear) : c.slice(0, 3)) : rgbToOklab(c.slice(0, 3)));
+  const [x, y] = [into(a.color), into(b.color)];
+  const alpha = a.color[3] * p + b.color[3] * q;
+  const channels = x.map((c, i) => (alpha ? (c * a.color![3] * p + y[i] * b.color![3] * q) / alpha : 0));
+  const rgb = linear ? (space.includes("linear") ? channels.map(toGamma) : channels) : oklabToRgb(channels);
+  return [rgb[0], rgb[1], rgb[2], alpha * Math.min(1, sum)];
+}
+
+/** A color as `#rrggbb`, or `rgba(r, g, b, a)` when translucent. */
+function format([r, g, b, a]: Rgba): string {
+  const bytes = [r, g, b].map((c) => Math.round(Math.max(0, Math.min(1, c)) * 255));
+  if (a < 1) return `rgba(${bytes.join(", ")}, ${parseFloat(a.toFixed(3))})`;
+  return `#${bytes.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+}
+
+const FUNCTIONS = /\b(?:color-mix|oklch|oklab|lab|lch|rgba?|hsla?|hwb)\(/gi;
+
+/**
+ * `value` with each color function in it, and each translucent hex color (`#ff000080`, which Outlook can't read), as
+ * `#rrggbb` or `rgba()`; one it can't read is left as it is.
+ */
+export function emailColors(value: string): string {
+  value = value.replace(/#(?:[0-9a-f]{4}|[0-9a-f]{8})\b/gi, (hex) => format(parse(hex)!));
+  let out = "";
+  let from = 0;
+  for (const match of value.matchAll(FUNCTIONS)) {
+    if (match.index! < from) continue;
+    const end = skip(value, match.index! + match[0].length - 1);
+    const color = parse(value.slice(match.index!, end));
+    if (!color) continue;
+    out += value.slice(from, match.index!) + format(color);
+    from = end;
+  }
+  return out + value.slice(from);
+}
+
+/** Whether `value` is one color (for `background`, which can hold an image too). */
+export const isColor = (value: string): boolean => !!parse(value) || /^(#[0-9a-f]{3,8}|[a-z]+)$/i.test(value.trim());
diff --git a/packages/react/src/tailwind/column.ts b/packages/react/src/tailwind/column.ts
new file mode 100644
index 00000000..8a0d103a
--- /dev/null
+++ b/packages/react/src/tailwind/column.ts
@@ -0,0 +1,13 @@
+/**
+ * Whether an element is a Column, of any copy of Elements: a render made by another copy's renderers (a package's
+ * module and CommonJS builds loaded together, with this <Tailwind> of the other) has that copy's Columns, recorded by
+ * the marker every copy's Rows, Columns and blocks carry (see the main entry's utils/collect.ts).
+ */
+import React from "react";
+
+const RECORDS = Symbol.for("@unlayer/react-elements/records");
+
+export const isColumn = (child: unknown): child is React.ReactElement<Record<PropertyKey, any>> => {
+  const type = React.isValidElement(child) ? (child.type as unknown as { displayName?: string } & Record<symbol, unknown>) : undefined;
+  return !!type?.[RECORDS] && type.displayName === "Column";
+};
diff --git a/packages/react/src/tailwind/compile.test.tsx b/packages/react/src/tailwind/compile.test.tsx
new file mode 100644
index 00000000..924afffe
--- /dev/null
+++ b/packages/react/src/tailwind/compile.test.tsx
@@ -0,0 +1,1527 @@
+// @vitest-environment node
+import React from "react";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+import { Button, Column, Email, Heading, Html, Link, Paragraph, Row, renderToHtml as renderToHtmlNow, renderToHtmlParts as renderToHtmlPartsNow, renderToJson as renderToJsonNow } from "../index";
+import { Markdown } from "../markdown";
+import {
+  Tailwind,
+  classNameToDeclarations,
+  loadTailwind,
+  renderToHtml,
+  renderToHtmlParts,
+  renderToJson,
+  renderToPlainText,
+  type ClassDeclaration,
+  type TailwindHandle,
+} from "./index";
+import { BEYOND, CEILING, CHARACTERS, CLASSES, CLASS_LIMITS, COMPILED, FULL, SUSPECTS, declarationReader, type Compiler, type PluginFailure, type ReadScope } from "./declarations";
+import { parseSheet } from "./css";
+import { CONFIGS } from "./load";
+import { inTime, slowness, within } from "../test-timing";
+
+// Tailwind as it is, its compilers counted once compiled (a handle compiles a fresh one after building many classes),
+// and their builds. (Only where Elements' `import("tailwindcss")` gets this mock: vitest gives a factory's mock to one
+// of the imports of a module under way at once, Tailwind itself to the others, as where a test compiles while a fresh
+// compiler an earlier test's handle asked for is still compiling.)
+const compiled = vi.hoisted(() => ({ count: 0, builds: 0, candidates: 0 }));
+vi.mock("tailwindcss", async (actual) => {
+  const tailwind = await actual<Record<string, any>>();
+  const compile = async (...args: unknown[]) => {
+    const compiler = await tailwind.compile(...args);
+    compiled.count++;
+    const build = compiler.build;
+    compiler.build = (candidates: string[]) => {
+      compiled.builds++;
+      compiled.candidates += candidates.length;
+      return build.call(compiler, candidates);
+    };
+    return compiler;
+  };
+  return { ...tailwind, compile };
+});
+// The stylesheets read, whichever compiler built them (each build is Tailwind's whole stylesheet again): `css`, the last
+// one's length. (Read where Elements imports this module once, so every build's is seen.)
+const sheets = vi.hoisted(() => ({ css: 0 }));
+vi.mock("./css", async (actual) => {
+  const css = await actual<typeof import("./css")>();
+  return { ...css, parseSheet: (text: string) => ((sheets.css = text.length), css.parseSheet(text)) };
+});
+
+const config = { theme: { extend: { colors: { brand: "#007291" } } } };
+let tw: TailwindHandle;
+beforeAll(async () => {
+  tw = await loadTailwind(config);
+});
+
+let warn: MockInstance;
+beforeEach(() => {
+  warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+});
+afterEach(() => warn.mockRestore());
+
+/** Each declaration as `class when property: value`. */
+const read = (className: string) =>
+  classNameToDeclarations(tw, className).declarations.map((d: ClassDeclaration) => `${d.className} ${d.when} ${d.property}: ${d.value}${d.important ? " !important" : ""}`);
+
+describe("classNameToDeclarations", () => {
+  it("converts Tailwind's oklch palette and opacity modifiers to the colors email clients read", () => {
+    expect(read("bg-gray-100 text-red-500 border-blue-800 text-brand bg-black/50 bg-brand/50")).toEqual([
+      "border-blue-800 always border-color: #193cb8",
+      "bg-black/50 always background-color: rgba(0, 0, 0, 0.5)",
+      "bg-brand/50 always background-color: rgba(0, 114, 145, 0.5)",
+      "bg-gray-100 always background-color: #f3f4f6",
+      "text-brand always color: #007291",
+      "text-red-500 always color: #fb2c36",
+    ]);
+    // Arbitrary values in other color spaces, and a translucent hex Outlook can't read.
+    expect(read("text-[hsl(0_100%_50%)] text-[lab(50%_0_0)] text-[oklch(62.8%_0.2577_29.23)] bg-[rgb(1_2_3)] bg-[#ff000080]").map((d) => d.split(": ")[1])).toEqual(
+      expect.arrayContaining(["#ff0000", "#777777", "#010203", "rgba(255, 0, 0, 0.502)"])
+    );
+  });
+
+  it("gives sizes in pixels, with variables and calc() worked out", () => {
+    expect(read("p-6 text-lg max-w-xl w-1/2 rounded-full px-[13px] tracking-wide -mt-2")).toEqual([
+      "-mt-2 always margin-top: -8px",
+      "w-1/2 always width: 50%",
+      "max-w-xl always max-width: 576px",
+      "rounded-full always border-radius: 9999px",
+      "p-6 always padding: 24px",
+      "px-[13px] always padding-inline: 13px",
+      "text-lg always font-size: 18px",
+      "text-lg always line-height: 1.5556",
+      "tracking-wide always letter-spacing: 0.025em",
+    ]);
+    // An element's own variables: `leading-6` sets the line height `text-lg` reads.
+    expect(read("text-lg leading-6")).toContain("text-lg always line-height: 24px");
+    expect(read("border")).toEqual(["border always border-style: solid", "border always border-width: 1px"]);
+    expect(read("!p-4")).toEqual(["!p-4 always padding: 16px !important"]);
+  });
+
+  it("works out variables that use each other many times over at once, leaving out (and saying) a value past 4,096 characters", async () => {
+    // `--v0` uses `--v1` twice, which uses `--v2` twice, and so on: 2^n characters, from n × 30 of classes (which a
+    // Markdown's HTML can carry, as its sanitizer keeps them).
+    const chain = (n: number, property: string) => [...Array.from({ length: n }, (_, i) => `[--v${i}:var(--v${i + 1})_var(--v${i + 1})]`), `[--v${n}:x]`, `[${property}:var(--v0)]`].join(" ");
+    expect(read(chain(4, "font-family"))).toEqual([`[font-family:var(--v0)] always font-family: ${Array(16).fill("x").join(" ")}`]);
+    expect(read(chain(11, "font-family"))[0]).toHaveLength(4095 + "[font-family:var(--v0)] always font-family: ".length);
+    // (Timed again on a fresh handle: one reads a class it built from what it built.)
+    let again = 0;
+    const reads = (handle: TailwindHandle) => [12, 20, 31].map((n) => classNameToDeclarations(handle, chain(n, "color")));
+    const timing = await within(5000, () => reads(tw), { before: () => loadTailwind({ ...config, chain: again++ }), again: reads });
+    for (const read of timing.result) {
+      expect(read).toEqual({
+        declarations: [],
+        ignored: [{ className: "[color:var(--v0)]", reason: "`color`'s variables come to more than 4096 characters" }],
+      });
+    }
+    // (Without the limit, 31 would run the process out of memory.)
+    expect(inTime(timing)).toBe(true);
+  }, 30000);
+
+  it("says when each applies: phones, above a breakpoint, on hover", () => {
+    expect(read("max-sm:p-2 max-[480px]:text-sm md:p-8 hover:bg-blue-500")).toEqual([
+      "hover:bg-blue-500 hover background-color: #2b7fff",
+      "max-[480px]:text-sm phone font-size: 14px",
+      "max-[480px]:text-sm phone line-height: 1.4286",
+      "max-sm:p-2 phone padding: 8px",
+      "md:p-8 desktop padding: 32px",
+    ]);
+  });
+
+  it("lists the classes that don't apply in an email, with why", () => {
+    expect(classNameToDeclarations(tw, "dark:bg-black print:hidden focus:underline space-y-4 group-hover:text-red-500 max-sm:hover:bg-red-500 nonsense").ignored).toEqual([
+      { className: "dark:bg-black", reason: "it applies only for @media (prefers-color-scheme: dark)" },
+      { className: "print:hidden", reason: "it applies only for @media print" },
+      { className: "focus:underline", reason: "it applies only for `:focus`" },
+      { className: "space-y-4", reason: "it styles other elements (`:where(.space-y-4 > :not(:last-child))`)" },
+      { className: "group-hover:text-red-500", reason: "it applies only for `:is(:where(.group):hover *)`" },
+      { className: "max-sm:hover:bg-red-500", reason: "Elements has no hover style for one screen size" },
+      { className: "nonsense", reason: "Tailwind has no such class" },
+    ]);
+  });
+
+  it("knows a class by its own name in its rule's selector, wherever it is there (after a variant's `.group` or `.dark`)", async () => {
+    const reasons = (handle: TailwindHandle, className: string) => classNameToDeclarations(handle, className).ignored.map(({ className, reason }) => `${className}: ${reason}`);
+    // `group` is a class no rule is for: it stays the user's, though rules for other classes have it.
+    expect(reasons(tw, "group [.group:hover_&]:underline [.dark_&]:p-2 in-hover:p-1")).toEqual([
+      "group: Tailwind has no such class",
+      "[.group:hover_&]:underline: it applies only for `.group:hover &`",
+      "[.dark_&]:p-2: it applies only for `.dark &`",
+      "in-hover:p-1: it applies only for `:where(*:hover) &`",
+    ]);
+    // A config's own variants (a plugin's `addVariant`).
+    const variants = { handler: ({ addVariant }: { addVariant: (name: string, selector: string) => void }) => (addVariant("group-on", ".group:hover &"), addVariant("peer-on", ".peer:checked ~ &")) };
+    expect(reasons(await loadTailwind({ plugins: [variants] }), "peer group-on:text-white peer-on:underline")).toEqual([
+      "peer: Tailwind has no such class",
+      "group-on:text-white: it applies only for `.group:hover &`",
+      "peer-on:underline: it applies only for `.peer:checked ~ &`",
+    ]);
+  });
+
+  it("gives a class string the same declarations whatever its compiler built before", async () => {
+    // Tailwind's compiler builds every class it's been given, in an order of its own, each with the theme's variables
+    // and the registered properties it uses: a class string read after thousands of others reads as on its own.
+    const theme = { theme: { extend: { colors: { brand: "#007291", accent: "var(--color-blue-500)" } } } };
+    const others: string[] = [];
+    for (const color of ["red-500", "blue-500", "gray-100", "brand", "accent", "black", "white"])
+      for (const utility of ["text", "bg", "border", "ring", "shadow", "from", "via", "to", "outline", "decoration", "divide"]) others.push(`${utility}-${color}`, `hover:${utility}-${color}`, `max-sm:${utility}-${color}/50`);
+    for (const n of [0, 1, 2, 4, 8, 16]) for (const utility of ["p", "px", "pl", "m", "-mt", "w", "max-w", "space-y", "translate-x", "ring", "ring-offset", "border", "outline"]) others.push(`${utility}-${n}`, `md:${utility}-${n}`, `!${utility}-${n}`);
+    for (const size of ["sm", "md", "lg", "xl"]) others.push(`shadow-${size}`, `rounded-${size}`, `blur-${size}`, `drop-shadow-${size}`, `inset-shadow-${size}`, `text-${size}`);
+    others.push("font-sans", "font-serif", "leading-6", "tracking-wide", "rotate-3", "scale-95", "bg-linear-to-r", "border-dashed", "italic", "underline");
+    for (let i = 0; i < 2000; i++) others.push(`w-[${i}px]`, `text-[#${(i * 40503).toString(16).padStart(6, "0").slice(-6)}]`, `[--tw-x-${i % 9}:${i}px]`);
+    const strings = [
+      "bg-brand text-white text-accent opacity-50 bg-black/50 text-brand/75",
+      "text-lg leading-6",
+      "border border-2 border-dashed border-red-500",
+      "shadow-md shadow-red-500/50 ring-2 ring-blue-500 ring-offset-2 inset-shadow-sm",
+      "max-sm:p-2 md:p-8 hover:bg-blue-500 max-[480px]:text-sm",
+      "!p-4 p-2 px-4 pl-1 py-[3px]",
+      "font-sans font-serif rounded-lg rounded-t-none translate-x-2 rotate-3",
+      "bg-linear-to-r from-red-500 via-white to-blue-500",
+      "[--tw-x-3:9px] w-[var(--tw-x-3)] w-1/2 -mt-2",
+      "space-y-4 dark:bg-black nonsense",
+    ];
+    const fresh = await Promise.all(strings.map((_, i) => loadTailwind({ ...theme, fresh: i })));
+    const warmed = await loadTailwind({ ...theme, warmed: true });
+    // (Read without waiting from here on: a compiler it compiles meanwhile isn't swapped in.)
+    for (const other of others.slice(0, 50).reverse()) classNameToDeclarations(warmed, other);
+    classNameToDeclarations(warmed, others.join(" "));
+    for (const [i, className] of strings.entries()) expect(classNameToDeclarations(warmed, className), className).toEqual(classNameToDeclarations(fresh[i], className));
+    // (Thousands of classes built: about half a second here, ten on a CI runner.)
+  }, 60_000);
+
+  it("reads the classes after one it can't read as before: a class can't change how the stylesheet reads", async () => {
+    const handle = await loadTailwind({ ...config, hostile: true });
+    const unreadable = "it isn't a class Tailwind can read here";
+    const asFresh = (after: string) => {
+      for (const normal of ["text-red-500", "p-2", "bg-blue-500/50", "before:content-['a']"]) expect(classNameToDeclarations(handle, normal), `${normal} after ${after}`).toEqual(classNameToDeclarations(tw, normal));
+    };
+    // Brackets, parentheses, braces or quotes left open (an escaped one doesn't close), a comment: refused, never built.
+    for (const hostile of ["[color:x(]", "[color:/*]", "[color:*/]", "bg-[x\\]", "[color:x{]", "[content:'a]", "[content:'a\\']"]) {
+      expect(classNameToDeclarations(handle, `${hostile} text-red-500`).ignored, hostile).toEqual([{ className: hostile, reason: unreadable }]);
+      asFresh(hostile);
+    }
+    // Quotes in a value, escaped ones in its selector: built, and read as CSS reads them.
+    for (const quoted of ['[background-image:image-set("x.png"_1x)]', "[content:'a\\'b']", '[content:"a\\"b"]']) {
+      expect(classNameToDeclarations(handle, quoted).ignored, quoted).toEqual([]);
+      asFresh(quoted);
+    }
+    expect(classNameToDeclarations(handle, '[background-image:image-set("x.png"_1x)]').declarations.map((d) => d.value)).toEqual(['image-set("x.png" 1x)']);
+    // What Tailwind can read stays readable: quotes and brackets closed, an escape in a string.
+    expect(classNameToDeclarations(handle, "before:content-['\\201C'] font-['Open_Sans'] [&>*]:p-2 max-[480px]:p-1").ignored.map((i) => i.reason)).not.toContain(unreadable);
+  });
+
+  it("keeps every class reading as on a fresh handle, whatever hostile classes it's given (fuzzed)", async () => {
+    // `TAILWIND_POISON_FUZZ_RUNS=5000` for a longer run, `TAILWIND_POISON_FUZZ_SEED` for other inputs.
+    const runs = Number(process.env.TAILWIND_POISON_FUZZ_RUNS ?? 300);
+    const handle = await loadTailwind({ ...config, fuzzed: true });
+    const normals = ["text-red-500", "p-2", "px-4", "bg-blue-500/50", "font-bold", "rounded-md", "border-2", "md:p-4", "hover:underline", "max-sm:text-sm", "w-[10px]", "text-[#123456]", "leading-6", "shadow-md", "before:content-['a']", "font-['Open_Sans']", "bg-[url(x.png)]", "text-brand"];
+    const opens = ["[color:", "bg-[", "[content:", "before:content-[", "[background-image:", "w-[", "font-[", "[--x:", "max-[", "[&"];
+    const parts = ["x", "1px", "(", ")", "[", "]", "{", "}", '"', "'", "\\", '\\"', "/*", "*/", "_", "url(", "a.png", ";", ":", "@media", "&", ".x", ",", "!important", "<", "%", "#", "\\72"];
+    const r = random(Number(process.env.TAILWIND_POISON_FUZZ_SEED ?? 20261018));
+    const pick = (list: string[]) => list[Math.floor(r() * list.length)];
+    const expected = new Map(normals.map((normal) => [normal, classNameToDeclarations(tw, normal)]));
+    const bad: string[] = [];
+    for (let run = 0; run < runs && bad.length < 5; run++) {
+      const tokens: string[] = [];
+      for (let n = Math.floor(r() * 3); n >= 0; n--) tokens.push(pick(normals));
+      for (let n = Math.floor(r() * 4); n > 0; n--) {
+        let hostile = pick(opens);
+        for (let k = 1 + Math.floor(r() * 4); k > 0; k--) hostile += pick(parts);
+        tokens.splice(Math.floor(r() * (tokens.length + 1)), 0, hostile + (r() < 0.6 ? "]" : ""));
+      }
+      classNameToDeclarations(handle, tokens.join(" "));
+      for (const normal of normals) {
+        const read = classNameToDeclarations(handle, normal);
+        if (JSON.stringify(read) !== JSON.stringify(expected.get(normal))) bad.push(`${JSON.stringify(tokens.join(" "))}: then \`${normal}\` reads ${JSON.stringify(read)}`);
+      }
+    }
+    expect(bad).toEqual([]);
+  }, 120000);
+
+  it("takes only a compiled Tailwind", () => {
+    expect(() => classNameToDeclarations({ config } as TailwindHandle, "p-2")).toThrow(/takes the compiled Tailwind/);
+  });
+});
+
+describe("loadTailwind", () => {
+  it("compiles a config once: the same object, or one equal to it", async () => {
+    expect(await loadTailwind(config)).toBe(tw);
+    expect(await loadTailwind({ theme: { extend: { colors: { brand: "#007291" } } } })).toBe(tw);
+    expect(await loadTailwind()).not.toBe(tw);
+    expect(tw.config).toBe(config);
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it("keeps the configs used last compiled: one used longer ago is compiled again, and its handle keeps working", async () => {
+    // A server rendering each customer's theme: the 50 themes used last stay compiled, not every one it has rendered.
+    const themed = (i: number) => ({ theme: { extend: { colors: { brand: `#${(0x100000 + i).toString(16)}` } } } });
+    const handles: TailwindHandle[] = [];
+    for (let i = 0; i < CONFIGS; i++) handles.push(await loadTailwind(themed(i)));
+    // Used again (an equal config: the same handle), it's the last to go.
+    expect(await loadTailwind(themed(0))).toBe(handles[0]);
+    await loadTailwind(themed(CONFIGS));
+    expect(await loadTailwind(themed(0))).toBe(handles[0]);
+    const again = await loadTailwind(themed(1));
+    expect(again).not.toBe(handles[1]);
+    for (const handle of [handles[1], again]) expect(classNameToDeclarations(handle, "text-brand").declarations[0].value).toBe("#100001");
+  });
+
+  it("compiles a fresh compiler past the classes it keeps, reading as before", async () => {
+    const handle = await loadTailwind({ theme: { extend: { colors: { brand: "#007291" } } }, fresh: "classes" });
+    const before = classNameToDeclarations(handle, "text-brand shadow-md max-sm:p-2 border");
+    const count = compiled.count;
+    for (let i = 0; i <= CLASSES; i += 500) classNameToDeclarations(handle, Array.from({ length: 500 }, (_, j) => `w-[${i + j}px]`).join(" "));
+    await vi.waitFor(() => expect(compiled.count).toBe(count + 1));
+    expect(classNameToDeclarations(handle, "text-brand shadow-md max-sm:p-2 border")).toEqual(before);
+    expect(classNameToDeclarations(handle, "w-[3px]").declarations[0].value).toBe("3px");
+  });
+
+  it("compiles a config changed in place as it is now, the handles given before working as they did", async () => {
+    // It was known by the object: the theme it had when it was first compiled, whatever it said after.
+    const theme = { theme: { extend: { colors: { brand: "#ff0000" } } } };
+    const red = await loadTailwind(theme);
+    theme.theme.extend.colors.brand = "#0000ff";
+    const blue = await loadTailwind(theme);
+    expect(blue).not.toBe(red);
+    expect(classNameToDeclarations(blue, "text-brand").declarations[0].value).toBe("#0000ff");
+    expect(classNameToDeclarations(red, "text-brand").declarations[0].value).toBe("#ff0000");
+    // Changed back, it's the handle of that text again; equal to another config, that one's.
+    theme.theme.extend.colors.brand = "#ff0000";
+    expect(await loadTailwind(theme)).toBe(red);
+    expect(await loadTailwind({ theme: { extend: { colors: { brand: "#0000ff" } } } })).toBe(blue);
+    // A handle's fresh compiler (past the classes it keeps) is compiled from what it was compiled from.
+    theme.theme.extend.colors.brand = "#00ff00";
+    const count = compiled.count;
+    for (let i = 0; i <= CLASSES; i += 500) classNameToDeclarations(red, Array.from({ length: 500 }, (_, j) => `w-[${i + j}px]`).join(" "));
+    await vi.waitFor(() => expect(compiled.count).toBe(count + 1));
+    expect(classNameToDeclarations(red, "text-brand").declarations[0].value).toBe("#ff0000");
+    theme.theme.extend.colors.brand = "#ff0000";
+    // The async renderers, given the same object changed between renders.
+    const template = () => <Tailwind config={theme}><Email><Row><Column><Paragraph className="text-brand">Hi</Paragraph></Column></Row></Email></Tailwind>;
+    expect(await renderToHtml(template())).toContain("color: #ff0000");
+    theme.theme.extend.colors.brand = "#0000ff";
+    expect(await renderToHtml(template())).toContain("color: #0000ff");
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it("compiles a config with functions changed in place again where what isn't a function changed, saying so once", async () => {
+    // (Its functions can't be compared: one changed in place isn't seen.)
+    const withPlugin = { plugins: [() => {}], theme: { extend: { colors: { brand: "#ff0000" } } } };
+    const red = await loadTailwind(withPlugin);
+    expect(await loadTailwind(withPlugin)).toBe(red);
+    withPlugin.theme.extend.colors.brand = "#0000ff";
+    const blue = await loadTailwind(withPlugin);
+    expect(blue).not.toBe(red);
+    expect(classNameToDeclarations(blue, "text-brand").declarations[0].value).toBe("#0000ff");
+    expect(await loadTailwind(withPlugin)).toBe(blue);
+    withPlugin.theme.extend.colors.brand = "#00ff00";
+    expect(classNameToDeclarations(await loadTailwind(withPlugin), "text-brand").declarations[0].value).toBe("#00ff00");
+    const said = warn.mock.calls.map((call) => String(call[0]));
+    expect(said.filter((message) => /changed since it was compiled/.test(message))).toEqual([
+      "[Unlayer] loadTailwind: a config with functions (plugins) changed since it was compiled, so it's compiled again: give a changed config as a new object (a function changed in place isn't seen).",
+    ]);
+  });
+
+  it("says a config with functions is compiled again for each object", async () => {
+    const plugin = () => {};
+    const withPlugin = { plugins: [plugin] };
+    const handle = await loadTailwind(withPlugin);
+    expect(await loadTailwind(withPlugin)).toBe(handle);
+    expect(await loadTailwind({ plugins: [plugin] })).not.toBe(handle);
+    expect(warn).toHaveBeenCalledTimes(2);
+    expect(String(warn.mock.calls[0][0])).toMatch(/config holds functions \(plugins\).*define it once, outside your components/);
+  });
+});
+
+describe("the stylesheet's reader", () => {
+  it("reads CSS as CSS does: an escape, a string, a comment or a bracket in a rule doesn't change how the rules after it read", () => {
+    const sheet = parseSheet(
+      [
+        ".a\\(\\] { color: red; }",
+        '.b\\"x { content: "}"; }',
+        ".c { content: '/* not a comment {'; }",
+        "/* a comment: } { */",
+        '.d { background: url("a;b.png"); margin: 1px; }',
+        ".e\\{ { color: x(}); }",
+        ".f { color: blue; }",
+      ].join("\n")
+    );
+    expect(sheet.clean).toBe(true);
+    expect(sheet.rules.map((rule) => [rule.token, rule.declarations.map((d) => `${d.property}: ${d.value}`)])).toEqual([
+      ["a(]", ["color: red"]],
+      ['b"x', ['content: "}"']],
+      ["c", ["content: '/* not a comment {'"]],
+      ["d", ['background: url("a;b.png")', "margin: 1px"]],
+      ["e{", ["color: x(})"]],
+      ["f", ["color: blue"]],
+    ]);
+    // What runs to its end (a block, a bracket, a string, a comment left open) or closes what isn't open isn't clean.
+    for (const css of [".a { color: red;", ".a { color: x(; } .b { color: red; }", ".a { content: 'x; }\n", ".a { color: red; } /* x", ".a { color: red; } } .b { color: red; }"]) expect(parseSheet(css).clean, css).toBe(false);
+  });
+});
+
+describe("a handle's reader of classes", () => {
+  /** A compiler that gives each class it's built a rule, as Tailwind gives the stylesheet of all so far. */
+  const counting = () => {
+    const built: string[] = [];
+    return { built, build: (classes: string[]) => (built.push(...classes), built.map((c) => `.${c} { margin: 1px; }`).join("\n")) };
+  };
+  /** A compiler whose stylesheet, once it has built `evil`, never reads cleanly: as Tailwind keeps every class it built. */
+  const poisoned = () => {
+    const built: string[] = [];
+    return { built, build: (classes: string[]) => (built.push(...classes), built.map((c) => (c === "evil" ? `.${c} { color: x(; }` : `.${c} { margin: 1px; }`)).join("\n")) };
+  };
+  const settled = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+  it("swaps its compiler for a fresh one past its classes, once that's ready, the old one read till then", async () => {
+    const old = counting();
+    const fresh = counting();
+    let ready!: (compiler: Compiler) => void;
+    const renew = vi.fn(() => new Promise<Compiler>((resolve) => (ready = resolve)));
+    const read = declarationReader(old, renew, 3);
+    read("a b");
+    read("b c");
+    expect(renew).not.toHaveBeenCalled();
+    read("d");
+    read("e");
+    expect(renew).toHaveBeenCalledTimes(1);
+    expect(old.built).toEqual(["a", "b", "c", "d", "e"]);
+    ready(fresh);
+    await Promise.resolve();
+    expect(read("a f").declarations.map((d) => d.className)).toEqual(["a", "f"]);
+    expect(fresh.built).toEqual(["a", "f"]);
+    expect(old.built).toHaveLength(5);
+  });
+
+  it("drops the classes of a build it can't read cleanly, keeps reading the others, and compiles a fresh compiler without them", async () => {
+    const compilers = [poisoned(), poisoned(), poisoned()];
+    const ready: Array<(compiler: Compiler) => void> = [];
+    const renew = vi.fn(() => new Promise<Compiler>((resolve) => ready.push(resolve)));
+    const read = declarationReader(compilers[0], renew);
+    const classes = (className: string) => read(className).declarations.map((d) => d.className);
+    const because = (reason: string) => (className: string) => read(className).ignored.filter((i) => i.reason === reason).map((i) => i.className);
+    const unreadable = because("it isn't a class Tailwind can read here");
+    const waiting = because("it's read once Tailwind has compiled again, after a class it couldn't read");
+    expect(classes("a")).toEqual(["a"]);
+    // `evil` and `b`, built together, are left out till a fresh compiler is ready; `a` reads as before.
+    expect(waiting("b evil")).toEqual(["b", "evil"]);
+    expect(classes("a")).toEqual(["a"]);
+    expect(renew).toHaveBeenCalledTimes(1);
+    // Till it's ready, nothing more is built on the one that can't read.
+    expect(waiting("c")).toEqual(["c"]);
+    expect(compilers[0].built).toEqual(["a", "b", "evil"]);
+    ready[0](compilers[1]);
+    await Promise.resolve();
+    // On the fresh one, each class of that build is built alone first: `b` reads, `evil` is refused for good.
+    expect(classes("b c a")).toEqual(["b", "c", "a"]);
+    expect(unreadable("evil")).toEqual(["evil"]);
+    expect(renew).toHaveBeenCalledTimes(2);
+    ready[1](compilers[2]);
+    await Promise.resolve();
+    expect(classes("evil d")).toEqual(["d"]);
+    expect(unreadable("evil")).toEqual(["evil"]);
+    expect(compilers[2].built).toEqual(["d"]);
+    // (And one more asked for, to be ready: the spare, see the next test.)
+    expect(renew).toHaveBeenCalledTimes(3);
+  });
+
+  it("keeps a fresh compiler ready, which takes over at once, synchronously, where classes are next built past its classes; another is asked for", async () => {
+    // A synchronous loop of renders never lets a compiler compile: without one ready, it built on one compiler, each
+    // build costing more than the last (Tailwind builds every class it has built again), its memory growing.
+    const [old, spare, next] = [counting(), counting(), counting()];
+    let ready!: (compiler: Compiler) => void;
+    const renew = vi.fn(() => new Promise<Compiler>((resolve) => (ready = resolve)));
+    const read = declarationReader(old, renew, 3, spare);
+    read("a b");
+    read("c d");
+    // Past its classes: the spare takes over where classes are next built, not before (a render reads what it prepared).
+    expect(read("a b c d").declarations).toHaveLength(4);
+    expect(renew).not.toHaveBeenCalled();
+    expect(read("e").declarations.map((d) => d.className)).toEqual(["e"]);
+    expect([old.built, spare.built]).toEqual([["a", "b", "c", "d"], ["e"]]);
+    expect(renew).toHaveBeenCalledTimes(1);
+    ready(next);
+    await Promise.resolve();
+    // The one asked for is the spare: this one takes it past its classes again.
+    read("f g h");
+    expect(read("i").declarations.map((d) => d.className)).toEqual(["i"]);
+    expect(next.built).toEqual(["i"]);
+  });
+
+  it(`builds no new class past ${CEILING} times its classes with no fresh compiler ready, saying to yield or use the async renderers, and builds on once one is`, async () => {
+    let ready!: (compiler: Compiler) => void;
+    const renew = vi.fn(() => new Promise<Compiler>((resolve) => (ready = resolve)));
+    const old = counting();
+    const read = declarationReader(old, renew, 2);
+    for (let i = 0; i <= 2 * CEILING; i++) read(`c${i}`);
+    expect(old.built).toHaveLength(2 * CEILING + 1);
+    expect(read("x").ignored).toEqual([{ className: "x", reason: FULL }]);
+    expect(FULL).toContain("yield between synchronous renders");
+    expect(FULL).toContain("async renderers");
+    // The async renderers wait for it.
+    const waited = read.ready?.();
+    expect(waited).toBeInstanceOf(Promise);
+    const fresh = counting();
+    ready(fresh);
+    await waited;
+    expect(read("x c0").declarations.map((d) => d.className)).toEqual(["x", "c0"]);
+    expect(fresh.built).toEqual(["x", "c0"]);
+  });
+
+  /** A compiler whose build throws for `junk` (`keep`: and keeps it, throwing on every build after it, as Tailwind can). */
+  const throwing = (keep = false) => {
+    const built: string[] = [];
+    let kept = false;
+    const css = (c: string) => `.${c.replace(/[^\w-]/g, "\\$&")} { margin: 1px; }`;
+    return {
+      built,
+      build: (classes: string[]) => {
+        if (kept || classes.includes("junk")) {
+          kept ||= keep;
+          throw new Error("Invalid code point");
+        }
+        built.push(...classes);
+        return built.map(css).join("\n");
+      },
+    };
+  };
+
+  it("finds the class a build threw for by halves where the compiler builds on after it: only it is refused, and the render goes on", () => {
+    // Tailwind threw for a class from data (an escape it couldn't decode) without keeping it: one render's class can't
+    // leave every later render, another tenant's, waiting for a fresh compiler, synchronous ones failing.
+    const compiler = throwing();
+    const read = declarationReader(compiler);
+    const tokens = Array.from({ length: 40 }, (_, i) => `c${i}`);
+    read.prepare([...tokens.slice(0, 20), "junk", ...tokens.slice(20)].join(" "));
+    expect(read(tokens.join(" ")).declarations.map((d) => d.className).sort()).toEqual([...tokens].sort());
+    expect(read("junk").ignored).toEqual([{ className: "junk", reason: "it isn't a class Tailwind can read here" }]);
+    expect(read("d junk").declarations.map((d) => d.className)).toEqual(["d"]);
+    expect(compiler.built).not.toContain("junk");
+  });
+
+  it("takes a build that threw as one it can't read where the compiler throws on every build after it (it kept the class)", async () => {
+    const renew = vi.fn(() => new Promise<Compiler>(() => {}));
+    const read = declarationReader(throwing(true), renew);
+    expect(() => read("a junk")).toThrow("Invalid code point");
+    expect(read("b").ignored).toEqual([{ className: "b", reason: "it's read once Tailwind has compiled again, after a class it couldn't read" }]);
+    expect(renew).toHaveBeenCalledTimes(1);
+  });
+
+  it(`compiles a fresh compiler past ${COMPILED} characters of classes built, as past ${CLASSES} classes`, () => {
+    const renew = vi.fn(() => new Promise<Compiler>(() => {}));
+    const read = declarationReader(counting(), renew);
+    // Classes of 507 characters, as many as stay within COMPILED, then a few more.
+    const long = (i: number) => `c${String(i).padStart(5, "0")}-${"x".repeat(500)}`;
+    const within = Math.floor(COMPILED / 507);
+    for (let i = 0; i < within; i += 50) read(Array.from({ length: Math.min(50, within - i) }, (_, j) => long(i + j)).join(" "));
+    expect(renew).not.toHaveBeenCalled();
+    for (let i = within; i < within + 3; i++) read(long(i));
+    expect(renew).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps a plugin's error it finds no class of a build for to the render that built them: there, its classes with no CSS fail", () => {
+    // A failure whose name no class of the build has (Tailwind called the function for a class the reader can't tie
+    // it to): `odd`, with no CSS, could be why; `a`, with CSS, couldn't. Another render's classes aren't a part of it.
+    const failures: PluginFailure[] = [];
+    const built: string[] = [];
+    const compiler: Compiler = {
+      failures,
+      build: (classes) => (built.push(...classes), classes.includes("odd") && failures.push({ name: "elsewhere", error: new Error("stray") }), built.filter((c) => c !== "odd").map((c) => `.${c} { margin: 1px; }`).join("\n")),
+    };
+    const read = declarationReader(compiler);
+    const render: ReadScope = { strays: [] };
+    read.prepare("a odd", render);
+    expect(read("a", render).declarations.map((d) => d.className)).toEqual(["a"]);
+    expect(() => read("odd", render)).toThrow("stray");
+    expect(() => read("a odd", render)).toThrow("stray");
+    // Another render reads them as Tailwind gives them: `odd` as a class Tailwind doesn't have.
+    expect(read("odd a").ignored).toEqual([{ className: "odd", reason: "Tailwind has no such class" }]);
+    expect(read("a").declarations.map((d) => d.className)).toEqual(["a"]);
+  });
+
+  it("builds the classes `prepare` is given at once, without reading them: reading them after builds nothing", () => {
+    const compiler = counting();
+    const build = vi.fn(compiler.build);
+    const read = declarationReader({ build });
+    read.prepare("a b  c a");
+    expect([build.mock.calls.length, compiler.built]).toEqual([1, ["a", "b", "c"]]);
+    expect(read("c a").declarations.map((d) => d.className)).toEqual(["a", "c"]);
+    read.prepare("b c");
+    expect(build).toHaveBeenCalledTimes(1);
+  });
+
+  it(`builds alone at most ${SUSPECTS} of the classes of a build it can't read cleanly on one compiler, the others on the next: only the one that was why is refused`, async () => {
+    // A render's classes are built at once: built alone, each one Tailwind's whole stylesheet again, they'd take the
+    // square of their number. One render with a build that didn't read cleanly can't take an app's `p-4` away from
+    // the renders after it, on a handle every tenant shares.
+    const compilers = [poisoned(), poisoned(), poisoned(), poisoned()];
+    const ready: Array<(compiler: Compiler) => void> = [];
+    const renew = vi.fn(() => new Promise<Compiler>((resolve) => ready.push(resolve)));
+    const read = declarationReader(compilers[0], renew);
+    const tokens = [...Array.from({ length: SUSPECTS + 50 }, (_, i) => `c${i}`), "p-4", "evil"];
+    const classes = tokens.join(" ");
+    const reasons = (found: { ignored: Array<{ reason: string }> }) => [...new Set(found.ignored.map((i) => i.reason))];
+    read.prepare(classes);
+    ready[0](compilers[1]);
+    await Promise.resolve();
+    const build = vi.spyOn(compilers[1], "build");
+    const first = read(classes);
+    expect(build).toHaveBeenCalledTimes(SUSPECTS);
+    expect(first.declarations.map((d) => d.className)).toEqual(tokens.slice(0, SUSPECTS));
+    // The others wait for the next compiler (asked for now), not refused.
+    expect(first.ignored.map((i) => i.className)).toEqual(tokens.slice(SUSPECTS));
+    expect(reasons(first)).toEqual(["it's read once Tailwind has compiled again, after a class it couldn't read"]);
+    expect(renew).toHaveBeenCalledTimes(2);
+    ready[1](compilers[2]);
+    await Promise.resolve();
+    // On it, they're built alone: `p-4` reads, `evil` is refused for good.
+    const second = read(classes);
+    expect(second.declarations.map((d) => d.className)).toEqual(tokens.slice(SUSPECTS, -1));
+    expect(read("evil").ignored).toEqual([{ className: "evil", reason: "it isn't a class Tailwind can read here" }]);
+    ready[2](compilers[3]);
+    await Promise.resolve();
+    const third = read(classes);
+    expect(third.declarations.map((d) => d.className)).toEqual(tokens.slice(0, -1));
+    expect(third.ignored).toEqual([{ className: "evil", reason: "it isn't a class Tailwind can read here" }]);
+    expect(compilers[3].built).not.toContain("evil");
+  });
+
+  it("asks again for a fresh compiler that failed, on the next read that needs one", async () => {
+    const compilers = [poisoned(), poisoned()];
+    let failing = 2;
+    const renew = vi.fn(() => (failing-- > 0 ? Promise.reject(new Error("out of memory")) : Promise.resolve<Compiler>(compilers[1])));
+    const read = declarationReader(compilers[0], renew);
+    const classes = (className: string) => read(className).declarations.map((d) => d.className);
+    expect(classes("a b evil")).toEqual([]);
+    await settled();
+    expect(renew).toHaveBeenCalledTimes(1);
+    // Each class it can't build yet asks again (one at a time), till one is compiled.
+    expect(classes("a c")).toEqual([]);
+    expect(renew).toHaveBeenCalledTimes(2);
+    expect(classes("c")).toEqual([]);
+    expect(renew).toHaveBeenCalledTimes(2);
+    await settled();
+    expect(classes("c")).toEqual([]);
+    expect(renew).toHaveBeenCalledTimes(3);
+    await settled();
+    expect(classes("a b c")).toEqual(["a", "b", "c"]);
+    expect(compilers[1].built).toEqual(["a", "b", "c"]);
+    // (And one asked for once one took over, to be ready.)
+    expect(renew).toHaveBeenCalledTimes(4);
+  });
+
+  it("stops asking for a fresh compiler after three fail in a row, and says why it reads no new class", async () => {
+    const renew = vi.fn(() => Promise.reject(new Error("out of memory")));
+    const read = declarationReader(poisoned(), renew);
+    for (const className of ["a evil", "b", "c", "d", "e"]) {
+      read(className);
+      await settled();
+    }
+    expect(renew).toHaveBeenCalledTimes(3);
+    expect(read("f evil").ignored).toEqual([
+      { className: "f", reason: "Tailwind couldn't compile again after a class it couldn't read (out of memory)" },
+      { className: "evil", reason: "Tailwind couldn't compile again after a class it couldn't read (out of memory)" },
+    ]);
+  });
+
+  it("keeps its compiler where a fresh one fails, asking again on the next build past its classes, three times in a row at most", async () => {
+    const old = counting();
+    const renew = vi.fn(() => Promise.reject(new Error("no Tailwind")));
+    const read = declarationReader(old, renew, 1);
+    for (const className of ["a b", "c", "d", "e"]) {
+      read(className);
+      await settled();
+    }
+    expect(read("a c e").declarations.map((d) => d.className)).toEqual(["a", "c", "e"]);
+    expect(old.built).toEqual(["a", "b", "c", "d", "e"]);
+    expect(renew).toHaveBeenCalledTimes(3);
+  });
+});
+
+describe("a render's classes", () => {
+  it("are the render's own on a shared handle: a class from data naming another in its selector, or one whose CSS can't be read, changes no other render", async () => {
+    // `[&,.p-4]:hidden` writes `.p-4` beside itself, and the rule was filed under `p-4`: every later render's on the
+    // compiler (a block hidden, text transparent). An arbitrary property whose name isn't one (`[a(:b())]`) is CSS
+    // Tailwind's compiler can't read: every synchronous render after it on the handle threw till the event loop yielded.
+    const handle = await loadTailwind({ ...config, render: "shared" });
+    const victim = <Tailwind tw={handle}><Email><Row><Column><Paragraph className="p-4 text-lg">Your code</Paragraph></Column></Row></Email></Tailwind>;
+    const before = renderToHtmlNow(victim);
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      // (An `@property` registered in a class's rule was every class's fallback on the compiler: `text-lg`'s line height.)
+      for (const name of ["[&,.p-4]:hidden", "[&,.p-4]:text-transparent", "[a(:b())]", "[@property_--tw-leading]:[initial-value:9]"]) {
+        renderToHtmlNow(<Tailwind tw={handle}><Email><Row><Column><Paragraph><span className={name}>post</span></Paragraph></Column></Row></Email></Tailwind>);
+        expect(renderToHtmlNow(victim), name).toBe(before);
+      }
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("are built at once, before its components are rewritten one at a time: their classes, their markup's, a Markdown's blocks'", async () => {
+    // Each build is Tailwind's whole stylesheet again: a class at a time, a few thousand took seconds (and markup from
+    // data, as many as it has).
+    const handle = await loadTailwind({ ...config, render: "at once" });
+    // (Within the render's first CLASSES classes.)
+    const [n, m] = [300, 120];
+    const template = (
+      <Tailwind tw={handle}>
+        <Email className="bg-white">
+          <Row className="bg-gray-100">
+            <Column className="p-1">
+              {Array.from({ length: n }, (_, i) => <Paragraph key={i} className={`p-[${i}px]`}>x</Paragraph>)}
+              {/* A scope of its own for each (a component that wraps itself in one): the render's classes are built once. */}
+              {Array.from({ length: n }, (_, i) => <Tailwind key={`tw${i}`} tw={handle}><Paragraph className={`pt-[${i}px]`}>x</Paragraph></Tailwind>)}
+              {Array.from({ length: n }, (_, i) => <Html key={`html${i}`} html={`<p class="m-[${i}px]">x</p>`} />)}
+              <Markdown markdown={Array.from({ length: n }, (_, i) => `<span class="w-[${i}px]">x</span>`).join("\n\n")} />
+              <Markdown markdown={Array.from({ length: n }, (_, i) => `<span class="h-[${i}px]">x</span>`).join(" ")} />
+              {/* A Markdown's headings (sanitized HTML in each one's `text`), and markup in rich text children. */}
+              <Markdown markdown={Array.from({ length: m }, (_, i) => `# <span class="min-w-[${i}px]">x</span>`).join("\n\n")} />
+              {Array.from({ length: m }, (_, i) => <Paragraph key={`rich${i}`}>x <span className={`pb-[${i}px]`}>y</span></Paragraph>)}
+              {Array.from({ length: m }, (_, i) => <Button key={`button${i}`} href="https://example.com">Go <span className={`mb-[${i}px]`}>now</span></Button>)}
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    for (const render of [() => renderToHtmlNow(template), () => renderToHtml(template)]) {
+      const builds = compiled.builds;
+      const html = await render();
+      for (const style of [/padding: ?299px/, /padding: ?299px 10px 10px/, /margin: 299px/, /width: 299px/, /height: 299px/, /min-width: ?119px/, /padding-bottom: ?119px/, /margin-bottom: ?119px/]) expect(html).toMatch(style);
+      // The root's classes, then the render's.
+      expect(compiled.builds - builds).toBeLessThanOrEqual(2);
+    }
+  });
+
+  it(`are read ${CLASSES} different ones at most, the others left out and said once: classes from data take no more memory than that`, async () => {
+    const handle = await loadTailwind({ ...config, render: "capped" });
+    const many = Array.from({ length: CLASSES + 100 }, (_, i) => `indent-[${i}px]`);
+    const template = (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Markdown markdown={`<p class="${many.join(" ")}">x</p>`} />
+              {/* A class the render read before is read; a new one isn't. */}
+              <Paragraph className="indent-[5px] p-[3px]">late</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    for (const render of [() => renderToHtmlNow(template), () => renderToHtml(template)]) {
+      warn.mockClear();
+      const candidates = compiled.candidates;
+      const html = await render();
+      expect(html.match(/text-indent: ?\d+px/g)).toHaveLength(CLASSES + 1);
+      expect(html).toContain(`class="${many.slice(CLASSES).join(" ")}"`);
+      expect(html).not.toMatch(/padding: 3px/);
+      expect(compiled.candidates - candidates).toBeLessThanOrEqual(CLASSES);
+      const said = warn.mock.calls.map((call) => String(call[0])).filter((text) => text.includes("a render reads that many at most"));
+      expect(said).toEqual([`[Unlayer] Html ignores class \`indent-[${CLASSES}px]\`, and the render's other classes past its first ${CLASSES} different ones or ${CHARACTERS} characters of them: a render reads that many at most.`]);
+    }
+    // A class string's, in classNameToDeclarations, as a render's.
+    const found = classNameToDeclarations(handle, many.join(" "));
+    expect(found.declarations).toHaveLength(CLASSES);
+    expect(found.ignored).toHaveLength(100);
+    expect(found.ignored[0]).toEqual({ className: `indent-[${CLASSES}px]`, reason: `it's past the first ${CLASSES} different classes of the render (or class string), or ${CHARACTERS} characters of them, all one reads` });
+  });
+
+  it(`are read ${CLASSES} different ones at most per render, not per handle`, async () => {
+    const handle = await loadTailwind({ ...config, render: "per render" });
+    for (const from of [0, 1500, 3000]) {
+      warn.mockClear();
+      const html = renderToHtmlNow(
+        <Tailwind tw={handle}>
+          <Email>
+            <Row>
+              <Column>
+                <Html html={Array.from({ length: 1500 }, (_, i) => `<b class="indent-[${from + i}px]">x</b>`).join("")} />
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+      expect(html.match(/text-indent: \d+px/g)).toHaveLength(1500);
+      expect(warn).not.toHaveBeenCalled();
+    }
+  });
+
+  describe("with a plugin that throws for one of them", () => {
+    // A plugin's function for a class's value (a utility's, a variant's) that throws for one value: a class from data.
+    const plugin = ({ matchUtilities, matchVariant }: any) => {
+      matchUtilities({ boom: (value: string) => (value === "now" ? (() => { throw new Error("boom"); })() : { color: "red" }) }, { values: { now: "now", later: "later" } });
+      matchVariant("vboom", (value: string) => (value === "now" ? (() => { throw new Error("vboom"); })() : "&:hover"), { values: { now: "now", later: "later" } });
+    };
+    const template = (handle: TailwindHandle, bad = "boom-now") => (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Paragraph className="p-[7px]">A</Paragraph>
+              <Paragraph className={bad}>B</Paragraph>
+              <Paragraph className="p-[9px]">C</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    // Another tenant's template on the same handle, whose classes are fine: one it hasn't built yet, and a color.
+    const other = (handle: TailwindHandle, n: number) => (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Paragraph className={`text-red-500 p-[${n}px]`}>other</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    const fine = (html: string, n: number) => [html.includes("#fb2c36"), new RegExp(`padding: ?${n}px`).test(html)];
+    let error: MockInstance;
+    beforeEach(() => void (error = vi.spyOn(console, "error").mockImplementation(() => {})));
+    afterEach(() => error.mockRestore());
+
+    it.each(["boom-now", "vboom-now:p-[3px]", "group-vboom-now:p-[3px]", "hover:boom-now!"])("fail the component whose class it is (%s), from the first render, every time, and leave the others' classes be", async (bad) => {
+      const handle = await loadTailwind({ plugins: [plugin] });
+      const name = bad.includes("vboom") ? "vboom" : "boom";
+      for (let i = 0; i < 3; i++) {
+        expect(() => renderToHtmlNow(template(handle, bad))).toThrow(`[Unlayer] ${name} (in <Paragraph> at Row 1 › Column 1 › Paragraph 2)`);
+        // With `onError: "omit"`, that block is left out, and listed; the others keep their classes.
+        const parts = renderToHtmlPartsNow(template(handle, bad), { onError: "omit" });
+        expect(parts.omitted.map((e) => e.message)).toEqual([`[Unlayer] ${name} (in <Paragraph> at Row 1 › Column 1 › Paragraph 2)`]);
+        expect([/padding: ?7px/.test(parts.body), />\s*B\s*</.test(parts.body), /padding: ?9px/.test(parts.body)]).toEqual([true, false, true]);
+      }
+      expect(() => classNameToDeclarations(handle, bad)).toThrow(name);
+    });
+
+    it("fail the component whose class it is where another utility gives the class CSS too, first and later, synchronous and async", async () => {
+      // A static utility of the same name (`.boom-now`, bold) beside the plugin's, which throws for it: the class has
+      // CSS from one and the plugin's error from the other.
+      const both = ({ matchUtilities, addUtilities }: any) => {
+        plugin({ matchUtilities, matchVariant: () => {} });
+        addUtilities({ ".boom-now": { fontWeight: "bold" }, ".now": { color: "green" } });
+      };
+      const page = (handle: TailwindHandle) => (
+        <Tailwind tw={handle}>
+          <Email>
+            <Row>
+              <Column>
+                <Paragraph className="boom-now">FAIL</Paragraph>
+                <Paragraph className="now">OK</Paragraph>
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+      const pinned = "[Unlayer] boom (in <Paragraph> at Row 1 › Column 1 › Paragraph)";
+      const shown = (body: string) => [/>\s*FAIL\s*</.test(body), />\s*OK\s*</.test(body), /color: ?(green|#008000)/.test(body)];
+      for (const render of [(tw: TailwindHandle) => renderToHtmlPartsNow(page(tw), { onError: "omit" }), (tw: TailwindHandle) => renderToHtmlParts(page(tw), { onError: "omit" })]) {
+        const handle = await loadTailwind({ plugins: [both] });
+        for (let i = 0; i < 3; i++) {
+          const parts = await render(handle);
+          expect(parts.omitted.map((e) => e.message)).toEqual([pinned]);
+          expect(shown(parts.body)).toEqual([false, true, true]);
+        }
+        expect(() => renderToHtmlNow(page(handle))).toThrow(pinned);
+      }
+    });
+
+    it("change nothing in another render on the same handle, synchronous or async, at once or right after", async () => {
+      const handle = await loadTailwind({ plugins: [plugin] });
+      expect(() => renderToHtmlNow(template(handle))).toThrow("[Unlayer] boom");
+      expect(fine(renderToHtmlNow(other(handle, 13)), 13)).toEqual([true, true]);
+      const [bad, good] = await Promise.allSettled([renderToHtml(template(handle, "vboom-now:p-[3px]")), renderToHtml(other(handle, 14))]);
+      expect(bad.status === "rejected" && String(bad.reason.message)).toContain("[Unlayer] vboom (in <Paragraph>");
+      expect(good.status === "fulfilled" && fine(good.value, 14)).toEqual([true, true]);
+      expect(fine(renderToHtmlNow(other(handle, 15)), 15)).toEqual([true, true]);
+    });
+
+    it("fail only the component whose class holds a variant named `@` (`@boom:`) its function throws for, not one with a class Tailwind doesn't have", async () => {
+      // Tailwind reads `@boom` as the `@` variant and `boom`, with no dash: a failure was tied to no class of the build,
+      // and fell on its classes with no CSS, `text-nope` too, every render's.
+      const at = ({ matchVariant }: any) => matchVariant("@", (value: string) => (value === "boom" ? (() => { throw new Error("at boom"); })() : "&:hover"), { values: { boom: "boom", ok: "ok" } });
+      const handle = await loadTailwind({ plugins: [at] });
+      const page = (
+        <Tailwind tw={handle}>
+          <Email>
+            <Row>
+              <Column>
+                <Paragraph className="@boom:p-[3px]">A</Paragraph>
+                <Paragraph className="text-nope p-[5px]">B</Paragraph>
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+      for (let i = 0; i < 2; i++) {
+        const parts = renderToHtmlPartsNow(page, { onError: "omit" });
+        expect(parts.omitted.map((e) => e.message)).toEqual(["[Unlayer] at boom (in <Paragraph> at Row 1 › Column 1 › Paragraph)"]);
+        expect([/padding: ?5px/.test(parts.body), />\s*B\s*</.test(parts.body)]).toEqual([true, true]);
+      }
+      expect(classNameToDeclarations(handle, "text-nope").ignored).toEqual([{ className: "text-nope", reason: "Tailwind has no such class" }]);
+    });
+
+    it("fail only the component whose class its function throws for, by the value Tailwind gave it (`(--x)` as `var(--x)`, a `calc()` spaced, a theme's value), on a fresh compiler too", async () => {
+      // A user's Markdown (its raw HTML's classes kept) holds the class the plugin throws for; the app's own heading
+      // has a class of the same utility, built with it. Only the user's block fails, in that render, and the heading
+      // reads in every render after, synchronous and async.
+      const tint = ({ matchUtilities }: any) =>
+        matchUtilities({ brand: (value: string) => (/^#[0-9a-f]{6}$/i.test(value) && value !== "#ef4444" ? { color: value } : (() => { throw new Error(`brand: can't tint ${value}`); })()) }, { values: { blue: "#2563eb", red: "#ef4444" } });
+      const page = (handle: TailwindHandle, markdown: string) => (
+        <Tailwind tw={handle}>
+          <Email>
+            <Row>
+              <Column>
+                <Heading className="brand-blue">Digest</Heading>
+                <Markdown markdown={markdown} />
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+      const blue = (html: string) => /color: ?#2563eb[^"]*"[^>]*>\s*Digest/.test(html) || (/Digest/.test(html) && html.includes("#2563eb"));
+      for (const [bad, given] of [["brand-(--x)", "var(--x)"], ["brand-[calc(1px+2px)]", "calc(1px + 2px)"], ["brand-[#ef4444]", "#ef4444"]]) {
+        const handle = await loadTailwind({ plugins: [tint] });
+        for (const fresh of [false, true]) {
+          const before = compiled.count;
+          if (fresh) {
+            // Past a compiler's classes (renders of 900 new ones each, as data can give), a fresh one takes over: the
+            // one kept ready, at the next render that builds a class (the fourth), and another is compiled.
+            for (let r = 0; r <= 3; r++) renderToHtmlNow(page(handle, `<span class="${Array.from({ length: 900 }, (_, i) => `w-[${r * 1000 + i + 1}px]`).join(" ")}">a</span>`), { onError: "omit" });
+            await vi.waitFor(() => expect(compiled.count).toBeGreaterThan(before));
+          }
+          const parts = renderToHtmlPartsNow(page(handle, `Hi <span class="${bad}">x</span>`), { onError: "omit" });
+          expect([bad, fresh, parts.omitted.map((e) => e.message)]).toEqual([bad, fresh, [`[Unlayer] brand: can't tint ${given} (in <Paragraph> at Row 1 › Column 1 › Markdown › Paragraph)`]]);
+          expect(blue(parts.body)).toBe(true);
+          expect(blue(renderToHtmlNow(page(handle, "Hello")))).toBe(true);
+          expect(blue(await renderToHtml(page(handle, "Hello")))).toBe(true);
+        }
+      }
+    });
+
+    it("fail only the component whose class's modifier its function throws for, not one of the same value without it", async () => {
+      const shadow = ({ matchUtilities }: any) =>
+        matchUtilities({ shadowx: (value: string, { modifier }: { modifier: string | null }) => (modifier && !/^\d+$/.test(modifier) ? (() => { throw new Error(`shadowx: bad opacity ${modifier}`); })() : { color: value }) }, { values: { sm: "#000000", md: "#111111" }, modifiers: "any" });
+      const handle = await loadTailwind({ plugins: [shadow] });
+      const page = (
+        <Tailwind tw={handle}>
+          <Email>
+            <Row>
+              <Column>
+                <Paragraph className="shadowx-md">headline</Paragraph>
+                <Paragraph className="shadowx-md/oops">user</Paragraph>
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+      for (let i = 0; i < 2; i++) {
+        const parts = renderToHtmlPartsNow(page, { onError: "omit" });
+        expect(parts.omitted.map((e) => e.message)).toEqual(["[Unlayer] shadowx: bad opacity oops (in <Paragraph> at Row 1 › Column 1 › Paragraph 2)"]);
+        expect(/headline/.test(parts.body) && parts.body.includes("#111111")).toBe(true);
+      }
+    });
+
+    it("read a class its function gives nothing for (`if (!ok) return;`) as one Tailwind doesn't have, every time, changing nothing in another render", async () => {
+      // `undefined` and `null`, as a function gives for a value it doesn't take, which Tailwind 4's compiler throws for
+      // (and then for every build after it), where Tailwind 3 gave the class no CSS.
+      const sizes: Record<string, string> = { sm: "12px" };
+      const nothing = ({ matchUtilities, matchVariant }: any) => {
+        matchUtilities({ fs: (value: string) => (sizes[value] ? { fontSize: sizes[value] } : undefined) }, { values: { sm: "sm", lg: "lg" }, type: "any" });
+        matchUtilities({ fz: (value: string) => !!sizes[value] && { fontSize: sizes[value] } }, { values: { sm: "sm", lg: "lg" } });
+        matchVariant("vnone", (value: string) => (value === "ok" ? "&:hover" : null), { values: { ok: "ok", no: "no" } });
+      };
+      let n = 30;
+      for (const bad of ["fs-lg", "fs-[huge]", "fz-lg", "vnone-no:p-[3px]"]) {
+        const handle = await loadTailwind({ plugins: [nothing] });
+        for (const render of [(t: React.ReactElement) => renderToHtmlPartsNow(t, { onError: "omit" }), (t: React.ReactElement) => renderToHtmlParts(t, { onError: "omit" }), (t: React.ReactElement) => renderToHtmlPartsNow(t)]) {
+          for (let i = 0; i < 2; i++) {
+            warn.mockClear();
+            const parts = await render(template(handle, bad));
+            expect(parts.omitted).toEqual([]);
+            expect([/padding: ?7px/.test(parts.body), />\s*B\s*</.test(parts.body), /padding: ?9px/.test(parts.body)]).toEqual([true, true, true]);
+            expect(warn).toHaveBeenCalledWith(`[Unlayer] Paragraph ignores class \`${bad}\`: Tailwind has no such class.`);
+            expect(fine(renderToHtmlNow(other(handle, ++n)), n)).toEqual([true, true]);
+          }
+        }
+        expect(JSON.stringify(renderToJsonNow(template(handle, bad)))).toContain('"B"');
+      }
+    });
+
+    // What Tailwind's compiler can't compile, which it throws for, and then for every build after it: an `@apply` of a
+    // class or a variant it doesn't have, or of the class itself, or of nothing; a list holding nothing; a variant
+    // that isn't a selector.
+    const rejected = ({ matchUtilities, matchVariant }: any) => {
+      const gives: Record<string, unknown> = { bad: { "@apply not-a-class": {} }, variant: { "@apply nope:p-1": {} }, self: { "@apply ap-self": {} }, empty: { "@apply": {} }, list: { color: [null] }, num: 42, str: "color: red", fn: () => 1, top: [{ color: "red" }, 5], ok: { color: "red" } };
+      matchUtilities({ ap: (value: string) => gives[value] }, { values: Object.fromEntries(Object.keys(gives).map((k) => [k, k])) });
+      matchVariant("vobj", (value: string) => (value === "bad" ? {} : "&:hover"), { values: { bad: "bad", ok: "ok" } });
+    };
+    it.each([
+      ["ap-bad", "<Tailwind> can't read `ap-bad`: it applies (`@apply`) `not-a-class`, a class Tailwind doesn't have"],
+      ["ap-variant", "<Tailwind> can't read `ap-variant`: it applies (`@apply`) `nope:p-1`, a class Tailwind doesn't have"],
+      ["ap-self", "<Tailwind> can't read `ap-self`: it applies itself (`@apply`), a circular dependency"],
+      ["ap-empty", "<Tailwind>: the plugin's `ap` function gives an `@apply` with no class in it"],
+      ["ap-list", "<Tailwind>: the plugin's `ap` function gives a list holding `null`, which Tailwind can't compile"],
+      ["vobj-bad:p-[3px]", "<Tailwind>: the plugin's `vobj` variant gives an object, not a selector or a list of them"],
+      ["ap-num", "<Tailwind>: the plugin's `ap` function gives `42`, not CSS (an object, or a list of them)"],
+      ["ap-str", "<Tailwind>: the plugin's `ap` function gives `\"color: red\"`, not CSS (an object, or a list of them)"],
+      ["ap-fn", "<Tailwind>: the plugin's `ap` function gives `() => 1`, not CSS (an object, or a list of them)"],
+      ["ap-top", "<Tailwind>: the plugin's `ap` function gives a list holding `5`, not CSS (an object, or a list of them)"],
+    ])("fail the component whose class it is where Tailwind can't compile what its function gives (%s), every time, changing nothing in another render", async (bad, message) => {
+      const handle = await loadTailwind({ plugins: [rejected] });
+      const failure = `[Unlayer] ${message} (in <Paragraph> at Row 1 › Column 1 › Paragraph 2)`;
+      for (let i = 0; i < 3; i++) {
+        expect(() => renderToHtmlNow(template(handle, bad))).toThrow(failure);
+        for (const parts of [renderToHtmlPartsNow(template(handle, bad), { onError: "omit" }), await renderToHtmlParts(template(handle, bad), { onError: "omit" })]) {
+          expect(parts.omitted.map((e) => e.message)).toEqual([failure]);
+          expect([/padding: ?7px/.test(parts.body), />\s*B\s*</.test(parts.body), /padding: ?9px/.test(parts.body)]).toEqual([true, false, true]);
+        }
+        expect(fine(renderToHtmlNow(other(handle, 40 + i)), 40 + i)).toEqual([true, true]);
+        expect(() => renderToJsonNow(template(handle, bad))).toThrow(failure);
+      }
+    });
+
+    it("apply what its function gives `@apply` of, as Tailwind does: where the `@apply` is, with the variants and the `!important` it's under", async () => {
+      const applies = ({ matchUtilities }: any) =>
+        matchUtilities({ btn: (value: string) => ({ "@apply px-[4px] py-[2px]": {}, backgroundColor: value, "&:hover": { "@apply text-[#ff0000]": {} }, "@media (width < 40rem)": { "@apply p-[1px]": {} } }) }, { values: { blue: "#0000ff" } });
+      const handle = await loadTailwind({ plugins: [applies] });
+      const each = (className: string) => classNameToDeclarations(handle, className).declarations.map((d) => `${d.className} ${d.when} ${d.property}: ${d.value}${d.important ? " !important" : ""}`);
+      const own = (className: string, as: string, important = "") => each(className).map((d) => d.replace(/^\S+/, as) + important);
+      expect(each("btn-blue")).toEqual([...own("px-[4px] py-[2px]", "btn-blue"), "btn-blue always background-color: #0000ff", ...own("hover:text-[#ff0000]", "btn-blue"), ...own("max-sm:p-[1px]", "btn-blue")]);
+      expect(each("btn-blue!")).toEqual(each("btn-blue").map((d) => d.replace("btn-blue", "btn-blue!") + " !important"));
+    });
+  });
+
+  const fine = (html: string, n: number) => [html.includes("#fb2c36"), new RegExp(`padding: ?${n}px`).test(html)];
+
+  it("fail, saying to render again, where Tailwind compiles again after a class it couldn't read; the async renderers wait for it", async () => {
+    // A theme value with a quote left open (a config's own: no plugin gave it), which Tailwind writes as CSS that can't be
+    // read: nothing more can be built on that compiler, so a fresh one is compiled, and until it's ready a class it
+    // hasn't built can't be read. A render that needs one fails, as no render goes out without a class's styles.
+    const handle = await loadTailwind({ theme: { extend: { colors: { weird: 'red"' } } } });
+    const page = (className: string) => (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Paragraph className={className}>x</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    // (The compiler kept ready takes over and builds each class of that build alone: `text-weird` is refused, but leaves
+    // it unable to read too, so `p-[5px]` waits for the next one.)
+    expect(() => renderToHtmlNow(page("text-weird p-[5px]"))).toThrow("<Tailwind> can't read the class `p-[5px]` now: it's read once Tailwind has compiled again, after a class it couldn't read. Render again then (the async renderers wait for it) (in <Paragraph>)");
+    expect(() => renderToHtmlNow(page("text-red-500 p-[6px]"))).toThrow("Render again then");
+    // The async renderers wait for the fresh compiler, and read the class on it.
+    expect(fine(await renderToHtml(page("text-red-500 p-[6px]")), 6)).toEqual([true, true]);
+  });
+
+  it("render, from the async renderers, after Tailwind compiles again for a class of their own it couldn't read", async () => {
+    // The same theme, on a handle no render used: the async render's own class is the one Tailwind can't read, and its
+    // render waits for the fresh compiler (twice: the class is built alone, then refused) where a synchronous one fails.
+    const handle = await loadTailwind({ theme: { extend: { colors: { weird: 'red"' } } }, render: "async first" });
+    const page = (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Paragraph className="text-weird p-[5px]">x</Paragraph>
+              <Paragraph className="text-red-500 p-[6px]">y</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    const html = await renderToHtml(page);
+    expect([/padding: ?5px/.test(html), /padding: ?6px/.test(html), html.includes("#fb2c36")]).toEqual([true, true, true]);
+    expect(warn.mock.calls.map((call) => String(call[0]))).toContain("[Unlayer] Paragraph ignores class `text-weird`: it isn't a class Tailwind can read here.");
+  });
+
+  it("list and say each part they leave out once, where they render again after Tailwind compiles again", async () => {
+    // Parts left out before the class that makes Tailwind compile again (a component of yours that throws, a class a
+    // plugin throws for): the render that failed for that class had listed and said them.
+    const boom = ({ matchUtilities }: any) => matchUtilities({ boom: (value: string) => (value === "now" ? (() => { throw new Error("boom"); })() : { color: "red" }) }, { values: { now: "now" } });
+    const handle = await loadTailwind({ theme: { extend: { colors: { weird: 'red"' } } }, plugins: [boom] });
+    const Broken = () => {
+      throw new Error("broken");
+    };
+    const page = (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Broken />
+            </Column>
+          </Row>
+          <Row>
+            <Column>
+              <Paragraph className="boom-now">y</Paragraph>
+              <Paragraph className="text-weird p-[5px]">x</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    const onError = vi.fn();
+    const parts = await renderToHtmlParts(page, { onError });
+    expect(parts.omitted.map((e) => e.message)).toEqual(["[Unlayer] broken (in <Broken> at Row 1 › Column 1 › Broken)", "[Unlayer] boom (in <Paragraph> at Row 2 › Column 1 › Paragraph)"]);
+    expect(onError.mock.calls.map(([e]) => e)).toEqual(parts.omitted);
+    expect(/padding: ?5px/.test(parts.body)).toBe(true);
+  });
+
+  it("past a compiler's classes, compile on without an error or a class left out, for renders at once and one after another", async () => {
+    // Each render's 1,500 new classes: past CLASSES, a fresh compiler takes over once ready, the old one read till then.
+    const handle = await loadTailwind({ ...config, render: "renewals" });
+    const page = (from: number) => (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Html html={Array.from({ length: 1500 }, (_, i) => `<b class="indent-[${from + i}px]">x</b>`).join("")} />
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    const count = (html: string) => html.match(/text-indent: \d+px/g)?.length;
+    for (let round = 0; round < 2; round++) {
+      const sync = [0, 1, 2].map((i) => count(renderToHtmlNow(page((round * 6 + i) * 1500))));
+      const async = await Promise.all([3, 4, 5].map(async (i) => count(await renderToHtml(page((round * 6 + i) * 1500)))));
+      expect([...sync, ...async]).toEqual([1500, 1500, 1500, 1500, 1500, 1500]);
+    }
+    expect(warn).not.toHaveBeenCalled();
+  }, 60_000);
+
+  describe("in a synchronous loop of renders on one handle (a batch job), which never lets a fresh compiler compile", () => {
+    // Each build was Tailwind's whole stylesheet of every class the handle had built: a loop of renders with new classes
+    // (one `text-[#hex]` each, or a Markdown's 64 KB of them) cost more with each, its memory growing without end
+    // (150 Markdowns: 2.1 s for the last, 2.9 GB).
+    const page = (handle: TailwindHandle, from: number) => (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Html html={Array.from({ length: 400 }, (_, i) => `<b class="indent-[${from + i}px]">x</b>`).join("")} />
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+
+    it("swaps its compiler past its classes at once, for the one kept ready: the stylesheet built is a fresh one's", async () => {
+      const handle = await loadTailwind({ ...config, loop: "swap" });
+      const sizes: number[] = [];
+      for (let r = 0; r < 12; r++) {
+        expect(renderToHtmlNow(page(handle, r * 400))).toMatch(new RegExp(`text-indent: ?${r * 400 + 399}px`));
+        sizes.push(sheets.css);
+      }
+      // 2,400 classes on the first by the sixth render; the seventh's on the fresh one, which has 2,400 by the twelfth.
+      expect(sizes[5]).toBeGreaterThan(sizes[0] * 5);
+      expect(sizes[11]).toBeLessThan(sizes[5] * 1.2);
+      expect(sizes[6]).toBeLessThan(sizes[5] / 3);
+    });
+
+    it(`builds no new class past ${CEILING} times a compiler's classes, failing the render that needs one with how to go on: yield, or render async`, async () => {
+      const handle = await loadTailwind({ ...config, loop: "ceiling" });
+      let failed: unknown;
+      let r = 0;
+      for (; r < 40 && !failed; r++) {
+        try {
+          renderToHtmlNow(page(handle, r * 400));
+        } catch (error) {
+          failed = error;
+        }
+      }
+      // The first compiler's 2,000 (and a render's), then the fresh one's to the ceiling.
+      expect(r * 400).toBeGreaterThan((1 + CEILING) * CLASSES);
+      expect(r * 400).toBeLessThan((1 + CEILING) * CLASSES + 2000);
+      expect(String((failed as Error)?.message)).toContain(`now: ${FULL} (in <Html>)`);
+      // A render whose classes its compiler built reads them as before (the last that rendered).
+      expect(renderToHtmlNow(page(handle, (r - 2) * 400))).toMatch(new RegExp(`text-indent: ?${(r - 2) * 400 + 399}px`));
+      // Once the app yields, a fresh compiler is ready: renders go on.
+      await new Promise((resolve) => setImmediate(resolve));
+      await vi.waitFor(() => expect(renderToHtmlNow(page(handle, r * 400))).toMatch(new RegExp(`text-indent: ?${r * 400 + 399}px`)));
+      // And the async renderers wait for one where they'd meet the ceiling.
+      for (let i = 1; i <= 30; i++) expect(await renderToHtml(page(handle, (r + i) * 400))).toMatch(new RegExp(`text-indent: ?${(r + i) * 400 + 399}px`));
+    }, 60_000);
+  });
+
+  it("are a <Tailwind>'s own: a class outside it isn't compiled", async () => {
+    // (The plugin says which of its classes Tailwind compiled, and throws for this one.)
+    const called: string[] = [];
+    const plugin = ({ matchUtilities }: any) => matchUtilities({ boom: (value: string) => (called.push(value), value === "now" ? (() => { throw new Error("boom"); })() : { color: "red" }) }, { values: { now: "now", later: "later" } });
+    const handle = await loadTailwind({ plugins: [plugin] });
+    const html = renderToHtmlNow(
+      <Email>
+        <Row>
+          <Column>
+            <Paragraph className="boom-now">Out</Paragraph>
+          </Column>
+        </Row>
+        <Tailwind tw={handle}>
+          <Row>
+            <Column>
+              <Paragraph className="p-[7px] boom-later">In</Paragraph>
+            </Column>
+          </Row>
+        </Tailwind>
+      </Email>
+    );
+    expect([/padding: ?7px/.test(html), />\s*Out\s*</.test(html)]).toEqual([true, true]);
+    expect(called).toContain("later");
+    expect(called).not.toContain("now");
+  });
+});
+
+describe("a class from data, before Tailwind's compiler", () => {
+  // Tailwind's build takes time growing faster than a class's size with some shapes, and keeps every class it built:
+  // each `&` of an arbitrary variant is the whole selector again, chained compound variants are cubic, variants or
+  // brackets thousands deep overflow its stack. One tenant's class (a CMS's markup, a className from data) failed or
+  // slowed every later render on a shared handle.
+  const amp = (kb: number) => `[${"&:hover".repeat(Math.ceil((kb * 1024) / 7))}]:p-1`;
+  const long = (n: number) => `bg-[url(https://example.com/${"a".repeat(n - 34)}.png)]`;
+  const page = (handle: TailwindHandle, html: string, className = "") => (
+    <Tailwind tw={handle}>
+      <Email>
+        <Row>
+          <Column>
+            <Heading className={className}>Order shipped</Heading>
+            <Paragraph html={html} />
+          </Column>
+        </Row>
+      </Email>
+    </Tailwind>
+  );
+  const colors = ["red", "green", "amber", "violet", "sky", "pink", "lime", "teal", "rose", "indigo", "orange", "cyan", "fuchsia", "emerald", "slate", "zinc", "stone", "yellow", "purple", "blue"];
+
+  it(`never gives Tailwind a class past ${CLASS_LIMITS.characters} characters, ${CLASS_LIMITS.variants} variants, ${CLASS_LIMITS.ampersands} \`&\` in its variants or brackets ${CLASS_LIMITS.depth} deep; at them, it does`, async () => {
+    const handle = await loadTailwind({ ...config, limits: true });
+    const at = [long(512), "hover:focus:sm:md:max-lg:first:group-hover:p-1", "[&_p&_a&_b&_i]:p-1", `w-[calc(${"(".repeat(6)}1px${")".repeat(6)})]`];
+    const past = [long(513), "hover:focus:sm:md:max-lg:first:odd:group-hover:p-1", "[&_p&_a&_b&_i&_u]:p-1", `w-[calc(${"(".repeat(7)}1px${")".repeat(7)})]`];
+    expect(at[0]).toHaveLength(512);
+    for (const className of at) {
+      const candidates = compiled.candidates;
+      expect([className, classNameToDeclarations(handle, className).ignored.filter((i) => i.reason.startsWith(BEYOND))]).toEqual([className, []]);
+      expect(compiled.candidates - candidates).toBe(1);
+    }
+    const reasons = [
+      `Tailwind isn't given a class of more than ${CLASS_LIMITS.characters} characters`,
+      `Tailwind isn't given a class of more than ${CLASS_LIMITS.variants} variants`,
+      `Tailwind isn't given more than ${CLASS_LIMITS.ampersands} \`&\` in a class's variants`,
+      `Tailwind isn't given brackets nested more than ${CLASS_LIMITS.depth} deep`,
+    ];
+    for (const [i, className] of past.entries()) {
+      const candidates = compiled.candidates;
+      expect(classNameToDeclarations(handle, `${className} p-2`).ignored).toEqual([{ className, reason: reasons[i] }]);
+      expect(compiled.candidates - candidates).toBeLessThanOrEqual(1);
+    }
+    // The longest class this repo's examples and docs hold, a radial gradient, is far within them.
+    expect(classNameToDeclarations(handle, "bg-[radial-gradient(ellipse_at_bottom_left,rgba(99,102,241,0.04),transparent_50%)]").declarations).toHaveLength(1);
+  });
+
+  it("leaves a class past them as written, said once in a render, its start only", async () => {
+    const handle = await loadTailwind({ ...config, limits: "said" });
+    const hostile = amp(20);
+    const template = (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Paragraph className={`${hostile} text-red-500`}>a</Paragraph>
+              <Paragraph className={`${"group-".repeat(500)}hover:p-1 text-red-500`}>b</Paragraph>
+              <Paragraph html={`<span class="${hostile} underline">c</span>`} />
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    for (const render of [() => renderToHtmlNow(template), () => renderToHtml(template)]) {
+      warn.mockClear();
+      const html = await render();
+      expect(html.match(/color: ?#fb2c36/g)?.length).toBeGreaterThanOrEqual(2);
+      expect(html).toMatch(/text-decoration: ?underline/);
+      expect(html).toContain(`class="${hostile}"`);
+      expect(warn.mock.calls.map((call) => String(call[0])).filter((text) => text.includes(BEYOND))).toEqual([
+        `[Unlayer] Paragraph ignores class \`${hostile.slice(0, 60)}…\`, and the render's other classes like it: Tailwind isn't given a class of more than ${CLASS_LIMITS.characters} characters. A class is read with at most ${CLASS_LIMITS.characters} characters, ${CLASS_LIMITS.variants} variants, ${CLASS_LIMITS.ampersands} \`&\` in its variants and brackets ${CLASS_LIMITS.depth} deep, as Tailwind takes time growing faster than a class's size past them.`,
+      ]);
+    }
+  });
+
+  it.each(["sync", "async"] as const)("%s: one tenant's 100 KB `[&:hover…]:` in its markup leaves every later render on the handle right and fast", async (mode) => {
+    // The hostile render failed with `Invalid string length`, and so did 20 of 20 later renders with a class Tailwind
+    // hadn't built, 40 s later too; a 20 KB one made each later build take 0.6 s and the process 75 MB more.
+    const handle = await loadTailwind({ ...config, tenants: mode });
+    const render = (element: React.ReactElement) => (mode === "sync" ? renderToHtmlNow(element) : renderToHtml(element));
+    expect(await render(page(handle, "<p>Hi</p>", "text-blue-600"))).toContain("color: #155dfc");
+    for (const kb of [100, 40, 20]) expect(await render(page(handle, `<p class="${amp(kb)}">Hi</p>`))).toContain("Order shipped");
+    const heap = process.memoryUsage().heapUsed;
+    const slow: string[] = [];
+    // (One that looks slow is timed again with classes the handle hasn't built either: it reads the ones it built from
+    // what it built.)
+    let again = 0;
+    for (const [i, color] of colors.entries()) {
+      const timing = await within(250, () => render(page(handle, `<p class="text-${color}-${(1 + (i % 9)) * 100}">Hi</p>`, `text-${color}-${(1 + ((i + 3) % 9)) * 100} font-bold`)), {
+        again: () => render(page(handle, `<p class="p-[${1000 + again++}px]">Hi</p>`, `m-[${1000 + again++}px] font-bold`)),
+      });
+      expect(timing.result).toContain("font-weight: 700");
+      if (!timing.ok) slow.push(`${color}: ${inTime(timing)}`);
+    }
+    expect(slow).toEqual([]);
+    expect((process.memoryUsage().heapUsed - heap) / 1e6).toBeLessThan(64);
+  }, 60_000);
+
+  it("reads chained compound variants (`group-group-…-hover:`) from data in no time: they're left out", async () => {
+    // Tailwind's build took 3 s for 8 KB of them, 12 s with `in-`, blocking the event loop.
+    const handle = await loadTailwind({ ...config, compounds: true });
+    for (const prefix of ["group-", "in-"]) {
+      const className = `${prefix.repeat(Math.ceil(8192 / prefix.length))}hover:p-1`;
+      const timing = await within(250, () => renderToHtmlNow(page(handle, `<p class="${className}">Hi</p>`, `${className} text-red-500`)));
+      expect(inTime(timing)).toBe(true);
+      expect(timing.result).toContain("color: #fb2c36");
+    }
+  }, 60_000);
+
+  it("renders a synchronous batch on one handle whatever one recipient's class: the others aren't told to render again", async () => {
+    // `max-sm:` 3,000 times overflowed Tailwind's stack, and nested `calc(` did the same: the 50 ordinary recipients
+    // after it failed ("can't read the class … now. Render again").
+    const handle = await loadTailwind({ ...config, batch: true });
+    const email = (name: string, className: string) => (
+      <Tailwind tw={handle}>
+        <Email>
+          <Row>
+            <Column>
+              <Heading className="text-2xl font-bold">Hi {name}</Heading>
+              <Paragraph html={`<span class="${className}">Your order shipped</span>`} />
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    renderToHtmlNow(email("warm", "text-gray-700"));
+    for (const hostile of ["max-sm:".repeat(3000) + "p-1", `w-[calc(${"(".repeat(10_000)}1px${")".repeat(10_000)})]`, `w-[${"var(--a,".repeat(2000)}1px${")".repeat(2000)}]`]) {
+      const recipients = [{ name: "mallory", className: hostile }];
+      const ordinary = ["text-blue-600", "text-green-700", "text-rose-500", "underline", "italic", "text-sm", "font-semibold", "text-[#123456]"];
+      for (let i = 0; i < 50; i++) recipients.push({ name: `user${i}`, className: `${ordinary[i % ordinary.length]} p-[${i}px]` });
+      let ok = 0;
+      for (const { name, className } of recipients) if (renderToHtmlNow(email(name, className)).includes(`Hi ${name}`)) ok++;
+      expect(ok).toBe(51);
+    }
+  }, 60_000);
+
+  it("gives Tailwind no class within them that makes its build throw, leaves it unable to read the next one, or takes more than a few milliseconds (fuzzed)", async () => {
+    // `TAILWIND_LIMITS_FUZZ_RUNS=20000` for a longer run, `TAILWIND_LIMITS_FUZZ_SEED` for other inputs. A fresh handle
+    // every 200 classes: in a synchronous loop, the fresh compiler past CLASSES isn't ready, and each build is the
+    // stylesheet of all the classes so far.
+    const runs = Number(process.env.TAILWIND_LIMITS_FUZZ_RUNS ?? 1500);
+    const r = random(Number(process.env.TAILWIND_LIMITS_FUZZ_SEED ?? 20261024));
+    const pick = <T,>(list: T[]) => list[Math.floor(r() * list.length)];
+    const variants = ["hover", "focus", "sm", "max-sm", "max-[480px]", "min-[600px]", "dark", "print", "rtl", "first", "odd", "group-hover", "peer-focus", "not-hover", "in-focus", "has-checked", "group-[.a]", "peer-[&:hover]", "[&:hover]", "[&_p]", "[&>*]", "[&:not(&)]", "[@media(width<480px)]", "[@supports(display:grid)]", "[&:is(a,b)]", "aria-checked", "data-[state=open]", "supports-[display:grid]", "@container", "*", "**", "[[data-x]_&]", "[&::before]", "before", "placeholder", "marker"];
+    const utilities = ["p-1", "-m-2", "w-[100px]", "text-red-500", "bg-[#123]", "bg-red-500/50", "text-[length:var(--x)]", "p-(--x)", "[color:red]", "[--x:1px]", "content-['a']", "bg-[url(https://e.com/a.png)]", "bg-[linear-gradient(red,blue)]", "w-[calc(100%-2px)]", "w-[min(10px,calc(1px+2px))]", "shadow-[0_0_0_1px_rgba(0,0,0,0.1)]", "font-[Open_Sans]", "text-[13px]/[20px]", "rounded-[50%]", "[grid-area:1/1/2/2]", "aspect-[16/9]", "text-[rgb(1_2_3/50%)]", "text-[\\23ff0000]", "content-['\\\\']", "content-['é😀']", "bg-[url(data:image/png;base64,AAAA)]", "w-[theme(spacing.4)]", "p-[--spacing(2)]", "!p-1", "p-1!", "w-1/2", "border-[length:2px]"];
+    const junk = ["(", ")", "[", "]", "{", "}", "'", '"', "\\", "&", ",", "_", ":", ";", "!", "@", "#", "%", "/", "*", "+", "-", ".", "=", ">", "<", "~", "^", "|", "$", "?", "é", "😀", "\u0000", "\u200b", "a", "0", "var(", "calc(", "url(", "theme(", "--x", "&_", "&:"];
+    const made = () => {
+      const kind = Math.floor(r() * 3);
+      let cls = "";
+      if (kind === 0) {
+        for (let n = Math.floor(r() * 4); n > 0; n--) cls += pick(variants) + ":";
+        cls += pick(utilities);
+        for (let n = Math.floor(r() * 3); n > 0; n--) {
+          const at = Math.floor(r() * (cls.length + 1));
+          cls = cls.slice(0, at) + pick(junk) + cls.slice(at);
+        }
+      } else if (kind === 1) for (let n = 1 + Math.floor(r() * 120); n > 0; n--) cls += pick(r() < 0.5 ? junk : [...variants, ...utilities, ":"]);
+      else cls = `${"group-".repeat(Math.floor(r() * 7))}${pick(variants)}:[${"&_x".repeat(1 + Math.floor(r() * 4))}${"_y".repeat(Math.floor(r() * 200))}]:${pick(utilities)}`;
+      // Grown by repeating a piece of it.
+      if (r() < 0.3) {
+        const at = Math.floor(r() * cls.length);
+        cls = cls.slice(0, at) + cls.slice(at, at + 1 + Math.floor(r() * 8)).repeat(1 + Math.floor(r() * 60)) + cls.slice(at);
+      }
+      return cls.replace(/\s/g, "_").slice(0, 512);
+    };
+    // And the class Tailwind's build threw for (an escape of no character, past U+10FFFF), which left Elements
+    // waiting for a fresh compiler for every class after it.
+    const known = ["--xborder-[length:2px]^w-[min(10px,calc(1px+2px))]text-[\\23ff0000]/"];
+    const bad: string[] = [];
+    let handle = tw;
+    let slowest = { ms: 0, className: "" };
+    for (let run = 0; run < runs + known.length && bad.length < 5; run++) {
+      if (run % 200 === 0) handle = await loadTailwind({ ...config, fuzz: run });
+      const className = known[run] ?? made();
+      const start = performance.now();
+      try {
+        classNameToDeclarations(handle, className);
+      } catch (error) {
+        bad.push(`${JSON.stringify(className)} throws ${String(error)}`);
+      }
+      const ms = performance.now() - start;
+      if (ms > slowest.ms) slowest = { ms, className };
+      const next = classNameToDeclarations(handle, `p-[${run + 1000}px]`);
+      if (!next.declarations.length) bad.push(`after ${JSON.stringify(className)}: ${JSON.stringify(next.ignored)}`);
+    }
+    expect(bad).toEqual([]);
+    // The slowest, timed twice more on a fresh handle (one reads a class it built from what it built), its fastest
+    // against the limit times this machine's slowness.
+    if (slowest.ms >= 100) {
+      for (let i = 0; i < 2; i++) {
+        const fresh = await loadTailwind({ ...config, slowest: i });
+        const start = performance.now();
+        classNameToDeclarations(fresh, slowest.className);
+        slowest.ms = Math.min(slowest.ms, performance.now() - start);
+      }
+    }
+    expect([slowest.ms < 100 * (slowest.ms < 100 ? 1 : slowness()), slowest.className]).toEqual([true, slowest.className]);
+  }, 120_000);
+});
+
+describe("the async renderers, with <Tailwind config>", () => {
+  const template = (
+    <Tailwind config={config}>
+      <Email className="bg-gray-100">
+        <Row className="bg-white">
+          <Column className="p-6">
+            <Paragraph className="text-brand text-lg">Hello</Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    </Tailwind>
+  );
+
+  it("compile it and render, in all four forms", async () => {
+    const html = await renderToHtml(template, { title: "Hi" });
+    expect(html).toMatch(/^<!DOCTYPE/);
+    for (const css of ["#f3f4f6", "color: #007291", "font-size: 18px", "padding: 24px", "<title>Hi</title>"]) expect(html).toContain(css);
+    expect(await renderToPlainText(template)).toBe("Hello");
+    const design = await renderToJson(template);
+    expect(design.body.values.backgroundColor).toBe("#f3f4f6");
+    expect(design.body.rows[0].values.columnsBackgroundColor).toBe("#fff");
+    expect(design.body.rows[0].columns[0].values.padding).toBe("24px");
+    expect(design.body.rows[0].columns[0].contents[0].values).toMatchObject({ color: "#007291", fontSize: "18px" });
+    const parts = await renderToHtmlParts(template);
+    expect(parts.body).toContain("color: #007291");
+  });
+
+  it("compile it with the compiler of its own copy of Elements, whichever copy's Tailwind entry loaded last", async () => {
+    // Another copy of Elements in the app (another version, a package still on one), whose Tailwind entry loaded after.
+    const LOADER = Symbol.for("@unlayer/react-elements/tailwind-loader");
+    const global = globalThis as Record<symbol, unknown>;
+    const own = global[LOADER];
+    const other = vi.fn(async () => {
+      throw new Error("another copy's compiler");
+    });
+    global[LOADER] = other;
+    try {
+      expect(await renderToHtml(template)).toContain("color: #007291");
+      expect(other).not.toHaveBeenCalled();
+    } finally {
+      global[LOADER] = own;
+    }
+  });
+
+  it("take Tailwind's default theme from a <Tailwind> without a config, and `tw` as it is", async () => {
+    const plain = await renderToJson(
+      <Tailwind>
+        <Email className="bg-red-500">
+          <Row>
+            <Column />
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    expect(plain.body.values.backgroundColor).toBe("#fb2c36");
+    const given = await renderToJson(
+      <Tailwind tw={tw}>
+        <Email className="bg-brand">
+          <Row>
+            <Column />
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    expect(given.body.values.backgroundColor).toBe("#007291");
+  });
+
+  it("keep what they compiled their own: a synchronous render the user's code starts in theirs needs `tw`, as anywhere else", async () => {
+    // It found the async render's compiled config while that render ran, and rendered there only.
+    const { registerTool, renderToHtml: renderToHtmlSync } = await import("../index");
+    const inner = <Tailwind config={config}><Email><Row><Column><Paragraph className="text-brand">Inner</Paragraph></Column></Row></Email></Tailwind>;
+    const said: string[] = [];
+    const nested = () => {
+      try {
+        renderToHtmlSync(inner);
+        said.push("rendered");
+      } catch (error) {
+        said.push(String((error as Error).message));
+      }
+    };
+    const Nested = registerTool({ name: "tailwind_nested", renderer: { exporters: { email: () => (nested(), "<b>nested</b>") } } });
+    const onError = () => nested();
+    const Broken = () => {
+      throw new Error("broken");
+    };
+    nested();
+    expect(await renderToHtml(<Tailwind config={config}><Email><Row><Column><Nested /><Broken /><Paragraph className="text-brand">Outer</Paragraph></Column></Row></Email></Tailwind>, { onError })).toContain("color: #007291");
+    expect(said).toHaveLength(3);
+    expect(new Set(said)).toEqual(new Set(['[Unlayer] <Tailwind config> needs `tw`: `await loadTailwind(config)` from "@unlayer/react-elements/tailwind", or the async renderers ("@unlayer/react-elements/async"), which compile it (these are synchronous).']));
+  });
+
+  it("find a <Tailwind> a template returns, and render its components once", async () => {
+    const calls = { welcome: 0, greeting: 0 };
+    const Greeting = ({ name }: { name: string }) => {
+      calls.greeting++;
+      return <Paragraph className="text-brand">Hi {name}</Paragraph>;
+    };
+    // A config written in the component: a new object each time it's called.
+    const Welcome = ({ name }: { name: string }) => {
+      calls.welcome++;
+      return (
+        <Tailwind config={{ theme: { extend: { colors: { brand: "#007291" } } } }}>
+          <Email className="bg-gray-100">
+            <Row>
+              <Column>
+                <Greeting name={name} />
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+    };
+    const html = await renderToHtml(<Welcome name="Ada" />);
+    expect(html).toContain("color: #007291");
+    expect(html).toContain("#f3f4f6");
+    expect(calls).toEqual({ welcome: 1, greeting: 1 });
+    const design = await renderToJson(<Welcome name="Ada" />);
+    expect(design.body.rows[0].columns[0].contents[0].values.color).toBe("#007291");
+  });
+
+  it("find a <Tailwind> a component deeper in renders, too", async () => {
+    const Section = () => (
+      <Tailwind config={config}>
+        <Paragraph className="text-brand">Inside</Paragraph>
+      </Tailwind>
+    );
+    const design = await renderToJson(
+      <Email>
+        <Row>
+          <Column>
+            <Section />
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(design.body.rows[0].columns[0].contents[0].values.color).toBe("#007291");
+  });
+});
+
+/** A seeded random number generator (mulberry32): the same inputs every run. */
+function random(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
diff --git a/packages/react/src/tailwind/component.test.tsx b/packages/react/src/tailwind/component.test.tsx
new file mode 100644
index 00000000..e9e5242f
--- /dev/null
+++ b/packages/react/src/tailwind/component.test.tsx
@@ -0,0 +1,1349 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+import {
+  Button,
+  Column,
+  Divider,
+  Document,
+  Email,
+  Heading,
+  Html,
+  Image,
+  Link,
+  Menu,
+  Page,
+  Paragraph,
+  Row,
+  Social,
+  Table,
+  renderToHtml,
+  renderToHtmlParts,
+  renderToJson,
+  renderToPlainText,
+  renderRowToJson,
+  UnlayerProvider,
+} from "../index";
+import { Tailwind, classNameToDeclarations, loadTailwind, renderToHtml as renderToHtmlAsync, renderToJson as renderToJsonAsync, type TailwindHandle } from "./index";
+import { inlineClasses } from "./html";
+import { growth, inTime, within } from "../test-timing";
+
+const config = { theme: { extend: { colors: { brand: "#007291" } } } };
+let tw: TailwindHandle;
+beforeAll(async () => {
+  tw = await loadTailwind(config);
+});
+
+let warn: MockInstance;
+beforeEach(() => {
+  warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+});
+afterEach(() => warn.mockRestore());
+const warnings = () => warn.mock.calls.map((call) => String(call[0]));
+
+const design = (content: React.ReactNode, root: Record<string, unknown> = {}) =>
+  renderToJson(
+    <Tailwind tw={tw}>
+      <Email {...root}>
+        <Row>
+          <Column>{content}</Column>
+        </Row>
+      </Email>
+    </Tailwind>
+  );
+/** One block's values in the design. */
+const block = (node: React.ReactElement) => design(node).body.rows[0].columns[0].contents[0].values as Record<string, any>;
+
+describe("<Tailwind>: classes as each component's props", () => {
+  it("gives Paragraph and Heading their text styles", () => {
+    expect(block(<Paragraph className="text-lg font-bold text-brand leading-7 tracking-wide text-center font-serif">Hi</Paragraph>)).toMatchObject({
+      fontSize: "18px",
+      fontWeight: 700,
+      color: "#007291",
+      lineHeight: "28px",
+      letterSpacing: "0.025em",
+      textAlign: "center",
+      fontFamily: { value: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif" },
+    });
+    // A unitless line height (Tailwind's text sizes) as the editor writes one: a percentage.
+    expect(block(<Heading className="text-3xl font-semibold text-gray-900">Title</Heading>)).toMatchObject({ fontSize: "30px", lineHeight: "120%", fontWeight: 600, color: "#101828" });
+    expect(block(<Paragraph className="text-sm">Hi</Paragraph>)).toMatchObject({ fontSize: "14px", lineHeight: "142.86%" });
+  });
+
+  it("puts a block's margins and padding in its containerPadding, other sides kept", () => {
+    expect(block(<Paragraph className="my-4 px-2">Hi</Paragraph>).containerPadding).toBe("16px 8px");
+    expect(block(<Paragraph className="mt-6">Hi</Paragraph>).containerPadding).toBe("24px 10px 10px");
+    expect(block(<Html html="<b>x</b>" className="m-2 p-2" />).containerPadding).toBe("16px");
+    // In one unit, or with a zero, they add up too.
+    expect(block(<Paragraph className="p-[5%] m-[2%]">Hi</Paragraph>).containerPadding).toBe("7%");
+    expect(block(<Paragraph className="p-[5%] m-0">Hi</Paragraph>).containerPadding).toBe("5%");
+    expect(warnings()).toEqual([]);
+  });
+
+  it("keeps a block's padding where its margin can't be added to it, and says so", () => {
+    // Whatever the classes' order: the padding is the block's own.
+    for (const className of ["p-[5%] m-2", "m-2 p-[5%]"]) expect(block(<Paragraph className={className}>Hi</Paragraph>).containerPadding).toBe("5%");
+    expect(block(<Paragraph className="pt-[5%] m-2">Hi</Paragraph>).containerPadding).toBe("5% 8px 8px");
+    expect([...new Set(warnings())]).toEqual([
+      "[Unlayer] Paragraph ignores `margin: 8px` from class `m-2`: its `containerPadding` can't add it to `padding: 5%`.",
+      "[Unlayer] Paragraph ignores `margin: 8px` from class `m-2`: its `containerPadding` can't add it to `padding-top: 5%`.",
+    ]);
+    // Said once for a margin on several sides.
+    expect(warnings()).toHaveLength(3);
+  });
+
+  it("gives Button its colors, inner padding, corners, border, width and hover colors", () => {
+    const values = block(
+      <Button href="https://example.com" className="bg-blue-600 text-white px-6 py-3 rounded-lg border-2 border-blue-800 w-full hover:bg-blue-700 hover:text-blue-50 m-2">
+        Go
+      </Button>
+    );
+    expect(values.buttonColors).toEqual({ backgroundColor: "#155dfc", color: "#fff", hoverBackgroundColor: "#1447e6", hoverColor: "#eff6ff" });
+    expect(values).toMatchObject({ padding: "12px 24px", borderRadius: "8px", containerPadding: "8px", size: { width: "100%", autoWidth: false } });
+    expect(values.border).toMatchObject({ borderTopWidth: "2px", borderTopStyle: "solid", borderTopColor: "#193cb8", borderLeftWidth: "2px" });
+    // No hover class: it keeps its colors on hover, as in the browser.
+    expect(block(<Button className="bg-red-500 text-black">Go</Button>).buttonColors).toEqual({ backgroundColor: "#fb2c36", color: "#000", hoverBackgroundColor: "#fb2c36", hoverColor: "#000" });
+    // Padding on one axis keeps the default on the other.
+    expect(block(<Button className="px-8">Go</Button>).padding).toBe("10px 32px");
+  });
+
+  it("paints a Row's content width and pads it; a Column gets its background, padding, border and corners", () => {
+    const row = design(<Paragraph>Hi</Paragraph>).body.rows[0].values;
+    expect(row.columnsBackgroundColor).toBe("");
+    const json = renderToJson(
+      <Tailwind tw={tw}>
+        <Email>
+          <Row className="bg-white p-4">
+            <Column className="bg-gray-50 p-6 border border-gray-200 rounded-lg">
+              <Paragraph>Hi</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    // (A card in it: the Row's padding stays around it, see "a Row's padding" below.)
+    expect(json.body.rows[0].values).toMatchObject({ columnsBackgroundColor: "#fff", backgroundColor: "", padding: "16px" });
+    const column = json.body.rows[0].columns[0].values;
+    expect(column).toMatchObject({ backgroundColor: "#f9fafb", padding: "24px", borderRadius: "8px" });
+    expect(column.border).toEqual(
+      Object.fromEntries(["Top", "Right", "Bottom", "Left"].flatMap((side) => [[`border${side}Width`, "1px"], [`border${side}Style`, "solid"], [`border${side}Color`, "#e5e7eb"]]))
+    );
+  });
+
+  it("sizes Image and Divider, and gives a Divider's line its border", () => {
+    expect(block(<Image src="https://example.com/a.png" className="w-1/2" />).src).toMatchObject({ autoWidth: false, maxWidth: "50%" });
+    expect(block(<Divider className="border-t-2 border-dashed border-gray-300 w-3/4" />)).toMatchObject({
+      width: "75%",
+      border: { borderTopWidth: "2px", borderTopStyle: "dashed", borderTopColor: "#d1d5dc" },
+    });
+    expect(block(<Menu items={[{ text: "Home", href: "https://example.com" }]} className="text-sm text-gray-900 text-left" />)).toMatchObject({ fontSize: "14px", textColor: "#101828", align: "left" });
+    expect(block(<Social icons={[]} className="text-right" />)).toMatchObject({ align: "right" });
+  });
+
+  it("styles the root it's around, or that it's the only child of", () => {
+    const body = design(<Paragraph>Hi</Paragraph>, { className: "bg-gray-100 text-gray-900 font-sans max-w-[600px]" }).body.values;
+    expect(body).toMatchObject({ backgroundColor: "#f3f4f6", textColor: "#101828", contentWidth: "600px" });
+    // Tailwind's sans-serif stack (its theme's `--font-sans`).
+    expect(body.fontFamily.value).toMatch(/sans-serif, 'Apple Color Emoji'/);
+    const inside = renderToJson(
+      <Email className="bg-gray-100 max-w-xl">
+        <Tailwind tw={tw}>
+          <Row>
+            <Column>
+              <Paragraph className="text-red-500">Hi</Paragraph>
+            </Column>
+          </Row>
+        </Tailwind>
+      </Email>
+    );
+    expect(inside.body.values).toMatchObject({ backgroundColor: "#f3f4f6", contentWidth: "576px" });
+    expect(inside.body.rows[0].columns[0].contents[0].values.color).toBe("#fb2c36");
+  });
+
+  it("gives the HTML what it gives the design", () => {
+    const element = (
+      <Tailwind tw={tw}>
+        <Email className="bg-gray-100">
+          <Row className="bg-white">
+            <Column className="p-6">
+              <Paragraph className="text-red-500 text-lg">Hello</Paragraph>
+              <Button className="bg-blue-600 rounded-lg">Go</Button>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    const html = renderToHtml(element);
+    for (const css of ["#f3f4f6", "color: #fb2c36", "font-size: 18px", "#155dfc", "border-radius: 8px", "padding: 24px"]) expect(html).toContain(css);
+    expect(html).not.toMatch(/class="[^"]*(bg-|text-red)/);
+    // Rendered by React itself, as a Server Component would.
+    const markup = renderToStaticMarkup(element);
+    expect(markup).toContain("#f3f4f6");
+    expect(markup).toContain("color: #fb2c36");
+  });
+
+  it("styles blocks a component of the user's own renders, and the innermost <Tailwind> wins", async () => {
+    const other = await loadTailwind({ theme: { extend: { colors: { brand: "#ff0000" } } } });
+    const Promo = ({ text }: { text: string }) => {
+      const [label] = React.useState(text);
+      return (
+        <Tailwind tw={other}>
+          <Paragraph className="text-brand">{label}</Paragraph>
+        </Tailwind>
+      );
+    };
+    const json = design(
+      <>
+        <Paragraph className="text-brand">Ours</Paragraph>
+        <Promo text="Theirs" />
+      </>
+    );
+    expect(json.body.rows[0].columns[0].contents.map((c: any) => c.values.color)).toEqual(["#007291", "#ff0000"]);
+  });
+
+  it("leaves className alone outside a <Tailwind>", () => {
+    const json = renderToJson(
+      <Email>
+        <Row>
+          <Column>
+            <Paragraph className="text-lg">Hi</Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(json.body.rows[0].columns[0].contents[0].values.fontSize).toBe("14px");
+    // A class name is the HTML's (for the embedder's own CSS); the design can't hold it.
+    expect(warnings()).toEqual(["[Unlayer] Paragraph `className` is kept in HTML but not in the design for the visual editor."]);
+  });
+});
+
+describe("<Tailwind>: props given win over classes", () => {
+  it("over a class, flat, in a group or in `values`", () => {
+    expect(block(<Paragraph className="text-lg text-red-500" fontSize="20px">Hi</Paragraph>)).toMatchObject({ fontSize: "20px", color: "#fb2c36" });
+    expect(block(<Button className="bg-red-500 text-white" buttonColors={{ backgroundColor: "#000000" }}>Go</Button>).buttonColors).toMatchObject({ backgroundColor: "#000000", color: "#fff" });
+    expect(block(<Paragraph className="text-red-500" values={{ color: "#123456" } as any}>Hi</Paragraph>).color).toBe("#123456");
+    expect(block(<Paragraph className="p-6" containerPadding="4px">Hi</Paragraph>).containerPadding).toBe("4px");
+    expect(block(<Image src="https://example.com/a.png" width={120} className="w-1/2" />).src.maxWidth).not.toBe("50%");
+    expect(design(<Paragraph>Hi</Paragraph>, { className: "bg-gray-100", backgroundColor: "#000000" }).body.values.backgroundColor).toBe("#000000");
+  });
+
+  it("over a phone class, in `mobile`", () => {
+    const values = block(<Paragraph className="max-sm:text-sm max-sm:text-center" mobile={{ fontSize: "12px" }}>Hi</Paragraph>);
+    expect(values._override.mobile).toMatchObject({ fontSize: "12px", textAlign: "center" });
+    const column = renderToJson(
+      <Tailwind tw={tw}>
+        <Email>
+          <Row>
+            <Column padding="5px" className="p-6 max-sm:p-2">
+              <Paragraph>Hi</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    ).body.rows[0].columns[0].values;
+    expect(column.padding).toBe("5px");
+    expect(column._override.mobile.padding).toBe("8px");
+  });
+
+  it.each([undefined, null])("but not a prop given as `%s`: a wrapper forwarding optional props it wasn't given (or data's null) keeps its classes, in the design and the HTML", (missing) => {
+    // Your own components, passing on what they're given (`color={props.color}`): unset, it's `undefined`; from data,
+    // it may be `null`.
+    type Optional = { color?: string | null; fontSize?: string | null; bg?: string | null; padding?: string | null; width?: number | null };
+    const none = { color: missing, fontSize: missing, bg: missing, padding: missing, width: missing } as const;
+    const Text = (p: Optional) => (
+      <Paragraph className="text-blue-500 text-lg max-sm:text-sm uppercase" color={p.color} fontSize={p.fontSize} mobile={{ fontSize: p.fontSize }} style={{ textTransform: p.color }}>
+        Hi
+      </Paragraph>
+    );
+    const Cta = (p: Optional) => (
+      <Button href="https://example.com" className="bg-red-500 text-black px-6" backgroundColor={p.bg} color={p.color} padding={p.padding} buttonColors={{ hoverColor: "#00ff00", color: p.color }}>
+        Go
+      </Button>
+    );
+    const Title = (p: Optional) => <Heading className="text-brand text-2xl" color={p.color} fontSize={p.fontSize}>Title</Heading>;
+    const Picture = (p: Optional) => <Image src="https://example.com/a.png" className="w-32" width={p.width as number} />;
+    const template = (forward: boolean) => {
+      const given = (props: Record<string, unknown>) => (forward ? Object.fromEntries(Object.keys(props).map((key) => [key, missing])) : {});
+      return (
+        <Tailwind tw={tw}>
+          <Email className="bg-gray-100 max-w-[640px]" {...given({ backgroundColor: undefined, contentWidth: undefined })}>
+            <Row className="bg-white" {...given({ columnsBackgroundColor: undefined, backgroundColor: undefined })}>
+              <Column className="bg-zinc-50 rounded-lg p-6" {...given({ backgroundColor: undefined, borderRadius: undefined, padding: undefined })}>
+                {forward ? <Text {...none} /> : <Paragraph className="text-blue-500 text-lg max-sm:text-sm uppercase">Hi</Paragraph>}
+                {forward ? <Cta {...none} /> : <Button href="https://example.com" className="bg-red-500 text-black px-6" buttonColors={{ hoverColor: "#00ff00" }}>Go</Button>}
+                {forward ? <Title {...none} /> : <Heading className="text-brand text-2xl">Title</Heading>}
+                {forward ? <Picture {...none} /> : <Image src="https://example.com/a.png" className="w-32" />}
+              </Column>
+            </Row>
+          </Email>
+        </Tailwind>
+      );
+    };
+    const forwarded = renderToJson(template(true));
+    expect(forwarded).toEqual(renderToJson(template(false)));
+    expect(renderToHtml(template(true))).toBe(renderToHtml(template(false)));
+    const [text, cta, title, picture] = forwarded.body.rows[0].columns[0].contents.map((c: any) => c.values);
+    expect(text).toMatchObject({ color: "#2b7fff", fontSize: "18px", _override: { mobile: { fontSize: "14px" } } });
+    expect(cta.buttonColors).toMatchObject({ backgroundColor: "#fb2c36", color: "#000", hoverColor: "#00ff00" });
+    expect(title).toMatchObject({ color: "#007291", fontSize: "24px" });
+    // (128px of the 572px the Column's padding leaves it.)
+    expect(picture.src.maxWidth).toBe("22.38%");
+    expect(forwarded.body.values).toMatchObject({ backgroundColor: "#f3f4f6", contentWidth: "640px" });
+    expect(forwarded.body.rows[0].values.columnsBackgroundColor).toBe("#fff");
+    expect(forwarded.body.rows[0].columns[0].values).toMatchObject({ backgroundColor: "#fafafa", borderRadius: "8px", padding: "24px" });
+  });
+});
+
+describe("<Tailwind>: screen sizes", () => {
+  it("sets a phone variant (`max-sm:`) as the `mobile` prop", () => {
+    const values = block(<Paragraph className="text-lg max-sm:text-sm max-sm:text-center max-sm:px-1">Hi</Paragraph>);
+    expect(values.fontSize).toBe("18px");
+    expect(values._override.mobile).toEqual({ fontSize: "14px", lineHeight: "142.86%", textAlign: "center", containerPadding: "10px 4px" });
+    expect(block(<Button className="w-60 max-sm:w-full">Go</Button>)._override.mobile.size).toEqual({ autoWidth: false, width: "100%" });
+  });
+
+  it("takes a breakpoint variant (`sm:`) for the desktop, and what's set without it for phones", () => {
+    expect(block(<Paragraph className="text-sm sm:text-lg">Hi</Paragraph>)).toMatchObject({ fontSize: "18px", _override: { mobile: { fontSize: "14px" } } });
+    // No class for phones: Paragraph's default.
+    expect(block(<Paragraph className="sm:text-lg">Hi</Paragraph>)).toMatchObject({ fontSize: "18px", _override: { mobile: { fontSize: "14px" } } });
+    const row = renderToJson(
+      <Tailwind tw={tw}>
+        <Email>
+          <Row className="p-2 sm:px-8">
+            <Column>
+              <Paragraph>Hi</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    ).body.rows[0];
+    // In its Column, as a Row's padding is.
+    expect(row.values.padding).toBe("0px");
+    expect(row.columns[0].values).toMatchObject({ padding: "8px 32px", _override: { mobile: { padding: "8px" } } });
+  });
+
+  it("hides a block on phones, on desktops, or shows it on one only", () => {
+    expect(block(<Paragraph className="max-sm:hidden">Hi</Paragraph>)._override).toMatchObject({ mobile: { hideMobile: true } });
+    expect(block(<Paragraph className="sm:hidden">Hi</Paragraph>)._override).toMatchObject({ desktop: { hideDesktop: true } });
+    expect(block(<Paragraph className="hidden sm:block">Hi</Paragraph>)._override).toMatchObject({ mobile: { hideMobile: true }, desktop: { hideDesktop: false } });
+    expect(block(<Paragraph className="hidden max-sm:block">Hi</Paragraph>)._override).toMatchObject({ mobile: { hideMobile: false }, desktop: { hideDesktop: true } });
+  });
+});
+
+describe("<Tailwind>: classes in an Html block's markup", () => {
+  it("are inline styles, with the email conversions; the element's own style wins; your own classes stay", () => {
+    const element = (
+      <Tailwind tw={tw}>
+        <Email>
+          <Row>
+            <Column>
+              <Html html={'<p class="text-red-500 p-4 mine" style="color: blue">Hi <a class=\'font-bold underline\' href="https://example.com">there</a></p><br class="block"/><!-- <i class="p-2"> -->'} />
+              <Paragraph html={'Total: <span class="text-brand font-bold px-2 rounded-s-md">$10</span>'} />
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    const [html, paragraph] = renderToJson(element).body.rows[0].columns[0].contents;
+    expect(html.values.html).toBe(
+      '<p class="mine" style="padding: 16px; color: #fb2c36; color: blue">Hi <a href="https://example.com" style="font-weight: 700; text-decoration: underline">there</a></p><br style="display: block"/><!-- <i class="p-2"> -->'
+    );
+    // Logical sides (`px-2`, `rounded-s-md`) as physical ones, which email clients read.
+    expect(paragraph.values.text).toBe('Total: <span style="border-top-left-radius: 6px; border-bottom-left-radius: 6px; padding-left: 8px; padding-right: 8px; font-weight: 700; color: #007291">$10</span>');
+    const email = renderToHtml(element);
+    expect(email).toContain('style="padding: 16px; color: #fb2c36; color: blue"');
+    expect(email).not.toMatch(/class="[^"]*(text-red|font-bold|text-brand)/);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("are inline styles in a Heading's and a Button's children, and on a <Link> on its own in a Column, as in a Paragraph's: in every mode, the HTML and the design", async () => {
+    // (Classes in their children's markup stayed as written, which email clients don't read, and weren't said.)
+    const content = (
+      <Row>
+        <Column>
+          <Heading>
+            Welcome to <span className="text-indigo-600">Acme</span>
+          </Heading>
+          <Heading>
+            Read{" "}
+            <Link href="https://e.test" className="text-indigo-600 no-underline">
+              this
+            </Link>
+          </Heading>
+          <Button href="https://e.test">
+            <span className="text-yellow-300 font-bold">Go</span>
+          </Button>
+          <Link href="https://e.test/all" className="text-indigo-600 font-semibold no-underline">
+            All
+          </Link>
+          <a href="https://e.test/raw" className="font-semibold">
+            Raw
+          </a>
+        </Column>
+      </Row>
+    );
+    const indigo = "#4f39f6";
+    for (const Root of [Email, Page, Document]) {
+      const element = (
+        <Tailwind tw={tw}>
+          <Root>{content}</Root>
+        </Tailwind>
+      );
+      for (const html of [renderToHtml(element), await renderToHtmlAsync(element)]) {
+        expect(html).not.toMatch(/class="[^"]*(text-indigo|text-yellow|font-bold|font-semibold|no-underline)/);
+        expect([html.match(/color: ?#4f39f6/g)?.length ?? 0, /color: ?#ffdf20[^"]*font-weight: 700|font-weight: 700[^"]*color: ?#ffdf20/.test(html), /font-weight: 600/.test(html)]).toEqual([3, true, true]);
+      }
+      const texts = renderToJson(element).body.rows[0].columns[0].contents.map((c: any) => c.values.text);
+      expect(texts[0]).toBe(`Welcome to <span style="color: ${indigo}">Acme</span>`);
+      expect(texts[1]).toBe(`Read <a href="https://e.test" target="_blank" rel="noopener" style="color: ${indigo}; text-decoration: none">this</a>`);
+      expect(texts.slice(2).map((t: string) => t.match(/style="[^"]*"/)?.[0])).toEqual(['style="font-weight: 700; color: #ffdf20"', `style="font-weight: 600; color: ${indigo}; text-decoration: none"`, 'style="font-weight: 600"']);
+    }
+    expect(warnings()).toEqual([]);
+  });
+
+  it("says which classes it can't inline: variants a stylesheet would need, and ones that don't apply in an email", () => {
+    block(<Html html={'<p class="p-2 max-sm:p-1 hover:underline sm:p-4 dark:text-white">x</p>'} />);
+    expect(warnings()).toEqual([
+      "[Unlayer] Html ignores class `dark:text-white` in its markup: it applies only for @media (prefers-color-scheme: dark).",
+      "[Unlayer] Html can't inline class `hover:underline` in its markup: it applies on hover, which needs a stylesheet.",
+      "[Unlayer] Html can't inline class `max-sm:p-1` in its markup: it applies on phones only, which needs a stylesheet.",
+      "[Unlayer] Html can't inline class `sm:p-4` in its markup: it applies above a screen width only, which needs a stylesheet.",
+    ]);
+    // A variant's own class (`group`) stays yours; a class that applies only inside it is said, and goes.
+    warn.mockClear();
+    expect(block(<Html html={'<div class="group mine"><p class="[.group:hover_&]:underline p-2">x</p></div>'} />).html).toBe('<div class="group mine"><p style="padding: 8px">x</p></div>');
+    expect(warnings()).toEqual(["[Unlayer] Html ignores class `[.group:hover_&]:underline` in its markup: it applies only for `.group:hover &`."]);
+  });
+
+  it("doesn't inline what shows or hides an element that a screen variant changes on another screen: `hidden md:block` doesn't hide on every screen", () => {
+    expect(block(<Html html={'<div class="hidden md:block mine">Desktop text</div><p class="block max-sm:hidden ps-2 md:pl-4 p-1">Desktop only</p><p class="hidden hover:block text-red-500 hover:text-blue-500">Hover</p>'} />).html).toBe(
+      // (`ps-2` and `p-1` are inline as on every screen: `md:pl-4` can't apply.)
+      '<div class="mine">Desktop text</div><p style="padding: 4px; padding-left: 8px">Desktop only</p><p style="display: none; color: #fb2c36">Hover</p>'
+    );
+    expect(warnings()).toEqual([
+      "[Unlayer] Html can't inline `hidden`'s `display` in its markup: `md:block` sets it above a screen width only, which needs a stylesheet.",
+      "[Unlayer] Html can't inline class `md:block` in its markup: it applies above a screen width only, which needs a stylesheet.",
+      "[Unlayer] Html can't inline `block`'s `display` in its markup: `max-sm:hidden` sets it on phones only, which needs a stylesheet.",
+      "[Unlayer] Html can't inline class `max-sm:hidden` in its markup: it applies on phones only, which needs a stylesheet.",
+      "[Unlayer] Html can't inline class `md:pl-4` in its markup: it applies above a screen width only, which needs a stylesheet.",
+      "[Unlayer] Html can't inline class `hover:block` in its markup: it applies on hover, which needs a stylesheet.",
+      "[Unlayer] Html can't inline class `hover:text-blue-500` in its markup: it applies on hover, which needs a stylesheet.",
+    ]);
+  });
+
+  it("inlines any other class a screen variant changes as it is on every screen, saying the variant can't apply", () => {
+    const said: string[] = [];
+    const inline = (html: string, rtl = false) => inlineClasses(html, (className) => classNameToDeclarations(tw, className), (text) => said.push(text), rtl);
+    const variant = (name: string, when = "above a screen width only") => `can't inline class \`${name}\` in its markup: it applies ${when}, which needs a stylesheet`;
+    const shown = (name: string, property: string, variantName: string, when = "above a screen width only") =>
+      `can't inline \`${name}\`'s \`${property}\` in its markup: \`${variantName}\` sets it ${when}, which needs a stylesheet`;
+    const cases: Array<[string, string, string[], boolean?]> = [
+      // `px-4` is the padding on every screen; `md:pl-2` can't apply in markup. The class leaves the attribute, inlined.
+      ['<p class="px-4 md:pl-2 mine">a</p>', '<p class="mine" style="padding-left: 16px; padding-right: 16px">a</p>', [variant("md:pl-2")]],
+      ['<p class="p-4 md:p-2">a</p>', '<p style="padding: 16px">a</p>', [variant("md:p-2")]],
+      ['<p class="border-2 md:border-l-4">a</p>', '<p style="border-style: solid; border-width: 2px">a</p>', [variant("md:border-l-4")]],
+      ['<p class="rounded-md md:rounded-tl-none">a</p>', '<p style="border-radius: 6px">a</p>', [variant("md:rounded-tl-none")]],
+      ['<p class="size-4 md:w-8 text-red-500 max-sm:text-blue-500">a</p>', '<p style="width: 16px; height: 16px; color: #fb2c36">a</p>', [variant("max-sm:text-blue-500", "on phones only"), variant("md:w-8")]],
+      ['<p class="ps-4 md:pr-1">a</p>', '<p style="padding-right: 16px">a</p>', [variant("md:pr-1")], true],
+      // What shows or hides the element: inline neither (shown on every screen is the safer mistake).
+      ['<div class="hidden md:block mine">x</div>', '<div class="mine">x</div>', [shown("hidden", "display", "md:block"), variant("md:block")]],
+      ['<div class="flex max-sm:hidden p-2">x</div>', '<div style="padding: 8px">x</div>', [shown("flex", "display", "max-sm:hidden", "on phones only"), variant("max-sm:hidden", "on phones only")]],
+      ['<div class="invisible md:visible">x</div>', "<div>x</div>", [shown("invisible", "visibility", "md:visible"), variant("md:visible")]],
+      // A hover variant doesn't count: without hover, the element is as it says.
+      ['<div class="hidden hover:block">x</div>', '<div style="display: none">x</div>', [variant("hover:block", "on hover")]],
+    ];
+    for (const [markup, inlined, warned, rtl] of cases) {
+      said.length = 0;
+      expect([markup, inline(markup, rtl)]).toEqual([markup, inlined]);
+      expect([markup, said]).toEqual([markup, warned]);
+    }
+    // An Html block's, in the design and the email alike, said in each render.
+    const html = <Html html={'<p class="px-4 md:pl-2">a</p>'} />;
+    const eachRender = ["[Unlayer] Html can't inline class `md:pl-2` in its markup: it applies above a screen width only, which needs a stylesheet."];
+    expect(block(html).html).toBe('<p style="padding-left: 16px; padding-right: 16px">a</p>');
+    expect(warnings()).toEqual(eachRender);
+    warn.mockClear();
+    expect(renderToHtml(<Tailwind tw={tw}><Email><Row><Column>{html}</Column></Row></Email></Tailwind>)).toContain('<p style="padding-left: 16px; padding-right: 16px">a</p>');
+    expect(warnings()).toEqual(eachRender);
+  });
+
+  it("reads tags and attributes as a browser does: what isn't a class attribute, or isn't in a tag, stays as written", () => {
+    const cases: Array<[string, string]> = [
+      // `class=` in another attribute's value; the first `class` of a tag (a browser ignores the others).
+      ['<div title=" class=x">Hi</div>', '<div title=" class=x">Hi</div>'],
+      ['<div title=" class=x" class="p-2 mine">Hi</div>', '<div title=" class=x" class="mine" style="padding: 8px">Hi</div>'],
+      ["<p data-x='class=\"p-4\"' class=p-2>a</p>", "<p data-x='class=\"p-4\"' style=\"padding: 8px\">a</p>"],
+      ['<p class="p-2" class="p-4 mine">a</p>', '<p style="padding: 8px">a</p>'],
+      // A `/` between attributes, a name in capitals, an unquoted value (`block/` isn't Tailwind's).
+      ['<p/CLASS="p-2">a</p><br class=block/>', '<p style="padding: 8px">a</p><br class=block/>'],
+      // In a comment, in raw text, in a `<` that starts no tag, in a tag the markup ends in: text, as written.
+      ['<!--> <b class="p-2">x</b><!-- <i class="p-2"> -->', '<!--> <b style="padding: 8px">x</b><!-- <i class="p-2"> -->'],
+      ['<textarea><b class="p-2"></textarea><title><i class="p-2"></title><style>.a{} <b class="p-2"></style><script>"<b class=\'p-2\'>"</script>', '<textarea><b class="p-2"></textarea><title><i class="p-2"></title><style>.a{} <b class="p-2"></style><script>"<b class=\'p-2\'>"</script>'],
+      ['a < b class="p-2"> c', 'a < b class="p-2"> c'],
+      ['<p>x</p><p class="p-2', '<p>x</p><p class="p-2'],
+      // The element's own style after the classes', as it's written (its references and quotes kept).
+      ['<p style=color:blue class=p-2>a</p>', '<p style="padding: 8px; color:blue">a</p>'],
+      ["<p class=\"p-2 mine\" title=\"&copy;\" style='font-family: \"A\"; content: \"&copy;\";'>a</p>", '<p class="mine" title="&copy;" style="padding: 8px; font-family: &quot;A&quot;; content: &quot;&copy;&quot;">a</p>'],
+    ];
+    for (const [markup, inlined] of cases) expect([markup, block(<Html html={markup} />).html]).toEqual([markup, inlined]);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("reads markup in time linear in its size: an end tag ends what's open in it once, the classes are read at once", async () => {
+    // Elements nested 60,000 deep in an element with a class, ended by their end tags or by others' (`</span>`, which
+    // ends none of them), and 30,000 tags with a class of their own each: an end tag read every element still open, and
+    // each tag's classes were read alone (with Tailwind, each read of a class it hasn't built builds its whole stylesheet).
+    const n = 60_000;
+    // (A reader that reads nothing, at no cost: the time is the markup's.)
+    const reader = Object.assign((_: string) => ({ declarations: [], ignored: [] }), { prepare: vi.fn((_: string) => {}) });
+    for (const [html, prepared] of [
+      ['<div class="p-1">' + "<div>".repeat(n) + "x" + "</div>".repeat(n) + "</div>", "p-1"],
+      ['<div class="p-1">' + "<div>".repeat(n) + "x" + "</span>".repeat(n) + "</div>", "p-1"],
+      [Array.from({ length: n / 2 }, (_, i) => `<span class="x${i}">x</span>`).join(""), Array.from({ length: n / 2 }, (_, i) => `x${i}`).join(" ")],
+    ] as const) {
+      expect(inTime(await within(2000, () => inlineClasses(html, reader, () => {})))).toBe(true);
+      expect(reader.prepare).toHaveBeenLastCalledWith(prepared);
+    }
+  });
+
+  it("never throws, changes nothing but class attributes and the styles they give, and inlining again changes nothing, whatever fragments it's given (fuzzed)", () => {
+    // `TAILWIND_FUZZ_RUNS=100000` for a longer run, `TAILWIND_FUZZ_SEED` for other inputs.
+    const runs = Number(process.env.TAILWIND_FUZZ_RUNS ?? 600);
+    const fragments = [
+      "<p", "<div", "<span", "<br", "<img src=x", "<a href='x'", ">", "/>", " ", "\n", "\t", "/", "=", '"', "'", "`", "\0",
+      ' class="', " class='", " class=", " CLASS=", "class", ' title="', " title='", ' style="', " style='color: blue'", ' style="color: red;"', " style", ' dir="rtl"', " dir=ltr",
+      "p-4", " text-red-500", " mine", " md:p-2", " hidden", " md:block", " ps-4", " max-sm:p-1", " hover:underline", " dark:text-white", " w-[10px]", " group", " group-hover:underline",
+      "&amp;", "&quot;", "&#39;", "&copy;", "&", "<!--", "-->", "--!>", "<!-->", "<!", "<?x ", "</", "</p>", "</div>", "</span>", "<script>", "</script>", "<style>", "</style>",
+      "<textarea>", "</textarea>", "<title>", "</title>", "<xmp>", "<plaintext>", "<noscript>", "<svg>", "</svg>", "<math>", "<table><tr><td", "text", "Hi", "<", "<<",
+    ];
+    const read = (className: string) => classNameToDeclarations(tw, className);
+    const none = (className: string) => ({ declarations: [], ignored: className.split(/\s+/).filter(Boolean).map((name) => ({ className: name, reason: "Tailwind has no such class" })) });
+    const parse = (html: string) => new DOMParser().parseFromString(`<!doctype html><body>${html}`, "text/html").body;
+    // What a browser reads both as, but for each element's class (fewer classes) and style (the inlined ones before its own).
+    const differ = (a: Node, b: Node): string | undefined => {
+      if (a.nodeType !== b.nodeType || a.nodeName !== b.nodeName) return `${a.nodeName} → ${b.nodeName}`;
+      if (a instanceof Element && b instanceof Element) {
+        const rest = (e: Element) => [...e.attributes].filter((x) => x.name !== "class" && x.name !== "style").map((x) => `${x.name}=${x.value}`).join(" ");
+        if (rest(a) !== rest(b)) return `<${a.localName} ${rest(a)}> → <${b.localName} ${rest(b)}>`;
+        const classes = (e: Element) => (e.getAttribute("class") ?? "").split(/[\t\n\f\r ]+/).filter(Boolean);
+        if (classes(b).some((name) => !classes(a).includes(name))) return `class ${a.getAttribute("class")} → ${b.getAttribute("class")}`;
+        const style = (e: Element) => (e.getAttribute("style") ?? "").replace(/;\s*$/, "");
+        if (!style(b).endsWith(style(a))) return `style ${a.getAttribute("style")} → ${b.getAttribute("style")}`;
+      } else if (a.nodeValue !== b.nodeValue) return `${JSON.stringify(a.nodeValue)} → ${JSON.stringify(b.nodeValue)}`;
+      if (a.childNodes.length !== b.childNodes.length) return `${a.nodeName}'s ${a.childNodes.length} children → ${b.childNodes.length}`;
+      for (let i = 0; i < a.childNodes.length; i++) {
+        const why = differ(a.childNodes[i], b.childNodes[i]);
+        if (why) return why;
+      }
+      return undefined;
+    };
+    const r = random(Number(process.env.TAILWIND_FUZZ_SEED ?? 20261018));
+    const bad: string[] = [];
+    for (let run = 0; run < runs && bad.length < 5; run++) {
+      let input = "";
+      for (let n = 1 + Math.floor(r() * 24); n > 0; n--) input += fragments[Math.floor(r() * fragments.length)];
+      const wrong = (why: string, out = "") => bad.push(`${JSON.stringify(input)} → ${JSON.stringify(out)}: ${why}`);
+      let out: string;
+      try {
+        out = inlineClasses(input, read, () => {});
+        if (inlineClasses(input, none, () => {}) !== input) wrong("changed with no class to inline", inlineClasses(input, none, () => {}));
+      } catch (error) {
+        wrong(`throws ${error}`);
+        continue;
+      }
+      if (inlineClasses(out, read, () => {}) !== out) wrong("not idempotent", out);
+      const why = differ(parse(input), parse(out));
+      if (why) wrong(why, out);
+    }
+    expect(bad).toEqual([]);
+  }, 60000);
+});
+
+describe("<Tailwind>: logical sides (`ps-*`, `border-e-*`, `rounded-ss-*`, `text-start`) follow the text direction", () => {
+  type Props = Record<string, unknown>;
+  const RTL = { textDirection: "rtl" };
+  const one = (root: Props, content: React.ReactNode, row = "") => (
+    <Tailwind tw={tw}>
+      <Email {...root}>
+        <Row className={row}>{content}</Row>
+      </Email>
+    </Tailwind>
+  );
+  /** A border's four widths, `top right bottom left`. */
+  const widths = (border: Record<string, string>) => ["Top", "Right", "Bottom", "Left"].map((side) => border[`border${side}Width`] ?? "-").join(" ");
+  const columnOf = (root: Props) => {
+    const element = one(root, <Column className="bg-white ps-4 pe-2 max-sm:ps-1 border-s-2 border-e-4 rounded-ss-sm rounded-se-md rounded-ee-lg rounded-es-xl"><Paragraph>Hi</Paragraph></Column>);
+    const { values } = renderToJson(element).body.rows[0].columns[0];
+    return { values: { padding: values.padding, phone: values._override?.mobile?.padding, border: widths(values.border), radius: values.borderRadius }, html: renderToHtml(element) };
+  };
+
+  it("on a Column: its padding, borders and corners, in the design and the HTML", () => {
+    const ltr = columnOf({});
+    expect(ltr.values).toEqual({ padding: "0px 8px 0px 16px", phone: "0px 8px 0px 4px", border: "- 4px - 2px", radius: "4px 6px 8px 12px" });
+    const rtl = columnOf(RTL);
+    expect(rtl.values).toEqual({ padding: "0px 16px 0px 8px", phone: "0px 4px 0px 8px", border: "- 2px - 4px", radius: "6px 4px 12px 8px" });
+    expect(rtl.html).toMatch(/class="v-col-padding[^"]*" style="[^"]*padding: 0px 16px 0px 8px;border-top: 0px solid transparent;border-left: 4px solid #000000;border-right: 2px solid #000000;[^"]*border-radius: 6px 4px 12px 8px;/);
+    // `ltr` and `auto` (which the email can't resolve) read as left to right.
+    for (const textDirection of ["ltr", "auto"]) expect(columnOf({ textDirection }).values).toEqual(ltr.values);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("on blocks: their spacing, a Button's padding, border and corners, and the alignment, theirs or around them", () => {
+    const blocks = (root: Props) =>
+      renderToJson(
+        one(
+          root,
+          <Column className="text-end">
+            <Paragraph className="ps-4 me-2 text-start">A</Paragraph>
+            <Heading>B</Heading>
+            <Button href="https://example.com" className="ps-6 pe-3 border-e-2 rounded-s-lg">C</Button>
+            <Image src="https://example.com/a.png" className="text-start" />
+          </Column>
+        )
+      ).body.rows[0].columns[0].contents.map(({ values: v }: { values: Record<string, any> }) => [v.containerPadding, v.textAlign, v.padding, v.border && widths(v.border), v.borderRadius].filter((x) => x !== undefined));
+    expect(blocks({})).toEqual([["10px 8px 10px 16px", "left"], ["10px", "right"], ["10px", "right", "10px 12px 10px 24px", "- 2px - -", "8px 4px 4px 8px"], ["10px", "left"]]);
+    expect(blocks(RTL)).toEqual([["10px 16px 10px 8px", "right"], ["10px", "left"], ["10px", "left", "10px 24px 10px 12px", "- - - 2px", "4px 8px 8px 4px"], ["10px", "right"]]);
+  });
+
+  it("on a Row: its padding classes go to the Column on that side (the first is on the right), and its Columns' margins between them", () => {
+    const columns = (root: Props) =>
+      renderToJson(one(root, [<Column key={1} className="me-2"><Paragraph>1</Paragraph></Column>, <Column key={2} className="ms-2"><Paragraph>2</Paragraph></Column>], "ps-8 pe-4 py-2")).body.rows[0].columns.map(
+        ({ values: v }: { values: Record<string, any> }) => [v.padding, v._override?.mobile?.padding]
+      );
+    expect(columns({})).toEqual([["8px 8px 8px 32px", "8px 16px 8px 32px"], ["8px 16px 8px 8px", "8px 16px 8px 32px"]]);
+    // Mirrored: stacked on phones, the first is still on top, 8px from the next.
+    expect(columns(RTL)).toEqual([["8px 32px 8px 8px", "8px 32px 8px 16px"], ["8px 8px 8px 16px", "8px 32px 8px 16px"]]);
+    // A physical class is the side it says: the left is the last Column's, right to left.
+    const physical = (root: Props, row: string) => renderToJson(one(root, [<Column key={1}><Paragraph>1</Paragraph></Column>, <Column key={2}><Paragraph>2</Paragraph></Column>], row)).body.rows[0].columns.map((c: any) => c.values.padding);
+    expect([physical({}, "pl-8"), physical({}, "pr-8")]).toEqual([["0px 0px 0px 32px", "0px"], ["0px", "0px 32px 0px 0px"]]);
+    expect([physical(RTL, "pl-8"), physical(RTL, "pr-8")]).toEqual([["0px", "0px 0px 0px 32px"], ["0px 32px 0px 0px", "0px"]]);
+  });
+
+  it("in an Html block's markup: an element's own `dir`, else the nearest around it in the markup, else the root's", () => {
+    const markup = '<p class="ps-3 border-e-2 rounded-ss-md text-start">a</p><div dir="ltr"><p class="ps-3">b<br class="block"><span dir="rtl" class="pe-1">c</span></p></div><p dir="ltr" class="pe-1">d</p><p class="pe-1">e</p>';
+    const html = (root: Props) => renderToJson(one(root, <Column><Html html={markup} /></Column>)).body.rows[0].columns[0].contents[0].values.html;
+    expect(html({})).toBe(
+      '<p style="border-top-left-radius: 6px; border-right-style: solid; border-right-width: 2px; padding-left: 12px; text-align: start">a</p><div dir="ltr"><p style="padding-left: 12px">b<br style="display: block"><span dir="rtl" style="padding-left: 4px">c</span></p></div><p dir="ltr" style="padding-right: 4px">d</p><p style="padding-right: 4px">e</p>'
+    );
+    expect(html(RTL)).toBe(
+      '<p style="border-top-right-radius: 6px; border-left-style: solid; border-left-width: 2px; padding-right: 12px; text-align: start">a</p><div dir="ltr"><p style="padding-left: 12px">b<br style="display: block"><span dir="rtl" style="padding-left: 4px">c</span></p></div><p dir="ltr" style="padding-right: 4px">d</p><p style="padding-left: 4px">e</p>'
+    );
+    // The HTML has the same.
+    expect(renderToHtml(one(RTL, <Column><Html html={markup} /></Column>))).toContain(html(RTL));
+  });
+
+  it("follow the direction the root renders in: its config, an <UnlayerProvider>'s, the renderer's; the async renderers' too, each render its own", async () => {
+    const template = (root: Props = {}) => one(root, <Column className="ps-4 max-sm:ps-1"><Paragraph>Hi</Paragraph></Column>);
+    const padding = (design: any) => design.body.rows[0].columns[0].values.padding;
+    /** The body's direction, the Column's padding and its phone padding (the head's CSS). */
+    const html = (out: string) => [/<body[^>]*dir="(\w+)"/.exec(out)?.[1], /class="v-col-padding[^"]*" style="[^"]*padding: ([^;]+);/.exec(out)?.[1], /#u_column_1 \.v-col-padding \{ padding: ([^!]+) !important/.exec(out)?.[1]];
+    const right = ["rtl", "0px 16px 0px 0px", "0px 4px 0px 0px"];
+    expect(padding(renderToJson(template({ config: { textDirection: "rtl" } })))).toBe("0px 16px 0px 0px");
+    expect(html(renderToHtml(template({ config: { textDirection: "rtl" } })))).toEqual(right);
+    const provided = <UnlayerProvider config={{ textDirection: "rtl" }}>{template()}</UnlayerProvider>;
+    expect([renderToJson(provided).body.values.textDirection, padding(renderToJson(provided))]).toEqual(["rtl", "0px 16px 0px 0px"]);
+    expect(html(renderToHtml(provided))).toEqual(right);
+    expect(html(renderToHtml(template(), { textDirection: "rtl" }))).toEqual(right);
+    // Rendered by React itself, as a Server Component would.
+    expect(renderToStaticMarkup(template(RTL))).toMatch(/class="v-col-padding[^"]*" style="[^"]*padding: 0px 16px 0px 0px;/);
+    // At once, a right-to-left render and a left-to-right one.
+    const asyncOne = (root: Props) => (
+      <Tailwind config={config}>
+        <Email {...root}>
+          <Row>
+            <Column className="ps-4">
+              <Paragraph>Hi</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    const [rtl, ltr] = await Promise.all([renderToJsonAsync(asyncOne(RTL)), renderToJsonAsync(asyncOne({}))]);
+    expect([padding(rtl), padding(ltr)]).toEqual(["0px 16px 0px 0px", "0px 0px 0px 16px"]);
+  });
+});
+
+describe("<Tailwind>: a Row's padding classes inset its content, as in CSS (in its Columns)", () => {
+  const ROOTS = { Email, Page, Document } as const;
+  const row = (rowClass: string, columns: Array<Record<string, unknown>> = [{}], rowProps: Record<string, unknown> = {}, Root: (typeof ROOTS)[keyof typeof ROOTS] = Email) => (
+    <Tailwind tw={tw}>
+      <Root className="bg-gray-100 max-w-[600px]">
+        <Row className={rowClass} {...rowProps}>
+          {columns.map((props, i) => (
+            <Column key={i} {...props}>
+              <Heading>Hi</Heading>
+            </Column>
+          ))}
+        </Row>
+      </Root>
+    </Tailwind>
+  );
+  const values = (element: React.ReactElement) => {
+    const { values: row, columns } = renderToJson(element).body.rows[0];
+    return { row: row.padding, columns: columns.map((c: { values: Record<string, any> }) => [c.values.padding, c.values._override?.mobile?.padding]) };
+  };
+
+  it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: go to its Column, so the background covers them", (mode) => {
+    const element = row("bg-white px-8 pt-10 pb-2", [{}], {}, ROOTS[mode]);
+    expect(values(element)).toEqual({ row: "0px", columns: [["40px 32px 8px", undefined]] });
+    expect(renderToJson(element).body.rows[0].values.columnsBackgroundColor).toBe("#fff");
+    // In the HTML: none on the row; the padding is in the Column, inside the white content box.
+    const html = renderToHtml(element);
+    expect(html).not.toMatch(/<div id="u_row_1"[^>]*style="padding/);
+    expect(html).toMatch(/class="v-col-padding[^"]*" style="[^"]*padding: ?40px 32px 8px;/);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("differ from the padding prop, which is the editor's, around the row", () => {
+    const fromClasses = renderToJson(row("bg-white p-8", [{}, {}])).body.rows[0];
+    const fromProps = renderToJson(row("bg-white", [{}, {}], { padding: 32 })).body.rows[0];
+    expect([fromClasses.values.padding, fromClasses.columns.map((c: { values: Record<string, any> }) => c.values.padding)]).toEqual(["0px", ["32px 0px 32px 32px", "32px 32px 32px 0px"]]);
+    expect([fromProps.values.padding, fromProps.columns.map((c: { values: Record<string, any> }) => c.values.padding)]).toEqual(["32px", ["0px", "0px"]]);
+    // A prop given wins over a class, and is the editor's (said, with a content background: once in each render).
+    expect(values(row("bg-white p-8", [{}], { padding: "4px" }))).toEqual({ row: "4px", columns: [["0px", undefined]] });
+    expect(warnings()).toEqual(Array(2).fill("[Unlayer] Row padding sits outside the row's content background, as in the editor; to inset the content use the Columns' padding."));
+  });
+
+  it("split by side between Columns, added to their own (classes or props), and stack on phones", () => {
+    expect(values(row("bg-white px-8 pt-10 pb-2", [{}, { className: "p-2" }]))).toEqual({
+      row: "0px",
+      columns: [
+        ["40px 0px 8px 32px", "40px 32px 0px"],
+        ["48px 40px 16px 8px", "8px 40px 16px"],
+      ],
+    });
+    // Phone classes go to the Columns' phone padding; side by side (noStackMobile), as on desktop.
+    expect(values(row("bg-white p-8 max-sm:p-4", [{}, {}])).columns).toEqual([
+      ["32px 0px 32px 32px", "16px 16px 0px"],
+      ["32px 32px 32px 0px", "0px 16px 16px"],
+    ]);
+    expect(values(row("p-8", [{}, {}], { noStackMobile: true })).columns).toEqual([
+      ["32px 0px 32px 32px", undefined],
+      ["32px 32px 32px 0px", undefined],
+    ]);
+    // Without a background too: its content is inset.
+    expect(values(row("px-8 py-4"))).toEqual({ row: "0px", columns: [["16px 32px", undefined]] });
+    expect(values(row("p-4", [{ padding: 8 }])).columns).toEqual([["24px", undefined]]);
+  });
+
+  it("lengths that don't add up are said, and that Column keeps its own", () => {
+    expect(values(row("bg-white px-[2em]", [{ padding: "8px" }])).columns).toEqual([["8px", undefined]]);
+    expect([...new Set(warnings())]).toEqual(["[Unlayer] Row padding `2em` from its classes can't be added to a Column's `8px`, so that Column keeps its own."]);
+  });
+
+  it("add a plain Column's margins to its padding: as in CSS, nothing is painted there", () => {
+    expect(values(row("bg-white px-8 py-4", [{ className: "mr-2" }, { className: "ml-2" }]))).toEqual({
+      row: "0px",
+      columns: [
+        ["16px 8px 16px 32px", "16px 32px 8px"],
+        ["16px 32px 16px 8px", "8px 32px 16px"],
+      ],
+    });
+    expect(warnings()).toEqual([]);
+  });
+});
+
+describe("<Tailwind>: card grids, with the Row's padding and the Columns' margins as gutters in the color around the cards", () => {
+  type Props = Record<string, unknown>;
+  const ROOTS = { Email, Page, Document } as const;
+  const grid = (rowClass: string, columns: Props[], { root = {}, row = {}, Root = Email }: { root?: Props; row?: Props; Root?: (typeof ROOTS)[keyof typeof ROOTS] } = {}) => (
+    <Tailwind tw={tw}>
+      <Root className="bg-gray-100 max-w-[600px]" {...root}>
+        <Row className={rowClass} {...row}>
+          {columns.map((props, i) => (
+            <Column key={i} {...props}>
+              <Paragraph>Card {i}</Paragraph>
+            </Column>
+          ))}
+        </Row>
+      </Root>
+    </Tailwind>
+  );
+  /** A border's four widths in one string (`top right bottom left`), and its colors where they show. */
+  const sides = (border: Record<string, string> | undefined) =>
+    border && [["Top", "Right", "Bottom", "Left"].map((side) => border[`border${side}Width`] ?? "-").join(" "), [...new Set(["Top", "Right", "Bottom", "Left"].filter((side) => parseFloat(border[`border${side}Width`]) > 0).map((side) => border[`border${side}Color`]))].join(" ")];
+  const cards = (element: React.ReactElement) => {
+    const { values: row, columns } = renderToJson(element).body.rows[0];
+    return {
+      row: row.padding,
+      columns: columns.map(({ values: v }: { values: Record<string, any> }) => ({
+        padding: v.padding,
+        border: sides(v.border),
+        radius: v.borderRadius,
+        ...(v._override?.mobile ? { phone: { ...v._override.mobile, ...(v._override.mobile.border ? { border: sides(v._override.mobile.border) } : {}) } } : {}),
+      })),
+    };
+  };
+  const CARD = "bg-zinc-50 rounded-lg p-4";
+  const square = (why: string) =>
+    `[Unlayer] Row can't keep its cards' rounded corners, so they're square: in the editor a corner is a circle, and ${why}. Make each corner's two gutters equal, and the same on phones (the Row's padding, the Columns' margins), to keep them round.`;
+  const SQUARE = square("the gutters that meet at one differ (40px and 16px)");
+
+  it("inset the cards in the Row's content box, as in CSS: the outer sides are its padding, the inner ones their margins", () => {
+    expect(cards(grid("bg-white px-10 py-4", [{ className: `${CARD} mr-2` }, { className: `${CARD} ml-2` }]))).toEqual({
+      row: "0px",
+      columns: [
+        // On phones, stacked: the Row's sides each, its top the first's, its bottom the last's, and the space between
+        // the two as on desktop (the first's right margin below it, the second's left margin above it).
+        { padding: "16px", border: ["16px 8px 16px 40px", "#fff"], radius: "0px", phone: { border: ["16px 40px 8px 40px", "#fff"] } },
+        { padding: "16px", border: ["16px 40px 16px 8px", "#fff"], radius: "0px", phone: { border: ["8px 40px 16px 40px", "#fff"] } },
+      ],
+    });
+    // The corners meet gutters of 40px and 16px: they can't stay circles, so they're square (said once per render).
+    expect(warnings()).toEqual([SQUARE]);
+  });
+
+  it.each(Object.keys(ROOTS) as Array<keyof typeof ROOTS>)("%s: the HTML has the borders and the design's phone ones", (mode) => {
+    const element = grid("bg-white px-10 py-4", [{ className: `${CARD} mr-2` }, { className: `${CARD} ml-2` }], { Root: ROOTS[mode] });
+    const html = renderToHtml(element);
+    expect(html).not.toMatch(/<div id="u_row_1"[^>]*style="padding: ?16px 40px/);
+    expect(html).toMatch(/v-col-border[^"]*" style="[^"]*border-top: 16px solid #fff;border-left: 40px solid #fff;border-right: 8px solid #fff;border-bottom: 16px solid #fff;/);
+    // A web page has no phone border for a Column (the editor's web export writes its rule for an element it hasn't).
+    if (mode !== "Document") expect(html).toContain("#u_column_1 .v-col-border { border-top: 16px solid #fff !important;border-left: 40px solid #fff !important;border-right: 40px solid #fff !important;border-bottom: 8px solid #fff !important; }");
+    expect(warnings()).toEqual(mode === "Page" ? [SQUARE, "[Unlayer] Row keeps its cards' desktop gutters on phones: the editor's web export has no phone border for a Column."] : [SQUARE]);
+  });
+
+  it("keep rounded corners round where each corner's gutters are equal, grown by them (a radius is its outer edge's)", () => {
+    expect(cards(grid("bg-white p-2", [{ className: `${CARD} mr-2` }, { className: `${CARD} ml-2` }]))).toEqual({
+      row: "0px",
+      columns: [
+        { padding: "16px", border: ["8px 8px 8px 8px", "#fff"], radius: "16px" },
+        { padding: "16px", border: ["8px 8px 8px 8px", "#fff"], radius: "16px" },
+      ],
+    });
+    expect(warnings()).toEqual([]);
+    // A Column's corners are the same on phones: there, its gutters must give the same radius.
+    const phones = cards(grid("bg-white p-2 max-sm:p-4", [{ className: `${CARD} mr-2 max-sm:mr-4` }, { className: `${CARD} ml-2 max-sm:ml-4` }], { row: { noStackMobile: true } }));
+    expect(phones.columns[0]).toEqual({ padding: "16px", border: ["8px 8px 8px 8px", "#fff"], radius: "0px", phone: { border: ["16px 16px 16px 16px", "#fff"] } });
+    expect(warnings()).toEqual([square("a corner's gutters on phones differ from its gutters on desktop, and its radius is the same on both")]);
+    warn.mockClear();
+    cards(grid("bg-white p-2 max-sm:px-4", [{ className: `${CARD} mr-2` }, { className: `${CARD} ml-2` }]));
+    expect(warnings()).toEqual([square("on phones the gutters that meet at one differ (16px and 8px)")]);
+  });
+
+  it("paint the gutters the color around the cards: the Row's content background, its background, the body's", () => {
+    const color = (element: React.ReactElement) => cards(element).columns[0].border[1];
+    const columns = [{ className: "bg-white mr-2" }, { className: "bg-white ml-2" }];
+    expect(color(grid("bg-zinc-100 px-4", columns))).toBe("#f4f4f5");
+    expect(color(grid("px-4", columns, { row: { backgroundColor: "#123456" } }))).toBe("#123456");
+    expect(color(grid("px-4", columns))).toBe("#f3f4f6");
+    expect(color(grid("px-4", columns, { root: { className: undefined, backgroundColor: "#fedcba" } }))).toBe("#fedcba");
+    // The editor's default body background, where nothing sets one.
+    expect(color(grid("px-4", columns, { root: { className: undefined } }))).toBe("#F7F8F9");
+    expect(warnings()).toEqual([]);
+  });
+
+  it("work for a Row without classes, from its Columns' margins", () => {
+    const element = (
+      <Tailwind tw={tw}>
+        <Email className="bg-gray-100">
+          <Row>
+            <Column className="bg-white mr-2"><Paragraph>One</Paragraph></Column>
+            <Column className="bg-white ml-2"><Paragraph>Two</Paragraph></Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    expect(cards(element).columns.map((c: { border: string[] }) => c.border)).toEqual([["0px 8px 0px 0px", "#f3f4f6"], ["0px 0px 0px 8px", "#f3f4f6"]]);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("can't be a card's border where it has one of its own, or around what isn't one opaque color: the Row keeps its padding, said", () => {
+    const keep = (why: string) => `[Unlayer] Row keeps the padding from its classes around its Columns, as the editor's padding: its cards' gutters would be borders in the color around them, and ${why}.`;
+    const ignored = (side: string, className: string) => `[Unlayer] Column ignores \`margin-${side}: 8px\` from class \`${className}\`.`;
+    const columns = [{ className: "bg-white border border-zinc-200 mr-2" }, { className: "bg-white ml-2" }];
+    expect(cards(grid("bg-zinc-100 px-10 py-4", columns))).toMatchObject({ row: "16px 40px", columns: [{ padding: "0px", border: ["1px 1px 1px 1px", "#e4e4e7"] }, { padding: "0px" }] });
+    expect(warnings()).toEqual([keep("a card has a border of its own on a side its gutter needs"), ignored("right", "mr-2"), ignored("left", "ml-2")]);
+    warn.mockClear();
+    cards(grid("bg-black/50 px-4", [{ className: "bg-white" }]));
+    cards(grid("px-4", [{ className: "bg-white" }], { row: { backgroundImage: { url: "https://example.com/a.png", fullWidth: false } } }));
+    expect(warnings()).toEqual([
+      keep("that color (`rgba(0, 0, 0, 0.5)`) isn't opaque"),
+      keep("a background image is around them, not one color"),
+    ]);
+  });
+
+  it("need the Row's background in a Row rendered on its own (renderRowToJson has no body)", () => {
+    // A Row on its own isn't in a <Tailwind>: its Columns' margins (in one) give the gutters.
+    const row = (props: Record<string, unknown>) =>
+      renderRowToJson(
+        <Row {...props}>
+          <Tailwind tw={tw}>
+            <Column className="bg-white px-4 mr-2"><Paragraph>One</Paragraph></Column>
+            <Column className="bg-white px-4 ml-2"><Paragraph>Two</Paragraph></Column>
+          </Tailwind>
+        </Row>
+      );
+    expect(row({ columnsBackgroundColor: "#eeeeee" }).columns[0].values.border).toMatchObject({ borderRightWidth: "8px", borderRightColor: "#eeeeee", borderLeftWidth: "0px" });
+    expect(warnings()).toEqual([]);
+    expect(row({}).columns[0].values.border).toEqual({});
+    expect(warnings()).toEqual([
+      "[Unlayer] Row can't give its cards gutters: they'd be borders in the color around them, and that color isn't known for a Row on its own (give the Row a background, `bg-*`).",
+      "[Unlayer] Column ignores `margin-right: 8px` from class `mr-2`.",
+      "[Unlayer] Column ignores `margin-left: 8px` from class `ml-2`.",
+    ]);
+  });
+});
+
+const MODES = { Email, Page, Document } as const;
+type Mode = keyof typeof MODES;
+/** A template: the root's, the Row's and the Column's classes, around `content`. */
+const nested = (classes: { root?: string; row?: string; column?: string }, content: React.ReactNode, Root: (typeof MODES)[Mode] = Email) => (
+  <Tailwind tw={tw}>
+    <Root className={classes.root}>
+      <Row className={classes.row}>
+        <Column className={classes.column}>{content}</Column>
+      </Row>
+    </Root>
+  </Tailwind>
+);
+/** The values of the first Column's blocks in the design. */
+const contents = (element: React.ReactElement) => renderToJson(element).body.rows[0].columns[0].contents.map((c: { values: Record<string, any> }) => c.values);
+
+describe("<Tailwind>: text styles on a Row, a Column or the root are the text blocks' inside, as CSS inherits them", () => {
+  it("gives Paragraph, Heading, Menu and Table the Column's, a Button its label's and its place, Social its place", () => {
+    const [p, h, b, m, t, s] = contents(
+      nested(
+        { column: "bg-indigo-600 text-white text-center text-lg font-semibold tracking-wide" },
+        <>
+          <Paragraph>Hi</Paragraph>
+          <Heading>Title</Heading>
+          <Button href="https://example.com">Go</Button>
+          <Menu items={[{ text: "Home", href: "https://example.com" }]} />
+          <Table headers={["A"]} data={[["1"]]} />
+          <Social icons={[]} />
+        </>
+      )
+    );
+    expect(p).toMatchObject({ color: "#fff", textAlign: "center", fontSize: "18px", lineHeight: "155.56%", fontWeight: 600, letterSpacing: "0.025em" });
+    expect(h).toMatchObject({ color: "#fff", textAlign: "center", fontSize: "18px", lineHeight: "155.56%", fontWeight: 600 });
+    // A Button's label sits on its own background, and an email client gives a link its own color: not the color.
+    expect(b).toMatchObject({ textAlign: "center", fontSize: "18px", fontWeight: 600, letterSpacing: "0.025em" });
+    expect(b.buttonColors.color).toBe("#FFFFFF");
+    expect(m).toMatchObject({ textColor: "#fff", align: "center", fontSize: "18px", fontWeight: 600 });
+    expect(t).toMatchObject({ headerColor: "#fff", contentColor: "#fff", footerColor: "#fff", contentTextAlign: "center", headerFontSize: "18px", contentFontSize: "18px", contentLineHeight: "155.56%", contentFontWeight: 600 });
+    expect(s).toMatchObject({ align: "center" });
+    // All in the design: nothing kept in HTML only.
+    expect(warnings()).toEqual([]);
+  });
+
+  it("lets a block's own classes and props win, and the nearest container's over the ones around it", () => {
+    const element = (
+      <Tailwind tw={tw}>
+        <Email className="text-gray-800 text-sm">
+          <Row className="text-red-500 text-right">
+            <Column className="text-white">
+              <Paragraph className="text-left">Own class</Paragraph>
+              <Paragraph color="#123456">Own prop</Paragraph>
+              <Paragraph textColor="#654321" align="center">Its other names</Paragraph>
+              <Heading className="text-blue-600 text-2xl">Own size</Heading>
+            </Column>
+          </Row>
+          <Row className="text-red-500">
+            <Column>
+              <Paragraph>The Row's</Paragraph>
+            </Column>
+          </Row>
+          <Row>
+            <Column>
+              <Paragraph>The root's</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    const rows = renderToJson(element).body.rows.map((r: any) => r.columns[0].contents.map((c: any) => c.values));
+    const [ownClass, ownProp, aliases, heading] = rows[0];
+    expect(ownClass).toMatchObject({ color: "#fff", textAlign: "left", fontSize: "14px", lineHeight: "142.86%" });
+    expect(ownProp).toMatchObject({ color: "#123456", textAlign: "right" });
+    expect(aliases).toMatchObject({ color: "#654321", textAlign: "center" });
+    expect(heading).toMatchObject({ color: "#155dfc", fontSize: "24px", textAlign: "right" });
+    expect(rows[1][0]).toMatchObject({ color: "#fb2c36", fontSize: "14px" });
+    expect(rows[2][0]).toMatchObject({ color: "#1e2939", fontSize: "14px" });
+  });
+
+  it("maps the root's color and font to the body's, as the editor has them, and shows the color in the text blocks", () => {
+    const json = renderToJson(nested({ root: "text-gray-800 font-serif text-center" }, <><Paragraph>Hi</Paragraph><Heading>Title</Heading></>));
+    expect(json.body.values.textColor).toBe("#1e2939");
+    expect(json.body.values.fontFamily.value).toMatch(/^ui-serif/);
+    const [p, h] = json.body.rows[0].columns[0].contents.map((c: any) => c.values);
+    expect(p).toMatchObject({ color: "#1e2939", textAlign: "center" });
+    expect(h).toMatchObject({ color: "#1e2939", textAlign: "center" });
+    // The font is the body's, which the text blocks show (the editor's), not theirs.
+    expect(p.fontFamily).toBeUndefined();
+    expect(warnings()).toEqual([]);
+  });
+
+  it("passes phone variants on to the blocks' phone settings, where a block sets nothing for that style", () => {
+    const [plain, own, ownPhone] = contents(
+      nested(
+        { row: "text-lg max-sm:text-sm", column: "max-sm:text-center" },
+        <>
+          <Paragraph>Hi</Paragraph>
+          <Paragraph className="text-left text-base">Hi</Paragraph>
+          <Paragraph className="max-sm:text-right">Hi</Paragraph>
+        </>
+      )
+    );
+    expect(plain).toMatchObject({ fontSize: "18px", _override: { mobile: { fontSize: "14px", lineHeight: "142.86%", textAlign: "center" } } });
+    // Its own classes apply on phones too, as a rule of its own does in CSS.
+    expect(own).toMatchObject({ fontSize: "16px", textAlign: "left" });
+    expect(own._override?.mobile).toBeUndefined();
+    expect(ownPhone._override.mobile).toMatchObject({ textAlign: "right", fontSize: "14px" });
+  });
+
+  it.each(Object.keys(MODES) as Mode[])("%s: the HTML shows them in the text blocks, not on the Column", (mode) => {
+    const html = renderToHtml(nested({ root: "text-gray-800", row: "text-center", column: "text-white" }, <><Paragraph>Hi</Paragraph><Heading className="text-left">Title</Heading></>, MODES[mode]));
+    expect(html).toMatch(/<div [^>]*v-text-align[^>]*style="[^"]*color: #fff;[^"]*text-align: center/);
+    expect(html).toMatch(/<h1 [^>]*style="[^"]*color: #fff;[^"]*text-align: left/);
+    expect(html).not.toMatch(/id="u_column_1"[^>]*style="[^"]*color: ?#fff/);
+    expect(warnings()).toEqual([]);
+  });
+
+  it.each(Object.keys(MODES) as Mode[])("%s: markup in the Column (an Html block) gets them as an inline style on it, said", (mode) => {
+    const element = nested({ column: "text-white text-center" }, <><Paragraph>Hi</Paragraph><Html html="<p>Markup</p>" /></>, MODES[mode]);
+    const cell = renderToHtml(element).match(/id="u_column_1"[^>]*>/)![0];
+    expect(cell).toMatch(/style="[^"]*color:#fff/);
+    expect(cell).toMatch(/style="[^"]*text-align:center/);
+    expect(warnings().sort()).toEqual([
+      "[Unlayer] Column `color: #fff` from class `text-white` is kept in HTML (an inline style) for the markup in it, but not in the design for the visual editor.",
+      "[Unlayer] Column `text-align: center` from class `text-center` is kept in HTML (an inline style) for the markup in it, but not in the design for the visual editor.",
+    ]);
+    // The design: in the Paragraph, not on the Column.
+    warn.mockClear();
+    const json = renderToJson(element).body.rows[0].columns[0];
+    expect(json.contents[0].values).toMatchObject({ color: "#fff", textAlign: "center" });
+    expect(JSON.stringify(json.values)).not.toContain("#fff");
+  });
+
+  it("keeps the styles that aren't props (case, italics, decoration) on the Column, where they reach the text as in CSS", () => {
+    const html = renderToHtml(nested({ column: "uppercase italic text-white" }, <Paragraph>Hi</Paragraph>));
+    expect(html).toMatch(/id="u_column_1"[^>]*style="[^"]*text-transform:uppercase;font-style:italic/);
+    expect(warnings()).toEqual([
+      "[Unlayer] Column `text-transform: uppercase` from class `uppercase` is kept in HTML (an inline style) but not in the design for the visual editor.",
+      "[Unlayer] Column `font-style: italic` from class `italic` is kept in HTML (an inline style) but not in the design for the visual editor.",
+    ]);
+  });
+});
+
+describe("<Tailwind>: a border without a color is the text color (Tailwind's currentColor)", () => {
+  const sides = (border: Record<string, string>) => ["Top", "Right", "Bottom", "Left"].map((side) => border[`border${side}Color`]);
+
+  it("on a Column: its own text color, else the Row's, the root's, or the body's default", () => {
+    const column = (classes: { root?: string; row?: string; column?: string }) => renderToJson(nested(classes, <Paragraph>Hi</Paragraph>)).body.rows[0].columns[0].values;
+    expect(sides(column({ column: "border" }).border)).toEqual(Array(4).fill("#000000"));
+    expect(sides(column({ column: "border-2 text-white" }).border)).toEqual(Array(4).fill("#fff"));
+    expect(sides(column({ row: "text-red-500", column: "border" }).border)).toEqual(Array(4).fill("#fb2c36"));
+    expect(sides(column({ root: "text-gray-800", column: "border-t" }).border)[0]).toBe("#1e2939");
+    // A color class wins, as in CSS; a side without a width has none.
+    expect(sides(column({ column: "border border-zinc-300 text-white" }).border)).toEqual(Array(4).fill("#d4d4d8"));
+    expect(column({ column: "border-t" }).border.borderBottomColor).toBeUndefined();
+    // On phones too, where only a phone class sets the width.
+    expect(column({ column: "text-white max-sm:border-2" })._override.mobile.border).toMatchObject({ borderTopWidth: "2px", borderTopColor: "#fff" });
+  });
+
+  it("on a Button: its own label's color; on a Divider: the text color around it", () => {
+    const [button, plainButton, divider] = contents(
+      nested(
+        { column: "text-red-500" },
+        <>
+          <Button className="border-2 text-white bg-black">Go</Button>
+          <Button className="border">Go</Button>
+          <Divider className="border-t-2" />
+        </>
+      )
+    );
+    expect(button.border).toMatchObject({ borderTopWidth: "2px", borderTopColor: "#fff", borderLeftColor: "#fff" });
+    expect(plainButton.border).toMatchObject({ borderTopColor: "#FFFFFF" });
+    expect(divider.border).toMatchObject({ borderTopWidth: "2px", borderTopStyle: "solid", borderTopColor: "#fb2c36" });
+    // Without anything around it: the body's text color.
+    expect(block(<Divider className="border-t-4" />).border.borderTopColor).toBe("#000000");
+  });
+
+  it.each(Object.keys(MODES) as Mode[])("%s: the HTML draws them in that color", (mode) => {
+    const html = renderToHtml(nested({ root: "text-gray-800", column: "border" }, <Divider className="border-t-2" />, MODES[mode]));
+    expect(html).toMatch(/border-top: ?1px solid #1e2939/);
+    expect(html).toMatch(/border-top(: |-width:)2px[^"]*#1e2939/);
+    expect(html).not.toContain("currentColor");
+  });
+});
+
+describe("<Tailwind>: an Image's width classes", () => {
+  const src = (className: string) => block(<Image src="https://example.com/a.png" className={className} />).src;
+
+  it("hold a width and a max width together, as the browser shows them (the smaller one)", () => {
+    // 320px of the 480px the block has.
+    expect(src("w-full max-w-xs")).toMatchObject({ autoWidth: false, maxWidth: "66.67%" });
+    expect(src("max-w-xs w-full")).toMatchObject({ autoWidth: false, maxWidth: "66.67%" });
+    expect(src("w-64 max-w-xs")).toMatchObject({ autoWidth: false, maxWidth: "53.33%" });
+    expect(src("w-96 max-w-xs")).toMatchObject({ autoWidth: false, maxWidth: "66.67%" });
+    expect(src("w-1/2 max-w-full")).toMatchObject({ autoWidth: false, maxWidth: "50%" });
+    expect(src("w-full max-w-[560px]")).toMatchObject({ autoWidth: false, maxWidth: "100%" });
+    expect(warnings()).toEqual([]);
+    // A percentage and pixels: which is smaller depends on the column, and the editor's image has one width.
+    expect(src("w-1/2 max-w-xs")).toMatchObject({ maxWidth: "50%" });
+    expect(warnings()).toEqual(["[Unlayer] Image can't hold both `width: 50%` and `max-width: 320px` from its classes (the editor's image has one width), so it's 50%."]);
+  });
+
+  it("hold a min width too, as CSS does (it wins over the max width)", () => {
+    // 320px of the 480px the block has; 400px is 83.33%.
+    expect(src("w-64 min-w-xs")).toMatchObject({ autoWidth: false, maxWidth: "66.67%" });
+    expect(src("w-96 min-w-xs")).toMatchObject({ autoWidth: false, maxWidth: "80%" });
+    expect(src("w-64 min-w-[400px] max-w-xs")).toMatchObject({ autoWidth: false, maxWidth: "83.33%" });
+    expect(src("min-w-xs max-w-[400px]")).toMatchObject({ autoWidth: false, maxWidth: "83.33%" });
+    expect(warnings()).toEqual([]);
+    expect(src("w-1/2 min-w-xs")).toMatchObject({ maxWidth: "50%" });
+    expect(warnings()).toEqual(["[Unlayer] Image can't hold both `width: 50%` and `min-width: 320px` from its classes (the editor's image has one width), so it's 50%."]);
+  });
+
+  it("take `w-auto` as the editor's auto width", () => {
+    expect(src("w-auto")).toMatchObject({ autoWidth: true, maxWidth: "100%" });
+    expect(src("w-auto max-w-xs")).toMatchObject({ autoWidth: false, maxWidth: "66.67%" });
+    expect(warnings()).toEqual([]);
+  });
+
+  // A logo sized by its height, as Tailwind users write one: the browser gives its width from its aspect ratio.
+  const logo = { url: "https://example.com/logo.png", width: 400, height: 100 };
+
+  it("take a width class on an image whose `src` gives its size (a `w-8` icon, a `w-48` logo), as on one whose `src` is a URL", () => {
+    for (const className of ["w-8", "w-48", "max-w-48", "w-48 max-w-full"]) {
+      const sized = block(<Image src={logo} className={className} />).src;
+      const plain = block(<Image src={logo.url} className={className} />).src;
+      expect(sized, className).toMatchObject({ autoWidth: plain.autoWidth, maxWidth: plain.maxWidth });
+      expect(sized.maxWidth, className).not.toBe("100%");
+    }
+    expect(warnings()).toEqual([]);
+    // A display width its `src` gives (`maxWidth`) is a prop given: it wins over the class, as a flat one does.
+    for (const image of [<Image key="s" src={{ ...logo, maxWidth: "50%" }} className="w-8" />, <Image key="v" values={{ src: { ...logo, maxWidth: "50%" } }} className="w-8" />]) {
+      expect(block(image).src).toMatchObject({ autoWidth: false, maxWidth: "50%" });
+    }
+  });
+
+  it("take a height with an auto width (a logo's `h-12 w-auto`) as the width the image's size gives, on phones too", () => {
+    // 48px of a 400×100 logo is 192px wide: 40% of the 480px the block has.
+    for (const className of ["h-12 w-auto", "w-auto h-12", "h-12", "h-12 max-w-full"]) {
+      expect(block(<Image src={logo} className={className} />).src).toEqual({ ...logo, autoWidth: false, maxWidth: "40%" });
+    }
+    expect(block(<Image values={{ src: logo }} className="h-12 w-auto" />).src).toMatchObject({ autoWidth: false, maxWidth: "40%" });
+    // Phones: 32px is 128px wide (a phone's width in pixels, as `max-sm:w-32` gives it).
+    const phone = block(<Image src={logo} className="h-12 w-auto max-sm:h-8" />);
+    expect(phone.src).toMatchObject({ autoWidth: false, maxWidth: "40%" });
+    expect(phone._override.mobile.src).toEqual({ autoWidth: false, maxWidth: "128px" });
+    expect(block(<Image src={logo} className="max-sm:h-8" />)._override.mobile.src).toEqual({ autoWidth: false, maxWidth: "128px" });
+    // Above a breakpoint: the desktop width, phones keep the auto width.
+    const desktop = block(<Image src={logo} className="sm:h-12" />);
+    expect(desktop.src).toMatchObject({ autoWidth: false, maxWidth: "40%" });
+    expect(desktop._override.mobile.src).toMatchObject({ autoWidth: true });
+    expect(warnings()).toEqual([]);
+  });
+
+  it("leave a height out where the image's size isn't given, so it isn't stretched, and say so", () => {
+    for (const className of ["h-12 w-auto", "h-12"]) {
+      const values = block(<Image src="https://example.com/logo.png" className={className} />);
+      expect(values.src).toMatchObject({ autoWidth: true, maxWidth: "100%" });
+      expect(values.src.height).toBeUndefined();
+    }
+    expect(block(<Image src="https://example.com/logo.png" className="max-sm:h-8" />)._override?.mobile?.src).toBeUndefined();
+    expect([...new Set(warnings())]).toEqual([
+      "[Unlayer] Image ignores `height: 48px` from class `h-12`: an image's height gives its width only with the image's size (`src={{ url, width, height }}`), as its aspect ratio does in the browser; without it, the height would stretch the image.",
+      "[Unlayer] Image ignores `height: 32px` from class `max-sm:h-8`: an image's height gives its width only with the image's size (`src={{ url, width, height }}`), as its aspect ratio does in the browser; without it, the height would stretch the image.",
+    ]);
+  });
+
+  it("leave a height with a width as it was: the width is the image's, the height an inline style", () => {
+    expect(block(<Image src="https://example.com/logo.png" className="w-32 h-12" />).src).toMatchObject({ autoWidth: false, maxWidth: "26.67%" });
+    expect(block(<Image src={logo} width={300} className="h-12" />).src).toMatchObject({ autoWidth: false, maxWidth: "62.5%" });
+    expect(renderToHtml(nested({}, <Image src="https://example.com/logo.png" className="w-32 h-12" />))).toMatch(/<img [^>]*height: ?48px/);
+  });
+
+  it("reads an image's size given as a string in time linear in its length, whatever it holds", async () => {
+    // `\d*\.?\d+` read a run of digits again from each place it could split it: 30,000 digits then `x` took 1.1 s.
+    const time = (n: number) => {
+      const start = performance.now();
+      block(<Image src={{ url: "https://example.com/logo.png", width: "0".repeat(n) + "x", height: 100 }} className="h-12 w-auto" />);
+      return performance.now() - start;
+    };
+    time(100);
+    const { small, large, grows } = await growth(time, [3000, 30_000], { ratio: 20, floor: 100 });
+    expect(grows, `${small.toFixed(1)} ms for 3,000 digits, ${large.toFixed(1)} ms for 30,000`).toBe(false);
+    // A size that isn't one gives no width: the height is left out, as without a size.
+    expect(block(<Image src={{ url: "https://example.com/logo.png", width: "0".repeat(100) + "x", height: 100 }} className="h-12" />).src).toMatchObject({ autoWidth: true });
+  });
+
+  it.each(Object.keys(MODES) as Mode[])("%s: a logo's height class keeps its aspect ratio in the HTML, sync and async", async (mode) => {
+    const content = (
+      <>
+        <Image src={logo} className="h-12 w-auto max-sm:h-8" />
+        <Image src="https://example.com/plain.png" className="h-12 w-auto" />
+      </>
+    );
+    for (const html of [renderToHtml(nested({}, content, MODES[mode])), await renderToHtmlAsync(nested({}, content, MODES[mode]))]) {
+      const sized = html.match(/<img [^>]*logo\.png[^>]*>/g)!;
+      const plain = html.match(/<img [^>]*plain\.png[^>]*>/g)!;
+      // As wide as 48px of it is: 192px (an email's image for Outlook has its height, 48, too).
+      expect(sized.some((tag) => /max-width: ?192px/.test(tag))).toBe(true);
+      if (mode === "Email") expect(sized.some((tag) => /width="192" height="48"/.test(tag))).toBe(true);
+      // Phones: 32px of it, 128px wide (a document, for print, has no phone styles).
+      if (mode !== "Document") expect(html).toMatch(/width: 128px !important/);
+      // Never a fixed height beside a width that isn't the ratio's.
+      for (const tag of [...sized, ...plain]) expect(tag).not.toMatch(/height: ?\d+px/);
+      expect(plain.join("")).not.toMatch(/height="48"/);
+      expect(plain.some((tag) => /width: 100%/.test(tag))).toBe(true);
+    }
+  });
+
+  it.each(Object.keys(MODES) as Mode[])("%s: the HTML holds the max width, and `w-auto` stays in its column", (mode) => {
+    const html = renderToHtml(
+      nested(
+        {},
+        <>
+          <Image src="https://example.com/a.png" className="w-full max-w-xs" />
+          <Image src="https://example.com/b.png" className="w-auto" />
+        </>,
+        MODES[mode]
+      )
+    );
+    const [capped, auto] = html.match(/<img [^>]*>/g)!;
+    expect(capped).toMatch(/max-width: 320(\.\d+)?px/);
+    expect(auto).toMatch(/width: 100%/);
+    expect(auto).not.toMatch(/width: ?auto/);
+  });
+});
+
+describe("<Tailwind>: the root's width classes", () => {
+  const width = (className: string, root: Record<string, unknown> = {}) => design(<Paragraph>Hi</Paragraph>, { className, ...root }).body.values.contentWidth;
+
+  it("are one content width, as CSS sizes the box: the max width caps the width, the min width wins over both", () => {
+    expect(width("w-[600px] max-w-[800px]")).toBe("600px");
+    expect(width("max-w-[800px] w-[600px]")).toBe("600px");
+    expect(width("max-w-[500px] w-[600px]")).toBe("500px");
+    expect(width("w-[600px] max-w-[500px]")).toBe("500px");
+    expect(width("w-[600px] min-w-[640px]")).toBe("640px");
+    expect(width("w-[600px] min-w-[640px] max-w-[620px]")).toBe("640px");
+    expect(width("w-[600px] min-w-[500px] max-w-[800px]")).toBe("600px");
+    expect(width("max-w-[700px] min-w-[640px]")).toBe("700px");
+    // A width alone, a max width alone (the box is as wide as it allows), the whole window capped.
+    expect(width("w-[600px]")).toBe("600px");
+    expect(width("max-w-[640px]")).toBe("640px");
+    expect(width("w-full max-w-[640px]")).toBe("640px");
+    expect(width("w-1/2 max-w-[80%]")).toBe("50%");
+    expect(warnings()).toEqual([]);
+  });
+
+  it("keep the width where which one wins depends on the window's width, and say so", () => {
+    expect(width("w-[600px] max-w-[90%]")).toBe("600px");
+    expect(width("w-[80%] min-w-[500px]")).toBe("80%");
+    expect(warnings()).toEqual([
+      "[Unlayer] Email can't hold both `width: 600px` and `max-width: 90%` from its classes (the design has one content width), so it's 600px.",
+      "[Unlayer] Email can't hold both `width: 80%` and `min-width: 500px` from its classes (the design has one content width), so it's 80%.",
+    ]);
+  });
+
+  it("leave a min width alone in the HTML, and lose to a `contentWidth` given", () => {
+    const body = design(<Paragraph>Hi</Paragraph>, { className: "min-w-[640px]" }).body.values;
+    expect(body.contentWidth).toBe(design(<Paragraph>Hi</Paragraph>).body.values.contentWidth);
+    expect(warnings()).toEqual(["[Unlayer] Email `min-width: 640px` from class `min-w-[640px]` is kept in HTML (an inline style) but not in the design for the visual editor."]);
+    expect(width("w-[600px] max-w-[800px]", { contentWidth: "700px" })).toBe("700px");
+  });
+
+  it.each(Object.keys(MODES) as Mode[])("%s: the HTML is that wide", (mode) => {
+    const html = renderToHtml(nested({ root: "w-[600px] max-w-[800px]" }, <Paragraph>Hi</Paragraph>, MODES[mode]));
+    expect(html).toMatch(/\b600px/);
+    expect(html).not.toMatch(/\b800px/);
+  });
+});
+
+describe("<Tailwind>: what a component can't take is said", () => {
+  const kept = (rule: string, className: string, name = "Paragraph") =>
+    `[Unlayer] ${name} \`${rule}\` from class \`${className}\` is kept in HTML (an inline style) but not in the design for the visual editor.`;
+
+  it("inlines a class no prop takes on the component's element, said once per render", () => {
+    const html = renderToHtml(
+      <Tailwind tw={tw}>
+        <Email>
+          <Row>
+            <Column>
+              <Button className="grid" href="https://example.com">Go</Button>
+              <Paragraph className="uppercase italic" style={{ fontStyle: "normal" }}>Hi</Paragraph>
+              <Image src="https://example.com/a.png" className="rounded-lg" />
+            </Column>
+          </Row>
+        </Email>
+      </Tailwind>
+    );
+    expect(html).toMatch(/<a [^>]*style="[^"]*;display:grid"/);
+    // Its own `style` wins over a class.
+    expect(html).toMatch(/<div [^>]*v-text-align[^>]*style="[^"]*;text-transform:uppercase;font-style:normal"/);
+    expect(html).toMatch(/<img [^>]*style="[^"]*;border-radius:8px"/);
+    expect(warnings()).toEqual([kept("display: grid", "grid", "Button"), kept("text-transform: uppercase", "uppercase"), kept("font-style: italic", "italic"), kept("border-radius: 8px", "rounded-lg", "Image")]);
+    // The design: said by the classes once, and the block's own style too.
+    warn.mockClear();
+    design(<Paragraph className="uppercase" style={{ fontStyle: "normal" }}>Hi</Paragraph>);
+    expect(warnings()).toEqual([kept("text-transform: uppercase", "uppercase"), "[Unlayer] Paragraph `style.fontStyle` is kept in HTML but not in the design for the visual editor."]);
+  });
+
+  it("says why for each kind", () => {
+    block(<Paragraph className="dark:bg-black nonsense max-sm:text-red-500 uppercase mx-auto bg-white focus:text-red-500 max-sm:italic hover:underline">Hi</Paragraph>);
+    block(<Paragraph className="sm:text-red-500">Hi</Paragraph>);
+    expect(warnings()).toEqual([
+      "[Unlayer] Paragraph ignores class `dark:bg-black`: it applies only for @media (prefers-color-scheme: dark).",
+      "[Unlayer] Paragraph ignores class `nonsense`: Tailwind has no such class.",
+      "[Unlayer] Paragraph ignores class `focus:text-red-500`: it applies only for `:focus`.",
+      kept("background-color: #fff", "bg-white"),
+      "[Unlayer] Paragraph ignores `margin-inline: auto` from class `mx-auto`: its `containerPadding` can't be negative or automatic.",
+      kept("text-transform: uppercase", "uppercase"),
+      "[Unlayer] Paragraph ignores `font-style: italic` from class `max-sm:italic`.",
+      "[Unlayer] Paragraph has no phone setting for `color` (class `max-sm:text-red-500`).",
+      "[Unlayer] Paragraph has no hover style for `text-decoration-line` (class `hover:underline`).",
+      "[Unlayer] Paragraph can't set `color` for one screen size (class `sm:text-red-500`).",
+    ]);
+  });
+});
+
+describe("<Tailwind config> with the synchronous renderers", () => {
+  const message = '[Unlayer] <Tailwind config> needs `tw`: `await loadTailwind(config)` from "@unlayer/react-elements/tailwind", or the async renderers ("@unlayer/react-elements/async"), which compile it (these are synchronous).';
+  const template = (root?: string, paragraph?: string) => (
+    <Tailwind config={config}>
+      <Email className={root}>
+        <Row>
+          <Column>
+            <Paragraph className={paragraph}>Hi</Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    </Tailwind>
+  );
+
+  it("throws, for a block's classes or the root's, in every renderer", () => {
+    for (const element of [template(undefined, "text-brand"), template("bg-gray-100")]) {
+      expect(() => renderToHtml(element)).toThrow(message);
+      expect(() => renderToPlainText(element)).toThrow(message);
+      expect(() => renderToJson(element)).toThrow(message);
+      expect(() => renderToHtmlParts(element)).toThrow(message);
+    }
+  });
+
+  it("throws even after the async renderers compiled the same config", async () => {
+    await renderToJsonAsync(template(undefined, "text-brand"));
+    expect(() => renderToJson(template(undefined, "text-brand"))).toThrow(message);
+  });
+
+  it("renders when there are no classes to read", () => {
+    expect(renderToPlainText(template())).toBe("Hi");
+  });
+
+  it("says what `tw` takes when it's something else", () => {
+    expect(() => renderToJson(<Tailwind tw={{ config: undefined }}>{template(undefined, "p-2").props.children}</Tailwind>)).toThrow('[Unlayer] <Tailwind tw> takes `await loadTailwind(config)` from "@unlayer/react-elements/tailwind".');
+  });
+});
+
+/** A seeded random number generator (mulberry32): the same inputs every run. */
+function random(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
diff --git a/packages/react/src/tailwind/css.ts b/packages/react/src/tailwind/css.ts
new file mode 100644
index 00000000..c080e117
--- /dev/null
+++ b/packages/react/src/tailwind/css.ts
@@ -0,0 +1,223 @@
+/**
+ * The stylesheet Tailwind's compiler builds, read back: each rule with the at-rules around it (`@media`), the
+ * theme's variables (`:root { --color-red-500: … }`) and the initial values of its registered properties
+ * (`@property --tw-border-style { initial-value: solid }`). Tailwind writes regular CSS, so this reads what it
+ * writes as CSS reads it: blocks, escapes, strings, brackets, comments, and rules nested in a rule. What one rule
+ * holds doesn't change how the next reads, unless it runs to the end (a bracket, a string or a comment left open:
+ * the sheet isn't `clean` then).
+ */
+
+export interface Declaration {
+  property: string;
+  value: string;
+  important: boolean;
+}
+
+export interface Rule {
+  /**
+   * The class it's for, unescaped (`max-sm:p-2`), and the selector around it (`:hover`, `:where(` … `)`, a variant's
+   * `.group:hover `). Tailwind writes each class's rules in a rule of its own (`.max-sm\:p-2 { … }`), its variants'
+   * selectors nested in it: the class is that rule's, wherever it is in the selector.
+   */
+  token: string;
+  before: string;
+  after: string;
+  /** The at-rules it's in, outermost first (`@media (width < 40rem)`); `@layer` isn't one. */
+  at: string[];
+  declarations: Declaration[];
+  /** Its place in the stylesheet: a later rule wins. */
+  order: number;
+}
+
+export interface Sheet {
+  rules: Rule[];
+  vars: Map<string, string>;
+  initial: Map<string, string>;
+  /** Whether it read as written: nothing left open at its end (a block, a bracket, a string, a comment), nothing closed that wasn't. */
+  clean: boolean;
+}
+
+interface Block {
+  prelude: string;
+  body: string;
+  children: Block[];
+}
+
+const CLOSE: Record<string, string> = { "(": ")", "[": "]", "{": "}" };
+
+/**
+ * Where what starts at `i` ends (just past it), as CSS reads it: an escape (`\(`), a string (to its quote, or to the
+ * line's end, where CSS ends one left open), a comment, or a bracket (to the one that closes it, whatever is in it; a
+ * closing one of another kind is a character there). What runs to the end of `text` is said to `open`.
+ */
+function end(text: string, i: number, open?: () => void): number {
+  const c = text[i];
+  if (c === "\\") return Math.min(i + 2, text.length);
+  if (c === '"' || c === "'") {
+    for (let j = i + 1; j < text.length; j++) {
+      if (text[j] === "\\") j++;
+      else if (text[j] === c) return j + 1;
+      else if (text[j] === "\n") return open?.(), j;
+    }
+  } else if (c === "/" && text[i + 1] === "*") {
+    const close = text.indexOf("*/", i + 2);
+    if (close >= 0) return close + 2;
+  } else if (CLOSE[c]) {
+    for (let j = i + 1; j < text.length; ) {
+      if (text[j] === CLOSE[c]) return j + 1;
+      j = starts(text, j) ? end(text, j, open) : j + 1;
+    }
+  } else return i + 1;
+  open?.();
+  return text.length;
+}
+
+/** Whether what's at `i` is an escape, a string, a comment or a bracket (see `end`). */
+const starts = (text: string, i: number) => text[i] === "\\" || text[i] === '"' || text[i] === "'" || !!CLOSE[text[i]] || (text[i] === "/" && text[i + 1] === "*");
+
+/** Where a string or a bracket that starts at `i` ends (just past it): see `end`. */
+export const skip = (text: string, i: number): number => end(text, i);
+
+/** Splits `text` at `separator` where it isn't in an escape, a string, a comment or brackets. */
+export function split(text: string, separator: string): string[] {
+  const out: string[] = [];
+  let from = 0;
+  for (let i = 0; i < text.length; ) {
+    if (starts(text, i)) i = end(text, i);
+    else if (text[i++] === separator) {
+      out.push(text.slice(from, i - 1));
+      from = i;
+    }
+  }
+  out.push(text.slice(from));
+  return out;
+}
+
+/**
+ * CSS without its comments (as CSS reads them: not in a string or an escape). What can start one of them is found with a
+ * regex, from where the last ended, and the text between is copied whole: a loop over each character, appending each,
+ * took time growing with the stylesheet's size squared once Node 20 had optimized it (60 ms for 80 KB).
+ */
+function uncommented(text: string, open: () => void): string {
+  const special = /\/\*|[\\"']/g;
+  let out = "";
+  let from = 0;
+  for (let found = special.exec(text); found; found = special.exec(text)) {
+    const to = end(text, found.index, open);
+    if (found[0] === "/*") {
+      out += text.slice(from, found.index);
+      from = to;
+    }
+    special.lastIndex = to;
+  }
+  return out + text.slice(from);
+}
+
+/** The blocks from `i`, to the `}` that closes them (`top`: to the end). What isn't closed, or closes nothing, is said to `open`. */
+function read(text: string, i: number, open: () => void, top = false): { children: Block[]; body: string; end: number } {
+  const children: Block[] = [];
+  let body = "";
+  let buffer = "";
+  while (i < text.length) {
+    const c = text[i];
+    if (c === "{") {
+      const inner = read(text, i + 1, open);
+      children.push({ prelude: buffer.trim(), body: inner.body, children: inner.children });
+      buffer = "";
+      i = inner.end;
+    } else if (c === "}") {
+      if (!top) return { children, body: body + buffer, end: i + 1 };
+      open();
+      i++;
+    } else if (starts(text, i)) {
+      const to = end(text, i, open);
+      buffer += text.slice(i, to);
+      i = to;
+    } else {
+      buffer += c;
+      if (c === ";") {
+        body += buffer;
+        buffer = "";
+      }
+      i++;
+    }
+  }
+  if (!top) open();
+  return { children, body: body + buffer, end: i };
+}
+
+function declarations(body: string): Declaration[] {
+  const out: Declaration[] = [];
+  for (const part of split(body, ";")) {
+    const colon = part.indexOf(":");
+    if (colon <= 0) continue;
+    const property = part.slice(0, colon).trim();
+    let value = part.slice(colon + 1).trim();
+    const important = /!\s*important$/i.test(value);
+    // (Its `!` is the value's last: what's before it, less the spaces before it, as `/\s*!\s*important$/` takes it off, which
+    // read the spaces again from each one of them.)
+    if (important) value = value.slice(0, value.lastIndexOf("!")).trimEnd();
+    if (property && value) out.push({ property: property.startsWith("--") ? property : property.toLowerCase(), value, important });
+  }
+  return out;
+}
+
+const CLASS = /\.((?:\\[0-9a-fA-F]{1,6}\s?|\\[^\n0-9a-fA-F]|[\w -￿-])+)/g;
+
+/** A class name as a selector escapes it, unescaped (`max-sm\:p-2` → `max-sm:p-2`). */
+export function unescape(name: string): string {
+  return name.replace(/\\([0-9a-fA-F]{1,6})\s?|\\(.)/g, (_, hex: string | undefined, char: string | undefined) => (hex ? String.fromCodePoint(parseInt(hex, 16)) : char!));
+}
+
+export function parseSheet(css: string): Sheet {
+  const sheet: Sheet = { rules: [], vars: new Map(), initial: new Map(), clean: true };
+  const open = () => void (sheet.clean = false);
+  // (`owner`: the class of the rule a nested one is in, where that rule is for one class.)
+  const walk = (blocks: Block[], at: string[], parent?: string, owner?: string) => {
+    for (const block of blocks) {
+      const { prelude } = block;
+      if (/^@layer\b/i.test(prelude)) walk(block.children, at, parent, owner);
+      else if (/^@property\b/i.test(prelude)) {
+        // Tailwind's own registrations, at the top: one in a class's rule (an arbitrary variant's) would be every
+        // class's fallback on the compiler (another render's `text-sm` line height).
+        const initial = declarations(block.body).find((d) => d.property === "initial-value");
+        if (initial && !parent && !at.length) sheet.initial.set(prelude.slice(9).trim(), initial.value);
+      } else if (prelude.startsWith("@")) {
+        // In a rule (`.x { @media … { … } }`), what's in it is that rule's.
+        if (parent) add(parent, [...at, prelude], block.body, owner);
+        walk(block.children, [...at, prelude], parent, owner);
+      } else {
+        const selector = parent && prelude.includes("&") ? prelude.replace(/&/g, parent) : parent ? `${parent} ${prelude}` : prelude;
+        const own = parent ? owner : [...prelude.matchAll(CLASS)].find((m) => m[0] === prelude)?.[1];
+        add(selector, at, block.body, own);
+        walk(block.children, at, selector, own);
+      }
+    }
+  };
+  const add = (selector: string, at: string[], body: string, owner?: string) => {
+    const list = declarations(body);
+    if (!list.length) return;
+    const selectors = split(selector, ",").map((s) => s.trim());
+    if (selectors.every((s) => s === ":root" || s === ":host")) {
+      for (const d of list) if (d.property.startsWith("--")) sheet.vars.set(d.property, d.value);
+      return;
+    }
+    for (const one of selectors) {
+      // Its class: the one its rule is for, else the first. A selector of a class's rule that doesn't name that class
+      // isn't its: `[&,.p-4]:hidden` writes `.p-4` beside it, which would be every later render's `p-4` on the compiler.
+      const classes = [...one.matchAll(CLASS)];
+      const match = owner === undefined ? classes[0] : classes.find((m) => m[1] === owner);
+      if (!match) continue;
+      sheet.rules.push({
+        token: unescape(match[1]),
+        before: one.slice(0, match.index!),
+        after: one.slice(match.index! + match[0].length),
+        at,
+        declarations: list,
+        order: sheet.rules.length,
+      });
+    }
+  };
+  walk(read(uncommented(css, open), 0, open, true).children, []);
+  return sheet;
+}
diff --git a/packages/react/src/tailwind/declarations.ts b/packages/react/src/tailwind/declarations.ts
new file mode 100644
index 00000000..2e1ed9d5
--- /dev/null
+++ b/packages/react/src/tailwind/declarations.ts
@@ -0,0 +1,730 @@
+/**
+ * A class string as the declarations Tailwind gives it, read for an email: when each applies (everywhere, on
+ * phones, above a breakpoint, on hover) and its value in the forms email clients read (see values.ts). What can't
+ * apply in an email (an unknown class, `dark:`, `focus:`, a rule for other elements) is listed with why.
+ */
+import { parseSheet, type Rule, type Sheet } from "./css";
+import { emailValue, MAX_VALUE, TOO_LONG } from "./values";
+
+/** When a declaration applies: everywhere, on phones (`max-sm:`), above a breakpoint (`sm:`, `md:` …), or on hover. */
+export type ClassCondition = "always" | "phone" | "desktop" | "hover";
+
+export interface ClassDeclaration {
+  /** The class it comes from (`max-sm:p-2`). */
+  className: string;
+  /** The CSS property (`padding`). */
+  property: string;
+  /** Its value for an email: pixels, hex or rgba colors, variables and `calc()` worked out (`8px`). */
+  value: string;
+  when: ClassCondition;
+  important: boolean;
+}
+
+export interface ClassDeclarations {
+  /** In the order they apply: a later one for the same property and condition wins. */
+  declarations: ClassDeclaration[];
+  /** Classes that don't apply in an email (or Tailwind doesn't know), and why. */
+  ignored: Array<{ className: string; reason: string }>;
+}
+
+const AND = /and/iy;
+/**
+ * Whether a media query (its spaces out) is `(…)` parts, each with a width and no `(` or `)` in it, with `and` or
+ * nothing between them, as `/^(\([^()]*width[^()]*\)(and)?)+$/i` reads it: read once, where that regex tries each
+ * `width` in each part, which is exponential in their number.
+ */
+function widthParts(q: string): boolean {
+  for (let i = 0; i < q.length; ) {
+    const end = q.indexOf(")", i);
+    if (q[i] !== "(" || end < 0 || q.slice(i + 1, end).includes("(") || !/width/i.test(q.slice(i + 1, end))) return false;
+    AND.lastIndex = i = end + 1;
+    if (AND.test(q)) i += 3;
+  }
+  return q.length > 0;
+}
+
+/** Whether a media query is for small screens (an upper width bound), large ones (a lower bound), or neither. */
+function widthOf(query: string): "phone" | "desktop" | undefined {
+  const q = query.replace(/\s+/g, "").replace(/^(only)?screen(and)?/i, "");
+  if (!widthParts(q) || /height|orientation|aspect|resolution/i.test(q)) return undefined;
+  // (A number only from its run's start: from each digit of it, the number before `px` was read again.)
+  const upper = /max-(?:device-)?width|width<=?|(?:^|[^\d.])[\d.]+(?:px|em|rem)>=?width/i.test(q);
+  const lower = /min-(?:device-)?width|width>=?|(?:^|[^\d.])[\d.]+(?:px|em|rem)<=?width/i.test(q);
+  return upper === lower ? undefined : upper ? "phone" : "desktop";
+}
+
+/** When a rule applies, or why it can't in an email. */
+function conditionOf(rule: Rule): ClassCondition | { reason: string } {
+  let when: ClassCondition = "always";
+  let hoverable = false;
+  for (const at of rule.at) {
+    // What follows `@media `, where it's one line, as `/^@media\s+(.*)$/i` reads it (which read the spaces again for each).
+    const media = /^@media\s+/i.exec(at);
+    const query = media && !/[\n\r\u2028\u2029]/.test(at.slice(media[0].length)) ? at.slice(media[0].length) : undefined;
+    if (query && /^\(\s*hover\s*:\s*hover\s*\)$/i.test(query.trim())) hoverable = true;
+    else if (query && widthOf(query) && when === "always") when = widthOf(query)!;
+    else return { reason: `it applies only for ${at}` };
+  }
+  if (rule.before.trim()) {
+    // Inside a variant's selector (`.group:hover &`), or a selector for others in it (`:where(& > *)`).
+    const inside = rule.before.split("(").length > rule.before.split(")").length;
+    return { reason: inside ? `it styles other elements (\`${rule.before}.${rule.token}${rule.after}\`)` : `it applies only for \`${rule.before}&${rule.after}\`` };
+  }
+  const after = rule.after.trim();
+  if (after === ":hover") return when === "always" ? "hover" : { reason: "Elements has no hover style for one screen size" };
+  if (after) return { reason: `it applies only for \`${after}\`` };
+  return hoverable ? { reason: "it applies only on hover" } : when;
+}
+
+/**
+ * Tailwind's compiler, as `loadTailwind` gives it: `build` takes classes and gives the stylesheet for all so far;
+ * `failures`, what its plugins' functions for a class's value threw (or gave that couldn't be read) while it built,
+ * kept from Tailwind (see load.ts's `guarded`), for the reader to take after each build.
+ */
+export interface Compiler {
+  build(candidates: string[]): string;
+  failures?: PluginFailure[];
+}
+
+/**
+ * A plugin's function that threw for a class (`error`), or gave CSS that couldn't be read (none): a utility's or a
+ * variant's (`variant`), by its name, with the keys of its values that give the value it was given (where one does),
+ * else that value (`value`: a class's arbitrary or bare value).
+ */
+export interface PluginFailure {
+  name: string;
+  variant?: boolean;
+  keys?: string[];
+  value?: string;
+  /** The modifier it was given (`/50`'s, as Tailwind resolved it), where it was given one, and the keys giving it. */
+  modifier?: string;
+  modifierKeys?: string[];
+  error?: unknown;
+}
+
+/** A class's variants and its utility (`hover:-boom-now/50!`: `hover`, `boom-now/50`), its important and negative marks aside. */
+function partsOf(token: string): [string[], string] {
+  const variants: string[] = [];
+  let depth = 0;
+  let from = 0;
+  for (let i = 0; i < token.length; i++) {
+    const c = token[i];
+    if (c === "\\") i++;
+    else if (c === "[" || c === "(") depth++;
+    else if (c === "]" || c === ")") depth--;
+    else if (c === ":" && !depth) {
+      variants.push(token.slice(from, i));
+      from = i + 1;
+    }
+  }
+  return [variants, token.slice(from).replace(/^!|!$/g, "").replace(/^-/, "")];
+}
+
+/** A class's value and its modifier (`blue/50`: `blue`, `50`), at its last `/` outside brackets. */
+function cut(given: string): [string, string | undefined] {
+  let depth = 0;
+  let at = -1;
+  for (let i = 0; i < given.length; i++) {
+    const c = given[i];
+    if (c === "\\") i++;
+    else if (c === "[" || c === "(") depth++;
+    else if (c === "]" || c === ")") depth--;
+    else if (c === "/" && !depth) at = i;
+  }
+  return at < 0 ? [given, undefined] : [given.slice(0, at), given.slice(at + 1)];
+}
+
+/** A value as Tailwind gives a plugin's function the class's: an arbitrary one's (`[…]`, `(--x)` as `var(--x)`), its type hint aside, `_` a space. */
+const decode = (part: string): string => {
+  const bracket = /^\[(?:[\w-]+:)?([\s\S]*)\]$/.exec(part)?.[1];
+  const paren = /^\((?:[\w-]+:)?(--[\s\S]*)\)$/.exec(part)?.[1];
+  return bracket !== undefined ? bracket.replace(/_/g, " ") : paren !== undefined ? `var(${paren})` : part;
+};
+
+/** Whether two values are the same but for whitespace (Tailwind writes spaces in a `calc()` around its operators). */
+const same = (a: string, b: string) => a.replace(/\s+/g, "") === b.replace(/\s+/g, "");
+
+/**
+ * Whether a variant or utility of a class (`boom-now`, `boom-[x]`, `boom`) is the one a failure was for: by its name,
+ * its value (by its key, or as given) and its modifier (`loose`: by its name, any value).
+ */
+function named(part: string, { name, keys, value, modifier, modifierKeys }: PluginFailure, loose?: boolean): boolean {
+  if (part === name) return loose || ((!keys || keys.includes("DEFAULT")) && modifier === undefined);
+  // (Tailwind reads a value right after `@`, `@foo`, as after a name and a dash.)
+  const start = name === "@" ? "@" : name + "-";
+  if (!part.startsWith(start)) return false;
+  if (loose) return true;
+  const given = part.slice(start.length);
+  const [bare, mod] = cut(given);
+  // (A fraction's `/` is its value's, `w-1/2`: its key is all of it.)
+  if (mod !== undefined && modifier === undefined && keys?.includes(given)) return true;
+  if (mod === undefined ? modifier !== undefined : modifier === undefined || !(modifierKeys?.includes(mod) || same(decode(mod), modifier))) return false;
+  if (keys?.includes(bare)) return true;
+  return value === undefined ? !keys : same(decode(bare), value);
+}
+
+/** A variant and the variants inside it (`group-vboom-now` holds `vboom-now`), as Tailwind's compound variants hold them. */
+function* inner(variant: string): Generator<string> {
+  for (let part = variant; ; part = part.replace(/^(group|peer|not|in|has)-/, "")) {
+    yield part;
+    if (!/^(group|peer|not|in|has)-/.test(part)) return;
+  }
+}
+
+/** Whether a class is one a plugin's failure was for: by its utility, or a variant's by its variants (`loose`: see named). */
+const owns = (token: string, failure: PluginFailure, loose?: boolean) => {
+  const [variants, utility] = partsOf(token);
+  return failure.variant ? variants.some((v) => [...inner(v)].some((part) => named(part, failure, loose))) : named(utility, failure, loose);
+};
+
+/**
+ * A class string's declarations, read with a compiler; `prepare` builds the classes of one it hasn't built, at once,
+ * without reading them (a render's, before they're read one component at a time: see declarationReader).
+ */
+export interface DeclarationReader {
+  (className: string, scope?: ReadScope): ClassDeclarations;
+  prepare(className: string, scope?: ReadScope): void;
+  /** Where a class can't be read till a fresh compiler is ready (see declarationReader): when it is. */
+  ready?(): Promise<void> | undefined;
+}
+
+/**
+ * What one render (or one class string) read: what a plugin's function threw (or gave that couldn't be read) while a
+ * build of its classes ran that no class of the build was found for (see declarationReader's `blame`), with the classes
+ * of that build that could have been why. It fails where the render reads one of them, in that render only: kept off
+ * the compiler, whose classes other renders read.
+ */
+export interface ReadScope {
+  strays: Array<{ tokens: Set<string>; error: unknown }>;
+}
+
+/**
+ * The classes a compiler builds before a fresh one takes over. Tailwind's keeps every class it has built, and each new
+ * one builds and reads again the stylesheet of them all: about 1 ms per 300 classes (7 ms at 2,000), and memory that
+ * grows with each, as classes made from data (`w-[123px]`) keep coming. An app's own classes, hundreds to a couple of
+ * thousand, don't get there.
+ */
+export const CLASSES = 2000;
+
+/**
+ * The characters of the different classes a render reads, and a compiler builds before a fresh one takes over: each
+ * build is the stylesheet of every class built so far, so their length is a cost on every build after them too
+ * (2,000 classes of 512 characters made each later build take 0.1 s, and a process 300 MB). An app's own come to a
+ * few kilobytes.
+ */
+export const CHARACTERS = 64 * 1024;
+export const COMPILED = 4 * CHARACTERS;
+
+/** How many times what a compiler takes (CLASSES, COMPILED) it builds while no fresh one is ready (see FULL). */
+export const CEILING = 4;
+
+/**
+ * Why a class isn't read: a render (or a class string) reads its first CLASSES different classes, CHARACTERS of them,
+ * only (see capped).
+ */
+export const OVER = `it's past the first ${CLASSES} different classes of the render (or class string), or ${CHARACTERS} characters of them, all one reads`;
+
+/**
+ * A reader of one render's classes (or one class string's): the first CLASSES different classes it's given, CHARACTERS
+ * of them, are read, by `read`; the others aren't built or read, but listed with OVER (`first`: the first a read left
+ * out, since it was last cleared). Classes made from data (a Markdown's, thousands in one attribute) can't take more
+ * memory or time than that, as each class Tailwind builds takes memory while it builds them, and time in each build
+ * after it; an app's own, hundreds, don't get there. A class past CLASS_LIMITS is never given to Tailwind, but listed
+ * with its reason (`beyond`: the first a read left out so, since it was last cleared).
+ */
+export function capped(read: DeclarationReader, scope: ReadScope = { strays: [] }): DeclarationReader & { first?: string; said?: boolean; beyond?: string; told?: boolean } {
+  const names = new Set<string>();
+  let characters = 0;
+  const admit = (className: string) => {
+    const kept: string[] = [];
+    const left: string[] = [];
+    const past: string[] = [];
+    for (const token of String(className).split(/\s+/)) {
+      if (!token) continue;
+      if (names.has(token)) kept.push(token);
+      else if (beyond(token)) past.push(token);
+      else if (names.size < CLASSES && characters + token.length <= CHARACTERS) {
+        names.add(token);
+        characters += token.length;
+        kept.push(token);
+      } else left.push(token);
+    }
+    return [kept, left, past];
+  };
+  const reader = Object.assign(
+    (className: string): ClassDeclarations => {
+      const [kept, left, past] = admit(className);
+      const found = read(kept.join(" "), scope);
+      if (!left.length && !past.length) return found;
+      if (left.length) reader.first ??= left[0];
+      if (past.length) reader.beyond ??= past[0];
+      const ignored = [...new Set(past)].map((className) => ({ className, reason: beyond(className)! }));
+      return { ...found, ignored: [...found.ignored, ...ignored, ...[...new Set(left)].map((className) => ({ className, reason: OVER }))] };
+    },
+    { prepare: (className: string) => read.prepare(admit(className)[0].join(" "), scope) } as { prepare(className: string): void; first?: string; said?: boolean; beyond?: string; told?: boolean }
+  );
+  return reader;
+}
+
+const empty = (): Sheet => ({ rules: [], vars: new Map(), initial: new Map(), clean: true });
+
+/** Why a class isn't read: Tailwind's stylesheet of it couldn't be read as written (see `readable`). */
+const UNREADABLE = "it isn't a class Tailwind can read here";
+
+/** Why a class isn't read: Tailwind doesn't have it. */
+const UNKNOWN = "Tailwind has no such class";
+
+/**
+ * The declaration a plugin's `@apply` is given to Tailwind as (its classes URL-encoded: see guard.ts), and how deep
+ * classes applying classes are read. Tailwind's compiler throws for an `@apply` of a class or a variant it doesn't have,
+ * or of the class itself, and then for every build after it; here such an `@apply` fails where its class is read.
+ */
+export const APPLY = "--unlayer-apply-";
+const APPLIES = 8;
+
+/** Why a class isn't read yet: built with one that didn't read cleanly, or after it, so Tailwind is compiling again. */
+export const WAITING = "it's read once Tailwind has compiled again, after a class it couldn't read";
+
+/** How the reason a class isn't read starts where Tailwind can't compile again (see RENEWALS). */
+export const STUCK = "Tailwind couldn't compile again";
+
+/**
+ * Why a class isn't read yet: its compiler has built twice the classes one takes (CLASSES, COMPILED), and no fresh one is
+ * ready. A handle keeps one ready (compiled with it), which takes over at once; the next is compiled in the background,
+ * which a synchronous loop of renders doesn't let run: past twice what a compiler takes, each build would cost more than
+ * the last (Tailwind builds every class it has built again) and memory would grow with each, so new classes aren't
+ * built till the fresh one is ready.
+ */
+export const FULL = `Tailwind has built ${CEILING * CLASSES} different classes (or ${(CEILING * COMPILED) / 1024} KB of them) since its last fresh compiler, which is compiled once the app yields: yield between synchronous renders (\`await new Promise((resolve) => setImmediate(resolve))\`), or use the async renderers ("@unlayer/react-elements/tailwind"), which wait for it`;
+
+/**
+ * Fresh compilers that can fail in a row. One compiles the config this one was compiled from, so one that fails (out of
+ * memory, a plugin that throws now) is asked for again, by the next read that needs one: no timer, so nothing is
+ * compiled while no class needs it and nothing keeps the process running. Past three in a row, it's taken to fail for
+ * good: the reader keeps its compiler, and after a build that didn't read cleanly reads no new class (and says so).
+ */
+const RENEWALS = 3;
+
+/**
+ * The classes of a build that didn't read cleanly that are built alone on one compiler, one at a time, to find the one
+ * that was why (see declarationReader): past them, the others wait for a fresh compiler, on which as many more are
+ * built alone. Each build is Tailwind's whole stylesheet again, so the many classes of one build (a render's) can't
+ * each be built alone on one compiler.
+ */
+export const SUSPECTS = 100;
+
+/**
+ * The builds one read takes, at most, to find the classes a build threw for where the compiler builds on after it
+ * (see declarationReader's `isolate`): a class Tailwind can't parse in a render's 2,000 is found in about 25.
+ */
+const HALVES = 64;
+
+/**
+ * Whether Tailwind can build a class without changing how what it builds after it reads: its brackets, parentheses,
+ * braces and quotes closed (`\` escaping the character after it, as in CSS), no comment in it, no escape of a code
+ * point past U+10FFFF (`\23ff00`, which Tailwind's build throws for where it decodes it). Tailwind's compiler keeps
+ * every class it builds, so one that isn't (`[color:x(]`) is never built.
+ */
+export function readable(token: string): boolean {
+  if (/\/\*|\*\//.test(token)) return false;
+  const open: string[] = [];
+  for (let i = 0; i < token.length; i++) {
+    const c = token[i];
+    const last = open[open.length - 1];
+    if (c === "\\" && parseInt(/^[\da-f]{0,6}/i.exec(token.slice(i + 1, i + 7))![0] || "0", 16) > 0x10ffff) return false;
+    if (c === "\\") i++;
+    else if (last === '"' || last === "'") c === last && open.pop();
+    else if (c === '"' || c === "'") open.push(c);
+    else if (c === "(" || c === "[" || c === "{") open.push({ "(": ")", "[": "]", "{": "}" }[c]);
+    else if ((c === ")" || c === "]" || c === "}") && open.pop() !== c) return false;
+  }
+  return !open.length && namedProperty(token);
+}
+
+/**
+ * Whether an arbitrary property's name (`[mask-type:luminance]`, after its variants) is one, a CSS identifier: Tailwind
+ * writes it as given, so one that isn't (`[a(:b)]`) is CSS its compiler can't read, and every render on that compiler
+ * after it waits for a fresh one. A class that isn't an arbitrary property is one.
+ */
+function namedProperty(token: string): boolean {
+  // Its utility: after the variants' `:`s, outside brackets, parentheses and quotes.
+  let depth = 0;
+  let quote = "";
+  let start = 0;
+  for (let i = 0; i < token.length; i++) {
+    const c = token[i];
+    if (c === "\\") i++;
+    else if (quote) c === quote && (quote = "");
+    else if (c === '"' || c === "'") quote = c;
+    else if (c === "(" || c === "[" || c === "{") depth++;
+    else if (c === ")" || c === "]" || c === "}") depth--;
+    else if (c === ":" && depth === 0) start = i + 1;
+  }
+  const utility = token.slice(start).replace(/^!|!$/g, "");
+  if (!utility.startsWith("[")) return true;
+  const name = /^\[([^:]*):/.exec(utility)?.[1];
+  return name === undefined || /^(--[\w-]+|-?[a-zA-Z][\w-]*)$/.test(name);
+}
+
+/**
+ * How much of a class Tailwind's compiler is given. Its build takes time growing faster than a class's size with some
+ * of their shapes, and keeps every class it built, building them all again with each new one: each `&` of an arbitrary
+ * variant is the whole selector again (100 KB of `[&:hover&:hover…]:` made a stylesheet longer than a string can be,
+ * which failed that build and every build after it, other renders' too; 20 KB took 0.6 s on every build after it),
+ * chained compound variants (`group-group-…-hover:`) take time cubic in their number (8 KB 3 s, 20 KB 40 s), and
+ * variants or brackets thousands deep overflow its stack, as `max-sm:` 3,000 times did. Within these a class builds in
+ * about a millisecond whatever its shape, and an app's own classes are far within them (a radial gradient's
+ * arbitrary value is about 80 characters). A class past one isn't given to Tailwind: it's left out and said, once a
+ * render (see capped).
+ */
+export const CLASS_LIMITS = { characters: 512, variants: 8, ampersands: 4, depth: 8 };
+
+/** How the reason a class past CLASS_LIMITS isn't read starts. */
+export const BEYOND = "Tailwind isn't given";
+
+/** Variants that take another variant (`group-hover`, `not-group-hover`): each counts as one of a class's variants. */
+const COMPOUND = /^(?:group|peer|not|in|has)-/;
+
+/** Why a class is past CLASS_LIMITS, or undefined where it isn't. */
+export function beyond(token: string): string | undefined {
+  const { characters, variants, ampersands, depth } = CLASS_LIMITS;
+  if (token.length > characters) return `${BEYOND} a class of more than ${characters} characters`;
+  let deepest = 0;
+  const open: string[] = [];
+  for (let i = 0; i < token.length; i++) {
+    const c = token[i];
+    const last = open[open.length - 1];
+    if (c === "\\") i++;
+    else if (last === '"' || last === "'") c === last && open.pop();
+    else if (c === '"' || c === "'") open.push(c);
+    else if (c === "(" || c === "[" || c === "{") deepest = Math.max(deepest, open.push(c));
+    else if (c === ")" || c === "]" || c === "}") open.pop();
+  }
+  if (deepest > depth) return `${BEYOND} brackets nested more than ${depth} deep`;
+  let count = 0;
+  let amps = 0;
+  for (let variant of partsOf(token)[0]) {
+    count++;
+    for (let m = COMPOUND.exec(variant); m; m = COMPOUND.exec(variant)) {
+      variant = variant.slice(m[0].length);
+      count++;
+    }
+    for (const c of variant) if (c === "&") amps++;
+  }
+  if (count > variants) return `${BEYOND} a class of more than ${variants} variants`;
+  if (amps > ampersands) return `${BEYOND} more than ${ampersands} \`&\` in a class's variants`;
+  return undefined;
+}
+
+/**
+ * Reads classes with a compiler: each class built once, its rules read back from the latest stylesheet. Past `limit`
+ * classes (or COMPILED characters of them), a fresh compiler takes over, with none built: a class string reads the same
+ * whatever its compiler built before. One is kept ready (`ready`, compiled with the handle), so it takes over at once,
+ * synchronous renders too, where classes are next built; then another is asked for from `renew` (Tailwind compiles
+ * asynchronously), the spare once it's ready. A synchronous loop of renders never lets it compile: there, past twice
+ * `limit` with no fresh compiler ready, no class is built (FULL), as each build would cost more than the last and
+ * memory would grow; a render that needs one fails, saying to yield between renders or use the async renderers (see
+ * load.ts). A class that could change how the stylesheet reads isn't built (`readable`); a build whose stylesheet still
+ * doesn't read cleanly is left out (its classes said, the classes before it read as they did), and a fresh compiler
+ * takes over, on which each of that build's classes is built alone first (SUSPECTS of them on one compiler: the others
+ * wait for the next), where a class string holding it is read: the one that was why is never built again, and only it.
+ * What a plugin's function for a class throws, or gives that can't be read, is kept from the build (see guard.ts) and
+ * blamed on its class, thrown where that's read (or the class left out): the compiler stays clean, for this render's
+ * other classes and other renders'. A build that throws all the same (not a plugin's function) where Tailwind keeps its
+ * classes (it throws again on the next build with a new one) is one that didn't read cleanly; where it doesn't, the
+ * class that threw is found and refused (see isolate). While a fresh compiler is wanted and compiled, `ready` gives when
+ * it's ready, for the async renderers to wait for; a synchronous render can't, and fails where it needs a class built
+ * (see load.ts).
+ *
+ * Each build is Tailwind's whole stylesheet again (it keeps every class it built), so classes are best built many at
+ * once: `prepare` builds a render's, all the classes its components and their markup are given, before they're read
+ * one component at a time (which would take the square of their number: seconds for a few thousand).
+ *
+ * After a build that didn't read cleanly, which `readable` refuses every known cause of, with no fresh compiler ready,
+ * new classes aren't read till one is (`WAITING`, said): a render that meets one before reads it as left out, and a
+ * later one reads it. That can't be made synchronous: Tailwind compiles only asynchronously, and nothing more can be
+ * built on a compiler whose stylesheet doesn't read cleanly (it keeps every class built). Reading on past the rule that
+ * broke it, from Tailwind's rule boundaries, would trust how Tailwind prints CSS where the reader reads it as CSS does
+ * (what keeps one class from changing how the next reads).
+ */
+export function declarationReader(compiler: Compiler, renew?: () => Promise<Compiler>, limit = CLASSES, ready?: Compiler): DeclarationReader {
+  let seen = new Set<string>();
+  // The characters of the classes built (see COMPILED).
+  let built = 0;
+  let sheet = empty();
+  let byToken = new Map<string, Rule[]>();
+  let renewing = false;
+  // Whether the compiler built a stylesheet that didn't read cleanly: nothing more is built on it.
+  let dirty = false;
+  const suspects = new Set<string>();
+  // Only classes built alone and seen to fail.
+  const refused = new Set<string>();
+  // Suspects built alone on this compiler (see SUSPECTS).
+  let alone = 0;
+  // What the last build threw, thrown once the build is taken as one that didn't read cleanly; or what a plugin threw
+  // for a class of it that no class of it was found for (see blame).
+  let thrown: { error: unknown } | undefined;
+  // The classes this compiler built that a plugin's function threw for (their error, thrown where they're read) or gave
+  // CSS that couldn't be read for (undefined): built again on a fresh compiler, as its plugin is called again there.
+  let failed = new Map<string, unknown>();
+  // Strays of the builds of the read under way (see blame), for its scope.
+  let strays: ReadScope["strays"] = [];
+  // The fresh compiler being compiled (see `ready`), and whether a class waits for it.
+  let pending: Promise<void> | undefined;
+  let waiting = false;
+  // A fresh compiler ready to take over (one compiled with the handle, then each asked for after one takes over).
+  let spare = ready;
+  // Fresh compilers that failed in a row (see RENEWALS), and the last one's error.
+  let failures = 0;
+  let failure = "";
+  // Builds left in one read to find, by halves, the classes a build threw for (see isolate), and checks so far.
+  let halves = 0;
+  let checks = 0;
+  /**
+   * Whether the compiler builds on after a build threw: where Tailwind kept the class it threw for, it throws again on
+   * every build with a new class (this one, a custom property of nothing, new each time); where it didn't (a class it
+   * couldn't parse), it builds on.
+   */
+  const sound = () => {
+    halves--;
+    try {
+      return parseSheet(compiler.build([`[--unlayer-check-${checks++}:0]`])).clean;
+    } catch {
+      return false;
+    }
+  };
+  /**
+   * The classes of a build that threw on a compiler that builds on (see sound), by halves: each half built again, one
+   * that throws halved again, a class alone that throws refused for good. Past HALVES builds in one read, the classes
+   * left are suspects (see need) and what threw is thrown, as where the compiler doesn't build on.
+   */
+  const isolate = (tokens: string[], error: unknown): boolean => {
+    if (tokens.length === 1) return !!refused.add(tokens[0]);
+    if (halves <= 0) {
+      thrown = { error };
+      return false;
+    }
+    const half = tokens.length >> 1;
+    for (const part of [tokens.slice(0, half), tokens.slice(half)]) {
+      if (dirty || thrown) break;
+      halves--;
+      if (!build(part)) part.forEach((token) => !seen.has(token) && !refused.has(token) && suspects.add(token));
+    }
+    return !dirty && !thrown;
+  };
+  // Whether this compiler is past what one takes (CLASSES, COMPILED), and twice that (see FULL).
+  const due = () => seen.size > limit || built > COMPILED;
+  const full = () => seen.size > CEILING * limit || built > CEILING * COMPILED;
+  /** A fresh compiler takes over: nothing built on it, the classes refused stay refused. */
+  const swap = (next: Compiler) => {
+    compiler = next;
+    seen = new Set();
+    built = 0;
+    failed = new Map();
+    sheet = empty();
+    byToken = new Map();
+    dirty = waiting = false;
+    alone = 0;
+  };
+  /**
+   * A fresh compiler asked for, once at a time (one that fails leaves this one in use): where this one is to be taken
+   * over by then (it didn't read cleanly, or classes wait, or it's past what it takes), it takes over, and another is
+   * asked for; else it's the spare.
+   */
+  const ask = () => {
+    if (!renew || renewing || failures >= RENEWALS) return;
+    renewing = true;
+    pending = renew().then(
+      (next) => {
+        renewing = false;
+        failures = 0;
+        if (dirty || waiting || due()) {
+          swap(next);
+          ask();
+        } else spare = next;
+      },
+      (error) => {
+        renewing = false;
+        failures++;
+        failure = error instanceof Error ? error.message : String(error);
+      }
+    );
+  };
+  const fresh = () => void (spare || ask());
+  const build = (tokens: string[]): boolean => {
+    let css: string;
+    let plugins: PluginFailure[] | undefined;
+    try {
+      css = compiler.build(tokens);
+    } catch (error) {
+      // Where Tailwind didn't keep what it threw for, the class that threw is found (see isolate); where it did, it
+      // builds those classes again with the next new one, throwing again.
+      if (halves > 0 && sound()) return isolate(tokens, error);
+      thrown = { error };
+      return !(dirty = true);
+    } finally {
+      plugins = compiler.failures?.splice(0);
+    }
+    const next = parseSheet(css);
+    if (!next.clean) return !(dirty = true);
+    // The stylesheet holds every class built so far, in Tailwind's order: read again, places stay comparable.
+    sheet = next;
+    for (const token of tokens) {
+      seen.add(token);
+      built += token.length;
+    }
+    byToken = new Map();
+    for (const rule of sheet.rules) {
+      const rules = byToken.get(rule.token);
+      if (rules) rules.push(rule);
+      else byToken.set(rule.token, [rule]);
+    }
+    if (plugins?.length) blame(tokens, plugins);
+    if (due()) fresh();
+    return true;
+  };
+  // What plugins' functions threw while a build built `tokens` (kept from Tailwind, which built the class's CSS without
+  // what the function gave: see guard.ts), on the classes of it it was for, each thrown where it's read, in every render
+  // that reads it (whatever another utility gives the class): those of the utility or variant of that name, value and
+  // modifier. One no class of the build was found for so is a stray (see ReadScope), for the render that built them, on
+  // the build's classes of that name, else those with no CSS, else all its classes: not kept, as the build may hold
+  // others' classes (an app's own `brand-blue`, where a user's `brand-(--x)` is the one).
+  const blame = (tokens: string[], plugins: PluginFailure[]) => {
+    for (const failure of plugins) {
+      const own = tokens.filter((token) => owns(token, failure));
+      if (own.length) for (const token of own) failed.set(token, failure.error);
+      else {
+        const loose = tokens.filter((token) => owns(token, failure, true));
+        const plain = tokens.filter((token) => !byToken.has(token));
+        strays.push({ tokens: new Set(loose.length ? loose : plain.length ? plain : tokens), error: failure.error });
+      }
+    }
+  };
+  const tokensOf = (className: string) => [...new Set(String(className).split(/\s+/).filter(Boolean))];
+  // The classes not built yet, built: a suspect alone (past SUSPECTS on this compiler, on the next one), where a class
+  // string is read (not prepared: what building it throws comes out where it's read), the rest at once. What a build
+  // threw is thrown after.
+  const need = (tokens: string[], prepare?: boolean) => {
+    const unbuilt = () => tokens.filter((token) => !seen.has(token) && !refused.has(token) && readable(token) && !beyond(token));
+    let unread = unbuilt();
+    if (!unread.length) return;
+    // The spare takes over where this compiler is to be taken over, synchronously, and another is asked for: only where
+    // classes are built (a render's components read what it prepared on the compiler it prepared them on).
+    if (spare && (dirty || waiting || due())) {
+      swap(spare);
+      spare = undefined;
+      ask();
+      unread = unbuilt();
+    }
+    // Past CEILING times what a compiler takes, with no fresh one ready, nothing more is built (see FULL), unless none
+    // can come (fresh ones failed: see RENEWALS).
+    if (!dirty && full() && renew && failures < RENEWALS) {
+      waiting = true;
+      ask();
+      return;
+    }
+    halves = HALVES;
+    let later = false;
+    for (const token of unread) {
+      if (prepare || dirty || !suspects.has(token)) continue;
+      if (alone >= SUSPECTS) later = true;
+      else if ((suspects.delete(token), alone++, !build([token]))) refused.add(token);
+    }
+    const rest = unread.filter((token) => !seen.has(token) && !refused.has(token) && !suspects.has(token));
+    if (rest.length && !dirty && !build(rest)) rest.forEach((token) => suspects.add(token));
+    if (later) waiting = true;
+    if (dirty || later) fresh();
+    if (thrown) {
+      const { error } = thrown;
+      thrown = undefined;
+      throw error;
+    }
+  };
+  // The classes a class's plugin applies (`@apply`, see APPLY), read as its own declarations, for `when`.
+  const applying = new Set<string>();
+  const apply = (token: string, classes: string, when: ClassCondition, important: boolean, leave: (className: string, reason: string) => void, scope: ReadScope): ClassDeclaration[] => {
+    const names = classes.split(/\s+/).filter(Boolean);
+    const own = names.filter((name) => name !== "!important");
+    if (applying.has(token)) throw new Error(`<Tailwind> can't read \`${token}\`: it applies itself (\`@apply\`), a circular dependency`);
+    if (applying.size >= APPLIES || own.length > SUSPECTS) throw new Error(`<Tailwind> can't read \`${token}\`: it applies (\`@apply\`) classes more than ${APPLIES} deep, or more than ${SUSPECTS} at once`);
+    applying.add(token);
+    let found: ClassDeclarations;
+    try {
+      found = read(own.join(" "), scope);
+    } finally {
+      applying.delete(token);
+    }
+    for (const { className, reason } of found.ignored) {
+      if (reason === UNKNOWN) throw new Error(`<Tailwind> can't read \`${token}\`: it applies (\`@apply\`) \`${className}\`, a class Tailwind doesn't have`);
+      leave(token, reason === WAITING || reason.startsWith(STUCK) ? reason : `its \`@apply\` of \`${className}\` isn't read: ${reason}`);
+    }
+    const declarations: ClassDeclaration[] = [];
+    for (const d of found.declarations) {
+      const at = when === "always" ? d.when : d.when === "always" || d.when === when ? when : undefined;
+      if (at) declarations.push({ ...d, className: token, when: at, important: d.important || important || names.includes("!important") });
+      else leave(token, `its \`@apply\` of \`${d.className}\` applies for ${d.when} within ${when}, which Elements has no setting for`);
+    }
+    return declarations;
+  };
+  const read = (className: string, scope: ReadScope = { strays: [] }): ClassDeclarations => {
+    const tokens = tokensOf(className);
+    try {
+      need(tokens);
+    } finally {
+      scope.strays.push(...strays.splice(0));
+    }
+    const ignored: ClassDeclarations["ignored"] = [];
+    // (Each class once, with the first reason it isn't read.)
+    const left = new Set<string>();
+    const leave = (className: string, reason: string) => void (!left.has(className) && left.add(className) && ignored.push({ className, reason }));
+    const applied: Array<{ rule: Rule; when: ClassCondition }> = [];
+    for (const token of tokens) {
+      // One a plugin's function failed for: its error, or a class Tailwind can't read here; in this render, one of a
+      // build a stray failure was in.
+      const stray = scope.strays.find((stray) => stray.tokens.has(token));
+      if (failed.has(token) || stray) {
+        const error = stray ? stray.error : failed.get(token);
+        if (error !== undefined) throw error;
+        leave(token, UNREADABLE);
+        continue;
+      }
+      // One not built on this compiler: refused, or waiting for a fresh one (see declarationReader).
+      if (!seen.has(token)) {
+        leave(token, beyond(token) ?? (refused.has(token) || !readable(token) || !renew ? UNREADABLE : failures >= RENEWALS ? `${STUCK} after a class it couldn't read (${failure})` : !dirty && full() ? FULL : WAITING));
+        continue;
+      }
+      const rules = byToken.get(token);
+      if (!rules?.length) leave(token, UNKNOWN);
+      for (const rule of rules ?? []) {
+        const when = conditionOf(rule);
+        if (typeof when === "string") applied.push({ rule, when });
+        else leave(token, when.reason);
+      }
+    }
+    applied.sort((a, b) => a.rule.order - b.rule.order);
+    // The element's own variables (`--tw-leading`), by condition: a phone rule's apply on phones only.
+    const own: Record<ClassCondition, Map<string, string>> = { always: new Map(), phone: new Map(), desktop: new Map(), hover: new Map() };
+    for (const { rule, when } of applied) for (const d of rule.declarations) if (d.property.startsWith("--")) own[when].set(d.property, d.value);
+    const declarations: ClassDeclaration[] = [];
+    for (const { rule, when } of applied) {
+      for (const d of rule.declarations) {
+        if (d.property.startsWith(APPLY)) declarations.push(...apply(rule.token, decodeURIComponent(d.value), when, d.important, leave, scope));
+        if (d.property.startsWith("--")) continue;
+        const value = emailValue(d.value, (name) => own[when].get(name) ?? own.always.get(name) ?? sheet.vars.get(name) ?? sheet.initial.get(name));
+        if (value === undefined || value === TOO_LONG) leave(rule.token, value === TOO_LONG ? `\`${d.property}\`'s variables come to more than ${MAX_VALUE} characters` : `\`${d.property}\` uses a variable Tailwind doesn't set`);
+        else declarations.push({ className: rule.token, property: d.property, value, when, important: d.important });
+      }
+    }
+    // `!important` wins over the rest, wherever it is.
+    return { declarations: [...declarations.filter((d) => !d.important), ...declarations.filter((d) => d.important)], ignored };
+  };
+  const prepare = (className: string, scope: ReadScope = { strays: [] }) => {
+    try {
+      need(tokensOf(className), true);
+    } finally {
+      scope.strays.push(...strays.splice(0));
+    }
+  };
+  // (The async renderers wait for a fresh compiler where this one is past what it takes too, so they never grow it.)
+  return Object.assign(read, { prepare, ready: () => ((dirty || waiting || due()) && renewing ? pending : undefined) });
+}
diff --git a/packages/react/src/tailwind/guard.ts b/packages/react/src/tailwind/guard.ts
new file mode 100644
index 00000000..c432ee2c
--- /dev/null
+++ b/packages/react/src/tailwind/guard.ts
@@ -0,0 +1,124 @@
+/**
+ * A config's plugins kept from throwing into Tailwind's compiler as it builds. Tailwind keeps every class it was given
+ * and builds them all again with the next new one, so a plugin's function that throws for one class (a class from
+ * data) would fail every build after it: every render's with that handle, other tenants' too. What such a function
+ * (a utility's or component's for a value, `matchUtilities` and `matchComponents`; a variant's, `matchVariant`) throws
+ * while a build runs, or gives that the compiler would throw for (see `compilable` and `selectors`), is logged
+ * instead, and the class gives no CSS; the reader (declarations.ts) fails the component whose class it was, where it's
+ * read. What can't be read as CSS (a quote or a bracket left open, a comment: see `readable`) is logged too, and the
+ * class left out; nothing (`undefined`, `null` or `false`, as a function returns for a value it doesn't take) is no
+ * CSS, the class one Tailwind doesn't have, as Tailwind 3 took it.
+ */
+import { APPLY, readable, type PluginFailure } from "./declarations";
+
+type Api = Record<string, any>;
+type Fn = (this: unknown, ...args: any[]) => unknown;
+
+/** The keys of `map` (a function's `values` or `modifiers`) that give `value`. */
+const keysIn = (map: unknown, value: unknown): string[] => (map && typeof map === "object" ? Object.keys(map).filter((key) => (map as Record<string, unknown>)[key] === value) : []);
+
+/**
+ * What a function was given, to tie its failure to its class: its value (as Tailwind gave it: an arbitrary one
+ * decoded, `(--x)` as `var(--x)`) and the keys of its `values` that give it, and its modifier, with the keys of its
+ * `modifiers` that give that.
+ */
+function given(values: unknown, modifiers: unknown, value: unknown, extra: unknown): Pick<PluginFailure, "keys" | "value" | "modifier" | "modifierKeys"> {
+  const keys = keysIn(values, value);
+  const modifier = (extra as { modifier?: unknown } | null | undefined)?.modifier;
+  return { ...(keys.length ? { keys } : {}), ...(typeof value === "string" ? { value } : {}), ...(typeof modifier === "string" ? { modifier, modifierKeys: keysIn(modifiers, modifier) } : {}) };
+}
+
+/** Whether what a plugin's function gave reads as CSS: each string in it, a key or a value, as `readable` takes a class. */
+const clean = (out: unknown, depth = 0): boolean =>
+  typeof out === "string" ? readable(out) : out && typeof out === "object" && depth < 32 ? Object.entries(out).every(([key, value]) => readable(key) && clean(value, depth + 1)) : true;
+
+/** What a plugin's function gave, for an error that says it: its type, or the text of what it is. */
+const what = (out: unknown): string => (Array.isArray(out) ? "a list" : out && typeof out === "object" ? "an object" : `\`${typeof out === "string" ? JSON.stringify(out) : String(out)}\``);
+
+/**
+ * What a utility's or component's function gave, as Tailwind's compiler can take it: each `@apply` in it an APPLY
+ * declaration of its classes, which the reader applies (Tailwind's compiler throws for one of a class or a variant it
+ * doesn't have, or of the class itself, and then for every build after it). It throws (an Error saying so) where the
+ * compiler would: for a list holding nothing (`[null]`), and for what nests more than 32 deep.
+ */
+function compilable(out: unknown, name: string): unknown {
+  // (CSS is an object, or a list of them: Tailwind reads a string, a number or a function as no CSS, or as characters.)
+  const css = (item: unknown) => !!item && typeof item === "object";
+  const bad = Array.isArray(out) ? out.find((item) => !css(item)) : out;
+  if (!css(out) || (Array.isArray(out) && out.some((item) => !css(item)))) throw new Error(`<Tailwind>: the plugin's \`${name}\` function gives ${Array.isArray(out) ? `a list holding ${what(bad)}` : what(out)}, not CSS (an object, or a list of them)`);
+  let applies = 0;
+  const walk = (value: unknown, depth: number): unknown => {
+    if (depth > 32) throw new Error(`<Tailwind>: the plugin's \`${name}\` function gives CSS nested more than 32 deep`);
+    if (Array.isArray(value)) {
+      if (value.some((item) => item == null)) throw new Error(`<Tailwind>: the plugin's \`${name}\` function gives a list holding ${what(value.find((item) => item == null))}, which Tailwind can't compile`);
+      return value.map((item) => walk(item, depth + 1));
+    }
+    if (!value || typeof value !== "object") return value;
+    return Object.fromEntries(
+      Object.entries(value).map(([key, inner]) =>
+        /^@apply(\s|$)/.test(key) ? [`${APPLY}${applies++}`, applied(key.slice(6).trim(), name)] : [key, walk(inner, depth + 1)]
+      )
+    );
+  };
+  return walk(out, 0);
+}
+
+/** An `@apply`'s classes, as an APPLY declaration's value (URL-encoded: CSS reads it as written). */
+function applied(classes: string, name: string): string {
+  if (!classes) throw new Error(`<Tailwind>: the plugin's \`${name}\` function gives an \`@apply\` with no class in it`);
+  return encodeURIComponent(classes).replace(/[!'()*~]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+}
+
+/** What a variant's function gave, where Tailwind's compiler can take it: a selector, or a list of them (it throws otherwise). */
+function selectors(out: unknown, name: string): unknown {
+  if (typeof out === "string" || (Array.isArray(out) && out.every((item) => typeof item === "string"))) return out;
+  throw new Error(`<Tailwind>: the plugin's \`${name}\` variant gives ${what(out)}, not a selector or a list of them`);
+}
+
+/**
+ * `config` with its plugins' (and its presets' plugins') functions for a class kept from throwing into a build
+ * (`building()`): each failure goes to `log`, the class giving no CSS (a utility nothing, a variant no selector).
+ * Outside a build (Tailwind tries a variant's function as it registers it) they're called as they are.
+ */
+export function guarded<T>(config: T, log: PluginFailure[], building: () => boolean): T {
+  if (!config || typeof config !== "object") return config;
+  const guard = (fn: Fn, name: string, variant: boolean, options?: Api): Fn =>
+    function (value, extra) {
+      if (!building()) return fn.call(this, value, extra);
+      try {
+        const out = fn.call(this, value, extra);
+        if (out == null || out === false) return variant ? [] : {};
+        if (clean(out)) return variant ? selectors(out, name) : compilable(out, name);
+        log.push({ name, variant, ...given(options?.values, options?.modifiers, value, extra) });
+      } catch (error) {
+        log.push({ name, variant, ...given(options?.values, options?.modifiers, value, extra), error });
+      }
+      return variant ? [] : {};
+    };
+  const api = (given: Api): Api => {
+    const own = Object.create(given) as Api;
+    for (const method of ["matchUtilities", "matchComponents"])
+      if (typeof given[method] === "function")
+        own[method] = (fns: Record<string, unknown>, options?: Api) =>
+          given[method](Object.fromEntries(Object.entries(fns ?? {}).map(([name, fn]) => [name, typeof fn === "function" ? guard(fn as Fn, name, false, options) : fn])), options);
+    if (typeof given.matchVariant === "function") own.matchVariant = (name: string, fn: unknown, options?: Api) => given.matchVariant(name, typeof fn === "function" ? guard(fn as Fn, name, true, options) : fn, options);
+    return own;
+  };
+  const handler = (fn: unknown) => (typeof fn === "function" ? function (this: unknown, given: Api) { return fn.call(this, api(given)); } : fn);
+  const plugin = (p: any): unknown => {
+    // (Tailwind calls an options plugin, `plugin.withOptions`, for its handler, and takes `{ handler, config }`.)
+    if (typeof p === "function" && "__isOptionsFunction" in p)
+      return Object.assign((options?: unknown) => {
+        const made = p(options);
+        return made && typeof made === "object" ? { ...made, handler: handler(made.handler) } : made;
+      }, { __isOptionsFunction: true });
+    if (typeof p === "function") return handler(p);
+    return p && typeof p === "object" && "handler" in p ? { ...p, handler: handler(p.handler) } : p;
+  };
+  const { plugins, presets } = config as { plugins?: unknown; presets?: unknown };
+  return {
+    ...config,
+    ...(Array.isArray(plugins) ? { plugins: plugins.map(plugin) } : {}),
+    ...(Array.isArray(presets) ? { presets: presets.map((preset) => guarded(preset, log, building)) } : {}),
+  };
+}
diff --git a/packages/react/src/tailwind/html.ts b/packages/react/src/tailwind/html.ts
new file mode 100644
index 00000000..5f6e35c6
--- /dev/null
+++ b/packages/react/src/tailwind/html.ts
@@ -0,0 +1,218 @@
+/**
+ * Tailwind classes in markup (an Html block's `html`, a Paragraph's): each element's classes as its inline style,
+ * as email clients need them, with the same conversions as classes on components (hex colors, pixels). A class
+ * Tailwind doesn't know stays (your own stylesheet's); one Tailwind knows leaves the class attribute, inlined, or
+ * reported where it can't be (a phone or hover variant needs a stylesheet; so does whether the element shows, where
+ * a phone or breakpoint variant changes it). The markup is read as a browser reads it
+ * (src/utils/html-tags.ts), and only the class attributes and the styles they give are written again.
+ */
+import { BEYOND, OVER, type ClassCondition, type ClassDeclaration, type ClassDeclarations, type DeclarationReader } from "./declarations";
+import { commentEnd, rawTextEnd, readTag, type Attribute, type Tag } from "../utils/html-tags";
+import { markupValue } from "./written";
+
+// Logical sides as in a left-to-right document, and those a right-to-left one changes: email clients read only physical ones.
+const SIDES: Record<string, string[]> = { inline: ["left", "right"], block: ["top", "bottom"], "inline-start": ["left"], "inline-end": ["right"], "block-start": ["top"], "block-end": ["bottom"] };
+const CORNERS: Record<string, string> = { "start-start": "top-left", "start-end": "top-right", "end-end": "bottom-right", "end-start": "bottom-left" };
+const RTL_SIDES: Record<string, string[]> = { "inline-start": ["right"], "inline-end": ["left"] };
+const RTL_CORNERS: Record<string, string> = { "start-start": "top-right", "start-end": "top-left", "end-end": "bottom-left", "end-start": "bottom-right" };
+/** Elements without an end tag or content: no element after them is in them. */
+const VOID = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
+/** Elements whose text has no tags in it, to their end tag (`plaintext`: to the end). */
+const RAW_TEXT = /^(script|style|textarea|title|xmp|iframe|noembed|noframes|plaintext)$/;
+
+/** A class attribute's names: split where HTML splits them, the references a class name can hold read. */
+const NAMES = /[^\t\n\f\r ]+/g;
+const decode = (text: string) =>
+  text.replace(/&(?:#x([\da-f]+);?|#(\d+);?|(amp|lt|gt|quot|apos);)/gi, (whole, hex?: string, n?: string, name?: string) =>
+    name ? ({ amp: "&", lt: "<", gt: ">", quot: '"', apos: "'" } as Record<string, string>)[name.toLowerCase()] : String.fromCodePoint(Math.min(parseInt(hex ?? n!, hex ? 16 : 10), 0x10ffff)) || whole
+  );
+/** Text in a `"`-quoted value. */
+const escape = (text: string) => text.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+/** A value as written, in a `"`-quoted one (its references, which mean the same there, kept). */
+const requote = (attribute: Attribute) => (attribute.value ?? "").replace(/"/g, "&quot;");
+
+/** What shows or hides an element: not inline where a screen variant changes it (see `classes`). */
+const SHOWN = /^(display|visibility)$/;
+/** When a declaration that can't be inline applies. */
+const WHEN: Record<ClassCondition, string> = { always: "", phone: "on phones only", desktop: "above a screen width only", hover: "on hover" };
+
+/**
+ * A declaration's properties as email clients read them: logical sides as physical ones (`rtl`: on an element that
+ * reads right to left, where inline start is the right), `text-decoration-line` as `text-decoration`.
+ */
+function physical(property: string, rtl: boolean): string[] {
+  const side = /^(padding|margin|border)-(inline|block)(-start|-end)?(-width|-style|-color)?$/.exec(property);
+  const sides = side && side[2] + (side[3] ?? "");
+  if (side) return ((rtl && RTL_SIDES[sides!]) || SIDES[sides!]).map((s) => `${side[1]}-${s}${side[4] ?? ""}`);
+  const corner = /^border-(start|end)-(start|end)-radius$/.exec(property);
+  const at = corner && `${corner[1]}-${corner[2]}`;
+  if (corner) return [`border-${(rtl && RTL_CORNERS[at!]) || CORNERS[at!]}-radius`];
+  return [property === "text-decoration-line" ? "text-decoration" : property];
+}
+
+/**
+ * Each tag in `html` as a browser reads it, with where it starts (`lt`): comments, raw text (`<script>`, `<style>`,
+ * `<textarea>`, …) and what isn't a tag passed over, up to a tag the markup ends in (left as it is).
+ */
+function tags(html: string, visit: (tag: Tag, lt: number) => void): void {
+  for (let i = 0; i < html.length; ) {
+    const lt = html.indexOf("<", i);
+    if (lt < 0) break;
+    const comment = commentEnd(html, lt);
+    if (comment !== undefined) {
+      i = comment;
+      continue;
+    }
+    const tag = readTag(html, lt);
+    if (tag === undefined) {
+      i = lt + 1;
+      continue;
+    }
+    if (!tag) break;
+    i = tag.end;
+    visit(tag, lt);
+    if (!tag.close && RAW_TEXT.test(tag.name)) i = tag.name === "plaintext" ? html.length : rawTextEnd(html, tag.name, i);
+  }
+}
+
+/** A class attribute's names, as written. */
+const namesOf = (value: string | undefined) => [...(value ?? "").matchAll(NAMES)].map((m) => m[0]);
+/** A name as Tailwind reads it, its references decoded; undefined where that has a space other than HTML's in it (none of Tailwind's). */
+const tailwindName = (name: string) => {
+  const read = decode(name);
+  return /\s/.test(read) ? undefined : read;
+};
+
+/** The class names in `html`, each tag's (its first class attribute's), as inlineClasses reads them: to read them all at once. */
+export function classNamesIn(html: string): string[] {
+  const out: string[] = [];
+  tags(html, (tag) => {
+    if (tag.close) return;
+    for (const name of namesOf(tag.attributes.find((a) => a.name === "class")?.value)) {
+      const read = tailwindName(name);
+      if (read !== undefined) out.push(read);
+    }
+  });
+  return out;
+}
+
+/**
+ * `html` with Tailwind's classes inlined; `warn` says what isn't. `rtl`: the document reads right to left. An element
+ * reads as its own `dir` says (`rtl`, or `ltr` and `auto`, which can't be told here, as left to right), else as the
+ * element it's in, else as the document: its logical sides are those. (An element whose end tag is left out, as a
+ * `<p>` or `<li>` can be, is taken to hold what follows it up to its parent's end tag.) A tag's first `class` is its
+ * class, as a browser reads it (the others are left out once it's rewritten); comments, raw text (`<script>`,
+ * `<style>`, `<textarea>`, …) and what isn't a tag stay as they are. `unsafe`: CSS sanitized markup can't have (see
+ * src/markdown/sanitize.ts), each declaration that is left out and said.
+ *
+ * Its classes are read at once first (`read.prepare`, where the reader has one): Tailwind builds its whole stylesheet
+ * again for each class it hasn't built, so classes read one tag at a time would take the square of their number.
+ */
+export function inlineClasses(html: string, read: ((className: string) => ClassDeclarations) | DeclarationReader, warn: (text: string) => void, rtl = false, unsafe?: (css: string) => boolean): string {
+  ("prepare" in read ? read.prepare : read)(classNamesIn(html).join(" "));
+  const said = new Set<string>();
+  const once = (text: string) => !said.has(text) && (said.add(text), warn(text));
+  // The elements open where a tag is, each with whether it reads right to left, and where each name's are among them:
+  // an end tag ends the last of its name and what's open in it, each element once.
+  const open: Array<{ tag: string; rtl: boolean }> = [];
+  const at = new Map<string, number[]>();
+  let out = "";
+  // Where the input is written out to.
+  let written = 0;
+  tags(html, (tag, lt) => {
+    if (tag.close) {
+      // It ends, and what's still open in it (as the browser ends them).
+      const places = at.get(tag.name);
+      if (places?.length) for (const end = places[places.length - 1]; open.length > end; ) at.get(open.pop()!.tag)!.pop();
+      return;
+    }
+    const first = (name: string) => tag.attributes.find((a) => a.name === name);
+    const dir = first("dir")?.value?.trim().toLowerCase();
+    const right = dir === "rtl" ? true : dir === "ltr" || dir === "auto" ? false : open.length ? open[open.length - 1].rtl : rtl;
+    const rewritten = classes(html.slice(lt, tag.end), tag.attributes, tag.nameEnd, lt, right, read, once, unsafe);
+    if (rewritten !== undefined) {
+      out += html.slice(written, lt) + rewritten;
+      written = tag.end;
+    }
+    if (!RAW_TEXT.test(tag.name) && !VOID.test(tag.name)) {
+      const places = at.get(tag.name) ?? (at.set(tag.name, []), at.get(tag.name)!);
+      places.push(open.length);
+      open.push({ tag: tag.name, rtl: right });
+    }
+  });
+  return out + html.slice(written);
+}
+
+/**
+ * A start tag (`text`, at `offset` in the markup) with its classes inlined, or undefined where none are Tailwind's: its
+ * first class attribute holds the classes that stay (or goes), its others go, its first style attribute starts with the
+ * inlined declarations (or one is added after its attributes). The rest is as written.
+ */
+function classes(text: string, attributes: Attribute[], nameEnd: number, offset: number, rtl: boolean, read: (className: string) => ClassDeclarations, once: (text: string) => void, unsafe?: (css: string) => boolean): string | undefined {
+  const first = attributes.findIndex((a) => a.name === "class");
+  const given = namesOf(attributes[first]?.value);
+  if (!given.length) return undefined;
+  const names = given.map(tailwindName);
+  const found = read(names.filter((name) => name !== undefined).join(" "));
+  const yours = new Set<string>();
+  for (const { className: name, reason } of found.ignored) {
+    // Not Tailwind's: one of yours, left for your stylesheet; past the render's classes, or past what Tailwind is given
+    // of one (see capped): not read, left as written (said once for the render).
+    if (reason === "Tailwind has no such class" || reason === OVER || reason.startsWith(BEYOND)) yours.add(name);
+    else once(`ignores class \`${name}\` in its markup: ${reason}`);
+  }
+  const kept = given.filter((_, i) => names[i] === undefined || yours.has(names[i]!));
+  if (kept.length === given.length) return undefined;
+  // What shows or hides the element on every screen (`display`, `visibility`), where a phone or breakpoint variant
+  // changes it on one, isn't inline: it would apply on that screen too (`hidden md:block` would hide the element on
+  // every screen), and shown everywhere is the safer mistake. Any other class is inline as it is on every screen, the
+  // variant said (`px-4 md:pl-2` is `px-4`'s padding). (Without hover, an element is as its classes say without
+  // `hover:`: those are inline.)
+  const screens = new Map<string, ClassDeclaration>();
+  for (const d of found.declarations) if ((d.when === "phone" || d.when === "desktop") && SHOWN.test(d.property) && !screens.has(d.property)) screens.set(d.property, d);
+  const shown = (d: ClassDeclaration) => (d.when === "always" ? screens.get(d.property) : undefined);
+  for (const d of found.declarations) {
+    const by = shown(d);
+    if (by) once(`can't inline \`${d.className}\`'s \`${d.property}\` in its markup: \`${by.className}\` sets it ${WHEN[by.when]}, which needs a stylesheet`);
+  }
+  const css: string[] = [];
+  for (const d of found.declarations) {
+    if (d.when !== "always") once(`can't inline class \`${d.className}\` in its markup: it applies ${WHEN[d.when]}, which needs a stylesheet`);
+    // What could end the `style` it's written in, or start a tag, or load what a prop can't (see markupValue).
+    else if (markupValue(d) === undefined) once(`ignores \`${d.property}: ${d.value}\` from class \`${d.className}\` in its markup: it could end the HTML attribute it's written in, start a tag, or end its CSS, or its URL isn't a web one, a relative one, an inline attachment's or an image's`);
+    else if (!shown(d))
+      for (const property of physical(d.property, rtl)) {
+        const declaration = `${property}: ${markupValue(d)}${d.important ? " !important" : ""}`;
+        if (!unsafe?.(declaration)) css.push(declaration);
+        else once(`can't inline \`${d.className}\`'s \`${property}\` in its markup: it could load or run something, which Markdown's sanitized HTML doesn't allow`);
+      }
+  }
+  // Each edit: what's from `start` to `end` (in the markup) written as `with`.
+  const edits: Array<{ start: number; end: number; with: string }> = [];
+  // Where an attribute left out (the `at`th) starts: with the gap before it, unless the next one starts where it ends
+  // (after its quote), which that gap then keeps apart from what's before it.
+  const before = (a: Attribute, at: number) => (attributes[at + 1]?.start === a.end ? a.start : at > 0 ? attributes[at - 1].end : nameEnd);
+  attributes.forEach((a, at) => {
+    if (a.name === "class") edits.push(at === first && kept.length ? { start: a.start, end: a.end, with: `class="${kept.join(" ").replace(/"/g, "&quot;")}"` } : { start: before(a, at), end: a.end, with: "" });
+  });
+  // The element's own style wins over its classes, as in the browser: after them.
+  const own = attributes.find((a) => a.name === "style");
+  const style = css.map(escape).join("; ");
+  if (style) {
+    if (own) {
+      const value = requote(own).replace(/;\s*$/, "");
+      edits.push({ start: own.start, end: own.end, with: `style="${value.trim() ? `${style}; ${value}` : style}"` });
+    } else {
+      const end = attributes.length ? attributes[attributes.length - 1].end : nameEnd;
+      edits.push({ start: end, end, with: ` style="${style}"` });
+    }
+  }
+  edits.sort((a, b) => a.start - b.start || a.end - b.end);
+  let tag = "";
+  let from = offset;
+  for (const edit of edits) {
+    tag += text.slice(from - offset, edit.start - offset) + edit.with;
+    from = edit.end;
+  }
+  return tag + text.slice(from - offset);
+}
diff --git a/packages/react/src/tailwind/image-height.ts b/packages/react/src/tailwind/image-height.ts
new file mode 100644
index 00000000..14154e81
--- /dev/null
+++ b/packages/react/src/tailwind/image-height.ts
@@ -0,0 +1,73 @@
+/**
+ * An Image's height class (a logo's `h-12 w-auto`) as its width. In the browser an image with a height and an auto
+ * width is as wide as its aspect ratio makes it; the editor's image has a width, not a height (its height follows
+ * from its width and its size). So where the image's size is given (`src={{ url, width, height }}`), the height is
+ * the width its ratio gives (48px of a 400×100 logo is 192px wide), and where it isn't, the height is passed over:
+ * as an inline style beside the image's width it would stretch it.
+ */
+import type { ClassDeclaration } from "./declarations";
+
+const plain = (v: unknown): v is Record<string, any> => !!v && typeof v === "object" && !Array.isArray(v);
+/**
+ * A positive length in pixels, as a number or a string (`400`, `"400"`, `"400px"`); undefined otherwise. (A string
+ * read once, and only one a size could be: `\d*\.?\d+` read a run of digits again from each place it could split it.)
+ */
+const pixels = (v: unknown): number | undefined => {
+  const text = typeof v === "string" ? v.trim() : "";
+  const n = typeof v === "number" ? v : text.length <= 24 && /^(?:\d+(?:\.\d+)?|\.\d+)(px)?$/.test(text) ? parseFloat(text) : NaN;
+  return Number.isFinite(n) && n > 0 ? n : undefined;
+};
+
+/** The image's own size, from an object `src` (or `values.src`) with both a width and a height. */
+function sizeOf(explicit: Record<string, any>): { width: number; height: number } | undefined {
+  for (const src of [explicit.src, explicit.values?.src]) {
+    if (!plain(src)) continue;
+    const [width, height] = [pixels(src.width), pixels(src.height)];
+    if (width && height) return { width, height };
+  }
+  return undefined;
+}
+
+/** Whether a width is given in props: the display width (`width`, `maxWidth`, or `src`'s `maxWidth`, `autoWidth`). */
+function widthGiven(explicit: Record<string, any>): boolean {
+  if (explicit.width != null || explicit.maxWidth != null) return true;
+  return [explicit.src, explicit.values?.src].some((src) => plain(src) && (src.maxWidth != null || src.autoWidth != null));
+}
+
+/**
+ * The declarations with each height in pixels whose width is auto (no width class for its screens but `w-auto`, and
+ * no width in props) as that width; `sized` says one is, so the image's `src.width` is its size, not a display width.
+ * A height with a width (`size-12`, `w-32 h-12`), a hover one, or one that isn't in pixels (`h-auto`, `h-full`) is
+ * left as it is.
+ */
+export function heightAsWidth(
+  declarations: ClassDeclaration[],
+  explicit: Record<string, any>,
+  ignore: (d: ClassDeclaration, why: string) => void
+): { declarations: ClassDeclaration[]; sized: boolean } {
+  const heights = declarations.filter((d) => d.property === "height" && d.when !== "hover" && pixels(d.value) !== undefined);
+  if (!heights.length || widthGiven(explicit)) return { declarations, sized: false };
+  // A width class for these screens: its own, or one for every screen (phones and desktops also show those).
+  const widthFor = (when: ClassDeclaration["when"]) =>
+    declarations.some((d) => d.property === "width" && d.value !== "auto" && (d.when === when || (when !== "hover" && d.when === "always")));
+  const size = sizeOf(explicit);
+  const replaced = new Map<ClassDeclaration, ClassDeclaration | undefined>();
+  for (const d of heights) {
+    if (widthFor(d.when)) continue;
+    if (size) {
+      const width = Math.round((pixels(d.value)! * size.width) / size.height * 100) / 100;
+      replaced.set(d, { ...d, property: "width", value: `${width}px` });
+    } else {
+      ignore(d, ": an image's height gives its width only with the image's size (`src={{ url, width, height }}`), as its aspect ratio does in the browser; without it, the height would stretch the image");
+      replaced.set(d, undefined);
+    }
+  }
+  if (!replaced.size) return { declarations, sized: false };
+  // The width a height gives replaces a `w-auto` for the same screens.
+  const sizedAt = new Set([...replaced].filter(([, w]) => w).map(([d]) => d.when));
+  const out = declarations.flatMap((d) => {
+    if (replaced.has(d)) return replaced.get(d) ? [replaced.get(d)!] : [];
+    return d.property === "width" && d.value === "auto" && sizedAt.has(d.when) ? [] : [d];
+  });
+  return { declarations: out, sized: sizedAt.size > 0 };
+}
diff --git a/packages/react/src/tailwind/index.ts b/packages/react/src/tailwind/index.ts
new file mode 100644
index 00000000..c0452866
--- /dev/null
+++ b/packages/react/src/tailwind/index.ts
@@ -0,0 +1,11 @@
+/**
+ * @unlayer/react-elements/tailwind: Tailwind CSS classes on Elements components.
+ *
+ * Needs `tailwindcss` (4.x), an optional peer dependency: the main entry never loads it.
+ */
+export { Tailwind, type TailwindConfig, type TailwindHandle, type TailwindProps } from "./Tailwind";
+export type { HtmlParts, RenderToHtmlOptions } from "@unlayer/react-elements";
+export { loadTailwind, classNameToDeclarations } from "./load";
+export type { ClassCondition, ClassDeclaration, ClassDeclarations } from "./declarations";
+// The async renderers are the "@unlayer/react-elements/async" entry's: they compile `<Tailwind config>` too.
+export { renderToHtml, renderToPlainText, renderToJson, renderToHtmlParts } from "@unlayer/react-elements/async";
diff --git a/packages/react/src/tailwind/inherit.ts b/packages/react/src/tailwind/inherit.ts
new file mode 100644
index 00000000..29df8373
--- /dev/null
+++ b/packages/react/src/tailwind/inherit.ts
@@ -0,0 +1,144 @@
+/**
+ * Text styles on a Row, a Column or the root (`text-white`, `text-center`, `text-sm`, `font-bold`, `leading-7`,
+ * `tracking-wide`, `font-serif`, and their phone variants) for the text inside, as CSS inherits them: each text block
+ * takes them as its own props where it sets none (by its classes or its props), the nearest container's winning, so
+ * the design holds them too. A Paragraph and a Heading take them all; a Button its label's font, size, weight,
+ * spacing and line height and, as an inline-block in CSS, its place (`text-center` centers it), not the color (its
+ * label sits on its own background, and an email client gives a link its own color); a Menu its items' (`textColor`,
+ * `align`, no line height: it has none); a Table its header's, content's and footer's (the content's weight and line
+ * height); Social its place. What has text but no such props (an Html block, markup, a custom tool) gets them as CSS
+ * does, from an inline style on its Column: the HTML's, not the design's, which is said.
+ *
+ * A border set without a color (`border`, `border-t-2`) is Tailwind's `currentColor`: the text color. A Column's or a
+ * Divider's without a text class of its own is the text color around it, set here (the root's `textColor`, the
+ * editor's default, where no class sets one).
+ *
+ * A Row's rewrite (src/model/elements.ts gives it the Row's Columns, its props, the root's and the direction) does both, then places the
+ * Row's padding and its Columns' margins (see row.ts). The root's rewrite, a Column's and a Row's are the same: a Row
+ * takes its own, else one of its Columns', else the root's.
+ */
+import React from "react";
+import { BodyDefaults } from "@unlayer/exporters";
+import { classesToProps, given } from "./props";
+import { insetColumns } from "./row";
+import { isColumn } from "./column";
+import type { ClassDeclaration } from "./declarations";
+
+const TAILWIND = Symbol.for("@unlayer/react-elements/tailwind");
+const PASSED = Symbol.for("@unlayer/react-elements/tailwind-text");
+/** How a block's component says its name and defaults (see create-component.tsx). */
+const CONFIG = "__unlayerItemConfig";
+
+/** Blocks that take the text styles around them as props. */
+const TAKES = new Set(["Paragraph", "Heading", "Button", "Menu", "Table", "Social"]);
+/** Blocks with no text for them to style. */
+const TEXTLESS = new Set(["Image", "Divider", "Video", "PageBreak"]);
+const PARTS = ["header", "content", "footer"];
+
+type Props = Record<PropertyKey, any>;
+const camel = (property: string) => property.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+
+/** A Table's text props from a Paragraph's: its header's, content's and footer's (see the comment above). */
+function tableProps(p: Props): Props {
+  const out: Props = {};
+  for (const part of PARTS) {
+    if (p.color !== undefined) out[`${part}Color`] = p.color;
+    if (p.fontSize !== undefined) out[`${part}FontSize`] = p.fontSize;
+    if (p.textAlign !== undefined) out[`${part}TextAlign`] = p.textAlign;
+    if (p.fontFamily !== undefined) out[`${part}FontFamily`] = { label: p.fontFamily, value: p.fontFamily };
+  }
+  if (p.lineHeight !== undefined) out.contentLineHeight = p.lineHeight;
+  if (p.fontWeight !== undefined) out.contentFontWeight = p.fontWeight;
+  return out;
+}
+
+/** The props a block takes from the text styles around it: those it doesn't set itself (by its classes or props). */
+function inherited(name: string, defaults: Props, props: Props, decls: ClassDeclaration[], rtl: boolean): Props {
+  const own = name === "Button" ? decls.filter((d) => d.property !== "color") : decls;
+  if (!own.length) return {};
+  const from = classesToProps(name === "Table" ? "Paragraph" : name, { declarations: own, ignored: [] }, {}, name === "Table" ? {} : defaults, true, rtl);
+  const { mobile, style: _style, ...base } = name === "Table" ? tableProps(from) : from;
+  const out: Props = {};
+  for (const [prop, value] of Object.entries(base)) if (!given(props, prop, name)) out[prop] = value;
+  // On phones: where it sets nothing for a prop, on any screen.
+  const theirs = { ...props.values?._override?.mobile, ...props.mobile };
+  for (const [prop, value] of Object.entries((mobile ?? {}) as Props)) if (!given(props, prop, name) && theirs[prop] === undefined) out.mobile = { ...(out.mobile ?? props.mobile), [prop]: value };
+  return out;
+}
+
+/** Sets `color` on the border side `at` names (`borderTopColor`, or `mobile.borderTopColor` for phones). */
+function paint(into: Props, props: Props, at: string, color: string): void {
+  if (!at.startsWith("mobile.")) return void (into[at] = color);
+  const mobile = into.mobile ?? props.mobile ?? {};
+  into.mobile = { ...mobile, border: { ...mobile.border, [at.slice(7)]: color } };
+}
+
+/** A Column with its text blocks given the text styles around them (the root's, the Row's, its own), in a right-to-left document with `rtl`. */
+function inColumn(column: React.ReactElement<Props>, rootText: ClassDeclaration[], rowText: ClassDeclaration[], root: Props | undefined, say: (text: string) => void, rtl: boolean): React.ReactElement<Props> {
+  const keys = column.props.style?.[TAILWIND];
+  const ownText: ClassDeclaration[] = keys?.text ?? [];
+  const around = [...rootText, ...rowText];
+  const decls = [...around, ...ownText];
+  // The text color: the nearest class's, else the root's (its props, or the editor's default).
+  const colorOf = (list: ClassDeclaration[]) => list.filter((d) => d.property === "color" && d.when === "always").pop()?.value;
+  const color = (list: ClassDeclaration[]) => colorOf(list) ?? root?.textColor ?? root?.values?.textColor ?? BodyDefaults.textColor;
+  const changes: Props = {};
+  for (const at of keys?.current ?? []) paint(changes, column.props, at, color(around));
+  let markup = false;
+  const kids: React.ReactNode[] = Array.isArray(column.props.children) ? column.props.children : [column.props.children];
+  const children = kids.map((child) => {
+    if (!React.isValidElement<Props>(child)) {
+      if (typeof child === "string" || typeof child === "number") markup ||= String(child).trim() !== "";
+      return child;
+    }
+    const item = (child.type as unknown as Props)?.[CONFIG];
+    const name: string = item?.name;
+    const next: Props = {};
+    for (const at of child.props.style?.[TAILWIND]?.current ?? []) paint(next, child.props, at, color(decls));
+    if (TAKES.has(name)) Object.assign(next, inherited(name, item.defaultValues ?? {}, child.props, decls, rtl));
+    else if (!TEXTLESS.has(name)) markup = true;
+    return Object.keys(next).length ? React.cloneElement(child, next) : child;
+  });
+  // Markup in it takes them as CSS gives them: an inline style on the Column (the HTML's), but for the root's color,
+  // which is the body's (the design's).
+  const inline: Props = {};
+  const listed: string[] = [];
+  if (markup) {
+    for (const d of [...rootText.filter((d) => d.property !== "color"), ...rowText, ...ownText]) {
+      if (d.when !== "always") {
+        say(`Column can't pass \`${d.property}: ${d.value}\` (class \`${d.className}\`) on to the markup in it for one screen size`);
+        continue;
+      }
+      inline[camel(d.property)] = d.value + (d.important ? " !important" : "");
+      say(`Column \`${d.property}: ${d.value}\` from class \`${d.className}\` is kept in HTML (an inline style) for the markup in it, but not in the design for the visual editor`);
+    }
+    for (const key in inline) if (column.props.style?.[key] === undefined) listed.push(key);
+  }
+  if (listed.length) {
+    const was: string[] & Props = keys ?? [];
+    changes.style = { ...inline, ...column.props.style, [TAILWIND]: Object.assign([...was, ...listed], was) };
+  }
+  if (children.some((child, i) => child !== kids[i])) changes.children = children;
+  return Object.keys(changes).length ? React.cloneElement(column, changes) : column;
+}
+
+/**
+ * A Row's rewrite (see the comment above): `padding` and `phone`, the padding its classes give it (row.ts places it
+ * in its Columns); `warn`, how what it can't do is said.
+ */
+export function rowRewrite(padding: string | undefined, phone: string | undefined, warn: (text: string) => void) {
+  const inset = insetColumns(padding, phone, warn);
+  const said = new Set<string>();
+  const say = (text: string) => {
+    if (!said.has(text)) console.warn(`[Unlayer] ${text}.`);
+    said.add(text);
+  };
+  // (`rtl`: the document reads right to left; an older copy of Elements gives none.)
+  return (children: React.ReactNode[], props: Props, root?: Props, rtl = false): React.ReactNode[] => {
+    const rootText: ClassDeclaration[] = root?.[PASSED] ?? [];
+    const rowText: ClassDeclaration[] = props[PASSED] ?? [];
+    let list = children.map((child) => (isColumn(child) ? inColumn(child, rootText, rowText, root, say, rtl) : child));
+    if (padding !== undefined || phone !== undefined || list.some((child) => isColumn(child) && child.props.style?.[TAILWIND]?.margin)) list = inset(list, props, root, rtl);
+    return list;
+  };
+}
diff --git a/packages/react/src/tailwind/load.ts b/packages/react/src/tailwind/load.ts
new file mode 100644
index 00000000..5f8b5a1a
--- /dev/null
+++ b/packages/react/src/tailwind/load.ts
@@ -0,0 +1,253 @@
+/**
+ * `loadTailwind(config)`: Tailwind compiled for a config, kept for the next call with it. Compiling is asynchronous
+ * (Tailwind loads its config and stylesheets that way); what it gives is a handle whose classes are read
+ * synchronously, so the renderers stay synchronous. Tailwind (the optional peer dependency) is loaded here only, when
+ * it's first asked for.
+ */
+import { Tailwind, type Resolver, type TailwindConfig, type TailwindHandle } from "./Tailwind";
+// Tailwind's default theme, as its `tailwindcss/theme.css` holds it, built into this module: a bundler or an edge
+// runtime has no file to read it from.
+/*! Includes tailwindcss's default theme (MIT License, Copyright (c) Tailwind Labs, Inc.): see THIRD_PARTY_LICENSES.md */
+import theme from "tailwindcss/theme.css?raw";
+import { BEYOND, CHARACTERS, CLASS_LIMITS, FULL, beyond, capped, declarationReader, OVER, CLASSES, STUCK, WAITING, type ClassDeclarations, type Compiler, type DeclarationReader, type PluginFailure } from "./declarations";
+import { guarded } from "./guard";
+import { RenderError } from "@unlayer/react-elements";
+import { classesToProps } from "./props";
+import { classNamesIn, inlineClasses } from "./html";
+import { unsafeStyle } from "../markdown/sanitize";
+
+/** Shared by every copy of Elements a process loads: a handle from one works with the others. */
+export const TAILWIND = Symbol.for("@unlayer/react-elements/tailwind");
+
+/** A handle's resolver: the props a component's classes give it, and the declarations a class string gives. */
+export interface HandleResolver extends Resolver {
+  declarations(className: string): ClassDeclarations;
+}
+
+/** The props of a component (by its name) whose markup's classes its rewrite inlines: `html`, and a Heading's or a Button's `text`. */
+const markupProps = (name: string): readonly string[] => (name === "Heading" || name === "Button" ? ["html", "text"] : ["html"]);
+
+/**
+ * The classes of the records in a render's scopes with a handle (each record's component's `className`, and those in
+ * its markup props, the ones its rewrite reads: see markupProps), all built at once by `declarations`, before the render
+ * rewrites any (see Tailwind.tsx's `prepare`). A block's name is its component's, as the main entry gives the rewrite
+ * (its config's, under the key create-component.tsx keeps it at, or its display name).
+ */
+function prepareRecords(declarations: DeclarationReader, records: readonly unknown[]): void {
+  const names: string[] = [];
+  for (const record of records) {
+    const { props, type } = (record ?? {}) as { props?: unknown; type?: { __unlayerItemConfig?: { name?: string }; displayName?: string } };
+    if (!props || typeof props !== "object") continue;
+    const { className } = props as Record<string, unknown>;
+    if (className) names.push(String(className));
+    for (const key of markupProps(type?.__unlayerItemConfig?.name ?? type?.displayName ?? "")) {
+      const html = (props as Record<string, unknown>)[key];
+      if (typeof html === "string" && /class/i.test(html)) for (const name of classNamesIn(html)) names.push(name);
+    }
+  }
+  declarations.prepare(names.join(" "));
+}
+
+/**
+ * A config as text with its keys sorted, so equal configs compile once; undefined when it holds what isn't data: a
+ * function (a plugin), unless `mark` is what to write for one (what else of it can be read: see withFunctions).
+ */
+export function configKey(config: unknown, mark?: string, seen = new Set<unknown>()): string | undefined {
+  if (config === undefined) return "";
+  const type = typeof config;
+  if (config === null || type === "string" || type === "number" || type === "boolean") return JSON.stringify(config);
+  if (type === "function") return mark;
+  if (seen.has(config) || type !== "object" || (!Array.isArray(config) && Object.getPrototypeOf(config) !== Object.prototype && Object.getPrototypeOf(config) !== null)) return undefined;
+  seen.add(config);
+  const entries = Array.isArray(config) ? config.map((v) => configKey(v, mark, seen)) : Object.keys(config).sort().map((k) => {
+    const v = configKey((config as Record<string, unknown>)[k], mark, seen);
+    return v === undefined ? undefined : `${JSON.stringify(k)}:${v}`;
+  });
+  seen.delete(config);
+  if (entries.some((e) => e === undefined)) return undefined;
+  return Array.isArray(config) ? `[${entries.join(",")}]` : `{${entries.join(",")}}`;
+}
+
+/** Tailwind's compiler for a config, its plugins kept from throwing into its builds (see guard.ts). */
+async function compiler(config: TailwindConfig | undefined): Promise<Compiler> {
+  let tailwind: Record<string, any>;
+  try {
+    tailwind = await import("tailwindcss");
+  } catch (cause) {
+    throw Object.assign(new Error('[Unlayer] loadTailwind needs Tailwind CSS 4: install it with `npm install tailwindcss` (it\'s an optional peer dependency of @unlayer/react-elements).'), { cause });
+  }
+  const run = (tailwind.compile ?? tailwind.default?.compile) as (css: string, options: Record<string, unknown>) => Promise<Compiler>;
+  const failures: PluginFailure[] = [];
+  let building = false;
+  // An older Tailwind installs with Elements (the peer dependency takes any version, so a project's Tailwind 3 doesn't
+  // fail the install), but has no `compile`: Tailwind CSS 3's is a PostCSS plugin.
+  if (typeof run !== "function") {
+    const older = (tailwind.default ?? tailwind)?.postcss === true ? "Tailwind CSS 3 or older (a PostCSS plugin)" : "another one (it has no `compile`)";
+    throw new Error(`[Unlayer] loadTailwind needs Tailwind CSS 4, and the tailwindcss installed is ${older}: upgrade it with \`npm install tailwindcss@4\` (it's an optional peer dependency of @unlayer/react-elements).`);
+  }
+  // Tailwind's theme and utilities, no reset (an email has its own), and the config as React Email's <Tailwind> takes it.
+  const input = `@layer theme, base, components, utilities;\n@import "tailwindcss/theme.css" layer(theme);\n@import "tailwindcss/utilities.css" layer(utilities);\n${config ? "@config;\n" : ""}`;
+  const compiled = await run(input, {
+    base: "/",
+    // No fallbacks for older browsers (`@supports` blocks): colors are converted for email anyway.
+    polyfills: 0,
+    async loadStylesheet(id: string, base: string) {
+      if (id === "tailwindcss/theme.css") return { path: id, base, content: theme };
+      if (id === "tailwindcss/utilities.css") return { path: id, base, content: "@tailwind utilities;" };
+      throw new Error(`[Unlayer] loadTailwind: Tailwind asked for the stylesheet "${id}", which an email has no use for.`);
+    },
+    async loadModule(id: string, base: string, hint: string) {
+      if (hint === "config") return { path: id, base, module: guarded(config, failures, () => building) };
+      throw new Error(`[Unlayer] loadTailwind: plugins are given in the config's \`plugins\`, not loaded by name ("${id}").`);
+    },
+  });
+  return {
+    failures,
+    build(candidates: string[]) {
+      building = true;
+      try {
+        return compiled.build(candidates);
+      } finally {
+        building = false;
+      }
+    },
+  };
+}
+
+/** Why a class isn't read that's no fault of its own, but Tailwind's compiling again (see declarationReader). */
+const stale = (reason: string) => reason === WAITING || reason === FULL || reason.startsWith(STUCK);
+
+/** A handle for `config`, compiled from `source` (a copy of it, or the config itself where it can't be copied). */
+async function compile(config: TailwindConfig | undefined, source = config): Promise<TailwindHandle> {
+  // (A fresh compiler past the classes one keeps, one of them compiled with it, so a synchronous loop of renders, which
+  // never lets one compile, has one ready: see declarationReader.)
+  const first = await compiler(source);
+  const declarations = declarationReader(first, () => compiler(source), CLASSES, await compiler(source));
+  // What renders collected, prepared (once per render, whichever of its scopes asks: each gives the same list).
+  const prepared = new WeakSet<object>();
+  // Each render's classes, read together (see capped), by the render (the main entry's key for it); each call's where
+  // there's none.
+  const renders = new WeakMap<object, ReturnType<typeof capped>>();
+  const reader = (render?: object) => {
+    let read = render && renders.get(render);
+    if (!read) {
+      read = capped(declarations);
+      if (render) renders.set(render, read);
+    }
+    return read;
+  };
+  const resolver: HandleResolver = {
+    declarations: (className) => capped(declarations)(className),
+    ready: () => declarations.ready?.(),
+    prepare: (records, render) => void (!prepared.has(records) && prepared.add(records) && prepareRecords(reader(render), records)),
+    props: (name: string, className: string, explicit: Record<string, any>, defaults?: Record<string, any>, rtl = false, render?: object) => {
+      const capped = reader(render);
+      const warn = (text: string) => console.warn(`[Unlayer] ${name} ${text}.`);
+      capped.first = capped.beyond = undefined;
+      // A class that isn't read as Tailwind compiles again after a class it couldn't read (one another render may have
+      // given) fails the render, which renders right once it has: never without the class's styles.
+      let missed: { className: string; reason: string } | undefined;
+      const read = Object.assign((className: string) => {
+        const found = capped(className);
+        missed ??= found.ignored.find((i) => stale(i.reason));
+        return found;
+      }, { prepare: capped.prepare });
+      // Classes in its markup (an Html block's, a Paragraph's `html`, a Heading's or Button's `text`, its children's
+      // markup): inline styles; in Markdown's sanitized HTML, none its sanitizer wouldn't keep in a `style` (your own
+      // markup's are as you wrote them).
+      for (const key of markupProps(name)) {
+        const html = explicit[key];
+        if (typeof html === "string" && /class/i.test(html)) explicit = { ...explicit, [key]: inlineClasses(html, read, warn, rtl, explicit._sanitized ? unsafeStyle : undefined) };
+      }
+      const found = read(className);
+      if (missed) throw Object.assign(new RenderError(`<Tailwind> can't read the class \`${missed.className}\` now: ${missed.reason}${missed.reason === FULL ? "" : ". Render again then (the async renderers wait for it)"}`, name, ""), { [TAILWIND]: { compiling: true } });
+      // Classes past the render's first CLASSES (CHARACTERS of them), and past CLASS_LIMITS: said once in the render, where
+      // they're first met (the start of one past the limits).
+      if (capped.first !== undefined && !capped.said && (capped.said = true)) warn(`ignores class \`${capped.first}\`, and the render's other classes past its first ${CLASSES} different ones or ${CHARACTERS} characters of them: a render reads that many at most`);
+      // (Read again: the reads above set it.)
+      const big = capped.beyond as string | undefined;
+      if (big !== undefined && !capped.told && (capped.told = true)) {
+        const { characters, variants, ampersands, depth } = CLASS_LIMITS;
+        const shown = big.length > 60 ? `${big.slice(0, 60)}…` : big;
+        warn(`ignores class \`${shown}\`, and the render's other classes like it: ${beyond(big)}. A class is read with at most ${characters} characters, ${variants} variants, ${ampersands} \`&\` in its variants and brackets ${depth} deep, as Tailwind takes time growing faster than a class's size past them`);
+      }
+      return classesToProps(name, { ...found, ignored: found.ignored.filter((i) => i.reason !== OVER && !i.reason.startsWith(BEYOND)) }, explicit, defaults, false, rtl);
+    },
+  };
+  return Object.freeze({ config, [TAILWIND]: resolver }) as TailwindHandle;
+}
+
+/**
+ * The configs kept compiled (about 2.6 MB each with the compiler kept ready, and their classes: 50 take about 130 MB),
+ * the ones used last: a server rendering each customer's theme keeps these.
+ */
+export const CONFIGS = 50;
+
+// By its text, the one used last last; one with functions by the object, with the text of the rest as it was compiled.
+const byKey = new Map<string, Promise<TailwindHandle>>();
+const byObject = new WeakMap<object, { rest?: string; loading: Promise<TailwindHandle> }>();
+const changed = new WeakSet<object>();
+
+/**
+ * Compiles Tailwind for a config (React Email's `<Tailwind config>` takes the same), kept for later calls: one with
+ * the same config (one equal to it, or the same object as it is now) gets the same handle, while it's among the 50 used
+ * last. Pass it to `<Tailwind tw={tw}>`. A config is known by what it holds when it's called: one changed in place
+ * (a color made another) is compiled as it is then, and the handles given before keep what they were compiled from.
+ *
+ * A config with functions (plugins) can't be known by what it holds: it's compiled once per object, so define it
+ * once, outside your components, and give a changed one as a new object. (One whose data changed in place is
+ * compiled again, saying so; one whose functions did isn't.)
+ *
+ * @example
+ * ```tsx
+ * const tw = await loadTailwind({ theme: { extend: { colors: { brand: "#007291" } } } });
+ * renderToHtml(<Tailwind tw={tw}><Email className="bg-gray-100">…</Email></Tailwind>);
+ * ```
+ */
+export function loadTailwind(config?: TailwindConfig): Promise<TailwindHandle> {
+  const key = configKey(config);
+  if (key === undefined) return withFunctions(config!);
+  let loading = byKey.get(key);
+  if (!loading) {
+    // (From a copy: one changed in place after is another config, which its handle's fresh compilers don't read.)
+    const compiling = (loading = compile(config, config && structuredClone(config)));
+    // One that failed (Tailwind not installed) is tried again next time.
+    compiling.catch(() => void (byKey.get(key) === compiling && byKey.delete(key)));
+  }
+  // Used last, it goes last; past CONFIGS, the one used longest ago goes (a handle given out keeps working).
+  byKey.delete(key);
+  byKey.set(key, loading);
+  if (byKey.size > CONFIGS) byKey.delete(byKey.keys().next().value!);
+  return loading;
+}
+
+/** A config with functions (see loadTailwind), by the object: compiled again where the rest of it (its data) changed. */
+function withFunctions(config: TailwindConfig): Promise<TailwindHandle> {
+  const rest = configKey(config, "ƒ");
+  const known = byObject.get(config);
+  if (known && known.rest === rest) return known.loading;
+  if (!known) console.warn("[Unlayer] loadTailwind: the config holds functions (plugins), so it's compiled again for each config object: define it once, outside your components.");
+  else if (!changed.has(config) && changed.add(config)) console.warn("[Unlayer] loadTailwind: a config with functions (plugins) changed since it was compiled, so it's compiled again: give a changed config as a new object (a function changed in place isn't seen).");
+  const loading = compile(config);
+  byObject.set(config, { rest, loading });
+  loading.catch(() => void (byObject.get(config)?.loading === loading && byObject.delete(config)));
+  return loading;
+}
+
+// The async renderers ("@unlayer/react-elements/async") compile a <Tailwind config> with the compiler of the copy of
+// Elements whose <Tailwind> it is (two copies in one app, each its own: their classes can differ), and an older
+// copy's with the one loaded last, where this entry is loaded (a bundle).
+const LOADER = Symbol.for("@unlayer/react-elements/tailwind-loader");
+(Tailwind as unknown as Record<symbol, unknown>)[LOADER] = loadTailwind;
+(globalThis as Record<symbol, unknown>)[LOADER] = loadTailwind;
+
+/**
+ * The declarations a class string gives with a compiled Tailwind, as Elements reads them for an email: colors in
+ * hex or rgba, sizes in pixels, variables and `calc()` worked out, each with when it applies; and the classes that
+ * don't apply in an email, with why.
+ */
+export function classNameToDeclarations(tw: TailwindHandle, className: string): ClassDeclarations {
+  const resolver = (tw as unknown as Record<symbol, HandleResolver> | undefined)?.[TAILWIND];
+  if (!resolver?.declarations) throw new Error("[Unlayer] classNameToDeclarations takes the compiled Tailwind `await loadTailwind(config)` gives.");
+  return resolver.declarations(className);
+}
diff --git a/packages/react/src/tailwind/props.ts b/packages/react/src/tailwind/props.ts
new file mode 100644
index 00000000..0c863113
--- /dev/null
+++ b/packages/react/src/tailwind/props.ts
@@ -0,0 +1,484 @@
+/**
+ * Declarations (see declarations.ts) as a component's props, by the table it gives (`classes` beside its props, see
+ * utils/tailwind.ts): the shared part is here (what each CSS property is, how spacing and borders combine, phone
+ * and hover variants), what differs (Button's padding is inside it, a Row's background paints the content width)
+ * is the component's. Props given explicitly win; what a component can't take is reported, never dropped quietly.
+ */
+import { TABLES } from "./tables";
+import { plus, shorthand, sidesOf, type Margins } from "./row";
+import { rowRewrite } from "./inherit";
+import { PROP_ALIASES, isContentProp } from "@unlayer-internal/shared-elements";
+import { BodyDefaults } from "@unlayer/exporters";
+import { unsafeUrl } from "../markdown/sanitize";
+import { heightAsWidth } from "./image-height";
+import { propValue } from "./written";
+
+
+const TAILWIND = Symbol.for("@unlayer/react-elements/tailwind");
+/** On a Row's and the root's props: the text styles their classes pass on to the text inside (see inherit.ts). */
+const PASSED = Symbol.for("@unlayer/react-elements/tailwind-text");
+/** Text styles CSS inherits, which a Row, a Column or the root passes on to its text blocks (see inherit.ts). */
+const INHERITED = new Set(["color", "font-size", "line-height", "font-weight", "font-family", "letter-spacing", "text-align"]);
+/** Of those, what a text block can take on phones (or above a breakpoint), as its `mobile` prop does. */
+const BY_SCREEN = new Set(["font-size", "line-height", "text-align"]);
+const ROOTS = new Set(["Email", "Page", "Document", "Body"]);
+/** The text color the editor's body has by default: what a border without a color shows where nothing sets one. */
+const BODY_TEXT: string = BodyDefaults.textColor;
+
+/** A component's class table (see tables.ts), read. */
+interface Table {
+  text?: unknown;
+  container?: unknown;
+  display?: unknown;
+  phone?: string | null;
+  bg?: string | null;
+  color?: string | null;
+  fontSize?: string | null;
+  lineHeight?: string | null;
+  fontWeight?: string | null;
+  fontFamily?: string | null;
+  letterSpacing?: string | null;
+  textAlign?: string | null;
+  padding?: string | null;
+  margin?: string | null;
+  border?: string | null;
+  radius?: string | null;
+  width?: string | null;
+  maxWidth?: string | null;
+  minWidth?: string | null;
+  hoverBg?: string | null;
+  hoverColor?: string | null;
+}
+
+/** `bg=backgroundColor padding lineHeight= phone=fontSize,padding` → `{ bg: "backgroundColor", padding: "padding", lineHeight: null, phone: "fontSize,padding" }`. */
+const read = (table: string): Table => Object.fromEntries(table.split(" ").filter(Boolean).map((token) => { const [key, value] = token.split("="); return [key, value === undefined ? key : value || null]; }));
+import { isColor } from "./color";
+import type { ClassDeclaration, ClassDeclarations } from "./declarations";
+
+/** A content block: spacing around and inside it is the padding of the box it's in, and it can be hidden. */
+const BLOCK: Table = { padding: "containerPadding", margin: "containerPadding", display: true };
+const TEXT: Table = { color: "color", fontSize: "fontSize", lineHeight: "lineHeight", fontWeight: "fontWeight", fontFamily: "fontFamily", letterSpacing: "letterSpacing", textAlign: "textAlign" };
+/** What a prop is when nothing sets it (a block's spacing, a container's padding, corners, borders). */
+const UNSET: Record<string, string> = { containerPadding: "10px", padding: "0px", margin: "0px", borderRadius: "0px" };
+
+const SIMPLE: Record<string, keyof Table> = {
+  "background-color": "bg",
+  color: "color",
+  "font-size": "fontSize",
+  "line-height": "lineHeight",
+  "font-weight": "fontWeight",
+  "font-family": "fontFamily",
+  "letter-spacing": "letterSpacing",
+  "text-align": "textAlign",
+  width: "width",
+  "max-width": "maxWidth",
+  "min-width": "minWidth",
+  display: "display",
+};
+const SIDES = ["Top", "Right", "Bottom", "Left"];
+// Logical sides as in a left-to-right document; RTL has the ones a right-to-left one changes.
+const AREAS: Record<string, number[]> = {
+  "": [0, 1, 2, 3],
+  top: [0],
+  right: [1],
+  bottom: [2],
+  left: [3],
+  inline: [1, 3],
+  block: [0, 2],
+  "inline-start": [3],
+  "inline-end": [1],
+  "block-start": [0],
+  "block-end": [2],
+};
+const CORNERS: Record<string, number[]> = { "": [0, 1, 2, 3], "top-left": [0], "top-right": [1], "bottom-right": [2], "bottom-left": [3], "start-start": [0], "start-end": [1], "end-end": [2], "end-start": [3] };
+const RTL: Record<string, number[]> = { "inline-start": [1], "inline-end": [3], "start-start": [1], "start-end": [0], "end-end": [3], "end-start": [2] };
+const PARTS = ["Width", "Style", "Color"] as const;
+
+type Sides = Array<ClassDeclaration | undefined>;
+interface Box {
+  one: Map<string, ClassDeclaration>;
+  padding: Sides;
+  margin: Sides;
+  radius: Sides;
+  border: Record<(typeof PARTS)[number], Sides>;
+  other: ClassDeclaration[];
+}
+
+const box = (): Box => ({ one: new Map(), padding: [], margin: [], radius: [], border: { Width: [], Style: [], Color: [] }, other: [] });
+
+/** `d` in the box, on the sides it sets (`rtl`: in a right-to-left document, where inline start is the right). */
+function add(into: Box, d: ClassDeclaration, rtl: boolean): void {
+  const p = d.property;
+  const key = SIMPLE[p] ?? (p === "background" && isColor(d.value) ? "bg" : undefined);
+  if (key) return void into.one.set(key, d);
+  const at = (table: Record<string, number[]>, a = "", b?: string) => (rtl && RTL[a + "-" + b]) || table[b ? `${a}-${b}` : a];
+  let m = /^(padding|margin)(?:-(top|right|bottom|left|inline|block)(?:-(start|end))?)?$/.exec(p);
+  if (m) return void at(AREAS, m[2], m[3])?.forEach((i) => ((into[m![1] as "padding" | "margin"] as Sides)[i] = d));
+  m = /^border(?:-(top|right|bottom|left|inline|block)(?:-(start|end))?)?-(width|style|color)$/.exec(p);
+  if (m) return void at(AREAS, m[1], m[2])?.forEach((i) => (into.border[(m![3][0].toUpperCase() + m![3].slice(1)) as (typeof PARTS)[number]][i] = d));
+  m = /^border(?:-(top|bottom|start|end)-(left|right|start|end))?-radius$/.exec(p);
+  const corners = m && at(CORNERS, m[1], m[2]);
+  if (corners) return void corners.forEach((i) => (into.radius[i] = d));
+  into.other.push(d);
+}
+
+
+// (Numbers as `\d*\.?\d+` reads them, but read once: that splits a run of digits at each place it could, again.)
+const LENGTH = /^(\d+(?:\.\d+)?|\.\d+)(px|%|em)?$/;
+const plain = (v: unknown): v is Record<string, any> => !!v && typeof v === "object" && !Array.isArray(v);
+
+/**
+ * Props without those given as `undefined`, or as `null` but for content (`text`, `html`: none, as in 0.2.1): a prop
+ * passed so (a wrapper of yours forwarding one it wasn't given, `color={props.color}`, or data's `null`) is one not
+ * given, as `given` reads it, so a class sets it.
+ */
+const defined = (props: Record<PropertyKey, any> | undefined): Record<PropertyKey, any> => {
+  const out: Record<PropertyKey, any> = {};
+  if (props) for (const key of [...Object.keys(props), ...Object.getOwnPropertySymbols(props)]) if (props[key] !== undefined && (props[key] !== null || (typeof key === "string" && isContentProp(key)))) out[key] = props[key];
+  return out;
+};
+
+/**
+ * Whether a prop of component `name` is given explicitly: flat, in a group (`buttonColors.color`,
+ * `border.borderTopColor`), in `values`, or by another name it takes for it (`textColor` for `color`, `align` for
+ * `textAlign`: see PROP_ALIASES).
+ */
+export function given(explicit: Record<string, any>, prop: string, name = ""): boolean {
+  // (An image's `src` with its natural size, `{ url, width, height }`, gives no width of its own: a class still sizes it;
+  // its `maxWidth` is one, a display width given.)
+  const look = (p: string) =>
+    [explicit, explicit.values].some((o) => plain(o) && (o[p] != null || Object.entries(o).some(([k, v]) => !/^(mobile|_override|values)$/.test(k) && !(k === "src" && /^(width|height)$/.test(p)) && plain(v) && v[p] != null)));
+  const aliases = Object.entries(PROP_ALIASES[name] ?? {}).flatMap(([alias, props]) => (props.split(" ").includes(prop) ? [alias] : []));
+  // An image's width, max and min width are one setting.
+  return look(prop) || aliases.some(look) || (/^(width|maxWidth|minWidth)$/.test(prop) && ["width", "maxWidth"].some(look));
+}
+
+/**
+ * Two lengths compared without the width of the box around them (`a` minus `b`, by its sign): in the same unit, or a
+ * length in pixels and 100%, the whole box, which is as wide as that on a desktop. Undefined where it depends.
+ */
+function compare(a: string, b: string): number | undefined {
+  if (/%$/.test(a) === /%$/.test(b)) return parseFloat(a) - parseFloat(b);
+  return a === "100%" ? 1 : b === "100%" ? -1 : undefined;
+}
+
+/**
+ * One width from a width and the bounds on it, as CSS sizes a box on a desktop: the max width caps the width, and
+ * the min width wins over both (`max(min, min(max, width))`). Undefined where that depends on the width of the box
+ * around it (see compare).
+ */
+function bounded(width: string, min: string | undefined, max: string | undefined): string | undefined {
+  let out = width;
+  for (const [bound, wins] of [[max, (c: number) => c > 0], [min, (c: number) => c < 0]] as const) {
+    if (bound === undefined) continue;
+    const c = compare(out, bound);
+    if (c === undefined) return undefined;
+    if (wins(c)) out = bound;
+  }
+  return out;
+}
+
+/** "both `width: 50%` and `max-width: 320px`", or three of them "together": the lengths one width can't hold. */
+function together(lengths: Array<[string, string | undefined]>): string {
+  const given = lengths.filter(([, value]) => value !== undefined).map(([property, value]) => `\`${property}: ${value}\``);
+  return given.length === 2 ? `both ${given.join(" and ")}` : `${given.slice(0, -1).join(", ")} and ${given[given.length - 1]} together`;
+}
+
+/** A simple value as the prop takes it (`rtl`: in a right-to-left document); undefined where it can't. */
+function convert(key: string, value: string, rtl: boolean): unknown {
+  switch (key) {
+    case "lineHeight":
+      // Unitless, as the editor writes line heights: a percentage.
+      return /^(?:\d+(?:\.\d+)?|\.\d+)$/.test(value) ? `${parseFloat((parseFloat(value) * 100).toFixed(2))}%` : value;
+    case "fontWeight":
+      return /^\d+$/.test(value) ? Number(value) : value;
+    case "textAlign": {
+      const align = value === "start" ? (rtl ? "right" : "left") : value === "end" ? (rtl ? "left" : "right") : value;
+      return /^(left|center|right|justify)$/.test(align) ? align : undefined;
+    }
+    case "width":
+    case "maxWidth":
+    case "minWidth":
+      return value === "0" ? "0px" : /^(?:\d+(?:\.\d+)?|\.\d+)(px|%)$/.test(value) ? value : undefined;
+    default:
+      return value;
+  }
+}
+
+type Found = Map<string, { value: unknown; d: ClassDeclaration }>;
+
+/**
+ * Turns a component's classes into its props. `props`: the props it's given (they win; one given as `undefined` isn't, see defined); `defaults`: its default
+ * values (what a phone shows where only a breakpoint variant, `sm:`, sets a prop). `quiet`: for text styles a block
+ * takes from around it (see inherit.ts), what it can't take is passed over, not said or inlined. `rtl`: the document
+ * reads right to left, so logical sides and alignment (`ps-4`, `rounded-ss-md`, `text-start`) start on the right.
+ */
+export function classesToProps(name: string, found: ClassDeclarations, props: Record<string, any>, defaults: Record<string, any> = {}, quiet = false, rtl = false): Record<string, any> {
+  const explicit = defined(props);
+  const own = read(TABLES[name] ?? "");
+  const warn = (text: string) => quiet || console.warn(`[Unlayer] ${name} ${text}.`);
+  // (An Image whose height class gives its width has its `src.width` as its size, not a width given: see heightAsWidth.)
+  let sizedByHeight = false;
+  const has = (prop: string) => given(explicit, prop, name) && !(sizedByHeight && /^(width|maxWidth|minWidth)$/.test(prop));
+  const ignore = (d: ClassDeclaration, why = "") => warn(`ignores \`${d.property}: ${d.value}\` from class \`${d.className}\`${why}`);
+  // What no prop takes (unless a variant's, which can't apply as a style): inlined on the component's element.
+  const style: Record<string, string> = {};
+  const keep = (d: ClassDeclaration) => {
+    if (quiet) return;
+    style[d.property.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase())] = d.value + (d.important ? " !important" : "");
+    warn(`\`${d.property}: ${d.value}\` from class \`${d.className}\` is kept in HTML (an inline style) but not in the design for the visual editor`);
+  };
+  for (const { className, reason } of found.ignored) warn(`ignores class \`${className}\`: ${reason}`);
+  // What can't be a prop's value (see propValue) is no one's: not a prop's, an inline style's, or the text's inside;
+  // nor is a `url()` that isn't a web, relative, attachment or image data URL (`bg-[url(javascript:…)]`: see unsafeUrl).
+  found = {
+    ...found,
+    declarations: found.declarations.flatMap((d) => {
+      const value = propValue(d);
+      if (value === undefined) ignore(d, ": it could end the HTML attribute it's written in, start a tag, or end its CSS");
+      else if (unsafeUrl(value)) ignore(d, ": its URL isn't a web one (`http:` or `https:`), a relative one, an inline attachment's (`cid:`), or an image's data URL");
+      else return [value === d.value ? d : { ...d, value }];
+      return [];
+    }),
+  };
+
+  // A Row's, a Column's or the root's text styles are its text blocks' (inherit.ts gives them), as CSS inherits them:
+  // the root's color and font family are the body's too, as the editor has them.
+  const root = ROOTS.has(name);
+  const text: ClassDeclaration[] = [];
+  if (root || name === "Row" || name === "Column") {
+    const rest: ClassDeclaration[] = [];
+    for (const d of found.declarations) {
+      const passed = INHERITED.has(d.property) && d.when !== "hover" && (d.when === "always" || BY_SCREEN.has(d.property));
+      if (passed && !(root && d.property === "font-family")) text.push(d);
+      if (!passed || (root && /^(color|font-family)$/.test(d.property))) rest.push(d);
+    }
+    found = { ...found, declarations: rest };
+  }
+  // An Image's height with an auto width (a logo's `h-12 w-auto`) is the width its aspect ratio gives (see
+  // image-height.ts); `w-auto` is its responsive width, the editor's auto width.
+  if (name === "Image") {
+    const byHeight = heightAsWidth(found.declarations, explicit, ignore);
+    sizedByHeight = byHeight.sized;
+    found = { ...found, declarations: byHeight.declarations.map((d) => (d.property === "width" && d.value === "auto" ? { ...d, value: "100%" } : d)) };
+  }
+
+  const table: Table = { ...(own.container ? {} : BLOCK), ...(own.text ? TEXT : {}), ...own };
+  // The one prop a width and the bounds on it all go to, where there's one (the root's content width; see propsOf).
+  const sized = table.width && table.maxWidth === table.width && table.minWidth === table.width ? table.width : undefined;
+  const phoneable = new Set(`${own.container ? "" : "containerPadding"},${own.phone ?? ""}`.split(",").filter(Boolean));
+  const onPhones = (prop: string) => phoneable.has(prop) || (/^border(Top|Right|Bottom|Left)/.test(prop) && phoneable.has("border"));
+  const boxes: Record<ClassDeclaration["when"], Box> = { always: box(), phone: box(), desktop: box(), hover: box() };
+  for (const d of found.declarations) add(boxes[d.when], d, rtl);
+  const unset = (prop: string) => defaults[prop] ?? UNSET[prop] ?? (/^border.*Width$/.test(prop) ? "0px" : undefined);
+
+  /** One condition's props; `under(prop)` is what the sides and corners it doesn't set are, `drop` what no prop takes. */
+  const propsOf = (b: Box, under: (prop: string) => unknown, drop = ignore): Found => {
+    const out: Found = new Map();
+    for (const [key, d] of b.one) {
+      if (key === "display" || (sized && /^(width|maxWidth|minWidth)$/.test(key))) continue;
+      const prop = table[key as keyof Table];
+      const value = typeof prop === "string" ? convert(key, d.value, rtl) : undefined;
+      if (value === undefined) drop(d);
+      else out.set(prop as string, { value, d });
+    }
+    // One prop for a width and its bounds (the root's content width): the one width CSS gives them (see bounded).
+    if (sized) {
+      const [width, min, max] = (["width", "minWidth", "maxWidth"] as const).map((key) => {
+        const d = b.one.get(key);
+        const value = d && (convert(key, d.value, rtl) as string | undefined);
+        if (d && value === undefined) drop(d);
+        return value === undefined ? undefined : { value, d: d! };
+      });
+      // (A min width alone bounds no width: it's a class no prop takes.)
+      if (!width && !max) {
+        if (min) drop(min.d);
+      } else {
+        const one = bounded(width?.value ?? "100%", min?.value, max?.value);
+        if (one === undefined) warn(`can't hold ${together([["width", width?.value], ["min-width", min?.value], ["max-width", max?.value]])} from its classes (the design has one content width), so it's ${(width ?? max)!.value}`);
+        out.set(sized, { value: one ?? (width ?? max)!.value, d: (width ?? max)!.d });
+      }
+    }
+    // Spacing: a block's margins and padding are both the padding around it, added up; where they can't be (`5%` and
+    // `8px`), the padding, its own, stays and the margin is said.
+    const spacing = new Map<string, Sides>();
+    const said = new Set<ClassDeclaration>();
+    for (const kind of ["padding", "margin"] as const) {
+      b[kind].forEach((d, i) => {
+        if (!d) return;
+        const prop = table[kind];
+        if (!prop || !LENGTH.test(d.value)) {
+          // Said once for a declaration on several sides.
+          if (b[kind].indexOf(d) === i) ignore(d, prop ? `: its \`${prop}\` can't be negative or automatic` : "");
+          return;
+        }
+        const sides = spacing.get(prop) ?? (spacing.set(prop, []), spacing.get(prop)!);
+        const was = sides[i];
+        const sum = !was ? d.value : /px$/.test(was.value) && /px$/.test(d.value) ? `${parseFloat(was.value) + parseFloat(d.value)}px` : plus(was.value, d.value);
+        if (sum !== undefined) sides[i] = was ? { ...d, value: sum } : d;
+        else if (!said.has(d) && said.add(d)) ignore(d, `: its \`${prop}\` can't add it to \`${was!.property}: ${was!.value}\``);
+      });
+    }
+    for (const [prop, sides] of spacing) {
+      const below = sidesOf(under(prop));
+      out.set(prop, { value: shorthand(below.map((s, i) => sides[i]?.value ?? s)), d: sides.find(Boolean)! });
+    }
+    if (b.radius.some(Boolean)) {
+      const below = sidesOf(under(table.radius ?? ""));
+      if (table.radius) out.set(table.radius, { value: shorthand(below.map((s, i) => b.radius[i]?.value ?? s)), d: b.radius.find(Boolean)! });
+      else new Set(b.radius).forEach((d) => d && drop(d));
+    }
+    // Borders, side by side (a Divider's line is its top border: other sides it doesn't have).
+    const used = new Set<ClassDeclaration>();
+    for (const part of PARTS) {
+      b.border[part].forEach((d, i) => {
+        if (!d || !table.border || (table.border === "borderTop" && i)) return;
+        out.set(`border${SIDES[i]}${part}`, { value: d.value, d });
+        used.add(d);
+      });
+      new Set(b.border[part]).forEach((d) => d && !used.has(d) && drop(d));
+    }
+    b.other.forEach((d) => drop(d));
+    return out;
+  };
+
+  const result: Record<string, any> = {};
+  const mobile: Record<string, any> = {};
+  const base = propsOf(boxes.always, unset, keep);
+  for (const [prop, { value }] of base) if (!has(prop)) result[prop] = value;
+
+  // A border width without a color shows in the text color (Tailwind's `currentColor`): a Button's own; a Column's or
+  // a Divider's own text class's, else the text color around it, which inherit.ts gives the props listed for it.
+  const ownColor: string | undefined =
+    name === "Button"
+      ? result.color ?? explicit.color ?? explicit.textColor ?? explicit.buttonColors?.color ?? explicit.values?.buttonColors?.color ?? defaults.buttonColors?.color
+      : (text.filter((d) => d.property === "color" && d.when === "always").pop() ?? boxes.always.one.get("color"))?.value;
+  const current: string[] = [];
+  const bare = (found: Found, set: (prop: string, value: string) => void, at = "", under?: Found) => {
+    for (const side of table.border === "borderTop" ? ["Top"] : table.border ? SIDES : []) {
+      const prop = `border${side}Color`;
+      if (!(parseFloat(String(found.get(`border${side}Width`)?.value)) > 0) || found.has(prop) || under?.has(prop) || has(prop)) continue;
+      set(prop, ownColor ?? BODY_TEXT);
+      if (ownColor === undefined) current.push(at + prop);
+    }
+  };
+  bare(base, (prop, value) => (result[prop] = value));
+
+  // Above a breakpoint (`sm:`): its value is the desktop one, and phones keep what's set without it (or the default).
+  const desktop = propsOf(boxes.desktop, (prop) => base.get(prop)?.value ?? explicit[prop] ?? unset(prop));
+  for (const [prop, { value, d }] of desktop) {
+    if (has(prop)) continue;
+    if (!onPhones(prop)) {
+      warn(`can't set \`${d.property}\` for one screen size (class \`${d.className}\`)`);
+      continue;
+    }
+    const phone = base.get(prop)?.value ?? unset(prop);
+    result[prop] = value;
+    if (phone !== undefined) mobile[prop] = phone;
+    else if (prop === "width") mobile.autoWidth = true;
+  }
+
+  // On phones (`max-sm:`): the `mobile` prop.
+  const onPhone = propsOf(boxes.phone, (prop) => result[prop] ?? explicit[prop] ?? unset(prop));
+  for (const [prop, { value, d }] of onPhone) {
+    if (onPhones(prop)) mobile[prop] = value;
+    else warn(`has no phone setting for \`${d.property}\` (class \`${d.className}\`)`);
+  }
+  if (onPhones("borderTopColor")) bare(onPhone, (prop, value) => (mobile[prop] = value), "mobile.", base);
+
+  // An Image has one display width: a width, a max and a min width give the one the browser shows (see bounded), on
+  // phones too, where its desktop ones apply unless it has its own.
+  if (name === "Image") {
+    const [width, max, min] = [result.width, result.maxWidth, result.minWidth];
+    delete result.minWidth;
+    // (A min width alone bounds no width: it's a class no prop takes.)
+    if (min !== undefined && width === undefined && max === undefined) keep(boxes.always.one.get("minWidth")!);
+    for (const [into, w, m] of [[result, width, max], [mobile, mobile.width ?? width, mobile.maxWidth ?? max]] as const) {
+      if ([w, m, min].filter((v) => v !== undefined).length < 2 || (into === mobile && mobile.width === undefined && mobile.maxWidth === undefined)) continue;
+      const one = bounded(w ?? "100%", min, m);
+      if (one === undefined) warn(`can't hold ${together([["width", w], ["min-width", min], ["max-width", m]])} from its classes (the editor's image has one width), so it's ${w ?? m}`);
+      into.width = one ?? w ?? m;
+      delete into.maxWidth;
+    }
+  }
+
+  // Hover: a Button's colors.
+  for (const [key, d] of boxes.hover.one) {
+    const prop = key === "bg" ? table.hoverBg : key === "color" ? table.hoverColor : undefined;
+    if (prop && !has(prop)) result[prop] = d.value;
+    else if (!prop) warn(`has no hover style for \`${d.property}\` (class \`${d.className}\`)`);
+  }
+  const hover = boxes.hover;
+  [hover.padding, hover.margin, hover.radius, hover.border.Width, hover.border.Style, hover.border.Color, hover.other].forEach((list) =>
+    new Set(list).forEach((d) => d && warn(`has no hover style for \`${d.property}\` (class \`${d.className}\`)`))
+  );
+  // Without a hover class a color stays on hover, as in the browser (a Button's own hover colors are its defaults').
+  for (const [color, hoverProp] of [[table.bg, table.hoverBg], [table.color, table.hoverColor]]) {
+    if (color && hoverProp && result[color] !== undefined && result[hoverProp] === undefined && !has(hoverProp)) result[hoverProp] = result[color];
+  }
+
+  // Hidden: `hidden`, `max-sm:hidden` (phones), `sm:hidden` (desktop), and shown again by a variant (`hidden sm:block`).
+  const display = (b: Box) => b.one.get("display");
+  const hidden = display(boxes.always)?.value === "none";
+  for (const [b, prop, also] of [[boxes.always, "hideOnDesktop", "hideOnMobile"], [boxes.phone, "hideOnMobile"], [boxes.desktop, "hideOnDesktop"]] as const) {
+    const d = display(b);
+    if (!d) continue;
+    if (!table.display || (d.value !== "none" && (b === boxes.always || !hidden))) {
+      (b === boxes.always ? keep : ignore)(d);
+      continue;
+    }
+    for (const key of [prop, ...(also ? [also] : [])]) if (explicit[key] === undefined) result[key] = d.value === "none";
+  }
+  if (display(boxes.hover)) warn(`has no hover style for \`display\` (class \`${display(boxes.hover)!.className}\`)`);
+
+  // Phone props: those given in `mobile` (or `values._override.mobile`) win; borders are one object there.
+  const theirs = { ...explicit.values?._override?.mobile, ...defined(explicit.mobile) };
+  const phone: Record<string, any> = {};
+  for (const [prop, value] of Object.entries(mobile)) {
+    if (/^border(Top|Right|Bottom|Left)/.test(prop)) {
+      if (theirs.border?.[prop] === undefined) phone.border = { ...phone.border, [prop]: value };
+    } else if (theirs[prop] === undefined) phone[prop] = value;
+  }
+  const out: Record<PropertyKey, any> = { ...result, ...explicit };
+  // A prop of a group given whole (`buttonColors={{ backgroundColor }}` with `text-white`): in it, under what it holds.
+  // (Not the width an Image's height gives: its `src`'s width is its size, and its display width the flat prop.)
+  for (const [prop, value] of Object.entries(result)) {
+    if (sizedByHeight && /^(width|maxWidth)$/.test(prop)) continue;
+    const group = Object.keys(defaults).find((g) => g !== prop && plain(defaults[g]) && prop in defaults[g] && plain(explicit[g]));
+    // (An image's `src` holds its natural size: a width class is its display width, the flat prop, which wins.)
+    if (group && !(group === "src" && /^(width|maxWidth|minWidth|height)$/.test(prop))) {
+      out[group] = { [prop]: value, ...defined(out[group]) };
+      delete out[prop];
+    }
+  }
+  // A Row's padding classes inset its content as in CSS: in its Columns (see row.ts), which src/model/elements.ts gives this;
+  // its text styles and the root's are the text blocks' in it (see inherit.ts), and the root's rewrite is a Row's
+  // without one of its own.
+  if (text.length && name !== "Column") out[PASSED] = text;
+  if (name === "Row" && (result.padding !== undefined || phone.padding !== undefined || text.length)) out[TAILWIND] = rowRewrite(result.padding, phone.padding, warn);
+  if (root && text.length) out[TAILWIND] = rowRewrite(undefined, undefined, (text) => console.warn(`[Unlayer] Row ${text}.`));
+  // A Column's margins are its Row's to place (see row.ts): beside its style, with a rewrite for a Row without one;
+  // so are its text styles, for its text blocks, and the border sides that take the text color around it.
+  const keys: string[] & { margin?: Margins; row?: unknown; text?: ClassDeclaration[]; current?: string[] } = Object.keys(style);
+  if (text.length && name === "Column") keys.text = text;
+  if (current.length) keys.current = current;
+  const { margin: _margin, ...phoneRest } = phone;
+  if (name === "Column" && (result.margin !== undefined || phone.margin !== undefined)) {
+    const found = [boxes.always, boxes.desktop, boxes.phone].flatMap((b) => b.margin).filter((d, i, all): d is ClassDeclaration => !!d && LENGTH.test(d.value) && all.indexOf(d) === i);
+    keys.margin = {
+      desktop: sidesOf(result.margin),
+      ...(phone.margin !== undefined ? { phone: sidesOf(phone.margin) } : {}),
+      ignored() {
+        this.ignored = () => {};
+        found.forEach((d) => ignore(d));
+      },
+    };
+    delete out.margin;
+  }
+  if (name === "Column" && (keys.margin || keys.text || keys.current)) keys.row = rowRewrite(undefined, undefined, (text) => console.warn(`[Unlayer] Row ${text}.`));
+  // Its own style wins; the keys from classes are listed (under the scope's symbol), as they're said here already.
+  if (keys.length || keys.margin || keys.text || keys.current) out.style = { ...style, ...defined(explicit.style), [TAILWIND]: keys };
+  const mobileGiven = defined(explicit.mobile);
+  if (Object.keys(phoneRest).length) out.mobile = { ...phoneRest, ...mobileGiven, ...(phone.border && mobileGiven.border ? { border: { ...phone.border, ...defined(mobileGiven.border) } } : {}) };
+  return out;
+}
diff --git a/packages/react/src/tailwind/raw.d.ts b/packages/react/src/tailwind/raw.d.ts
new file mode 100644
index 00000000..59af44aa
--- /dev/null
+++ b/packages/react/src/tailwind/raw.d.ts
@@ -0,0 +1,5 @@
+/** A file's text, built into the module (`?raw`: Vite and the package's build both read it so). */
+declare module "*?raw" {
+  const text: string;
+  export default text;
+}
diff --git a/packages/react/src/tailwind/row.ts b/packages/react/src/tailwind/row.ts
new file mode 100644
index 00000000..c84e6d31
--- /dev/null
+++ b/packages/react/src/tailwind/row.ts
@@ -0,0 +1,233 @@
+/**
+ * A Row's Tailwind padding classes (`p-8`, `px-6`, `max-sm:p-4`) and its Columns' margin classes (`mr-2`, `mx-2`), as
+ * in CSS: the padding inside what the row paints, around its content, so `bg-white p-8` insets the content in the
+ * white box; the margins around each Column, between them. A Row's `padding` prop is the editor's, around the row,
+ * outside its content background, and a Column has no margins in the editor: the classes go to its Columns instead.
+ * Each Column's gutter is the row's padding on its outer sides (the top and bottom of each, the left of the first and
+ * the right of the last; in a right-to-left document, where the first is on the right, the right of the first and the
+ * left of the last) and its own margins. On phones, where the Columns stack (unless `noStackMobile`), each gets the
+ * row's sides, the first the row's top and the last its bottom, and the space between two is the space between them on
+ * desktop (the one's right margin below it, the next's left margin above it; right to left, the one's left margin and
+ * the next's right one).
+ *
+ * A Column that paints nothing takes its gutter as padding, added to its own. A card (a Column with a background or a
+ * border) takes it as borders in the color around it (the row's content background, else its background, else the
+ * body's), as hand-written Elements templates do, so its own padding stays inside its box; its corners grow by the
+ * gutters (a corner's radius is its outer edge's). The design gets the same: the row's padding 0px, each column's
+ * padding or border, its phone ones in its phone settings.
+ *
+ * Where a card's gutter can't be a border (one of its own is on that side, the color around it isn't one opaque
+ * color, a length isn't in pixels), the row's padding classes stay its padding, around it, its Columns' margins are
+ * ignored, and that's said. A rounded corner whose two gutters differ can't stay round in the editor (its corners are
+ * circles), nor one whose gutters differ on phones (a Column's corners are the same there), so the row's cards get
+ * square corners, which is said too.
+ */
+import React from "react";
+import { BodyDefaults } from "@unlayer/exporters";
+import { isColumn } from "./column";
+
+/** On a component's `style` (beside the keys its classes inlined): what its classes give its Row (see props.ts). */
+const TAILWIND = Symbol.for("@unlayer/react-elements/tailwind");
+
+/** A Column's margin classes, for its Row to place: its four sides on desktop and on phones, and how to say they're ignored. */
+export interface Margins {
+  desktop: string[];
+  phone?: string[];
+  ignored(): void;
+}
+
+/** A box's four sides from CSS shorthand: `10px 20px` → top, right, bottom, left. */
+export function sidesOf(value: unknown): string[] {
+  const parts = (typeof value === "number" ? `${value}px` : String(value ?? "0px")).trim().split(/\s+/).map((p) => (p === "0" ? "0px" : p));
+  const [t, r = t, b = t, l = r] = parts;
+  return [t, r, b, l];
+}
+
+export const shorthand = ([t, r, b, l]: string[]) => (l !== r ? `${t} ${r} ${b} ${l}` : b !== t ? `${t} ${r} ${b}` : r !== t ? `${t} ${r}` : t);
+
+const ZERO = /^0[a-z%]*$/;
+// (Numbers as `\d*\.?\d+` reads them, but read once: see props.ts.)
+const LENGTH = /^(\d+(?:\.\d+)?|\.\d+)([a-z%]+)$/;
+const Z = "0px";
+const SIDES = ["Top", "Right", "Bottom", "Left"];
+const px = (value: string) => (ZERO.test(value) ? 0 : /^(?:\d+(?:\.\d+)?|\.\d+)px$/.test(value) ? parseFloat(value) : NaN);
+
+/** Two lengths added: in one unit, or one of them zero; undefined where they can't be. */
+export function plus(a: string, b: string): string | undefined {
+  if (ZERO.test(b)) return a;
+  if (ZERO.test(a)) return b;
+  const [x, y] = [LENGTH.exec(a), LENGTH.exec(b)];
+  return x && y && x[2] === y[2] ? `${parseFloat((Number(x[1]) + Number(y[1])).toFixed(2))}${x[2]}` : undefined;
+}
+
+/** A color one can see nothing through (a gutter's border paints over the card's background). */
+function opaque(color: string): boolean {
+  const c = color.trim().toLowerCase();
+  const alpha = /^(?:rgb|hsl)a?\(.*[,/]\s*([\d.]+)(%?)\s*\)$/.exec(c);
+  if (alpha) return parseFloat(alpha[1]) >= (alpha[2] ? 100 : 1);
+  return c !== "transparent" && !/^#([\da-f]{3}[\da-e]|[\da-f]{6}([\da-f][\da-e]|[\da-e][\da-f]))$/.test(c);
+}
+
+/** A Column's values from its props (flat, in a group, in `values`). */
+const valuesOf = (props: Record<string, any>) => ({ ...props.values, ...props.values?.border, ...props, ...props.border });
+
+/** A Column's border sides from its props (flat, in `border`, in `values`), each `{ Width, Style, Color }`. */
+function borderOf(props: Record<string, any> | undefined): Array<Record<string, string>> {
+  const v = props ? valuesOf(props) : {};
+  return SIDES.map((side) => Object.fromEntries(["Width", "Style", "Color"].flatMap((part) => (v[`border${side}${part}`] != null ? [[part, String(v[`border${side}${part}`])]] : []))));
+}
+
+/** Whether a border side shows: a width, a style that draws, a color one sees. */
+const shows = (side: Record<string, string>) => parseFloat(side.Width) > 0 && !/^(none|hidden)$/.test(side.Style ?? "") && side.Color?.trim() !== "transparent";
+/** A Column's flat border props, each unset: its gutter's `border` holds its sides. */
+const UNSET = Object.fromEntries(SIDES.flatMap((side) => ["Width", "Style", "Color"].map((part) => [`border${side}${part}`, undefined])));
+
+/** A card: a Column that paints its own box (a background or a border). Rounded corners alone paint nothing. */
+function paints(props: Record<string, any>): boolean {
+  const v = valuesOf(props);
+  return (!!v.backgroundColor && v.backgroundColor !== "transparent") || borderOf(props).some(shows);
+}
+
+/** The border a gutter gives a card, all four sides (a phone setting replaces them all): the gutter's, or its own. */
+function borderObject(gutter: string[], own: Array<Record<string, string>>, color: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  SIDES.forEach((side, i) => {
+    const parts = px(gutter[i]) > 0 ? { Width: gutter[i], Style: "solid", Color: color } : { Width: Z, Style: "solid", Color: "transparent", ...own[i] };
+    for (const [part, value] of Object.entries(parts)) out[`border${side}${part}`] = value;
+  });
+  return out;
+}
+
+/**
+ * A card's corners grown by its gutters (a radius is its outer edge's): each rounded corner by the gutter on its two
+ * sides, which must be equal (within 2px) for it to stay a circle; where they aren't, those two gutters.
+ */
+function grown(radius: number[], gutter: string[]): string | string[] {
+  const g = gutter.map(px);
+  // Top left (left, top), top right (right, top), bottom right (right, bottom), bottom left (left, bottom).
+  const pairs = [[g[3], g[0]], [g[1], g[0]], [g[1], g[2]], [g[3], g[2]]];
+  const at = radius.findIndex((r, c) => r > 0 && Math.abs(pairs[c][0] - pairs[c][1]) > 2);
+  return at >= 0 ? pairs[at].map((n) => `${n}px`) : shorthand(radius.map((r, c) => (r > 0 ? `${parseFloat((r + Math.max(...pairs[c])).toFixed(2))}px` : Z)));
+}
+
+/**
+ * The Row's rewrite of its children (src/model/elements.ts gives it them, its props, the root's and whether the
+ * document reads right to left): `padding` and `phone` (its phone padding) from its classes, and its Columns'
+ * margins, in its Columns. It takes the padding it puts in them out of the Row's props.
+ */
+export function insetColumns(padding: string | undefined, phone: string | undefined, warn: (text: string) => void) {
+  const said = new Set<string>();
+  const say = (text: string) => {
+    if (!said.has(text)) warn(text);
+    said.add(text);
+  };
+
+  return (children: React.ReactNode[], props: Record<string, any>, root?: Record<string, any>, rtl = false): React.ReactNode[] => {
+    const columns = children.filter(isColumn);
+    if (!columns.length) return children;
+    const margins: Array<Margins | undefined> = columns.map((column) => column.props.style?.[TAILWIND]?.margin);
+    /** What can't be done: the padding from its classes stays the Row's, around it, and the margins are ignored. */
+    const keep = (why: string) => {
+      say(`${padding !== undefined || phone !== undefined ? "keeps the padding from its classes around its Columns, as the editor's padding: its cards' gutters would be" : "can't give its cards gutters: they'd be"} borders in the color around them, and ${why}`);
+      margins.forEach((m) => m?.ignored());
+      return children;
+    };
+    const n = columns.length;
+    const stacks = !(props.noStackMobile ?? props.values?.noStackMobile ?? props.values?._override?.mobile?.noStackMobile);
+    const [row, rowPhone] = [sidesOf(padding), sidesOf(phone ?? padding)];
+    /** A Column's gutter: the row's padding on its outer sides and its own margins (on phones, stacked, see above). */
+    const gutterOf = (i: number, onPhone: boolean): Array<string | undefined> => {
+      const m = (onPhone ? (margins[i]?.phone ?? margins[i]?.desktop) : margins[i]?.desktop) ?? [Z, Z, Z, Z];
+      const [r, first, last] = [onPhone ? rowPhone : row, i === 0, i === n - 1];
+      // The side toward the Column before it (the one on the left, or right to left on the right), and toward the next.
+      const [before, after] = rtl ? [1, 3] : [3, 1];
+      if (onPhone && stacks) return [plus(first ? r[0] : m[before], m[0]), r[1], plus(last ? r[2] : m[after], m[2]), r[3]];
+      return [plus(r[0], m[0]), plus((rtl ? first : last) ? r[1] : Z, m[1]), plus(r[2], m[2]), plus((rtl ? last : first) ? r[3] : Z, m[3])];
+    };
+    const gutters = columns.map((_, i) => [gutterOf(i, false), gutterOf(i, true)]);
+    const cards = columns.map((column) => paints(column.props));
+    const ownPhoneBorder = (own: Record<string, any>) => own.mobile?.border ?? own.values?._override?.mobile?.border;
+
+    let color = "";
+    if (cards.some(Boolean)) {
+      const v = { ...props.values, ...props };
+      const body = root && { ...root.values, ...root };
+      color = [v.columnsBackgroundColor, v.backgroundColor, body?.backgroundColor ?? (body && BodyDefaults.backgroundColor)].find((c) => c && c !== "transparent") ?? "";
+      if (v.backgroundImage?.url || (!v.columnsBackgroundColor && !v.backgroundColor && body?.backgroundImage?.url)) return keep("a background image is around them, not one color");
+      if (!color) return keep("that color isn't known for a Row on its own (give the Row a background, `bg-*`)");
+      if (!opaque(color)) return keep(`that color (\`${color}\`) isn't opaque`);
+      for (const [i, column] of columns.entries()) {
+        if (!cards[i]) continue;
+        const sides = gutters[i].flat();
+        if (sides.includes(undefined)) return keep("their padding and margins from classes are in lengths that can't be added up");
+        const odd = sides.find((side) => Number.isNaN(px(side!)));
+        if (odd !== undefined) return keep(`a gutter of \`${odd}\` isn't in pixels`);
+        const own = borderOf(column.props);
+        const ownPhone = borderOf(ownPhoneBorder(column.props));
+        const clash = own.some((side, s) => shows(side) && px(gutters[i][0][s]!) > 0) || ownPhone.some((side, s) => shows(side) && px(gutters[i][1][s]!) > 0);
+        if (clash) return keep("a card has a border of its own on a side its gutter needs");
+      }
+    }
+
+    // Out of the Row, where the classes put it (a prop given wins over a class: then it's not theirs).
+    if (padding !== undefined) delete props.padding;
+    if (phone !== undefined && props.mobile) {
+      const { padding: _phone, ...rest } = props.mobile;
+      props.mobile = Object.keys(rest).length ? rest : undefined;
+    }
+
+    // Cards' corners, the row's alike: grown by their gutters, or all square where one can't stay round. A Column's
+    // corners are the same on phones (Elements has no phone setting for them), so its gutters there must give the same.
+    const held = columns.flatMap((_, i) => (cards[i] ? [i] : []));
+    const radii = held.map((i) => sidesOf(valuesOf(columns[i].props).borderRadius).map((r) => px(r) || 0));
+    let why = "";
+    const corners = held.map((i, k) => {
+      const [desktop, phone] = gutters[i].map((gutter) => grown(radii[k], gutter as string[]));
+      if (typeof desktop != "string") why ||= `the gutters that meet at one differ (${desktop.join(" and ")})`;
+      else if (typeof phone != "string") why ||= `on phones the gutters that meet at one differ (${phone.join(" and ")})`;
+      else if (phone !== desktop) why ||= "a corner's gutters on phones differ from its gutters on desktop, and its radius is the same on both";
+      return desktop as string;
+    });
+    if (why && radii.flat().some((r) => r > 0))
+      say(`can't keep its cards' rounded corners, so they're square: in the editor a corner is a circle, and ${why}. Make each corner's two gutters equal, and the same on phones (the Row's padding, the Columns' margins), to keep them round`);
+
+    // Its Columns, each with its gutter: padding added to its own, or a card's border (its phone settings too).
+    const out = columns.map((column, i): Record<string, any> => {
+      const own = column.props;
+      const [desktopGutter, phoneGutter] = gutters[i] as string[][];
+      if (!cards[i]) {
+        // Padding, added to its own (a length that can't be is said, and that Column keeps its own).
+        const ownPhone = own.mobile?.padding ?? own.values?._override?.mobile?.padding;
+        const sum = (base: unknown, more: Array<string | undefined>) =>
+          shorthand(
+            sidesOf(base).map((side, s) => {
+              const total = more[s] === undefined ? undefined : plus(side, more[s]!);
+              if (total === undefined) say(more[s] === undefined ? "can't add up its padding and its Columns' margins from classes, in lengths of different units, so a Column keeps its own" : `padding \`${more[s]}\` from its classes can't be added to a Column's \`${side}\`, so that Column keeps its own`);
+              return total ?? side;
+            })
+          );
+        const base = own.padding ?? own.values?.padding;
+        const padding = sum(base, desktopGutter);
+        const phonePadding = sum(ownPhone ?? base, phoneGutter);
+        return { padding, ...(ownPhone !== undefined || phonePadding !== padding ? { mobile: { ...own.mobile, padding: phonePadding } } : {}) };
+      }
+      const k = held.indexOf(i);
+      // A phone border replaces all four sides: written whole where the phone's differ, or the card has one of its own.
+      const phoneBorder = ownPhoneBorder(own);
+      const mobile = {
+        ...own.mobile,
+        ...(phoneBorder || desktopGutter.some((side, s) => side !== phoneGutter[s]) ? { border: borderObject(phoneGutter, borderOf(phoneBorder ?? own), color) } : {}),
+      };
+      return { ...UNSET, border: borderObject(desktopGutter, borderOf(own), color), ...(radii[k].some((r) => r > 0) ? { borderRadius: why ? Z : corners[k] } : {}), ...(Object.keys(mobile).length ? { mobile } : {}) };
+    });
+    // A web page's phone settings for a Column's border are written for an element its HTML doesn't have.
+    if (root?.mode === "web" && stacks && out.some((props, i) => cards[i] && props.mobile?.border))
+      say("keeps its cards' desktop gutters on phones: the editor's web export has no phone border for a Column");
+
+    margins.forEach((m) => m && (m.ignored = () => {}));
+    return children.map((child) => {
+      const i = columns.indexOf(child as React.ReactElement<Record<string, any>>);
+      return i < 0 ? child : React.cloneElement(columns[i], out[i]);
+    });
+  };
+}
diff --git a/packages/react/src/tailwind/sheet-reading.test.ts b/packages/react/src/tailwind/sheet-reading.test.ts
new file mode 100644
index 00000000..aff174e2
--- /dev/null
+++ b/packages/react/src/tailwind/sheet-reading.test.ts
@@ -0,0 +1,35 @@
+// @vitest-environment node
+import { expect, it, vi } from "vitest";
+import { classNameToDeclarations, loadTailwind } from "./index";
+import { growth } from "../test-timing";
+
+// Tailwind's stylesheets, as a handle builds them (each build is Tailwind's whole stylesheet again, read after it).
+const sheets = vi.hoisted(() => ({ text: "" }));
+vi.mock("./css", async (actual) => {
+  const css = await actual<typeof import("./css")>();
+  return { ...css, parseSheet: (text: string) => ((sheets.text = text), css.parseSheet(text)) };
+});
+
+// A spec of its own: what was slow here was so once Node 20 had optimized the reader on these stylesheets, which the
+// builds of another spec's tests before it change.
+it("reads a stylesheet in time linear in its size: each build reads Tailwind's whole stylesheet again", async () => {
+  // Its comments were taken out a character at a time, which Node 20, once it had optimized it, ran in time growing
+  // with the stylesheet's size squared: here 61 ms for the stylesheet of 1,600 classes (80 KB), 4.8 ms for 400's
+  // (20 KB); a compiler's of 2,400 (114 KB) took 118 ms, read after each of its builds.
+  const { parseSheet } = await vi.importActual<typeof import("./css")>("./css");
+  const handle = await loadTailwind({ theme: { extend: { colors: { brand: "#007291" } } } });
+  const built: string[] = [];
+  for (let r = 0; r < 4; r++) {
+    classNameToDeclarations(handle, Array.from({ length: 400 }, (_, i) => `indent-[${r * 400 + i}px]`).join(" "));
+    built.push(sheets.text);
+  }
+  const time = (i: number) => {
+    const start = performance.now();
+    parseSheet(built[i]);
+    return performance.now() - start;
+  };
+  // (Each read a few times first, in order, as a handle reads them: Node 20 optimizes the reader as it goes.)
+  for (let i = 0; i < 4; i++) for (let k = 0; k < 3; k++) time(i);
+  const { small, large, grows } = await growth(time, [0, 3], { ratio: 8, floor: 20 });
+  expect(grows ? `${small.toFixed(1)} ms for ${built[0].length} characters, ${large.toFixed(1)} ms for ${built[3].length}` : "linear").toBe("linear");
+});
diff --git a/packages/react/src/tailwind/tables.ts b/packages/react/src/tailwind/tables.ts
new file mode 100644
index 00000000..0aef67a5
--- /dev/null
+++ b/packages/react/src/tailwind/tables.ts
@@ -0,0 +1,33 @@
+/**
+ * How each Elements component takes classes: the prop each style goes to, written compactly. Space-separated
+ * `style=prop` pairs (`bg=backgroundColor`; a bare `padding` is `padding=padding`; `lineHeight=`: it has none, so
+ * the class is reported), the flags `text` (text styles), `container` (Row, Column, the root: no containerPadding)
+ * and `display` (it can be hidden), and `phone=` the props a phone variant (`max-sm:`) can set, as its `mobile` prop
+ * takes them. A content block's margins and padding go to its containerPadding unless it says otherwise; one not
+ * here (Html, Table, Video, a custom tool) takes only that. They live in this entry, not beside each component, so
+ * the main entry, which every bundle has, doesn't carry them.
+ */
+// Its width and the bounds on it are its one content width (see props.ts).
+const ROOT = "container bg=backgroundColor color=textColor fontFamily width=contentWidth maxWidth=contentWidth minWidth=contentWidth";
+const TEXT = "text phone=fontSize,lineHeight,textAlign";
+
+export const TABLES: Record<string, string> = {
+  // A Row's background paints the content width, as a section in a container does; its padding classes inset the
+  // content inside it, in its Columns, and a Column's margins are its Row's to place too (see row.ts).
+  Row: "container display bg=columnsBackgroundColor padding phone=padding",
+  Column: "container bg=backgroundColor padding margin border radius=borderRadius phone=padding,border,margin",
+  Email: ROOT,
+  Page: ROOT,
+  Document: ROOT,
+  Body: ROOT,
+  Paragraph: TEXT,
+  Heading: TEXT,
+  // Its padding is inside it; its margins are around it.
+  Button: "text bg=backgroundColor padding border radius=borderRadius width hoverBg=hoverBackgroundColor hoverColor phone=fontSize,lineHeight,textAlign,padding,width",
+  // An image has no corners of its own to round; its width, max and min width are its one display width (see props.ts).
+  Image: "width maxWidth minWidth textAlign phone=width,textAlign",
+  // Its line is its top border.
+  Divider: "border=borderTop width textAlign phone=width,textAlign",
+  Menu: "text color=textColor lineHeight= textAlign=align phone=fontSize",
+  Social: "textAlign=align",
+};
diff --git a/packages/react/src/tailwind/values.ts b/packages/react/src/tailwind/values.ts
new file mode 100644
index 00000000..455c3054
--- /dev/null
+++ b/packages/react/src/tailwind/values.ts
@@ -0,0 +1,140 @@
+/**
+ * A declaration's value as an email can take it: variables replaced by what they hold (the theme's, the element's
+ * own `--tw-*`, a registered property's initial value), `calc()` worked out, `rem` in pixels (16px, as React Email's
+ * pixel-based preset), and colors in hex or rgba (see color.ts).
+ */
+import { emailColors } from "./color";
+import { skip, split } from "./css";
+
+/** A variable's value, as written (it may use others). */
+export type Lookup = (name: string) => string | undefined;
+
+/**
+ * The most a declaration's value comes to with its variables replaced: 4,096 characters. Tailwind's own utilities come
+ * to about 300 at most (`transition`'s list of properties), and an email client clips a whole message past about 100 KB
+ * (Gmail at 102 KB). Variables that use each other twice over (`--a: var(--b) var(--b)`) double it at each step: some
+ * thirty steps, under a kilobyte of classes (which a Markdown's HTML can carry), would take more memory than a process
+ * has. A declaration whose variables come to more isn't inlined, and that's said, as for a variable that isn't set.
+ */
+export const MAX_VALUE = 4096;
+
+/** What `emailValue` gives for a declaration whose variables come to more than MAX_VALUE characters. */
+export const TOO_LONG = Symbol("too long");
+
+type Resolved = string | undefined | typeof TOO_LONG;
+
+/**
+ * `value` with each `var()` replaced; undefined when one is unset and has no fallback (the declaration is invalid), or
+ * TOO_LONG past MAX_VALUE. Each variable is worked out once per declaration (`known`), however many times it's used.
+ */
+function resolveVars(value: string, lookup: Lookup, known: Map<string, Resolved>, depth = 0): Resolved {
+  if (depth > 32) return undefined;
+  let out = "";
+  let from = 0;
+  for (let at = value.indexOf("var(", from); at >= 0; at = value.indexOf("var(", from)) {
+    const end = skip(value, at + 3);
+    const [written, ...fallback] = split(value.slice(at + 4, end - 1), ",");
+    const name = written.trim();
+    const set = lookup(name);
+    let resolved: Resolved;
+    if (set === undefined) resolved = fallback.length ? resolveVars(fallback.join(",").trim(), lookup, known, depth + 1) : undefined;
+    else if (known.has(name)) resolved = known.get(name);
+    else known.set(name, (resolved = resolveVars(set, lookup, known, depth + 1)));
+    if (resolved === undefined || resolved === TOO_LONG) return resolved;
+    out += value.slice(from, at) + resolved;
+    if (out.length > MAX_VALUE) return TOO_LONG;
+    from = end;
+  }
+  // (A value without variables is as written: only what they put in it counts.)
+  if (!from) return value;
+  out += value.slice(from);
+  return out.length > MAX_VALUE ? TOO_LONG : out;
+}
+
+const round = (n: number) => String(parseFloat(n.toFixed(4)) || 0);
+
+/** A number and its unit (`rem` read as px). */
+type Quantity = { n: number; unit: string };
+
+/** `calc()`'s expression worked out; throws where units can't combine (it's then kept as it is). */
+function evaluate(text: string): Quantity {
+  const tokens = text.match(/calc\(|[()*/]|[+-](?=\s)|[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?[a-z%]*|[+-]?infinity|\S/gi) ?? [];
+  let i = 0;
+  const quantity = (): Quantity => {
+    const token = tokens[i++];
+    if (token === "(" || token?.toLowerCase() === "calc(") {
+      const inner = sum();
+      if (tokens[i++] !== ")") throw new Error("calc");
+      return inner;
+    }
+    const match = /^([+-]?)(?:(infinity)|((?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)([a-z%]*))$/i.exec(token ?? "");
+    if (!match) throw new Error("calc");
+    const sign = match[1] === "-" ? -1 : 1;
+    if (match[2]) return { n: sign * Infinity, unit: "" };
+    const unit = match[4].toLowerCase();
+    return unit === "rem" ? { n: sign * parseFloat(match[3]) * 16, unit: "px" } : { n: sign * parseFloat(match[3]), unit };
+  };
+  const product = (): Quantity => {
+    let left = quantity();
+    while (tokens[i] === "*" || tokens[i] === "/") {
+      const op = tokens[i++];
+      const right = quantity();
+      if (op === "*") {
+        if (left.unit && right.unit) throw new Error("calc");
+        left = { n: left.n * right.n, unit: left.unit || right.unit };
+      } else if (!right.unit || right.unit === left.unit) left = { n: left.n / right.n, unit: right.unit ? "" : left.unit };
+      else throw new Error("calc");
+    }
+    return left;
+  };
+  const sum = (): Quantity => {
+    let left = product();
+    while (tokens[i] === "+" || tokens[i] === "-") {
+      const op = tokens[i++];
+      const right = product();
+      // The same unit, or a unitless 0 taking the other's.
+      const unit = left.unit === right.unit || (!right.unit && !right.n) ? left.unit : !left.unit && !left.n ? right.unit : undefined;
+      if (unit === undefined) throw new Error("calc");
+      left = { n: op === "+" ? left.n + right.n : left.n - right.n, unit };
+    }
+    return left;
+  };
+  const result = sum();
+  if (i !== tokens.length) throw new Error("calc");
+  return result;
+}
+
+/** Each `calc()` in `value` worked out (innermost first), where its units combine. */
+function calcs(value: string): string {
+  let out = "";
+  let from = 0;
+  const pattern = /calc\(/gi;
+  for (let match = pattern.exec(value); match; match = pattern.exec(value)) {
+    const at = match.index;
+    const end = skip(value, at + 4);
+    pattern.lastIndex = end;
+    let replaced: string;
+    try {
+      const { n, unit } = evaluate(value.slice(at, end));
+      // `calc(infinity * 1px)`, Tailwind's fully round corners: as large as the editor takes.
+      replaced = Number.isFinite(n) ? `${round(n)}${unit}` : `9999${unit}`;
+    } catch {
+      replaced = value.slice(at, end);
+    }
+    out += value.slice(from, at) + replaced;
+    from = end;
+  }
+  return out + value.slice(from);
+}
+
+/**
+ * A declaration's value for an email; undefined when a variable it uses isn't set (as the browser drops it), TOO_LONG
+ * when its variables come to more than MAX_VALUE characters.
+ */
+export function emailValue(value: string, lookup: Lookup): string | undefined | typeof TOO_LONG {
+  const resolved = resolveVars(value, lookup, new Map());
+  if (resolved === undefined || resolved === TOO_LONG) return resolved;
+  // (A number as `\d+\.?\d*` reads one, but read once: that splits a run of digits at each place it could, again.)
+  const pixels = calcs(resolved).replace(/(^|[\s(,])(-?(?:\d+(?:\.\d*)?|\.\d+))rem\b/g, (_, before: string, n: string) => `${before}${round(parseFloat(n) * 16)}px`);
+  return emailColors(pixels).replace(/\s+/g, " ").trim();
+}
diff --git a/packages/react/src/tailwind/written.ts b/packages/react/src/tailwind/written.ts
new file mode 100644
index 00000000..b1613dce
--- /dev/null
+++ b/packages/react/src/tailwind/written.ts
@@ -0,0 +1,38 @@
+/**
+ * What a class's value can be written as, in a prop or in markup's `style` (see props.ts and html.ts).
+ */
+import { cssValueSafe } from "@unlayer-internal/shared-elements";
+import { unsafeUrl } from "../markdown/sanitize";
+import type { ClassDeclaration } from "./declarations";
+
+/**
+ * A class's value as a prop can take it, or undefined where it can't: the editor's
+ * exporters write props into a `style="…"` (or a `<style>`) as they are, so nothing that ends an attribute or starts a
+ * tag (`"`, `<`, `>`, or a CSS escape of one of them or of `'`), and nothing CSS can't hold there (see cssValueSafe). A
+ * font family's names in double quotes are in single ones, as the exporters write them. (An arbitrary value from data,
+ * `[color:'"><img …>']`, can't add markup that way.)
+ */
+export function propValue({ property, value }: ClassDeclaration): string | undefined {
+  const written = property === "font-family" ? value.replace(/"([^"'\\<>]*)"/g, "'$1'") : value;
+  return /["<>]|\\(?:["'<>]|0{0,4}(?:22|27|3c|3e)(?![\da-f]))/i.test(written) || !cssValueSafe(written) ? undefined : written;
+}
+
+/** A string in CSS, single- or double-quoted (its quote closed). */
+const STRINGS = /'[^']*'|"[^"]*"/g;
+/** An image data URL of SVG, which markup keeps (see markupValue). */
+const SVG = /url\(\s*(["']?)data:image\/svg\+xml[;,][^"')]*\1\s*\)/gi;
+
+/**
+ * A class's value as markup's `style` can take it, or undefined where it can't. Markup's `style` is written escaped
+ * (its `"` as `&quot;`), so a value only can't hold what could end the attribute once its references and CSS escapes
+ * are read (`<`, `>`, or a CSS escape of one of them or of a quote: `font-['\\22><img …>']`), a URL that runs code or
+ * loads what isn't an image (`url(javascript:…)`, as a prop can't hold either), or, outside its strings, what ends a
+ * declaration or a block, or opens a comment. A string's `;` is its own (`url('/a.png?v=1;2')`). A font family's names
+ * and a `url()` in double quotes are in single ones, as a prop's are, where they hold no quote (`'Open Sans'`).
+ */
+export function markupValue({ property, value }: ClassDeclaration): string | undefined {
+  let written = property === "font-family" ? value.replace(/"([^"'\\<>]*)"/g, "'$1'") : value;
+  written = written.replace(/url\(\s*"([^"'\\<>]*)"\s*\)/gi, "url('$1')");
+  if (/[<>]|\\(?:["'<>]|0{0,4}(?:22|27|3c|3e)(?![\da-f]))/i.test(written) || unsafeUrl(written.replace(SVG, "url(a.png)"))) return undefined;
+  return cssValueSafe(written.replace(STRINGS, "''")) ? written : undefined;
+}
diff --git a/packages/react/src/test-setup.test.ts b/packages/react/src/test-setup.test.ts
new file mode 100644
index 00000000..5d6c2ac7
--- /dev/null
+++ b/packages/react/src/test-setup.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+
+// See test-setup.ts: a turn of the event loop between tests, so a file's synchronous tests that run more than a minute
+// together don't time out vitest's report of their results.
+describe("the test setup", () => {
+  let turned = false;
+  it("runs a test that leaves a macrotask behind", () => {
+    setImmediate(() => (turned = true));
+  });
+
+  it("turns the event loop before the next test", () => {
+    expect(turned).toBe(true);
+  });
+});
diff --git a/packages/react/src/test-setup.ts b/packages/react/src/test-setup.ts
index 511519aa..45e25377 100644
--- a/packages/react/src/test-setup.ts
+++ b/packages/react/src/test-setup.ts
@@ -1,5 +1,13 @@
 import '@testing-library/jest-dom';
+import { afterEach } from 'vitest';
 
 // Test setup for React Elements
 // Global test utilities can be added here
 // This file will be extended by the automation process
+
+// Vitest's worker sends the main process each test's result and reads the answer only when its event loop is free,
+// which it isn't between tests: a file's synchronous tests that run more than a minute together (the timing tests, on
+// a slower CI runner) fail the run with `Timeout calling "onTaskUpdate"`, every test passing. A turn of the event loop
+// after each test reads it. (The timer as it is here, before a test could replace it.)
+const turn = globalThis.setImmediate;
+afterEach(() => new Promise<void>((resolve) => turn(() => resolve())));
diff --git a/packages/react/src/test-timing.ts b/packages/react/src/test-timing.ts
new file mode 100644
index 00000000..942595e6
--- /dev/null
+++ b/packages/react/src/test-timing.ts
@@ -0,0 +1,100 @@
+/**
+ * Timing tests that hold on a busy or slower machine (a CI runner running other tests at once) and still fail on code
+ * whose cost grows faster than its size: every test here that times something goes through `growth` (a cost at two
+ * sizes) or `within` (a cost against a limit).
+ */
+
+/** Milliseconds `run` takes (awaited where it gives a promise), and what it gave. */
+async function timed<T>(run: () => T | Promise<T>): Promise<{ ms: number; result: T }> {
+  const start = performance.now();
+  const result = await run();
+  return { ms: performance.now() - start, result };
+}
+
+/**
+ * How many times slower this machine runs now than the one the limits were set on (1 at least): a fixed piece of
+ * string work, the fastest of three, against what it took there (Node 20, about 14 ms).
+ */
+export function slowness(): number {
+  const work = () => {
+    const text = '<p class="a b">x &amp; y, <a href="https://e.test/1">z</a></p>\n'.repeat(4000);
+    let n = 0;
+    for (let i = 0; i < 16; i++) n += text.replace(/<[^>]+>/g, "").split("&amp;").join("&").toUpperCase().length + JSON.stringify(text.split("\n")).length;
+    return n;
+  };
+  let fastest = Infinity;
+  for (let i = 0; i < 3; i++) {
+    const start = performance.now();
+    work();
+    fastest = Math.min(fastest, performance.now() - start);
+  }
+  return Math.max(1, fastest / 14);
+}
+
+/**
+ * Whether `run` takes less than `limit` ms (a limit set on a laptop, well under what the code it guards against took).
+ * One that takes longer is run twice more, its fastest kept, against the limit times this machine's `slowness` then:
+ * a garbage collection or a busy machine in one run isn't its cost, and a machine several times slower takes several
+ * times as long for the same work. Gives the fastest time, the limit it was held to, and what the first run gave.
+ *
+ * `retime` times another run in place of `run` (`again`), after what `before` gives it, untimed: where running it again
+ * would change what the test reads after (what it says), or would read what the first run kept (a handle's classes).
+ */
+export async function within<T, P = undefined>(
+  limit: number,
+  run: () => T | Promise<T>,
+  retime: { before?: () => P | Promise<P>; again?: (prepared: P) => unknown } = {}
+): Promise<{ ok: boolean; ms: number; limit: number; result: T }> {
+  const first = await timed(run);
+  if (first.ms < limit) return { ok: true, ms: first.ms, limit, result: first.result };
+  let ms = first.ms;
+  for (let i = 0; i < 2; i++) {
+    const prepared = (await retime.before?.()) as P;
+    ms = Math.min(ms, (await timed(() => (retime.again ? retime.again(prepared) : run()))).ms);
+  }
+  const scaled = limit * slowness();
+  return { ok: ms < scaled, ms, limit: scaled, result: first.result };
+}
+
+/**
+ * What a cost takes at two sizes (`time` takes the size and gives the milliseconds, or a promise of them), and whether
+ * it grows faster than its size: the larger more than `ratio` times the smaller and more than `floor` ms. Both sizes
+ * are timed on the same machine, so a slower one isn't taken for a slower cost.
+ *
+ * One that looks so is timed again: each size's fastest of three samples, a sample being as many timings as add up to
+ * `least` ms at least (20), their mean, so a small size's few milliseconds aren't noise; a garbage collection or a busy
+ * machine in one timing isn't its cost. (`time` is called again for a size: where what it times keeps what it built, it
+ * times on something fresh.) Given `next`, a size as much larger again, one that still looks so and took a second at
+ * most is timed there too, and grows only if it grows as fast again: a busy machine can slow a larger size more than a
+ * smaller one (its data out of the processor's caches, say), which looks like growth between them but isn't past
+ * them, where a cost that grows faster than its size grows faster at every size. (One past a second isn't: ten times
+ * its size could take minutes.)
+ */
+export async function growth(
+  time: (size: number) => number | Promise<number>,
+  [small, large]: [number, number],
+  { ratio, floor, next, least = 20 }: { ratio: number; floor: number; next?: number; least?: number }
+) {
+  const grows = (fast: number, quick: number) => fast > ratio * Math.max(quick, 0.05) && fast > floor;
+  const sample = async (size: number) => {
+    let total = 0;
+    let n = 0;
+    do {
+      total += await time(size);
+      n++;
+    } while (total < least && n < 100);
+    return total / n;
+  };
+  let quick = await time(small);
+  let fast = await time(large);
+  let past: number | undefined;
+  if (grows(fast, quick)) {
+    quick = Math.min(await sample(small), await sample(small), await sample(small));
+    fast = Math.min(fast, await sample(large), await sample(large));
+    if (next !== undefined && grows(fast, quick) && fast <= 1000) past = await time(next);
+  }
+  return { small: quick, large: fast, next: past, grows: grows(fast, quick) && (past === undefined || grows(past, fast)) };
+}
+
+/** `true` for a run `within` its limit, else what it took and the limit it was held to (for an assertion). */
+export const inTime = ({ ok, ms, limit }: { ok: boolean; ms: number; limit: number }): true | string => ok || `${ms.toFixed(0)} ms, past ${limit.toFixed(0)} ms`;
diff --git a/packages/react/src/test-utils.ts b/packages/react/src/test-utils.ts
index 0f73adf1..2c70df51 100644
--- a/packages/react/src/test-utils.ts
+++ b/packages/react/src/test-utils.ts
@@ -1,3 +1,9 @@
+import React from "react";
+import { REACT_18 } from "./engine/react-compat";
+
+/** React's act(): `react`'s since React 18.3, react-dom's test utils' before (18.0–18.2). */
+export const act: typeof React.act = (React as { act?: typeof React.act }).act ?? (await import("react-dom/test-utils")).act;
+
 /**
  * Asserts that a rendered component did NOT hit the error fallback.
  * The error fallback contains "failed to render" text — if that's
@@ -11,3 +17,26 @@ export function expectNoRenderError(container: HTMLElement): void {
     );
   }
 }
+
+/** The URL react-dom 19 writes for a `javascript:` one, as in an attribute: Elements writes it with any React. */
+export const BLOCKED_URL = "javascript:throw new Error(&#x27;React has blocked a javascript: URL as a security precaution.&#x27;)";
+
+const JAVASCRIPT_URL = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i;
+const unescaped = (value: string) => value.replace(/&(quot|amp|lt|gt|#x27);/g, (_, name: string) => ({ quot: '"', amp: "&", lt: "<", gt: ">", "#x27": "'" })[name]!);
+/** The names with "-" that aren't custom elements, as React tells them. */
+const NOT_CUSTOM = /^(annotation-xml|color-profile|font-face|font-face-src|font-face-uri|font-face-format|font-face-name|missing-glyph)$/;
+
+/**
+ * react-dom's markup with a `javascript:` URL written as Elements writes it: as react-dom 19 writes it, with any React
+ * (react-dom 18 writes it as given). In React 18's markup, a `src`, `href`, `action`, `formaction` or `xlink:href`, and
+ * an <object>'s `data`, but a custom element's (a name with "-" or an `is`, as React 18 tells one); React 19's is as
+ * Elements writes it.
+ */
+export function blockedUrls(html: string): string {
+  if (!REACT_18) return html;
+  return html.replace(/<([a-zA-Z][^\s/>]*)([^>]*)>/g, (tag, name: string, attributes: string) => {
+    if ((name.includes("-") && !NOT_CUSTOM.test(name)) || / is="/.test(attributes)) return tag;
+    const urls = name === "object" ? /^(src|href|action|formaction|xlink:href|data)$/ : /^(src|href|action|formaction|xlink:href)$/;
+    return `<${name}${attributes.replace(/ ([^\s="]+)="([^"]*)"/g, (whole, attribute: string, value: string) => (urls.test(attribute) && JAVASCRIPT_URL.test(unescaped(value)) ? ` ${attribute}="${BLOCKED_URL}"` : whole))}>`;
+  });
+}
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index 8c250538..6003887a 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -42,6 +42,7 @@ export type {
   MenuItem,
   // Utility types
   RenderMode,
+  ValuesInput,
   MobileProps,
   DeviceProps,
 } from "@unlayer-internal/shared-elements";
@@ -87,6 +88,21 @@ export type BorderInput = {
     : NonNullable<ColumnValues["border"]>[K];
 };
 
+/** Imported locally for the aliases below. */
+import type { TextAlign } from "@unlayer-internal/shared-elements";
+
+/** `align`, as HTML and React Email name it, for a block's `textAlign`. */
+export type AlignAlias = {
+  /** Alias of `textAlign` (which wins where both are given). */
+  align?: TextAlign;
+};
+
+/** `textColor` for a text block's `color`. */
+export type TextColorAlias = {
+  /** Alias of `color` (which wins where both are given). */
+  textColor?: string;
+};
+
 /** Heading levels (h1–h6). */
 export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
diff --git a/packages/react/src/utils/closest-name.ts b/packages/react/src/utils/closest-name.ts
new file mode 100644
index 00000000..5a13cbb7
--- /dev/null
+++ b/packages/react/src/utils/closest-name.ts
@@ -0,0 +1,14 @@
+/**
+ * The first of `names` a slip away from `name`, case aside: a letter more, less or another, or two swapped
+ * (`textColour`, `fontsize`, `textAling`). What a warning about a prop no component takes suggests instead.
+ */
+export function closestName(name: string, names: string[]): string | undefined {
+  const a = name.toLowerCase();
+  return names.find((other) => {
+    const b = other.toLowerCase();
+    let i = 0;
+    while (a[i] && a[i] == b[i]) i++;
+    const rest = (m: number, n: number) => a.slice(i + m) == b.slice(i + n);
+    return other != name && (rest(1, 1) || rest(1, 0) || rest(0, 1) || (a[i] == b[i + 1] && a[i + 1] == b[i] && rest(2, 2)));
+  });
+}
diff --git a/packages/react/src/utils/collect.ts b/packages/react/src/utils/collect.ts
index 2d750c88..1292155b 100644
--- a/packages/react/src/utils/collect.ts
+++ b/packages/react/src/utils/collect.ts
@@ -1,74 +1,38 @@
 /**
- * The render that collects a template's Rows, Columns and blocks (see
- * normalize.tsx). While one runs, those components record their props and
- * render markers instead of HTML; React renders everything else (the user's
- * components, Fragments, conditions, Context). A render of Elements' own
- * inside it (a row's HTML, a nested renderToHtml) is under `null`: nothing is
- * collected there. A stack, not React context: Server Components have no
- * context, and a collecting render can start inside another.
+ * What collecting a template records (see record.tsx, and src/model, which makes the template's model from it): each
+ * Row, Column, block, scope and head entry it renders, where it renders it, in the content the collecting walk gives.
  */
-import React from "react";
-
-export type Recorded =
-  | { kind: "row" | "column"; props: Record<string, any> }
-  | { kind: "block"; type: React.ComponentType<any>; props: Record<string, any> }
-  | { kind: "boundary"; element: React.ReactElement };
-
-export interface Collection {
-  /** In each marker, so markup a template writes can't pass for one. */
-  nonce: string;
-  recorded: Recorded[];
-  /** Markup is guarded too, as components are (a render once more after one threw: see normalize.tsx's `collected`). */
-  markup?: boolean;
-  /**
-   * The React Elements' components call isn't the renderer's (a bundler gave them other copies, as Next.js's
-   * server layers can): `useId()` can't tell this render from one inside it, so Rows, Columns and blocks record
-   * while it's collecting.
-   */
-  blind?: boolean;
-}
-
-// Shared by every copy of Elements a process loads (a project's ESM and CommonJS builds, a tool's own): a render one
-// copy starts collects the Rows, Columns and blocks another's template uses.
-const SHARED = Symbol.for("@unlayer/react-elements/collecting");
-const frames: Array<Collection | null> = ((globalThis as Record<symbol, unknown>)[SHARED] ??= []) as Array<Collection | null>;
-
-/** The collecting render under way, if any (and not a render of Elements' own inside it). */
-export function collecting(): Collection | undefined {
-  return frames[frames.length - 1] ?? undefined;
-}
-
-/** Runs `run` with `frame` collecting (or, with `null`, nothing collecting). */
-export function within<T>(frame: Collection | null, run: () => T): T {
-  frames.push(frame);
-  try {
-    return run();
-  } finally {
-    frames.pop();
-  }
-}
-
-export const MARK = "unlayer-mark";
+import type React from "react";
+import type { Item } from "../engine/output";
+
+/** Where it is in the template (`Row 3 › Column 1 › Button`), worked out for the errors that name it (see `whereIs`). */
+type Placed = { where?: () => string };
+
+/** Where a record is in the template (`Row 3 › Column 1 › Button`). */
+export const whereIs = (record: Placed | undefined): string | undefined => record?.where?.();
+
+export type Recorded = Placed &
+  (
+    | { kind: "row" | "column"; props: Record<string, any> }
+    /** `load`: the compiler of the copy of Elements whose <Tailwind> it is (the async renderers compile its config with it). */
+    | { kind: "tailwind"; props: Record<string, any>; load?: unknown }
+    /**
+     * What a component gives the document's head, and the root's props unless it sets them (a <Font>); `design`, what
+     * it gives the design (a <Font>'s URL on the fonts of its family). `children` (a <Head>'s) are walked inside it, as
+     * the template's content is: its tags are the HTML of what they render (`content`).
+     */
+    | { kind: "head"; tags: (mode: string) => string[]; root?: Record<string, unknown>; json?: string; design?: (body: any) => void; children?: React.ReactNode; content?: Item[] }
+    /** `rich`: text with elements in it, rendered inside its record (see record.tsx). */
+    | { kind: "block"; type: React.ComponentType<any>; props: Record<string, any>; rich?: boolean }
+    /** A component of the template's own; `output`, what it returned (see src/model's keptMarkup). */
+    | { kind: "boundary"; element: React.ReactElement; output?: { value: unknown } }
+  );
 
 /**
- * On the Rows, Columns and blocks that record themselves while a template is collected (0.2 and later). One of an
- * older copy (0.1.x, from a package still on it) doesn't, and guard records it in its place (see record.tsx).
+ * On Elements' Rows, Columns and blocks (0.2 and later): a collecting walk records them. One of an older copy
+ * (0.1.x, from a package still on it) is recognized by its name and its code instead (see record.tsx).
  */
 export const RECORDS = Symbol.for("@unlayer/react-elements/records");
 
-/**
- * The collecting render's `identifierPrefix`: React puts it at the start of every `useId()` there (after its
- * opening `:` or `«`), so a Row, Column or block can tell that render from another one started inside it (a
- * component rendering a block to a string with react-dom), where it renders what it renders instead of a
- * marker. React's own ids never hold a "-", so none of them starts with it.
- */
-export const COLLECTING_ID = "unlayer-collect-";
-
-/**
- * A marker for what's recorded at `at`: its start ("o"), end ("c"), a component that failed ("f"), or a block.
- * React writes its attributes in this order, which the patterns that find markers in HTML spell out exactly
- * (normalize.tsx): nothing looser, as they run on HTML that holds the template's own.
- */
-export function marker(collection: Collection, at: number, edge?: "o" | "c" | "f"): React.ReactElement {
-  return React.createElement(MARK, { key: `${at}${edge ?? ""}`, "data-n": collection.nonce, "data-i": at, ...(edge ? { "data-e": edge } : {}) });
-}
+/** On <Head> and <Font> (the `head` and `font` entries): what they give the document's head, as a record. */
+export const HEAD_ENTRY = Symbol.for("@unlayer/react-elements/head-entry");
diff --git a/packages/react/src/utils/container-defaults.ts b/packages/react/src/utils/container-defaults.ts
index ac856528..0f46e417 100644
--- a/packages/react/src/utils/container-defaults.ts
+++ b/packages/react/src/utils/container-defaults.ts
@@ -18,25 +18,7 @@ import type { BodyValues, RowValues, ColumnValues } from "@unlayer-internal/shar
 
 // Body defaults from the editor schema.
 // Filter out popup-specific fields that aren't relevant for email/web rendering.
-const allBodyDefaults = BodyDefaults as Record<string, any>;
-const {
-  popupPosition: _p1,
-  popupDisplayDelay: _p2,
-  popupWidth: _p3,
-  popupHeight: _p4,
-  popupBackgroundColor: _p5,
-  popupBackgroundImage: _p6,
-  popupOverlay_backgroundColor: _p7,
-  popupCloseButton_position: _p8,
-  popupCloseButton_backgroundColor: _p9,
-  popupCloseButton_iconColor: _p10,
-  popupCloseButton_borderRadius: _p11,
-  popupCloseButton_margin: _p12,
-  popupCloseButton_action: _p13,
-  ...bodyRest
-} = allBodyDefaults;
-
-export const BODY_DEFAULTS = bodyRest as BodyValues;
+export const BODY_DEFAULTS = Object.fromEntries(Object.entries(BodyDefaults).filter(([key]) => !key.startsWith("popup"))) as BodyValues;
 
 export const ROW_DEFAULTS = { ...RowDefaults } as RowValues;
 
diff --git a/packages/react/src/utils/container-render.ts b/packages/react/src/utils/container-render.ts
new file mode 100644
index 00000000..4b6f5497
--- /dev/null
+++ b/packages/react/src/utils/container-render.ts
@@ -0,0 +1,30 @@
+/**
+ * A Row's or Column's own HTML (its props mapped, its exporter called): what fails there fails the render, or with
+ * `onError: "omit"` leaves that Row or Column out, of the HTML, the plain text and the design alike, as a block that
+ * fails is left out (model/elements.ts's markup finds which by the error's record, which the render's scope keeps:
+ * an error kept after the render keeps nothing of it).
+ */
+import { RenderError } from "@unlayer-internal/shared-elements";
+import { whereIs } from "./collect";
+import { isTailwindError } from "./tailwind";
+import { scopeCache } from "./render-scope";
+
+const CONTAINERS = {};
+/** The records of the Rows and Columns whose own HTML failed in this render, by the error each failed with. */
+const records = () => scopeCache(CONTAINERS, () => new WeakMap<RenderError, object>());
+
+/** `render()`, a Row's or Column's (`record`, recorded where `place` says when it has none), failing as it. */
+export function renderContainer<T>(name: "Row" | "Column", record: object | undefined, place: string, render: () => T): T {
+  try {
+    return render();
+  } catch (error) {
+    // What its Columns or blocks threw names them already.
+    if (error instanceof RenderError || isTailwindError(error)) throw error;
+    const failure = new RenderError(`${name} failed to render: ${String((error as Error)?.message ?? error)}`, name, whereIs(record as Parameters<typeof whereIs>[0]) ?? place, error);
+    if (record) records().set(failure, record);
+    throw failure;
+  }
+}
+
+/** The record of the Row or Column whose own HTML failed with `error` (see renderContainer). */
+export const containerOf = (error: unknown): object | undefined => (error instanceof RenderError ? records().get(error) : undefined);
diff --git a/packages/react/src/utils/create-component.tsx b/packages/react/src/utils/create-component.tsx
index 129aaa9d..0f36e1f3 100644
--- a/packages/react/src/utils/create-component.tsx
+++ b/packages/react/src/utils/create-component.tsx
@@ -7,20 +7,24 @@
  */
 
 import React from "react";
-import { collecting, RECORDS } from "./collect";
-import { recordBlock, whileCollecting } from "./record";
+import { RECORDS } from "./collect";
 import type { ExporterName } from "@unlayer/types";
 
 /** Exporter map keyed by display mode. Defined locally until added to @unlayer/types. */
 type ItemExporters = Partial<Record<ExporterName, (...args: any[]) => string>>;
 import type { RenderMode, UnlayerConfig } from "@unlayer-internal/shared-elements";
-import type { DeviceProps, SizeInput } from "../types";
-import { contentSlotWidth, pinImageSrc } from "./image-sizing";
+import type { ContentValues, DeviceProps, SizeInput } from "../types";
+import type { ValuesInput } from "@unlayer-internal/shared-elements";
+import { contentSlotWidth, DEFAULT_CONTAINER_PADDING, pinImageSrc, toPx } from "./image-sizing";
+import { guest, remember, textRegion } from "./render-scope";
+import { cssUrlValue } from "./css-url";
 import {
   mergeValues,
   generateHtmlFromTextJson,
   normalizeValuesForExporter,
   DEFAULT_CONFIG,
+  cssValueSafe,
+  unrunLinks,
 } from "@unlayer-internal/shared-elements";
 
 
@@ -37,13 +41,31 @@ export const UNLAYER_RENDER_KEY = "__unlayerRender";
  */
 export const UNLAYER_CONFIG_KEY = "__unlayerItemConfig";
 
+/** On this copy's roots and kept markup: Elements' own components, as its Rows, Columns and blocks are. */
+export const OWN = Symbol("@unlayer/react-elements/own");
+
+/**
+ * Elements' own components (roots, Rows, Columns, blocks, kept markup), which call no hooks: the engine renders
+ * Elements' markup calling them as they are (see the engine's renderStatic).
+ */
+export const isOwn = (type: unknown): boolean => {
+  const t = type as Record<PropertyKey, unknown> | null;
+  return !!t && !!(t[OWN] || t[UNLAYER_RENDER_KEY] || t[RECORDS]);
+};
+
 /**
  * Base props that all item components support
  */
 export interface BaseItemComponentProps extends DeviceProps {
   children?: React.ReactNode;
+  /** Class names on the element it renders (a Paragraph's or Heading's text, a Button's link, an Image's img); HTML only. */
   className?: string;
+  /** Inline CSS on that element, after the renderer's own (a prop given wins over the same property); HTML only. */
   style?: React.CSSProperties;
+  /** The builder's settings every block has (an anchor, a display condition, …), beside its own values. */
+  values?: ValuesInput<ContentValues>;
+  /** Left out of the plain text (`renderToPlainText`), as a footer or a button often is. */
+  skipInText?: boolean;
   mode?: RenderMode;
   /** Padding of the content wrapper around this item — a number (→ px) or a CSS
    *  string ("10px", "16px 24px"). Applied by the containing Column. */
@@ -106,6 +128,13 @@ export interface ItemComponentConfig<TValues, TSemanticProps> {
   /** Skip the content-container wrapper when this component's exporter returns
    *  an empty string for an unsupported mode. */
   omitEmptyOutput?: boolean;
+
+  /** The tag that renders it, which its `style` and `className` go on (see hatch): its first by default. */
+  at?: RegExp;
+
+  /** Values it takes that its defaults leave unset (the editor's export reads them where given), so a prop naming one
+   *  isn't said to be ignored. */
+  names?: readonly string[];
 }
 
 /**
@@ -118,37 +147,30 @@ export type ItemComponentProps<TSemanticProps> = BaseItemComponentProps &
 // Internal: rendering helpers (merged from render-component.tsx)
 // ============================================
 
-interface ErrorFallbackProps {
-  type: string;
-  error: Error;
-  className?: string;
-  style?: React.CSSProperties;
-}
+/** A tag's attribute `name` set: `edit` gives its value from the one it has, or it's added as `value` (a `$` in it as it is). */
+const attr = (tag: string, name: string, value: string, edit: (own: string) => string) =>
+  tag.includes(` ${name}="`) ? tag.replace(new RegExp(` ${name}="([^"]*)`), (_, own: string) => ` ${name}="${edit(own)}`) : tag.replace(/^<[\w:-]+/, (open) => `${open} ${name}="${value}"`);
 
-/** Error fallback component shown when an exporter throws. */
-const ErrorFallback: React.FC<ErrorFallbackProps> = ({
-  type,
-  className,
-  style
-}) => (
-  <div className={className} style={style}>
-    <div
-      style={{
-        padding: "20px",
-        backgroundColor: "#fee",
-        border: "1px solid #fcc",
-        borderRadius: "4px",
-        color: "#c33",
-        textAlign: "center",
-        fontFamily: "system-ui, sans-serif"
-      }}
-    >
-      <strong>{type} failed to render.</strong>
-      <br />
-      <small>Check console for details.</small>
-    </div>
-  </div>
-);
+/**
+ * A component's `style` and `className` on the tag that renders it (`at`, in its HTML): the escape hatch for CSS no
+ * prop takes. Its declarations go after the tag's own, so they win, except where a prop of the component (`given`)
+ * sets the same property: props win. Inline, as email clients need; a value that could end the rule is left out, and
+ * a `"` (a font stack's, `url("…")`) is written as `&quot;`, which the browser reads as one and can't end the attribute.
+ */
+export function hatch(html: string, at: RegExp, style: unknown, className: unknown, given: Record<string, unknown>): string {
+  const css = Object.entries(style ?? {})
+    .filter(([key, value]) => value != null && value !== "" && given[key] === undefined)
+    .map(([key, value]) => `${key.replace(/[A-Z]/g, "-$&").toLowerCase()}:${typeof value == "number" && !/^(lineHeight|fontWeight|opacity|zIndex|flex|order)/.test(key) ? `${value}px` : value}`)
+    .filter((d) => cssValueSafe(d) && !/\\/.test(d))
+    .map((d) => d.replace(/"/g, "&quot;"))
+    .join(";");
+  const names = className ? safeName(className, true) : "";
+  if (!css && !names) return html;
+  return html.replace(at, (tag) => {
+    const named = names ? attr(tag, "class", names, (own) => `${names} ${own}`) : tag;
+    return css ? attr(named, "style", css, (own) => `${withoutTrailing(own)};${css}`) : named;
+  });
+}
 
 interface RenderConfig<T = any> {
   type: string;
@@ -159,9 +181,11 @@ interface RenderConfig<T = any> {
   args?: any[];
   /** Column/body context merged into the exporter `meta` (8th arg). */
   metaContext?: Record<string, any>;
-  innerHTML?: string;
   _config?: UnlayerConfig;
   exporter: Function;
+  /** Where its `style` and `className` go, and the props that win over them (see hatch). */
+  at?: RegExp;
+  given?: Record<string, unknown>;
 }
 
 /**
@@ -184,93 +208,71 @@ export function nextHtmlId(config: any, prefix: string): string {
  */
 export function safeName(value: unknown, spaces = false): string {
   const text = String(value ?? "");
+  // (Most are ids and class names Elements gives, which hold none of it.)
+  if (/^[\w-]*$/.test(text)) return text;
   // Class names apart on lines or by tabs stay apart, as the browser reads them.
   return spaces ? text.replace(/[\t\n\f\r]/g, " ").replace(/["'<>&`\u0000-\u001f\u007f]/g, "") : text.replace(/["'<>&`\s\u0000-\u001f\u007f]/g, "");
 }
 
-/** A block's or row's `_meta` with its id and class names kept to what they can hold (see `safeName`). */
-export const safeMeta = <T extends { htmlID?: unknown; htmlClassNames?: unknown }>(meta: T) => ({ ...meta, htmlID: safeName(meta.htmlID), htmlClassNames: safeName(meta.htmlClassNames, true) });
+/** `style` without the whitespace and `;`s it ends in (as `/[\s;]*$/` finds them: from its end, read once). */
+function withoutTrailing(style: string): string {
+  let end = style.length;
+  while (end && /[\s;]/.test(style[end - 1])) end--;
+  return style.slice(0, end);
+}
 
-/** Add _meta fields if not present. */
-function ensureMeta(values: any, type: string, index: number = 0): any {
-  return {
-    ...values,
-    _meta: {
-      htmlID: `u_content_${type.toLowerCase()}_${index + 1}`,
-      htmlClassNames: `u_content_${type.toLowerCase()}`,
-      ...(values._meta || {})
-    }
-  };
+/**
+ * Values with their background image's URL as the editor's exporters can write it (see cssUrlValue); the design keeps
+ * it as given. With `defaults`, the image takes them where it sets none.
+ */
+export function cssUrl(values: Record<string, any>, defaults?: Record<string, any>): void {
+  const image = values.backgroundImage;
+  if (image) values.backgroundImage = { ...defaults, ...image, url: cssUrlValue(String(image.url ?? "")) };
 }
 
 /**
- * Render a component by calling its exporter and wrapping the HTML output.
- * Handles error boundaries, exporterConfig construction, and container vs item calling conventions.
+ * A row's or block's HTML inside its display condition, as the editor's export writes it: the condition's `before` and
+ * `after` (an email service's tags, `{% if customer.vip %}` and `{% endif %}`) around it, as given, so the service
+ * shows it only where it's met.
  */
+export function withDisplayCondition(html: string, values: Record<string, any> | undefined): string {
+  const condition = values?.displayCondition;
+  return condition ? textRegion([condition.before, html, condition.after].join("\n")) : html;
+}
+
+/** A block's or row's `_meta` with its id and class names kept to what they can hold (see `safeName`). */
+export const safeMeta = <T extends { htmlID?: unknown; htmlClassNames?: unknown }>(meta: T) => ({ ...meta, htmlID: safeName(meta.htmlID), htmlClassNames: safeName(meta.htmlClassNames, true) });
+
+/** A text block (left-aligned by default) in a right-to-left document starts on the right, unless it's aligned. */
+export function rtlAlign(values: Record<string, any>, defaults: Record<string, any>, direction: unknown): void {
+  if (textDirectionOf(direction) === "rtl" && values.textAlign === undefined && defaults.textAlign === "left") values.textAlign = "right";
+}
+
 /** A direction the `dir` attribute takes (ltr, rtl, auto). Anything else is dropped: it's written into markup. */
 export function textDirectionOf(value: unknown): "ltr" | "rtl" | "auto" | undefined {
   const dir = typeof value === "string" ? value.trim().toLowerCase() : "";
   return dir === "ltr" || dir === "rtl" || dir === "auto" ? dir : undefined;
 }
 
+/**
+ * Render a component by calling its exporter and wrapping the HTML output. An exporter that throws fails the block
+ * (the Column rendering it says which, as `onError` says).
+ */
 function renderComponent<T = any>(config: RenderConfig<T>): JSX.Element {
-  const { type, values, mode, className, style, args = [], innerHTML, _config, exporter, metaContext } = config;
-
-  try {
-    // Build exporterConfig from _config (falls back to defaults)
-    const cfg = _config ?? DEFAULT_CONFIG;
-    const exporterConfig = {
-      generateHtmlFromTextJson,
-      toSafeHtml: cfg.toSafeHtml,
-      textDirection: textDirectionOf(cfg.textDirection),
-      cdnBaseUrl: cfg.cdnBaseUrl,
-    };
-
-    // Call exporter with appropriate arguments
-    let html: string;
-    if (innerHTML !== undefined) {
-      // Container components (Row, Body) take innerHTML first
-      html = exporter(innerHTML, values, ...args);
-    } else {
-      // Content components take values first
-      // Item exporters signature: (values, index, colIndex, cells, bodyValues, rowValues, embeddedValues, meta)
-      // Args 2-7 are deprecated positional params; the 8th arg is a meta object with all context
-      const meta = {
-        exporterConfig,
-        mergeTagState: cfg.mergeTagState,
-        ...(metaContext ?? {}),
-      };
-      html = exporter(values, ...args, undefined, meta);
-    }
-
-    // Ensure string output
-    html = typeof html === "string" ? html : String(html);
-
-    // Return rendered component
-    return (
-      <div
-        className={className}
-        style={style}
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-    );
-  } catch (error) {
-    console.error(`${type} rendering failed:`, error);
-    return (
-      <ErrorFallback
-        type={type}
-        error={error as Error}
-        className={className}
-        style={style}
-      />
-    );
-  }
+  const { values, className, style, args = [], _config, exporter, metaContext, at, given } = config;
+  // exporterConfig from _config (falls back to defaults)
+  const cfg = _config ?? DEFAULT_CONFIG;
+  const exporterConfig = { generateHtmlFromTextJson, toSafeHtml: cfg.toSafeHtml, textDirection: textDirectionOf(cfg.textDirection), cdnBaseUrl: cfg.cdnBaseUrl };
+  // Item exporters' signature: (values, index, colIndex, cells, bodyValues, rowValues, embeddedValues, meta). Args 2-7
+  // are deprecated positional params; the 8th arg is a meta object with all context. (A custom tool's exporter, and
+  // the config's `toSafeHtml`, are the user's: see `guest`.)
+  const html = guest(() => exporter(values, ...args, undefined, { exporterConfig, mergeTagState: cfg.mergeTagState, ...metaContext }));
+  // A string, with its `style` and `className` on the tag that renders it (a table its repeat rule's rows are in,
+  // marked for the plain text: see textRegion).
+  const written = hatch(String(html), at ?? /<[a-z][^>]*>/, style, className, given ?? {});
+  return <div dangerouslySetInnerHTML={{ __html: config.type === "Table" && cfg.mergeTagState ? textRegion(written) : written }} />;
 }
 
-// ============================================
-// Public API
-// ============================================
-
 /**
  * Create an item component (Button, Heading, Paragraph, etc.)
  *
@@ -291,46 +293,30 @@ export function createItemComponent<
   TValues extends Record<string, any> = any,
   TSemanticProps = any
 >(
-  config: ItemComponentConfig<TValues, TSemanticProps>
+  given: ItemComponentConfig<TValues, TSemanticProps>
 ): React.FC<ItemComponentProps<TSemanticProps>> {
+  // A built-in block's links with no URL that runs code, in the HTML and the design alike (see unrunLinks).
+  const config = given.contentType ? given : { ...given, propMapper: (props: Parameters<typeof given.propMapper>[0]) => unrunLinks(given.propMapper(props), given.name) };
   // Inner render function — no hooks, safe to call as a plain function (Column does this)
   function renderFn(
     props: ItemComponentProps<TSemanticProps>
   ): React.ReactElement | null {
-    const {
-      // Base props
-      mode: modeProp,
-      className,
-      style,
-
-      // Internal props
-      index = 0,
-      _metaHtmlId,
-      colIndex = 0,
-      cells = [],
-      bodyValues = {},
-      rowValues = {},
-      columnValues = {},
-      _config,
-
-      // Children
-      children,
-
-      // Rest are semantic props
-      ...restProps
-    } = props as ItemComponentProps<TSemanticProps>;
+    // Base props, then internal props (from the Column), children, and the semantic props.
+    const { mode: modeProp, className, style, index = 0, _metaHtmlId, colIndex = 0, cells = [], bodyValues = {}, rowValues = {}, columnValues = {}, _config, _record: _r, children, ...restProps } =
+      props as ItemComponentProps<TSemanticProps> & { _record?: unknown };
 
     // Resolve mode: explicit prop > _config > default
     const mode: RenderMode = modeProp ?? _config?.mode ?? "web";
 
     // 1. Map semantic props to values format (handles dual API)
-    const mappedValues = config.propMapper({
-      children,
-      ...restProps
-    } as TSemanticProps & { children?: React.ReactNode });
+    const mappedValues = config.propMapper({ children, ...restProps } as TSemanticProps & { children?: React.ReactNode });
+
+    // A text block in a right-to-left document starts on the right, unless it's aligned (see rtlAlign).
+    rtlAlign(mappedValues, config.defaultValues, _config?.textDirection ?? bodyValues.textDirection);
 
-    // 2. Merge with defaults
+    // 2. Merge with defaults (a built-in block's, which the head reuses: see remember)
     const finalValues = mergeValues(config.defaultValues, mappedValues);
+    if (!config.contentType) remember(_r as object | undefined, finalValues);
 
     // 3. Ensure _meta is present. The Column-allocated id wins so every
     //    instance is unique; the index fallback covers standalone renders.
@@ -347,72 +333,46 @@ export function createItemComponent<
     //    "500px" (matches BodyDefaults.contentWidth and the exporter's image
     //    fallback width), so a standalone item (no Body) sizes the same as the
     //    editor and the value is a CSS string everywhere it might be consumed.
-    const safeBodyValues = {
-      contentWidth: "500px",
-      ...bodyValues
-    };
+    const safeBodyValues = { contentWidth: "500px", ...bodyValues };
 
     // 5. Resolve link/action fields to the exporter's render-value shape.
     //    Skipped on the renderToJson path (which uses propMapper directly)
     //    so JSON output preserves the schema's storage shape.
-    const valuesForExporter = normalizeValuesForExporter(
-      valuesWithMeta as Record<string, any>,
-      config.name,
-      mode
-    );
+    const valuesForExporter = normalizeValuesForExporter(valuesWithMeta as Record<string, any>, config.name, mode);
 
-    // 5b. Convert a fixed (px) image pin to the editor's canonical percent now
+    // 5b. The block's padding, which the design gives every block (10px unless it sets one): the exporters size an
+    //     image or a video's thumbnail in the slot it leaves, as the editor does.
+    const forExporter = valuesForExporter as Record<string, any>;
+    forExporter.containerPadding ??= DEFAULT_CONTAINER_PADDING;
+    // 5c. Convert a fixed (px) image pin to the editor's canonical percent now
     //     that the column geometry is known (Column threads columnValues/cells/
     //     bodyValues). Guarded on `src.autoWidth === false`, so only pinned
     //     images are touched; responsive images and non-image blocks pass through.
-    const exportSrc = (valuesForExporter as Record<string, any>).src;
+    const exportSrc = forExporter.src;
+    let exporter = (config.exporters[mode] || config.exporters.web)!;
     if (exportSrc && typeof exportSrc === "object" && exportSrc.autoWidth === false) {
-      const availableWidth = contentSlotWidth({
-        bodyValues: safeBodyValues,
-        rowValues,
-        rowCells: cells,
-        columnIndex: colIndex,
-        columnValues,
-        containerPadding:
-          (props as { containerPadding?: unknown; values?: { containerPadding?: unknown } })
-            .containerPadding ??
-          (props as { values?: { containerPadding?: unknown } }).values?.containerPadding,
-      });
-      (valuesForExporter as Record<string, any>).src = pinImageSrc(exportSrc, availableWidth);
+      const available = contentSlotWidth({ bodyValues: safeBodyValues, rowValues, rowCells: cells, columnIndex: colIndex, columnValues, containerPadding: forExporter.containerPadding });
+      const px = toPx(exportSrc.maxWidth);
+      // The percent the design stores (see render-to-json.ts), which the exporter sizes the image by.
+      forExporter.src = pinImageSrc(exportSrc, available);
+      if (px! < available) {
+        // A px width narrower than the slot keeps that px as its max-width (and its width attribute, Outlook's), where
+        // the exporter writes the px it works out from the percent (2 decimals): `64px`, not `63.97px`.
+        const own = exporter;
+        exporter = (...args: any[]) => String(own(...(args as Parameters<typeof own>))).replace(/<img [^>]*max-width: [\d.]+px[^>]*>/g, (tag) => tag.replace(/(max-width: |width=")[\d.]+/g, `$1${px}`));
+      }
     }
 
-    // 6. Resolve exporter for this mode (fallback to web)
-    const exporter = (config.exporters[mode] || config.exporters.web)!;
-
     // 7. Render using utility (handles all boilerplate)
-    return renderComponent<TValues>({
-      type: config.name,
-      values: valuesForExporter as TValues,
-      mode,
-      className,
-      style,
-      args: [index, colIndex, cells, safeBodyValues, rowValues],
-      // The 8th arg the exporters actually read: column/body context for
-      // width-aware rendering (Image's available-width calc), mirroring the editor.
-      metaContext: {
-        columnIndex: colIndex,
-        columnValues,
-        rowCells: cells,
-        rowValues,
-        bodyValues: safeBodyValues,
-      },
-      _config,
-      exporter,
-    });
+    // `metaContext`: the 8th arg the exporters actually read: column/body context for width-aware rendering (Image's
+    // available-width calc), mirroring the editor.
+    const metaContext = { columnIndex: colIndex, columnValues, rowCells: cells, rowValues, bodyValues: safeBodyValues };
+    return renderComponent<TValues>({ type: config.name, values: valuesForExporter as TValues, mode, className, style, args: [index, colIndex, cells, safeBodyValues, rowValues], metaContext, _config, exporter, at: config.at, given: restProps as Record<string, unknown> });
   }
 
-  // Outer React component — hook-free, works in both Server and Client Components
-  const ItemComponent: React.FC<ItemComponentProps<TSemanticProps>> = (
-    props
-  ) => {
-    if (collecting()) return whileCollecting(() => recordBlock(ItemComponent, props as Record<string, any>), () => renderFn(props), ItemComponent.displayName ?? "Block");
-    return renderFn(props);
-  };
+  // Outer React component — hook-free, works in both Server and Client Components. A collecting walk records it (see
+  // record.tsx); rendered, it's its exporter's HTML.
+  const ItemComponent: React.FC<ItemComponentProps<TSemanticProps>> = (props) => renderFn(props);
 
   // Set display name for React DevTools
   ItemComponent.displayName = config.displayName || config.name;
@@ -431,6 +391,7 @@ export function createItemComponent<
     metaName: config.metaName,
     head: config.head,
     omitEmptyOutput: config.omitEmptyOutput,
+    names: config.names,
   };
 
   return ItemComponent;
diff --git a/packages/react/src/utils/css-url.ts b/packages/react/src/utils/css-url.ts
new file mode 100644
index 00000000..5ec08f6f
--- /dev/null
+++ b/packages/react/src/utils/css-url.ts
@@ -0,0 +1,52 @@
+/**
+ * A background image's URL as the editor's exporters write it: in `url('…')` in a style attribute, and in a
+ * `background` and a VML `src` attribute, all in double quotes. What could end the attribute, the CSS string or
+ * `url(…)` is percent-encoded, as a browser would (the same address), and an email service's tag in it stays as
+ * written, as in 0.2.1, for the service to read it.
+ */
+import { entities } from "@unlayer-internal/shared-elements";
+
+/** An attribute reference, `${…}`: Braze's (also inside a Liquid tag, `{{${first_name} | default: 'you'}}`), Responsys's. */
+const REFERENCE_TAG = String.raw`\$\{[^{}]*\}`;
+/** An email service's tag: `{{ … }}`, `{% … %}` (either with `${…}` in it), `${…}`, `<% … %>`, `%% … %%` (AMPscript). */
+const TAG = String.raw`\{\{(?:[^{}]|${REFERENCE_TAG})*\}\}|\{%(?:[^{}]|${REFERENCE_TAG})*%\}|${REFERENCE_TAG}|<%[^<>]*%>|%%[^%]*%%`;
+/** What could end the attribute, the string or `url(…)`: quotes, brackets, `<`, `>`, `\`, spaces and control characters. */
+const ENDS = String.raw`[\u0000- "'()<>\\\u007f]`;
+const PARTS = new RegExp(`${TAG}|${ENDS}`, "g");
+const ENCODED = new RegExp(ENDS, "g");
+const ENDS_ONE = new RegExp(`^${ENDS}$`);
+/** What a tag can't keep, wherever it is: a `"` ends the attribute, a `\` or a line break the string. */
+const ALWAYS = /[\u0000-\u001f"\\\u007f]/g;
+/** A character reference, as a browser reads one in an attribute, and more (any case, with or without `;`). */
+const REFERENCE = /&(?:#(?:x[\da-f]+|\d+)|[a-z]+);?/gi;
+
+/**
+ * Whether a URL stays where the exporters write it: in `url('…')`, in its string to its end (each `'` in it ends the
+ * string or starts another, and a bracket outside one would end `url(…)` or open what its own `)` then closes), and in
+ * the comment an email's Outlook markup is in (a `-->` or `--!>` ends it).
+ */
+function staysInString(url: string): boolean {
+  if (/--!?>/.test(url)) return false;
+  let inString = true;
+  for (const char of url) {
+    if (char === "'") inString = !inString;
+    else if (!inString && (char === "(" || char === ")")) return false;
+  }
+  return inString;
+}
+
+/**
+ * `url` as the exporters can write it. A character reference that reads as a character that could end something
+ * (`&#39;`, `&quot;`) is that character encoded, as the browser would read it before the CSS (one that reads as
+ * another, `&amp;`, stays as written). A tag keeps all but a `"`, a `\` and control characters; where its quotes would
+ * take a bracket out of the string, or leave the string open at the URL's end, or it would end a comment, the whole
+ * URL is encoded instead.
+ */
+export function cssUrlValue(url: string): string {
+  const read = url.replace(REFERENCE, (reference) => {
+    const char = entities(reference);
+    return char !== reference && ENDS_ONE.test(char) ? escape(char) : reference;
+  });
+  const tagged = read.replace(PARTS, (part) => (part.length > 1 ? part.replace(ALWAYS, escape) : escape(part)));
+  return staysInString(tagged) ? tagged : read.replace(ENCODED, escape);
+}
diff --git a/packages/react/src/utils/device-overrides.ts b/packages/react/src/utils/device-overrides.ts
index 81089be8..b09b6915 100644
--- a/packages/react/src/utils/device-overrides.ts
+++ b/packages/react/src/utils/device-overrides.ts
@@ -41,6 +41,7 @@ function size(value: unknown): string | undefined {
 }
 
 export function collectDeviceStyles(values: Record<string, any>, collection: Collection, name: string, mode: RenderMode, styles: DeviceStyles): void {
+  if (!values._override) return;
   // The id the block's HTML has, escaped.
   const given = safeName(values._meta?.htmlID);
   if (!given) return;
diff --git a/packages/react/src/utils/document-layouts.ts b/packages/react/src/utils/document-layouts.ts
index b1ddaf92..5762ebc4 100644
--- a/packages/react/src/utils/document-layouts.ts
+++ b/packages/react/src/utils/document-layouts.ts
@@ -10,6 +10,23 @@
  * in render-to-html.tsx.
  */
 
+/**
+ * The editor's base stylesheet for each mode, which its exported documents have in their head, before the blocks' CSS
+ * (its `styles/<mode>/index.scss` and `inline.css`, minified as it ships them): resets, `p` and `sub`/`sup` line
+ * spacing, and in email the table and Apple data-detector rules. The web one leaves out the editor's form styles
+ * (Elements has no form block).
+ */
+const BASE_CSS = {
+  email:
+    "sub,sup{line-height:0}\n\nbody{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}p{margin:0}.ie-container table,.mso-container table{table-layout:fixed}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}",
+  web:
+    "body,html{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:14px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}p{margin:0}.container{--bs-gutter-x:0px;--bs-gutter-y:0;margin-left:auto;margin-right:auto;padding-left:calc(var(--bs-gutter-x)*.5);padding-right:calc(var(--bs-gutter-x)*.5);width:100%}sub,sup{line-height:0}\n\na[onclick]{cursor:pointer}",
+  document: "body,html{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:14px}p{margin:0}sub,sup{line-height:0}\n\na[onclick]{cursor:pointer}",
+};
+
+/** The head's `<style>`: the mode's base stylesheet, then the blocks' CSS. */
+const styleTag = (base: string, css: string) => `<style type="text/css">\n${[base, css].filter(Boolean).join("\n")}\n</style>`;
+
 export interface DocumentLayoutArgs {
   /** ` lang="ar"` attribute chunk for <html>, or "" */
   lang?: string;
@@ -19,8 +36,8 @@ export interface DocumentLayoutArgs {
   titleTag: string;
   /** Newline-joined head tags from component head functions, or "" */
   tagLines: string;
-  /** `<style type="text/css">...</style>` or "" */
-  styleTag: string;
+  /** The blocks' CSS for the head's `<style>` (a `</style` in it escaped), or "" */
+  css: string;
   /** `<script type="application/javascript">...</script>` or "" */
   scriptTag: string;
   /** Concatenated `<link rel="stylesheet">` tags for web fonts, or "" */
@@ -35,12 +52,12 @@ export interface DocumentLayoutArgs {
  * the <body> tag in email mode.
  */
 export function emailLayout(args: DocumentLayoutArgs): string {
-  const { dir, titleTag, tagLines, styleTag, scriptTag, fontLinks, body } = args;
+  const { dir, titleTag, tagLines, css, scriptTag, fontLinks, body } = args;
 
   const head = [
     titleTag,
     tagLines,
-    styleTag,
+    styleTag(BASE_CSS.email, css),
     scriptTag,
     fontLinks && `<!--[if !mso]><!-->${fontLinks}<!--<![endif]-->`,
   ]
@@ -75,9 +92,9 @@ ${body}
  * <link> tags — PDF renderers that can't fetch should pass no fonts.
  */
 export function documentLayout(args: DocumentLayoutArgs): string {
-  const { dir, titleTag, tagLines, styleTag, scriptTag, fontLinks, body } = args;
+  const { dir, titleTag, tagLines, css, scriptTag, fontLinks, body } = args;
 
-  const head = [titleTag, tagLines, styleTag, scriptTag, fontLinks]
+  const head = [titleTag, tagLines, styleTag(BASE_CSS.document, css), scriptTag, fontLinks]
     .filter(Boolean)
     .join("\n  ");
 
@@ -97,9 +114,9 @@ ${body}
  * The body markup has no <body> tag in web mode, so the shell provides it.
  */
 export function webLayout(args: DocumentLayoutArgs): string {
-  const { dir, titleTag, tagLines, styleTag, scriptTag, fontLinks, body } = args;
+  const { dir, titleTag, tagLines, css, scriptTag, fontLinks, body } = args;
 
-  const head = [titleTag, fontLinks, tagLines, styleTag, scriptTag]
+  const head = [titleTag, fontLinks, tagLines, styleTag(BASE_CSS.web, css), scriptTag]
     .filter(Boolean)
     .join("\n    ");
 
@@ -112,7 +129,7 @@ export function webLayout(args: DocumentLayoutArgs): string {
     <meta name="viewport" content="width=device-width, initial-scale=1">
     ${head}
   </head>
-  <body>
+  <body${dir.includes("rtl") ? `${dir}${args.lang || ""}` : ""}>
 ${body}
   </body>
 </html>
diff --git a/packages/react/src/utils/entities.ts b/packages/react/src/utils/entities.ts
new file mode 100644
index 00000000..02b10015
--- /dev/null
+++ b/packages/react/src/utils/entities.ts
@@ -0,0 +1,15 @@
+/**
+ * Text in an attribute as the browser reads it, to tell what a URL's scheme is: its character references decoded,
+ * and the characters a browser leaves out of a scheme dropped. The Markdown sanitizer (src/markdown/sanitize.ts) and
+ * the rich text in children (inline-html.ts) read URLs with it.
+ */
+
+import { entities } from "@unlayer-internal/shared-elements";
+
+export { codePoint, entities } from "@unlayer-internal/shared-elements";
+
+/** Text without the control characters and spaces a browser leaves out of a URL's scheme (and more). */
+export const tight = (text: string) => text.replace(/[\u0000- \u007f-\u009f]/g, "");
+
+/** A URL as the browser reads it (references decoded, control characters and spaces dropped), to read its scheme. */
+export const decoded = (url: string) => tight(entities(url));
diff --git a/packages/react/src/utils/extract-head.test.tsx b/packages/react/src/utils/extract-head.test.tsx
index 205c741b..12d2631c 100644
--- a/packages/react/src/utils/extract-head.test.tsx
+++ b/packages/react/src/utils/extract-head.test.tsx
@@ -9,6 +9,7 @@ import Button from "../components/Button";
 import Heading from "../components/Heading";
 import Paragraph from "../components/Paragraph";
 import Divider from "../components/Divider";
+import Document from "../components/Document";
 
 describe("renderToHtmlParts", () => {
   it("returns head and body as separate strings", () => {
@@ -189,3 +190,74 @@ describe("renderToHtmlParts", () => {
     expect(body.length).toBeGreaterThan(0);
   });
 });
+
+describe("the body's link style", () => {
+  // Where the template sets none, no rule: the exporters write the editor's default (a browser's own) for the body's
+  // id, which won over the template's own link CSS (a <Head> stylesheet's), where 0.2.1's was for an id nothing has.
+  it.each([["Email", Email], ["Page", Page], ["Document", Document]] as const)("%s: writes no rule for the links where the template sets none, so the template's own CSS styles them", (_, Root) => {
+    const html = renderToHtml(<Root><Row><Column><Paragraph html={'Read <a href="https://example.com">the guide</a>'} /></Column></Row></Root>);
+    const id = /<[a-z]+ [^>]*id="(u_body[^"]*)"/.exec(html)![1];
+    expect(html).not.toMatch(new RegExp(`#${id} a(:hover)? \\{`));
+    // Set however the template sets it: `values`, or flat props its mapping folds into `linkStyle`.
+    for (const props of [{ values: { linkStyle: { linkColor: "#ff0000" } } }, { linkColor: "#ff0000", linkUnderline: false }]) {
+      expect(renderToHtml(<Root {...(props as object)}><Row><Column><Paragraph>x</Paragraph></Column></Row></Root>)).toMatch(new RegExp(`#${id} a \\{\\s*color: #ff0000;`));
+    }
+  });
+
+  // Its head CSS is for the body's element (`#u_body_1 a`, the id its HTML has), as the editor's is for its body's
+  // (`#u_body a`): the links in it take the color. (It was for `#u_content_body_1`, which nothing has.)
+  it.each([["Email", Email], ["Page", Page], ["Document", Document]] as const)("%s: colors the links in the HTML", (_, Root) => {
+    const html = renderToHtml(
+      <Root linkStyle={{ linkColor: "#ff0000", linkUnderline: false }}>
+        <Row>
+          <Column>
+            <Paragraph html={'Read <a href="https://example.com">the guide</a>'} />
+          </Column>
+        </Row>
+      </Root>
+    );
+    const id = /<[a-z]+ [^>]*id="(u_body[^"]*)"/.exec(html)![1];
+    expect(html).toMatch(new RegExp(`#${id} a \\{\\s*color: #ff0000;\\s*text-decoration: none;`));
+    // As a browser shows it.
+    const before = document.documentElement.innerHTML;
+    try {
+      document.documentElement.innerHTML = html.replace(/^<!doctype html>/i, "").replace(/<\/?html[^>]*>/g, "");
+      const link = document.querySelector('a[href="https://example.com"]')!;
+      expect(getComputedStyle(link).color).toBe("rgb(255, 0, 0)");
+      expect(getComputedStyle(link).textDecoration).toBe("none");
+    } finally {
+      document.documentElement.innerHTML = before;
+    }
+  });
+});
+
+describe("the head, made in the same render as the HTML", () => {
+  it("maps no Row, Column or block again: it takes the values their HTML mapped, and writes the same CSS", () => {
+    const config = (Paragraph as unknown as Record<string, { propMapper: (props: object) => object }>).__unlayerItemConfig;
+    const own = config.propMapper;
+    let calls = 0;
+    config.propMapper = (props) => (calls++, own(props));
+    try {
+      const template = (
+        <Email>
+          <Row padding="0 4px" mobile={{ padding: "2px" }}>
+            <Column padding={8} mobile={{ padding: 3 }}>
+              <Paragraph linkStyle={{ inherit: false, linkColor: "#ff0000" }} mobile={{ fontSize: "12px" }}>
+                Hello
+              </Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      );
+      const { css } = renderToHtmlParts(template);
+      expect(calls).toBe(0);
+      // (The CSS the head would write mapping them itself.)
+      expect(css).toMatch(/#u_content_paragraph_1 a\b[^}]*color: #ff0000/);
+      expect(css).toContain("#u_content_paragraph_1 .v-font-size { font-size: 12px !important; }");
+      expect(css).toContain("#u_row_1.v-row-padding { padding: 2px !important; }");
+      expect(css).toContain("#u_column_1 .v-col-padding { padding: 3px !important; }");
+    } finally {
+      config.propMapper = own;
+    }
+  });
+});
diff --git a/packages/react/src/utils/extract-head.ts b/packages/react/src/utils/extract-head.ts
index f005ad6d..a0730ac3 100644
--- a/packages/react/src/utils/extract-head.ts
+++ b/packages/react/src/utils/extract-head.ts
@@ -13,11 +13,15 @@ import { heads } from "@unlayer/exporters";
 import { mergeValues } from "@unlayer-internal/shared-elements";
 import type { RenderMode, HeadConfig } from "@unlayer-internal/shared-elements";
 import { mapSemanticProps } from "./semantic-props";
-import { UNLAYER_CONFIG_KEY } from "./create-component";
+import { UNLAYER_CONFIG_KEY, cssUrl } from "./create-component";
 import { BODY_DEFAULTS, ROW_DEFAULTS, COLUMN_DEFAULTS } from "./container-defaults";
-import { KEPT, normalizedRoot } from "./normalize";
+import { headTags, KEPT, normalizedRoot } from "../model";
 import { getDisplayName } from "./unwrap-root";
-import { extractSemanticProps, nextCounter } from "./render-to-json";
+import { elementsIn, extractSemanticProps, nextCounter } from "./render-to-json";
+import { failed, failedBefore, guest, recall } from "./render-scope";
+import { whereIs } from "./collect";
+import { threw } from "../engine/errors";
+import { RenderError } from "@unlayer-internal/shared-elements";
 
 /** Args every head builder receives: (values, bodyValues, meta). */
 type HeadArgs = [Record<string, any>, Record<string, any>, Record<string, any>];
@@ -36,12 +40,12 @@ type ComponentHead = {
 // Inlined helpers
 // ============================================
 
-/** Add _meta fields if not present. */
+/** Add _meta fields if not present: the id the HTML gives it (`u_body_1`, `u_row_2`, `u_content_paragraph_3`). */
 function ensureMeta(values: any, type: string, index: number = 0): any {
   return {
     ...values,
     _meta: {
-      htmlID: `${["row", "column"].includes(type) ? "u" : "u_content"}_${type.toLowerCase()}_${index + 1}`,
+      htmlID: `${["body", "row", "column"].includes(type) ? "u" : "u_content"}_${type.toLowerCase()}_${index + 1}`,
       htmlClassNames: `u_content_${type.toLowerCase()}`,
       ...(values._meta || {})
     }
@@ -49,9 +53,6 @@ function ensureMeta(values: any, type: string, index: number = 0): any {
 }
 
 
-/** The element children of a collected (Elements-only) tree. */
-const collectChildren = (node: React.ReactNode): React.ReactElement[] => React.Children.toArray(node).filter(React.isValidElement);
-
 // ============================================
 // Types
 // ============================================
@@ -72,150 +73,6 @@ export interface ExtractHeadOptions {
   headConfig?: HeadConfig;
 }
 
-/**
- * Call a head's css/js/tags functions and collect the results.
- */
-function callHead(
-  head: ComponentHead | undefined,
-  values: Record<string, any>,
-  bodyValues: Record<string, any>,
-  displayMode: RenderMode,
-  headConfig: HeadConfig,
-  styles: string[],
-  scripts: string[],
-  tags: string[]
-): void {
-  if (!head) return;
-
-  const headArgs: [Record<string, any>, Record<string, any>, Record<string, any>] = [
-    values,
-    bodyValues,
-    {
-      displayMode,
-      isViewer: false,
-      variant: null,
-      type: "rows",
-      headConfig,
-    },
-  ];
-
-  const css = head.css?.(...headArgs);
-  if (css) styles.push(css);
-
-  const js = head.js?.(...headArgs);
-  if (js) scripts.push(js);
-
-  const headTags = head.tags?.(...headArgs);
-  if (headTags) tags.push(...headTags);
-}
-
-// ============================================
-// Tree walkers
-// ============================================
-
-function walkItem(
-  element: React.ReactElement,
-  bodyValues: Record<string, any>,
-  displayMode: RenderMode,
-  headConfig: HeadConfig,
-  counters: Record<string, number>,
-  styles: string[],
-  scripts: string[],
-  tags: string[],
-  deviceStyles: Record<string, string[]>
-): void {
-  const componentType = element.type as any;
-  const config = componentType[UNLAYER_CONFIG_KEY];
-  if (!config) {
-    // Markup a component of the user's own rendered in a Column: the HTML numbers it after the component.
-    if (componentType?.[KEPT]) nextCounter(counters, `u_content_${(componentType.displayName || componentType.name || "component").toLowerCase()}`);
-    return;
-  }
-
-  const { name, defaultValues, propMapper } = config;
-
-  // Map and merge values (same as render-to-json and create-component)
-  const { children, ...restProps } = element.props;
-  const mappedValues = propMapper({ children, ...restProps });
-  const finalValues = mergeValues(defaultValues, mappedValues);
-
-  // Track component index (same counter pattern as render-to-json.ts)
-  const contentType = config.metaName ?? name.toLowerCase();
-  const count = nextCounter(counters, `u_content_${contentType}`);
-  const valuesWithMeta = ensureMeta(finalValues, contentType, count - 1);
-
-  collectDeviceStyles(valuesWithMeta, "contents", name, displayMode, deviceStyles);
-
-  // The component's own head (custom tools) wins over the registry lookup
-  const head =
-    (config.head as ComponentHead | undefined) ??
-    (heads as Record<string, ComponentHead | undefined>)[name];
-  callHead(head, valuesWithMeta, bodyValues, displayMode, headConfig, styles, scripts, tags);
-
-}
-
-function walkColumn(
-  element: React.ReactElement,
-  bodyValues: Record<string, any>,
-  rowValues: Record<string, any>,
-  displayMode: RenderMode,
-  headConfig: HeadConfig,
-  counters: Record<string, number>,
-  styles: string[],
-  scripts: string[],
-  tags: string[],
-  deviceStyles: Record<string, string[]>
-): void {
-  // Column head
-  const semanticProps = extractSemanticProps(element.props);
-  const mapped = mapSemanticProps(semanticProps, COLUMN_DEFAULTS, "Column");
-  const count = nextCounter(counters, "u_column");
-  const columnValues = ensureMeta(mergeValues(COLUMN_DEFAULTS, mapped), "column", count - 1);
-
-  collectDeviceStyles(columnValues, "columns", "Column", displayMode, deviceStyles);
-
-  const columnHead = (heads as Record<string, ComponentHead | undefined>)["Column"];
-  callHead(columnHead, columnValues, bodyValues, displayMode, headConfig, styles, scripts, tags);
-
-  // Walk item children
-  const children = collectChildren(element.props.children);
-  for (const child of children) {
-    walkItem(child, bodyValues, displayMode, headConfig, counters, styles, scripts, tags, deviceStyles);
-  }
-}
-
-function walkRow(
-  element: React.ReactElement,
-  bodyValues: Record<string, any>,
-  displayMode: RenderMode,
-  headConfig: HeadConfig,
-  counters: Record<string, number>,
-  styles: string[],
-  scripts: string[],
-  tags: string[],
-  deviceStyles: Record<string, string[]>
-): void {
-  // Row head
-  const semanticProps = extractSemanticProps(element.props, ["layout"]);
-  const mapped = mapSemanticProps(semanticProps, ROW_DEFAULTS, "Row");
-  const count = nextCounter(counters, "u_row");
-  const rowValues = ensureMeta(mergeValues(ROW_DEFAULTS, mapped), "row", count - 1);
-
-  collectDeviceStyles(rowValues, "rows", "Row", displayMode, deviceStyles);
-
-  const rowHead = (heads as Record<string, ComponentHead | undefined>)["Row"];
-  callHead(rowHead, rowValues, bodyValues, displayMode, headConfig, styles, scripts, tags);
-
-  // Walk column children
-  const children = collectChildren(element.props.children);
-  for (const child of children) {
-    const name = getDisplayName(child);
-    if (name === "Column") {
-      walkColumn(child, bodyValues, rowValues, displayMode, headConfig, counters, styles, scripts, tags, deviceStyles);
-    }
-  }
-}
-
 // ============================================
 // Public API
 // ============================================
@@ -234,8 +91,9 @@ export function extractHeadFromTree(
   element: React.ReactElement,
   options: ExtractHeadOptions
 ): ExtractHeadResult {
-  // The rows and blocks as the body rendered them (the same collected render).
-  element = normalizedRoot(element);
+  // What its content gives the head (a <Font>), then the rows and blocks as the body rendered them (the same collected render).
+  const fonts = headTags((element.props as { children?: React.ReactNode }).children, options.displayMode, getDisplayName(element));
+  element = normalizedRoot(element, options.displayMode);
   const { displayMode } = options;
   const headConfig: HeadConfig = {
     hasFeature: options.headConfig?.hasFeature ?? (() => false),
@@ -247,22 +105,82 @@ export function extractHeadFromTree(
   const tags: string[] = [];
   const counters: Record<string, number> = {};
   const deviceStyles: Record<string, string[]> = {};
+  const registry = heads as Record<string, ComponentHead | undefined>;
+  let bodyValues: Record<string, any> | undefined;
+
+  /** What a head is told of the render: the same for each (a custom tool's head gets one of its own). */
+  const told = { displayMode, isViewer: false, variant: null, type: "rows", headConfig };
+
+  /**
+   * A head's CSS, JS and tags for the values of the Body, Row, Column or block (`name`, at `record`) it's for. One that
+   * fails fails the render, or (`onError: "omit"`) gives nothing, listed: its block still renders, as the design has no
+   * head to disagree with.
+   */
+  const call = (head: ComponentHead | undefined, values: Record<string, any>, name: string, record?: object, own = false, kept: (css: string) => string = (css) => css) => {
+    if (!head || !(head.css || head.js || head.tags)) return;
+    const args: HeadArgs = [values, bodyValues ?? values, own ? { ...told } : told];
+    let given;
+    try {
+      // (A custom tool's head, and the `headConfig` the heads are told, are the user's: see `guest`.)
+      given = guest(() => ({ css: head.css?.(...args), js: head.js?.(...args), tags: head.tags?.(...args) }));
+    } catch (error) {
+      return failed(error instanceof RenderError ? error : new RenderError(`${name}'s head failed: ${threw(error)}`, name, whereIs(record) ?? name, error));
+    }
+    const css = given.css && kept(given.css);
+    if (css && css.trim()) styles.push(css);
+    if (given.js) scripts.push(given.js);
+    if (given.tags) tags.push(...given.tags);
+  };
 
-  // Extract body values
-  const semanticProps = extractSemanticProps(element.props);
-  const mapped = mapSemanticProps(semanticProps, BODY_DEFAULTS, "Body");
-  const bodyValues = ensureMeta(mergeValues(BODY_DEFAULTS, mapped), "body", 0);
-
-  // Body head
-  const bodyHead = (heads as Record<string, ComponentHead | undefined>)["Body"];
-  callHead(bodyHead, bodyValues, bodyValues, displayMode, headConfig, styles, scripts, tags);
+  /** A container's values (with the id the HTML gives it), its phone and desktop styles, and its head. */
+  const container = (node: React.ReactElement<any>, name: "Body" | "Row" | "Column", defaults: Record<string, any>) => {
+    const type = name.toLowerCase();
+    // As its HTML mapped them, where it rendered in this render (see remember).
+    const mapped = recall<Record<string, any>>(node.props._record) ?? mapSemanticProps(extractSemanticProps(node.props), defaults, name);
+    const values = ensureMeta(mergeValues(defaults, mapped), type, name === "Body" ? 0 : nextCounter(counters, `u_${type}`) - 1);
+    // (A background image's URL as CSS takes it, as in the body: see cssUrl.)
+    cssUrl(values);
+    if (name !== "Body") collectDeviceStyles(values, `${type}s` as "rows" | "columns", name, displayMode, deviceStyles);
+    // A body whose template sets no `linkStyle` gets no rule for its links: the exporters write the editor's default
+    // (a browser's own, blue and underlined) for the body's id, which wins over the template's own link CSS (a <Head>
+    // stylesheet's; 0.2.1 wrote it for an id the HTML hasn't, to no effect).
+    const linkRules = new RegExp(`#${String(values._meta?.htmlID).replace(/[^\w-]/g, "\\$&")} a(?::hover)? \\{[^}]*\\}`, "g");
+    // (However the template gave it: `linkStyle`, `values`, `linkColor` and the like, which its mapping folds into it.)
+    const linkStyled = mapped?.linkStyle !== undefined || node.props.linkStyle !== undefined || node.props.values?.linkStyle !== undefined;
+    call(registry[name], values, name, node.props._record, false, name === "Body" && !linkStyled ? (css) => css.replace(linkRules, "") : undefined);
+    return values;
+  };
 
-  // Walk rows
-  const children = collectChildren(element.props.children);
-  for (const child of children) {
-    const name = getDisplayName(child);
-    if (name === "Row") {
-      walkRow(child, bodyValues, displayMode, headConfig, counters, styles, scripts, tags, deviceStyles);
+  /**
+   * The element children of a collected (Elements-only) tree, of one component where it's named; a Row or block
+   * whose HTML failed in this render (`onError: "omit"`) left out, as in the HTML.
+   */
+  const children = (node: React.ReactElement<any>, name?: string) =>
+    elementsIn(node.props.children).filter((child) => (!name || getDisplayName(child) === name) && !failedBefore(child.props._record));
+
+  bodyValues = container(element, "Body", BODY_DEFAULTS);
+  for (const row of children(element, "Row")) {
+    container(row, "Row", ROW_DEFAULTS);
+    for (const column of children(row, "Column")) {
+      container(column, "Column", COLUMN_DEFAULTS);
+      for (const block of children(column)) {
+        const type = block.type as any;
+        const config = type[UNLAYER_CONFIG_KEY];
+        if (!config) {
+          // Markup a component of the user's own rendered in a Column: the HTML numbers it after the component.
+          if (type?.[KEPT]) nextCounter(counters, `u_content_${(type.displayName || type.name || "component").toLowerCase()}`);
+          continue;
+        }
+        // Mapped and merged as the HTML and the design do (a built-in block's as its HTML did, in this render: see
+        // remember), numbered as they are.
+        const contentType = config.metaName ?? config.name.toLowerCase();
+        const { _record, ...props } = block.props;
+        const merged = (!config.contentType && recall<Record<string, any>>(_record)) || mergeValues(config.defaultValues, config.propMapper(props));
+        const values = ensureMeta(merged, contentType, nextCounter(counters, `u_content_${contentType}`) - 1);
+        collectDeviceStyles(values, "contents", config.name, displayMode, deviceStyles);
+        // The component's own head (custom tools) wins over the registry's.
+        call(config.head ?? registry[config.name], values, config.name, _record, !!config.head);
+      }
     }
   }
 
@@ -270,12 +188,10 @@ export function extractHeadFromTree(
   const overrides = deviceStylesCss(deviceStyles, displayMode);
   if (overrides) styles.push(overrides);
 
-  // Deduplicate tags
-  const uniqueTags = [...new Set(tags.filter(Boolean))];
-
   return {
     css: styles.filter(Boolean).join("\n"),
     js: scripts.filter(Boolean).join("\n"),
-    tags: uniqueTags,
+    // Each tag once.
+    tags: [...new Set([...fonts, ...tags].filter(Boolean))],
   };
 }
diff --git a/packages/react/src/utils/font-design.ts b/packages/react/src/utils/font-design.ts
new file mode 100644
index 00000000..a4eccaeb
--- /dev/null
+++ b/packages/react/src/utils/font-design.ts
@@ -0,0 +1,107 @@
+/**
+ * A web font's stylesheet URL in the design, where the editor keeps it: on the `fontFamily` values of its family. A
+ * `<Font>` (the font entry) and a root's `fonts` prop both write it here. It imports only what the main entry has
+ * (the font entry builds it in).
+ */
+import { entities, unrunUrl } from "@unlayer-internal/shared-elements";
+
+/** A URL that can't end its attribute or its CSS string: what could, percent-encoded. */
+export const safeUrl = (url: string) => url.trim().replace(/["'()<>\s\\]/g, (c) => `%${c.charCodeAt(0).toString(16).padStart(2, "0")}`);
+
+/** A font stack's first family, as the editor matches fonts: without quotes, any case. */
+export const primaryFamily = (stack: unknown) => String(stack).split(",")[0].replace(/['"]/g, "").trim().toLowerCase();
+
+/**
+ * A stylesheet's URL on the design's fonts of `family` (a primary family, see primaryFamily) that have none: the
+ * body's and each block's `fontFamily`, a table's `headerFontFamily` … The editor keeps a web font so, loads it from
+ * there, and exports its `<link>`. Whether the design has a font of the family (it can hold the stylesheet).
+ */
+export function fontUrlInDesign(family: string, url: string, body: { values?: Record<string, any>; rows?: any[] }): boolean {
+  let found = false;
+  const add = (values: Record<string, any> | undefined) => {
+    for (const [key, value] of Object.entries(values ?? {})) {
+      if (!/fontFamily$/i.test(key) || !value || typeof value.value !== "string" || primaryFamily(value.value) !== family) continue;
+      found = true;
+      if (value.url === undefined) values![key] = { ...value, url };
+    }
+  };
+  add(body.values);
+  for (const row of body.rows ?? []) for (const column of row.columns ?? []) for (const content of column.contents ?? []) add(content.values);
+  return found;
+}
+
+/** A URL's percent-encoded text decoded (as written where it can't be). */
+function decoded(text: string): string {
+  try {
+    return decodeURIComponent(text);
+  } catch {
+    return text;
+  }
+}
+
+/**
+ * The families a stylesheet URL loads, where it names them: its `family` parameters, as Google Fonts (and services
+ * like it) write them (`family=Inter:wght@400;700`, `family=Open+Sans|Lato`), or the `font-family` of the
+ * `@font-face` rules a `data:text/css` URL holds. Primary families (see primaryFamily).
+ */
+export function urlFamilies(url: string): string[] {
+  const text = String(url);
+  if (/^data:text\/css[,;]/i.test(text)) return [...decoded(text.slice(text.indexOf(",") + 1)).matchAll(/font-family:\s*([^;}]+)/gi)].map((m) => primaryFamily(m[1]));
+  const query = text.split("#")[0].split("?")[1] ?? "";
+  return query
+    .split("&")
+    .filter((param) => param.startsWith("family="))
+    .flatMap((param) => decoded(param.slice(7).replace(/\+/g, " ")).split("|"))
+    .map((family) => primaryFamily(family.split(":")[0]))
+    .filter(Boolean);
+}
+
+export interface FontProps {
+  /** The family name your styles use ("Inter"). */
+  family: string;
+  /**
+   * Where it loads from: a stylesheet that declares it (a Google Fonts CSS URL), or the font file itself
+   * (`.woff2`, `.woff`, `.ttf`, `.otf`, or any URL with `format`).
+   */
+  url?: string;
+  /** The file's format ("woff2", "woff", "truetype", "opentype"): the URL is then the file. */
+  format?: string;
+  /** The weight this file is (400, 700, or a range, "100 900"). */
+  weight?: number | string;
+  /** The style this file is. */
+  style?: "normal" | "italic";
+  /** Families to show where it doesn't load (Outlook ignores web fonts): "Arial, sans-serif" (the default: sans-serif). */
+  fallback?: string;
+  /** The template's font: the root's `fontFamily`, unless it sets one (in the design too). */
+  default?: boolean;
+}
+
+/**
+ * Text that can't end a CSS string, a declaration or an attribute, read as a browser reads it in a style attribute:
+ * its character references decoded first (`&#59;` is a `;` there), and no `&` or control character left to make one.
+ * A fallback's families can be quoted (`'Helvetica Neue', Arial`).
+ */
+const UNSAFE = /[<>{};"'\\&\u0000-\u001f\u007f]/g;
+const UNSAFE_QUOTED = /[<>{};"\\&\u0000-\u001f\u007f]/g;
+const clean = (text: unknown, quoted = false) => entities(String(text ?? "")).replace(quoted ? UNSAFE_QUOTED : UNSAFE, "").trim();
+const isFile = (font: FontProps) => !!font.format || /\.(woff2?|ttf|otf)([?#]|$)/i.test(font.url ?? "");
+
+/** A font's family as a root's `fontFamily` takes it: with the stylesheet the editor loads it from, when it's one. */
+export function fontFamilyOf(font: FontProps): { label: string; value: string; url?: string } {
+  const family = clean(font.family);
+  const fallback = clean(font.fallback ?? "sans-serif", true) || "sans-serif";
+  return { label: family, value: `'${family}', ${fallback}`, ...(font.url && !isFile(font) ? { url: safeUrl(font.url) } : {}) };
+}
+
+/** The head tags that load a font. In an email Outlook doesn't see them: with a web font declared it can fall back to Times New Roman. */
+export function fontTags(font: FontProps, mode: string): string[] {
+  // (None for a URL that runs code: `javascript:`, as React tells one.)
+  if (!font.url || unrunUrl(String(font.url)) !== String(font.url)) return [];
+  const url = safeUrl(font.url);
+  const tag = isFile(font)
+    ? `<style type="text/css">@font-face { font-family: '${clean(font.family)}'; src: url('${url}')${font.format ? ` format('${clean(font.format)}')` : ""}; font-weight: ${clean(font.weight ?? 400)}; font-style: ${clean(font.style ?? "normal")}; }</style>`
+    : `<link href="${url.replace(/&/g, "&amp;")}" rel="stylesheet" type="text/css">`;
+  return [mode === "email" ? `<!--[if !mso]><!-->${tag}<!--<![endif]-->` : tag];
+}
+
+/** A stylesheet font's URL on the design's fonts of its family that have none (see fontUrlInDesign). */
diff --git a/packages/react/src/utils/html-tags.ts b/packages/react/src/utils/html-tags.ts
new file mode 100644
index 00000000..c9e332c2
--- /dev/null
+++ b/packages/react/src/utils/html-tags.ts
@@ -0,0 +1,87 @@
+/**
+ * Tags in HTML as a browser's tokenizer reads them, for code that reads markup it's given and writes it again: the
+ * Markdown sanitizer (src/markdown/sanitize.ts) and the Tailwind classes inlined in markup (src/tailwind/html.ts).
+ * Whitespace is HTML's: no vertical tab, no non-breaking space.
+ */
+
+/** An attribute as written: its name (in lower case, as a browser reads it), its value (undefined: none) and where it is. */
+export interface Attribute {
+  name: string;
+  value: string | undefined;
+  /** Its value's quote (`"` or `'`), or "" where it has none. */
+  quote: string;
+  /** Where its name starts, and where it ends (after its value). */
+  start: number;
+  end: number;
+}
+
+/** A tag as a browser reads it: `<img/src=x/onerror=…>` is an `img` whose `src` is `x/onerror=…`. */
+export interface Tag {
+  close: boolean;
+  name: string;
+  attributes: Attribute[];
+  selfClosing: boolean;
+  /** Where its name ends, and where it ends (after its `>`). */
+  nameEnd: number;
+  end: number;
+}
+
+const TAG = /<(\/?)([a-z][^\t\n\f\r />]*)/iy;
+const GAP = /[\t\n\f\r /]*/y;
+const NAME = /[^\t\n\f\r />][^\t\n\f\r />=]*/y;
+const EQUALS = /[\t\n\f\r ]*=[\t\n\f\r ]*/y;
+const VALUE = /"([^"]*)"|'([^']*)'|([^\t\n\f\r >"'][^\t\n\f\r >]*)/y;
+/** A comment, a doctype, CDATA, `<?xml …>` or `</ …>` (each a comment to a browser), to where it ends. */
+const COMMENT = /<!--(?:-?>|[\s\S]*?--!?>|[\s\S]*)|<(?:[!?]|\/(?![a-z]))[^>]*>?/iy;
+
+/** What `re` matches at `i` (its `lastIndex` then where the match ends). */
+const at = (re: RegExp, s: string, i: number) => ((re.lastIndex = i), re.exec(s));
+
+/** Where the comment (or what a browser reads as one) at `start` (a `<`) ends; undefined where none starts there. */
+export function commentEnd(s: string, start: number): number | undefined {
+  return at(COMMENT, s, start) ? COMMENT.lastIndex : undefined;
+}
+
+/**
+ * The tag at `start` (a `<`): undefined where none starts there, null where the input ends in it (before its `>`, or in
+ * a quote left open).
+ */
+export function readTag(s: string, start: number): Tag | null | undefined {
+  const tag = at(TAG, s, start);
+  if (!tag) return undefined;
+  const attributes: Attribute[] = [];
+  const nameEnd = TAG.lastIndex;
+  for (let i = nameEnd; ; ) {
+    const gap = at(GAP, s, i)![0];
+    i = GAP.lastIndex;
+    if (i >= s.length) return null;
+    if (s[i] === ">") return { close: !!tag[1], name: tag[2].toLowerCase(), attributes, selfClosing: gap.endsWith("/"), nameEnd, end: i + 1 };
+    const begin = i;
+    const name = at(NAME, s, i)![0].toLowerCase();
+    i = NAME.lastIndex;
+    let value: string | undefined;
+    let quote = "";
+    if (at(EQUALS, s, i)) {
+      i = EQUALS.lastIndex;
+      value = "";
+      // (`x=>`: an empty value, and the tag's end.)
+      if (s[i] !== ">") {
+        const given = at(VALUE, s, i);
+        if (!given) return null;
+        value = given[1] ?? given[2] ?? given[3];
+        quote = given[1] !== undefined ? '"' : given[2] !== undefined ? "'" : "";
+        i = VALUE.lastIndex;
+      }
+    }
+    attributes.push({ name, value, quote, start: begin, end: i });
+  }
+}
+
+/**
+ * Where the text of a raw text element (`<script>`, `<style>`, `<textarea>`, …: no tags in it) that starts at `from`
+ * ends: at its end tag, or the input's end.
+ */
+export function rawTextEnd(s: string, name: string, from: number): number {
+  const end = at(new RegExp(`</${name}(?=[\\t\\n\\f\\r />]|$)`, "gi"), s, from);
+  return end ? end.index : s.length;
+}
diff --git a/packages/react/src/utils/image-sizing.ts b/packages/react/src/utils/image-sizing.ts
index b7c2f00b..008d0c1d 100644
--- a/packages/react/src/utils/image-sizing.ts
+++ b/packages/react/src/utils/image-sizing.ts
@@ -18,7 +18,7 @@
  *  optional px unit ("12" / "12px"). Non-px units ("1.5em", "calc(…)") return
  *  undefined so the pinning pass leaves them untouched instead of misreading
  *  them as px (SizeInput allows non-px CSS strings). */
-function toPx(value: unknown): number | undefined {
+export function toPx(value: unknown): number | undefined {
   if (typeof value === "number") return Number.isFinite(value) ? value : undefined;
   if (typeof value !== "string") return undefined;
   const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(value.trim());
@@ -61,26 +61,14 @@ function borderEdges(border: unknown): { left: number; right: number } {
   };
 }
 
-/** A body `contentWidth` is "fixed px" only when it's a number or a numeric
- *  string with an optional px unit (`600`, `"600px"`, or `"600"`). Percentages
- *  and keywords like `"auto"` are NOT fixed → `undefined`. */
-function fixedContentWidth(contentWidth: unknown): number | undefined {
-  if (typeof contentWidth === "number")
-    return Number.isFinite(contentWidth) ? contentWidth : undefined;
-  if (typeof contentWidth === "string") {
-    const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(contentWidth.trim());
-    if (m) return parseFloat(m[1]);
-  }
-  return undefined;
-}
-
 /** Unlayer's body content width fallback when `contentWidth` isn't fixed px. */
 const FALLBACK_BODY_CONTENT_WIDTH = 500;
 /** Unlayer's default content-block padding when a block sets none. */
 export const DEFAULT_CONTAINER_PADDING = "10px";
 
 /**
- * A body `contentWidth` resolved to px: the fixed px value, or `fallback`
+ * A body `contentWidth` resolved to px: the fixed px value (a number, or a numeric string with an optional px unit:
+ * `600`, `"600px"`, `"600"`), or `fallback`
  * (500, Unlayer's base width) for non-px values like `"50%"` / `"auto"`.
  *
  * Shared with Row's grid CSS (`toContentWidthPx`) so the slot geometry here and
@@ -92,7 +80,7 @@ export function bodyContentWidthPx(
   contentWidth: unknown,
   fallback: number = FALLBACK_BODY_CONTENT_WIDTH
 ): number {
-  return fixedContentWidth(contentWidth) ?? fallback;
+  return toPx(contentWidth) ?? fallback;
 }
 
 export interface SlotContext {
@@ -137,7 +125,7 @@ export function contentSlotWidth(ctx: SlotContext): number {
   return colAvail - ip.left - ip.right;
 }
 
-const PERCENT = /^\d+(?:\.\d+)?%$/;
+export const PERCENT = /^\d+(?:\.\d+)?%$/;
 
 /** Round to 2 decimals, matching the editor's percent precision. */
 function round2(n: number): number {
@@ -150,7 +138,8 @@ function round2(n: number): number {
  * Only touches a pinned image (`autoWidth === false`) whose `maxWidth` is a
  * px/number placeholder; a percent `maxWidth` is already canonical and is left
  * as-is, and a responsive image (`autoWidth !== false`) is untouched. A pin
- * wider than the slot clamps to 100%, mirroring the editor.
+ * wider than the slot clamps to 100%, mirroring the editor. The percent is rounded as the editor rounds it (to 2
+ * decimals), in the HTML and the design alike.
  */
 export function pinImageSrc<T extends Record<string, any> | undefined>(
   src: T,
diff --git a/packages/react/src/utils/inline-html.ts b/packages/react/src/utils/inline-html.ts
new file mode 100644
index 00000000..b030c88d
--- /dev/null
+++ b/packages/react/src/utils/inline-html.ts
@@ -0,0 +1,106 @@
+/**
+ * Rich text in a Paragraph's, Heading's or Button's children (`Hello <strong>world</strong>`, a link, a component
+ * of yours or react-intl's <FormattedMessage>): it's rendered while the template is collected (see record.tsx),
+ * and this keeps what text can hold. Inline formatting stays (with a link's href, target, rel and title, and
+ * styles and classes, which the editor's text keeps too: a <Head>'s stylesheet styles them, and inside a <Tailwind> a
+ * Paragraph's, Heading's or Button's classes are inlined as styles); other elements (a div, a table, an image) leave only their text, so no block gets into a paragraph; and
+ * nothing that runs code (React writes no event handler; a `javascript:` URL or a CSS expression is left out, and a
+ * tag that never ends), nor a <script>'s or <style>'s text, which React 19 writes as it is.
+ */
+import { replaceTags, rewrite } from "@unlayer-internal/shared-elements";
+import { decoded } from "./entities";
+
+const INLINE = /^(strong|b|em|i|u|s|a|br|span|code|sup|sub|small|mark)$/;
+const RAW = /<(script|style)\b/iy;
+const ENDS: Record<string, RegExp> = { script: /<\/script\s*>/gi, style: /<\/style\s*>/gi };
+
+/**
+ * `html` without each <script> and <style>, as `/<(script|style)\b[^>]*>[\s\S]*?(<\/\1\s*>|$)/gi` takes them out: from
+ * its start tag to its end tag, or the end. Read once: where a start tag's `>` is the last (it then takes out the end
+ * tags after it), that regex read to the end again from each `<` after it.
+ */
+function withoutRaw(html: string): string {
+  return rewrite(html, (at) => {
+    RAW.lastIndex = at;
+    const name = RAW.exec(html)?.[1];
+    if (!name) return at + 1;
+    // (Where its start tag has no `>`, no start tag after it has one.)
+    const open = html.indexOf(">", RAW.lastIndex);
+    if (open < 0) return;
+    const end = ENDS[name.toLowerCase()];
+    end.lastIndex = open + 1;
+    const close = end.exec(html);
+    return [close ? close.index + close[0].length : html.length, ""];
+  });
+}
+
+/**
+ * `html` without its comments (`<!--…-->`, to its end where none closes, as a browser reads one), nor what a browser
+ * reads as one (`<!…>`, `<?…>`): kept, one left open would hide the rest of the email.
+ */
+function withoutComments(html: string): string {
+  return rewrite(html, (at) => {
+    if (html.startsWith("<!--", at)) {
+      // (`<!-->` and `<!--->` end at once, as a browser reads them.)
+      const abrupt = html.startsWith(">", at + 4) ? at + 5 : html.startsWith("->", at + 4) ? at + 6 : -1;
+      const end = abrupt > 0 ? abrupt - 3 : html.indexOf("-->", at + 4);
+      return [end < 0 ? html.length : end + 3, ""];
+    }
+    if (html[at + 1] !== "!" && html[at + 1] !== "?") return at + 1;
+    const end = html.indexOf(">", at + 2);
+    return [end < 0 ? html.length : end + 1, ""];
+  });
+}
+
+/**
+ * `html` to the first tag that never ends (no `>` after it: `<img src=x onerror=…` before an unclosed <style>, which
+ * takes the end tags after it out), as a browser reads such a tag: to the end, with what follows it. Kept, its
+ * attributes would be a tag's in the markup the text is written into.
+ */
+function toUnfinishedTag(html: string): string {
+  const start = /<\/?[a-zA-Z]/g;
+  start.lastIndex = html.lastIndexOf(">") + 1;
+  const at = start.exec(html)?.index;
+  return at === undefined ? html : html.slice(0, at);
+}
+
+/** `images`: an <img> stays too (its src, alt, width and height): what a link alone holds (see the model's linkBlock). */
+export function inlineHtml(html: string, images = false): string {
+  // A <script>'s or <style>'s text isn't text (React 19 writes it as it is, markup and all): out, with them, and
+  // comments and a tag that never ends. Then each tag, as `/<(\/?)([a-zA-Z][\w:-]*)([^>]*)>/g` reads it, but read once (see replaceTags).
+  // Each tag it keeps is set apart (\u0001…\u0002), so a `<` or `>` in the text around one is text, written as a
+  // reference: what's left beside a tag taken out can't make a tag (raw markup's own \u0001 and \u0002 are dropped first).
+  const apart = replaceTags(toUnfinishedTag(withoutComments(withoutRaw(html.replace(/[\u0001\u0002]/g, "")))), /<\/?[a-zA-Z]/y, (written) => {
+    // (Its name, then its attributes to its `>`, the tag's last character.)
+    const [start, close, name] = /^<(\/?)([a-zA-Z][\w:-]*)/.exec(written)!;
+    const attributes = written.slice(start.length, -1);
+    const tag = name.toLowerCase();
+    const image = images && tag === "img";
+    if (!INLINE.test(tag) && !image) return "";
+    if (close) return tag === "br" || image ? "" : `\u0001</${tag}>\u0002`;
+    let kept = "";
+    // As React writes attributes: name="escaped value"; read as the browser reads it (its references decoded, the
+    // characters it leaves out of a URL's scheme dropped), so `&#106;avascript:` in markup written as HTML is one too.
+    for (const [, key, value] of attributes.matchAll(/\s([\w-]+)="([^"]*)"/g)) {
+      const allowed = /^(style|title|class)$/.test(key) || (tag === "a" && /^(href|target|rel)$/.test(key)) || (image && /^(src|alt|width|height)$/.test(key));
+      // (Its `<` and `>` as references, the same value to a browser, so the tag is one to asWritten, read whole.)
+      if (allowed && !/(java|vb)script:|expression\(|^data:/i.test(decoded(value))) kept += ` ${key}="${value.replace(/</g, "&lt;").replace(/>/g, "&gt;")}"`;
+    }
+    return `\u0001<${tag}${kept}${tag === "br" || image ? "/" : ""}>\u0002`;
+  });
+  const tags = apart.replace(/\u0001[^\u0002]*\u0002|[<>]/g, (part) => (part.length > 1 ? part.slice(1, -1) : part === "<" ? "&lt;" : "&gt;"));
+  return asWritten(tags);
+}
+
+/**
+ * Markup's text as text given as a string writes it: its quotes as written (React writes `'` as `&#x27;` and `"` as
+ * `&quot;`, which an email service's tag can't read: `{{ name | default: "friend" }}`), and an email service's
+ * <%name%> tag. A tag's attributes keep theirs (each tag read to the next `<` or `>`, once, whatever the text holds:
+ * inlineHtml writes a kept attribute's `<` and `>` as references, so a tag is read whole), and the quotes come back
+ * before the <%name%> tags do, so no `>` of one is read as a tag's end.
+ */
+export function asWritten(html: string): string {
+  // (A tag's attributes are double-quoted, so its `'` are as written too: a link's `{{ email | default: 'none' }}`.)
+  const quoted = html.replace(/<[^<>]*>|&#x27;|&quot;/g, (part) => (part === "&#x27;" ? "'" : part === "&quot;" ? '"' : part.replace(/&#x27;/g, "'")));
+  return quoted.replace(/&lt;%([\w.]+)%&gt;/g, "<%$1%>");
+}
diff --git a/packages/react/src/utils/internals.ts b/packages/react/src/utils/internals.ts
new file mode 100644
index 00000000..8c20b3f1
--- /dev/null
+++ b/packages/react/src/utils/internals.ts
@@ -0,0 +1,65 @@
+/**
+ * What the other entries ("@unlayer/react-elements/async", "/tailwind", "/head") use of the main one's internals,
+ * on `renderToHtml` (no export of its own): a render's scope, a template collected waiting for what's async in it
+ * (the waiting itself is the async entry's: see src/async/collect.ts), the synchronous renders in that scope (the
+ * render functions make one of their own), the engine's static markup, a part of a template that's left out alone
+ * when it fails (Markdown's), and what a component shares with the rest of its render (the work left to the Markdown
+ * and code entries' blocks: see render-scope.ts's sharedByRender).
+ */
+import type React from "react";
+import type { UnlayerConfig } from "@unlayer-internal/shared-elements";
+import { collectedFrom, collecting, type Collected } from "../model";
+import { isElementsType, providedConfig, sayUnread, unwrapSteps, type Steps, type Unwrapped } from "./unwrap-root";
+import { isRoot, rootName, ROOTLESS } from "./root-type";
+import { newScope, part, renderDone, setRenderConfig, sharedByRender, withScope, type Scope } from "./render-scope";
+import { rootConfig, type RootConfigProps } from "../context/layer-config";
+import { htmlDocument, htmlParts, plainText } from "./render-to-html";
+import { designJson } from "./render-to-json";
+import { errorPart, flatten, PENDING, renderShared, renderStatic, track, walkAsync, type CollectOptions, type Flat } from "../engine";
+
+export const INTERNALS = Symbol.for("@unlayer/react-elements/internals");
+
+/**
+ * The root a template unwraps to, its steps taken by `take` (awaiting what they wait for), what it found kept in the
+ * render's `scope` (see unwrap-root.ts's `Unwrapped`). Where none comes out, what the template rendered: the
+ * synchronous render after renders it as it renders a template with no root, without calling the template again; in
+ * `api` (a render function that renders one), what it says where a root's settings go unread, as the synchronous one.
+ */
+async function unwrapAsync(element: React.ReactElement, scope: Scope, take: (steps: Steps) => Promise<Unwrapped>, idPrefix?: string, api?: string): Promise<React.ReactElement> {
+  if (typeof element.type === "string" || isElementsType(element.type)) return element;
+  const found = (scope.unwrapped = await take(unwrapSteps(element, withScope(scope, sharedByRender), idPrefix)));
+  if (isRoot(found.root.type)) return found.root;
+  if (api) withScope(scope, () => sayUnread(found, element, api));
+  return found.rendered ?? element;
+}
+
+/**
+ * A root's content collected in `scope` by `collect` (waiting for its async components, `use()` and Suspense,
+ * siblings at once), for the synchronous render after: what it does with parts that fail is `options`' over the
+ * root's config. A template with no root (what it rendered: see `unwrapAsync`) is its own content, as the
+ * synchronous render collects it (see root-content.ts).
+ */
+async function collectAsync(root: React.ReactElement, scope: Scope, options: Partial<UnlayerConfig> | undefined, collect: (node: React.ReactNode, walk: CollectOptions) => Promise<Flat>): Promise<Collected> {
+  const props = root.props as RootConfigProps & { children?: React.ReactNode };
+  const content = isRoot(root.type) ? props.children : root;
+  const name = rootName(root.type) ?? ROOTLESS;
+  const { node, options: walk } = withScope(scope, () => {
+    setRenderConfig(rootConfig(props, providedConfig(root), options));
+    return collecting(content, name);
+  });
+  const flat = await collect(node, walk);
+  const done = withScope(scope, () => collectedFrom(flat));
+  scope.cache.set(content as object, done);
+  return done;
+}
+
+/** What the async entry's walk uses of the engine (see src/async/collect.ts). */
+const engine = { walk: walkAsync, flatten, PENDING, errorPart, track };
+export type Engine = typeof engine;
+
+/** The synchronous renders, run in the scope the async renderers collected the template in. */
+const renders = { html: htmlDocument, parts: htmlParts, text: plainText, json: designJson };
+export type Renders = typeof renders;
+
+
+export const internals = { newScope, withScope, unwrapAsync, collectAsync, isRoot, render: renderStatic, engine, renders, part, shared: renderShared, done: renderDone };
diff --git a/packages/react/src/utils/nested-renders.test.tsx b/packages/react/src/utils/nested-renders.test.tsx
index 685099a0..d7581ccf 100644
--- a/packages/react/src/utils/nested-renders.test.tsx
+++ b/packages/react/src/utils/nested-renders.test.tsx
@@ -1,17 +1,18 @@
 /**
  * Elements' renders inside another React render: an app page that renders on the server and works out its
  * design or HTML while it renders (`useMemo(() => renderToJson(<T />))`), and a template's component that does.
- * React keeps a render's hook state in its module, so a render started inside another one with the same module
- * broke the hooks the outer component called after it (see server-renderer.ts).
+ * Elements' renders put React's hooks dispatcher back as they found it, so the outer component's hooks after the
+ * call work, however deep (0.3.0 rendered with react-dom, whose module keeps a render's hook state: three levels
+ * deep, a component calling a hook after the call was left out).
  */
 import { describe, it, expect, vi } from "vitest";
-import React, { useMemo, useState } from "react";
-import { renderToString } from "react-dom/server";
+import React, { useId, useMemo, useState } from "react";
+import { renderToPipeableStream, renderToStaticMarkup, renderToString } from "react-dom/server";
 // @ts-ignore react-dom/server.browser has no types of its own (the same API as react-dom/server).
 import { renderToString as renderToStringWithBrowserBuild } from "react-dom/server.browser";
 import { renderToHtml, renderToPlainText } from "./render-to-html";
 import { renderToJson } from "./render-to-json";
-import { Email, Row, Column, Paragraph } from "../index";
+import { Email, Page, Row, Column, Paragraph } from "../index";
 
 const Template = () => <Email><Row><Column><Paragraph>Hello from the template</Paragraph></Column></Row></Email>;
 
@@ -35,6 +36,66 @@ describe("a page that renders on the server", () => {
   });
 });
 
+/** Where a stream of react-dom's is written: nowhere (Node's streams aren't in this test's environment). */
+const sink = () => ({ write: () => true, end: () => {}, destroy: () => {}, on() { return this; } }) as unknown as NodeJS.WritableStream;
+
+describe("a page that renders on the server, with a Context Provider around a component that renders an email", () => {
+  // The template's own providers are the email's. A context it doesn't provide reads, inside the page's renderToString,
+  // the page's value, as 0.2 did (react-dom's own render inside a render, renderToStaticMarkup in a component, reads
+  // its default), and inside its stream, its default (see src/regression/render-isolation.test.tsx). An email that
+  // mustn't read the page's gets the value as a prop, or a provider of its own in what's rendered.
+  it("gives the email the template's own providers over the page's, in react-dom's renders and its streaming one", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const Brand = React.createContext("default");
+      const Reads = () => <Paragraph>{`brand=${React.useContext(Brand)}`}</Paragraph>;
+      const email = (own?: string) => <Email>{own ? <Brand.Provider value={own}><Row><Column><Reads /></Column></Row></Brand.Provider> : <Row><Column><Reads /></Column></Row>}</Email>;
+      const ReactDomReads = () => <>{`brand=${React.useContext(Brand)}`}</>;
+      expect(renderToPlainText(email()).trim()).toBe("brand=default");
+      const seen: string[][] = [];
+      function Preview() {
+        const read = useMemo(() => [renderToPlainText(email()).trim(), renderToPlainText(email("its own")).trim()], []);
+        seen.push(read);
+        return <pre>{read.join(", ")}</pre>;
+      }
+      // (react-dom's render inside a component of react-dom's render, which has no hooks: React 18's would lose them.)
+      const ReactDom = () => (seen.push([renderToStaticMarkup(<ReactDomReads />)]), null);
+      const page = <Brand.Provider value="the page's"><main><Preview /><ReactDom /></main></Brand.Provider>;
+      renderToString(page);
+      await new Promise<void>((resolve, reject) => {
+        const stream = renderToPipeableStream(page, { onAllReady: () => (stream.pipe(sink()), resolve()), onShellError: reject });
+      });
+      expect(seen).toEqual([["brand=the page's", "brand=its own"], ["brand=default"], ["brand=default", "brand=its own"], ["brand=default"]]);
+      expect(error).not.toHaveBeenCalled();
+    } finally {
+      error.mockRestore();
+    }
+  });
+});
+
+describe("a template's component that renders another template, inside an app's renderToString", () => {
+  it("gives that render the outer walk's providers over the app's, and the outer render's value for a context neither provides", () => {
+    // (Inside an app's renderToString, a context no walk provides reads that render's value; see
+    // src/regression/render-isolation.test.tsx.)
+    const Brand = React.createContext("default");
+    const Theme = React.createContext("light");
+    const Inner = () => <Paragraph>{`theme=${React.useContext(Theme)} brand=${React.useContext(Brand)}`}</Paragraph>;
+    let inner = "";
+    const Starts = () => {
+      inner = renderToPlainText(<Email><Row><Column><Inner /></Column></Row></Email>).trim();
+      return <Paragraph>{`outer brand=${React.useContext(Brand)}`}</Paragraph>;
+    };
+    let outer = "";
+    const Page = () => {
+      outer = renderToPlainText(<Email><Theme.Provider value="the outer email's"><Row><Column><Starts /></Column></Row></Theme.Provider></Email>).trim();
+      return <div />;
+    };
+    renderToString(<Brand.Provider value="TenantA"><Theme.Provider value="the page's"><Page /></Theme.Provider></Brand.Provider>);
+    expect(inner).toBe("theme=the outer email's brand=TenantA");
+    expect(outer).toBe("outer brand=TenantA");
+  });
+});
+
 describe("a page that renders with react-dom's browser build (react-dom/server.browser)", () => {
   it("can work out the template's design and HTML while it renders, and use hooks after (as 0.1.22 could)", () => {
     function EditorPage() {
@@ -59,7 +120,34 @@ describe("a template's component", () => {
     expect(html).toContain("1 rows");
   });
 
-  it("can nest one more, in the module it's in, as 0.1.22 did: a component calling a hook after the call is left out, named", () => {
+  it("starts a render where it is, inside the providers around it, its ids the document's; one the rest of the user's code starts, as alone", async () => {
+    // By design (the walker's `calling`): as React's renders inside a render read the context it has, and so the ids
+    // of an Elements render a component puts in the document don't repeat the document's.
+    const { registerTool } = await import("../index");
+    const asyncRenderers = await import("../async");
+    const Theme = React.createContext("none");
+    const Themed = () => <Paragraph>{`theme=${React.useContext(Theme)} id=${useId()}`}</Paragraph>;
+    const inner = <Email><Row><Column><Themed /></Column></Row></Email>;
+    const seen = (html: string) => /theme=(\w+) id=([^<\s]+)/.exec(html)!.slice(1);
+    const [none, alone] = seen(renderToHtml(inner));
+    expect(none).toBe("none");
+    const got: Record<string, string[]> = {};
+    const Starts = ({ at }: { at: string }) => ((got[at] = seen(renderToHtml(inner))), <Paragraph>{`outer ${useId()}`}</Paragraph>);
+    const Tool = registerTool({ name: "nested_where", renderer: { exporters: { email: () => ((got.exporter = seen(renderToHtml(inner))), "<b>tool</b>") } } });
+    const outer = (at: string) => <Email><Theme.Provider value="dark"><Row><Column><Paragraph>Before</Paragraph><Starts at={at} /><Tool /></Column></Row></Theme.Provider></Email>;
+    const Wrapper = () => ((got.wrapper = seen(renderToHtml(inner))), outer("component in a wrapper's template"));
+    const html = renderToHtml(outer("component"));
+    await asyncRenderers.renderToHtml(outer("component, async"));
+    renderToHtml(<Theme.Provider value="dark"><Wrapper /></Theme.Provider>);
+    for (const at of ["component", "component, async", "component in a wrapper's template"]) {
+      expect(got[at][0], at).toBe("dark");
+      expect(got[at][1], at).not.toBe(alone);
+    }
+    expect(html).not.toContain(got.component[1]);
+    for (const at of ["exporter", "wrapper"]) expect(got[at], at).toEqual([none, alone]);
+  });
+
+  it("can nest one more, and a component there calls hooks after the call", () => {
     const error = vi.spyOn(console, "error").mockImplementation(() => {});
     try {
       function Deepest() {
@@ -77,20 +165,86 @@ describe("a template's component", () => {
       }
       const html = renderToHtml(<Email><Row><Column><Paragraph>Outer</Paragraph><Deeper /></Column></Row></Email>);
       expect(html).toContain("Outer");
-      expect(html).toContain("deepest shown, hook left out");
-      // Named (the render that explains why calls it once more on its own, where it renders).
-      expect(error.mock.calls.some((call) => String(call[0]).includes("<DeepestWithHook>"))).toBe(true);
+      expect(html).toContain("deepest shown, hook shown");
+      expect(error).not.toHaveBeenCalled();
     } finally {
       error.mockRestore();
     }
   });
 });
 
+describe("a template that renders another one while it's called (its wrapper)", () => {
+  // That render is its own, as one a component among the rows starts is: what it does with a part that fails, the
+  // parts it leaves out and its ids aren't the outer render's, which its root's config hadn't given yet.
+  const InnerBroken = (): React.ReactElement => {
+    throw new Error("inner data");
+  };
+  const OuterBroken = (): React.ReactElement => {
+    throw new Error("outer data");
+  };
+  const Id = () => <div dangerouslySetInnerHTML={{ __html: `useId=${useId()}` }} />;
+  const inner = <Email><Row><Column><Paragraph>Inner</Paragraph><InnerBroken /><Id /></Column></Row></Email>;
+  const outer = <Email><Row><Column><Paragraph>Outer</Paragraph><OuterBroken /><Id /></Column></Row></Email>;
+  const renderers = async () => {
+    const { renderToHtmlParts } = await import("./render-to-html");
+    const asyncRenderers = await import("../async");
+    const sync = { renderToHtml, renderToPlainText, renderToJson, renderToHtmlParts } as Record<string, (element: React.ReactElement, options?: object) => unknown>;
+    return { sync, all: { ...sync, ...Object.fromEntries(Object.entries(asyncRenderers).filter(([name]) => name in sync).map(([name, render]) => [`async ${name}`, render])) } as Record<string, (element: React.ReactElement, options?: object) => unknown> };
+  };
+
+  it("keeps the outer render's onError: a part of its own that fails fails it", async () => {
+    const { sync, all } = await renderers();
+    const left: unknown[] = [];
+    for (const [innerName, render] of Object.entries(sync)) {
+      function Outer() {
+        render(inner, { onError: (failure: unknown) => void left.push(failure) });
+        return outer;
+      }
+      for (const [name, outerRender] of Object.entries(all)) {
+        const rendering = async () => outerRender(<Outer />);
+        await expect(rendering(), `${innerName} in ${name}`).rejects.toThrow(/outer data/);
+      }
+    }
+    expect(left.length).toBeGreaterThan(0);
+  });
+
+  it("keeps the parts each leaves out its own", async () => {
+    const { renderToHtmlParts } = await import("./render-to-html");
+    const asyncRenderers = await import("../async");
+    let innerParts: ReturnType<typeof renderToHtmlParts> | undefined;
+    function Outer() {
+      innerParts = renderToHtmlParts(inner, { onError: () => {} });
+      return outer;
+    }
+    for (const render of [renderToHtmlParts, asyncRenderers.renderToHtmlParts]) {
+      const parts = await render(<Outer />, { onError: () => {} });
+      expect(parts.omitted.map((e) => e.component)).toEqual(["OuterBroken"]);
+      expect(innerParts!.omitted.map((e) => e.component)).toEqual(["InnerBroken"]);
+    }
+  });
+
+  it("keeps its ids' prefix its own", async () => {
+    const { sync, all } = await renderers();
+    const id = /useId=([^<"\\]*)/;
+    for (const [innerName, render] of Object.entries(sync)) {
+      function Outer() {
+        render(inner, { onError: () => {}, idPrefix: "inner-" });
+        return outer;
+      }
+      for (const [name, outerRender] of Object.entries(all)) {
+        if (/Json/.test(name)) continue;
+        const given = id.exec(JSON.stringify(await outerRender(<Outer />, { onError: () => {} })))?.[1];
+        expect(given, `${innerName} in ${name}`).toMatch(/R/);
+        expect(given, `${innerName} in ${name}`).not.toContain("inner-");
+      }
+    }
+  });
+});
+
 describe("a page that renders on the server, with a template whose component works out another design", () => {
-  // Three renders: the page's (react-dom/server), Elements' (another module of react-dom's), and the component's call
-  // (none is left that isn't rendering: Elements' module, as 0.1.22 rendered). The page's hooks keep working; the
-  // component renders, unless it calls a hook after the call (it's left out, named).
-  it("keeps the page's hooks, and renders that component unless it calls a hook after", () => {
+  // Three renders: the page's (react-dom/server), Elements', and the component's call. The page's hooks keep working,
+  // and the component's after the call.
+  it("keeps the page's hooks, and the component's hooks after its call", () => {
     const error = vi.spyOn(console, "error").mockImplementation(() => {});
     try {
       function Count() {
@@ -107,8 +261,8 @@ describe("a page that renders on the server, with a template whose component wor
         const [zoom] = useState(1);
         return <pre>{`${html.includes("Outer")}, ${html.includes("1 rows")}, ${html.includes("labelled")}, zoom=${zoom}`}</pre>;
       }
-      expect(renderToString(<PreviewPage />)).toBe("<pre>true, true, false, zoom=1</pre>");
-      expect(error.mock.calls.some((call) => String(call[0]).includes("<CountWithHook>"))).toBe(true);
+      expect(renderToString(<PreviewPage />)).toBe("<pre>true, true, true, zoom=1</pre>");
+      expect(error).not.toHaveBeenCalled();
     } finally {
       error.mockRestore();
     }
@@ -191,6 +345,30 @@ describe("a component of the user's own that calls a hook, in React's developmen
     expect(JSON.stringify(renderToJson(<Counted />))).toContain("n=1");
   });
 
+  // As React does, and as a component among the rows does: its last render isn't taken as the template.
+  it("fails a template that sets its state every time it renders", async () => {
+    const { RenderError } = await import("../index");
+    const asyncRenderers = await import("../async");
+    function Looping() {
+      const [n, setN] = useState(0);
+      setN(n + 1);
+      return <Email><Row><Column><Paragraph>{`n=${n}`}</Paragraph></Column></Row></Email>;
+    }
+    const looping = /Too many re-renders: a component sets its state every time it renders/;
+    for (const render of [renderToHtml, renderToJson, renderToPlainText]) expect(() => render(<Looping />)).toThrow(looping);
+    for (const render of [asyncRenderers.renderToHtml, asyncRenderers.renderToJson]) await expect(render(<Looping />)).rejects.toThrow(looping);
+    let thrown: unknown;
+    try {
+      renderToHtml(<Looping />);
+    } catch (error) {
+      thrown = error;
+    }
+    expect(thrown).toBeInstanceOf(RenderError);
+    expect(thrown).toMatchObject({ component: "Looping", position: "" });
+    const inside = () => renderToHtml(<Email><Row><Column><Looping /></Column></Row></Email>);
+    expect(inside).toThrow(looping);
+  });
+
   it("renders a template with a hook and a list without keys the same every time", () => {
     const error = vi.spyOn(console, "error").mockImplementation(() => {});
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
@@ -213,21 +391,61 @@ describe("a component of the user's own that calls a hook, in React's developmen
 });
 
 describe("a Row whose Columns don't fit its layout", () => {
-  // As in 0.1.22: the body says so (console.error) and renders without its rows; renderToHtml and renderToPlainText
-  // don't throw (a mailer that never expected them to would fail).
-  it("renders without its rows, in the HTML and the plain text alike", async () => {
-    const { renderToPlainText } = await import("./render-to-html");
+  // It fails the render (a RenderError naming it and where it is), the HTML, the plain text and the design alike.
+  // With `onError: "omit"` it's left out of all three, said once per render with console.error, and listed in
+  // renderToHtmlParts' `omitted`; the rows around it render. (0.1.22 rendered no rows at all, and its design kept it.)
+  const MESSAGE = "A Row with the TwoEqual layout, for 2 Columns, has 1 (in <Row> at Row 2)";
+  const template = async (Root: React.ElementType) => {
     const { ColumnLayouts } = await import("../index");
+    return (
+      <Root>
+        <Row><Column><Paragraph>Before</Paragraph></Column></Row>
+        <Row layout={ColumnLayouts.TwoEqual}><Column><Paragraph>Lonely</Paragraph></Column></Row>
+        <Row layout={ColumnLayouts.TwoEqual}><Column><Paragraph>Left</Paragraph></Column><Column><Paragraph>Right</Paragraph></Column></Row>
+      </Root>
+    );
+  };
+
+  it.each(["Email", "Page", "Document"])("%s: fails the render, or only that Row is left out, said once per render", async (name) => {
+    const roots = await import("../index");
+    const element = await template(roots[name as "Email" | "Page" | "Document"]);
+    for (const render of [() => renderToHtml(element), () => renderToPlainText(element), () => renderToJson(element)]) expect(render).toThrow(`[Unlayer] ${MESSAGE}`);
     const error = vi.spyOn(console, "error").mockImplementation(() => {});
     try {
-      const email = <Email><Row><Column><Paragraph>Kept?</Paragraph></Column></Row><Row layout={ColumnLayouts.TwoEqual}><Column><Paragraph>One</Paragraph></Column></Row></Email>;
-      expect(renderToHtml(email)).toMatch(/^<!DOCTYPE/);
-      expect(renderToPlainText(email)).toBe("");
-      expect(error.mock.calls.some((call) => String(call[0]).includes("Body: Failed to render children"))).toBe(true);
+      const omit = { onError: "omit" } as const;
+      const html = renderToHtml(element, omit);
+      expect(html).toMatch(/^<!DOCTYPE/i);
+      expect(html).toContain("Before");
+      expect(html).toContain("Right");
+      expect(html).not.toContain("Lonely");
+      expect(error.mock.calls.map((call) => String(call[0]))).toEqual([`[Unlayer] Left out: ${MESSAGE}`]);
+      expect(renderToPlainText(element, omit)).toBe("Before\n\nLeft\n\nRight");
+      const design = renderToJson(element, omit);
+      expect(design.body.rows.map((row) => [row.cells, row.columns.length])).toEqual([[[1], 1], [[1, 1], 2]]);
+      expect(JSON.stringify(design)).not.toContain("Lonely");
+      // One for each render.
+      expect(error.mock.calls.map((call) => String(call[0]))).toEqual([1, 2, 3].map(() => `[Unlayer] Left out: ${MESSAGE}`));
+      // Listed, with where it is.
+      const { omitted } = roots.renderToHtmlParts(element, omit);
+      expect(omitted.map((e) => [e.message, e.component, e.position])).toEqual([[`[Unlayer] ${MESSAGE}`, "Row", "Row 2"]]);
+      // A function instead of the console.
+      const given: unknown[] = [];
+      error.mockClear();
+      expect(renderToHtml(element, { onError: (e) => void given.push(e.position) })).not.toContain("Lonely");
+      expect([given, error.mock.calls]).toEqual([["Row 2"], []]);
     } finally {
       error.mockRestore();
     }
   });
+
+  it("renderRowToJson fails on it", async () => {
+    const { ColumnLayouts, renderRowToJson } = await import("../index");
+    expect(() => renderRowToJson(<Row layout={ColumnLayouts.ThreeEqual}><Column><Paragraph>One</Paragraph></Column><Column><Paragraph>Two</Paragraph></Column></Row>)).toThrow(
+      "[Unlayer] A Row with the ThreeEqual layout, for 3 Columns, has 2 (in <Row> at Row 1)"
+    );
+    // One that fits gives its row, with the layout's cells.
+    expect(renderRowToJson(<Row layout={ColumnLayouts.TwoWideNarrow}><Column><Paragraph>Wide</Paragraph></Column><Column><Paragraph>Narrow</Paragraph></Column></Row>).cells).toEqual([2, 1]);
+  });
 });
 
 describe("an app's own react-dom/server render of an email, with a Context Provider around it", () => {
@@ -319,3 +537,138 @@ describe("markup written in a Row or Column, with a block or a component of the
     }
   });
 });
+
+describe("a render the user's code starts while Elements renders (a custom tool's exporter or head, `onError`, …)", () => {
+  // It's a render of its own, as one a component starts is. One a custom tool's exporter or head started, or an
+  // `onError` function, shared the outer render's scope: the first `onError`, `idPrefix` and direction set in the
+  // render won, so a block that failed after it was left out of an email whose render should have failed, and each
+  // render listed the parts the other left out.
+  const InnerBroken = (): React.ReactElement => {
+    throw new Error("inner data");
+  };
+  const inner = <Email><Row><Column><Paragraph>Inner</Paragraph><InnerBroken /><Paragraph>{"inner after"}</Paragraph></Column></Row></Email>;
+  const hostile = { onError: "omit", idPrefix: "inner-", textDirection: "rtl" } as const;
+  const listed = (parts: { omitted: Array<{ component: string; position: string }> }) => JSON.stringify({ ...parts, omitted: parts.omitted.map((e) => [e.component, e.position]) });
+
+  it("keeps the outer render's onError: a block that fails after a custom tool's exporter starts one fails the render", async () => {
+    const { registerTool, renderToHtmlParts } = await import("../index");
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const Nested = registerTool({ name: "nested_render", renderer: { exporters: { email: () => (renderToHtmlParts(inner, { onError: "omit" }), "<b>nested</b>") } } });
+      const Broken = registerTool({ name: "broken_after", renderer: { exporters: { email: () => { throw new Error("broken exporter"); } } } });
+      const email = <Email><Row><Column><Nested /><Broken /></Column></Row></Email>;
+      expect(() => renderToHtml(email)).toThrow(/broken exporter/);
+      expect(renderToHtmlParts(email, { onError: () => {} }).omitted.map((e) => e.component)).toEqual(["broken_after"]);
+    } finally {
+      error.mockRestore();
+    }
+  });
+
+  it("leaves the outer render as it is without it, and gives what it gives alone, wherever the user's code starts it", async () => {
+    const { registerTool, renderToHtmlParts } = await import("../index");
+    const { Markdown } = await import("../markdown");
+    const { Tailwind, loadTailwind } = await import("../tailwind");
+    const asyncRenderers = await import("../async");
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      // The renders each place starts: each renderer, with an `onError`, `idPrefix` and direction of its own.
+      const renders: Record<string, () => unknown> = {
+        html: () => renderToHtml(inner, hostile),
+        parts: () => listed(renderToHtmlParts(inner, hostile)),
+        text: () => renderToPlainText(inner, hostile),
+        json: () => JSON.stringify(renderToJson(inner, hostile)),
+        "async html": () => asyncRenderers.renderToHtml(inner, hostile),
+        "async parts": async () => listed(await asyncRenderers.renderToHtmlParts(inner, hostile)),
+        "async text": () => asyncRenderers.renderToPlainText(inner, hostile),
+        "async json": async () => JSON.stringify(await asyncRenderers.renderToJson(inner, hostile)),
+      };
+      const alone: Record<string, unknown> = {};
+      for (const [name, render] of Object.entries(renders)) alone[name] = await render();
+      let active = false;
+      const started: Array<{ where: string; name: string; got: unknown }> = [];
+      const hook = (where: string) => {
+        if (active) for (const [name, render] of Object.entries(renders)) started.push({ where, name, got: render() });
+      };
+      // (Async, it waits for the async ones it starts.)
+      const waiting = async (where: string) => {
+        hook(where);
+        await Promise.all(started.map((s) => s.got));
+      };
+      // Each place the user's code runs in a render.
+      const Tool = registerTool({
+        name: "hooked_tool",
+        renderer: { exporters: { email: () => (hook("exporter"), "<b>tool</b>") }, head: { css: () => (hook("head"), ".hooked { color: #c00; }") } },
+      });
+      const Broken = registerTool({ name: "hooked_broken", renderer: { exporters: { email: () => { throw new Error("broken exporter"); } } } });
+      const Mine = () => (hook("component"), <Paragraph>{`mine ${useId()}`}</Paragraph>);
+      const AsyncMine = async () => (await waiting("async component"), <Paragraph>async mine</Paragraph>);
+      const link = "[A link](https://example.com/a)";
+      // A Tailwind plugin's utility, which Tailwind calls as the render reads the class, once per compiled Tailwind (the
+      // HTML's renders below get one of their own).
+      const plugin = ({ matchUtilities }: { matchUtilities: (utilities: object, options: object) => void }) =>
+        matchUtilities({ hooked: (color: string) => (hook("Tailwind plugin"), { color }) }, { values: { brand: "#123456" } });
+      let tw: Awaited<ReturnType<typeof loadTailwind>>;
+      const content = (
+        <Row>
+          <Column>
+            <Mine />
+            <Tool />
+            <Markdown url={(url) => (hook("Markdown url"), url)}>{link}</Markdown>
+            <Paragraph className="hooked-brand">Styled</Paragraph>
+            <Broken />
+            <Paragraph>After</Paragraph>
+          </Column>
+        </Row>
+      );
+      const Template = () => (hook("wrapper"), useId(), <Tailwind tw={tw}><Email>{content}</Email></Tailwind>);
+      const AsyncTemplate = async () => (await waiting("async wrapper"), <Tailwind tw={tw}><Email>{content}<Row><Column><AsyncMine /></Column></Row></Email></Tailwind>);
+      const onError = () => hook("onError");
+      const outer: Record<string, (options: object) => unknown> = {
+        html: (options) => renderToHtml(<Template />, options),
+        parts: (options) => listed(renderToHtmlParts(<Template />, options)),
+        text: (options) => renderToPlainText(<Template />, options),
+        json: (options) => JSON.stringify(renderToJson(<Template />, options)),
+        "async html": (options) => asyncRenderers.renderToHtml(<AsyncTemplate />, options),
+        "async parts": async (options) => listed(await asyncRenderers.renderToHtmlParts(<AsyncTemplate />, options)),
+        "async text": (options) => asyncRenderers.renderToPlainText(<AsyncTemplate />, options),
+        "async json": async (options) => JSON.stringify(await asyncRenderers.renderToJson(<AsyncTemplate />, options)),
+      };
+      const given = async (render: () => unknown) => {
+        try {
+          return await render();
+        } catch (thrown) {
+          return `threw ${(thrown as Error).message}`;
+        }
+      };
+      const places = new Set<string>();
+      // The render's own `onError` (it fails, as the block after the custom tool does), and a function.
+      for (const options of [{}, { onError }]) {
+        for (const [name, render] of Object.entries(outer)) {
+          const compiled = async () => (name === "html" ? (tw = await loadTailwind({ plugins: [plugin] })) : tw);
+          active = false;
+          await compiled();
+          const stubbed = await given(() => render(options));
+          active = true;
+          started.length = 0;
+          await compiled();
+          const got = await given(() => render(options));
+          active = false;
+          const label = `${name}, ${"onError" in options ? "onError function" : "throwing"}`;
+          expect(got, label).toEqual(stubbed);
+          if (!("onError" in options)) expect(String(got), label).toMatch(name.endsWith("json") ? /^\{/ : /^threw .*broken exporter/);
+          for (const s of started) {
+            places.add(s.where);
+            expect(await s.got, `${s.name} in ${s.where}, in ${label}`).toEqual(alone[s.name]);
+          }
+        }
+      }
+      expect([...places].sort()).toEqual(["Markdown url", "Tailwind plugin", "async component", "async wrapper", "component", "exporter", "head", "onError", "wrapper"]);
+      // (The class did style the Paragraph.)
+      expect(await outer.html({ onError: () => {} })).toMatch(/color: #123456[^>]*>\s*Styled/);
+    } finally {
+      error.mockRestore();
+      warn.mockRestore();
+    }
+  });
+});
diff --git a/packages/react/src/utils/normalize.tsx b/packages/react/src/utils/normalize.tsx
deleted file mode 100644
index 69bc2f28..00000000
--- a/packages/react/src/utils/normalize.tsx
+++ /dev/null
@@ -1,492 +0,0 @@
-/**
- * A template's Rows, Columns and blocks, as React renders them: one render
- * collects them (see collect.ts and record.tsx), with the user's components,
- * Fragments, conditions, hooks and Context handled by React itself. What it
- * gives back is the template as Elements components only (Email > Row >
- * Column > blocks), which the HTML, the head and the design are then made
- * from, so they can't disagree.
- *
- * What a template puts among them that isn't one keeps what it did before:
- * markup among the rows is kept as it is; text in a Row or Column shows as
- * text (with a warning); a component of the user's own that renders markup in
- * a Column is an HTML block named after it; other markup in a Row or Column is
- * left out. A component that throws, suspends or is async is left out, with a
- * message, and the rest renders.
- */
-import React from "react";
-import { renderToStaticMarkup, renderToString } from "./server-renderer";
-import { COLLECTING_ID, MARK, within, type Collection, type Recorded } from "./collect";
-import { guard } from "./record";
-import { callIsolated, FORWARD_REF, isAsyncComponent, isThenable, MEMO } from "./unwrap-root";
-import { scopeCache } from "./render-scope";
-import Row from "../components/Row";
-import Column from "../components/Column";
-import Html from "../components/Html";
-
-/**
- * On markup a component of the user's own rendered in a Column (see `keptMarkup`): the Html block the design
- * keeps it as. The HTML numbers it after the component, and the head counts it so too.
- */
-export const KEPT = Symbol.for("@unlayer/react-elements/kept");
-
-type Within = { at: number; children: Node[] };
-type Node =
-  | { kind: "raw"; html: string }
-  | ({ kind: "block" } | { kind: "failed" }) & { at: number }
-  | ({ kind: "row" } | { kind: "column" } | { kind: "boundary" }) & Within;
-
-/** The markers in a collected render, as a tree; what's between them is kept as raw HTML. */
-function parse(html: string, collection: Collection): Node[] {
-  const root: Node[] = [];
-  const open: Node[][] = [root];
-  const pattern = new RegExp(`<${MARK} data-n="${collection.nonce}" data-i="(\\d+)"(?: data-e="([ocf])")?></${MARK}>`, "g");
-  let last = 0;
-  for (const match of html.matchAll(pattern)) {
-    const into = open[open.length - 1];
-    if (match.index! > last) into.push({ kind: "raw", html: html.slice(last, match.index) });
-    last = match.index! + match[0].length;
-    const at = Number(match[1]);
-    const edge = match[2];
-    if (edge === "o") {
-      const children: Node[] = [];
-      into.push({ kind: collection.recorded[at].kind as "row" | "column" | "boundary", at, children });
-      open.push(children);
-    } else if (edge === "c") open.pop();
-    else into.push({ kind: edge === "f" ? "failed" : "block", at });
-  }
-  if (last < html.length) open[open.length - 1].push({ kind: "raw", html: html.slice(last) });
-  if (open.length !== 1) throw new Error("[Unlayer] a collected render's markers don't pair up");
-  return root;
-}
-
-const TEXT_ENTITIES: Record<string, string> = { "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&#x27;": "'" };
-const VOID = /^(area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)$/i;
-
-type Part = { text: string } | { tag: string; html: string; inner?: string };
-
-/** Raw HTML as React wrote it: text (unescaped) and top-level elements, in order. */
-function parts(html: string): Part[] {
-  const out: Part[] = [];
-  let at = 0;
-  const text = (s: string) => s && out.push({ text: s.replace(/&amp;|&lt;|&gt;|&quot;|&#x27;/g, (e) => TEXT_ENTITIES[e]) });
-  while (at < html.length) {
-    const start = html.indexOf("<", at);
-    if (start < 0) {
-      text(html.slice(at));
-      break;
-    }
-    text(html.slice(at, start));
-    const name = /^<([a-zA-Z][\w:-]*)/.exec(html.slice(start))?.[1];
-    if (!name) {
-      // Not an element (a comment from a template's own markup): kept with what follows as markup.
-      out.push({ tag: "#", html: html.slice(start) });
-      break;
-    }
-    const openEnd = html.indexOf(">", start);
-    if (VOID.test(name) || html[openEnd - 1] === "/") {
-      out.push({ tag: name, html: html.slice(start, openEnd + 1) });
-      at = openEnd + 1;
-      continue;
-    }
-    // Its matching end tag: the same name, nested ones counted.
-    const tags = new RegExp(`<(/?)${name}(?=[\\s>/])`, "gi");
-    tags.lastIndex = openEnd + 1;
-    let depth = 1;
-    let end = -1;
-    for (let m = tags.exec(html); m; m = tags.exec(html)) {
-      depth += m[1] ? -1 : 1;
-      if (depth === 0) {
-        end = m.index;
-        break;
-      }
-    }
-    if (end < 0) {
-      out.push({ tag: "#", html: html.slice(start) });
-      break;
-    }
-    const close = html.indexOf(">", end) + 1;
-    out.push({ tag: name, html: html.slice(start, close), inner: html.slice(openEnd + 1, end) });
-    at = close;
-  }
-  return out;
-}
-
-function innerType(type: any): any {
-  while (type?.$$typeof === MEMO) type = type.type;
-  return type;
-}
-
-/** One render of a root's children, collected. */
-interface Collected {
-  nodes: Node[];
-  collection: Collection;
-  /** The components left out that were said so (once: the HTML, the head and the design build from the same render). */
-  told: Set<number>;
-  /** Each component's kept markup, worked out once (asking the component means calling it again). */
-  kept?: Map<number, React.ReactElement | undefined>;
-  /** A template that isn't one (see tell): every use of this render fails with it, the head's and the design's too. */
-  fatal?: unknown;
-}
-
-const recorded = (c: Collected, node: { at: number }) => c.collection.recorded[node.at] as Recorded & Record<string, any>;
-
-const nameOf = (element: React.ReactElement): string => {
-  if (typeof element.type === "string") return element.type;
-  const type = innerType(element.type);
-  return type?.displayName || type?.name || "component";
-};
-
-/** A component that threw, suspended or is async, left out: said once per render. */
-function leftOut(c: Collected, node: { at: number }): [] {
-  if (c.fatal) throw c.fatal;
-  if (!c.told.has(node.at)) {
-    c.told.add(node.at);
-    try {
-      tell(recorded(c, node).element);
-    } catch (error) {
-      c.fatal = error;
-      throw error;
-    }
-  }
-  return [];
-}
-
-/** A function component of the user's own (memo, forwardRef), called once more on its own; undefined for others. */
-function calledAgain(element: React.ReactElement<any>): { out: unknown } | undefined {
-  const type = innerType(element.type);
-  if (type?.$$typeof !== FORWARD_REF && (typeof type !== "function" || type.prototype?.isReactComponent)) return undefined;
-  const props = { ...element.props };
-  for (const key in type.defaultProps) if (props[key] === undefined) props[key] = type.defaultProps[key];
-  return { out: callIsolated(() => (type.$$typeof === FORWARD_REF ? type.render(props, null) : type(props))) };
-}
-
-/**
- * Says why a component was left out: it's called once more on its own, and what it renders is collected, so a
- * component in it that fails says so itself.
- */
-function tell(element: React.ReactElement<any>): void {
-  const type = innerType(element.type);
-  const name = nameOf(element);
-  const async = () =>
-    console.warn(`[Unlayer] <${name}> is async or suspends: Elements renders synchronously, so it's left out. Load its data first and pass it as props.`);
-  if (isAsyncComponent(type)) return async();
-  try {
-    const again = calledAgain(element);
-    // A class, lazy, …: React renders it, and throws what it does.
-    const inner = again ? collected(again.out as React.ReactNode) : collected(element, false);
-    const failed = (nodes: Node[]): Array<{ at: number }> => nodes.flatMap((n) => (n.kind === "failed" ? [n] : "children" in n ? failed(n.children) : []));
-    const found = failed(inner.nodes);
-    for (const node of found) tell(recorded(inner, node).element);
-    if (!found.length) console.error(`[Unlayer] <${name}> failed while rendering, so it's left out.`);
-  } catch (error) {
-    const message = String((error as Error)?.message);
-    // A template that isn't one (a component that's undefined, from a broken or circular import; an object or a Date
-    // as a child) fails the render, wherever it is, as without a component around it: an email missing a block
-    // shouldn't send. (React's production build names these by their error numbers, 130 and 31.)
-    if (/Element type is invalid|Objects are not valid as a React child|Minified React error #(130|31)\b/.test(message)) throw error;
-    // (React's production build says "suspended" as its error #426.)
-    if (isThenable(error) || /async and suspending|suspended|Minified React error #426\b/.test(message)) async();
-    else console.error(`[Unlayer] <${name}> threw while rendering, so it's left out:`, error);
-  }
-}
-
-/** What a component rendered, when that's markup only (its own components' markup in, those that failed left out). */
-function markupOnly(c: Collected, nodes: Node[]): string | undefined {
-  let out = "";
-  for (const node of nodes) {
-    if (node.kind === "raw") out += node.html;
-    else if (node.kind === "failed") leftOut(c, node);
-    else if (node.kind !== "boundary") return undefined;
-    else {
-      const inner = markupOnly(c, node.children);
-      if (inner === undefined) return undefined;
-      out += inner;
-    }
-  }
-  return out;
-}
-
-/**
- * A component of the user's own that rendered markup in a Column: an HTML block of it, named after the component
- * (with its props, for its padding and visibility). An element given `dangerouslySetInnerHTML` gives what's in it,
- * as 0.1.22 kept it (the element itself left out), whatever that holds (a `<div/>`, a stray end tag, a comment);
- * other markup, which 0.1.22 left out (a link, a table, an image, elements side by side), is kept as it is.
- */
-function keptMarkup(c: Collected, node: Within): React.ReactElement | undefined {
-  c.kept ??= new Map();
-  if (!c.kept.has(node.at)) c.kept.set(node.at, keptMarkupOnce(c, node));
-  return c.kept.get(node.at);
-}
-
-function keptMarkupOnce(c: Collected, node: Within): React.ReactElement | undefined {
-  const raw = markupOnly(c, node.children);
-  if (raw === undefined) return undefined;
-  const list = parts(raw);
-  // Text alone shows as text (see `elements`).
-  if (!list.some((p) => "tag" in p)) return undefined;
-  const element = recorded(c, node).element as React.ReactElement<any>;
-  // One element (what's in it may not pair up as markup): React writes `dangerouslySetInnerHTML` and children
-  // alike, so the component is asked which it gave (a <div> when it can't say, as most such are).
-  const one = list.length === 1 || list.some((p) => "tag" in p && p.tag === "#") ? /^<([a-zA-Z][\w:-]*)\b[^>]*>([\s\S]*)<\/\1>$/.exec(raw) : null;
-  // Asked only when it matters (one element), as asking calls the component again.
-  let given = false;
-  if (one) {
-    try {
-      const out = calledAgain(element)?.out as React.ReactElement<{ dangerouslySetInnerHTML?: unknown }> | undefined;
-      given = React.isValidElement(out) && typeof out.type === "string" && out.props.dangerouslySetInnerHTML != null;
-    } catch {
-      given = one[1].toLowerCase() === "div";
-    }
-  }
-  const html = one && given ? one[2] : raw;
-  const Rendered = () => React.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
-  Rendered.displayName = nameOf(element);
-  const { containerPadding, hideOnMobile, hideOnDesktop } = (element.props ?? {}) as Record<string, unknown>;
-  (Rendered as unknown as Record<symbol, unknown>)[KEPT] = React.createElement(Html, {
-    html,
-    ...(containerPadding !== undefined ? { containerPadding } : {}),
-    ...(hideOnMobile !== undefined ? { hideOnMobile } : {}),
-    ...(hideOnDesktop !== undefined ? { hideOnDesktop } : {}),
-  } as Record<string, unknown>);
-  return React.createElement(Rendered, { ...element.props });
-}
-
-/**
- * A block a component of the template rendered to a string (react-dom's own `renderToStaticMarkup`) while the
- * template is collected comes out as its marker. In a prop (an Html block's `html`) that's what it renders.
- */
-function resolvedProps(c: Collected, props: Record<string, any>): Record<string, any> {
-  let out = props;
-  for (const [key, value] of Object.entries(props)) {
-    if (typeof value !== "string" || !value.includes(MARK)) continue;
-    let html = value;
-    try {
-      if (value.includes(c.collection.nonce)) html = markup(c, parse(value, c.collection), (block) => within(null, () => renderToStaticMarkup(block)));
-    } catch {
-      // Markers that don't pair up (part of a string): left for withoutMarkers.
-    }
-    out = out === props ? { ...props } : out;
-    out[key] = withoutMarkers(html, c.collection.nonce);
-  }
-  return out;
-}
-
-/**
- * A marker that got out of the collecting render (it can't, by the Sentinel: this is the net under it) is
- * taken out, and said, rather than sent in an email: what it stood for can't be told any more. Only this
- * render's markers, whole, as React writes them: this runs on finished HTML, after `toSafeHtml`, and taking
- * out anything else (text shaped like a marker in an attribute) could move where an attribute ends.
- */
-function withoutMarkers(html: string, nonce: string): string {
-  const left = new RegExp(`<${MARK} data-n="${nonce}" data-i="\\d+"(?: data-e="[ocf]")?></${MARK}>`, "g");
-  if (!html.includes(nonce) || !html.match(left)) return html;
-  console.error(`[Unlayer] an Elements block rendered inside a component left a marker behind; it's taken out, and the block it stood for is missing.`);
-  return html.replace(left, "");
-}
-
-/** Collected nodes as HTML: markup as it is, each row, column or block by `render`. */
-function markup(c: Collected, nodes: Node[], render: (element: React.ReactElement) => string): string {
-  return nodes
-    .map((node) => {
-      switch (node.kind) {
-        case "raw":
-          return node.html;
-        case "boundary":
-          return markup(c, node.children, render);
-        case "failed":
-          leftOut(c, node);
-          return "";
-        default:
-          return render(element(c, node));
-      }
-    })
-    .join("");
-}
-
-/** A list with keys, as React asks for one it renders (a Row or Column that fails renders its children as they are). */
-const keyed = (list: React.ReactNode[]): React.ReactNode[] =>
-  list.map((child, i) => (React.isValidElement(child) && child.key == null ? React.cloneElement(child, { key: `k${i}` }) : child));
-
-/** A recorded Row, Column or block, as the Elements component it was, with what React rendered in it. */
-function element(c: Collected, node: Extract<Node, { kind: "row" | "column" | "block" }>): React.ReactElement {
-  const r = recorded(c, node);
-  if (node.kind === "block") return React.createElement(r.type, resolvedProps(c, r.props));
-  if (node.kind === "column") return React.createElement(Column, { ...r.props, children: keyed(elements(c, node.children, "column")) });
-  const props = { ...r.props };
-  const children = keyed(elements(c, node.children, "row"));
-  // A layout counts the Columns as written (a condition's place included) or as rendered (from Fragments and
-  // components): either fits it. The rendered Row is then given its cells, which hold no condition's place.
-  if (props.layout) {
-    const columns = children.filter((child) => React.isValidElement(child) && child.type === Column).length;
-    if (columns === props.layout.expectedColumns || React.Children.count(props.children) === props.layout.expectedColumns) {
-      props.cells = props.layout.cells;
-      delete props.layout;
-    }
-  }
-  return React.createElement(Row, { ...props, children });
-}
-
-type Place = "root" | "row" | "column";
-
-/**
- * Markup in a Row or Column that a marker cuts in two (`<p>Hello <Name />, welcome back</p>`, a `<div>` around a
- * block): an element whose start and end tags are in different pieces. Each piece of `nodes`, raw HTML cut where
- * such an element starts and ends, with whether it's in one. React writes each element whole, so one that isn't
- * whole in its piece is cut by a marker.
- */
-function spanned(nodes: Node[]): { node: Node; inside: boolean }[] {
-  const out: { node: Node; inside: boolean }[] = [];
-  // The elements open across pieces, outermost first.
-  const spans: string[] = [];
-  for (const node of nodes) {
-    if (node.kind !== "raw") {
-      out.push({ node, inside: spans.length > 0 });
-      continue;
-    }
-    const html = node.html;
-    // Elements opened in this piece and not closed yet; an end tag of one opened in another ends it (and what's open
-    // in it); one that ends nothing open is passed over, as the browser does.
-    const open: { name: string; at: number }[] = [];
-    let closed = spans.length ? -1 : 0;
-    for (const m of html.matchAll(/<!--[\s\S]*?(?:-->|$)|<(\/?)([a-zA-Z][\w:-]*)\b[^>]*>/g)) {
-      if (!m[2]) continue;
-      const name = m[2].toLowerCase();
-      if (m[1]) {
-        const i = open.map((o) => o.name).lastIndexOf(name);
-        const across = spans.lastIndexOf(name);
-        if (i >= 0) open.length = i;
-        else if (across >= 0) {
-          spans.length = across;
-          open.length = 0;
-          if (!spans.length) closed = m.index! + m[0].length;
-        }
-      } else if (!VOID.test(name) && !m[0].endsWith("/>")) open.push({ name, at: m.index! });
-    }
-    const piece = (from: number, to: number, inside: boolean) => {
-      if (to > from) out.push({ node: { kind: "raw", html: html.slice(from, to) }, inside });
-    };
-    if (closed < 0) piece(0, html.length, true);
-    else {
-      piece(0, closed, true);
-      piece(closed, open[0]?.at ?? html.length, false);
-      if (open.length) piece(open[0].at, html.length, true);
-    }
-    spans.push(...open.map((o) => o.name));
-  }
-  return out;
-}
-
-/**
- * What's among the rows, or in a Row or a Column, as Elements components. In a Row or Column, markup a marker cuts
- * (see `spanned`) is left out whole, as 0.1.22 left it out, with what's in it (text, markup a component renders
- * there); a Row, Column or block in it is kept, as one beside it is.
- */
-function elements(c: Collected, nodes: Node[], place: Place, owner?: React.FC, inMarkup = false): React.ReactNode[] {
-  const inColumn = place === "column";
-  return (place === "root" || inMarkup ? nodes.map((node) => ({ node, inside: inMarkup })) : spanned(nodes)).flatMap(({ node, inside }): React.ReactNode[] => {
-    switch (node.kind) {
-      case "failed":
-        return leftOut(c, node);
-      case "boundary": {
-        const kept = inColumn && !inside ? keptMarkup(c, node) : undefined;
-        if (kept) return [kept];
-        // Markup it renders, where it isn't kept, is named after it in the messages that say so.
-        const Named = () => null;
-        Named.displayName = nameOf(recorded(c, node).element);
-        if (inColumn && !inside && !c.told.has(node.at) && node.children.some((n) => n.kind === "raw" && parts(n.html).some((p) => "tag" in p))) {
-          c.told.add(node.at);
-          console.warn(`Column: <${Named.displayName}> rendered markup that isn't a block, so it's left out. Put HTML in an <Html> block.`);
-        }
-        return elements(c, node.children, place, Named, inside);
-      }
-      case "raw":
-        // In markup a marker cuts, it's that markup's: a Row says where it starts isn't a Column.
-        if (inside) {
-          const name = /^<([a-zA-Z][\w:-]*)/.exec(node.html)?.[1];
-          return place === "row" && name && !inMarkup ? [React.createElement(owner ?? name)] : [];
-        }
-        // Text shows as text. Other markup isn't a Column, which a Row says (and leaves it out); in a Column it's left out.
-        return parts(node.html).flatMap((p): React.ReactNode[] => ("text" in p ? [p.text] : inColumn ? [] : [React.createElement(owner ?? (p.tag === "#" ? "div" : p.tag))]));
-      default:
-        return [element(c, node)];
-    }
-  });
-}
-
-/** A render of `children` that collects them; `guarded`, a component in them that fails is left out. */
-function collected(children: React.ReactNode, guarded = true): Collected {
-  const once = (markup: boolean): Collected => {
-    const collection: Collection = { nonce: nonce(), recorded: [], ...(markup ? { markup } : {}), ...(idsSeen() ? {} : { blind: true }) };
-    const html = within(collection, () => renderToStaticMarkup(<>{guarded ? guard(children, collection) : children}</>, { identifierPrefix: COLLECTING_ID }));
-    return { nodes: parse(html, collection), collection, told: new Set() };
-  };
-  try {
-    return once(false);
-  } catch (error) {
-    // Markup React rejects (`<hr style="…">` with a string style, in a JavaScript template) isn't a component, so no
-    // boundary catches it and it ends the render. Once more with markup guarded too: it's left out, with a message,
-    // and the rest renders, as in 0.1.22. A template that renders doesn't get here, so nothing else changes.
-    if (!guarded) throw error;
-    return once(true);
-  }
-}
-
-/**
- * Whether the React Elements' components call gives them the ids of the render Elements starts (see Sentinel):
- * not where a bundler gave them another copy than react-dom's (Next.js's server layers), where `useId()` throws or
- * gives an outer render's ids.
- */
-function idsSeen(): boolean {
-  let seen = false;
-  const Probe = () => {
-    try {
-      seen = React.useId().slice(1).startsWith(COLLECTING_ID);
-    } catch {
-      // another copy: no render it can see
-    }
-    return null;
-  };
-  renderToStaticMarkup(<Probe />, { identifierPrefix: COLLECTING_ID });
-  return seen;
-}
-
-// Shared by every copy of Elements a process loads, as the collecting stack is (collect.ts): no two renders get one nonce.
-const RENDERS = Symbol.for("@unlayer/react-elements/renders");
-
-/**
- * A collection's nonce, so markup a template's data holds can't name it: letters, digits and "_", from the count of
- * the process's renders and its high-resolution clock (when it started, and the time since to a fraction of a
- * millisecond), which data written before the render can't know. Not random numbers: a framework that prerenders
- * pages takes `crypto.getRandomValues()` and `Math.random()` for a value that changes the page, and Next.js's Cache
- * Components (its new apps' default) fail the build on one, but the nonce never reaches the output. `performance` is
- * what Next.js leaves for timing, and every runtime Elements supports has it.
- */
-function nonce(): string {
-  const shared = globalThis as Record<symbol, number>;
-  const clock = globalThis.performance;
-  return [(shared[RENDERS] = (shared[RENDERS] ?? 0) + 1), (clock?.timeOrigin ?? 0) * 1e3, (clock?.now() ?? 0) * 1e6].map((n) => Math.floor(n).toString(36)).join("_");
-}
-
-/** `children` collected, once per render (the HTML, the head and the design ask for the same). */
-const collect = (children: React.ReactNode): Collected =>
-  children !== null && typeof children === "object" ? scopeCache(children, () => collected(children)) : collected(children);
-
-/**
- * A root's children as HTML (what Body puts inside it): markup among the rows as it is, and each row or block
- * rendered by Elements with `place` giving it the root's settings.
- */
-export function childrenHtml(children: React.ReactNode, place: (child: React.ReactElement) => React.ReactElement): string {
-  const c = collect(children);
-  return withoutMarkers(markup(c, c.nodes, (child) => within(null, () => renderToString(place(child)))), c.collection.nonce);
-}
-
-/** Children (a root's, or a Row on its own) as Elements components only, for the head and the design. */
-export function normalizedChildren(children: React.ReactNode): React.ReactNode[] {
-  const c = collect(children);
-  return elements(c, c.nodes, "root");
-}
-
-/** `root` with its children as Elements components only. */
-export function normalizedRoot(root: React.ReactElement): React.ReactElement {
-  return React.cloneElement(root, undefined, ...normalizedChildren((root.props as { children?: React.ReactNode }).children));
-}
diff --git a/packages/react/src/utils/own-root.ts b/packages/react/src/utils/own-root.ts
new file mode 100644
index 00000000..8dfbfa5b
--- /dev/null
+++ b/packages/react/src/utils/own-root.ts
@@ -0,0 +1,28 @@
+/**
+ * The root a render renders its template with: this copy's Body, Email, Page or Document, whichever copy of Elements
+ * the template's root is of (a package's ESM and CommonJS builds loaded together, as tsx and a CLI load them, or two
+ * installs in a monorepo). The renderer that was called renders the whole template: its HTML, head, plain text and
+ * design are made in its render's scope (what it collects once, leaves out and says once: see render-scope.ts), as
+ * another copy's Rows, Columns and blocks are recorded by their markers and its blocks made this copy's by their names.
+ * A root is known by its marker, or an older copy's by its name and code (see root-type.ts): a component of the user's
+ * own named like one isn't one, and stays as it is.
+ */
+import type React from "react";
+import Body from "../components/Body";
+import Document from "../components/Document";
+import Email from "../components/Email";
+import Page from "../components/Page";
+import { rootName } from "./root-type";
+
+const ROOTS = new Map<string, unknown>([
+  ["Body", Body],
+  ["Email", Email],
+  ["Page", Page],
+  ["Document", Document],
+]);
+
+/** `root` as this copy's root of its name (the same props), when it's another copy's. */
+export function ownRoot(root: React.ReactElement): React.ReactElement {
+  const own = ROOTS.get(rootName(root.type) ?? "");
+  return own && root.type !== own ? ({ ...root, type: own } as React.ReactElement) : root;
+}
diff --git a/packages/react/src/utils/react-server-react.test.tsx b/packages/react/src/utils/react-server-react.test.tsx
index bf268dbb..86f01ecd 100644
--- a/packages/react/src/utils/react-server-react.test.tsx
+++ b/packages/react/src/utils/react-server-react.test.tsx
@@ -1,7 +1,8 @@
 /**
  * Where React is React Server Components' (Next.js's edge runtime route handlers and Server Components), react-dom
- * can't render at all ("Cannot read properties of undefined (reading 'H')"): Elements says to render in the
- * Node.js runtime. react-dom/server here fails as it does there.
+ * can't render at all ("Cannot read properties of undefined (reading 'H')"). Elements renders templates itself
+ * (src/engine), so an email renders there: react-dom/server here fails as it does there. (A web page's or document's
+ * Divider, Html, Menu and Social exporters still render with react-dom/server.)
  */
 import { describe, it, expect, vi } from "vitest";
 
@@ -13,22 +14,16 @@ vi.mock("react-dom/server", async (original) => {
   return { ...real, renderToStaticMarkup: fail, renderToString: fail };
 });
 
-import React from "react";
-import { Email, Row, Column, Paragraph, renderToHtml, renderToJson, renderToPlainText } from "../index";
+import React, { useId, useMemo } from "react";
+import { Email, Row, Column, Paragraph, Button, renderToHtml, renderToJson, renderToPlainText } from "../index";
 
 describe("React Server Components' React, which react-dom can't render with", () => {
-  it("says to render in the Node.js runtime, with react-dom's error as the cause", () => {
-    const email = <Email><Row><Column><Paragraph>Hello</Paragraph></Column></Row></Email>;
-    for (const render of [renderToJson, renderToHtml, renderToPlainText]) {
-      let thrown: unknown;
-      try {
-        render(email);
-      } catch (error) {
-        thrown = error;
-      }
-      expect(String((thrown as Error)?.message)).toMatch(/react-dom can't render with this React.*render emails in the Node\.js runtime/);
-      expect(String(((thrown as Error).cause as Error)?.message)).toContain("reading 'H'");
-    }
+  it("renders an email, hooks and all, without react-dom", () => {
+    const Greeting = () => <Paragraph>{`Hello ${useMemo(() => "Ada", [])} ${useId()}`}</Paragraph>;
+    const email = <Email><Row><Column><Greeting /><Button href="https://example.com">Go</Button></Column></Row></Email>;
+    expect(renderToHtml(email)).toMatch(/Hello Ada (:R\w+:|«R\w+»|_R_\w+_)/);
+    expect(renderToPlainText(email)).toContain("Hello Ada");
+    expect(renderToJson(email).body.rows).toHaveLength(1);
     expect(React.isValidElement(email)).toBe(true);
   });
 });
diff --git a/packages/react/src/utils/record.tsx b/packages/react/src/utils/record.tsx
index 1b2bbbcf..213742aa 100644
--- a/packages/react/src/utils/record.tsx
+++ b/packages/react/src/utils/record.tsx
@@ -1,109 +1,81 @@
 /**
- * What Rows, Columns and blocks render while a template is collected (see
- * collect.ts): they record their props, and render markers around what React
- * renders inside them.
+ * How a template is collected (see src/model): the walker (src/engine) renders it, and asks this collector about
+ * each element first. Elements' Rows, Columns and blocks (of any copy of Elements: by their markers, or an older
+ * copy's names and code), <Tailwind> scopes and <Head>/<Font> entries are recorded instead of being called, what's
+ * inside them walked inside their records; everything else (the user's components, markup, Fragments, Context)
+ * renders as React renders it.
+ * Each component of the template's own in a list is in a boundary, where it's left out when it fails and the render
+ * leaves failed parts out (`onError: "omit"`).
  */
-import React, { Suspense } from "react";
-import { collecting, COLLECTING_ID, marker, RECORDS, within, type Collection } from "./collect";
-import { isAsyncComponent, isElementsType } from "./unwrap-root";
+import React from "react";
+import { HEAD_ENTRY, RECORDS, type Recorded } from "./collect";
+import { isElementsType } from "./unwrap-root";
+import { rootName } from "./root-type";
+import { TAILWIND, TAILWIND_LOADER } from "./tailwind";
+import { UNLAYER_CONFIG_KEY, UNLAYER_RENDER_KEY } from "./create-component";
+import { boundary, recordNode } from "../engine/records";
+import { htmlOf } from "../engine/output";
+import { checked, checkKeys } from "../engine/keys";
+import type { Collector } from "../engine";
 
-/**
- * Children with each component Elements doesn't know wrapped: markers that
- * say where its output starts and ends, inside a Suspense whose fallback (a
- * marker) stands for it when it throws, suspends or is async, so it's left
- * out and the rest renders. Fragments are kept, their children wrapped too.
- */
-export function guard(children: React.ReactNode, collection: Collection, inContainer = false): React.ReactNode {
-  return React.Children.toArray(children).map((child) => {
-    const placed = guarded(child, collection, inContainer);
-    // The template's own element, placed in this list: a copy, with the key the list gave it. React 19 warns about an
-    // element of a list without keys (`items.map(…)`) wherever it's rendered, on every render, and 0.1.22 never
-    // rendered the template's lists: a static render has nothing to match keys for.
-    return placed === child && React.isValidElement(child) ? React.cloneElement(child) : placed;
-  });
+interface Options {
+  /** Markup is in a boundary too, so markup React rejects is left out rather than failing the render. */
+  omit: boolean;
+  /** In a template with no root: what says a root met in its content (by its name). */
+  nested?: (root: string) => void;
 }
 
-/** One child of `guard`'s list. */
-function guarded(child: React.ReactNode, collection: Collection, inContainer: boolean): React.ReactNode {
-  if (!React.isValidElement(child)) return child;
-  if (isElementsType(child.type)) {
-    if ((child.type as unknown as Record<symbol, unknown>)[RECORDS]) return child;
-    // A component of the user's own named Row or Column (its displayName): rendered as React renders it.
-    if (!olderContainer(child.type)) return bounded(child, collection);
-    return recordedForOlder(child, collection, inContainer);
-  }
-  // No component at all (`undefined` from a broken or circular import): React says so and the render fails, as an
-  // email missing a block shouldn't send. Only what can render gets a boundary that leaves it out.
-  if (!child.type || (typeof child.type === "object" && !("$$typeof" in child.type))) return child;
-  if (typeof child.type === "string") {
-    // Markup with a component of the user's own in it (`<div><Promo /></div>`): that component gets its own too.
-    const inside = (child.props as { children?: React.ReactNode }).children;
-    const element = inside !== undefined && hasComponent(inside) ? React.cloneElement(child, undefined, guard(inside, collection, inContainer)) : child;
-    // Markup React rejects (`<hr style="…">` as a string) throws out of the render: guarded too when it did.
-    return collection.markup ? bounded(element, collection) : element;
-  }
-  if (child.type === React.Fragment) {
-    return React.createElement(React.Fragment, { key: child.key }, guard((child.props as { children?: React.ReactNode }).children, collection, inContainer));
-  }
-  return bounded(child, collection);
+/** Children as a list (arrays flattened, nothing and booleans left out), each list checked for keys. */
+function childList(children: React.ReactNode, owner: string, out: React.ReactNode[] = []): React.ReactNode[] {
+  if (Array.isArray(children)) {
+    checkKeys(children, owner);
+    for (const child of children) childList(child, owner, out);
+  } else if (children !== null && children !== undefined && typeof children !== "boolean") out.push(children);
+  return out;
 }
 
-/** `child` between markers, in a Suspense whose fallback (a marker) stands for it when it throws or suspends. */
-function bounded(child: React.ReactElement, collection: Collection): React.ReactNode {
-  const at = collection.recorded.push({ kind: "boundary", element: child }) - 1;
-  // An async component is left out without calling it: it can't render synchronously, and React 18 leaves
-  // the promise it gives back unhandled (its rejection would end the process).
-  if (isAsyncComponent(child.type)) return marker(collection, at, "f");
-  return React.createElement(
-    Suspense,
-    { key: child.key ?? `b${at}`, fallback: marker(collection, at, "f") },
-    marker(collection, at, "o"),
-    child,
-    marker(collection, at, "c")
-  );
-}
+const displayName = (type: unknown) => (type as { displayName?: string } | null)?.displayName ?? "";
 
 /**
- * A Row, Column or block of an older copy of Elements (0.1.x, from a package still on it), which renders its HTML
- * instead of recording itself: recorded here as this copy's would, so it's in the HTML and the design (rendered by
- * this copy's Row and Column, and by the block's own exporter).
- */
-/**
- * Whether a type named Row or Column is an older copy's (0.1.x marks them only by name): their code reads the
- * config Body passes them (`_config`), which a component of the user's own named after one doesn't. Blocks and
- * roots are marked otherwise (`__unlayerRender`, and roots aren't recorded).
+ * Children with each component of the template's own in a boundary. Fragments are kept, their children in
+ * boundaries too; markup with such a component in it (`<div><Promo /></div>`) gets that component's.
  */
-function olderContainer(type: unknown): boolean {
-  return !/^(Row|Column)$/.test((type as { displayName?: string } | null)?.displayName ?? "") || /\b_config\b/.test(String(type));
+export function guard(children: React.ReactNode, options: Options, owner: string, inContainer = false): React.ReactNode[] {
+  // (Its lists checked for keys as written: the one it gives back isn't checked again.)
+  return checked(childList(children, owner).map((child) => guarded(child, options, owner, inContainer)));
 }
 
-function recordedForOlder(child: React.ReactElement, collection: Collection, inContainer: boolean): React.ReactNode {
-  const type = child.type as unknown as { displayName?: string; __unlayerRender?: unknown };
-  const props = child.props as Record<string, any>;
-  if (type.displayName === "Row" || type.displayName === "Column") {
-    const at = collection.recorded.push({ kind: type.displayName === "Row" ? "row" : "column", props }) - 1;
-    return (
-      <React.Fragment key={child.key ?? `r${at}`}>
-        {marker(collection, at, "o")}
-        {guard(props.children, collection, true)}
-        {marker(collection, at, "c")}
-      </React.Fragment>
-    );
+function guarded(child: React.ReactNode, options: Options, owner: string, inContainer: boolean): React.ReactNode {
+  if (!React.isValidElement(child)) return child;
+  const type = child.type as any;
+  // No component at all (`undefined` from a broken or circular import): the render fails, as an email missing a
+  // block shouldn't send. A <Tailwind> and Elements' own are recorded where the walk reaches them.
+  if (!type || (typeof type === "object" && !("$$typeof" in type)) || type[TAILWIND] || type[HEAD_ENTRY]) return child;
+  if (isElementsType(type)) {
+    // A root (Email, Page, Document) placed in a Row or Column: left out, as 0.1.22 left it out, saying so. Among the
+    // rows (`<Email><Email>…</Email></Email>`) it renders as it renders, as 0.1.22 rendered it.
+    const root = rootName(type);
+    if (root && !type[UNLAYER_RENDER_KEY]) {
+      if (!inContainer) return child;
+      console.warn(`[Unlayer] <${root}> is a root: it can't be placed in a Row or Column, so it's left out.`);
+      return null;
+    }
+    if (kindOf(type)) return child;
   }
-  // A root (Email, Page, Document) placed in a Row or Column: left out, as 0.1.22 left it out, saying so. Among the
-  // rows (`<Email><Email>…</Email></Email>`) it renders as it renders, as 0.1.22 rendered it.
-  if (!type.__unlayerRender && !inContainer) return child;
-  if (!type.__unlayerRender) {
-    console.warn(`[Unlayer] <${type.displayName}> is a root: it can't be placed in a Row or Column, so it's left out.`);
-    return null;
+  if (typeof type === "string") {
+    const inside = (child.props as { children?: React.ReactNode }).children;
+    const element = inside !== undefined && hasComponent(inside) ? React.cloneElement(child, undefined, guard(inside, options, owner, inContainer)) : child;
+    // Markup React rejects (`<hr style="…">` with a string style): left out, where failed parts are.
+    return options.omit ? boundary(null, element) : element;
   }
-  const at = collection.recorded.push({ kind: "block", type: child.type as React.ComponentType<any>, props }) - 1;
-  return React.cloneElement(marker(collection, at), { key: child.key ?? `b${at}` });
+  if (type === React.Fragment) return guard((child.props as { children?: React.ReactNode }).children, options, owner, inContainer);
+  const record: Recorded = { kind: "boundary", element: child };
+  return boundary(record, child);
 }
 
-/** Whether there's a component of the user's own in `children`, in markup or Fragments (not in Elements' own). */
+/** Whether there's a component of the user's own in `children`, in markup or Fragments (not Elements' own). */
 function hasComponent(children: React.ReactNode): boolean {
-  return React.Children.toArray(children).some(
+  return childList(children, "").some(
     (child) =>
       React.isValidElement(child) &&
       (typeof child.type === "string" || child.type === React.Fragment ? hasComponent((child.props as { children?: React.ReactNode }).children) : !isElementsType(child.type))
@@ -111,51 +83,73 @@ function hasComponent(children: React.ReactNode): boolean {
 }
 
 /**
- * What a Row, Column or block renders while a template is collected: in the collecting render (its ids carry
- * COLLECTING_ID), what `record` gives; in any other render started inside it, what it renders anyway (`real`,
- * called with nothing collecting). When it can't tell, it renders what it renders: a marker never leaves the
- * collecting render.
+ * Which of Elements' components a type is, of any copy of Elements: a Row or Column (0.2 and later carry RECORDS; an
+ * older copy's reads the config Body passes it, `_config`, which a component of the user's own named after one
+ * doesn't), or a block (its item config).
  */
-function Sentinel({ record, real }: { record: () => React.ReactNode; real: () => React.ReactNode }): React.ReactNode {
-  // Where ids can't tell (another copy of React: see Collection.blind), it records while collecting: a marker in a
-  // render started inside the collecting one is then rendered in its place (normalize.tsx).
-  let collected = !!collecting()?.blind;
-  if (!collected) {
-    try {
-      collected = React.useId().slice(1).startsWith(COLLECTING_ID);
-    } catch {
-      // Not in a render React runs: what it renders.
-    }
-  }
-  return collected ? record() : within(null, real);
+function kindOf(type: any): "row" | "column" | "block" | undefined {
+  if (type[UNLAYER_CONFIG_KEY] && type[UNLAYER_RENDER_KEY]) return "block";
+  const name = displayName(type);
+  if ((name === "Row" || name === "Column") && (type[RECORDS] || /\b_config\b/.test(String(type)))) return name === "Row" ? "row" : "column";
+  return undefined;
 }
 
-/** Sentinel by the name of the component it stands for, which React's warnings name (`Check the render method of Column`). */
-const named = new Map<string, typeof Sentinel>();
+/** Rich text: a Paragraph's, Heading's or Button's children with elements in them, rendered inside its record. */
+const RICH = /^(Paragraph|Heading|Button)$/;
 
-/** A Row, Column or block, while a template is collected (see Sentinel). */
-export function whileCollecting(record: () => React.ReactNode, real: () => React.ReactNode, name: string): React.ReactElement {
-  let type = named.get(name);
-  if (!type) named.set(name, (type = Object.assign((props: Parameters<typeof Sentinel>[0]) => Sentinel(props), { displayName: name })));
-  return React.createElement(type, { record, real });
-}
+/** A record, with where it is in the template (`Row 3 › Column 1 › Button`), worked out when an error names it. */
+const placed = <T extends object>(record: T, where: () => string): T & { where: () => string } => Object.assign(record, { where });
 
-/** A Row or Column while collecting: its props, and markers around its children. */
-export function recordContainer(kind: "row" | "column", props: Record<string, any>): React.ReactElement {
-  const collection = collecting()!;
-  const at = collection.recorded.push({ kind, props }) - 1;
-  return (
-    <>
-      {marker(collection, at, "o")}
-      {guard(props.children, collection, true)}
-      {marker(collection, at, "c")}
-    </>
-  );
+/** The collector a template's collecting walk asks (see the engine's Collector). */
+export function collector(options: Options): Collector {
+  return (element) => {
+    const type = element.type as any;
+    if (!type || typeof type === "string") return undefined;
+    const props = element.props as Record<string, any>;
+    if (typeof type[TAILWIND] === "function") {
+      // A scope: its rewrite in its props, so each Row, Column and block knows the one it's in.
+      // (With its copy's compiler, which the async renderers compile its config with.)
+      return { record: (position) => container(placed({ kind: "tailwind", props: { ...props, [TAILWIND]: type[TAILWIND] }, load: type[TAILWIND_LOADER] }, position), options, "Tailwind") };
+    }
+    if (typeof type[HEAD_ENTRY] === "function") {
+      const name = displayName(type);
+      return {
+        name,
+        record: (position) => {
+          const record = placed({ ...type[HEAD_ENTRY](props) }, position);
+          // A <Head>'s tags: what's in it, walked here as the template's content is (its components wait, fail and are
+          // left out as theirs do), as HTML.
+          record.tags ??= () => [htmlOf(record.content)];
+          return recordNode(record, guard(record.children, options, name), true);
+        },
+      };
+    }
+    const kind = kindOf(type);
+    if (kind === "row" || kind === "column") {
+      const name = kind === "row" ? "Row" : "Column";
+      return { name, record: (position) => container(placed({ kind, props }, position), options, name) };
+    }
+    if (kind === "block") {
+      const name = type[UNLAYER_CONFIG_KEY]?.name ?? displayName(type);
+      return {
+        name,
+        record: (position) => {
+          const record: Recorded = placed({ kind: "block", type, props }, position);
+          // Text with elements in it (markup, a component of yours, react-intl's <FormattedMessage>): rendered here, with
+          // the template's context, inside its record; their HTML is its text (see src/model).
+          if (!RICH.test(name) || !childList(props.children, name).some(React.isValidElement)) return recordNode(record);
+          return recordNode(Object.assign(record, { rich: true }), guard(props.children, options, name));
+        },
+      };
+    }
+    // A root in a template with no root (unwrapping stopped before it): rendered as it renders, said.
+    const root = options.nested && !type[UNLAYER_RENDER_KEY] && rootName(type);
+    if (root) options.nested!(root);
+    return undefined;
+  };
 }
 
-/** A block while collecting: its props, and a marker in its place. */
-export function recordBlock(type: React.ComponentType<any>, props: Record<string, any>): React.ReactElement {
-  const collection = collecting()!;
-  const at = collection.recorded.push({ kind: "block", type, props }) - 1;
-  return marker(collection, at);
+/** A Row, Column or scope: its props recorded, its children (in boundaries) inside it. */
+function container(record: Recorded & { props: Record<string, any> }, options: Options, name: string): React.ReactNode {
+  return recordNode(record, guard(record.props.children, options, name, true));
 }
diff --git a/packages/react/src/utils/register-tool-edge-cases.test.tsx b/packages/react/src/utils/register-tool-edge-cases.test.tsx
index 493c6078..1abc8857 100644
--- a/packages/react/src/utils/register-tool-edge-cases.test.tsx
+++ b/packages/react/src/utils/register-tool-edge-cases.test.tsx
@@ -262,22 +262,40 @@ describe("edge: head contributions", () => {
 // Failure modes and hostile input
 // ---------------------------------------------------------------------------
 describe("edge: failure modes", () => {
-  it("a throwing exporter drops only its own block — siblings render, error logged", () => {
+  it("a throwing exporter fails the HTML and the text, not the design (which no exporter makes); with onError: \"omit\" only its block is left out, of all three", () => {
     const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
     const consoleWarn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const boom = new Error("boom");
     const Broken = registerElementsTool({
       name: "broken_tool",
       values: {},
-      renderer: { exporters: { email: () => { throw new Error("boom"); } } },
+      renderer: { exporters: { email: () => { throw boom; } } },
     } as any);
-    const html = renderToHtml(inEmail(<Broken />, <HeadToolSafe />));
-    // The broken block is omitted (no error card in sendable output)...
+    const email = inEmail(<Broken />, <HeadToolSafe />);
+    const said = "[Unlayer] broken_tool failed to render: boom (in <broken_tool> at Row 1 › Column 1 › broken_tool)";
+    // By default the render fails, naming the block and where it is (no error card in sendable output)...
+    for (const render of [() => renderToHtml(email), () => renderToPlainText(email)]) {
+      expect(render).toThrow(said);
+    }
+    // ...while renderToJson renders no HTML, so the design has the block: nothing is sent that it disagrees with.
+    expect(JSON.stringify(renderToJson(email))).toContain("broken_tool");
+    try {
+      renderToHtml(email);
+    } catch (error) {
+      expect(error).toMatchObject({ component: "broken_tool", position: "Row 1 › Column 1 › broken_tool", cause: boom });
+    }
+    // ...and left out, of the HTML and the design alike, the siblings and the document intact, said once.
+    consoleError.mockClear();
+    const omit = { onError: "omit" } as const;
+    const html = renderToHtml(email, omit);
     expect(html).not.toContain("broken_tool");
-    // ...siblings and the document survive intact
     expect(html).toContain("safe tool");
     expect(html.trimEnd().endsWith("</html>")).toBe(true);
-    // ...and the failure is loudly logged for the developer
-    expect(consoleError).toHaveBeenCalled();
+    expect(consoleError.mock.calls).toEqual([[said.replace("[Unlayer] ", "[Unlayer] Left out: "), boom]]);
+    const design = renderToJson(email, omit);
+    expect(JSON.stringify(design)).not.toContain("broken_tool");
+    expect(design.body.rows[0].columns[0].contents).toHaveLength(1);
+    expect(renderToHtmlParts(email, omit).omitted.map((e) => e.message)).toEqual([said]);
     consoleError.mockRestore();
     consoleWarn.mockRestore();
   });
@@ -392,7 +410,8 @@ describe("edge: composition", () => {
       },
     } as any);
     const html = renderToHtml(inEmail(<Probe className="x" style={{ color: "red" }} />));
-    expect(html).toContain("keys:</div>");
+    // (Its containerPadding is every block's, as in the design: the editor gives it to a tool's exporter too.)
+    expect(html).toContain("keys:containerPadding</div>");
   });
 
   it("renderToPlainText extracts custom tool text like any content", () => {
diff --git a/packages/react/src/utils/render-errors.test.tsx b/packages/react/src/utils/render-errors.test.tsx
new file mode 100644
index 00000000..36703b09
--- /dev/null
+++ b/packages/react/src/utils/render-errors.test.tsx
@@ -0,0 +1,294 @@
+/**
+ * What the renderers do with a part of a template that fails (`onError`): a component that throws, a Row whose
+ * Columns don't fit its layout, an exporter that fails. They all throw a RenderError by default, the synchronous and
+ * the async ones alike; with `onError: "omit"` (render options, the root's `config`, an <UnlayerProvider>) or a
+ * function, the part is left out of the HTML, the plain text and the design alike, and each part left out is listed.
+ * A Row or Column whose own exporter fails is left out as a block is: the render is the template's without it.
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import React from "react";
+import { ColumnExporters, RowExporters } from "@unlayer/exporters";
+import { Column, ColumnLayouts, Email, Paragraph, RenderError, Row, UnlayerProvider, registerElementsTool, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, type OnError } from "../index";
+import * as asyncRenderers from "../async";
+
+const Broken = () => {
+  throw new Error("no data");
+};
+const Tool = registerElementsTool({ name: "failing_tool", values: {}, renderer: { exporters: { email: () => { throw new Error("exporter down"); } } } } as never) as React.FC;
+
+/** A template with one of each part that fails, between parts that don't. */
+const template = (config?: { onError?: OnError }) => (
+  <Email config={config}>
+    <Row><Column><Paragraph>First</Paragraph><Broken /><Paragraph>Second</Paragraph></Column></Row>
+    <Row layout={ColumnLayouts.TwoEqual}><Column><Paragraph>Lonely</Paragraph></Column></Row>
+    <Row><Column><Tool /><Paragraph>Third</Paragraph></Column></Row>
+  </Email>
+);
+const FAILED = [
+  ["[Unlayer] no data (in <Broken> at Row 1 › Column 1 › Broken)", "Broken", "Row 1 › Column 1 › Broken"],
+  ["[Unlayer] A Row with the TwoEqual layout, for 2 Columns, has 1 (in <Row> at Row 2)", "Row", "Row 2"],
+  ["[Unlayer] failing_tool failed to render: exporter down (in <failing_tool> at Row 3 › Column 1 › failing_tool)", "failing_tool", "Row 3 › Column 1 › failing_tool"],
+];
+const words = (text: string) => text.replace(/<[^>]+>/g, " ").split(/\s+/).filter((w) => /^(First|Second|Third|Lonely)$/.test(w));
+const designWords = (design: unknown) => JSON.stringify(design).match(/First|Second|Third|Lonely/g) ?? [];
+
+afterEach(() => vi.restoreAllMocks());
+
+describe("a part of a template that fails", () => {
+  it("fails every renderer by default, with a RenderError naming it, where it is, and what it threw", async () => {
+    const element = template();
+    const sync = [() => renderToHtml(element), () => renderToPlainText(element), () => renderToJson(element), () => renderToHtmlParts(element)];
+    for (const render of sync) expect(render).toThrow(FAILED[0][0]);
+    for (const render of [asyncRenderers.renderToHtml, asyncRenderers.renderToPlainText, asyncRenderers.renderToJson, asyncRenderers.renderToHtmlParts]) {
+      await expect(render(element)).rejects.toThrow(FAILED[0][0]);
+    }
+    try {
+      renderToHtml(element);
+    } catch (error) {
+      expect(error).toBeInstanceOf(RenderError);
+      expect(error).toMatchObject({ name: "RenderError", component: "Broken", position: "Row 1 › Column 1 › Broken", cause: new Error("no data") });
+    }
+  });
+
+  it.each([
+    ["the render's options", (onError: OnError) => [template(), { onError }] as const],
+    ["the root's config", (onError: OnError) => [template({ onError }), undefined] as const],
+    ["an <UnlayerProvider>", (onError: OnError) => [<UnlayerProvider key="p" config={{ onError }}>{template()}</UnlayerProvider>, undefined] as const],
+  ])("with onError: \"omit\" in %s, is left out of the HTML, the plain text and the design alike, each said once", async (_, given) => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const [element, options] = given("omit");
+    const html = renderToHtml(element, options);
+    expect(error.mock.calls.map((call) => String(call[0]))).toEqual(FAILED.map(([message]) => message.replace("[Unlayer] ", "[Unlayer] Left out: ")));
+    expect(words(html)).toEqual(["First", "Second", "Third"]);
+    expect(words(renderToPlainText(element, options))).toEqual(["First", "Second", "Third"]);
+    const design = renderToJson(element, options);
+    expect(designWords(design)).toEqual(["First", "Second", "Third"]);
+    // The block whose exporter failed is in neither, and the ids still agree.
+    expect(JSON.stringify(design)).not.toContain("failing_tool");
+    expect(html).toContain('id="u_content_paragraph_3"');
+    expect(JSON.stringify(design)).toContain('"htmlID":"u_content_text_3"');
+    const parts = renderToHtmlParts(element, options);
+    expect(parts.omitted.map((e) => [e.message, e.component, e.position])).toEqual(FAILED);
+    const asyncParts = await asyncRenderers.renderToHtmlParts(element, options);
+    expect(asyncParts.omitted.map((e) => e.message)).toEqual(FAILED.map(([message]) => message));
+    expect(asyncParts.body).toBe(parts.body);
+  });
+
+  it("is given to a function instead (no console), which can fail the render by throwing it", () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const given: RenderError[] = [];
+    const html = renderToHtml(template(), { onError: (failure) => void given.push(failure) });
+    expect(words(html)).toEqual(["First", "Second", "Third"]);
+    expect(given.map((e) => e.position)).toEqual(FAILED.map(([, , position]) => position));
+    expect(error).not.toHaveBeenCalled();
+    const strict = (failure: RenderError) => {
+      if (failure.component !== "Broken") throw failure;
+    };
+    expect(() => renderToHtml(template(), { onError: strict })).toThrow(FAILED[1][0]);
+  });
+
+  it("renderToJson renders no HTML by default (an exporter that fails fails the HTML, which then has nothing to disagree with), and only with onError the HTML it needs to leave the same parts out", () => {
+    let calls = 0;
+    const Counted = registerElementsTool({ name: "counted_tool", values: {}, renderer: { exporters: { email: () => (calls++, "<p>counted</p>") } } } as never) as React.FC;
+    const email = <Email><Row><Column><Counted /><Paragraph>Text</Paragraph></Column></Row></Email>;
+    expect(JSON.stringify(renderToJson(email))).toContain("counted_tool");
+    expect(calls).toBe(0);
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(JSON.stringify(renderToJson(email, { onError: "omit" }))).toContain("counted_tool");
+    expect(calls).toBe(1);
+    expect(JSON.stringify(renderToJson(template(), { onError: "omit" }))).not.toContain("failing_tool");
+  });
+
+  it("lists nothing when nothing failed", () => {
+    expect(renderToHtmlParts(<Email><Row><Column><Paragraph>Fine</Paragraph></Column></Row></Email>, { onError: "omit" }).omitted).toEqual([]);
+  });
+});
+
+describe("a custom tool whose head fails", () => {
+  const HeadTool = registerElementsTool({ name: "head_tool", values: {}, renderer: { exporters: { email: () => "<p>tool body</p>" }, head: { css: () => ".kept { color: red }", js: () => { throw new Error("head down"); } } } } as never) as React.FC;
+  const element = <Email><Row><Column><Paragraph>Text</Paragraph><HeadTool /></Column></Row></Email>;
+  const FAILURE = ["[Unlayer] head_tool's head failed: head down (in <head_tool> at Row 1 › Column 1 › head_tool)", "head_tool", "Row 1 › Column 1 › head_tool"];
+
+  it("fails the HTML by default, with a RenderError naming it, where it is and what it threw (the design has no head)", async () => {
+    for (const render of [() => renderToHtml(element), () => renderToHtmlParts(element)]) {
+      expect(render).toThrow(RenderError);
+      expect(render).toThrow(FAILURE[0]);
+    }
+    await expect(asyncRenderers.renderToHtml(element)).rejects.toMatchObject({ component: FAILURE[1], position: FAILURE[2], cause: new Error("head down") });
+    expect(JSON.stringify(renderToJson(element))).toContain("head_tool");
+  });
+
+  it("with onError, leaves what it gives the head out, and lists it: its block renders, as in the design", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    for (const parts of [renderToHtmlParts(element, { onError: "omit" }), await asyncRenderers.renderToHtmlParts(element, { onError: "omit" })]) {
+      expect(parts.body).toContain("tool body");
+      expect(parts.css).not.toContain(".kept");
+      expect(parts.omitted.map((e) => [e.message, e.component, e.position])).toEqual([FAILURE]);
+    }
+    expect(error.mock.calls.map((call) => String(call[0]))).toEqual([FAILURE[0].replace("[Unlayer] ", "[Unlayer] Left out: "), FAILURE[0].replace("[Unlayer] ", "[Unlayer] Left out: ")]);
+    const given: RenderError[] = [];
+    expect(renderToHtml(element, { onError: (failure) => void given.push(failure) })).toContain("tool body");
+    expect(given.map((e) => e.message)).toEqual([FAILURE[0]]);
+    expect(JSON.stringify(renderToJson(element, { onError: "omit" }))).toContain("head_tool");
+  });
+});
+
+describe("a Row or Column whose exporter fails", () => {
+  // The Row's or Column's exporter fails for the one with this background (the editor's exporters, as they are, for the rest).
+  const failing = (exporters: Record<string, (...args: any[]) => string>, color: string, valuesAt: number) => {
+    const email = exporters.email;
+    vi.spyOn(exporters, "email").mockImplementation((...args: any[]) => {
+      if (args[valuesAt]?.backgroundColor === color) throw new Error("exporter down");
+      return email(...args);
+    });
+  };
+  const rows = (failingRow: React.ReactNode, columns: React.ReactNode) => (
+    <Email>
+      <Row><Column><Paragraph>First</Paragraph></Column></Row>
+      {failingRow}
+      {columns}
+    </Email>
+  );
+  const red = <Row backgroundColor="#ff0000"><Column><Paragraph>Second</Paragraph></Column></Row>;
+  const cells = (failingColumn: boolean) => (
+    <Row cells={failingColumn ? [2, 1, 1] : [2, 1]}>
+      <Column><Paragraph>Third</Paragraph></Column>
+      {failingColumn && <Column backgroundColor="#00ff00"><Paragraph>Lonely</Paragraph></Column>}
+      <Column><Paragraph>Fourth</Paragraph></Column>
+    </Row>
+  );
+  const renders = (element: React.ReactElement, options?: { onError?: OnError }) => ({
+    html: renderToHtml(element, options),
+    text: renderToPlainText(element, options),
+    design: renderToJson(element, options),
+  });
+
+  it("fails the render by default, naming it and where it is", async () => {
+    failing(RowExporters as never, "#ff0000", 1);
+    const element = rows(red, null);
+    expect(() => renderToHtml(element)).toThrow("[Unlayer] Row failed to render: exporter down (in <Row> at Row 2)");
+    await expect(asyncRenderers.renderToHtml(element)).rejects.toThrow("(in <Row> at Row 2)");
+    try {
+      renderToPlainText(element);
+    } catch (error) {
+      expect(error).toMatchObject({ name: "RenderError", component: "Row", position: "Row 2", cause: new Error("exporter down") });
+    }
+    // The design calls no exporter.
+    expect(designWords(renderToJson(element))).toEqual(["First", "Second"]);
+    vi.restoreAllMocks();
+    failing(ColumnExporters as never, "#00ff00", 1);
+    expect(() => renderToHtml(rows(null, cells(true)))).toThrow("[Unlayer] Column failed to render: exporter down (in <Column> at Row 2 › Column 2)");
+  });
+
+  it("with onError: \"omit\", is left out of the HTML, the plain text and the design: they're the template's without it", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    failing(RowExporters as never, "#ff0000", 1);
+    failing(ColumnExporters as never, "#00ff00", 1);
+    const element = rows(red, cells(true));
+    // A Column with its cell (the Columns after it move up); the Row's ids go to the next Row, its Column's to the next.
+    expect(renders(element, { onError: "omit" })).toEqual(renders(rows(null, cells(false))));
+    // Each said once a render.
+    error.mockClear();
+    renderToHtml(element, { onError: "omit" });
+    expect(error.mock.calls.map((call) => String(call[0]))).toEqual([
+      "[Unlayer] Left out: Row failed to render: exporter down (in <Row> at Row 2)",
+      "[Unlayer] Left out: Column failed to render: exporter down (in <Column> at Row 3 › Column 2)",
+    ]);
+    const omitted = (parts: { omitted: RenderError[] }) => parts.omitted.map((e) => [e.component, e.position]);
+    expect(omitted(renderToHtmlParts(element, { onError: "omit" }))).toEqual([["Row", "Row 2"], ["Column", "Row 3 › Column 2"]]);
+    expect(omitted(await asyncRenderers.renderToHtmlParts(element, { onError: "omit" }))).toEqual([["Row", "Row 2"], ["Column", "Row 3 › Column 2"]]);
+    const given: RenderError[] = [];
+    expect(renderToHtml(element, { onError: (failure) => void given.push(failure) })).toBe(renders(rows(null, cells(false))).html);
+    expect(given.map((e) => e.position)).toEqual(["Row 2", "Row 3 › Column 2"]);
+  });
+
+  it("gives errors that keep nothing of the render: which Row or Column failed is the render's (its scope's)", async () => {
+    // A module's map from the errors to their records kept a Row's record, and its props, for as long as an error
+    // from `omitted` was kept.
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    failing(RowExporters as never, "#ff0000", 1);
+    failing(ColumnExporters as never, "#00ff00", 1);
+    const { containerOf } = await import("./container-render");
+    for (const parts of [renderToHtmlParts(rows(red, cells(true)), { onError: "omit" }), await asyncRenderers.renderToHtmlParts(rows(red, cells(true)), { onError: "omit" })]) {
+      expect(parts.omitted.map((e) => e.component)).toEqual(["Row", "Column"]);
+      for (const error of parts.omitted) expect(containerOf(error)).toBeUndefined();
+    }
+  });
+
+  it("leaves a Row out with its last Column, and a Row with a layout gives its other Columns their cells", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    failing(ColumnExporters as never, "#00ff00", 1);
+    const alone = <Row><Column backgroundColor="#00ff00"><Paragraph>Lonely</Paragraph></Column></Row>;
+    expect(renders(rows(alone, null), { onError: "omit" })).toEqual(renders(rows(null, null)));
+    const laidOut = (failingColumn: boolean) => (
+      <Row layout={failingColumn ? ColumnLayouts.TwoEqual : undefined}>
+        {failingColumn && <Column backgroundColor="#00ff00"><Paragraph>Lonely</Paragraph></Column>}
+        <Column><Paragraph>Third</Paragraph></Column>
+      </Row>
+    );
+    expect(renders(rows(null, laidOut(true)), { onError: "omit" })).toEqual(renders(rows(null, laidOut(false))));
+  });
+});
+
+describe("a part that suspends in a <Suspense>", () => {
+  // `<Suspense>` handles it, whatever `onError` says: the synchronous renderers render its fallback, as react-dom's
+  // synchronous render does, and the async ones wait for it. Nothing failed, so nothing is left out or said.
+  const later = <T,>(value: T) => new Promise<T>((resolve) => setTimeout(() => resolve(value), 5));
+  /** Its data suspends until it's there (React 18's Suspense: a thrown promise), once per template made. */
+  const thrown = () => {
+    const data: { value?: string; promise?: Promise<void> } = {};
+    return () => {
+      data.promise ??= later("Price").then((value) => void (data.value = value));
+      if (data.value === undefined) throw data.promise;
+      return <Paragraph>{data.value}</Paragraph>;
+    };
+  };
+  const use = (React as unknown as { use?: <T>(promise: PromiseLike<T>) => T }).use;
+  const PRICES: Array<[string, () => React.FC]> = [
+    ["an async component", () => async () => <Paragraph>{await later("Price")}</Paragraph>],
+    ["a component that throws a promise", thrown],
+    ...(use ? [["a component that `use()`s a promise (React 19)", () => {
+      const promise = later("Price");
+      return () => <Paragraph>{use(promise)}</Paragraph>;
+    }] as [string, () => React.FC]] : []),
+  ];
+  const template = (Price: React.FC, config?: { onError?: OnError }) => (
+    <Email config={config}>
+      <Row><Column><Paragraph>First</Paragraph></Column></Row>
+      <React.Suspense fallback={<Row><Column><Paragraph>Loading</Paragraph></Column></Row>}>
+        <Row><Column><Price /></Column></Row>
+      </React.Suspense>
+    </Email>
+  );
+  const shown = (text: string) => text.match(/First|Loading|Price/g) ?? [];
+  const given: RenderError[] = [];
+  const POLICIES: Array<[string, { onError?: OnError } | undefined]> = [
+    ["by default", undefined],
+    ['with onError: "omit"', { onError: "omit" }],
+    ["with an onError function", { onError: (failure) => void given.push(failure) }],
+  ];
+
+  describe.each(PRICES)("%s", (_, price) => {
+    it.each(POLICIES)("renders the fallback in the synchronous renderers %s", (_, config) => {
+      const error = vi.spyOn(console, "error");
+      given.length = 0;
+      expect(shown(renderToHtml(template(price(), config)))).toEqual(["First", "Loading"]);
+      expect(shown(renderToPlainText(template(price(), config)))).toEqual(["First", "Loading"]);
+      expect(shown(JSON.stringify(renderToJson(template(price(), config))))).toEqual(["First", "Loading"]);
+      expect(renderToHtmlParts(template(price(), config)).omitted).toEqual([]);
+      expect(error).not.toHaveBeenCalled();
+      expect(given).toEqual([]);
+    });
+
+    it.each(POLICIES)("waits for it in the async renderers %s", async (_, config) => {
+      const error = vi.spyOn(console, "error");
+      given.length = 0;
+      expect(shown(await asyncRenderers.renderToHtml(template(price(), config)))).toEqual(["First", "Price"]);
+      expect(shown(await asyncRenderers.renderToPlainText(template(price(), config)))).toEqual(["First", "Price"]);
+      expect(shown(JSON.stringify(await asyncRenderers.renderToJson(template(price(), config))))).toEqual(["First", "Price"]);
+      expect((await asyncRenderers.renderToHtmlParts(template(price(), config))).omitted).toEqual([]);
+      expect(error).not.toHaveBeenCalled();
+      expect(given).toEqual([]);
+    });
+  });
+});
diff --git a/packages/react/src/utils/render-scope.ts b/packages/react/src/utils/render-scope.ts
index d3fce1bf..f76ef297 100644
--- a/packages/react/src/utils/render-scope.ts
+++ b/packages/react/src/utils/render-scope.ts
@@ -1,56 +1,235 @@
 /**
- * One render's scope (renderToHtml, renderToJson, …): what it works out once,
- * like a template's collected render, is reused for the rest of it and never
- * by the next render (an element kept between renders may read other data).
+ * One render's scope (renderToHtml, renderToJson, …): what it works out once, like a template's collected content,
+ * is reused for the rest of it and never by the next render (an element kept between renders may read other data);
+ * what the render does with parts that fail (`onError`), and the parts it left out.
+ *
+ * Each render function makes a scope of its own, whatever's rendering around it, and the user's code (a component, a
+ * template wrapper, a custom tool's exporter or head, `onError`) runs outside it (`guest`): a render it starts is a
+ * render of its own. The scope is the module's while a render runs synchronously: never kept across an `await`
+ * (async code passes it on itself, as collectAsync does), so renders at once never see each other's.
  */
-import { escapeKeepingTags } from "@unlayer-internal/shared-elements";
-import { within } from "./collect";
-import { withBuild } from "./server-renderer";
+import type React from "react";
+import { escapeKeepingTags, type OnError, type RenderError } from "@unlayer-internal/shared-elements";
+import { omits, reportOmitted } from "../engine/errors";
+import { sharing, type Shared } from "../engine";
+import { boundary } from "../engine/records";
+import type { Unwrapped } from "./unwrap-root";
 
-let scoped: WeakMap<object, unknown> | undefined;
+export interface Scope {
+  cache: WeakMap<object, unknown>;
+  /** What the HTML worked out for a record (a block's values), which the head reuses (see `remember`). */
+  values: WeakMap<object, unknown>;
+  onError?: OnError;
+  idPrefix?: string;
+  /** The parts left out, each said once (see reportOmitted). */
+  omitted: RenderError[];
+  /** Rows and blocks whose exporters failed, by their records: left out of the head and the design too. */
+  failed: WeakSet<object>;
+  /** Whether its root reads right to left (see setRenderConfig): Tailwind's logical sides follow it. */
+  rtl?: boolean;
+  /** What its template unwrapped to: its root, the providers' config, where its content starts (see unwrap-root.ts). */
+  unwrapped?: Unwrapped;
+  /** What an async render compiled for its <Tailwind config>s (the async entry's lookup: see utils/tailwind.ts). */
+  tailwind?: unknown;
+  /** Whether its plain text lists links after the text (`links: "after"`): see textRegion. */
+  textRegions?: boolean;
+  /**
+   * Where an async render renders again in it (after Tailwind compiles again: see async/index.ts), the parts it had
+   * left out before: one left out again isn't listed or said again.
+   */
+  listed?: number;
+}
+
+export const newScope = (): Scope => ({ cache: new WeakMap(), values: new WeakMap(), omitted: [], failed: new WeakSet() });
+
+let scoped: Scope | undefined;
 
 /** `make()`'s result for `key`, worked out once per render (each time outside one). */
 export function scopeCache<T>(key: object, make: () => T): T {
   if (!scoped) return make();
-  if (!scoped.has(key)) scoped.set(key, make());
-  return scoped.get(key) as T;
+  if (!scoped.cache.has(key)) scoped.cache.set(key, make());
+  return scoped.cache.get(key) as T;
+}
+
+/**
+ * What a Row, Column or block's HTML worked out for its record (its values, mapped from its props), for the head to
+ * reuse in the same render instead of working it out again (outside a render, nothing is kept).
+ */
+export function remember(record: object | undefined, value: unknown): void {
+  if (record && scoped) scoped.values.set(record, value);
+}
+
+export const recall = <T>(record: object | undefined): T | undefined => (record && scoped ? (scoped.values.get(record) as T | undefined) : undefined);
+
+const SAID = {};
+/**
+ * How this render says a warning once (each time outside one): one said with a `key` is said once for all with it.
+ * Got in the render's scope, it says them in that render's from where its scope isn't (the walk: see `guest`).
+ */
+export function sayer(): (message: string, key?: string) => void {
+  const said = scopeCache(SAID, () => new Set<string>());
+  return (message, key = message) => void (said.has(key) || console.warn(said.add(key) && message));
+}
+
+/** A warning, said once per render (each time outside one): see sayer. */
+export const sayOnce = (message: string, key?: string): void => sayer()(message, key);
+
+/**
+ * The render's `onError`, `idPrefix` and direction, where its root's config says them (the render functions, or Body
+ * rendered on its own): the first config given in a render wins.
+ */
+export function setRenderConfig(config: { onError?: OnError; idPrefix?: unknown; textDirection?: unknown }): void {
+  if (!scoped) return;
+  if (config.onError !== undefined) scoped.onError ??= config.onError;
+  if (typeof config.idPrefix === "string") scoped.idPrefix ??= config.idPrefix;
+  // (As Body reads it for the body's `dir`: see textDirectionOf.)
+  const dir = config.textDirection;
+  scoped.rtl ??= typeof dir == "string" && dir.trim().toLowerCase() == "rtl";
+}
+
+/** Marks the render's display conditions and repeated tables for its plain text's links (see textRegion). */
+export function markTextRegions(): void {
+  if (scoped) scoped.textRegions = true;
+}
+
+/**
+ * HTML a display condition or a table's repeat rule is around, marked (\u000e…\u000f) where the render's plain text
+ * lists links after the text: links in it are written where they are (see htmlToPlainText), where listed after it
+ * they'd be in every recipient's text, or once for all of a loop's items. As it is otherwise.
+ */
+export const textRegion = (html: string): string => (scoped?.textRegions ? `\u000e${html}\u000f` : html);
+
+export const onError = (): OnError | undefined => scoped?.onError;
+/** Whether the render's root reads right to left (its config's `textDirection`, as its body's `dir`). */
+export const rightToLeft = (): boolean => !!scoped?.rtl;
+/** What the template's `useId()`s start with in this render (see UnlayerConfig's `idPrefix`). */
+export const idPrefix = (): string | undefined => scoped?.idPrefix;
+
+/**
+ * A part that failed: thrown, or (`onError: "omit"`) left out, listed and said once; `record`, the row's or block's
+ * whose exporter failed, so the head and the design leave it out too.
+ */
+export function failed(error: RenderError, record?: object): void {
+  if (!omits(scoped?.onError)) throw error;
+  if (record) scoped!.failed.add(record);
+  omitted(error);
+}
+
+/** A part the render left out (what a collecting walk left out, a Row that doesn't fit): listed and said. */
+export function omitted(error: RenderError): void {
+  const policy = scoped?.onError;
+  // (Its message says the part: its component and where it is.)
+  if (scoped?.listed && scoped.omitted.slice(0, scoped.listed).some((e) => e.message === error.message)) return;
+  scoped?.omitted.push(error);
+  // (A function's the user's: see `guest`.)
+  guest(() => reportOmitted(policy, error));
+}
+
+/** Whether a row's or block's exporter failed in this render (see `failed`). */
+export const failedBefore = (record: object | undefined): boolean => !!record && !!scoped?.failed.has(record);
+
+/** The parts this render left out. */
+export const omissions = (): RenderError[] => scoped?.omitted ?? [];
+
+/** What this render compiled for its <Tailwind config>s, where it's an async render's (see utils/tailwind.ts). */
+export const compiledTailwind = (): unknown => scoped?.tailwind;
+
+/** What this render's template unwrapped to (see unwrap-root.ts). */
+export const unwrapped = (): Unwrapped | undefined => scoped?.unwrapped;
+
+/** `found`, what this render's template unwraps to, kept for the rest of the render (its scope's). */
+export function keepUnwrapped(found: Unwrapped): Unwrapped {
+  if (scoped) scoped.unwrapped = found;
+  return found;
+}
+
+/**
+ * Runs `run` in `scope` (a render function's own; an async renderer collects a template in it first, then renders in
+ * it), with what its components share (see sharedByRender) for all of it: the user's code it runs (a Consumer's render
+ * prop, a custom tool's exporter, outside its scope: see `guest`) shares it too, and a render that code starts has its own.
+ */
+export function withScope<T>(scope: Scope | undefined, run: () => T): T {
+  const outer = scoped;
+  scoped = scope;
+  try {
+    return scope ? sharing(sharedOf(scope), run) : run();
+  } finally {
+    scoped = outer;
+  }
+}
+
+/** Runs a render function's render in a scope of its own, whatever's rendering around it; said what's left once it's done. */
+export function withOwnScope<T>(render: () => T): T {
+  const scope = newScope();
+  try {
+    return withScope(scope, render);
+  } finally {
+    renderDone(scope);
+  }
+}
+
+const SHARED = {};
+
+/**
+ * What the components of this render share, whatever part of the template they're in: the work left to its Markdown
+ * and code blocks, together (see the code entry's work.ts), so a template of many blocks takes what one block of their
+ * size would. The render's own (each render function's; an async render's walk and the synchronous render after it
+ * alike), given to each component and template wrapper it calls, while it calls it (see the engine's `sharing`): they
+ * run outside its scope.
+ */
+export const sharedByRender = (): Shared => (scoped ? sharedOf(scoped) : {});
+
+/** `scope`'s (see sharedByRender), with how the copy of Elements that renders makes a part of its own (see `part`). */
+function sharedOf(scope: Scope): Shared {
+  let shared = scope.cache.get(SHARED) as Shared | undefined;
+  if (!shared) scope.cache.set(SHARED, (shared = { [PART]: part }));
+  return shared;
 }
 
 /**
- * Runs one render with its own scope (a render inside another shares it), apart from a template being
- * collected: called inside a component of one (a block rendered to a string), it renders what it's given.
+ * `child` as a part of the template that's left out alone when it fails (`onError: "omit"`), as each component in a
+ * Column is: what a component renders isn't (it fails with the component), but for this (Markdown's table that's too
+ * large). A node of the walker's own: the render's (under PART, in what it shares) is the one its walker reads, where
+ * the Markdown entry is another copy's (a package's CommonJS build, rendered by its ESM one).
  */
-export function withRenderScope<T>(render: () => T, own = false): T {
-  // Called in a render (a component of the user's own calling renderToJson in its useMemo, while Elements or the app
-  // renders it), it renders with a server build that isn't rendering (see server-renderer.ts).
-  const scope = () => {
-    if (scoped) return render();
-    scoped = new WeakMap();
-    try {
-      return render();
-    } finally {
-      scoped = undefined;
-    }
-  };
-  // The build is chosen first: whether a template is being collected tells who calls it.
-  // `own`: from Elements' own component, which calls no hooks after (see withBuild).
-  return withBuild(() => within(null, scope), own);
+export const part = (child: React.ReactElement): React.ReactElement => boundary({ kind: "boundary", element: child }, child);
+const PART = Symbol.for("@unlayer/react-elements/part");
+
+/** What a render's components leave to say once it's done, by what it is (said once, with what the whole render did). */
+const DONE = Symbol.for("@unlayer/react-elements/when-done");
+
+/** Says what a render's components left to say once it's done (see DONE): the render functions', as each ends. */
+export function renderDone(scope: Scope): void {
+  const shared = scope.cache.get(SHARED) as Shared | undefined;
+  const done = shared?.[DONE] as Map<string, () => void> | undefined;
+  if (!done) return;
+  delete shared![DONE];
+  for (const say of done.values()) say();
+}
+
+/**
+ * Runs code of the user's own (a component, a template wrapper, a custom tool's exporter or head, an `onError`
+ * function, a Tailwind plugin) outside the render's scope: a render it starts is a render of its own, and Body that
+ * React renders there makes its own.
+ */
+export const guest = <T>(run: () => T): T => withScope(undefined, run);
+
+/**
+ * Body's content rendered in the scope of the render that reached it (the render functions'), or one of its own where
+ * React renders Body (an app's live preview).
+ */
+export function withRenderScope<T>(render: () => T): T {
+  return scoped ? render() : withOwnScope(render);
 }
 
 /**
  * Text placed straight in a Row or Column, as HTML: escaped, as React shows
  * text (raw HTML goes in an Html block). The editor has no place for it, so
- * the warning says where it belongs.
+ * the warning says where it belongs: once in a render for each container.
  */
-const warnedLoose = new Set<string>();
-
 export function looseText(child: string | number, container: string): string {
   const text = String(child);
-  // Said once per container, not on every render.
-  if (text.trim() && !warnedLoose.has(container)) {
-    warnedLoose.add(container);
-    console.warn(`${container}: text placed straight in a ${container} shows as text and isn't kept in the editor's design. Put it in a <Paragraph>, or HTML in an <Html> block.`);
-  }
+  if (text.trim()) sayOnce(`[Unlayer] ${container}: text placed straight in a ${container} shows as text and isn't kept in the editor's design. Put it in a <Paragraph>, or HTML in an <Html> block.`);
   // An email service's `<%name%>` tag stays as written, as in other text.
   return escapeKeepingTags(text, true);
 }
diff --git a/packages/react/src/utils/render-to-html.test.tsx b/packages/react/src/utils/render-to-html.test.tsx
index bb2f4470..e2ac212d 100644
--- a/packages/react/src/utils/render-to-html.test.tsx
+++ b/packages/react/src/utils/render-to-html.test.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import React from "react";
-import { renderToHtml } from "./render-to-html";
+import { renderToHtml, renderToHtmlParts } from "./render-to-html";
 import { renderToJson } from "./render-to-json";
 import Body from "../components/Body";
 import Row from "../components/Row";
@@ -13,6 +13,7 @@ import Email from "../components/Email";
 import Page from "../components/Page";
 import Document from "../components/Document";
 import { ColumnLayouts } from "../layouts/ColumnLayouts";
+import { RenderError } from "@unlayer-internal/shared-elements";
 
 describe("renderToHtml", () => {
   it("generates unique element ids across the whole tree (no duplicates)", () => {
@@ -73,18 +74,32 @@ describe("renderToHtml", () => {
     expect(html).toContain("No config");
   });
 
-  it("throws with helpful message on render failure", () => {
+  it("throws a RenderError naming the component that failed", () => {
     // A component that throws during render
     const Broken = () => { throw new Error("boom"); };
-    expect(() => renderToHtml(<Broken />)).toThrow("[Unlayer] renderToHtml failed: boom");
+    expect(() => renderToHtml(<Broken />)).toThrow("[Unlayer] boom (in <Broken>)");
+    expect(() => renderToHtml(<Broken />)).toThrow(RenderError);
   });
 
-  it("includes tip in error message", () => {
-    const Broken = () => { throw new Error("test"); };
+  it("keeps the original error as the cause, so its stack points at the line that threw", () => {
+    const original = new Error("boom");
+    const Broken = () => { throw original; };
     try {
       renderToHtml(<Broken />);
+      expect.unreachable();
+    } catch (e: any) {
+      expect(e.cause).toBe(original);
+    }
+  });
+
+  it("says where a component in the template is", () => {
+    const Broken = () => { throw new Error("test"); };
+    const Card = () => <Broken />;
+    try {
+      renderToHtml(<Email><Row><Column><Paragraph>Hi</Paragraph></Column><Column><Card /></Column></Row></Email>);
+      expect.unreachable();
     } catch (e: any) {
-      expect(e.message).toContain("Body > Row > Column > Item");
+      expect(e).toMatchObject({ message: "[Unlayer] test (in <Broken> at Row 1 › Column 2 › Card › Broken)", component: "Broken", position: "Row 1 › Column 2 › Card › Broken" });
     }
   });
 
@@ -185,13 +200,19 @@ describe("renderToHtml: full document shell", () => {
     expect(html).toContain('<html dir="rtl" xmlns=');
   });
 
-  it("every <p> in the document carries the inline margin reset", () => {
-    const html = renderToHtml(emailTree);
-    const pTags = html.match(/<p[^>]*>/g) ?? [];
-    expect(pTags.length).toBeGreaterThan(0);
-    for (const tag of pTags) {
-      expect(tag).toContain("margin: 0px; margin-block-start: 0px; margin-block-end: 0px;");
-    }
+  it("has the editor's base stylesheet first in its head's <style>, in each mode", () => {
+    const tree = (Root: typeof Email) => <Root><Row><Column><Paragraph>Hi</Paragraph></Column></Row></Root>;
+    const style = (html: string) => /<style type="text\/css">\n([\s\S]*?)\n<\/style>/.exec(html)?.[1] ?? "";
+    expect(style(renderToHtml(tree(Email)))).toMatch(/^sub,sup\{line-height:0\}\n\nbody\{margin:0;padding:0\}table,td,tr\{border-collapse:collapse;vertical-align:top\}p\{margin:0\}\.ie-container table,\.mso-container table\{table-layout:fixed\}\*\{line-height:inherit\}a\[x-apple-data-detectors=true\]\{color:inherit!important;text-decoration:none!important\}\n@media/);
+    const web = style(renderToHtml(tree(Page)));
+    expect(web).toMatch(/^body,html\{margin:0;padding:0\}html\{box-sizing:border-box\}\*,:after,:before\{box-sizing:inherit\}html\{font-size:14px;/);
+    expect(web).toContain("p{margin:0}.container{");
+    expect(web).toContain("sub,sup{line-height:0}\n\na[onclick]{cursor:pointer}\n@media");
+    // (Not the editor's form styles: Elements has no form block.)
+    expect(web).not.toContain("form ");
+    expect(style(renderToHtml(tree(Document)))).toMatch(/^body,html\{margin:0;padding:0\}html\{box-sizing:border-box\}\*,:after,:before\{box-sizing:inherit\}html\{font-size:14px\}p\{margin:0\}sub,sup\{line-height:0\}\n\na\[onclick\]\{cursor:pointer\}\n/);
+    // Not in the parts: an app's own page has its own.
+    expect(renderToHtmlParts(tree(Email)).css).not.toContain("x-apple-data-detectors");
   });
 
   it("document mode returns a print-ready XHTML document", async () => {
@@ -225,9 +246,9 @@ describe("renderToHtml: full document shell", () => {
 
   it("keeps a bare item root's own wrapper div (only Unlayer wrappers get stripped)", () => {
     const html = renderToHtml(<Button className="cta-wrapper">Click</Button>);
-    // The Button's host <div class="cta-wrapper"> is the element's own
-    // markup, not a Body wrapper — it must survive into the document.
-    expect(html).toContain('class="cta-wrapper"');
+    // The Button's host <div> is the element's own markup, not a Body wrapper — it must survive into the document
+    // (its className is on its link, as in a Column).
+    expect(html).toMatch(/<body>\s*<div>\s*<div class="v-text-align"[^>]*>\s*<a [^>]*class="cta-wrapper /);
   });
 
   it("strips the Body renderer's wrapper even when the root has className/style", () => {
@@ -311,6 +332,20 @@ describe("document direction and language", () => {
     expect(html).toContain('dir="ltr" lang="en&quot; data-injected=&quot;yes"');
   });
 
+  it.each([Email, Page, Document])("puts a right-to-left direction and its language on the body and its wrapper too", (Root) => {
+    const html = renderToHtml(<Root textDirection="rtl" lang="ar"><Row><Column><Paragraph>مرحبا</Paragraph></Column></Row></Root>);
+    expect(html).toMatch(/<body[^>]* dir="rtl" lang="ar"[^>]*>/);
+    expect(html).toMatch(/<[a-z]+ [^>]*u_body[^>]* dir="rtl" lang="ar"/);
+  });
+
+  it.each([Email, Page, Document])("leaves the body as it was otherwise (left to right, or no direction)", (Root) => {
+    for (const props of [{ lang: "en" }, { textDirection: "ltr", lang: "en" }, {}] as const) {
+      const html = renderToHtml(<Root {...props}><Row><Column><Paragraph>Hi</Paragraph></Column></Row></Root>);
+      expect(html.match(/<body[^>]*>/)![0]).not.toMatch(/ dir=| lang=/);
+      expect(html.match(/<[a-z]+ [^>]*u_body[^>]*>/)![0]).not.toMatch(/ dir=| lang=/);
+    }
+  });
+
   it("reads direction from design body values", () => {
     const html = renderToHtml(<Email values={{ textDirection: "rtl" } as any}><Row><Column /></Row></Email>);
     expect(html).toMatch(/<html[^>]*dir="rtl"/);
@@ -371,7 +406,7 @@ describe("renderToHtml with a template component", () => {
     expect(warnings.join()).toContain("couldn't unwrap");
   });
 
-  it("unwraps StrictMode and Profiler, keeping the root's settings; says why a class template isn't unwrapped", () => {
+  it("unwraps StrictMode, Profiler and Suspense, and a class template, keeping the root's settings", () => {
     const warnings: string[] = [];
     const warn = console.warn;
     console.warn = (message: string) => void warnings.push(message);
@@ -381,13 +416,16 @@ describe("renderToHtml with a template component", () => {
     try {
       expect(renderToHtml(<React.StrictMode><Welcome name="Ada" /></React.StrictMode>)).toBe(direct);
       expect(renderToHtml(<React.Profiler id="email" onRender={() => {}}><Welcome name="Ada" /></React.Profiler>)).toBe(direct);
+      // (Its fallback isn't a root: what's in it is the document, see the async renderers' tests.)
+      expect(renderToHtml(<React.Suspense fallback={<p>Loading</p>}><Welcome name="Ada" /></React.Suspense>)).toBe(direct);
+      expect(renderToHtml(React.createElement(Symbol.for("react.suspense_list") as unknown as React.ElementType, null, <Welcome name="Ada" />))).toBe(direct);
       expect(warnings).toEqual([]);
-      // A class renders through React, as in 0.1.22, and the message says why its root's settings aren't read.
-      expect(renderToHtml(<Template name="Ada" />)).toContain("Hello Ada");
+      // A class is constructed and rendered to find its root, as a function is called.
+      expect(renderToHtml(<Template name="Ada" />)).toBe(direct);
     } finally {
       console.warn = warn;
     }
-    expect(warnings.join()).toContain("couldn't unwrap <Template> (<Template> is a class component");
+    expect(warnings).toEqual([]);
   });
 
   it("says nothing when the template has no root whose settings go unread (Rows, nothing, a list), as 0.1.22", () => {
@@ -418,9 +456,27 @@ describe("renderToHtml with a template component", () => {
     expect(JSON.stringify(renderToJson(<Layout name="Ada" />))).toContain("Hello Ada");
   });
 
+  it.each([
+    ["Email", Email],
+    ["Body", Body],
+    ["Page", Page],
+    ["Document", Document],
+  ] as const)("calls a component of the user's own named like a root (`displayName = \"%s\"`), in the HTML and the design alike", (name, Root) => {
+    // A design-system wrapper of the root, named after it: it renders as written, the props it sets included.
+    const Branded = (props: React.ComponentProps<typeof Body>) => <Root backgroundColor="#f4f4f4" contentWidth="560px" {...props} />;
+    Branded.displayName = name;
+    const content = <Row><Column><Paragraph>Hello</Paragraph></Column></Row>;
+    const written = <Root backgroundColor="#f4f4f4" contentWidth="560px" textColor="#333333">{content}</Root>;
+    const html = renderToHtml(<Branded textColor="#333333">{content}</Branded>);
+    expect(html).toBe(renderToHtml(written));
+    expect(html).toContain("#f4f4f4");
+    expect(renderToJson(<Branded textColor="#333333">{content}</Branded>)).toEqual(renderToJson(written));
+    expect(renderToJson(<Branded>{content}</Branded>).body.values).toMatchObject({ backgroundColor: "#f4f4f4", contentWidth: "560px" });
+  });
+
   it("says an async template isn't supported", () => {
     const Async = (async () => root({ name: "Ada" })) as unknown as React.ComponentType;
-    expect(() => renderToHtml(<Async />)).toThrow("async and suspending templates aren't supported");
+    expect(() => renderToHtml(<Async />)).toThrow('async and suspending templates need "@unlayer/react-elements/async"\'s renderers');
   });
 
   it("leaves Elements components and plain HTML as they are", () => {
@@ -518,7 +574,7 @@ describe("renderToHtml inside a React render", () => {
     const out = renderToString(<App />);
     expect(out).toContain("Hello Ada");
     expect(out).toContain("dir=&quot;rtl&quot;");
-    expect(out).toMatch(/data-id=":R[^"]*:"/);
+    expect(out).toMatch(/data-id="(:R[^"]*:|«R[^"]*»|_R_[^"]*_)"/);
   });
 
   it("keeps the root's settings for a template that uses hooks, outside a render too", () => {
@@ -527,3 +583,41 @@ describe("renderToHtml inside a React render", () => {
     expect(html).toContain('dir="rtl"');
   });
 });
+
+describe("idPrefix", () => {
+  // The useId()s of a template wrapper (the preview text) and of a component in it (a Paragraph's text).
+  const Named = () => <Paragraph html={`content ${React.useId()}`} />;
+  const Template = ({ config }: { config?: { idPrefix?: string } }) => (
+    <Email config={config} previewText={`wrapper ${React.useId()}`}>
+      <Row>
+        <Column>
+          <Named />
+        </Column>
+      </Row>
+    </Email>
+  );
+  /** The ids in HTML (any React's format), and what's before each: `wrapper ` or `content `. */
+  const ids = (html: string) => [...html.matchAll(/(wrapper|content) ([:«_][^\s<"]*?R[^\s<"]*?[:»_])(?=[\s<"])/g)].map((m) => `${m[1]} ${m[2]}`);
+  const prefixed = (prefix: string, list: string[]) => list.map((id) => id.replace(/([:«_])R/, `$1${prefix}R`));
+
+  it("starts the template's useId()s with it, as React's identifierPrefix, in the HTML and the design", async () => {
+    const plain = ids(renderToHtml(<Template />));
+    expect(plain.map((id) => id.split(" ")[0])).toEqual(["wrapper", "content"]);
+    expect(ids(renderToHtml(<Template />, { idPrefix: "em-" }))).toEqual(prefixed("em-", plain));
+    const design = ids(JSON.stringify(renderToJson(<Template />)));
+    expect(design.map((id) => id.split(" ")[0]).sort()).toEqual(["content", "wrapper"]);
+    expect(ids(JSON.stringify(renderToJson(<Template />, { idPrefix: "em-" })))).toEqual(prefixed("em-", design));
+    const { renderToHtml: renderAsync } = await import("../async");
+    expect(ids(await renderAsync(<Template />, { idPrefix: "em-" }))).toEqual(prefixed("em-", plain));
+  });
+
+  it("is the root's config's for its content, and an <UnlayerProvider>'s for the template inside it too", async () => {
+    const { UnlayerProvider } = await import("../context");
+    const plain = ids(renderToHtml(<Template />));
+    // (The wrapper is called before the root's config is read.)
+    expect(ids(renderToHtml(<Template config={{ idPrefix: "root-" }} />))).toEqual([plain[0], ...prefixed("root-", plain.slice(1))]);
+    expect(ids(renderToHtml(<UnlayerProvider config={{ idPrefix: "p-" }}><Template /></UnlayerProvider>))).toEqual(prefixed("p-", plain));
+    // The render's option wins.
+    expect(ids(renderToHtml(<UnlayerProvider config={{ idPrefix: "p-" }}><Template config={{ idPrefix: "root-" }} /></UnlayerProvider>, { idPrefix: "em-" }))).toEqual(prefixed("em-", plain));
+  });
+});
diff --git a/packages/react/src/utils/render-to-html.tsx b/packages/react/src/utils/render-to-html.tsx
index f1cfe350..215e371f 100644
--- a/packages/react/src/utils/render-to-html.tsx
+++ b/packages/react/src/utils/render-to-html.tsx
@@ -1,14 +1,16 @@
 import React from "react";
-import { renderToStaticMarkup } from "./server-renderer";
-import type { UnlayerConfig } from "@unlayer-internal/shared-elements";
-import { DEFAULT_CONFIG } from "@unlayer-internal/shared-elements";
-import { htmlToPlainText } from "@unlayer-internal/shared-elements";
-import type { RenderMode } from "@unlayer-internal/shared-elements";
+import type { PlainTextOptions, RenderMode, UnlayerConfig } from "@unlayer-internal/shared-elements";
+import { htmlToPlainText, RenderError } from "@unlayer-internal/shared-elements";
+import { renderOwn } from "../engine";
+import { OWN_MARKUP, rootlessHtml, rootlessRoot } from "./root-content";
 import { extractHeadFromTree } from "./extract-head";
-import { htmlRoot } from "./unwrap-root";
-import { normalizedRoot } from "./normalize";
-import { withRenderScope } from "./render-scope";
-import { textDirectionOf } from "./create-component";
+import { htmlRoot, providedConfig } from "./unwrap-root";
+import { isRoot } from "./root-type";
+import { ownRoot } from "./own-root";
+import { rootConfig, rootMode, type RootConfigProps } from "../context/layer-config";
+import { normalizedRoot } from "../model";
+import { markTextRegions, omissions, setRenderConfig, withOwnScope } from "./render-scope";
+import { isTailwindError } from "./tailwind";
 import {
   emailLayout,
   webLayout,
@@ -16,66 +18,61 @@ import {
   type DocumentLayoutArgs,
 } from "./document-layouts";
 
-// Email/Page/Document lock their render mode internally (they render
-// <Body mode="...">), so the top-level element's own props never carry it.
-// Map wrapper displayName → mode so head extraction and the document layout
-// always match what the body actually rendered as.
-const MODE_BY_WRAPPER: Record<string, RenderMode> = {
-  Email: "email",
-  Page: "web",
-  Document: "document",
-};
-
-/** A template's direction follows its root props; explicit renderer options still win. */
+/**
+ * The root's config (see rootConfig), key by key: the render function's options over the root's `config` prop, over
+ * its `textDirection`, over the <UnlayerProvider>s found around it, over the defaults.
+ */
 function resolveConfig(element: React.ReactElement, config?: Partial<UnlayerConfig>): UnlayerConfig {
-  const props = element.props as { textDirection?: string; values?: { textDirection?: string } };
-  const textDirection = textDirectionOf(props.textDirection ?? props.values?.textDirection);
-  return { ...DEFAULT_CONFIG, ...(textDirection !== undefined ? { textDirection } : {}), ...config };
+  return rootConfig(element.props as RootConfigProps, providedConfig(element), config);
 }
 
 /**
- * Resolve the display mode for a tree: wrapper component type first
- * (Email/Page/Document), then an explicit `mode` prop (Body), then config.
+ * The root the head and the plain text are read from: the root, or for a template with no root (what it rendered, an
+ * Elements component, markup), one holding it, whose content is the one the HTML rendered (collected once).
  */
-function resolveDisplayMode(
-  element: React.ReactElement,
-  mergedConfig: Partial<UnlayerConfig>
-): RenderMode {
-  const displayName = (element.type as { displayName?: string })?.displayName;
-  const wrapperMode = displayName ? MODE_BY_WRAPPER[displayName] : undefined;
-  return (
-    wrapperMode ??
-    (element.props as { mode?: RenderMode }).mode ??
-    mergedConfig.mode ??
-    "web"
-  );
-}
+const headRoot = (element: React.ReactElement, mode: RenderMode): React.ReactElement => (isRoot(element.type) ? element : rootlessRoot(element, mode));
 
 /**
  * Render the element tree to body markup (no document shell).
  *
- * - Passes merged config via the `config` prop (no React context — works in
- *   Server Components)
- * - Uses `renderToStaticMarkup` — no React hydration markers
+ * - Passes the root's whole config (see resolveConfig) via its `config` prop:
+ *   no React context, so it works in Server Components
+ * - Rendered by the engine as react-dom's static markup — no hydration markers
  */
-function renderBody(
+export function renderBody(
   element: React.ReactElement,
   config?: Partial<UnlayerConfig>,
   name = "renderToHtml"
 ): string {
+  const { html, inner } = bodyHtml(element, config, name);
+  return inner === undefined ? html : `<div>${inner}</div>`;
+}
+
+/** The body markup (see renderBody), and a root's HTML as it is in its renderer's `<div>` (`inner`), where it has one. */
+function bodyHtml(element: React.ReactElement, config?: Partial<UnlayerConfig>, name = "renderToHtml"): { html: string; inner?: string } {
   const mergedConfig = resolveConfig(element, config);
+  // What it does with a part that fails (see RenderError): the render functions' option over the root's config.
+  setRenderConfig(mergedConfig);
 
   try {
-    // Pass config via prop (not context) so this works in React Server Components.
-    // Body reads `config` prop and threads it as `_config` to children via cloneElement.
-    const enriched = React.cloneElement(element, { config: mergedConfig });
-    return renderToStaticMarkup(enriched);
+    // A template with no root: its content as a root's, with no body around it (see root-content.ts).
+    if (!isRoot(element.type)) return { html: rootlessHtml(element, mergedConfig, rootMode(element, mergedConfig)) };
+    // Pass config via prop (not context) so this works in React Server Components: the root's own `config` and the
+    // Provider's are in it (see resolveConfig). Body threads it as `_config` to children via cloneElement. (A root of
+    // another copy of Elements renders as this copy's: this render renders it all, see own-root.ts.)
+    return renderOwn(ownRoot(element), { config: mergedConfig }, OWN_MARKUP);
   } catch (error) {
+    // A part of the template that failed says which and where; a scope's error is as it is.
+    if (error instanceof RenderError || isTailwindError(error)) throw error;
     const message =
       error instanceof Error ? error.message : String(error);
-    throw new Error(
-      `[Unlayer] ${name} failed: ${message}\n` +
-        `Tip: Ensure your tree uses Body > Row > Column > Item structure.`
+    // Keep the original error as `cause`: its stack points at the template line that threw.
+    throw Object.assign(
+      new Error(
+        `[Unlayer] ${name} failed: ${message}\n` +
+          `Tip: Ensure your tree uses Body > Row > Column > Item structure.`
+      ),
+      { cause: error }
     );
   }
 }
@@ -151,7 +148,7 @@ export function renderToHtml(
   element: React.ReactElement,
   options?: RenderToHtmlOptions
 ): string {
-  return withRenderScope(() => htmlDocument(element, options));
+  return withOwnScope(() => htmlDocument(element, options));
 }
 
 /** CSS for a `<style>` element: a `</style` in it would end the element (CSS escapes the slash). */
@@ -159,27 +156,27 @@ function styleText(css: string): string {
   return css.replace(/<\/(style)/gi, "<\\/$1");
 }
 
-function htmlDocument(element: React.ReactElement, options?: RenderToHtmlOptions): string {
+/** renderToHtml in the render's scope (the async renderers' too, which collected the template in it). */
+export function htmlDocument(element: React.ReactElement, options?: RenderToHtmlOptions): string {
   const { title, lang: optionLang, fonts: optionFonts = [], ...config } = options ?? {};
   // A template component (<Welcome/>) renders as its root, whose settings follow.
-  element = htmlRoot(element, "renderToHtml");
+  element = htmlRoot(element, "renderToHtml", config.idPrefix);
   // The root's own `fonts` prop, then the option's, each URL once.
   const rootFonts = (element.props as { fonts?: Array<{ url: string }> } | null)?.fonts ?? [];
   const fonts = [...rootFonts, ...optionFonts].filter((font, i, all) => font?.url && all.findIndex((f) => f?.url === font.url) === i);
 
   const lang = optionLang ?? (element.props as { lang?: string }).lang;
   const mergedConfig = resolveConfig(element, config);
-  const displayMode = resolveDisplayMode(element, mergedConfig);
+  const displayMode = rootMode(element, mergedConfig);
 
   // Only Unlayer wrappers (Body/Email/Page/Document) get their renderer's
   // host <div> stripped — for any other root (a bare item, a custom
   // component) the outer div is the element's own markup and must stay.
-  const wrapperName = (element.type as { displayName?: string })?.displayName;
-  const isUnlayerWrapper =
-    wrapperName === "Body" || (wrapperName ? wrapperName in MODE_BY_WRAPPER : false);
-  const rawBody = renderBody(element, config);
-  const body = isUnlayerWrapper ? stripOuterDiv(rawBody) : rawBody;
-  const { css, js, tags } = extractHeadFromTree(element, {
+  const isUnlayerWrapper = isRoot(element.type);
+  // (A root's HTML as Body writes it in its `<div>`, which the document has instead.)
+  const rendered = bodyHtml(element, config);
+  const body = rendered.inner !== undefined ? (isUnlayerWrapper ? rendered.inner : `<div>${rendered.inner}</div>`) : isUnlayerWrapper ? stripOuterDiv(rendered.html) : rendered.html;
+  const { css, js, tags } = extractHeadFromTree(headRoot(element, displayMode), {
     displayMode,
     headConfig: mergedConfig.headConfig,
   });
@@ -190,7 +187,7 @@ function htmlDocument(element: React.ReactElement, options?: RenderToHtmlOptions
       ? ` dir="${escapeForHtml(String(mergedConfig.textDirection))}"`
       : "",
     titleTag: title ? `<title>${escapeForHtml(title.trim())}</title>` : "",
-    styleTag: css ? `<style type="text/css">\n${styleText(css)}\n</style>` : "",
+    css: styleText(css),
     scriptTag: js
       ? `<script type="application/javascript">\n${js}\n</script>`
       : "",
@@ -233,17 +230,23 @@ function htmlDocument(element: React.ReactElement, options?: RenderToHtmlOptions
  */
 export function renderToPlainText(
   element: React.ReactElement,
-  config?: Partial<UnlayerConfig>
+  config?: Partial<UnlayerConfig> & PlainTextOptions
 ): string {
+  return withOwnScope(() => plainText(element, config));
+}
+
+/** renderToPlainText in the render's scope (see htmlDocument). */
+export function plainText(element: React.ReactElement, config?: Partial<UnlayerConfig> & PlainTextOptions): string {
   // A template component renders as its root, as in renderToHtml (context providers around it included).
-  const html = withRenderScope(() => {
-    const root = htmlRoot(element, "renderToPlainText");
-    // Collected first, as renderToHtml's head is: it fails where that does (a component that isn't one), not with
-    // empty text (Body leaves out what fails, for a live preview).
-    normalizedRoot(root);
-    return renderBody(root, config, "renderToPlainText");
-  });
-  return htmlToPlainText(html);
+  const root = htmlRoot(element, "renderToPlainText", config?.idPrefix);
+  const resolved = resolveConfig(root, config);
+  setRenderConfig(resolved);
+  if (config?.links === "after") markTextRegions();
+  // Collected first, as renderToHtml's head is: it fails where that does.
+  const mode = rootMode(root, resolved);
+  normalizedRoot(headRoot(root, mode), mode);
+  // How the text is written (wrapping, links, headings, what's left out): see PlainTextOptions.
+  return htmlToPlainText(renderBody(root, config, "renderToPlainText"), config);
 }
 
 /**
@@ -267,6 +270,11 @@ export interface HtmlParts {
   css: string;
   /** Raw component JS (no `<script>` wrapper); empty for most email designs */
   js: string;
+  /**
+   * The parts of the template left out (`onError: "omit"`, or a function), in the order the render found them: each
+   * a RenderError naming the component, where it is (`position`) and what it threw (`cause`). Empty when nothing was.
+   */
+  omitted: RenderError[];
   /**
    * Individual head tags (`<meta>`, `<link>`, ...) contributed by components.
    * Not part of the editor's documented chunk parameters, but exposed here
@@ -315,20 +323,21 @@ export function renderToHtmlParts(
   element: React.ReactElement,
   config?: Partial<UnlayerConfig>
 ): HtmlParts {
-  return withRenderScope(() => htmlParts(element, config));
+  return withOwnScope(() => htmlParts(element, config));
 }
 
-function htmlParts(element: React.ReactElement, config?: Partial<UnlayerConfig>): HtmlParts {
-  element = htmlRoot(element, "renderToHtmlParts");
+/** renderToHtmlParts in the render's scope (see htmlDocument). */
+export function htmlParts(element: React.ReactElement, config?: Partial<UnlayerConfig>): HtmlParts {
+  element = htmlRoot(element, "renderToHtmlParts", config?.idPrefix);
   // Render body markup
   const body = renderBody(element, config, "renderToHtmlParts");
 
   // Resolve display mode from the wrapper component, element props, or config
   const mergedConfig = resolveConfig(element, config);
-  const displayMode = resolveDisplayMode(element, mergedConfig);
+  const displayMode = rootMode(element, mergedConfig);
 
   // Extract head CSS/JS/tags by walking the element tree
-  const { css, js, tags } = extractHeadFromTree(element, {
+  const { css, js, tags } = extractHeadFromTree(headRoot(element, displayMode), {
     displayMode,
     headConfig: mergedConfig.headConfig,
   });
@@ -354,5 +363,6 @@ function htmlParts(element: React.ReactElement, config?: Partial<UnlayerConfig>)
     css,
     js,
     tags,
+    omitted: [...omissions()],
   };
 }
diff --git a/packages/react/src/utils/render-to-json.test.tsx b/packages/react/src/utils/render-to-json.test.tsx
index 17af234c..b4ef8d06 100644
--- a/packages/react/src/utils/render-to-json.test.tsx
+++ b/packages/react/src/utils/render-to-json.test.tsx
@@ -12,6 +12,8 @@ import Divider from "../components/Divider";
 import Email from "../components/Email";
 import Page from "../components/Page";
 import Document from "../components/Document";
+import { renderToHtml } from "./render-to-html";
+import { RenderError } from "@unlayer-internal/shared-elements";
 import { ColumnLayouts } from "../layouts/ColumnLayouts";
 
 describe("renderToJson", () => {
@@ -330,11 +332,21 @@ describe("renderToJson", () => {
     expect(() => renderToJson(<NotARoot />)).toThrow("Root element must be <Body>");
   });
 
-  it("rethrows an actionable error when a wrapper throws while unwrapping", () => {
+  it("throws what a wrapper throws as renderToHtml does (a RenderError naming it), and says what to do for an async one", () => {
+    const cause = new Error("no data");
     const Boom = (): React.ReactElement => {
-      throw new Error("invalid hook call");
+      throw cause;
     };
-    expect(() => renderToJson(<Boom />)).toThrow("could not unwrap");
+    for (const render of [() => renderToJson(<Boom />), () => renderToHtml(<Boom />)]) {
+      expect(render).toThrow(RenderError);
+      expect(render).toThrow(/^\[Unlayer\] no data \(in <Boom>\)$/);
+    }
+    expect(() => renderToJson(<Boom />)).toThrow(expect.objectContaining({ component: "Boom", cause }));
+    const Later = async () => <Email />;
+    expect(() => renderToJson(<Later />)).toThrow(RenderError);
+    expect(() => renderToJson(<Later />)).toThrow(
+      `[Unlayer] renderToJson: async and suspending templates need "@unlayer/react-elements/async"'s renderers, or their data loaded first and passed as props (in <Later>)`
+    );
   });
 
   it("unwraps a wrapper that uses hooks, also while the app is rendering", () => {
@@ -551,19 +563,25 @@ describe("renderToJson", () => {
 });
 
 describe("renderToJson with markup React rejects in a Column", () => {
-  it("leaves it out, with a message, and keeps the blocks around it", () => {
+  const email = (
+    <Email><Row><Column>
+      <Paragraph>Before the rule</Paragraph>
+      {React.createElement("hr", { style: "border-top:1px solid #eee" } as never)}
+      <Paragraph>After the rule</Paragraph>
+    </Column></Row></Email>
+  );
+
+  it("fails, naming it", () => {
+    expect(() => renderToJson(email)).toThrow(/^\[Unlayer\] The `style` prop expects a mapping .* \(in <hr> at Row 1 › Column 1 › hr\)$/);
+  });
+
+  it("with onError: \"omit\", leaves it out, with a message, and keeps the blocks around it", () => {
     const error = vi.spyOn(console, "error").mockImplementation(() => {});
     try {
-      const design = renderToJson(
-        <Email><Row><Column>
-          <Paragraph>Before the rule</Paragraph>
-          {React.createElement("hr", { style: "border-top:1px solid #eee" } as never)}
-          <Paragraph>After the rule</Paragraph>
-        </Column></Row></Email>
-      );
+      const design = renderToJson(email, { onError: "omit" });
       const text = JSON.stringify(design.body.rows[0].columns[0].contents.map((c: any) => c.type));
       expect(text).toBe('["text","text"]');
-      expect(error.mock.calls.some((call) => String(call[0]).includes("<hr>"))).toBe(true);
+      expect(error.mock.calls.map((call) => String(call[0]))).toEqual([expect.stringMatching(/^\[Unlayer\] Left out: The `style` prop .*\(in <hr> at Row 1 › Column 1 › hr\)$/)]);
     } finally {
       error.mockRestore();
     }
@@ -645,16 +663,197 @@ describe("renderRowToJson", () => {
 });
 
 describe("renderToJson fonts prop", () => {
-  it("keeps the root's fonts out of the design (renderToHtml links them)", () => {
+  const INTER = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap";
+  const PAIR = "https://fonts.googleapis.com/css?family=Open+Sans:400,700|Lora";
+
+  it("puts each URL on the design's fonts of the families it names, as a <Font> does, so the editor loads them", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      // As the CLI starters write it: the root's font is the stylesheet's family.
+      const design = renderToJson(
+        <Email fonts={[{ url: INTER }, { url: PAIR }]} fontFamily={{ label: "Inter", value: "Inter, 'Helvetica Neue', Arial, sans-serif" }}>
+          <Row>
+            <Column>
+              <Heading fontFamily="'Open Sans', Arial, sans-serif">Hello</Heading>
+              <Paragraph fontFamily={{ label: "Lora", value: "Lora, serif", url: "https://example.com/own.css" }}>Its own</Paragraph>
+              <Paragraph fontFamily="Georgia, serif">Another family</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      ) as any;
+      expect(design.body.values.fontFamily).toEqual({ label: "Inter", value: "Inter, 'Helvetica Neue', Arial, sans-serif", url: INTER });
+      const [heading, own, other] = design.body.rows[0].columns[0].contents.map((c: any) => c.values.fontFamily);
+      expect(heading.url).toBe(PAIR);
+      // A font with its own URL keeps it; another family takes none.
+      expect(own.url).toBe("https://example.com/own.css");
+      expect(other.url).toBeUndefined();
+      expect(warn).not.toHaveBeenCalled();
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("says, once a render, a URL the design can't hold: one naming no family a font in it has, or no family at all", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const tree = (
+        <Email fonts={[{ url: "https://fonts.googleapis.com/css2?family=Inter" }, { url: "https://cdn.example.com/brand.css" }, { url: "https://cdn.example.com/brand.css" }]}>
+          <Row>
+            <Column>
+              <Paragraph>Hello</Paragraph>
+            </Column>
+          </Row>
+        </Email>
+      );
+      const design = renderToJson(tree);
+      expect(JSON.stringify(design)).not.toContain("fonts.googleapis.com");
+      const said = warn.mock.calls.map((c) => String(c[0]));
+      expect(said).toEqual([
+        expect.stringMatching(/^\[Unlayer\] Email `fonts` URL https:\/\/fonts\.googleapis\.com\/css2\?family=Inter is kept in HTML but not in the design/),
+        expect.stringMatching(/^\[Unlayer\] Email `fonts` URL https:\/\/cdn\.example\.com\/brand\.css is kept in HTML but not in the design/),
+      ]);
+      // The HTML links them all the same.
+      expect(renderToHtml(tree)).toContain('href="https://cdn.example.com/brand.css"');
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("reads the families of a data: stylesheet's @font-face rules (as @unlayer/migrate writes a font file)", () => {
+    const css = "@font-face{font-family:'Brand Sans';src:url('https://cdn.example.com/brand.woff2') format('woff2');font-weight:400;font-style:normal}";
+    const url = `data:text/css,${encodeURIComponent(css)}`;
     const design = renderToJson(
-      <Email fonts={[{ url: "https://fonts.googleapis.com/css2?family=Inter" }]}>
+      <Email fonts={[{ url }]} fontFamily="'Brand Sans', Arial, sans-serif">
         <Row>
           <Column>
             <Paragraph>Hello</Paragraph>
           </Column>
         </Row>
       </Email>
+    ) as any;
+    expect(decodeURIComponent(design.body.values.fontFamily.url)).toBe(`data:text/css,${css}`);
+  });
+
+  it("leaves a <Font>'s URL where it put it", () => {
+    const design = renderToJson(
+      <Email fonts={[{ url: INTER }]} fontFamily={{ label: "Inter", value: "Inter, sans-serif", url: "https://example.com/inter.css" }}>
+        <Row>
+          <Column>
+            <Paragraph>Hello</Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    ) as any;
+    expect(design.body.values.fontFamily.url).toBe("https://example.com/inter.css");
+  });
+});
+
+describe("renderToJson displayMode", () => {
+  const content = <Row><Column><Paragraph>Hi</Paragraph></Column></Row>;
+  it.each([
+    ["Email", <Email>{content}</Email>, "email"],
+    ["Page", <Page>{content}</Page>, "web"],
+    ["Document", <Document>{content}</Document>, "document"],
+    ["Body with a mode", <Body mode="email">{content}</Body>, "email"],
+    ["Body with none", <Body>{content}</Body>, "web"],
+  ] as const)("writes the mode the HTML renders in on the body: %s", (_, tree, mode) => {
+    expect((renderToJson(tree).body.values as any).displayMode).toBe(mode);
+  });
+
+  it("is the root's, over one given in its values", () => {
+    expect((renderToJson(<Email values={{ displayMode: "web" } as any}>{content}</Email>).body.values as any).displayMode).toBe("email");
+  });
+});
+
+describe("renderToJson lengths", () => {
+  // The design's schema types paddings, radii and border widths as px lengths: `0` is written `0px` there.
+  const one = (block: React.ReactElement, row: Record<string, unknown> = {}, column: Record<string, unknown> = {}) =>
+    renderToJson(
+      <Email>
+        <Row {...row}>
+          <Column {...column}>{block}</Column>
+        </Row>
+      </Email>
+    ) as any;
+  const blockOf = (design: any) => design.body.rows[0].columns[0].contents[0].values;
+
+  it("writes a bare zero in a px length as 0px: containerPadding=\"0 0 12px\"", () => {
+    expect(blockOf(one(<Paragraph containerPadding="0 0 12px">Hi</Paragraph>)).containerPadding).toBe("0px 0px 12px");
+    expect(blockOf(one(<Paragraph containerPadding="0">Hi</Paragraph>)).containerPadding).toBe("0px");
+  });
+
+  it("in every length a design holds, in each of its forms", () => {
+    const design = one(
+      <Button padding="0 24px" borderRadius="0" border={{ borderTopWidth: "0", borderTopStyle: "solid" }} mobile={{ padding: "0 12px 0" }}>Go</Button>,
+      { values: { padding: "0 0 8px 0" } },
+      { padding: "0 16px", borderRadius: "0 4px", border: { borderLeftWidth: "0" } }
     );
-    expect(JSON.stringify(design)).not.toContain("fonts.googleapis.com");
+    const button = blockOf(design);
+    expect(button).toMatchObject({ padding: "0px 24px", borderRadius: "0px", border: { borderTopWidth: "0px", borderTopStyle: "solid" } });
+    expect(button._override.mobile.padding).toBe("0px 12px 0px");
+    expect(design.body.rows[0].values.padding).toBe("0px 0px 8px 0px");
+    expect(design.body.rows[0].columns[0].values).toMatchObject({ padding: "0px 16px", borderRadius: "0px 4px", border: { borderLeftWidth: "0px" } });
+  });
+
+  it("in the body's margins too: documentMargin, popupCloseButton_margin", () => {
+    const body = renderToJson(<Document values={{ documentMargin: "0 0 12px", popupCloseButton_margin: "0" } as never}><Row><Column><Paragraph>Hi</Paragraph></Column></Row></Document>).body.values as any;
+    expect(body).toMatchObject({ documentMargin: "0px 0px 12px", popupCloseButton_margin: "0px" });
+  });
+
+  it("leaves a length in another unit as it is, and the HTML as it was", () => {
+    expect(blockOf(one(<Paragraph containerPadding="1em 0">Hi</Paragraph>)).containerPadding).toBe("1em 0");
+    expect(blockOf(one(<Paragraph containerPadding="0 auto">Hi</Paragraph>)).containerPadding).toBe("0 auto");
+    expect(blockOf(one(<Paragraph containerPadding="0px 8px">Hi</Paragraph>)).containerPadding).toBe("0px 8px");
+    // Text that isn't a length isn't touched.
+    expect(blockOf(one(<Paragraph>0</Paragraph>)).text).toBe("0");
+    // The HTML writes the padding as given.
+    expect(renderToHtml(<Email><Row><Column><Paragraph containerPadding="0 0 12px">Hi</Paragraph></Column></Row></Email>)).toMatch(/padding: ?0 0 12px/);
+  });
+});
+
+/**
+ * Text given as text shows as typed in the HTML, and in the editor that opens the design: the design's `text` is HTML,
+ * so text is escaped there as it is in the HTML. What's given as HTML stays HTML in both.
+ */
+describe("renderToJson: text shows in the editor as in the HTML", () => {
+  const typed = 'Use <b>bold</b> & <img src=x onerror="alert(1)"> &amp; <%name%>';
+  /** What a browser (and the editor's canvas) shows of an element: its text (spaces collapsed), and whether it holds elements. */
+  const seen = (at: Element) => ({ text: at.textContent!.replace(/\s+/g, " ").trim(), elements: at.querySelectorAll("b, img").length });
+  /** The block's text as the email shows it, and as the editor shows the design's (its `text` is HTML). */
+  const both = (Root: React.FC<any>, block: React.ReactElement) => {
+    const tree = <Root><Row><Column>{block}</Column></Row></Root>;
+    const page = new DOMParser().parseFromString(renderToHtml(tree), "text/html");
+    const design = document.createElement("div");
+    design.innerHTML = (renderToJson(tree).body.rows[0].columns[0].contents[0].values as any).text;
+    return { html: seen(page.querySelector("[id^='u_content_']")!), design: seen(design) };
+  };
+
+  it.each([["Email", Email], ["Page", Page], ["Document", Document]] as const)("a Paragraph's `text` and string children are text in both (%s)", (_, Root) => {
+    for (const block of [<Paragraph text={typed} />, <Paragraph>{typed}</Paragraph>]) {
+      const { html, design } = both(Root, block);
+      expect(html).toEqual({ text: typed, elements: 0 });
+      expect(design).toEqual(html);
+    }
+    const values = renderToJson(<Root><Row><Column><Paragraph text={typed} /></Column></Row></Root>).body.rows[0].columns[0].contents[0].values as any;
+    expect(values.text).toBe('Use &lt;b&gt;bold&lt;/b&gt; &amp; &lt;img src=x onerror="alert(1)"&gt; &amp;amp; &lt;%name%&gt;');
+    expect(values.textJson).toBeUndefined();
+    // Plain words are written as before.
+    expect((renderToJson(<Root><Row><Column><Paragraph text="Hello there" /></Column></Row></Root>).body.rows[0].columns[0].contents[0].values as any).text).toBe("Hello there");
+  });
+
+  it.each([["Email", Email], ["Page", Page], ["Document", Document]] as const)("a Paragraph's `html`, Heading's and Button's `text` stay HTML in both, their children text (%s)", (_, Root) => {
+    const html = "Use <b>bold</b> &amp; more";
+    expect(both(Root, <Paragraph html={html} />)).toEqual({ html: { text: "Use bold & more", elements: 1 }, design: { text: "Use bold & more", elements: 1 } });
+    expect((renderToJson(<Root><Row><Column><Paragraph html={html} /></Column></Row></Root>).body.rows[0].columns[0].contents[0].values as any).text).toBe(html);
+    for (const block of [<Heading text={html} />, <Button href="https://example.com" text={html} />]) {
+      const { html: shownInHtml, design } = both(Root, block);
+      expect(shownInHtml).toEqual({ text: "Use bold & more", elements: 1 });
+      expect(design).toEqual(shownInHtml);
+    }
+    for (const block of [<Heading>{typed}</Heading>, <Button href="https://example.com">{typed}</Button>]) {
+      const { html: shownInHtml, design } = both(Root, block);
+      expect(shownInHtml).toEqual({ text: typed, elements: 0 });
+      expect(design).toEqual(shownInHtml);
+    }
   });
 });
diff --git a/packages/react/src/utils/render-to-json.ts b/packages/react/src/utils/render-to-json.ts
index e907decc..68b86d77 100644
--- a/packages/react/src/utils/render-to-json.ts
+++ b/packages/react/src/utils/render-to-json.ts
@@ -16,8 +16,9 @@ import type {
   DesignRow,
   DesignColumn,
   DesignContent,
+  UnlayerConfig,
 } from "@unlayer-internal/shared-elements";
-import { mergeValues } from "@unlayer-internal/shared-elements";
+import { mergeValues, pxMerged, pxZeros, textJsonToText } from "@unlayer-internal/shared-elements";
 // Schema version from the exporters bundle — matches the editor's currentVersion
 // at the time the exporters were generated. This ensures renderToJson output is
 // recognized as current by the editor, skipping unnecessary migrations.
@@ -25,12 +26,19 @@ import { mergeValues } from "@unlayer-internal/shared-elements";
 import { schemaVersion as _schemaVersion } from "@unlayer/exporters";
 const schemaVersion: number = _schemaVersion ?? 24;
 import { mapSemanticProps } from "./semantic-props";
-import { componentName, getDisplayName, ROOT_NAMES, unwrapRoot, UNWRAP_ADVICE } from "./unwrap-root";
+import { componentName, getDisplayName, providedConfig, unwrapRoot } from "./unwrap-root";
+import { rootName } from "./root-type";
+import { rootConfig, rootMode, type RootConfigProps } from "../context/layer-config";
 import { BODY_DEFAULTS, ROW_DEFAULTS, COLUMN_DEFAULTS } from "./container-defaults";
 import { contentSlotWidth, pinImageSrc, type SlotContext } from "./image-sizing";
-import { withRenderScope } from "./render-scope";
-import { KEPT, normalizedChildren, normalizedRoot } from "./normalize";
-import { textDirectionOf, UNLAYER_CONFIG_KEY } from "./create-component";
+import { failedBefore, sayOnce, setRenderConfig, withOwnScope } from "./render-scope";
+import { renderBody } from "./render-to-html";
+import { collect, KEPT, normalizedChildren, normalizedRoot } from "../model";
+import type { Recorded } from "./collect";
+import { rtlAlign, textDirectionOf, UNLAYER_CONFIG_KEY } from "./create-component";
+import { TAILWIND } from "./tailwind";
+import { fontUrlInDesign, safeUrl, urlFamilies } from "./font-design";
+import { omits } from "../engine/errors";
 
 /** Layout context threaded down the walk so an image can be sized against the
  *  real column slot (contentWidth × column share, minus paddings/borders). */
@@ -48,113 +56,62 @@ type LayoutContext = Pick<
 /**
  * Unwrap a user wrapper component (e.g. `renderToJson(<MyEmail/>)`) down to
  * its root element: renderToJson walks the element tree, so the wrapper must
- * be called first. A wrapper that throws (React hooks aren't valid outside a
- * render) gets an actionable message instead of a bare "Invalid hook call".
+ * be called first. What a wrapper throws is thrown as renderToHtml throws it
+ * (a RenderError naming it, with its `cause`), as is an async one, which this
+ * renderer can't wait for (saying what to do instead).
  */
-function unwrapForJson(element: React.ReactElement): React.ReactElement {
-  try {
-    return unwrapRoot(element);
-  } catch (cause) {
-    const detail = cause instanceof Error ? cause.message : String(cause);
-    throw new Error(
-      `[Unlayer] renderToJson: could not unwrap <${componentName(element) || "wrapper"}>. ${UNWRAP_ADVICE} (${detail})`
-    );
-  }
+const unwrapForJson = (element: React.ReactElement, idPrefix?: string): React.ReactElement => unwrapRoot(element, "renderToJson", idPrefix).root;
+
+/** The elements in children (lists flattened): the model's Rows, Columns and blocks (see src/model). */
+export function elementsIn(children: React.ReactNode, out: React.ReactElement<any>[] = []): React.ReactElement<any>[] {
+  if (Array.isArray(children)) for (const child of children) elementsIn(child, out);
+  else if (React.isValidElement(children)) out.push(children);
+  return out;
 }
 
-/** The element children of a collected (Elements-only) tree. */
-const collectChildren = (node: React.ReactNode): React.ReactElement[] => React.Children.toArray(node).filter(React.isValidElement);
+/**
+ * The element children of a collected (Elements-only) tree; a Row or block whose HTML failed in this render
+ * (`onError: "omit"`) left out, as in the HTML.
+ */
+const collectChildren = (node: React.ReactNode): React.ReactElement<any>[] => elementsIn(node).filter((child) => !failedBefore(child.props._record));
 
 /**
  * Strip internal/base props from an element's props,
  * returning only the semantic props that should be mapped to values.
  */
-export function extractSemanticProps(
-  props: Record<string, any>,
-  extraKeys: string[] = []
-): Record<string, any> {
-  const internalKeys = new Set([
-    "children",
-    "mode",
-    "className",
-    "style",
-    "index",
-    "colIndex",
-    "cells",
-    "bodyValues",
-    "rowValues",
-    "_config",
-    "config",
-    "previewText",
-    "fonts",
-    "lang",
-    "layout",
-    "collection",
-    ...extraKeys,
-  ]);
-
+export function extractSemanticProps(props: Record<string, any>): Record<string, any> {
   const result: Record<string, any> = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (!internalKeys.has(key) && value !== undefined) {
-      result[key] = value;
-    }
-  }
+  for (const key of Object.keys(props)) if (!INTERNAL.has(key) && props[key] !== undefined) result[key] = props[key];
   return result;
 }
 
-/** Increment and return counter for a given key. */
-export function nextCounter(counters: Record<string, number>, key: string): number {
-  counters[key] = (counters[key] || 0) + 1;
-  return counters[key];
-}
-
-// ============================================
-// Helpers
-// ============================================
+const INTERNAL = new Set("children mode className style index colIndex cells bodyValues rowValues _config _record config previewText fonts lang layout collection".split(" "));
 
-/** Map component displayName to Unlayer content type.
- *  Paragraph maps to "text" (the legacy content type that uses plain HTML
- *  values.text) for universal editor compatibility. The newer "paragraph"
- *  content type uses Lexical textJson which requires specific editor support.
+/**
+ * HTML's `&lt;` and `&gt;` in its text, and `&quot;`, `&lt;` and `&gt;` in its tags (their attributes' values), as numeric
+ * references (see the Button's text above).
  */
-function toContentType(displayName: string): string {
-  if (displayName === "Paragraph") return "text";
-  return displayName.toLowerCase();
-}
+const NUMERIC: Record<string, string> = { "&lt;": "&#60;", "&gt;": "&#62;", "&quot;": "&#34;" };
+const numericText = (html: string) => html.replace(/<[^<>]*>|&(?:lt|gt);/g, (part) => (part.startsWith("<") ? part.replace(/&(?:lt|gt|quot);/g, (ref) => NUMERIC[ref]) : NUMERIC[part]));
 
-/** Generate a unique ID like "u_row_1", "u_content_button_2" */
-function makeId(prefix: string, counter: number): string {
-  return `${prefix}_${counter}`;
+/** A block's props the design doesn't hold (its children are its text: see processItem; `_sanitized`: Markdown's). */
+const CODE_ONLY = new Set(["children", "style", "className", "skipInText", "_record", "_sanitized"]);
+
+/** What makes a row or block editable in the editor. */
+const EDITABLE = { selectable: true, draggable: true, duplicatable: true, deletable: true, hideable: true };
+
+/** A component's `style`, `className` and `skipInText`, which the design can't hold: said once per render. */
+function codeOnly(name: string, props: Record<string, any>): void {
+  if (!props.style && !props.className && !props.skipInText) return;
+  // (Not a style a <Tailwind>'s classes give, which it says.)
+  const keys = [...Object.keys(props.style ?? {}).filter((key) => !props.style[TAILWIND]?.includes(key)).map((key) => `style.${key}`), ...["className", "skipInText"].filter((key) => props[key])];
+  if (keys.length) sayOnce(`[Unlayer] ${name} \`${keys.join("`, `")}\` ${keys.length > 1 ? "are" : "is"} kept in HTML but not in the design for the visual editor.`);
 }
 
-/**
- * Extract plain text/HTML from a textJson string without needing a DOM.
- * Handles both Lexical JSON format and the __html passthrough format.
- */
-function extractTextFromTextJson(textJson: string): string {
-  try {
-    const parsed = JSON.parse(textJson);
-
-    // __html passthrough (from htmlToTextJson)
-    if (parsed.__html) return parsed.__html;
-
-    // Lexical JSON — walk the tree and extract text content
-    const root = parsed?.root;
-    if (!root?.children) return "";
-
-    const paragraphs: string[] = [];
-    for (const paragraph of root.children) {
-      if (!paragraph?.children) continue;
-      const parts: string[] = [];
-      for (const node of paragraph.children) {
-        if (node?.text) parts.push(node.text);
-      }
-      paragraphs.push(parts.join(""));
-    }
-    return paragraphs.join("\n");
-  } catch {
-    return "";
-  }
+/** Increment and return counter for a given key. */
+export function nextCounter(counters: Record<string, number>, key: string): number {
+  counters[key] = (counters[key] || 0) + 1;
+  return counters[key];
 }
 
 // ============================================
@@ -184,39 +141,42 @@ function processItem(
   }
 
   const { name, defaultValues, propMapper, slug } = config;
-  const contentType = config.contentType ?? toContentType(name);
+  // Paragraph is "text" (the content type whose values.text is plain HTML), which every editor reads; the newer
+  // "paragraph" type's Lexical textJson needs specific editor support.
+  const contentType = config.contentType ?? (name === "Paragraph" ? "text" : name.toLowerCase());
   // Custom tools use u_content_custom_<slug> as their id/class base
   const metaBase = `u_content_${metaName ?? config.metaName ?? contentType}`;
-  const count = nextCounter(counters, metaBase);
-  const id = makeId(metaBase, count);
-
-  // Map props through the item's own propMapper, then merge with defaults
-  const { children, ...restProps } = element.props;
-  const mappedValues = propMapper({ children, ...restProps });
-  const finalValues = mergeValues(defaultValues, mappedValues);
-
-  // Paragraph maps to "text" content type — convert textJson to plain text/HTML.
-  // Extract text directly from the Lexical JSON structure (no DOM needed).
-  if (contentType === "text" && finalValues.textJson) {
-    finalValues.text = extractTextFromTextJson(finalValues.textJson);
-    delete finalValues.textJson;
+  const id = `${metaBase}_${nextCounter(counters, metaBase)}`;
+
+  // Map props through the item's own propMapper (but what the design can't hold, said and left out), then merge with
+  // defaults, after the base content option every block has, containerPadding.
+  const props = element.props as Record<string, any>;
+  codeOnly(name, props);
+  const given: Record<string, any> = { children: props.children };
+  for (const key in props) if (!CODE_ONLY.has(key)) given[key] = props[key];
+  const mappedValues = propMapper(given);
+  rtlAlign(mappedValues, defaultValues, (layout.bodyValues as { textDirection?: unknown } | undefined)?.textDirection);
+  // (Bare zeros in px lengths written `0px`, as the design's schema types them: see pxZeros. A custom tool's values
+  // are as it writes them.)
+  const values: Record<string, any> = slug ? { containerPadding: "10px", ...mergeValues(defaultValues, mappedValues) } : pxMerged(defaultValues, mappedValues, "", { containerPadding: "10px" });
+
+  // Paragraph maps to "text" content type: its textJson as the HTML the text block holds, which its HTML renders too
+  // (see Paragraph.tsx).
+  if (contentType === "text" && values.textJson) {
+    values.text = textJsonToText(values.textJson);
+    delete values.textJson;
   }
 
-  // Add containerPadding (base content option) and _meta
-  const values = {
-    containerPadding: "10px",
-    ...finalValues,
-    _meta: {
-      htmlID: id,
-      htmlClassNames: metaBase,
-      ...(finalValues._meta || {}),
-    },
-    selectable: true,
-    draggable: true,
-    duplicatable: true,
-    deletable: true,
-    hideable: true,
-  };
+  // A Button's text: the editor's exporters unescape it before they write it where it has no textJson (as Elements'
+  // designs don't), so a `&lt;` of its text was a tag in their HTML, where the editor's canvas shows the text it is.
+  // Its text's `<` and `>`, and its tags' attribute values' `"`, `<` and `>`, are numeric references, which unescaping
+  // leaves: the same text to both (unescaped once, an `&amp;lt;` is `&lt;`, still text, and a `&#39;` a `'` in a value
+  // in double quotes).
+  if (name === "Button" && typeof values.text === "string") values.text = numericText(values.text);
+
+  // Its _meta and the editor's flags
+  values._meta = { htmlID: id, htmlClassNames: metaBase, ...(values._meta || {}) };
+  Object.assign(values, EDITABLE);
 
   // Convert a fixed (px) image pin to a percent of the column slot using the
   // threaded geometry, so the display width survives the JSON round-trip into an
@@ -227,7 +187,7 @@ function processItem(
       ...layout,
       containerPadding: (values as Record<string, any>).containerPadding,
     });
-    (values as Record<string, any>).src = pinImageSrc(itemSrc, availableWidth);
+    (values as Record<string, any>).src = pxZeros(pinImageSrc(itemSrc, availableWidth));
   }
 
   return slug ? { type: contentType, slug, values } : { type: contentType, values };
@@ -238,23 +198,16 @@ function processColumn(
   counters: Record<string, number>,
   layout: Omit<LayoutContext, "columnValues"> = {}
 ): DesignColumn {
-  const count = nextCounter(counters, "u_column");
-  const id = makeId("u_column", count);
+  const id = `u_column_${nextCounter(counters, "u_column")}`;
 
   // Extract semantic props for column values, then merge with defaults
+  codeOnly("Column", element.props);
   const semanticProps = extractSemanticProps(element.props);
   const mapped = mapSemanticProps(semanticProps, COLUMN_DEFAULTS, "Column");
-  const values = mergeValues(COLUMN_DEFAULTS, mapped);
+  const valuesWithMeta = pxMerged(COLUMN_DEFAULTS, mapped) as Record<string, any>;
 
   // Add _meta
-  const valuesWithMeta = {
-    ...values,
-    _meta: {
-      htmlID: id,
-      htmlClassNames: "u_column",
-      ...(values._meta || {}),
-    },
-  };
+  valuesWithMeta._meta = { htmlID: id, htmlClassNames: "u_column", ...(valuesWithMeta._meta || {}) };
 
   // Process item children
   const contents: DesignContent[] = [];
@@ -273,51 +226,25 @@ function processRow(
   counters: Record<string, number>,
   parentLayout: Pick<LayoutContext, "bodyValues"> = {}
 ): DesignRow {
-  const count = nextCounter(counters, "u_row");
-  const id = makeId("u_row", count);
-
-  // Determine cells from layout or cells prop
-  const { layout, cells: propsCells } = element.props;
-  let cells: number[];
-  if (layout) {
-    cells = layout.cells;
-  } else if (propsCells) {
-    cells = propsCells;
-  } else {
-    // Default: one equal cell per Column child. Count only <Column> children —
-    // any stray non-Column child is warned and skipped below, so including it
-    // would make `cells` longer than the column list and distort both the row
-    // layout and the column-share math used for image sizing.
-    const columnCount = Math.max(
-      1,
-      collectChildren(element.props.children).filter(
-        (child) => getDisplayName(child) === "Column"
-      ).length
-    );
-    cells = Array(columnCount).fill(1);
-  }
+  const id = `u_row_${nextCounter(counters, "u_row")}`;
+
+  // Cells from the layout or cells prop. Default: one equal cell per Column child. Count only <Column> children —
+  // any stray non-Column child is warned and skipped below, so including it would make `cells` longer than the
+  // column list and distort both the row layout and the column-share math used for image sizing.
+  const cells: number[] =
+    element.props.layout?.cells ?? element.props.cells ?? Array(Math.max(1, collectChildren(element.props.children).filter((child) => getDisplayName(child) === "Column").length)).fill(1);
 
   // Extract semantic props for row values, then merge with defaults
-  const semanticProps = extractSemanticProps(element.props, ["layout"]);
+  codeOnly("Row", element.props);
+  const semanticProps = extractSemanticProps(element.props);
   const mapped = mapSemanticProps(semanticProps, ROW_DEFAULTS, "Row");
-  const values = mergeValues(ROW_DEFAULTS, mapped);
+  const valuesWithMeta = pxMerged(ROW_DEFAULTS, mapped) as Record<string, any>;
 
   // Add cells, columns flag, editor flags, and _meta
-  const valuesWithMeta = {
-    ...values,
-    columns: values.columns ?? false,
-    cells,
-    _meta: {
-      htmlID: id,
-      htmlClassNames: "u_row",
-      ...(values._meta || {}),
-    },
-    selectable: true,
-    draggable: true,
-    duplicatable: true,
-    deletable: true,
-    hideable: true,
-  };
+  valuesWithMeta.columns = valuesWithMeta.columns ?? false;
+  valuesWithMeta.cells = pxZeros(cells);
+  valuesWithMeta._meta = { htmlID: id, htmlClassNames: "u_row", ...(valuesWithMeta._meta || {}) };
+  Object.assign(valuesWithMeta, EDITABLE);
 
   // Process Column children
   const columns: DesignColumn[] = [];
@@ -343,25 +270,31 @@ function processRow(
     }
   }
 
-  return { cells, columns, values: valuesWithMeta };
+  return { cells: pxZeros(cells), columns, values: valuesWithMeta };
 }
 
 function processBody(
   element: React.ReactElement,
-  counters: Record<string, number>
+  counters: Record<string, number>,
+  /** The mode the root renders in (see rootMode). */
+  mode: string,
+  /** The config of the <UnlayerProvider>s around the root (see unwrap-root.ts). */
+  provided?: Partial<UnlayerConfig>
 ): DesignBody {
   const id = "u_body";
 
   // Extract semantic props for body values, then merge with defaults
+  codeOnly(getDisplayName(element) ?? "Body", element.props);
   const semanticProps = extractSemanticProps(element.props);
   const mapped = mapSemanticProps(semanticProps, BODY_DEFAULTS, "Body");
-  const values = mergeValues(BODY_DEFAULTS, mapped);
-  // Only ltr, rtl or auto, as in the HTML (a value from a request could carry anything).
-  if ("textDirection" in values) {
-    const direction = textDirectionOf((values as Record<string, unknown>).textDirection);
-    if (direction) (values as Record<string, unknown>).textDirection = direction;
-    else delete (values as Record<string, unknown>).textDirection;
-  }
+  const values = pxMerged(BODY_DEFAULTS, mapped);
+  // The direction the HTML has (its `config`, its `textDirection`, the Provider's: see rootConfig), so the editor opens
+  // the design as it renders. Only ltr, rtl or auto, as in the HTML (a value from a request could carry anything).
+  const direction = textDirectionOf(rootConfig(element.props as RootConfigProps, provided).textDirection);
+  if (direction) (values as Record<string, unknown>).textDirection = direction;
+  else delete (values as Record<string, unknown>).textDirection;
+  // The mode the HTML renders in (email, web or document), which the editor keeps and opens the design in.
+  (values as Record<string, unknown>).displayMode = mode;
 
   // `previewText` is the React alias for the schema's `preheaderText`. It is
   // excluded from the mapped values (it drives the email preview HTML at render
@@ -372,14 +305,8 @@ function processBody(
   }
 
   // Add _meta
-  const valuesWithMeta = {
-    ...values,
-    _meta: {
-      htmlID: id,
-      htmlClassNames: "u_body",
-      ...(values._meta || {}),
-    },
-  };
+  const valuesWithMeta = values as Record<string, any>;
+  valuesWithMeta._meta = { htmlID: id, htmlClassNames: "u_body", ...(valuesWithMeta._meta || {}) };
 
   // Process Row children
   const rows: DesignRow[] = [];
@@ -402,6 +329,21 @@ function processBody(
   } as DesignBody;
 }
 
+/**
+ * A root's `fonts` (stylesheets its HTML links) in the design, as a <Font>'s are: each URL on the design's fonts of
+ * the families it names (see urlFamilies), so the editor loads it too. One that names no family the design has a font
+ * of is said (its start, for a long one): the HTML loads it, the editor doesn't.
+ */
+function rootFonts(element: React.ReactElement, name: string, body: DesignBody): void {
+  for (const font of (element.props as { fonts?: Array<{ url?: unknown }> }).fonts ?? []) {
+    if (!font?.url) continue;
+    const url = safeUrl(String(font.url));
+    let held = false;
+    for (const family of urlFamilies(url)) held = fontUrlInDesign(family, url, body) || held;
+    if (!held) sayOnce(`[Unlayer] ${name} \`fonts\` URL ${url.length > 80 ? `${url.slice(0, 79)}…` : url} is kept in HTML but not in the design for the visual editor: it names no family (\`family=\`) that a \`fontFamily\` in the design has. <Font family url default> ("@unlayer/react-elements/font") makes a font the template's in both.`);
+  }
+}
+
 // ============================================
 // Public API
 // ============================================
@@ -439,7 +381,7 @@ function processBody(
  *
  * @param element - A React element tree with Row > Column > Item structure
  * @returns A DesignRow object compatible with the Unlayer block editor
- * @throws {Error} If the element is not a `<Row>`
+ * @throws {Error} If the element is not a `<Row>`, or its Columns don't fit its `layout` (it's left out)
  *
  * @example
  * ```tsx
@@ -466,23 +408,55 @@ export function renderRowToJson(element: React.ReactElement): DesignRow {
   }
 
   const counters: Record<string, number> = {};
-  // A render of its own, as renderToJson's: the same row gives the same ids every time. React renders what's in it.
-  return withRenderScope(() => processRow(normalizedChildren(element).find((c): c is React.ReactElement => React.isValidElement(c)) ?? element, counters));
+  // A render of its own, as renderToJson's: the same row gives the same ids every time. What's in it is collected.
+  return withOwnScope(() => {
+    const row = normalizedChildren(element, undefined, "Row").find((c): c is React.ReactElement => React.isValidElement(c));
+    // Left out (its Columns don't fit its layout), it's no row.
+    if (!row) throw new Error("[Unlayer] renderRowToJson: the Row is left out.");
+    return processRow(row, counters);
+  });
+}
+
+/** renderToJson's options. */
+export interface RenderToJsonOptions {
+  /** What a part of the template that fails does (see UnlayerConfig's `onError`), over the root's config's. */
+  onError?: UnlayerConfig["onError"];
+  /** What the template's `useId()`s start with (see UnlayerConfig's `idPrefix`), over the root's config's. */
+  idPrefix?: UnlayerConfig["idPrefix"];
 }
 
-export function renderToJson(element: React.ReactElement): DesignJSON {
-  return withRenderScope(() => designJson(element));
+export function renderToJson(element: React.ReactElement, options?: RenderToJsonOptions): DesignJSON {
+  return withOwnScope(() => designJson(element, options));
 }
 
-function designJson(element: React.ReactElement): DesignJSON {
+/** renderToJson in the render's scope (the async renderers' too, which collected the template in it). */
+export function designJson(element: React.ReactElement, options?: RenderToJsonOptions): DesignJSON {
   // Accept a user wrapper component (e.g. <MyEmail/>) by unwrapping to its root,
   // matching renderToHtml which renders wrappers through React.
-  element = unwrapForJson(element);
-  const displayName = getDisplayName(element);
-  // One React render collects the rows and blocks (as the HTML does).
-  if (displayName && ROOT_NAMES.has(displayName)) element = normalizedRoot(element);
+  element = unwrapForJson(element, options?.idPrefix);
+  // The config of the <UnlayerProvider>s around it (the design keeps its direction), read before it's copied below.
+  const provided = providedConfig(element);
+  // (Of any copy of Elements: see root-type.ts.)
+  const displayName = rootName(element.type);
+  // (Email, Page or Document's, read before it's copied below.)
+  const mode = rootMode(element, rootConfig(element.props as RootConfigProps, provided));
+  // One walk collects the rows and blocks (as the HTML does).
+  let heads: Recorded[] = [];
+  if (displayName) {
+    const config = rootConfig(element.props as RootConfigProps, provided, options);
+    const policy = config.onError;
+    setRenderConfig(config);
+    // Where failed parts are left out (`onError: "omit"`), its body is rendered as its HTML is, so a row or block whose
+    // exporter fails is left out of the design too. Otherwise nothing renders its HTML: an exporter that fails
+    // fails renderToHtml, which then gives nothing to disagree with.
+    if (omits(policy)) renderBody(element, options, "renderToJson");
+    // What its content gives the head and the design can't hold (a <Head>'s tags): said.
+    heads = collect((element.props as { children?: React.ReactNode }).children, displayName).recorded.filter((r) => r.kind === "head");
+    for (const r of heads) if (r.kind === "head" && r.json) sayOnce(r.json);
+    element = normalizedRoot(element, mode);
+  }
 
-  if (!displayName || !ROOT_NAMES.has(displayName)) {
+  if (!displayName) {
     throw new Error(
       `[Unlayer] renderToJson: Root element must be <Body>, <Email>, <Page>, or <Document>, ` +
         `but got <${componentName(element) || "unknown"}>. ` +
@@ -498,8 +472,12 @@ function designJson(element: React.ReactElement): DesignJSON {
   // For Email/Page/Document, the children and semantic props are on the
   // wrapper element directly, same as Body.
   const counters: Record<string, number> = {};
-  const body = processBody(element, counters);
+  const body = processBody(element, counters, mode, provided);
+  // What its content gives the design (a <Font>'s URL, on the fonts of its family), then its `fonts` prop.
+  for (const r of heads) if (r.kind === "head") r.design?.(body);
+  rootFonts(element, displayName, body);
 
+  // (Its values are copies, bare zeros in their px lengths written `0px`: see pxMerged.)
   return {
     counters,
     body,
diff --git a/packages/react/src/utils/render-to-plaintext.test.tsx b/packages/react/src/utils/render-to-plaintext.test.tsx
index 4a38aa43..8f0b264f 100644
--- a/packages/react/src/utils/render-to-plaintext.test.tsx
+++ b/packages/react/src/utils/render-to-plaintext.test.tsx
@@ -1,6 +1,9 @@
 import { describe, it, expect } from "vitest";
 import React from "react";
-import { renderToPlainText, renderToHtmlParts } from "./render-to-html";
+import { renderToPlainText, renderToHtmlParts, renderToHtml } from "./render-to-html";
+import { renderToJson } from "./render-to-json";
+import { Email, Html, Link, Menu, Social, Table, Video, toPlainText, type PlainTextOptions } from "../index";
+import { Markdown } from "../markdown";
 import Body from "../components/Body";
 import Row from "../components/Row";
 import { Column } from "../components/Column";
@@ -10,6 +13,56 @@ import Heading from "../components/Heading";
 import Image from "../components/Image";
 
 describe("renderToPlainText", () => {
+  it("keeps text whose entities spell the plain text's placeholders (`&#1;0&#1;`) as 0.2.1 wrote it, not a URL or code", () => {
+    const text = renderToPlainText(
+      <Email>
+        <Row>
+          <Column>
+            <Html html="<pre>API_KEY=secret</pre>" />
+            <Paragraph>{"Name: &#1;0&#1; &#0;0&#0;"}</Paragraph>
+            <Button href="https://e.test/verify?t=XYZ">Verify</Button>
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(text).toBe("API_KEY=secret\n\nName: \u00010\u0001 \u00000\u0000\n\nVerify (https://e.test/verify?t=XYZ)");
+  });
+
+  it("leaves out a link's URL React blocks (`javascript:` from data), as inline links without one are", () => {
+    const blocked = "javascript:alert(1)";
+    const text = renderToPlainText(
+      <Email>
+        <Row>
+          <Column>
+            <Button href={blocked}>Pay now</Button>
+            <Menu items={[{ text: "Home", href: blocked }]} />
+            <Social icons={[{ name: "Facebook", url: blocked }]} />
+            <Paragraph>
+              Go <Link href={blocked}>there</Link>
+            </Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(text).not.toContain("javascript");
+    expect(text).toBe("Pay now\n\nHome\n\nGo there");
+  });
+
+  it("keeps text that spells the plain text's placeholders as written, not a button's URL", () => {
+    // `\u00010\u0001` beside a Button was that button's URL (a reset link's token); 0.2.1 kept it.
+    const text = renderToPlainText(
+      <Email>
+        <Row>
+          <Column>
+            <Paragraph>{"Name: \u00010\u0001"}</Paragraph>
+            <Button href="https://e.test/reset?token=SECRET">Reset password</Button>
+          </Column>
+        </Row>
+      </Email>
+    );
+    expect(text).toBe("Name: \u00010\u0001\n\nReset password (https://e.test/reset?token=SECRET)");
+  });
+
   it("extracts text from a Paragraph", () => {
     const text = renderToPlainText(
       <Body>
@@ -146,4 +199,166 @@ describe("renderToHtmlParts", () => {
     expect(body).toContain("Web mode");
     expect(typeof head).toBe("string");
   });
+
+  describe("options and what's left out", () => {
+    const email = (
+      <Body>
+        <Row>
+          <Column>
+            <Heading>Your order</Heading>
+            <Paragraph html='Track it <a href="https://example.com/t">here</a>.' />
+            <Button href="https://example.com/o" skipInText>View order</Button>
+            <Paragraph skipInText>Sent by Example</Paragraph>
+          </Column>
+        </Row>
+      </Body>
+    );
+
+    it("leaves out a block with `skipInText`, in the text only", () => {
+      expect(renderToPlainText(email)).toBe("YOUR ORDER\n\nTrack it here (https://example.com/t).");
+      const { body } = renderToHtmlParts(email);
+      expect(body).toContain("View order");
+      expect(body).toContain("Sent by Example");
+    });
+
+    it("takes the text's options", () => {
+      expect(renderToPlainText(email, { links: "after", uppercaseHeadings: false })).toBe("Your order\n\nTrack it here [1].\n\n[1] https://example.com/t");
+      expect(renderToPlainText(email, { skip: ["h1"], links: "none" })).toBe("Track it here.");
+    });
+
+    it("writes a link in a display condition or a repeated table where it is, with links listed after the text", () => {
+      // Listed after the text, a conditional row's link was in every recipient's text, and a loop's links one
+      // placeholder after it.
+      const vip = (
+        <Email>
+          <Row values={{ displayCondition: { before: "{% if vip %}", after: "{% endif %}" } }}><Column><Button href="https://shop.test/vip">Redeem</Button></Column></Row>
+          <Row><Column><Paragraph html={'<a href="https://x.test">Other</a>'} /></Column></Row>
+        </Email>
+      );
+      expect(renderToPlainText(vip, { links: "after" })).toBe("{% if vip %}\n\nRedeem (https://shop.test/vip)\n\n{% endif %}\n\nOther [1]\n\n[1] https://x.test");
+      const mergeTags = { products: { name: "Products", rules: { repeat: { name: "Repeat", before: "{{#products}}", after: "{{/products}}" } } } };
+      const items = <Email><Row><Column><Table headers={["Item"]} data={[['<a href="{{url}}">{{name}}</a>']]} values={{ mergeTagGroup: "products", mergeTagRule: "repeat" }} /></Column></Row></Email>;
+      expect(renderToPlainText(items, { links: "after", mergeTagState: { mergeTags, mergeTagGroup: "products", mergeTagRule: "repeat" } } as never)).toMatch(/\{\{#products\}\}[\s\S]*\{\{name\}\} \(\{\{url\}\}\)[\s\S]*\{\{\/products\}\}$/);
+      // The HTML has no mark of it.
+      expect(renderToHtml(vip)).not.toMatch(/[\u000e\u000f]/);
+    });
+
+    it("writes any HTML as text with toPlainText, as it writes a template's", () => {
+      expect(toPlainText(renderToHtml(email), { links: "none" })).toBe("YOUR ORDER\n\nTrack it here.");
+      expect(toPlainText("<p>A</p><p>B</p>")).toBe("A\nB");
+    });
+  });
 });
+
+describe("every link's URL in the plain text", () => {
+  // URLs of random parts (a fixed seed): capitals, a query with `&`, a quote, parentheses, percent escapes …
+  const r = random(Number(process.env.LINKS_SEED ?? 20261018));
+  const pick = <T,>(list: readonly T[]): T => list[Math.floor(r() * list.length)];
+  const PARTS = ["Pay", "a1", "it's", "(v2)", "%20x", "~me", "a+b", "x,y", "k=v;w", "Z!", "*", "$5", "@t", "a:b", "-_."];
+  /** The URLs the template has placed, each once. */
+  let placed: string[] = [];
+  const url = (where: string) => {
+    placed.push(`https://example.com/${where}/${Array.from({ length: 1 + Math.floor(r() * 3) }, () => pick(PARTS)).join("/")}${r() < 0.5 ? `?q=${pick(PARTS)}&b=2` : ""}${r() < 0.3 ? "#Top" : ""}`);
+    return placed[placed.length - 1];
+  };
+  /** A URL in a `"` attribute (Markdown's are written `<…>`). */
+  const attr = (u: string) => u.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+
+  /** Every block and place a link can be in, with new URLs; a `promo` class or `data-skip-in-text` around a link leaves it out. */
+  const template = () => {
+    const a = (where: string, text = "go") => `<a href="${attr(url(where))}">${text}</a>`;
+    const md = (where: string, text = "go") => `[${text}](<${url(where)}>)`;
+    return (
+      <Email>
+        <Row>
+          <Column>
+            <Paragraph html={`Read ${a("paragraph", "the guide")} and ${a("paragraph-2", "the FAQ")}.`} />
+            <Paragraph>
+              See <Link href={url("paragraph-link")}>this</Link>
+            </Paragraph>
+            {(["h1", "h2", "h3", "h4", "h5", "h6"] as const).map((level) => (
+              <Heading key={level} level={level} text={`Pay ${a(`heading-${level}`, "your invoice")}`} />
+            ))}
+            <Heading level="h2">
+              Hi <Link href={url("heading-link")}>there</Link>
+            </Heading>
+            <Button href={url("button")}>Open</Button>
+            <Menu items={[{ text: "Home", href: url("menu") }, { text: "Blog", href: url("menu-2") }]} />
+            <Image src="https://example.com/logo.png" alt="Logo" action={url("image")} />
+            <Table headers={[a("table-header", "Plan")]} data={[[a("table-cell", "Pro"), `${a("table-cell-2", "A")} ${a("table-cell-3", "B")}`]]} />
+            <Social icons={[{ name: "facebook", url: url("social") }, { name: "x", url: url("social-2") }]} />
+            <Video videoUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+            <Html
+              html={`<p>${a("html")}</p><ul><li>${a("html-li")}</li></ul><table><tr><td>${a("html-td")}</td></tr></table><pre>run ${a("html-pre", "this")}</pre><h1>${a("html-h1", "Top")}</h1><div class="promo">${a("html-promo")}</div><div data-skip-in-text="true">${a("html-skipped")}</div>`}
+            />
+            <Paragraph skipInText html={a("skip-in-text")} />
+            <Markdown>
+              {[
+                ...[1, 2, 3, 4, 5, 6].map((n) => `${"#".repeat(n)} ${md(`markdown-h${n}`, "Pay invoice")}`),
+                `# <${url("markdown-autolink")}>`,
+                `A ${md("markdown-paragraph")}, **${md("markdown-bold")}**, *${md("markdown-italic")}*, ${md("markdown-code", "`npm i`")} and ${md("markdown-last")}.`,
+                `- ${md("markdown-li")}\n  - ${md("markdown-li-nested")}\n1. ${md("markdown-ol")}`,
+                `> ${md("markdown-quote")}\n>\n> > ${md("markdown-quote-nested")}`,
+                `| Plan | Link |\n| --- | --- |\n| Pro | ${md("markdown-cell")} |`,
+                `[![Logo](https://example.com/logo.png)](<${url("markdown-image")}>)`,
+                `<div><a href="${attr(url("markdown-html"))}">raw</a></div>`,
+              ].join("\n\n")}
+            </Markdown>
+          </Column>
+        </Row>
+      </Email>
+    );
+  };
+
+  /** Each `href` in the HTML, as the browser reads it; its link's text; and whether the text leaves it out. */
+  const links = (html: string, skip: string[] = []) =>
+    [...new DOMParser().parseFromString(html, "text/html").querySelectorAll("[href]")].map((element) => ({
+      href: element.getAttribute("href")!,
+      text: element.textContent!.trim(),
+      left: !!element.closest(['[data-skip-in-text="true"]', ...skip].join(",")),
+    }));
+  /** The URLs in the design: in its HTML, or a value of their own (a button's, a menu item's, an icon's). */
+  const designed = (value: unknown): string[] =>
+    typeof value === "string" ? (/<a\s/i.test(value) ? links(value).map((link) => link.href) : [value]) : value && typeof value === "object" ? Object.values(value).flatMap(designed) : [];
+
+  const OPTIONS: PlainTextOptions[] = [{}, { links: "after" }, { links: "none" }, { uppercaseHeadings: false, wordwrap: 30, skip: [".promo"] }, { links: "after", wordwrap: 30, skip: [".promo"] }];
+
+  it("has each, in each `links` mode, as written: unless a block's `skipInText`, `data-skip-in-text` or `skip` leaves it out", () => {
+    const bad: string[] = [];
+    for (let run = 0; run < 4; run++) {
+      placed = [];
+      const email = template();
+      const { body } = renderToHtmlParts(email);
+      const design = new Set(designed(renderToJson(email)));
+      const all = links(body);
+      // Every place above has its link in the HTML, as written, and every link in the HTML is in the design (but a block's
+      // the design leaves out).
+      for (const href of placed) if (!all.some((link) => link.href === href)) bad.push(`HTML: ${href}`);
+      for (const { href } of all) if (!design.has(href) && !/skip-in-text/.test(href)) bad.push(`design: ${href}`);
+      for (const options of OPTIONS) {
+        const text = renderToPlainText(email, options);
+        const listed = text.includes("\n\n[1] ") ? text.slice(text.lastIndexOf("\n\n[1] ") + 2).split("\n") : [];
+        for (const link of links(body, options.skip)) {
+          const where = `${JSON.stringify(options)} ${link.href}`;
+          if (link.left || (options.links === "none" && link.text !== link.href)) {
+            if (text.includes(link.href)) bad.push(`${where}: in the text`);
+          } else if (options.links === "after" && link.text !== link.href) {
+            if (!listed.some((line) => line.replace(/^\[\d+\] /, "") === link.href)) bad.push(`${where}: not listed`);
+          } else if (!text.includes(link.href)) bad.push(`${where}: not in the text`);
+        }
+      }
+    }
+    expect(bad).toEqual([]);
+  });
+});
+
+/** A seeded random number generator (mulberry32): the same inputs every run. */
+function random(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
diff --git a/packages/react/src/utils/root-content.ts b/packages/react/src/utils/root-content.ts
new file mode 100644
index 00000000..ef211e8b
--- /dev/null
+++ b/packages/react/src/utils/root-content.ts
@@ -0,0 +1,67 @@
+/**
+ * A root's content as HTML, as Body puts it in the body: collected once (src/model), markup among the rows as it is,
+ * and each Row and block rendered by Elements with the root's config and body values. A template with no root (Rows,
+ * a block, markup: see unwrap-root.ts's `Unwrapped`) is that content alone, with no body around it, so its rows
+ * are numbered and rendered as the head and the plain text read them, from the same render.
+ */
+import React from "react";
+import type { RenderMode, UnlayerConfig } from "@unlayer-internal/shared-elements";
+import { mergeValues } from "@unlayer-internal/shared-elements";
+import { renderOwn } from "../engine";
+import { childrenHtml, rootDefaults } from "../model";
+import { BODY_DEFAULTS } from "./container-defaults";
+import { cssUrl, isOwn } from "./create-component";
+import { mapSemanticProps } from "./semantic-props";
+import { setRenderConfig, withRenderScope } from "./render-scope";
+import { isTailwindError } from "./tailwind";
+import { ROOTLESS } from "./root-type";
+
+/** How Elements' own markup renders (see the engine's renderStatic). */
+export const OWN_MARKUP = { bare: isOwn, passes: isTailwindError };
+
+const Rootless = () => null;
+Rootless.displayName = ROOTLESS;
+
+/** The root a template with no root is read as (its head, its plain text): its content as the root's, in `mode`. */
+export const rootlessRoot = (content: React.ReactElement, mode: RenderMode): React.ReactElement => React.createElement(Rootless, { mode }, content);
+
+/**
+ * The content of a root (`props`, Body's, in `mode`, named `name`) as HTML: its rows and blocks rendered with
+ * `_config` (its ids counted on it) and the body's values, which the content's own defaults (a <Font default>'s
+ * family) go in, with each of `also`. A Row or block that fails and is left out (`onError: "omit"`) gives back the
+ * ids it took, so the HTML numbers as the head and design do.
+ */
+export function contentHtml(props: Record<string, any> & { children?: React.ReactNode }, config: UnlayerConfig, _config: UnlayerConfig, mode: RenderMode, name: string, values: Record<string, any>, ...also: Array<Record<string, any>>): string {
+  // A render of its own when Body is rendered straight through React (not renderToHtml).
+  return withRenderScope(() => {
+    setRenderConfig(config);
+    // What its content gives it (a <Font default>'s family), where it sets none: the body's, and its rows'.
+    const given = rootDefaults(props, name);
+    for (const target of [values, ...also]) Object.assign(target, given);
+    const ids = (_config as unknown as { __ids: Record<string, number> }).__ids;
+    const render = (child: React.ReactElement) => {
+      const before = { ...ids };
+      try {
+        // (Elements' own, which call no hooks: called as they are, no walk around them.)
+        const { html, inner } = renderOwn(child, { _config, bodyValues: values }, OWN_MARKUP);
+        return inner === undefined ? html : `<div>${inner}</div>`;
+      } catch (error) {
+        for (const key of Object.keys(ids)) if (!(key in before)) delete ids[key];
+        Object.assign(ids, before);
+        throw error;
+      }
+    };
+    return childrenHtml(props.children, render, { ...props, mode }, name);
+  });
+}
+
+/**
+ * A template with no root (`content`: what it rendered, or an Elements component or markup), as HTML: its content as
+ * a root's is, in `mode`, with the render's `config` and the body's default values, and no body around it.
+ */
+export function rootlessHtml(content: React.ReactElement, config: UnlayerConfig, mode: RenderMode): string {
+  const _config = { ...config, mode, __ids: {} } as UnlayerConfig;
+  const values: Record<string, any> = mergeValues(BODY_DEFAULTS, mapSemanticProps({}, BODY_DEFAULTS, "Body"));
+  cssUrl(values);
+  return contentHtml({ mode, children: content }, config, _config, mode, ROOTLESS, values);
+}
diff --git a/packages/react/src/utils/root-type.ts b/packages/react/src/utils/root-type.ts
new file mode 100644
index 00000000..2b79a944
--- /dev/null
+++ b/packages/react/src/utils/root-type.ts
@@ -0,0 +1,32 @@
+/**
+ * Elements' roots (Body, Email, Page, Document), of any copy of Elements, by their type. This release's and later
+ * carry ROOT, their name, shared by `Symbol.for` (a package's ESM and CommonJS builds, two installs). An older copy's
+ * (0.2.1 and before, from a package still on it) carries none: it's recognized by its name and its code, as an older
+ * copy's Rows are (see record.tsx): its Body reads the `_config` it passes its rows, and its Email, Page and Document
+ * are that Body in their mode (`{ ...props, mode: "email" }`). A component of the user's own given a root's name (a
+ * design-system wrapper, `Email.displayName = "Email"`) is neither, and is called as any component is.
+ */
+export const ROOT = Symbol.for("@unlayer/react-elements/root");
+
+/** An older copy's root, by its name: what its code has. */
+const OLDER = new Map([
+  ["Body", /\b_config\b/],
+  ["Email", /\.\.\.[\w$]+, ?mode: ?"email" ?\}/],
+  ["Page", /\.\.\.[\w$]+, ?mode: ?"web" ?\}/],
+  ["Document", /\.\.\.[\w$]+, ?mode: ?"document" ?\}/],
+]);
+
+/** The root a component type is (`"Email"`), of any copy of Elements; undefined for any other type. */
+export function rootName(type: unknown): string | undefined {
+  if (typeof type !== "function") return undefined;
+  const own = (type as unknown as Record<symbol, unknown>)[ROOT];
+  if (typeof own === "string") return own;
+  const name = (type as { displayName?: string }).displayName;
+  return name && OLDER.get(name)?.test(String(type)) ? name : undefined;
+}
+
+/** What a template with no root's content is walked as (what fails at its top is `in <template>`: see root-content.ts). */
+export const ROOTLESS = "template";
+
+/** Whether a component type is one of Elements' roots (see rootName). */
+export const isRoot = (type: unknown): boolean => !!rootName(type);
diff --git a/packages/react/src/utils/server-renderer.ts b/packages/react/src/utils/server-renderer.ts
deleted file mode 100644
index 0da5e334..00000000
--- a/packages/react/src/utils/server-renderer.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * The server renderer Elements renders with: react-dom/server, as in 0.1.22, loaded the same way and doing nothing
- * when it loads.
- *
- * react-dom keeps a render's hook state in its module, so a render started inside another one with the same module
- * breaks the hooks the outer component calls after it (a page rendered with `renderToString` that computes
- * `useMemo(() => renderToJson(<T />))` and then calls `useState`). Apps mostly render with react-dom's streaming
- * renderers, another module than the one renderToString is in, so it's rare; where it happens, Elements renders
- * with a second module of react-dom's (React 19's Bun build, the browser one, or Node's when react-dom/server is the
- * browser one), loaded then, only where a synchronous `require` can load it with the same React (Node, Jest, a
- * CommonJS bundle); elsewhere (a bundled module, a browser) it says to render first.
- * Which module a render is under way with is told by React's hooks dispatcher (each module has its own), read in a
- * class component's render: that doesn't touch the hook state of a render it's in.
- */
-import * as defaultBuild from "react-dom/server";
-
-import React from "react";
-import { collecting } from "./collect";
-
-type Build = typeof defaultBuild;
-
-// The builds rendering (an Elements render, or the app's render one is called in), innermost last, shared by every
-// copy of Elements a process loads (they share react-dom).
-const SHARED = Symbol.for("@unlayer/react-elements/render-builds");
-const using = ((globalThis as Record<symbol, unknown>)[SHARED] ??= []) as Build[];
-
-/** The same module (a bundler can wrap one in two objects). */
-const same = (a: Build, b: Build) => a.renderToString === b.renderToString;
-
-/** The hooks dispatcher of the React render under way (React sets it while a component renders), or null. */
-function dispatcher(): unknown {
-  // Each step can be missing (React Server Components' React has neither).
-  const internals = React as unknown as Record<string, { H?: unknown; ReactCurrentDispatcher?: { current?: unknown } } | undefined>;
-  return internals.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE?.H ?? internals.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentDispatcher?.current ?? null;
-}
-
-/** The dispatcher a build renders with, from a render of a class component (no hooks: safe inside its own render). */
-const dispatchers = new Map<Build, unknown>();
-function dispatcherOf(build: Build): unknown {
-  if (!dispatchers.has(build)) {
-    let seen: unknown = null;
-    try {
-      // (React Server Components' React has no Component: none of react-dom's renders is under way there.)
-      class Probe extends React.Component {
-        render() {
-          seen = dispatcher();
-          return null;
-        }
-      }
-      build.renderToStaticMarkup(React.createElement(Probe));
-    } catch {
-      // It can't render here: no dispatcher.
-    }
-    dispatchers.set(build, seen);
-  }
-  return dispatchers.get(build);
-}
-
-declare const module: { require(id: string): unknown } | undefined;
-/** Whether this is the CommonJS build (set when it's built; undefined in the sources). */
-declare const __UNLAYER_CJS__: boolean | undefined;
-
-/**
- * Another module of react-dom's than react-dom/server, loaded the first time one's needed, with a synchronous
- * `require`: the one CommonJS loads this module with (Jest's registry gives the test's React), then Node's for a
- * module (a module a bundler bundles has neither that gives its React). One that renders with this React (its
- * dispatcher is one this React sets, and not `outer`'s). React 19's Bun build first: its browser one opens a
- * MessageChannel when it loads, which keeps Node from exiting. Undefined where there's none.
- */
-let second: Build | null | undefined;
-function secondBuild(outer: unknown): Build | undefined {
-  if (second === undefined) {
-    second = null;
-    const node = (globalThis as any).process;
-    const requirers = [
-      // (`module`'s, read so that a bundler doesn't take it for a require of a path worked out when it runs.)
-      () => {
-        const own = (typeof __UNLAYER_CJS__ === "boolean" ? __UNLAYER_CJS__ : true) && typeof module === "object" ? Reflect.get(module ?? {}, "require") : undefined;
-        return typeof own === "function" ? (id: string) => own.call(module, id) : undefined;
-      },
-      // From this module's URL (as a stack names it: webpack 4 can't parse the syntax for it), the app's script, then
-      // the folder Node started in; only where `react` is this React. Another React's isn't loaded (React 19's browser
-      // build keeps Node running).
-      ...[/file:\/\/\S+?(?=:\d+:\d+)/.exec(String(new Error().stack))?.[0], node?.argv?.[1], `${node?.cwd?.()}/`].map((from) => () => {
-        const required = node?.getBuiltinModule?.("module")?.createRequire(from);
-        return (required?.("react") as typeof React | undefined)?.createElement === React.createElement ? required : undefined;
-      }),
-    ];
-    // React 19's browser build opens a MessageChannel when it loads, which keeps Node running: its Bun build instead.
-    const ids = ["react-dom/server.bun", ...(Number.parseInt(React.version) >= 19 ? [] : ["react-dom/server.browser"]), "react-dom/server.node"];
-    search: for (const id of ids) {
-      for (const requirer of requirers) {
-        try {
-          const build = requirer()?.(id) as Build | undefined;
-          if (build?.renderToStaticMarkup && !same(build, defaultBuild) && ![null, outer].includes(dispatcherOf(build))) {
-            second = build;
-            break search;
-          }
-        } catch {
-          // Not there, or it can't load here: the next one.
-        }
-      }
-    }
-  }
-  return second ?? undefined;
-}
-
-/** The build whose render is under way, of the ones Elements has: react-dom/server's, or the second one if loaded. */
-const buildOf = (outer: unknown): Build | undefined => (outer === null ? undefined : [defaultBuild, second].find((b): b is Build => !!b && dispatcherOf(b) === outer));
-
-/**
- * Runs one Elements render with a build that isn't rendering; every render it makes uses that one. Called from the
- * user's code in a render with a build it has (the app's renderToString, or a component an Elements render collects),
- * it takes another one, which mustn't be rendering either (a third level: it can't). Otherwise (no render under way,
- * the app's streaming render or a client one, or one of Elements' own renders, whose components call no hooks after)
- * it keeps the one it's in.
- */
-export function withBuild<T>(render: () => T, own = false): T {
-  const outer = own ? null : dispatcher();
-  let build = current();
-  // Elements' own component (Body, rendered by the app's react-dom/server), which calls no hooks after: the module
-  // it's in, as in 0.1.22 (a browser bundle has no other).
-  const theirs = !own && (using.length === 0 || collecting() !== undefined) ? buildOf(outer) : undefined;
-  const busy: Build[] = [];
-  if (theirs) {
-    const free = (b: Build) => !same(b, theirs) && !using.some((u) => same(u, b));
-    const other = free(defaultBuild) ? defaultBuild : secondBuild(outer);
-    // Where none renders with this React (a bundle, Next.js's own react-dom, a test runner's module registry): the
-    // module it's in, as 0.1.22 rendered there. The component calling it then can't call a hook after the call
-    // (React throws, as it did with 0.1.22's renderToHtml).
-    if (other && free(other)) {
-      busy.push(theirs);
-      build = other;
-    } else build = theirs;
-  }
-  using.push(...busy, build);
-  try {
-    return render();
-  } catch (error) {
-    // React Server Components' React (Next.js's edge runtime), which react-dom can't render with at all. (Not checked
-    // in a render of the same module, whose hooks a check would disturb.)
-    if (build !== theirs && !rendersHere(build)) throw Object.assign(new Error("[Unlayer] react-dom can't render with this React (React Server Components', as in Next.js's edge runtime): render emails in the Node.js runtime."), { cause: error });
-    throw error;
-  } finally {
-    using.length -= busy.length + 1;
-  }
-}
-
-/** Whether `build` can render a component here (one that isn't rendering, so its render disturbs none). */
-function rendersHere(build: Build): boolean {
-  try {
-    build.renderToStaticMarkup(React.createElement(() => null));
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function current(): Build {
-  return using[using.length - 1] ?? defaultBuild;
-}
-
-export const renderToStaticMarkup: Build["renderToStaticMarkup"] = (element, options) => current().renderToStaticMarkup(element, options);
-export const renderToString: Build["renderToString"] = (element, options) => current().renderToString(element, options);
diff --git a/packages/react/src/utils/tailwind.ts b/packages/react/src/utils/tailwind.ts
new file mode 100644
index 00000000..cf00a8a9
--- /dev/null
+++ b/packages/react/src/utils/tailwind.ts
@@ -0,0 +1,82 @@
+/**
+ * Scopes: a component (the Tailwind entry's <Tailwind>) whose props rewrite the props of the Elements components
+ * inside it. Its type carries the rewrite as `[TAILWIND]`; while a template is collected it records itself (with
+ * that rewrite in its props), so each Row, Column and block knows the scope it's in (see src/model/elements.ts), and a root
+ * whose content is one is rewritten by it too. The main entry knows no more of Tailwind than that.
+ */
+import React from "react";
+import { compiledTailwind, guest, rightToLeft, scopeCache } from "./render-scope";
+
+/** A scope's rewrite: on its component type, in its recorded props, and on the errors it throws (passed on as they are). */
+export const TAILWIND = Symbol.for("@unlayer/react-elements/tailwind");
+
+/**
+ * A scope's rewrite of a component's props, in the render's direction (`rtl`) and with what the render compiled
+ * (`compiled`: an async render's handles for its <Tailwind config>s, the async entry's lookup, from the render's
+ * scope), so a render the user's code starts, which has a scope of its own, doesn't find another's.
+ */
+type Rewrite = (scope: Record<PropertyKey, any>, name: string, defaults: Record<string, any> | undefined, props: Record<string, any>, rtl?: boolean, compiled?: unknown, render?: object) => Record<string, any>;
+
+/**
+ * The render's key (one per call outside a render): a scope's rewrite reads a render's classes together, its first
+ * 2,000 different ones (the Tailwind entry's `capped`), so classes from data can't take more memory than that.
+ */
+const RENDER = {};
+const renderKey = (): object => scopeCache(RENDER, () => ({}));
+
+/** On a scope's component type (the Tailwind entry's <Tailwind>): its copy's compiler, for the async renderers. */
+export const TAILWIND_LOADER = Symbol.for("@unlayer/react-elements/tailwind-loader");
+
+/** Whether an error is one a scope threw: the renderers pass it on as it is. */
+export const isTailwindError = (error: unknown): boolean => !!(error as Record<symbol, unknown> | null)?.[TAILWIND];
+
+/**
+ * A component's props as the scope it's in (its recorded props) rewrites them, in the render's direction (logical
+ * sides, `ps-4`, are the right in a right-to-left root). A Row's can hold a function under `[TAILWIND]`, which
+ * src/model/elements.ts gives the Row's children (its Columns), its props, the root's and the direction, to change
+ * (Tailwind's padding classes, which inset the content as in CSS, and text styles for the text inside); so can a
+ * Column's `style` and the root's props, for a Row without one. (Tailwind's plugins, which it may call, are the user's:
+ * see `guest`.)
+ */
+export function classProps(scope: Record<PropertyKey, any>, name: string, defaults: Record<string, any> | undefined, props: Record<string, any>): Record<string, any> {
+  const rtl = rightToLeft();
+  const compiled = compiledTailwind();
+  const render = renderKey();
+  return guest(() => (scope[TAILWIND] as Rewrite)(scope, name, defaults, props, rtl, compiled, render));
+}
+
+/**
+ * Before a scope rewrites any of a render's components: the records in it (`records`, each with its component's
+ * `props`), whose classes the scope's rewrite builds at once where it can (the Tailwind entry's `prepare`), as Tailwind
+ * builds its whole stylesheet again for each class it hasn't built.
+ */
+export function prepareClasses(scope: Record<PropertyKey, any>, records: readonly object[]): void {
+  const compiled = compiledTailwind();
+  const render = renderKey();
+  guest(() => scope[TAILWIND].prepare?.({ scope, records, compiled, render }));
+}
+
+/** The scope a root's content is in: its only child, through context providers and Fragments. */
+function tailwindIn(children: React.ReactNode): React.ReactElement<Record<PropertyKey, any>> | undefined {
+  // The elements themselves (not copies, as React.Children gives): a render asks with the same one each time.
+  const only = Array.isArray(children) ? children.filter((c) => c != null && typeof c !== "boolean") : [children];
+  const child = only.length === 1 && React.isValidElement<{ children?: React.ReactNode }>(only[0]) ? only[0] : undefined;
+  if (!child) return undefined;
+  return (child.type as unknown as Record<symbol, unknown>)?.[TAILWIND] ? (child as React.ReactElement<Record<PropertyKey, any>>) : typeof child.type === "string" ? undefined : tailwindIn(child.props.children);
+}
+
+/**
+ * A root's (Email, Page, Document, Body) props with its `className` rewritten by the scope its content is in, worked
+ * out once per render (Body and the head and design ask for the same; its settings, `mode` and `config`, aren't styles).
+ */
+export function rootProps<P extends { className?: string; children?: React.ReactNode }>(props: P, name: string): P {
+  const scope = props.className ? tailwindIn(props.children) : undefined;
+  if (!scope) return props;
+  const { children: _children, mode: _mode, config: _config, ...styles } = props as Record<string, any>;
+  // (By its props: the element itself is the children the render's collected under.)
+  const done = scopeCache(scope.props as object, () => new Map<string, Record<string, any>>());
+  const compiled = compiledTailwind();
+  const render = renderKey();
+  if (!done.has(props.className!)) done.set(props.className!, guest(() => (scope.type as unknown as Record<symbol, Rewrite>)[TAILWIND](scope.props, name, undefined, styles, undefined, compiled, render)));
+  return { ...props, ...done.get(props.className!), className: undefined };
+}
diff --git a/packages/react/src/utils/text-children.test.tsx b/packages/react/src/utils/text-children.test.tsx
index e2425a30..85ea616e 100644
--- a/packages/react/src/utils/text-children.test.tsx
+++ b/packages/react/src/utils/text-children.test.tsx
@@ -1,8 +1,10 @@
 import { describe, it, expect, vi } from "vitest";
+import { ButtonExporters } from "@unlayer/exporters";
 import React from "react";
-import { renderToHtml } from "./render-to-html";
+import { renderToHtml, renderToPlainText } from "./render-to-html";
 import { renderToJson } from "./render-to-json";
-import { Email, Page, Document, Row, Column, Heading, Button, Paragraph, Menu } from "../index";
+import { Email, Page, Document, Row, Column, Heading, Button, Paragraph, Menu, Link } from "../index";
+import { growth } from "../test-timing";
 
 // A value such as a user's name, with markup in it.
 const name = '<img src=x onerror="alert(1)"> & Co';
@@ -38,7 +40,386 @@ describe("text children of Heading and Button", () => {
     const design = renderToJson(<Email><Row><Column><Heading>{name}</Heading><Button href="#">{name}</Button></Column></Row></Email>);
     const [heading, button] = design.body.rows[0].columns[0].contents as Array<{ values: { text: string } }>;
     expect(heading.values.text).toBe("&lt;img src=x onerror=\"alert(1)\"&gt; &amp; Co");
-    expect(button.values.text).toBe(heading.values.text);
+    // A Button's `<` and `>` as numeric references: the editor's exporters unescape its text before they write it (where
+    // it has no textJson), which would make `&lt;img…&gt;` a tag in their HTML; they leave these as they are.
+    expect(button.values.text).toBe("&#60;img src=x onerror=\"alert(1)\"&#62; &amp; Co");
+    for (const mode of ["web", "email", "document"] as const) {
+      const exported = (ButtonExporters[mode] as (...args: unknown[]) => string)({ ...button.values, _meta: { htmlID: "b", htmlClassNames: "b" } }, 0, 0, [1], {}, {}, undefined, { exporterConfig: {} });
+      expect([mode, /<img/i.test(exported)]).toEqual([mode, false]);
+    }
+    // A `"` in an inline tag's attribute too (`&quot;`, which unescaping would make one that ends the value).
+    const designed = (child: React.ReactNode) => renderToJson(<Email><Row><Column><Button href="#">{child}</Button></Column></Row></Email>).body.rows[0].columns[0].contents[0].values as Record<string, unknown>;
+    for (const values of [designed(<span title={'x" data-injected="1'}>Go</span>), designed(<span style={{ fontFamily: '"Inter", sans-serif' }}>Go</span>)]) {
+      for (const mode of ["web", "email"] as const) {
+        const exported = (ButtonExporters[mode] as (...args: unknown[]) => string)({ ...values, _meta: { htmlID: "b", htmlClassNames: "b" } }, 0, 0, [1], {}, {}, undefined, { exporterConfig: {} });
+        const doc = new DOMParser().parseFromString(exported, "text/html");
+        expect([mode, !!doc.querySelector("[data-injected]"), [...doc.querySelectorAll("span")].some((el) => el.title === 'x" data-injected="1' || /"Inter"/.test(el.style.fontFamily))]).toEqual([mode, false, true]);
+      }
+    }
+  });
+});
+
+describe("rich text children of Paragraph, Heading and Button", () => {
+  const Locale = React.createContext("en");
+  // As react-intl's <FormattedMessage> or react-i18next's <Trans>: a component that reads context and returns text.
+  const Message = ({ id }: { id: string }) => <>{React.useContext(Locale) === "es" ? `Hola ${id}` : `Hello ${id}`}</>;
+  const Name = () => <strong>Ada &amp; co</strong>;
+  const content = (
+    <>
+      <Paragraph>
+        Hello <strong>world</strong>, read{" "}
+        <a href="https://example.com/a?b=1&c=2" target="_blank" rel="noopener" title={'Say "hi"'} style={{ color: "#2563eb" }} onClick={() => {}}>
+          this <em>now</em>
+        </a>
+        .<br />
+        Next <span style={{ fontWeight: 700 }}>line</span> with <u>u</u>, <s>s</s>, <i>i</i>, <b>b</b>, <code>c</code>, x<sup>2</sup>, H<sub>2</sub>O, <small>small</small>, <mark>mark</mark>
+        {[" and ", <Name key="n" />]}
+      </Paragraph>
+      <Heading>
+        <Message id="Ada" /> <a href="javascript:alert(1)">x</a> <a href={"java\nscript:alert(1)"}>y</a> <span style={{ background: "url(javascript:alert(1))" }}>z</span>
+      </Heading>
+      <Button href="https://example.com">
+        Buy <em>now</em> {"<%first_name%>"}
+      </Button>
+      <Paragraph>
+        Not a block: <div>inside a div</div>
+        <table><tbody><tr><td>a cell</td></tr></tbody></table>
+        <img src="https://example.com/x.png" alt="x" />
+      </Paragraph>
+    </>
+  );
+  const email = (
+    <Locale.Provider value="es">
+      <Email>
+        <Row>
+          <Column>{content}</Column>
+        </Row>
+      </Email>
+    </Locale.Provider>
+  );
+  const RICH =
+    'Hello <strong>world</strong>, read <a href="https://example.com/a?b=1&amp;c=2" target="_blank" rel="noopener" title="Say &quot;hi&quot;" style="color:#2563eb">this <em>now</em></a>.<br/>Next <span style="font-weight:700">line</span> with <u>u</u>, <s>s</s>, <i>i</i>, <b>b</b>, <code>c</code>, x<sup>2</sup>, H<sub>2</sub>O, <small>small</small>, <mark>mark</mark> and <strong>Ada &amp; co</strong>';
+
+  it("keep their inline formatting in the design, components (with their context) rendered", () => {
+    const [paragraph, heading, button, blocks] = renderToJson(email).body.rows[0].columns[0].contents as Array<{ values: { text: string } }>;
+    expect(paragraph.values.text).toBe(RICH);
+    // What could run code goes: javascript: URLs (also split by a line break) and CSS that loads one; handlers aren't written.
+    expect(heading.values.text).toBe("Hola Ada <a>x</a> <a>y</a> <span>z</span>");
+    expect(button.values.text).toBe("Buy <em>now</em> <%first_name%>");
+    // No block gets into text: only the text of a div, a table or an image stays.
+    expect(blocks.values.text).toBe("Not a block: inside a diva cell");
+  });
+
+  it("render the same HTML, and plain text with links as text (url)", () => {
+    const html = renderToHtml(email);
+    // (In an email the editor's text block gives sub- and superscripts `line-height: 0` inline, as it exports them.)
+    expect(html).toContain(RICH.replace(/<(sub|sup)>/g, '<$1 style="line-height: 0;">'));
+    expect(html).toContain("Hola Ada <a>x</a>");
+    expect(html).not.toMatch(/javascript:|onclick|<div>inside|<img src="https:\/\/example.com\/x.png"/i);
+    const text = renderToPlainText(email);
+    expect(text).toContain("Hello world, read this now (https://example.com/a?b=1&c=2).\nNext line with u, s, i, b, c, x2, H2O, small, mark and Ada & co");
+  });
+
+  it("take a <Link>: its target and rel kept, in the HTML and the design", () => {
+    const linked = (
+      <Email><Row><Column>
+        <Paragraph>Read <Link href="https://example.com/docs">the docs</Link> or <Link href="https://example.com/faq" target="_self" title="FAQ">the FAQ</Link>.</Paragraph>
+      </Column></Row></Email>
+    );
+    const written = 'Read <a href="https://example.com/docs" target="_blank" rel="noopener">the docs</a> or <a href="https://example.com/faq" target="_self" title="FAQ">the FAQ</a>.';
+    expect(renderToHtml(linked)).toContain(written);
+    expect(renderToJson(linked).body.rows[0].columns[0].contents[0].values.text).toBe(written);
+    expect(renderToPlainText(linked)).toBe("Read the docs (https://example.com/docs) or the FAQ (https://example.com/faq).");
+  });
+
+  it("keep a class (a <Link>'s className, a span's), for a stylesheet of yours, in the HTML and the design", () => {
+    const sale = '<a href="/sale" target="_blank" rel="noopener" style="color:#e11d48" class="mobile-link &quot;x&quot;">the offer</a>';
+    const classed = (
+      <Email><Row><Column>
+        <Paragraph>Read <Link href="/sale" style={{ color: "#e11d48" }} className={'mobile-link "x"'}>the offer</Link> <span className="note">now</span></Paragraph>
+        <Heading>Hi <Link href="/sale" className="mobile-link">there</Link></Heading>
+        <Button href="/buy">Buy <span className="mobile-label">now</span></Button>
+        <Link href="/sale" className="mobile-link">the offer</Link>
+      </Column></Row></Email>
+    );
+    const texts = [
+      `Read ${sale} <span class="note">now</span>`,
+      'Hi <a href="/sale" target="_blank" rel="noopener" class="mobile-link">there</a>',
+      'Buy <span class="mobile-label">now</span>',
+    ];
+    const html = renderToHtml(classed);
+    for (const text of texts) expect(html).toContain(text);
+    const [paragraph, heading, button, solo] = renderToJson(classed).body.rows[0].columns[0].contents as Array<{ type: string; values: { text: string } }>;
+    expect([paragraph, heading, button].map((c) => c.values.text)).toEqual(texts);
+    // A <Link> on its own is still a Paragraph holding it, its class kept, not an HTML block.
+    expect(solo.type).toBe("text");
+    expect(solo.values.text).toBe('<a href="/sale" target="_blank" rel="noopener" class="mobile-link">the offer</a>');
+    // The plain text's `skip` finds it by its class.
+    expect(renderToPlainText(classed, { skip: [".note", ".mobile-label"] })).not.toMatch(/\bnow\b/);
+  });
+
+  it("say which component in them can't render (async or suspending), naming it; left out, keep the rest", () => {
+    const Later = async () => "never";
+    const email = <Email><Row><Column><Paragraph>Hi <Later /> <b>there</b></Paragraph></Column></Row></Email>;
+    expect(() => renderToJson(email)).toThrow(/^\[Unlayer\] it is async or suspends.* \(in <Later> at Row 1 › Column 1 › Paragraph › Later\)$/);
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const json = renderToJson(email, { onError: "omit" });
+      expect(json.body.rows[0].columns[0].contents[0].values.text).toBe("Hi  <b>there</b>");
+      expect(error.mock.calls.map((c) => String(c[0]))).toEqual([expect.stringMatching(/^\[Unlayer\] Left out: it is async or suspends.*<Later>/)]);
+    } finally {
+      error.mockRestore();
+    }
+  });
+
+  it("clean a component's HTML in a <Link> on its own in a Column as a Paragraph's, and keep a linked image, cleaned too", () => {
+    // A <Link> alone is a Paragraph holding it; where cleaning took a tag out, its markup was kept as it was, as an HTML
+    // block, a component's own HTML in it too (which can be any HTML).
+    const Raw = ({ html }: { html: string }) => <span dangerouslySetInnerHTML={{ __html: html }} />;
+    for (const Root of [Email, Page]) {
+      // Also a Link through a component of yours (a design system's), memo or forwardRef.
+      const Memo = React.memo(Link);
+      const Forwarded = React.forwardRef<HTMLAnchorElement, { children: React.ReactNode }>(({ children }, _ref) => <Link href="https://example.com">{children}</Link>);
+      const Cta = ({ children }: { children: React.ReactNode }) => <Link href="https://example.com">{children}</Link>;
+      for (const [raw, made] of ['<b onclick="x()">bold</b>', '<a href="javascript:x()">x</a>'].flatMap((raw) => [
+        [raw, (children: React.ReactNode) => <Link href="https://example.com">{children}</Link>],
+        [raw, (children: React.ReactNode) => <Memo href="https://example.com">{children}</Memo>],
+        [raw, (children: React.ReactNode) => <Forwarded>{children}</Forwarded>],
+        [raw, (children: React.ReactNode) => <Cta>{children}</Cta>],
+        // Returned in a Fragment, an array, StrictMode or a context's provider, which render no markup of their own.
+        [raw, (children: React.ReactNode) => { const Wrapped = () => <><Link href="https://example.com">{children}</Link></>; return <Wrapped />; }],
+        [raw, (children: React.ReactNode) => { const Listed = () => [<Link key="l" href="https://example.com">{children}</Link>]; return <Listed />; }],
+        [raw, (children: React.ReactNode) => { const Strict = () => <React.StrictMode><Link href="https://example.com">{children}</Link></React.StrictMode>; return <Strict />; }],
+        [raw, (children: React.ReactNode) => { const Theme = React.createContext("x"); const Provided = () => <Theme.Provider value="y"><Link href="https://example.com">{children}</Link></Theme.Provider>; return <Provided />; }],
+      ] as const)) {
+        const link = made(<>Shop <Raw html={raw} /></>);
+        const alone = <Root><Row><Column>{link}</Column></Row></Root>;
+        const held = <Root><Row><Column><Paragraph>{link}</Paragraph></Column></Row></Root>;
+        const [block] = renderToJson(alone).body.rows[0].columns[0].contents as Array<{ type: string; values: { text: string } }>;
+        expect(block.type).toBe("text");
+        expect(block.values.text).toBe((renderToJson(held).body.rows[0].columns[0].contents[0] as { values: { text: string } }).values.text);
+        expect(renderToHtml(alone)).not.toMatch(/onclick="|javascript:x/);
+      }
+      // A logo's link: its image kept, as it is; one a component writes, cleaned (its handler left out).
+      const logo = (image: React.ReactNode) => renderToJson(<Root><Row><Column><Link href="https://example.com">{image}</Link></Column></Row></Root>).body.rows[0].columns[0].contents[0] as { type: string; values: { html: string } };
+      expect(logo(<img src="https://example.com/logo.png" alt="Logo" width={120} />)).toMatchObject({ type: "html", values: { html: '<a href="https://example.com" target="_blank" rel="noopener"><img src="https://example.com/logo.png" alt="Logo" width="120"/></a>' } });
+      expect(logo(<Raw html={'<img src="https://example.com/logo.png" onerror="x()">'} />).values.html).toBe('<a href="https://example.com" target="_blank" rel="noopener"><span><img src="https://example.com/logo.png"/></span></a>');
+    }
+  });
+
+  it("leave out a URL that runs code however its characters are written: references, control characters, in markup given as HTML", () => {
+    const hostile = [
+      '<a href="&#106;avascript:alert(1)">a</a>',
+      '<a href="javascript&colon;alert(1)">b</a>',
+      '<a href="javascript&#58;alert(1)">c</a>',
+      '<a href="&#x6A;avascript&#x3A;alert(1)">d</a>',
+      '<a href="java&Tab;script:alert(1)">e</a>',
+      '<a href="&#0000106avascript&#58alert(1)">f</a>',
+      '<a href=" &#x0A;vbscript&colon;msgbox(1)">g</a>',
+      '<a href="&#100;ata:text/html,x">h</a>',
+      '<span style="width: expression&lpar;alert(1))">i</span>',
+    ].join(" ");
+    const template = (
+      <Email>
+        <Row>
+          <Column>
+            {/* Markup a component of yours writes as HTML (dangerouslySetInnerHTML), and a URL given as a string, which React escapes. */}
+            <Paragraph>
+              Hi <span dangerouslySetInnerHTML={{ __html: hostile }} /> <a href={"&#106;avascript:x"}>kept</a>
+            </Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    );
+    const html = renderToHtml(template);
+    const text = (renderToJson(template).body.rows[0].columns[0].contents[0].values as { text: string }).text;
+    for (const markup of [html, text]) {
+      const doc = new DOMParser().parseFromString(markup, "text/html");
+      const urls = [...doc.querySelectorAll("a[href]")].map((a) => a.getAttribute("href")!.replace(/[\u0000- ]/g, ""));
+      // The one a string gave stays text, as the browser reads it (`&#106;avascript:x`, a relative URL).
+      expect(urls).toEqual(["&#106;avascript:x"]);
+      expect([...doc.querySelectorAll("[style]")].map((e) => e.getAttribute("style")).filter((s) => /expression/i.test(s!))).toEqual([]);
+      expect(doc.body.textContent).toMatch(/a b c d e f g h i/);
+    }
+    expect(text).toContain('<span><a>a</a> <a>b</a> <a>c</a> <a>d</a> <a>e</a> <a>f</a> <a>g</a> <a>h</a> <span>i</span></span> <a href="&amp;#106;avascript:x">kept</a>');
+  });
+
+  it("give only rich text's own elements and attributes for any markup a component writes (random, seeded)", () => {
+    const Markup = ({ html }: { html: string }) => <span dangerouslySetInnerHTML={{ __html: html }} />;
+    const pieces = ["<", ">", "</", "/", "<b>", "</b>", "<i>", "<div>", "</div>", "<img", "<svg", "<a", "<span", " ", "=", '"', "'", "x", "on", "load", "error", "src", "href", "title", "style", "&lt;", "&gt;", "&quot;", "<%", "%>", "<!--", "-->", "\n"];
+    const allowed = new Set(["strong", "b", "em", "i", "u", "s", "a", "br", "span", "code", "sup", "sub", "small", "mark"]);
+    let seed = 11;
+    const random = (n: number) => ((seed = (Math.imul(seed, 1103515245) + 12345) >>> 0), Math.floor((seed / 2 ** 32) * n));
+    const bad: string[] = [];
+    for (let run = 0; run < 400; run++) {
+      let markup = "";
+      for (let i = 0, n = 2 + random(14); i < n; i++) markup += pieces[random(pieces.length)];
+      const template = <Email><Row><Column><Paragraph>Hi <Markup html={markup} /> there</Paragraph></Column></Row></Email>;
+      const text = String(renderToJson(template).body.rows[0].columns[0].contents[0].values.text);
+      const doc = new DOMParser().parseFromString(`<div>${text}</div>`, "text/html");
+      for (const el of doc.body.firstElementChild!.querySelectorAll("*")) {
+        const odd = !allowed.has(el.tagName.toLowerCase()) || [...el.attributes].some((a) => !/^(style|title|class|href|target|rel)$/.test(a.name));
+        if (odd) bad.push(JSON.stringify(markup));
+      }
+    }
+    expect(bad).toEqual([]);
+  });
+
+  it("keep a kept attribute whole when its value holds a `<` or `>` beside quote references, so their quotes stay its own", () => {
+    const Markup = ({ html }: { html: string }) => <span dangerouslySetInnerHTML={{ __html: html }} />;
+    const values = ['&quot; onmouseover=x a=<', "&quot; onclick=x b=>", "a &lt; b &quot; onfocus=x <"];
+    for (const value of values) {
+      for (const Root of [Email, Page]) {
+        const markup = `<span title="${value}">hi</span> <a href="https://example.com" title="${value}">x</a>`;
+        const template = (
+          <Root><Row><Column>
+            <Paragraph>Review: <Markup html={markup} /></Paragraph>
+            <Heading>Review: <Markup html={markup} /></Heading>
+            <Button href="https://example.com">Go <Markup html={markup} /></Button>
+          </Column></Row></Root>
+        );
+        const texts = renderToJson(template).body.rows[0].columns[0].contents.map((c: any) => String(c.values.text));
+        for (const html of [renderToHtml(template), ...texts]) {
+          const doc = new DOMParser().parseFromString(html, "text/html");
+          expect([...doc.querySelectorAll("*")].flatMap((e) => [...e.attributes].map((a) => a.name)).filter((name) => /^on/i.test(name))).toEqual([]);
+        }
+      }
+    }
+  });
+
+  it("leave out a comment, one left open too, so it can't hide the rest of the email", () => {
+    const Markup = ({ html }: { html: string }) => <span dangerouslySetInnerHTML={{ __html: html }} />;
+    for (const markup of ["Nice <!-- hidden", "Nice <!-- note --> shoes", "Nice <!--> shoes", "Nice <!x> shoes", "Nice <?x> shoes", "Nice <![CDATA[ x ]]> shoes"]) {
+      for (const Root of [Email, Page]) {
+        const template = (
+          <Root><Row><Column>
+            <Paragraph>Review: <Markup html={markup} /></Paragraph>
+            <Paragraph>Total: $98</Paragraph>
+          </Column></Row></Root>
+        );
+        const html = renderToHtml(template);
+        const doc = new DOMParser().parseFromString(html, "text/html");
+        expect(doc.body.textContent).toContain("Total: $98");
+        const text = String(renderToJson(template).body.rows[0].columns[0].contents[0].values.text);
+        expect(text).not.toMatch(/<!|<\?/);
+      }
+    }
+  });
+
+  it("leave out a tag that never ends (before a <style> or <script> left open, whose markup goes to the end), so its attributes aren't a tag's in the email", () => {
+    const Markup = ({ html }: { html: string }) => <span dangerouslySetInnerHTML={{ __html: html }} />;
+    const hostile = ["Nice <img src=x onerror=alert(1) <style>", "Nice <img src=x onerror=alert(1) <script>", "Nice <a href=x onmouseover=alert(1) <style>x", "Nice <img src=x onerror=alert(1)"];
+    for (const markup of hostile) {
+      for (const Root of [Email, Page]) {
+        const template = (
+          <Root><Row><Column>
+            <Paragraph>Review: <Markup html={markup} /></Paragraph>
+            <Heading>Review: <Markup html={markup} /></Heading>
+            <Button href="https://example.com">Go <Markup html={markup} /></Button>
+          </Column></Row></Root>
+        );
+        const texts = renderToJson(template).body.rows[0].columns[0].contents.map((c: any) => String(c.values.text));
+        for (const html of [renderToHtml(template), ...texts]) {
+          const doc = new DOMParser().parseFromString(html, "text/html");
+          expect([...doc.querySelectorAll("*")].flatMap((e) => [...e.attributes].map((a) => a.name)).filter((name) => /^on/i.test(name))).toEqual([]);
+        }
+        expect(texts[0]).toMatch(/^Review: <span>Nice ?$/);
+      }
+    }
+  });
+
+  it("leave out a <script>'s or <style>'s text in them, which React 19 writes as it is (markup in it isn't theirs), on React 18 and 19", () => {
+    const evil = "<a href='https://evil.test'>click</a> <b>bold</b>";
+    const content = (Block: typeof Paragraph | typeof Heading) => (
+      <Block>
+        Hi <style>{evil}</style> <script>{evil}</script> there
+      </Block>
+    );
+    for (const Root of [Email, Page, Document]) {
+      const template = (
+        <Root>
+          <Row>
+            <Column>
+              {content(Paragraph)}
+              {content(Heading)}
+              <Button href="https://e.test">
+                Go <style>{evil}</style>
+              </Button>
+            </Column>
+          </Row>
+        </Root>
+      );
+      const html = renderToHtml(template);
+      const texts = renderToJson(template).body.rows[0].columns[0].contents.map((c: any) => String(c.values.text ?? JSON.stringify(c.values.textJson)));
+      for (const markup of [html, ...texts]) {
+        expect(markup).not.toMatch(/evil\.test|<b>bold|>click<|&lt;a href/);
+      }
+      expect(texts[1]).toMatch(/^Hi\s+there$/);
+    }
+  });
+
+  it("cost about ten times as much for ten times as much markup of any short shape (random, seeded): a component's own HTML in them, a lone link", async () => {
+    // Markup a component of yours writes as it is (`dangerouslySetInnerHTML`), as it reaches the text a block keeps: a
+    // <style> or <script> left open at its end takes the end tags after it out with it, so the `<`s before it have no
+    // `>` after them (the tags' regex read to the end from each of them: 100 KB took 4 to 16 s).
+    const pieces = ["<", ">", "</", "<style", "<script", "</style>", "</script >", "<a", "<b", "<br", "<x-y:z", "span", " ", "\t", "\n", "=", '"', "'", "x", "-", ":", "href", "style", "class", "javascript:", "&lt;%", "%&gt;", "<%", "%>", "&amp;", "/", "<!--", "-->"];
+    const ends = ["", "<a ", "<style>", "<span ", "<b>", "<script", "x"];
+    let seed = 5;
+    const random = (n: number) => ((seed = (Math.imul(seed, 1103515245) + 12345) >>> 0), Math.floor((seed / 2 ** 32) * n));
+    const fill = (head: string, unit: string, tail: string, bytes: number) => head + unit.repeat(Math.ceil(bytes / unit.length)).slice(0, bytes) + tail;
+    const Markup = ({ html }: { html: string }) => <span dangerouslySetInnerHTML={{ __html: html }} />;
+    const time = (html: string) => {
+      const start = performance.now();
+      renderToJson(
+        <Email><Row><Column>
+          <Paragraph>Hi <Markup html={html} /></Paragraph>
+          <Heading>Hi <Markup html={html} /></Heading>
+          <Button href="https://example.com">Go <Markup html={html} /></Button>
+          <Link href="https://example.com"><Markup html={html} /></Link>
+        </Column></Row></Email>
+      );
+      return performance.now() - start;
+    };
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const slow: string[] = [];
+    try {
+      for (let run = 0; run < 100; run++) {
+        let unit = "";
+        for (let i = 0, n = 1 + random(4); i < n; i++) unit += pieces[random(pieces.length)];
+        const [head, tail] = [ends[random(ends.length)], ends[random(ends.length)]];
+        // (The seeded shapes stay the same: timing one again draws nothing.)
+        const { small, large, next, grows } = await growth((bytes) => time(fill(head, unit, tail, bytes)), [10240, 102400], { ratio: 20, floor: 100, next: 1024000 });
+        if (grows) slow.push(`${JSON.stringify([head, unit, tail])}: ${small.toFixed(1)} ms for 10 KB, ${large.toFixed(1)} ms for 100 KB${next === undefined ? "" : `, ${next.toFixed(0)} ms for 1 MB`}`);
+      }
+    } finally {
+      warn.mockRestore();
+    }
+    expect(slow).toEqual([]);
+  }, 120_000);
+
+  it("fail the render for an object or a date among them, as React's render does, not leave it out (the README's errors)", () => {
+    const order = { createdAt: new Date(0), total: { amount: 49, currency: "USD" } } as any;
+    const blocks = [
+      <Paragraph key="p">Ordered on {order.createdAt}.</Paragraph>,
+      <Heading key="h">Total {order.total}</Heading>,
+      <Button key="b" href="https://example.com">Pay {order.total}</Button>,
+      <Paragraph key="m">Ordered on <strong>{order.createdAt}</strong></Paragraph>,
+    ];
+    for (const block of blocks) {
+      const template = <Email><Row><Column>{block}</Column></Row></Email>;
+      for (const render of [renderToHtml, renderToJson, renderToPlainText] as Array<(t: React.ReactElement) => unknown>) expect(() => render(template)).toThrow(/Objects are not valid as a React child/);
+    }
+    // A Set is a collection, as React renders one, and null, booleans and undefined show nothing, as before.
+    expect(renderToHtml(<Email><Row><Column><Heading>A{new Set(["b", "c"]) as any}{null}{false}{undefined}</Heading></Column></Row></Email>)).toContain("Abc");
+  });
+
+  it("leave text given as strings exactly as before", () => {
+    const strings = <Email><Row><Column><Paragraph>Hi {name}</Paragraph><Heading>{"A <b>b</b>"}</Heading><Button href="#">{["Go", " now"]}</Button></Column></Row></Email>;
+    const [paragraph, heading, button] = renderToJson(strings).body.rows[0].columns[0].contents as Array<{ values: { text: string } }>;
+    // (A Paragraph's string is text: escaped in the design's HTML, as in the email's, so the editor shows it as typed.)
+    expect(paragraph.values.text).toBe(`Hi &lt;img src=x onerror="alert(1)"&gt; &amp; Co`);
+    expect(heading.values.text).toBe("A &lt;b&gt;b&lt;/b&gt;");
+    expect(button.values.text).toBe("Go now");
   });
 });
 
@@ -60,6 +441,89 @@ describe("an email service's <%name%> tag in text", () => {
   });
 });
 
+describe("an email service's tag with quotes in a link's URL", () => {
+  // A link's URL is an attribute, double-quoted: its single quotes are written as written, as a Button's are.
+  it.each([["email", Email], ["web", Page]] as const)("keeps a Liquid default's single quotes in a Link's, a Link in a Paragraph's and an inline <a>'s href, in the HTML and the design (%s)", (_, Root) => {
+    const href = "{{ email | default: 'none' }}";
+    for (const block of [<Link key="l" href={href}>Email us</Link>, <Paragraph key="p">Write <Link href={href}>here</Link></Paragraph>, <Paragraph key="a">Write <a href={href}>here</a></Paragraph>]) {
+      const template = <Root><Row><Column>{block}</Column></Row></Root>;
+      expect(renderToHtml(template)).toContain(`href="${href}"`);
+      expect(String(renderToJson(template).body.rows[0].columns[0].contents[0].values.text)).toContain(`href="${href}"`);
+    }
+  });
+});
+
+describe("an email service's tag with quotes in rich text", () => {
+  // React writes a `'` in text as `&#x27;` and a `"` as `&quot;`, which a Liquid tag can't read; text given as a string
+  // keeps them, as 0.2.1 kept them in a Heading's and a Button's.
+  it.each([["email", Email, "'"], ["web", Page, "'"], ["email", Email, '"'], ["web", Page, '"']] as const)("keeps its quotes in a Paragraph, a Heading and a Button with inline markup, in the HTML and the design (%s, %s)", (_, Root, quote) => {
+    const tag = `{{ first_name | default: ${quote}friend${quote} }}`;
+    const template = (
+      <Root><Row><Column>
+        <Paragraph>Hi {tag}, <strong>thanks</strong> <a href="https://example.com" title={`it's "it"`}>x</a></Paragraph>
+        <Heading>Hi {tag}<br />more</Heading>
+        <Button href="https://example.com">Go {tag} <strong>now</strong></Button>
+      </Column></Row></Root>
+    );
+    const html = renderToHtml(template);
+    expect(html.split(tag)).toHaveLength(4);
+    const texts = renderToJson(template).body.rows[0].columns[0].contents.map((c: any) => String(c.values.text));
+    for (const text of texts) expect(text).toContain(tag);
+    // A tag's attributes keep their `"` as React wrote them, which would end them; a `'` can't, so it's as written.
+    expect(texts[0]).toContain(`title="it's &quot;it&quot;"`);
+  });
+});
+
+describe("an email service's tag in the plain text", () => {
+  it("keeps a heading's tags as written in its capitals, every common service's (0.2.1 put them in capitals too)", () => {
+    const tags = ["{{ first_name | default: \"there\" }}", "{% if vip %}", "{{{raw}}}", "%recipient.first_name%", "%%=v(@name)=%%", "${first_name}", "{$first_name}", "<%name%>"];
+    const text = renderToPlainText(<Email><Row><Column><Heading>{`Welcome, ${tags.join(" ")}!`}</Heading></Column></Row></Email>);
+    expect(text).toContain(`WELCOME, ${tags.join(" ")}!`);
+  });
+
+  it("stays, in a Paragraph with inline markup as in one of text (as 0.2.1 kept it), a Heading and a Button; so do other services' tags", () => {
+    const tags = "<%first_name%> {{last_name}} *|FNAME|* %%Company%%";
+    const template = (
+      <Email>
+        <Row>
+          <Column>
+            <Paragraph>
+              Hi {tags}, <b>bold</b> and <a href="https://example.com">a link</a>
+            </Paragraph>
+            <Paragraph>Hi {tags}</Paragraph>
+            <Heading>{`Hello ${tags}`}</Heading>
+            <Button href="https://example.com">{`Go ${tags}`}</Button>
+          </Column>
+        </Row>
+      </Email>
+    );
+    const text = renderToPlainText(template);
+    expect(text).toContain(`Hi ${tags}, bold and a link (https://example.com)`);
+    expect(text).toContain(`Hi ${tags}\n`);
+    // A heading's capitals leave its tags as written: a service reads `{{ last_name }}`, not `{{ LAST_NAME }}`.
+    expect(text).toContain("HELLO <%first_name%> {{last_name}} *|FNAME|* %%Company%%");
+    expect(text).toContain(`Go ${tags} (https://example.com)`);
+  });
+
+  it("doesn't change how the HTML escapes what's around it", () => {
+    const template = (
+      <Email>
+        <Row>
+          <Column>
+            <Paragraph>
+              {"<%name%><img src=x onerror=alert(1)> <% x %><svg onload=alert(2)>"} <b>b</b>
+            </Paragraph>
+          </Column>
+        </Row>
+      </Email>
+    );
+    const html = renderToHtml(template);
+    expect(html).toContain("<%name%>&lt;img src=x onerror=alert(1)&gt; &lt;% x %&gt;&lt;svg onload=alert(2)&gt; <b>b</b>");
+    expect(new DOMParser().parseFromString(html, "text/html").querySelectorAll("img, svg")).toHaveLength(0);
+    expect(renderToPlainText(template)).toContain("<%name%><img src=x onerror=alert(1)> <% x %><svg onload=alert(2)> b");
+  });
+});
+
 describe("Menu item text in an email", () => {
   // The email exporter writes it as HTML, as 0.1.22 wrote it as given: an entity and a single quote (a template's
   // string) stay as written; markup is escaped, and a double quote, also in a template tag: it's in an aria-label too.
@@ -149,9 +613,9 @@ describe("line breaks in Heading and Button text", () => {
 
 describe("text placed straight in a Row or Column", () => {
   const Name = () => name;
-  // Said once per container in a process, not on every render.
-  const warned: string[] = [];
   it.each([["email", Email], ["web", Page], ["document", Document]] as const)("shows as text, from a Fragment, a component or written there (%s)", (_, Root) => {
+    // Said once in each render for each container (it was once in a process, without the prefix).
+    const warned: string[] = [];
     const warn = vi.spyOn(console, "warn").mockImplementation((message) => void warned.push(String(message)));
     try {
       const html = renderToHtml(
@@ -164,7 +628,7 @@ describe("text placed straight in a Row or Column", () => {
       expect(html).not.toContain("<img src=x");
       expect(html.match(/&lt;img src=x onerror=&quot;alert\(1\)&quot;&gt; &amp; Co/g)).toHaveLength(4);
       expect(html).toContain("&amp; Co7");
-      expect(warned.filter((m) => m.includes("Put it in a <Paragraph>"))).toHaveLength(2);
+      expect(warned.filter((m) => m.includes("Put it in a <Paragraph>")).map((m) => m.slice(0, 30))).toEqual(["[Unlayer] Row: text placed str", "[Unlayer] Column: text placed "]);
     } finally {
       warn.mockRestore();
     }
@@ -186,6 +650,25 @@ describe("text placed straight in a Row or Column", () => {
   });
 });
 
+describe("text blocks in a right-to-left document", () => {
+  it.each([["email", Email], ["web", Page], ["document", Document]] as const)("start on the right unless they're aligned; left-to-right ones are unchanged (%s)", (_, Root) => {
+    const blocks = (dir?: string) => (
+      <Root textDirection={dir}>
+        <Row><Column><Heading>مرحبا</Heading><Paragraph>نص</Paragraph><Paragraph textAlign="center">وسط</Paragraph><Button href="#">زر</Button></Column></Row>
+      </Root>
+    );
+    const rtl = renderToHtml(blocks("rtl"));
+    expect(rtl.match(/text-align: ?right/g)?.length).toBeGreaterThanOrEqual(2);
+    expect(rtl).toMatch(/text-align: ?center[^>]*>\s*(<p[^>]*>)?وسط/);
+    const [heading, paragraph, centered, button] = renderToJson(blocks("rtl")).body.rows[0].columns[0].contents as Array<{ values: { textAlign: string } }>;
+    expect([heading, paragraph, centered, button].map((c) => c.values.textAlign)).toEqual(["right", "right", "center", "center"]);
+    // Through the renderer's option too.
+    expect(renderToHtml(blocks(), { textDirection: "rtl" })).toMatch(/text-align: ?right/);
+    expect(renderToHtml(blocks())).not.toMatch(/text-align: ?right/);
+    expect(renderToJson(blocks()).body.rows[0].columns[0].contents.map((c: any) => c.values.textAlign)).toEqual(["left", "left", "center", "center"]);
+  });
+});
+
 describe("the text direction", () => {
   it.each([["email", Email], ["web", Page], ["document", Document]] as const)("is only ever ltr, rtl or auto in the markup (%s)", (_, Root) => {
     const html = renderToHtml(<Root textDirection={'rtl"><img src=x onerror="alert(1)">'}><Row><Column><Paragraph>x</Paragraph></Column></Row></Root>);
diff --git a/packages/react/src/utils/unwrap-root.ts b/packages/react/src/utils/unwrap-root.ts
index a687bd86..82eec03f 100644
--- a/packages/react/src/utils/unwrap-root.ts
+++ b/packages/react/src/utils/unwrap-root.ts
@@ -3,22 +3,54 @@
  * their root element. `renderToJson` walks the element tree and `renderToHtml`
  * reads the root's settings (fonts, language, direction, phone styles) from it,
  * so a wrapper is called first to reach <Email>/<Page>/<Document>/<Body>.
+ *
+ * Each wrapper is called once, with hooks (the engine's dispatcher), at its place in the tree and inside the context
+ * providers around it, as React would call it; the content then starts where the wrappers left the tree, so its
+ * `useId()`s and theirs are one document's.
+ *
+ * What unwrapping finds (`Unwrapped`) is that render's: kept in its scope (see render-scope.ts), and known by the
+ * elements it gave, never kept by the template's own elements, which another render (or one at once) may unwrap
+ * otherwise.
  */
 
 import React from "react";
-import { renderToStaticMarkup } from "./server-renderer";
+import type { UnlayerConfig } from "@unlayer-internal/shared-elements";
 import { UNLAYER_RENDER_KEY } from "./create-component";
 import { RECORDS } from "./collect";
+import { TAILWIND } from "./tailwind";
+import { callClass, callComponent, contextOf, hookState, passesThrough, renderFallbacks, ROOT_TREE, RenderError, sharing, type ContextStack, type Fallbacks, type Shared, type TreeContext } from "../engine";
+import { nameOf, threw } from "../engine/errors";
+import { isRoot } from "./root-type";
+import { guest, keepUnwrapped, sayOnce, sharedByRender, unwrapped } from "./render-scope";
 
-/** The root components a design starts from. */
-export const ROOT_NAMES = new Set(["Body", "Email", "Page", "Document"]);
-const CONTAINER_NAMES = new Set([...ROOT_NAMES, "Row", "Column"]);
+const CONTAINER_NAMES = new Set(["Row", "Column"]);
 export const MEMO = Symbol.for("react.memo");
 export const FORWARD_REF = Symbol.for("react.forward_ref");
+const LAZY = Symbol.for("react.lazy");
 /** A context's provider: `<Ctx.Provider>` in React 18, `<Ctx>` (and `<Ctx.Provider>`, the same) in React 19. */
 const PROVIDER = Symbol.for("react.provider");
 const CONTEXT = Symbol.for("react.context");
 
+/** On <UnlayerProvider> (see context/UnlayerProvider.tsx). */
+const UNLAYER_PROVIDER = Symbol.for("@unlayer/react-elements/provider");
+export const isUnlayerProvider = (type: unknown): boolean => !!(type as Record<symbol, unknown> | null)?.[UNLAYER_PROVIDER];
+
+/**
+ * The config of the <UnlayerProvider>s this render's unwrapping found around `root`, the root it gave (or what a
+ * template with no root rendered): the render functions read it as React would give it to the root (with no context:
+ * React Server Components have none).
+ */
+export function providedConfig(root: React.ReactElement): Partial<UnlayerConfig> | undefined {
+  const found = unwrapped();
+  return found && root === (found.rendered ?? found.root) ? found.provided : undefined;
+}
+
+/** Where a root's content (`children`) starts in the tree in this render, as its wrappers left it. */
+export function contentTree(children: unknown): TreeContext | undefined {
+  const found = unwrapped();
+  return found?.tree && children === (found.root.props as { children?: unknown }).children ? found.tree : undefined;
+}
+
 /**
  * The Elements component an element is, by the `displayName` Elements gives
  * each of its own: a user function that happens to be named `Email` or `Row`
@@ -34,91 +66,124 @@ export function componentName(element: React.ReactElement): string | undefined {
   return type?.displayName || type?.name;
 }
 
-/** Whether a component type is an Elements component (a root, a container or a content block). */
+/** Whether a component type is an Elements component (a root, of any copy: see root-type.ts; a container or a content block). */
 export function isElementsType(type: any): boolean {
-  return !!type?.[UNLAYER_RENDER_KEY] || CONTAINER_NAMES.has(type?.displayName);
+  return !!type?.[UNLAYER_RENDER_KEY] || isRoot(type) || CONTAINER_NAMES.has(type?.displayName);
 }
 
-/** Whether the element is an Elements component (a root, a container or a content block). */
-function isElementsComponent(element: React.ReactElement): boolean {
-  return isElementsType(element.type);
-}
+/** Said for a template that is async or suspends: the synchronous renderers can't wait for it. */
+export const ASYNC_TEMPLATE =
+  'async and suspending templates need "@unlayer/react-elements/async"\'s renderers, or their data loaded first and passed as props';
 
-/** Thrown for a template that is async or suspends: renderToHtml renders synchronously. */
-const ASYNC_TEMPLATE =
-  "async and suspending templates aren't supported: load the data first and pass it as props";
+export const isThenable = (value: unknown): value is PromiseLike<unknown> => typeof (value as { then?: unknown } | null)?.then === "function";
+
+/** The provider an element is (`<Ctx value>`, `<Ctx.Provider value>`): its context and value. */
+function providerOf(element: unknown): { context: object; value: unknown } | undefined {
+  if (!React.isValidElement(element)) return undefined;
+  const type = element.type as any;
+  const props = element.props as { value?: unknown };
+  if (type?.$$typeof === PROVIDER) return { context: type._context, value: props.value };
+  if (type?.$$typeof === CONTEXT && "value" in props && type.Provider === type) return { context: contextOf(type), value: props.value };
+  return undefined;
+}
 
-export const isThenable = (value: unknown): boolean => typeof (value as { then?: unknown } | null)?.then === "function";
+/** What unwrapping a template found, for the render that unwrapped it (see above). */
+export interface Unwrapped {
+  /** Where its wrappers stopped: its root (the providers around it moved inside it), or an element that isn't one. */
+  root: React.ReactElement;
+  /** Why its root's settings go unread. */
+  unread?: string;
+  /**
+   * With no root, what the template rendered, made again without calling its wrappers (see `replayed`): what the
+   * render renders as a root's content (see utils/root-content.ts), and the async renderers, which waited for it, give
+   * the synchronous render, which doesn't unwrap it again (its content is collected once).
+   */
+  rendered?: React.ReactElement;
+  /** The config of the <UnlayerProvider>s around it, the inner one's keys over the outer's (see providedConfig). */
+  provided?: Partial<UnlayerConfig>;
+  /** Where its root's content starts in the tree, where its wrappers moved it (see contentTree). */
+  tree?: TreeContext;
+  /** What its wrappers read for contexts no provider gives, which the rest of the render reads too (see the engine's `readContext`). */
+  fallbacks?: Fallbacks;
+}
 
-/** A promise a component gave back, which Elements doesn't wait for: its rejection mustn't end the process. */
-const settle = (value: unknown): void => {
-  if (isThenable(value)) (value as PromiseLike<unknown>).then(undefined, () => {});
-};
+export type Steps = Generator<PromiseLike<unknown>, Unwrapped, unknown>;
 
-/** A component declared `async`: it can't render synchronously, so it isn't called at all. */
-export function isAsyncComponent(type: any): boolean {
-  while (type?.$$typeof === MEMO) type = type.type;
-  return (type?.$$typeof === FORWARD_REF ? type.render : type)?.[Symbol.toStringTag] === "AsyncFunction";
+/** A wrapper as it rendered (`output`), not called again: with its props and names, its `useId()` moving the ids after it. */
+function replayed(type: any, props: object, forked: boolean, output: React.ReactNode): React.ReactElement {
+  const Replayed = () => (forked && React.useId(), output);
+  Object.defineProperty(Replayed, "name", { value: typeof type === "function" ? type.name : nameOf(type) });
+  Object.assign(Replayed, { displayName: type.displayName });
+  return React.createElement(Replayed, props);
 }
 
 /**
- * Call a template component in a throwaway render of its own. Its hooks run
- * there, never on the component that is rendering when renderToHtml is called
- * (a live preview in `useMemo`), whose hooks they would otherwise corrupt.
- * Components called in renders of their own each need their own `prefix`, or
- * their `useId()` values repeat in the document.
+ * `call()` (a wrapper's: see the engine's callComponent) again each time it suspends, once what it suspended on
+ * settles (`use()` of a pending promise, or a thrown one: React 18's Suspense), as React calls it again: what it
+ * returns. What it waits for is yielded: the async renderers wait for it, the synchronous ones throw. It runs outside
+ * the render's scope, as the content's components do: a render it starts is its own; with what the render's
+ * components share (`shared`: its Markdown's and code's work), as they do.
  */
-export function callIsolated(call: () => unknown, prefix?: string, providers: React.ReactElement[] = []): unknown {
-  let result: unknown;
-  let error: unknown;
-  let ran = false;
-  let threw = false;
-  let calling = false;
-  const Probe = () => {
-    // React's development build calls a component again from inside its render, with hooks off, to say where a warning
-    // came from (an undefined component, a list without keys): that call fails where the render didn't. A render React
-    // starts again (the template set its state while it rendered) counts, as its last one does in React.
-    if (calling) return null;
-    ran = calling = true;
-    threw = false;
+function* waiting<T>(call: () => T, shared: Shared): Generator<PromiseLike<unknown>, T, unknown> {
+  for (;;) {
     try {
-      result = call();
-    } catch (cause) {
-      threw = true;
-      error = cause;
-    } finally {
-      calling = false;
+      return guest(() => sharing(shared, call));
+    } catch (thrown) {
+      if (!isThenable(thrown)) throw thrown;
+      try {
+        yield thrown;
+      } catch {
+        // It rejected: called again, the wrapper fails with it (`use()` throws it, and a promise thrown again is its
+        // rejection: see the engine's `failure`).
+      }
     }
-    return null;
-  };
-  // Inside the context providers around it, so a template that reads their context gets their values.
-  const probe = providers.reduceRight<React.ReactElement>((inside, provider) => React.cloneElement(provider, undefined, inside), React.createElement(Probe));
-  renderToStaticMarkup(probe, prefix ? { identifierPrefix: prefix } : undefined);
-  settle(error);
-  settle(result);
-  if (threw) throw isThenable(error) ? new Error(ASYNC_TEMPLATE) : error;
-  if (!ran) throw new Error("the template wasn't rendered");
-  if (isThenable(result)) throw new Error(ASYNC_TEMPLATE);
-  return result;
+  }
 }
 
 /**
- * Call wrapper components (plain functions, `memo`, `forwardRef`, nested in any
- * order) until a root element comes out, each in a render of its own (so its
- * hooks work). Returns the element it stops at, which isn't a root when a
- * wrapper can't be called (a class) or doesn't return an element (null, an
- * array). Throws what a wrapper throws, and for an async template.
+ * Wrappers called (plain functions, `memo`, `forwardRef`, nested in any order) until a root element comes out. It
+ * stops at an element that isn't a root when a wrapper doesn't return an element (null, an array), saying why in
+ * `unread`, and what the template rendered in `rendered`. What a wrapper waits for (an async one's promise, `use()`, a
+ * thrown promise) is yielded: the async renderers wait for it, the synchronous ones throw, naming the wrapper
+ * (`waits.name`, set as each is called). `shared`: what the render's components share, its wrappers too (the render's).
  */
-export function unwrapRoot(element: React.ReactElement, why: { unread?: string } = {}): React.ReactElement {
+function* steps(element: React.ReactElement, shared: Shared, idPrefix?: string, waits: { name?: string } = {}): Steps {
   let current = element;
+  let unread: string | undefined;
+  // With no root, how what the template rendered is made again (`rendered`): each step's element, around what's
+  // inside it; and what the last wrapper returned, where it isn't an element.
+  const again: Array<(inside: React.ReactNode) => React.ReactElement> = [];
+  let returned: { value: unknown } | undefined;
+  const holding = (at: React.ReactElement) => (inside: React.ReactNode) => React.cloneElement(at, undefined, inside);
   // Context providers around the root (`<Theme.Provider value="dark"><Email>…`): the root's content goes in them.
   const providers: React.ReactElement[] = [];
+  let contexts: ContextStack | null = null;
+  // (What it reads for contexts no provider gives, which its content's walk reads too: see the engine's renderFallbacks.)
+  const fallbacks: Fallbacks = renderFallbacks();
+  let tree = ROOT_TREE;
+  // The config of the <UnlayerProvider>s among them, the inner one's keys over the outer's (see providedConfig).
+  let provided: Partial<UnlayerConfig> | undefined;
+  /** `fn` called as the component `name` (hooks, context), its promises yielded. */
+  function* called(fn: (props: any, second?: unknown) => unknown, props: Record<string, unknown>, second: unknown, name: string): Generator<PromiseLike<unknown>, unknown, unknown> {
+    // (Its `useId()`s' prefix: the render's, else the <UnlayerProvider>s' around it.)
+    const prefix = idPrefix ?? provided?.idPrefix;
+    const state = hookState(name, tree, contexts, typeof prefix === "string" ? prefix : "", fallbacks);
+    waits.name = name;
+    const out = yield* waiting(() => callComponent(fn, props, second, state), shared);
+    tree = out.tree;
+    if (!isThenable(out.value)) return out.value;
+    try {
+      return yield out.value;
+    } catch (error) {
+      throw new RenderError(threw(error), name, "", error);
+    }
+  }
   for (let depth = 0; ; depth++) {
-    if (ROOT_NAMES.has(getDisplayName(current) ?? "")) break;
+    if (isRoot(current.type)) break;
     // A Row or block: what it renders is Elements' own, never a root.
     if (elementsOwn(current)) break;
     if (depth === 20) {
-      why.unread = "it wraps more than 20 components";
+      unread = "it wraps more than 20 components";
       break;
     }
     const type = current.type as any;
@@ -127,41 +192,101 @@ export function unwrapRoot(element: React.ReactElement, why: { unread?: string }
       current = React.createElement(type.type, props);
       continue;
     }
-    if ((type?.$$typeof === PROVIDER || type?.$$typeof === CONTEXT) && "value" in props) {
-      const inside = React.Children.toArray(props.children as React.ReactNode);
-      if (inside.length !== 1 || !React.isValidElement(inside[0])) break;
+    // A lazy template (`React.lazy(() => import("./Welcome"))`): the component it loads, waited for as a wrapper that
+    // suspends is (the synchronous renderers say it's async till it has loaded); one that fails to load, named.
+    if (type?.$$typeof === LAZY) {
+      waits.name = "lazy";
+      try {
+        current = React.createElement((yield* waiting(() => type._init(type._payload), shared)) as React.ElementType, props);
+      } catch (error) {
+        throw new RenderError(threw(error), "lazy", "", error);
+      }
+      continue;
+    }
+    const inside = () => {
+      const list = React.Children.toArray(props.children as React.ReactNode);
+      return list.length === 1 && React.isValidElement(list[0]) ? list[0] : undefined;
+    };
+    // An <UnlayerProvider>: its config is the root's (read here, as React Server Components have no context), and it
+    // stays around the root's content, as a context provider does, for `useUnlayerConfig()` there and in wrappers.
+    if (type?.[UNLAYER_PROVIDER]) {
+      const only = inside();
+      if (!only) break;
+      for (const [key, value] of Object.entries((props.config ?? {}) as Record<string, unknown>)) if (value !== undefined) ((provided ??= {}) as Record<string, unknown>)[key] = value;
+      const given = providerOf(yield* called(type, props, undefined, "UnlayerProvider"));
+      if (given) contexts = { ...given, context: contextOf(given.context), next: contexts };
+      providers.push(current);
+      again.push(holding(current));
+      current = only;
+      continue;
+    }
+    // A context provider, or a <Tailwind>, around it: the root's content goes in it (a <Tailwind>'s classes are the
+    // root's, see Body).
+    const provider = providerOf(current);
+    if (provider || type?.[TAILWIND]) {
+      const only = inside();
+      if (!only) break;
+      if (provider) contexts = { context: contextOf(provider.context), value: provider.value, next: contexts };
       providers.push(current);
-      current = inside[0];
+      again.push(holding(current));
+      current = only;
       continue;
     }
-    // A Fragment, StrictMode or Profiler around the template (`<><Welcome /></>`): what's in it, when that's one
-    // element. They add nothing to a server render.
-    if (type === React.Fragment || type === React.StrictMode || type === React.Profiler) {
-      const inside = React.Children.toArray(props.children as React.ReactNode);
-      if (inside.length !== 1 || !React.isValidElement(inside[0])) break;
-      current = inside[0];
+    // A Fragment, StrictMode, Profiler or <Suspense> around the template (`<Suspense><Welcome /></Suspense>`): what's in
+    // it, when that's one element. They add nothing to a whole document: a <Suspense> around its root is outside it, and
+    // its fallback, not a root, can't make one, so what's in it is waited for (or said to be async), as without it.
+    if (passesThrough(type, props)) {
+      const only = inside();
+      if (!only) break;
+      again.push(holding(current));
+      current = only;
       continue;
     }
+    const at = tree;
     let produced: unknown;
-    // Each wrapper renders on its own: one inside another gets its own `useId()` prefix (the first keeps React's).
-    const prefix = depth ? `w${depth}-` : undefined;
-    if (type?.$$typeof === FORWARD_REF) produced = callIsolated(() => type.render({ ...props }, null), prefix, providers);
-    else if (typeof type === "function" && !type.prototype?.isReactComponent) produced = callIsolated(() => type({ ...props }), prefix, providers);
-    else {
-      if (type?.prototype?.isReactComponent) why.unread = `<${componentName(current)}> is a class component, which isn't called to find it`;
-      break;
-    }
+    if (type?.$$typeof === FORWARD_REF) produced = yield* called(type.render, { ...props }, null, nameOf(type));
+    else if (typeof type === "function" && !type.prototype?.isReactComponent) produced = yield* called(type, { ...props }, undefined, nameOf(type));
+    else if (type?.prototype?.isReactComponent) {
+      // A class (react-intl's <IntlProvider>): constructed and rendered, inside the providers around it.
+      const around = contexts;
+      waits.name = nameOf(type);
+      produced = yield* waiting(() => callClass(type, props, around, fallbacks), shared);
+    } else break;
+    again.push((inside) => replayed(type, props, tree !== at, inside));
     if (!React.isValidElement(produced)) {
-      if (holdsRoot(produced as React.ReactNode)) why.unread = "it doesn't return a root element";
+      if (holdsRoot(produced as React.ReactNode)) unread = "it doesn't return a root element";
+      returned = { value: produced };
       break;
     }
     current = produced;
   }
-  if (!providers.length || !ROOT_NAMES.has(getDisplayName(current) ?? "")) return current;
-  const children = providers.reduceRight<React.ReactNode>((inside, provider) => React.cloneElement(provider, undefined, inside), (current.props as { children?: React.ReactNode }).children);
-  return React.cloneElement(current, undefined, children);
+  if (!isRoot(current.type)) {
+    const rendered = again.reduceRight<React.ReactNode>((inside, wrap) => wrap(inside), (returned ? returned.value : current) as React.ReactNode) as React.ReactElement;
+    return { root: current, unread, rendered, provided, fallbacks };
+  }
+  const own = (current.props as { children?: React.ReactNode }).children;
+  const children = providers.reduceRight<React.ReactNode>((inside, provider) => React.cloneElement(provider, undefined, inside), own);
+  return { root: providers.length ? React.cloneElement(current, undefined, children) : current, provided, tree: tree !== ROOT_TREE ? tree : undefined, fallbacks };
 }
 
+/**
+ * What a template unwraps to in this render (see steps), kept in its scope; one that waits for something fails in
+ * `api` (a render function) with a RenderError naming the wrapper that waits, and what to do. What it unwrapped to
+ * already (the async renderers' synchronous render, after they waited for it) is as it was.
+ */
+export function unwrapRoot(element: React.ReactElement, api: string, idPrefix?: string): Unwrapped {
+  const found = unwrapped();
+  if (found && (element === found.root || element === found.rendered)) return found;
+  const waits: { name?: string } = {};
+  const step = steps(element, sharedByRender(), idPrefix, waits).next();
+  if (step.done) return keepUnwrapped(step.value);
+  step.value.then(undefined, () => {});
+  throw new RenderError(`${api}: ${ASYNC_TEMPLATE}`, waits.name ?? nameOf(element.type), "");
+}
+
+/** The steps to what a template unwraps to, which the async renderers take, waiting where they wait. */
+export { steps as unwrapSteps };
+
 /** Elements' own Row, Column or block (not a component of the user's own named like one, which is called). */
 const elementsOwn = (element: React.ReactElement): boolean => {
   const type = element.type as any;
@@ -172,33 +297,46 @@ const elementsOwn = (element: React.ReactElement): boolean => {
 function holdsRoot(node: React.ReactNode): boolean {
   if (Array.isArray(node)) return node.some(holdsRoot);
   if (!React.isValidElement(node)) return false;
-  return ROOT_NAMES.has(getDisplayName(node) ?? "") || (!elementsOwn(node) && holdsRoot((node.props as { children?: React.ReactNode }).children));
+  return isRoot(node.type) || (!elementsOwn(node) && holdsRoot((node.props as { children?: React.ReactNode }).children));
 }
 
 /** The advice both render functions give when a wrapper can't be unwrapped. */
 export const UNWRAP_ADVICE = "Pass the root element (<Email>…</Email>), or a function component that returns one.";
 
+/** What a render says once when its root's settings go unread (by unwrapping, or the walk: see nestedRoot). */
+export const UNREAD = "unread";
+
+/** What's said when unwrapping `name` (a template) stops before its root (`why`; in `api`, a render function). */
+const unreadSaid = (name: string, why: string, api = "") => `[Unlayer] ${api}couldn't unwrap <${name}> (${why}): its root's fonts, lang, dir and phone styles are ignored. ${UNWRAP_ADVICE}`;
+
+/**
+ * Said where a template with no root's walk meets a root (`root`, its name) in its content: where unwrapping stopped
+ * before it (a root among other elements, in markup, in what a component renders), which it couldn't see. It renders
+ * as a document inside the content, as 0.1.22 rendered it.
+ */
+export const nestedRoot = (root: string): string => unreadSaid("template", `its <${root}> is inside other markup, a list or a component, and renders as a document there`);
+
 /**
  * For renderToHtml: the root a template component unwraps to. An element that
- * is already an Elements component (or plain HTML) is returned as it is. When
- * a wrapper can't be unwrapped it's rendered through React as before, with a
- * warning: its root's settings aren't read.
+ * is already an Elements component (or plain HTML), or what this render's
+ * template rendered, is returned as it is. A template with no root gives what it
+ * rendered (see `Unwrapped`), its wrappers not called again; with a warning where
+ * a root in it can't be reached: its settings aren't read. A wrapper that throws,
+ * or is async or suspends, fails the render (a RenderError naming it).
  */
-export function htmlRoot(element: React.ReactElement, api: string): React.ReactElement {
-  if (typeof element.type === "string" || isElementsComponent(element)) return element;
-  let reason: string;
-  try {
-    const why: { unread?: string } = {};
-    const root = unwrapRoot(element, why);
-    if (ROOT_NAMES.has(getDisplayName(root) ?? "")) return root;
-    // A template of Rows, or nothing: there's no root whose settings go unread.
-    if (!why.unread && !holdsRoot(root)) return element;
-    reason = why.unread ?? "its root is inside other markup";
-  } catch (cause) {
-    // An async template can't be rendered through React either: say why.
-    if (cause instanceof Error && cause.message === ASYNC_TEMPLATE) throw new Error(`[Unlayer] ${api}: ${ASYNC_TEMPLATE}.`);
-    reason = cause instanceof Error ? cause.message : String(cause);
-  }
-  console.warn(`[Unlayer] ${api}: couldn't unwrap <${componentName(element) || "wrapper"}> (${reason}): its root's fonts, lang, dir and phone styles are ignored. ${UNWRAP_ADVICE}`);
-  return element;
+export function htmlRoot(element: React.ReactElement, api: string, idPrefix?: string): React.ReactElement {
+  if (typeof element.type === "string" || isElementsType(element.type) || element === unwrapped()?.rendered) return element;
+  const found = unwrapRoot(element, api, idPrefix);
+  if (isRoot(found.root.type)) return found.root;
+  sayUnread(found, element, api);
+  return found.rendered ?? element;
+}
+
+/**
+ * Said once a render where unwrapping `element` (in `api`, a render function) stopped before a root it can see in
+ * `found` (a template of Rows, or nothing, has no root whose settings go unread); its walk, which meets the root,
+ * says no more.
+ */
+export function sayUnread(found: Unwrapped, element: React.ReactElement, api: string): void {
+  if (found.unread || holdsRoot(found.root)) sayOnce(unreadSaid(componentName(element) || "wrapper", found.unread ?? "its root is inside other markup", `${api}: `), UNREAD);
 }
diff --git a/packages/react/src/utils/user-components.test.tsx b/packages/react/src/utils/user-components.test.tsx
index 45dbc467..216c1daa 100644
--- a/packages/react/src/utils/user-components.test.tsx
+++ b/packages/react/src/utils/user-components.test.tsx
@@ -4,6 +4,8 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { renderToHtml, renderToHtmlParts, renderToPlainText } from "./render-to-html";
 import { renderToJson } from "./render-to-json";
 import { Email, Page, Row, Column, Paragraph, Heading, Html, Button as ElementsButton, ColumnLayouts } from "../index";
+import { Font } from "../font";
+import * as asyncRenderers from "../async";
 
 const block = (text: string, props: Record<string, unknown> = {}) => <Row><Column><Paragraph {...props}>{text}</Paragraph></Column></Row>;
 const Header = () => block("Header");
@@ -32,7 +34,7 @@ describe("Fragments and user components among the blocks", () => {
   it("render every block once, in order, each with its own id", () => {
     const html = renderToHtml(template);
     const body = html.slice(html.indexOf("<body"));
-    const texts = order.map((t) => body.indexOf(`>${t}<`));
+    const texts = order.map((t) => body.search(new RegExp(`>\\s*${t}\\s*<`)));
     expect(texts.every((at) => at > 0)).toBe(true);
     expect([...texts].sort((a, b) => a - b)).toEqual(texts);
     const ids = [...body.matchAll(/id="(u_(?:row|column|content_paragraph)_\d+)"/g)].map((m) => m[1]);
@@ -45,7 +47,7 @@ describe("Fragments and user components among the blocks", () => {
   it("put the phone CSS on the block that asked for it, and the design has the same blocks", () => {
     const html = renderToHtml(template);
     const selector = /#(u_content_paragraph_\d+)[^{]*\{[^}]*font-size:\s*30px/.exec(html)?.[1];
-    const targetId = new RegExp(`id="(u_content_paragraph_\\d+)"[^>]*>(?:(?!id=")[\\s\\S])*?>Target<`).exec(html)?.[1];
+    const targetId = new RegExp(`id="(u_content_paragraph_\\d+)"[^>]*>(?:(?!id=")[\\s\\S])*?>\\s*Target\\s*<`).exec(html)?.[1];
     expect(selector).toBeDefined();
     expect(selector).toBe(targetId);
     expect(html.match(new RegExp(`id="${selector}"`, "g"))).toHaveLength(1);
@@ -93,6 +95,90 @@ describe("a component element kept between renders", () => {
   });
 });
 
+describe("a template with no root", () => {
+  // Rows, a block and markup with no Email, Page, Document or Body around them, inside a wrapper: rendered as a
+  // root's content is, without the root's markup. The HTML, the head and the plain text are made from one render.
+  const counted = () => {
+    const runs: Record<string, number> = {};
+    const ran = (name: string) => void (runs[name] = (runs[name] ?? 0) + 1);
+    const Hero = () => {
+      ran("Hero");
+      const [text] = useState("Hero");
+      return <Paragraph mobile={{ fontSize: "30px" }}>{text}</Paragraph>;
+    };
+    const Note = () => {
+      ran("Note");
+      const [text] = useState("Note");
+      return <b>{text}</b>;
+    };
+    const Rows = ({ children }: { children?: React.ReactNode }) => (ran("Rows"), <>{block("One")}{children}<div><Note /></div></>);
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (ran("Wrapper"), <>{children}</>);
+    return { runs, element: <Wrapper><Rows><Row><Column><Hero /></Column></Row></Rows></Wrapper> };
+  };
+
+  it.each([
+    ["renderToHtml", (element: React.ReactElement) => renderToHtml(element)],
+    ["renderToHtmlParts", (element: React.ReactElement) => Object.values(renderToHtmlParts(element)).join("")],
+    ["renderToPlainText", (element: React.ReactElement) => renderToPlainText(element)],
+  ])("%s runs each of its components once", (_, render) => {
+    const { runs, element } = counted();
+    const out = render(element);
+    expect(out).toContain("Hero");
+    expect(out).toContain("Note");
+    expect(runs).toEqual({ Wrapper: 1, Rows: 1, Hero: 1, Note: 1 });
+  });
+
+  it("renderToJson says it needs a root, calling its wrappers once and nothing they render", () => {
+    const { runs, element } = counted();
+    expect(() => renderToJson(element)).toThrow("Root element must be <Body>, <Email>, <Page>, or <Document>");
+    expect(runs).toEqual({ Wrapper: 1, Rows: 1 });
+  });
+
+  it("numbers its rows and blocks as its head does, in the render's mode", () => {
+    const html = renderToHtml(counted().element, { mode: "email" });
+    const body = html.slice(html.indexOf("</head>"));
+    const ids = [...body.matchAll(/id="(u_(?:row|column|content_paragraph)_\d+)"/g)].map((m) => m[1]);
+    expect(ids).toEqual(["u_row_1", "u_column_1", "u_content_paragraph_1", "u_row_2", "u_column_2", "u_content_paragraph_2"]);
+    // The phone CSS the second block asked for is on its id.
+    expect(/#(u_content_paragraph_\d+)[^{]*\{[^}]*font-size:\s*30px/.exec(html)?.[1]).toBe("u_content_paragraph_2");
+    expect(body.match(/id="u_row_\d+" class="u-row-container/g)).toHaveLength(2);
+  });
+
+  it("fails on a part that fails, naming it and where it is, or leaves it out (onError: \"omit\"), as in a root", () => {
+    const Later = async () => <Paragraph>Later</Paragraph>;
+    const Broken = () => {
+      throw new Error("boom");
+    };
+    const Rows = () => <>{block("Kept")}<Row><Column><Later /></Column></Row><Row><Column><Broken /></Column></Row></>;
+    expect(() => renderToHtml(<Rows />)).toThrow('it is async or suspends, and this renderer is synchronous: render with "@unlayer/react-elements/async", or load its data first and pass it as props (in <Later> at Rows › Row 2 › Column 1 › Later)');
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const parts = renderToHtmlParts(<Rows />, { onError: "omit" });
+      expect(parts.body).toContain("Kept");
+      expect(parts.omitted.map((e) => e.message)).toEqual(["[Unlayer] it is async or suspends, and this renderer is synchronous: render with \"@unlayer/react-elements/async\", or load its data first and pass it as props (in <Later> at Rows › Row 2 › Column 1 › Later)", "[Unlayer] boom (in <Broken> at Rows › Row 3 › Column 1 › Broken)"]);
+    } finally {
+      error.mockRestore();
+    }
+  });
+
+  it("is markup given no settings as attributes", () => {
+    expect(renderToHtml(<div>Markup</div>)).toContain("<div>Markup</div>");
+  });
+
+  it("says what fails at its top is in the template, in every renderer", async () => {
+    // (Not a component: a module's object, as a story file's default export is.)
+    const Invalid = {} as unknown as React.FC;
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      for (const render of [renderToHtml, renderToHtmlParts, renderToPlainText, asyncRenderers.renderToHtml]) {
+        await expect(Promise.resolve().then(() => render(<Invalid />))).rejects.toThrow(/but got: object\. .* \(in <template>\)$/);
+      }
+    } finally {
+      error.mockRestore();
+    }
+  });
+});
+
 describe("HTML from a component placed straight in the body", () => {
   it("doesn't get the body's settings as attributes", () => {
     const Raw = () => <div dangerouslySetInnerHTML={{ __html: "<p>Raw footer</p>" }} />;
@@ -122,38 +208,30 @@ describe("a component that fails", () => {
     }
   };
 
-  it("is left out with what it renders, and the one that failed in it says so, once per render", () => {
+  it("fails the render, naming it and where it is; left out (onError: \"omit\") with what it renders, said once per render", () => {
+    const boom = new Error("boom");
     const Boom = () => {
-      throw new Error("boom");
+      throw boom;
     };
     const Section = () => <>{block("In the section")}<Boom /></>;
     const email = <Email><Section />{block("After")}</Email>;
-    for (const render of [() => renderToHtml(email), () => renderToJson(email)]) {
+    const said = "[Unlayer] boom (in <Boom> at Section › Boom)";
+    for (const render of [() => renderToHtml(email), () => renderToJson(email), () => renderToPlainText(email)]) expect(render).toThrow(said);
+    for (const render of [() => renderToHtml(email, { onError: "omit" }), () => renderToJson(email, { onError: "omit" })]) {
       let output = "";
-      expect(messages(() => (output = JSON.stringify(render())))).toEqual(["[Unlayer] <Boom> threw while rendering, so it's left out:"]);
+      expect(messages(() => (output = JSON.stringify(render())))).toEqual([said.replace("[Unlayer] ", "[Unlayer] Left out: ")]);
       expect(output).toContain("After");
       expect(output).not.toContain("In the section");
     }
   });
 
-  it("says a lazy component suspends", () => {
+  it("says a lazy component suspends, where it is", () => {
     const Later = React.lazy(() => new Promise<{ default: React.FC }>(() => {}));
+    const email = <Email><Row><Column><Later /><Paragraph>Still here</Paragraph></Column></Row></Email>;
+    const said = '[Unlayer] it is async or suspends, and this renderer is synchronous: render with "@unlayer/react-elements/async", or load its data first and pass it as props (in <lazy> at Row 1 › Column 1 › lazy)';
+    expect(() => renderToHtml(email)).toThrow(said);
     let html = "";
-    expect(messages(() => (html = renderToHtml(<Email><Row><Column><Later /><Paragraph>Still here</Paragraph></Column></Row></Email>)))).toEqual([
-      "[Unlayer] <component> is async or suspends: Elements renders synchronously, so it's left out. Load its data first and pass it as props.",
-    ]);
-    expect(html).toContain("Still here");
-  });
-
-  it("says one suspends in React's production build, which names it by its error number (#426)", () => {
-    // What React's production build throws where a component suspends in a synchronous render.
-    const Later = () => {
-      throw new Error("Minified React error #426; visit https://react.dev/errors/426 for the full message");
-    };
-    let html = "";
-    expect(messages(() => (html = renderToHtml(<Email><Row><Column><Later /><Paragraph>Still here</Paragraph></Column></Row></Email>)))).toEqual([
-      "[Unlayer] <Later> is async or suspends: Elements renders synchronously, so it's left out. Load its data first and pass it as props.",
-    ]);
+    expect(messages(() => (html = renderToHtml(email, { onError: "omit" })))).toEqual([said.replace("[Unlayer] ", "[Unlayer] Left out: ")]);
     expect(html).toContain("Still here");
   });
 
@@ -252,13 +330,15 @@ describe("HTML from a component in a Column", () => {
     }
   });
 
-  it("keeps markup other than a bare div as it is: a link, a table, an image, elements side by side", () => {
+  it("keeps markup other than a bare div as it is: a table, an image, a linked image, a styled rule, elements side by side", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
     try {
       const shapes: Array<[React.FC, string]> = [
-        [() => <a href="https://example.com/visit">Visit</a>, '<a href="https://example.com/visit">Visit</a>'],
         [() => <table><tbody><tr><td align="right">cell</td></tr></tbody></table>, '<table><tbody><tr><td align="right">cell</td></tr></tbody></table>'],
         [() => <img src="https://example.com/pic.png" alt="pic" />, '<img src="https://example.com/pic.png" alt="pic"/>'],
+        // A link or a rule its block couldn't hold all of (an image in the link, the rule's style) stays as it is.
+        [() => <a href="https://example.com"><img src="https://example.com/logo.png" alt="Logo" width="120" /></a>, '<a href="https://example.com"><img src="https://example.com/logo.png" alt="Logo" width="120"/></a>'],
+        [() => <hr style={{ borderTop: "2px dashed #cccccc" }} />, '<hr style="border-top:2px dashed #cccccc"/>'],
         [() => <><div>one</div><p>two</p></>, "<div>one</div><p>two</p>"],
       ];
       for (const [Shape, kept] of shapes) {
@@ -273,6 +353,89 @@ describe("HTML from a component in a Column", () => {
     }
   });
 
+  // Every kind of component is asked what it returned: an element given `dangerouslySetInnerHTML` gives what's in it,
+  // any other element is kept whole, with its styles.
+  const Ctx = React.createContext(0);
+  const kinds = (element: React.ReactElement): Record<string, React.ReactElement> => {
+    function Fn() {
+      return element;
+    }
+    class Cls extends React.Component {
+      render() {
+        return element;
+      }
+    }
+    // (Loaded already: a synchronous render renders it.)
+    const loaded = (type: React.ComponentType) => React.lazy(() => ({ then: (resolve: (m: { default: React.ComponentType }) => void) => resolve({ default: type }) }) as Promise<{ default: React.ComponentType }>);
+    const Forward = React.forwardRef(() => element);
+    return {
+      "a function": <Fn />,
+      "a class": <Cls />,
+      "a memo'd function": React.createElement(memo(Fn)),
+      "a memo'd class": React.createElement(memo(Cls)),
+      "a forwardRef": <Forward />,
+      "a memo'd forwardRef": React.createElement(memo(Forward)),
+      "a memo of a memo": React.createElement(memo(memo(Fn))),
+      "a lazy function": React.createElement(loaded(Fn)),
+      "a lazy class": React.createElement(loaded(Cls)),
+      "a context's Consumer": <Ctx.Consumer>{() => element}</Ctx.Consumer>,
+      "a context's Provider": <Ctx.Provider value={1}>{element}</Ctx.Provider>,
+      "a StrictMode": <React.StrictMode>{element}</React.StrictMode>,
+      "a Suspense": <React.Suspense>{element}</React.Suspense>,
+    };
+  };
+  const shapes: Array<[string, React.ReactElement, string]> = [
+    ["keeps the element around its content", <div style={{ backgroundColor: "red" }}>Hi</div>, '<div style="background-color:red">Hi</div>'],
+    ["gives what's in an element given dangerouslySetInnerHTML", <div dangerouslySetInnerHTML={{ __html: "<p>Hi</p>" }} />, "<p>Hi</p>"],
+  ];
+  for (const [what, shape, kept] of shapes) {
+    it.each(Object.entries(kinds(shape)))(`${what}, from %s`, async (_, node) => {
+      const email = <Email><Row><Column>{node}</Column></Row></Email>;
+      const block = (design: { body: { rows: any[] } }) => design.body.rows[0].columns[0].contents;
+      expect(block(renderToJson(email))).toEqual([expect.objectContaining({ type: "html", values: expect.objectContaining({ html: kept }) })]);
+      expect(renderToHtml(email)).toContain(kept);
+      expect(block(await asyncRenderers.renderToJson(email))).toEqual([expect.objectContaining({ type: "html", values: expect.objectContaining({ html: kept }) })]);
+    });
+  }
+
+  it("asks a component the async renderers waited for what it returned: an async one, a class that suspended, a lazy one", async () => {
+    const element = <div style={{ backgroundColor: "red" }}>Hi</div>;
+    const kept = '<div style="background-color:red">Hi</div>';
+    const later = <T,>(value: T) => new Promise<T>((resolve) => setTimeout(() => resolve(value), 1));
+    let ready: Promise<unknown> | undefined;
+    class Suspends extends React.Component {
+      render() {
+        if (!ready) throw (ready = later(null));
+        return element;
+      }
+    }
+    const Async = async () => (await later(null), element);
+    const Lazy = React.lazy(() => later({ default: () => element }));
+    const LazyClass = React.lazy(() => later({ default: Suspends }));
+    for (const node of [<Suspends key="a" />, React.createElement(Async as unknown as React.FC), <Lazy key="c" />, <LazyClass key="d" />]) {
+      ready = undefined;
+      const design = await asyncRenderers.renderToJson(<Email><Row><Column>{node}</Column></Row></Email>);
+      expect(design.body.rows[0].columns[0].contents).toEqual([expect.objectContaining({ type: "html", values: expect.objectContaining({ html: kept }) })]);
+    }
+  });
+
+  it("makes a link alone a Paragraph holding it, and a rule a Divider: blocks the design can edit", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const Visit = () => <a href="https://example.com/visit" target="_self">Visit <b>now</b></a>;
+      const email = <Email><Row><Column><Visit /><hr /></Column></Row></Email>;
+      const html = renderToHtml(email);
+      expect(html).toContain('<a href="https://example.com/visit" target="_self">Visit <b>now</b></a>');
+      expect(html).toContain("u_content_divider");
+      const [link, rule] = renderToJson(email).body.rows[0].columns[0].contents;
+      expect(link).toMatchObject({ type: "text", values: { text: '<a href="https://example.com/visit" target="_self">Visit <b>now</b></a>' } });
+      expect(rule.type).toBe("divider");
+      expect(warn).not.toHaveBeenCalled();
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
   it("says so when markup comes with blocks, which a Column can't hold together", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
     try {
@@ -297,22 +460,36 @@ describe("HTML from a component in a Column", () => {
 });
 
 describe("a component inside markup", () => {
-  it("that throws is left out, and the rest renders (markup straight in a Column isn't rendered, as before)", () => {
+  it("that throws fails the render; left out (onError: \"omit\"), the rest renders (markup straight in a Column isn't rendered, as before)", () => {
     const error = vi.spyOn(console, "error").mockImplementation(() => {});
     try {
+      const deep = new Error("deep");
       const Boom = () => {
-        throw new Error("deep");
+        throw deep;
       };
-      const html = renderToHtml(<Email><Row><Column><Paragraph>Before</Paragraph><div><Boom /></div><Paragraph>After</Paragraph></Column></Row></Email>);
+      const email = <Email><Row><Column><Paragraph>Before</Paragraph><div><Boom /></div><Paragraph>After</Paragraph></Column></Row></Email>;
+      expect(() => renderToHtml(email)).toThrow("[Unlayer] deep (in <Boom> at Row 1 › Column 1 › Boom)");
+      const html = renderToHtml(email, { onError: "omit" });
       expect(html).toContain("Before");
       expect(html).toContain("After");
-      expect(error).toHaveBeenCalledWith("[Unlayer] <Boom> threw while rendering, so it's left out:", expect.anything());
+      expect(error).toHaveBeenCalledWith("[Unlayer] Left out: deep (in <Boom> at Row 1 › Column 1 › Boom)", deep);
     } finally {
       error.mockRestore();
     }
   });
 });
 
+describe("markup holding what writes nothing", () => {
+  it("is markup: a <Font> in a link straight in a Column leaves the link a Paragraph, in the HTML and the design", () => {
+    const font = <Font family="Inter" url="https://fonts.example.com/inter.css" />;
+    const email = <Email><Row><Column><a href="https://example.com/x">{font}Go</a><Paragraph>After</Paragraph></Column></Row></Email>;
+    const contents = renderToJson(email).body.rows[0].columns[0].contents as { type: string; values: { text?: string } }[];
+    expect(contents.map((content) => content.type)).toEqual(["text", "text"]);
+    expect(contents[0].values.text).toContain('href="https://example.com/x"');
+    expect(renderToHtml(email)).toContain(">Go</a>");
+  });
+});
+
 describe("a block rendered to a string inside a component", () => {
   it("is what the block renders, with Elements' own render functions and with react-dom's", () => {
     const viaParts = () => renderToHtmlParts(<Paragraph>From parts</Paragraph>).body;
@@ -359,8 +536,8 @@ describe("a block rendered to a string inside a component", () => {
 });
 
 describe("an async component whose data load fails", () => {
-  it("isn't called, and its rejection can't end the process", async () => {
-    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  it("isn't called by the synchronous renderers, and its rejection can't end the process", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
     let calls = 0;
     async function Orders() {
       calls++;
@@ -369,24 +546,81 @@ describe("an async component whose data load fails", () => {
     }
     try {
       const email = <Email>{block("Hello")}<Orders /><Row><Column><Orders /><Paragraph>In a column</Paragraph></Column></Row></Email>;
-      expect(renderToHtml(email)).toContain("In a column");
-      expect(JSON.stringify(renderToJson(email))).toContain("Hello");
+      expect(() => renderToHtml(email)).toThrow("(in <Orders>)");
+      expect(renderToHtml(email, { onError: "omit" })).toContain("In a column");
+      expect(JSON.stringify(renderToJson(email, { onError: "omit" }))).toContain("Hello");
       // Vitest fails the run on an unhandled rejection: give one the time to happen.
       await new Promise((resolve) => setTimeout(resolve, 30));
       expect(calls).toBe(0);
-      expect(warn).toHaveBeenCalledWith(expect.stringContaining("<Orders> is async or suspends"));
+      expect(error).toHaveBeenCalledWith(expect.stringContaining("(in <Orders> at Row 2 › Column 1 › Orders)"));
     } finally {
-      warn.mockRestore();
+      error.mockRestore();
     }
   });
 });
 
 describe("React's warnings about a template", () => {
-  // React 19 says where a list without keys is rendered: the Row, Column or block it's in, not Elements' own wrapper.
-  it("name the Elements component the list is in", async () => {
-    const { whileCollecting } = await import("./record");
-    for (const name of ["Row", "Column", "Paragraph"]) {
-      expect((whileCollecting(() => null, () => null, name).type as { displayName?: string }).displayName).toBe(name);
+  // React says where a list without keys is rendered, in its development build; Elements renders it, and says so too,
+  // naming the component the list is in, once.
+  it.skipIf(process.env.NODE_ENV === "production")("name the component a list without keys is in, once", () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const items = ["Shoes", "Hat"];
+      const List = () => <>{items.map((item) => <Paragraph>{item}</Paragraph>)}</>;
+      const email = <Email><Row><Column><List /></Column></Row></Email>;
+      renderToHtml(email);
+      renderToHtml(email);
+      const keys = error.mock.calls.map((call) => String(call[0])).filter((m) => m.startsWith("[Unlayer]") && m.includes('unique "key"'));
+      // (React 18 says it where the list is made, in its development build; React 19 where it renders.)
+      if (Number.parseInt(React.version) >= 19) expect(keys).toEqual(['[Unlayer] Each child in a list should have a unique "key" prop (in the list <List> renders). See https://react.dev/link/warning-keys.']);
+      else expect(keys).toEqual([]);
+      // Two with the same key.
+      const Twins = () => <>{["a", "b"].map((item) => <Paragraph key="same">{item}</Paragraph>)}</>;
+      renderToHtml(<Email><Row><Column><Twins /></Column></Row></Email>);
+      expect(error.mock.calls.map((call) => String(call[0]))).toContain('[Unlayer] Two children in a list have the same key, "same" (in the list <Twins> renders): keys should be unique.');
+    } finally {
+      error.mockRestore();
+    }
+  });
+
+  it.skipIf(process.env.NODE_ENV === "production")("say a bounded number of them (a list's keys can come from data), then once that no more are said", () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const Pairs = ({ ids }: { ids: number[] }) => <>{ids.flatMap((id) => [<Paragraph key={`id-${id}`}>a</Paragraph>, <Paragraph key={`id-${id}`}>b</Paragraph>])}</>;
+      for (let batch = 0; batch < 3; batch++) renderToHtml(<Email><Row><Column><Pairs ids={Array.from({ length: 100 }, (_, i) => batch * 100 + i)} /></Column></Row></Email>);
+      const said = error.mock.calls.map((call) => String(call[0])).filter((m) => m.startsWith("[Unlayer]"));
+      expect(said.length).toBeLessThanOrEqual(101);
+      expect(said.at(-1)).toBe("[Unlayer] More warnings about keys in lists aren't said.");
+    } finally {
+      error.mockRestore();
+    }
+  });
+});
+
+describe("keys in lists of lists", () => {
+  // The React Email migration writes a list item that's several Rows as a list of them (`articles.map((article) =>
+  // [<Row key={0} />, <Row key={1} />])`): each list's keys are its own, as in React, so a key in each isn't two
+  // children with the same key.
+  it("are each list's own, in every renderer", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const articles = ["One", "Two", "Three"];
+      const email = (
+        <Email>
+          {articles.map((title, index) => [
+            <Row key={0}><Column><Paragraph>{title}</Paragraph></Column></Row>,
+            <Row key={1}><Column>{index < articles.length - 1 ? <Paragraph>Next</Paragraph> : null}</Column></Row>,
+          ])}
+        </Email>
+      );
+      renderToHtml(email);
+      renderToJson(email);
+      renderToPlainText(email);
+      const { renderToHtml: renderAsync } = await import("../async");
+      await renderAsync(email);
+      expect(error.mock.calls.map((call) => String(call[0])).filter((m) => /key/.test(m))).toEqual([]);
+    } finally {
+      error.mockRestore();
     }
   });
 });
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 38dcacf7..bb099fbd 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -3,7 +3,18 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "lib": ["ES2020", "DOM"],
-    "types": ["react", "react-dom", "vitest/globals"]
+    "types": ["react", "react-dom", "vitest/globals"],
+    // The Tailwind entry imports the main one by the package's name (see tsup.config.ts).
+    "paths": {
+      "@unlayer/react-elements": ["./src/index.ts"],
+      "@unlayer/react-elements/tailwind": ["./src/tailwind/index.ts"],
+      "@unlayer/react-elements/code": ["./src/code/index.ts"],
+      "@unlayer/react-elements/markdown": ["./src/markdown/index.ts"],
+      "@unlayer/react-elements/font": ["./src/font/index.tsx"],
+      "@unlayer/react-elements/head": ["./src/head/index.tsx"],
+      "@unlayer/react-elements/async": ["./src/async/index.ts"],
+      "@unlayer/react-elements/codegen": ["./src/codegen/index.ts"]
+    }
   },
   "include": ["src/**/*"],
   "exclude": [
diff --git a/packages/react/tsconfig.typecheck.json b/packages/react/tsconfig.typecheck.json
index fb1ebaaf..99b03bf3 100644
--- a/packages/react/tsconfig.typecheck.json
+++ b/packages/react/tsconfig.typecheck.json
@@ -4,7 +4,17 @@
     "jsx": "react-jsx",
     "lib": ["ES2020", "DOM"],
     "types": ["react", "react-dom"],
-    "noEmit": true
+    "noEmit": true,
+    "paths": {
+      "@unlayer/react-elements": ["./src/index.ts"],
+      "@unlayer/react-elements/tailwind": ["./src/tailwind/index.ts"],
+      "@unlayer/react-elements/code": ["./src/code/index.ts"],
+      "@unlayer/react-elements/markdown": ["./src/markdown/index.ts"],
+      "@unlayer/react-elements/font": ["./src/font/index.tsx"],
+      "@unlayer/react-elements/head": ["./src/head/index.tsx"],
+      "@unlayer/react-elements/async": ["./src/async/index.ts"],
+      "@unlayer/react-elements/codegen": ["./src/codegen/index.ts"]
+    }
   },
-  "include": ["src/dx-types.test-d.tsx", "src/dx-contract.test.tsx"]
+  "include": ["src/dx-types.test-d.tsx", "src/dx-contract.test.tsx", "src/tailwind/index.ts", "src/tailwind/raw.d.ts", "src/font/index.tsx", "src/head/index.tsx", "src/code/index.ts", "src/code/hljs.d.ts", "src/engine/fizz-cleanup.d.ts", "src/markdown/index.ts", "src/async/index.ts", "src/codegen/index.ts"]
 }
diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts
index 8d2b47f2..a0b66692 100644
--- a/packages/react/tsup.config.ts
+++ b/packages/react/tsup.config.ts
@@ -1,7 +1,15 @@
 import { defineConfig } from 'tsup';
+import { readFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
 
-export default defineConfig({
-  entry: ['src/index.ts'],
+const require = createRequire(import.meta.url);
+
+export default defineConfig([{
+  // The other entries ("@unlayer/react-elements/tailwind", …) import the main one by its name, so all share one copy
+  // of Elements. Each keeps what only it needs out of the main entry: `tailwindcss` (an optional peer dependency,
+  // loaded when it's first asked for), Markdown's parser and the code highlighter (built in: see noExternal).
+  // `codegen` (a design as Elements code) is pure: no React, no Node APIs, and nothing from the main entry.
+  entry: { index: 'src/index.ts', tailwind: 'src/tailwind/index.ts', font: 'src/font/index.tsx', head: 'src/head/index.tsx', code: 'src/code/index.ts', markdown: 'src/markdown/index.ts', async: 'src/async/index.ts', codegen: 'src/codegen/index.ts' },
   format: ['cjs', 'esm'],
   dts: {
     // Inline types from private workspace packages and their type deps
@@ -10,16 +18,34 @@ export default defineConfig({
   },
   splitting: false,
   sourcemap: true,
-  clean: true,
-  external: ['react', 'react-dom'],
-  // The CommonJS build can load another module of react-dom's with the `require` it's loaded with; the module build
-  // uses Node's (see src/utils/server-renderer.ts), so it has no stand-in for `require`.
-  esbuildOptions(options, { format }) {
-    options.define = { ...options.define, __UNLAYER_CJS__: String(format === 'cjs') };
-  },
+  // (Not `@unlayer/react-elements/fizz-cleanup`'s modules, which the two builds below write at the same time.)
+  clean: ['!fizz-cleanup.*'],
+  // (`@unlayer/react-elements/fizz-cleanup` too, the package's export that the runtime loading Elements picks:
+  // react-dom/server's static renderer in Node, nothing elsewhere; see src/engine/fizz-cleanup.node.ts.)
+  external: ['react', 'react-dom', '@unlayer/react-elements'],
+  esbuildPlugins: [
+    {
+      // `import text from "…?raw"`: the file's text, built in (Tailwind's default theme, as Vite reads it in tests).
+      name: 'raw',
+      setup(build) {
+        // The path as written (with its `?raw`, which tsup's CSS plugin, for paths ending in .css, leaves alone; and no
+        // folder of the machine that built it in the bundle), the file in pluginData.
+        build.onResolve({ filter: /\?raw$/ }, (args) => ({ path: args.path, namespace: 'raw', pluginData: require.resolve(args.path.slice(0, -4), { paths: [args.resolveDir] }) }));
+        build.onLoad({ filter: /\?raw$/, namespace: 'raw' }, async (args) => ({ contents: await readFile(args.pluginData, 'utf8'), loader: 'text' }));
+      },
+    },
+  ],
   // Bundle @unlayer-internal/shared-elements into the output so consumers
   // don't need to install it separately (it's a private workspace package).
   // Its own deps (Lexical, exporters) stay external via our dependencies.
-  noExternal: ['@unlayer-internal/shared-elements'],
+  // marked and highlight.js are built into the Markdown and code entries (their licenses in THIRD_PARTY_LICENSES.md):
+  // nothing more to install, the same code in every module system (marked is ESM-only), and highlight.js's
+  // languages beyond the ones built in aren't downloaded by everyone who installs Elements.
+  noExternal: ['@unlayer-internal/shared-elements', /\?raw$/, 'marked', /^highlight\.js/],
   treeshake: true,
-});
+},
+// `@unlayer/react-elements/fizz-cleanup`'s modules, Node's and the one for every other runtime, each in both formats
+// (the CommonJS build requires them, also where a runtime can't require an ES module: Jest's jsdom, an older Node
+// under react-server; and Vite can't run a CommonJS file it inlines).
+{ entry: { 'fizz-cleanup.node': 'src/engine/fizz-cleanup.node.ts' }, format: ['esm', 'cjs'], sourcemap: true, clean: false, external: ['react-dom'] },
+{ entry: { 'fizz-cleanup.noop': 'src/engine/fizz-cleanup.noop.ts' }, format: ['esm', 'cjs'], sourcemap: true, clean: false }]);
diff --git a/packages/react/vitest.config.ts b/packages/react/vitest.config.ts
index f3450ca8..e9fd7d17 100644
--- a/packages/react/vitest.config.ts
+++ b/packages/react/vitest.config.ts
@@ -1,11 +1,28 @@
 import { coverageConfigDefaults, defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
+import { fileURLToPath } from 'node:url';
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    // The other entries import the main one (and each other) by the package's name (see tsup.config.ts): their sources here.
+    alias: [
+      { find: /^@unlayer\/react-elements$/, replacement: fileURLToPath(new URL('./src/index.ts', import.meta.url)) },
+      ...['tailwind', 'code', 'markdown', 'async', 'codegen'].map((entry) => ({ find: new RegExp(`^@unlayer/react-elements/${entry}$`), replacement: fileURLToPath(new URL(`./src/${entry}/index.ts`, import.meta.url)) })),
+      { find: /^@unlayer\/react-elements\/font$/, replacement: fileURLToPath(new URL('./src/font/index.tsx', import.meta.url)) },
+      { find: /^@unlayer\/react-elements\/head$/, replacement: fileURLToPath(new URL('./src/head/index.tsx', import.meta.url)) },
+      // The package's export that the runtime picks (package.json names built modules): Node's, its source.
+      { find: /^@unlayer\/react-elements\/fizz-cleanup$/, replacement: fileURLToPath(new URL('./src/engine/fizz-cleanup.node.ts', import.meta.url)) },
+    ],
+  },
   test: {
     environment: 'jsdom',
     setupFiles: ['./src/test-setup.ts'],
+    // Many tests here are a few seconds of CPU on a laptop and several times that on a CI runner running other tests at
+    // once (on GitHub's, a test of 0.2 s here took 3.1 s): their own timings say what's too slow, not vitest's default 5 s.
+    testTimeout: 30_000,
+    // Tailwind's default theme, which the Tailwind entry builds in (`?raw`): its text (Vitest empties CSS otherwise).
+    css: { include: [/tailwindcss\/theme\.css/] },
     globals: true,
     coverage: {
       exclude: [
diff --git a/packages/shared/src/config.ts b/packages/shared/src/config.ts
index 535008cd..9131c795 100644
--- a/packages/shared/src/config.ts
+++ b/packages/shared/src/config.ts
@@ -1,4 +1,5 @@
 import type { RenderMode } from "./types";
+import type { OnError } from "./render-error";
 
 export interface HeadConfig {
   hasFeature?: (featureName: string) => boolean;
@@ -9,9 +10,29 @@ export interface UnlayerConfig {
   cdnBaseUrl: string;
   toSafeHtml?: (text: string, options?: any) => string;
   textDirection?: string;
+  /**
+   * The editor's merge tag state its Table exporter reads, not values for merge tags (Elements writes `{{name}}` as
+   * it is, for an email service to fill in): `{ mergeTags, mergeTagGroup, mergeTagRule }`, `mergeTags` as
+   * `unlayer.init({ mergeTags })` takes them. A Table whose values name the same group and rule has its rows between
+   * the rule's `before` and `after`.
+   */
   mergeTagState?: Record<string, any>;
   mode?: RenderMode;
   headConfig?: HeadConfig;
+  /**
+   * A part of the template that fails (a component that throws, a Row whose Columns don't fit its layout, an exporter
+   * that fails): `"throw"` (the default) fails the render with a RenderError naming it and where it is; `"omit"` leaves
+   * it out of the HTML, the plain text and the design alike, said with `console.error`; a function leaves it out and
+   * is given the RenderError instead.
+   */
+  onError?: OnError;
+  /**
+   * What the `useId()`s of the template's components start with, as React's `identifierPrefix` (`em-` gives `«em-R1»`),
+   * so an email or page placed in a page of yours keeps ids apart from the page's own: the render functions' option,
+   * a root's `config` or an `<UnlayerProvider>`'s. (A template component around the root takes it from the render's
+   * options or an `<UnlayerProvider>` around it: it's called before the root's `config` is read.)
+   */
+  idPrefix?: string;
 }
 
 export const DEFAULT_CONFIG: UnlayerConfig = {
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index b05873ed..6f9e85ac 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -8,6 +8,7 @@
 // Config
 export { DEFAULT_CONFIG } from "./config";
 export type { UnlayerConfig, HeadConfig } from "./config";
+export { RenderError, type OnError } from "./render-error";
 
 // Types
 export type {
@@ -40,6 +41,8 @@ export type {
   MenuItem,
   // Utility types
   RenderMode,
+  LooseValue,
+  ValuesInput,
   MobileProps,
   DeviceProps,
   // Design JSON types
@@ -65,21 +68,29 @@ export {
   textToTextJson,
   htmlToTextJson,
   generateHtmlFromTextJson,
+  textJsonToText,
 } from "./utils/lexical-helpers";
 
 // Utils - Value merging
 export { mergeValues } from "./utils/merge-values";
-export { cssValueSafe, normalizeColor, normalizeCssValues, normalizeFontStack } from "./utils/css-values";
+export { codePoint, entities } from "./utils/entities";
+export { cssValueSafe, normalizeColor, normalizeCssValues, normalizeFontStack, pxMerged, pxZeros } from "./utils/css-values";
 
 // Utils - Semantic props
 export {
   escapeText,
   escapeKeepingTags,
   mapSemanticProps,
+  isContentProp,
+  PROP_ALIASES,
   normalizeLinkValue,
+  unrunLinks,
+  unrunUrl,
+  safeVideoId,
   normalizeValuesForExporter,
 } from "./utils/semantic-props";
 export type { SemanticProps } from "./utils/semantic-props";
 
 // Utils - HTML to plain text
-export { htmlToPlainText } from "./utils/html-to-text";
+export { htmlToPlainText, type PlainTextOptions } from "./utils/html-to-text";
+export { replaceTags, rewrite } from "./utils/html-scan";
diff --git a/packages/shared/src/layouts.ts b/packages/shared/src/layouts.ts
index 23cf3034..12da1fc7 100644
--- a/packages/shared/src/layouts.ts
+++ b/packages/shared/src/layouts.ts
@@ -20,70 +20,21 @@ export interface ColumnLayout {
   widths: string[]; // e.g., ["50%", "50%"]
 }
 
-export const ColumnLayouts = {
-  OneColumn: {
-    name: 'OneColumn',
-    description: 'One full column (100%)',
-    cells: [1],
-    expectedColumns: 1,
-    widths: ['100%'],
-  } as ColumnLayout,
-
-  TwoEqual: {
-    name: 'TwoEqual',
-    description: 'Two equal columns (50% + 50%)',
-    cells: [1, 1],
-    expectedColumns: 2,
-    widths: ['50%', '50%'],
-  } as ColumnLayout,
-
-  TwoWideNarrow: {
-    name: 'TwoWideNarrow',
-    description: 'Two columns: wide + narrow (67% + 33%)',
-    cells: [2, 1],
-    expectedColumns: 2,
-    widths: ['66.67%', '33.33%'],
-  } as ColumnLayout,
-
-  TwoNarrowWide: {
-    name: 'TwoNarrowWide',
-    description: 'Two columns: narrow + wide (33% + 67%)',
-    cells: [1, 2],
-    expectedColumns: 2,
-    widths: ['33.33%', '66.67%'],
-  } as ColumnLayout,
-
-  ThreeEqual: {
-    name: 'ThreeEqual',
-    description: 'Three equal columns (33% + 33% + 33%)',
-    cells: [1, 1, 1],
-    expectedColumns: 3,
-    widths: ['33.33%', '33.33%', '33.33%'],
-  } as ColumnLayout,
-
-  ThreeNarrowWideNarrow: {
-    name: 'ThreeNarrowWideNarrow',
-    description: 'Three columns: narrow + wide + narrow (25% + 50% + 25%)',
-    cells: [1, 2, 1],
-    expectedColumns: 3,
-    widths: ['25%', '50%', '25%'],
-  } as ColumnLayout,
-
-  FourEqual: {
-    name: 'FourEqual',
-    description: 'Four equal columns (25% + 25% + 25% + 25%)',
-    cells: [1, 1, 1, 1],
-    expectedColumns: 4,
-    widths: ['25%', '25%', '25%', '25%'],
-  } as ColumnLayout,
+/** A layout from its name, its columns' relative widths and how it's described. */
+function layout(name: string, cells: number[], description: string): ColumnLayout {
+  const total = cells.reduce((a, b) => a + b);
+  return { name, description, cells, expectedColumns: cells.length, widths: cells.map((cell) => `${+((cell / total) * 100).toFixed(2)}%`) };
+}
 
-  FiveEqual: {
-    name: 'FiveEqual',
-    description: 'Five equal columns (20% + 20% + 20% + 20% + 20%)',
-    cells: [1, 1, 1, 1, 1],
-    expectedColumns: 5,
-    widths: ['20%', '20%', '20%', '20%', '20%'],
-  } as ColumnLayout,
+export const ColumnLayouts = {
+  OneColumn: layout('OneColumn', [1], 'One full column (100%)'),
+  TwoEqual: layout('TwoEqual', [1, 1], 'Two equal columns (50% + 50%)'),
+  TwoWideNarrow: layout('TwoWideNarrow', [2, 1], 'Two columns: wide + narrow (67% + 33%)'),
+  TwoNarrowWide: layout('TwoNarrowWide', [1, 2], 'Two columns: narrow + wide (33% + 67%)'),
+  ThreeEqual: layout('ThreeEqual', [1, 1, 1], 'Three equal columns (33% + 33% + 33%)'),
+  ThreeNarrowWideNarrow: layout('ThreeNarrowWideNarrow', [1, 2, 1], 'Three columns: narrow + wide + narrow (25% + 50% + 25%)'),
+  FourEqual: layout('FourEqual', [1, 1, 1, 1], 'Four equal columns (25% + 25% + 25% + 25%)'),
+  FiveEqual: layout('FiveEqual', [1, 1, 1, 1, 1], 'Five equal columns (20% + 20% + 20% + 20% + 20%)'),
 };
 
 // Export the layout type for strict typing
diff --git a/packages/shared/src/render-error.ts b/packages/shared/src/render-error.ts
new file mode 100644
index 00000000..23fecae0
--- /dev/null
+++ b/packages/shared/src/render-error.ts
@@ -0,0 +1,29 @@
+/**
+ * A part of a template that failed while it rendered: a component that throws (or is async, or suspends, in a
+ * synchronous render), a Row whose Columns don't fit its layout, an exporter that fails. The renderers throw it by
+ * default; with `onError: "omit"` (or a function) they leave that part out of the HTML, the plain text and the design
+ * alike, and list it.
+ */
+export class RenderError extends Error {
+  /** The component that failed (`Hero`, `Row`, `Button`, `div`). */
+  readonly component: string;
+  /** Where it is in the template: `Row 3 › Column 1 › Hero`. */
+  readonly position: string;
+
+  constructor(what: string, component: string, position: string, cause?: unknown) {
+    super(`[Unlayer] ${what} (in <${component}>${position && position !== component ? ` at ${position}` : ""})`);
+    this.name = "RenderError";
+    this.component = component;
+    this.position = position;
+    // The original error (its stack points at the template's line): Error's own `cause`.
+    if (cause !== undefined) Object.defineProperty(this, "cause", { value: cause, configurable: true, writable: true });
+  }
+}
+
+/**
+ * What a render does with a part of the template that fails. `"throw"` (the default): the render throws a
+ * RenderError. `"omit"`: the part is left out of the HTML, the plain text and the design alike, and each part left out
+ * is said with `console.error` (and listed in `renderToHtmlParts`'s `omitted`). A function: the part is left out and
+ * the RenderError given to it (instead of the console); it can throw it to fail the render.
+ */
+export type OnError = "throw" | "omit" | ((error: RenderError) => void);
diff --git a/packages/shared/src/test-timing.ts b/packages/shared/src/test-timing.ts
new file mode 100644
index 00000000..cd753582
--- /dev/null
+++ b/packages/shared/src/test-timing.ts
@@ -0,0 +1,102 @@
+/**
+ * (The same as packages/react/src/test-timing.ts: each package's tests run on their own.)
+ *
+ * Timing tests that hold on a busy or slower machine (a CI runner running other tests at once) and still fail on code
+ * whose cost grows faster than its size: every test here that times something goes through `growth` (a cost at two
+ * sizes) or `within` (a cost against a limit).
+ */
+
+/** Milliseconds `run` takes (awaited where it gives a promise), and what it gave. */
+async function timed<T>(run: () => T | Promise<T>): Promise<{ ms: number; result: T }> {
+  const start = performance.now();
+  const result = await run();
+  return { ms: performance.now() - start, result };
+}
+
+/**
+ * How many times slower this machine runs now than the one the limits were set on (1 at least): a fixed piece of
+ * string work, the fastest of three, against what it took there (Node 20, about 14 ms).
+ */
+export function slowness(): number {
+  const work = () => {
+    const text = '<p class="a b">x &amp; y, <a href="https://e.test/1">z</a></p>\n'.repeat(4000);
+    let n = 0;
+    for (let i = 0; i < 16; i++) n += text.replace(/<[^>]+>/g, "").split("&amp;").join("&").toUpperCase().length + JSON.stringify(text.split("\n")).length;
+    return n;
+  };
+  let fastest = Infinity;
+  for (let i = 0; i < 3; i++) {
+    const start = performance.now();
+    work();
+    fastest = Math.min(fastest, performance.now() - start);
+  }
+  return Math.max(1, fastest / 14);
+}
+
+/**
+ * Whether `run` takes less than `limit` ms (a limit set on a laptop, well under what the code it guards against took).
+ * One that takes longer is run twice more, its fastest kept, against the limit times this machine's `slowness` then:
+ * a garbage collection or a busy machine in one run isn't its cost, and a machine several times slower takes several
+ * times as long for the same work. Gives the fastest time, the limit it was held to, and what the first run gave.
+ *
+ * `retime` times another run in place of `run` (`again`), after what `before` gives it, untimed: where running it again
+ * would change what the test reads after (what it says), or would read what the first run kept (a handle's classes).
+ */
+export async function within<T, P = undefined>(
+  limit: number,
+  run: () => T | Promise<T>,
+  retime: { before?: () => P | Promise<P>; again?: (prepared: P) => unknown } = {}
+): Promise<{ ok: boolean; ms: number; limit: number; result: T }> {
+  const first = await timed(run);
+  if (first.ms < limit) return { ok: true, ms: first.ms, limit, result: first.result };
+  let ms = first.ms;
+  for (let i = 0; i < 2; i++) {
+    const prepared = (await retime.before?.()) as P;
+    ms = Math.min(ms, (await timed(() => (retime.again ? retime.again(prepared) : run()))).ms);
+  }
+  const scaled = limit * slowness();
+  return { ok: ms < scaled, ms, limit: scaled, result: first.result };
+}
+
+/**
+ * What a cost takes at two sizes (`time` takes the size and gives the milliseconds, or a promise of them), and whether
+ * it grows faster than its size: the larger more than `ratio` times the smaller and more than `floor` ms. Both sizes
+ * are timed on the same machine, so a slower one isn't taken for a slower cost.
+ *
+ * One that looks so is timed again: each size's fastest of three samples, a sample being as many timings as add up to
+ * `least` ms at least (20), their mean, so a small size's few milliseconds aren't noise; a garbage collection or a busy
+ * machine in one timing isn't its cost. (`time` is called again for a size: where what it times keeps what it built, it
+ * times on something fresh.) Given `next`, a size as much larger again, one that still looks so and took a second at
+ * most is timed there too, and grows only if it grows as fast again: a busy machine can slow a larger size more than a
+ * smaller one (its data out of the processor's caches, say), which looks like growth between them but isn't past
+ * them, where a cost that grows faster than its size grows faster at every size. (One past a second isn't: ten times
+ * its size could take minutes.)
+ */
+export async function growth(
+  time: (size: number) => number | Promise<number>,
+  [small, large]: [number, number],
+  { ratio, floor, next, least = 20 }: { ratio: number; floor: number; next?: number; least?: number }
+) {
+  const grows = (fast: number, quick: number) => fast > ratio * Math.max(quick, 0.05) && fast > floor;
+  const sample = async (size: number) => {
+    let total = 0;
+    let n = 0;
+    do {
+      total += await time(size);
+      n++;
+    } while (total < least && n < 100);
+    return total / n;
+  };
+  let quick = await time(small);
+  let fast = await time(large);
+  let past: number | undefined;
+  if (grows(fast, quick)) {
+    quick = Math.min(await sample(small), await sample(small), await sample(small));
+    fast = Math.min(fast, await sample(large), await sample(large));
+    if (next !== undefined && grows(fast, quick) && fast <= 1000) past = await time(next);
+  }
+  return { small: quick, large: fast, next: past, grows: grows(fast, quick) && (past === undefined || grows(past, fast)) };
+}
+
+/** `true` for a run `within` its limit, else what it took and the limit it was held to (for an assertion). */
+export const inTime = ({ ok, ms, limit }: { ok: boolean; ms: number; limit: number }): true | string => ok || `${ms.toFixed(0)} ms, past ${limit.toFixed(0)} ms`;
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index 6238988d..10f2e606 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -120,6 +120,40 @@ export interface MenuItem {
 
 export type RenderMode = "web" | "email" | "document";
 
+/** Any text, number, true or false, or null, keeping a type's own strings and numbers as suggestions (see LooseValue). */
+type AnyScalar = (string & {}) | (number & {}) | boolean | null;
+
+/**
+ * A value as the builder may store it, at any depth: its own type, or any text, number, true or false, or null (designs
+ * hold `lineHeight: 1.5`, `fontWeight: "700"`, a padding as a number). Objects and lists keep their keys checked.
+ * `(string & {})` and `(number & {})` keep the type's own strings and numbers as suggestions, where a plain `string`
+ * would swallow them: don't simplify them.
+ */
+export type LooseValue<T> = T extends string | number | boolean | null | undefined
+  ? T | AnyScalar
+  : T extends (...args: any[]) => any
+    ? T
+    : T extends readonly (infer Item)[]
+      ? readonly LooseValue<Item>[] | AnyScalar
+      : T extends object
+        ? { [K in keyof T]?: LooseValue<T[K]> } | AnyScalar
+        : T;
+
+/**
+ * What a component's `values` prop takes: the builder's values, as many as you set (the defaults fill in the rest),
+ * at any depth. Its keys are checked, so a misspelled one is a type error; its values aren't (they reach the
+ * renderer as they are, as the builder stores them). The flat props are the typed way to set a value.
+ */
+export type ValuesInput<V> = { [K in keyof V]?: LooseValue<V[K]> } & {
+  /** Settings for one device (`mobile`, `desktop`), as the builder stores them: the `mobile` prop sets the phone's. */
+  _override?: {
+    mobile?: { [K in keyof V]?: LooseValue<V[K]> } & { hideMobile?: boolean };
+    desktop?: { [K in keyof V]?: LooseValue<V[K]> } & { hideDesktop?: boolean };
+  };
+  /** Hidden on a desktop screen (the `hideOnDesktop` prop). */
+  hideDesktop?: boolean;
+};
+
 // ============================================
 // DESIGN JSON TYPES (Unlayer editor schema)
 // ============================================
diff --git a/packages/shared/src/utils/css-values.test.ts b/packages/shared/src/utils/css-values.test.ts
index f39a5819..ade08bcb 100644
--- a/packages/shared/src/utils/css-values.test.ts
+++ b/packages/shared/src/utils/css-values.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
-import { normalizeColor, normalizeCssValues, normalizeFontStack } from "./css-values";
+import { cssValueSafe, normalizeColor, normalizeCssValues, normalizeFontStack, pxZeros } from "./css-values";
+import { inTime, within } from "../test-timing";
 
 describe("normalizeColor", () => {
   it("writes opaque rgb()/rgba() as hex, in comma or space syntax", () => {
@@ -14,13 +15,13 @@ describe("normalizeColor", () => {
     expect(normalizeColor("rgb(0 0 0 / 25%)")).toBe("rgba(0, 0, 0, 0.25)");
   });
 
-  it("reads a long value from data quickly (no backtracking)", () => {
+  it("reads a long value from data quickly (no backtracking)", async () => {
     const digits = "1".repeat(48);
     const spaces = " ".repeat(48);
     for (const value of [`rgb(${digits}${spaces}${digits}${spaces}x`, `rgb(${"1".repeat(195)}x`, `rgb(1${" ".repeat(190)}x`, `rgb(1 ${"1 ".repeat(95)}x`, `rgb(${"1 1 ".repeat(48)}!`]) {
-      const start = performance.now();
-      expect(normalizeColor(value)).toBe(value);
-      expect(performance.now() - start, value.slice(0, 20)).toBeLessThan(20);
+      const timing = await within(20, () => normalizeColor(value));
+      expect(timing.result).toBe(value);
+      expect([value.slice(0, 20), inTime(timing)]).toEqual([value.slice(0, 20), true]);
     }
   });
 
@@ -74,21 +75,21 @@ describe("normalizeCssValues", () => {
     expect(input.color).toBe("rgb(1, 2, 3)");
   });
 
-  it("passes a long value through at once", () => {
+  it("passes a long value through at once", async () => {
     const value = `rgb(1${" ".repeat(50_000)}`;
-    const start = performance.now();
-    expect(normalizeColor(value)).toBe(value);
-    expect(performance.now() - start).toBeLessThan(100);
+    const timing = await within(100, () => normalizeColor(value));
+    expect(timing.result).toBe(value);
+    expect(inTime(timing)).toBe(true);
   });
 
   it.each([
     ["digits", `rgb(${"1".repeat(40_000)}x, 1, 1)`],
     ["a decimal", `rgb(${"1".repeat(20_000)}.${"1".repeat(20_000)}x, 1, 1)`],
     ["spaces", `rgb(1${" ".repeat(40_000)}x, 1, 1)`],
-  ])("reads a long channel of %s in one pass (it took seconds, as 40,000 digits do in a pattern that backtracks)", (_, value) => {
-    const start = performance.now();
-    expect(normalizeColor(value)).toBe(value);
-    expect(performance.now() - start).toBeLessThan(100);
+  ])("reads a long channel of %s in one pass (it took seconds, as 40,000 digits do in a pattern that backtracks)", async (_, value) => {
+    const timing = await within(100, () => normalizeColor(value));
+    expect(timing.result).toBe(value);
+    expect(inTime(timing)).toBe(true);
   });
 
   it("still reads the channel forms it did", () => {
@@ -100,3 +101,28 @@ describe("normalizeCssValues", () => {
     expect(normalizeColor("rgb(1,,3)")).toBe("rgb(1,,3)");
   });
 });
+
+describe("pxZeros", () => {
+  // Every kind of key the design's schema types as px lengths, alone and as the end of a longer key.
+  const PX = ["padding", "margin", "radius", "width", "spacing", "fontSize"];
+
+  it.each(PX)("writes the bare zeros of a %s key as 0px, as any key ending in it", (name) => {
+    const ending = name[0].toUpperCase() + name.slice(1);
+    expect(pxZeros({ [name]: "0 0 12px", [`some${ending}`]: "0", [`some_${name}`]: "12px 0" })).toEqual({ [name]: "0px 0px 12px", [`some${ending}`]: "0px", [`some_${name}`]: "12px 0px" });
+  });
+
+  it("writes a body's margins so: documentMargin, popupCloseButton_margin", () => {
+    expect(pxZeros({ documentMargin: "0 0 12px", popupCloseButton_margin: "0" })).toEqual({ documentMargin: "0px 0px 12px", popupCloseButton_margin: "0px" });
+  });
+
+  it("leaves other keys, and lengths in another unit, as they are", () => {
+    expect(pxZeros({ lineHeight: "0", text: "0 0", marginal: "0", margin: "0 auto", padding: "1em 0" })).toEqual({ lineHeight: "0", text: "0 0", marginal: "0", margin: "0 auto", padding: "1em 0" });
+  });
+});
+
+describe("cssValueSafe", () => {
+  it("takes an image's whole data URL in base64, whose `;` is in the URL, and nothing that ends a declaration", () => {
+    for (const value of ["url(data:image/png;base64,iVBORw0KGgo+/A==)", "url('data:image/gif;base64,R0lGOD')", "url(data:image/png;base64,A) center / cover", "url(data:image/png,x)", "12px"]) expect([value, cssValueSafe(value)]).toEqual([value, true]);
+    for (const value of ["url(data:image/png;base64,AAAA);color:red", "url(data:image/svg+xml;base64,AAAA)", "url('data:image/png;base64,AAAA)", "url(data:image/png;charset=x;base64,AAAA)", "red;color:blue", "16px</style>", "a}", "calc(1px"]) expect([value, cssValueSafe(value)]).toEqual([value, false]);
+  });
+});
diff --git a/packages/shared/src/utils/css-values.ts b/packages/shared/src/utils/css-values.ts
index ce320a6d..31510ba8 100644
--- a/packages/shared/src/utils/css-values.ts
+++ b/packages/shared/src/utils/css-values.ts
@@ -7,6 +7,7 @@
  * as "#NaN0203". And font stacks are written into style="" attributes, so a
  * double-quoted family name ended the attribute early.
  */
+import { mergeValues } from "./merge-values";
 
 /** A channel: a number, maybe a percentage. One way to read each digit, so a long value can't make it backtrack. */
 const CHANNEL = /^-?(?:\d+(?:\.\d*)?|\.\d+)%?$/;
@@ -35,9 +36,12 @@ export function normalizeColor(value: string): string {
 /**
  * Whether a value can be written into a CSS declaration as it is: nothing that ends the declaration, the rule or
  * the `<style>` element (`16px</style><script>`, `;`, `}`), no comment that hides the rules after it (`/*`), and
- * every bracket closed by its own kind (`calc(12px` or `16px (]` would swallow the rules after it).
+ * every bracket closed by its own kind (`calc(12px` or `16px (]` would swallow the rules after it). A PNG, GIF, JPEG
+ * or WebP data URL in base64, whole (`url(data:image/png;base64,iVBOR…)`, quoted or not), can be: its `;` is in the
+ * URL, which CSS reads to its `)`, and base64 holds nothing that ends a declaration, a rule or an attribute.
  */
 export function cssValueSafe(text: string): boolean {
+  text = text.replace(/url\((')?data:image\/(?:png|gif|jpe?g|webp);base64,[a-z\d+/=]*\1\)/gi, "url()");
   if (/[<>{};]|\/\*|\*\//.test(text)) return false;
   const open: string[] = [];
   for (const c of text) {
@@ -73,15 +77,90 @@ export function normalizeFontStack(value: string): string {
  * new objects (values can alias the caller's, e.g. a shared style constant).
  */
 export function normalizeCssValues<T>(value: T, key?: string): T {
-  if (typeof value === "string") return (key === "fontFamily" ? normalizeFontStack(value) : key === "color" || key?.endsWith("Color") ? normalizeColor(value) : value) as T;
+  if (typeof value === "string") {
+    // (Only a stack with a double quote, and a color with a bracket, are written otherwise.)
+    if (key === "fontFamily") return (value.includes('"') ? normalizeFontStack(value) : value) as T;
+    return ((key === "color" || key?.endsWith("Color")) && value.includes("(") ? normalizeColor(value) : value) as T;
+  }
+  if (value === null || typeof value !== "object") return value;
   if (Array.isArray(value)) return value.map((item) => normalizeCssValues(item)) as T;
   if (!isPlainObject(value)) return value;
   const out: Record<string, unknown> = {};
   // A fontFamily object ({ label, value }) holds font stacks.
-  for (const [k, v] of Object.entries(value)) out[k] = normalizeCssValues(v, key === "fontFamily" ? key : k);
+  for (const k of Object.keys(value)) out[k] = normalizeCssValues(value[k], key === "fontFamily" ? key : k);
+  return out as T;
+}
+
+/**
+ * A design's values with each bare zero in its px lengths written `0px` (`0 0 12px` is `0px 0px 12px`), at any depth:
+ * the design's schema types these as px, where CSS and the editor read `0` as `0px`. Only where every part is a px
+ * length or a zero (`0 auto` and `1em 0` stay as they are); a custom tool's own values stay as it wrote them.
+ */
+export function pxZeros<T>(value: T, key = ""): T {
+  if (typeof value === "string") return (pxKey(key) && PX_LENGTHS.test(value) ? value.replace(/(^|\s)0(?=\s|$)/g, "$10px") : value) as T;
+  if (value === null || typeof value !== "object") return value;
+  if (Array.isArray(value)) return value.map((item) => pxZeros(item)) as T;
+  if (!isPlainObject(value) || "slug" in value) return value;
+  // A copy (the design shares no object with the defaults it's merged from), its keys in order.
+  const out: Record<string, unknown> = {};
+  for (const k of Object.keys(value)) {
+    const v = pxZeros(value[k], k);
+    if (k === "__proto__") Object.defineProperty(out, k, { value: v, enumerable: true, writable: true, configurable: true });
+    else out[k] = v;
+  }
+  return out as T;
+}
+
+/**
+ * `values` merged over `defaults` as mergeValues merges them, as pxZeros writes the result: a copy that shares no
+ * object with either, its px lengths' bare zeros `0px`. One pass, where the design is made (instead of a pass over
+ * the whole design after). `out`: the object it's written into, with what goes first.
+ */
+export function pxMerged<T>(defaults: T, values: unknown, key = "", out: Record<string, unknown> = {}): T {
+  const d = defaults as Record<string, unknown>;
+  if (!values) return Object.assign(out, copy(pxWritten(d, key))) as T;
+  const v = values as Record<string, unknown>;
+  // (A custom tool's own values, which pxZeros leaves as they are.)
+  if ("slug" in d || "slug" in v) return Object.assign(out, mergeValues(d, v)) as T;
+  const written = pxWritten(d, key) as Record<string, unknown>;
+  for (const k of Object.keys(d)) out[k] = Object.prototype.hasOwnProperty.call(v, k) ? merged(d[k], v[k], k) : copy(written[k]);
+  for (const k of Object.keys(v)) if (!Object.prototype.hasOwnProperty.call(d, k)) out[k] = pxZeros(v[k], k);
   return out as T;
 }
 
+/** A value over a default, as mergeValues merges it (plain objects into each other, anything else in its place). */
+const merged = (base: unknown, value: unknown, key: string) =>
+  value !== null && base !== null && typeof value === "object" && typeof base === "object" && !Array.isArray(value) && !Array.isArray(base) ? pxMerged(base, value, key) : pxZeros(value, key);
+
+/** Defaults as pxZeros writes them, worked out once each (they're constants): copied where they're used. */
+const pxWrittenDefaults = new WeakMap<object, unknown>();
+function pxWritten(defaults: unknown, key: string): unknown {
+  if (defaults === null || typeof defaults !== "object") return pxZeros(defaults, key);
+  let written = pxWrittenDefaults.get(defaults);
+  if (written === undefined) pxWrittenDefaults.set(defaults, (written = pxZeros(defaults, key)));
+  return written;
+}
+
+/** A copy of what pxZeros wrote: the objects and lists it made made again (what it left as it was, left). */
+function copy<T>(value: T): T {
+  if (value === null || typeof value !== "object") return value;
+  if (Array.isArray(value)) return value.map(copy) as T;
+  if (!isPlainObject(value) || "slug" in value) return value;
+  const out: Record<string, unknown> = {};
+  for (const k of Object.keys(value)) out[k] = copy(value[k]);
+  return out as T;
+}
+
+/** What a key the schema types as px lengths ends in: a padding or margin, a box of them, a radius, a width, a font size. */
+const PX_ENDINGS = ["padding", "margin", "radius", "width", "spacing", "fontsize"];
+const PX_KEY = new RegExp(`(${PX_ENDINGS.join("|")})$`, "i");
+/** Their last letters (lowercase char codes): most keys end in none of them, and aren't tested further. */
+const PX_LAST = new Set(PX_ENDINGS.map((ending) => ending.charCodeAt(ending.length - 1)));
+const PX_LENGTHS = /^\s*((-?[\d.]+px|0)(\s+|$))+$/;
+function pxKey(key: string): boolean {
+  return PX_LAST.has(key.charCodeAt(key.length - 1) | 32) && PX_KEY.test(key);
+}
+
 function isPlainObject(value: unknown): value is Record<string, unknown> {
   if (value === null || typeof value !== "object") return false;
   const proto = Object.getPrototypeOf(value);
diff --git a/packages/shared/src/utils/entities.ts b/packages/shared/src/utils/entities.ts
new file mode 100644
index 00000000..77bea6cb
--- /dev/null
+++ b/packages/shared/src/utils/entities.ts
@@ -0,0 +1,20 @@
+/**
+ * Text in an HTML attribute as the browser reads it: its character references decoded, to tell what a URL's scheme is
+ * (a link's, which the editor's exporters write as it's given, and a browser decodes: see semantic-props.ts's
+ * unrunUrl; the Markdown sanitizer's and the rich text in children's, in the React package).
+ */
+
+/** A numeric reference's character; one past Unicode's range (or a surrogate) is U+FFFD, as browsers read it. */
+export const codePoint = (n: number) => String.fromCodePoint(n > 0x10ffff || (n >= 0xd800 && n <= 0xdfff) ? 0xfffd : n);
+
+/** The named references a browser reads as ASCII (`&colon;`, `&lpar;`): the others are characters no check reads. */
+const NAMED: Record<string, string> = {
+  tab: "\t", newline: "\n", excl: "!", quot: '"', num: "#", dollar: "$", percnt: "%", amp: "&", apos: "'", lpar: "(", rpar: ")", ast: "*", midast: "*",
+  plus: "+", comma: ",", period: ".", sol: "/", colon: ":", semi: ";", lt: "<", equals: "=", gt: ">", quest: "?", commat: "@", lsqb: "[", lbrack: "[",
+  bsol: "\\", rsqb: "]", rbrack: "]", hat: "^", lowbar: "_", underbar: "_", grave: "`", diacriticalgrave: "`", lcub: "{", lbrace: "{", verbar: "|",
+  vert: "|", verticalline: "|", rcub: "}", rbrace: "}", fjlig: "fj",
+};
+
+/** An attribute's value as the browser reads it, its references decoded (in any case, and without `;`: reading more, never less). */
+export const entities = (text: string) =>
+  text.replace(/&(?:#(x[\da-f]+|\d+)|([a-z]+));?/gi, (whole, n?: string, name?: string) => (n ? codePoint(n[0].toLowerCase() === "x" ? parseInt(n.slice(1), 16) : Number(n)) : (NAMED[name!.toLowerCase()] ?? whole)));
diff --git a/packages/shared/src/utils/html-scan.ts b/packages/shared/src/utils/html-scan.ts
new file mode 100644
index 00000000..3cbcfe85
--- /dev/null
+++ b/packages/shared/src/utils/html-scan.ts
@@ -0,0 +1,358 @@
+/**
+ * Reading HTML for its plain text (html-to-text.ts) in time linear in its size, whatever it holds. The converter's
+ * regexes (`/<li[^>]*>([\s\S]*?)<\/li>/`, `/<img[^>]+alt=…/`) look from each place they could start to the end of the
+ * text where nothing ends them, again from the next: 40 KB of unclosed `<img alt="a" ` took a minute. These find the
+ * same matches, by finding each string's places once.
+ */
+
+/** Where `pattern` (global) next matches in a text, at or after a place, or -1: the text read once for it. */
+export type Next = (from: number) => number;
+
+/** The first place in `sorted` (ascending) whose number is `value` or more: a binary search. */
+function firstFrom(sorted: ArrayLike<number>, value: number): number {
+  let low = 0;
+  let high = sorted.length;
+  while (low < high) {
+    const mid = (low + high) >> 1;
+    if (sorted[mid] < value) low = mid + 1;
+    else high = mid;
+  }
+  return low;
+}
+
+/**
+ * Where `pattern` (global, its matches never overlapping) matches in `text`, each found once, as far as asked: in any
+ * order, a place is a binary search.
+ */
+export function places(text: string, pattern: RegExp): Next {
+  const at: number[] = [];
+  let read = 0;
+  return (from) => {
+    while ((!at.length || at[at.length - 1] < from) && read <= text.length) {
+      pattern.lastIndex = read;
+      const match = pattern.exec(text);
+      if (!match) read = text.length + 1;
+      else {
+        at.push(match.index);
+        read = match.index + 1;
+      }
+    }
+    const low = firstFrom(at, from);
+    return low < at.length ? at[low] : -1;
+  };
+}
+
+const WORD = /\w/;
+/** Whether `char` is a regex word character (`\w`); none past the text's end. */
+export const isWord = (char: string | undefined) => char !== undefined && WORD.test(char);
+
+/**
+ * `text` with parts of it replaced, read from each `<` on: `read` gives for one where the part starting there ends and
+ * what replaces it, else where to look for the next `<` from (nothing replaced), or nothing, which ends the reading.
+ */
+export function rewrite(text: string, read: (at: number) => [end: number, by: string] | number | undefined): string {
+  let out = "";
+  let kept = 0;
+  for (let at = text.indexOf("<"); at >= 0; ) {
+    const part = read(at);
+    if (part === undefined) break;
+    if (typeof part === "number") at = text.indexOf("<", part);
+    else {
+      out += text.slice(kept, at) + part[1];
+      at = text.indexOf("<", (kept = part[0]));
+    }
+  }
+  return out + text.slice(kept);
+}
+
+/**
+ * Each element `<name…>…close` in `text` replaced, as `/<name[^>]*>([\s\S]*?)close/gi` replaces them (`name` the start
+ * of its start tag, a sticky regex: `/<h[12]/iy`; `bounded`, with `\b` after it): the start tag to its first `>`, then
+ * what's in it to the first `close` after. `replace` is given the element and what's in it; `after`, a sticky regex,
+ * takes what follows the end tag into the element when it's there (`(\s*<\/td>)?`).
+ */
+export function replaceElements(
+  text: string,
+  name: RegExp,
+  close: RegExp,
+  replace: (element: string, content: string, after: string | undefined) => string,
+  { bounded = false, after }: { bounded?: boolean; after?: RegExp } = {}
+): string {
+  const gt = places(text, />/g);
+  const end = places(text, close);
+  return rewrite(text, (at) => {
+    name.lastIndex = at;
+    if (!name.test(text) || (bounded && isWord(text[name.lastIndex]))) return at + 1;
+    // Its start tag's `>`, then its end tag: where there's none, there's none after a later start either.
+    const open = gt(name.lastIndex);
+    const closing = open < 0 ? -1 : end(open + 1);
+    if (closing < 0) return;
+    close.lastIndex = closing;
+    let stop = closing + close.exec(text)![0].length;
+    let extra: string | undefined;
+    if (after) {
+      after.lastIndex = stop;
+      extra = after.exec(text)?.[0];
+      if (extra) stop += extra.length;
+    }
+    return [stop, replace(text.slice(at, stop), text.slice(open + 1, closing), extra)];
+  });
+}
+
+/**
+ * Each tag `<name…>` (a sticky regex for its start) in `text` to its first `>` replaced, as `/<name[^>]*>/gi` replaces
+ * them (`/<img[^>]*\/?>/`, `/<hr[^>]*\/?>/` too: the `/` is in what's before the `>`).
+ */
+export function replaceTags(text: string, name: RegExp, replace: (tag: string) => string): string {
+  const gt = places(text, />/g);
+  return rewrite(text, (at) => {
+    name.lastIndex = at;
+    if (!name.test(text)) return at + 1;
+    const close = gt(name.lastIndex);
+    return close < 0 ? undefined : [close + 1, replace(text.slice(at, close + 1))];
+  });
+}
+
+/**
+ * Where each place's attributes end in `text`, as `(?:[^>"']|"[^"]*"|'[^']*')*>` reads them from it: the `>` after
+ * them (a quoted value's `>` aside), or -1 where a quote isn't closed or no `>` follows. Worked out once, from the
+ * text's end.
+ */
+export function attributeEnds(text: string): Int32Array {
+  const ends = new Int32Array(text.length + 1);
+  ends[text.length] = -1;
+  let double = -1;
+  let single = -1;
+  for (let i = text.length - 1; i >= 0; i--) {
+    const char = text[i];
+    if (char === ">") ends[i] = i;
+    else if (char === '"' || char === "'") {
+      const close = char === '"' ? double : single;
+      ends[i] = close < 0 ? -1 : ends[close + 1];
+      if (char === '"') double = i;
+      else single = i;
+    } else ends[i] = ends[i + 1];
+  }
+  return ends;
+}
+
+/**
+ * `text` without each `open…close`, as `/<head[\s\S]*?<\/head>/gi` takes them out (`open` a sticky regex): from where
+ * it opens to the first `close` after. Where none closes, none after it does.
+ */
+export function removeBetween(text: string, open: RegExp, close: RegExp): string {
+  const end = places(text, close);
+  return rewrite(text, (at) => {
+    open.lastIndex = at;
+    if (!open.test(text)) return at + 1;
+    const closing = end(open.lastIndex);
+    if (closing < 0) return;
+    close.lastIndex = closing;
+    return [closing + close.exec(text)![0].length, ""];
+  });
+}
+
+/**
+ * Each image with alt text replaced, as `/<img[^>]+alt=["']([^"']+)["'][^>]*\/?>/gi` replaces it: the last `alt=` before
+ * the tag's first `>` (after a character of it) whose value is quoted, isn't empty and is followed by a `>`, to that
+ * `>`. Which `alt=`s are so is worked out once for each.
+ */
+export function replaceAltImages(text: string, replace: (alt: string) => string): string {
+  const gt = places(text, />/g);
+  const quote = places(text, /["']/g);
+  const alts = places(text, /alt=/gi);
+  // The `alt=`s found so far, in order, and for each the last one up to it whose value works (-1: none).
+  const found: number[] = [];
+  const working: number[] = [];
+  const ends: number[] = [];
+  /** The last `alt=` before `before` (worked out as far as needed), as an index in `found`, or -1. */
+  const lastBefore = (before: number): number => {
+    for (let next = alts(found.length ? found[found.length - 1] + 1 : 0); next >= 0 && next < before; next = alts(next + 1)) {
+      const value = next + 5;
+      const close = /["']/.test(text[next + 4] ?? "") ? quote(value) : -1;
+      const end = close > value ? gt(close + 1) : -1;
+      found.push(next);
+      ends.push(end);
+      working.push(end >= 0 ? found.length - 1 : working.length ? working[working.length - 1] : -1);
+    }
+    return firstFrom(found, before) - 1;
+  };
+  const start = /<img/iy;
+  return rewrite(text, (at) => {
+    start.lastIndex = at;
+    if (!start.test(text)) return at + 1;
+    const first = gt(at + 4);
+    if (first < 0) return;
+    const last = lastBefore(first);
+    const alt = last >= 0 ? working[last] : -1;
+    if (alt < 0 || found[alt] < at + 5) return at + 1;
+    const value = found[alt] + 5;
+    return [ends[alt] + 1, replace(text.slice(value, quote(value)))];
+  });
+}
+
+/**
+ * Markup without its tags, as `/<(?!%[^<>]*%>)[^>]+>/g` takes them out: from a `<` to the first `>` after a character
+ * of it. An email service's tag (`<%first_name%>`, SendGrid's; `<%= name %>`) isn't one: it's text to a browser too (a
+ * tag's name starts with a letter), which the service fills in, so it stays.
+ */
+export function untagged(text: string): string {
+  if (!text.includes("<")) return text;
+  const gt = places(text, />/g);
+  const angle = places(text, /[<>]/g);
+  return rewrite(text, (at) => {
+    if (text[at + 1] === "%") {
+      const end = angle(at + 2);
+      if (end > at + 2 && text[end] === ">" && text[end - 1] === "%") return at + 1;
+    }
+    const close = gt(at + 1);
+    if (close < 0) return;
+    return close === at + 1 ? at + 1 : [close + 1, ""];
+  });
+}
+
+const VOID = /^(area|br|col|embed|hr|img|input|link|meta|source|wbr)$/i;
+
+/** A name's tags: where each ends (after its `>`), and for each, where the element it's in ends (see withoutElements). */
+type Group = { at: Int32Array; below: Int32Array };
+
+/**
+ * `html` without the elements `test` picks by their start tag (what's in them goes too, nested ones of their name
+ * counted), as reading each start tag (`/<([a-z][\w-]*)\b[^>]*>/gi`) and then the tags of its name after it
+ * (`/<(\/?)name\b[^>]*>/gi`, its own closing it at depth 0) takes them out: read once, the tags of every name indexed
+ * together where one is first picked.
+ */
+export function withoutElements(html: string, test: (tag: string) => boolean): string {
+  const gt = places(html, />/g);
+  /**
+   * The tag names, as the prefixes of each that a word boundary ends (`a-b` is `a`, `a-` and `a-b`, as `<a\b` reads
+   * it), lowercased, numbered: a prefix is the one before it (0, none) and a step, a run of word characters or of `-`
+   * (`a-b` is `a-`, then `b`). A prefix is found by stepping, never by its text, so a name with a boundary at each
+   * character (`a-a-a-…`) is as many steps, not as many names of up to its length (which took memory and time growing
+   * with the name's length squared: 1.3 s and 0.9 GB for 40 KB). -1 where there's none (`make` unset).
+   */
+  const steps = new Map<string, number>();
+  const step = (from: number, part: string, make: boolean): number => {
+    const key = `${from} ${part}`;
+    let to = steps.get(key);
+    if (to === undefined && make) steps.set(key, (to = steps.size + 1));
+    return to ?? -1;
+  };
+  /**
+   * Each tag of each prefix (a tag of `a-b` is one of `a` too: `<a\b` reads it), in the text's order: where it ends and
+   * the depth it changes its prefix's by (of a prefix's tags sharing a `>`, the first: the rest are in it), and each
+   * prefix's together (`order`, from `starts[prefix]`). Read where a tag is first picked.
+   */
+  let tags: { starts: Int32Array; order: Int32Array; ends: number[]; changes: number[] } | undefined;
+  const read = () => {
+    const prefixes: number[] = [];
+    const ends: number[] = [];
+    const changes: number[] = [];
+    const last: number[] = [];
+    const tag = /<(\/?)([a-z][\w-]*)/iy;
+    for (let at = html.indexOf("<"); at >= 0; at = html.indexOf("<", at + 1)) {
+      tag.lastIndex = at;
+      const m = tag.exec(html);
+      if (!m) continue;
+      const nameStart = at + 1 + m[1].length;
+      const runEnd = nameStart + m[2].length;
+      const close = gt(runEnd);
+      if (close < 0) break;
+      const run = m[2].toLowerCase();
+      let prefix = 0;
+      let start = 0;
+      for (let end = 1; end <= run.length; end++) {
+        if (isWord(html[nameStart + end - 1]) === isWord(html[nameStart + end])) continue;
+        // (A step for each part, `a` then `-` then `a`: the prefix that ends here.)
+        prefix = step(prefix, run.slice(start, end), true);
+        start = end;
+        if (last[prefix] === close) continue;
+        last[prefix] = close;
+        prefixes.push(prefix);
+        ends.push(close + 1);
+        changes.push(html[close - 1] === "/" ? 0 : m[1] ? -1 : 1);
+      }
+    }
+    const starts = new Int32Array(steps.size + 2);
+    for (const prefix of prefixes) starts[prefix + 1]++;
+    for (let prefix = 1; prefix < starts.length; prefix++) starts[prefix] += starts[prefix - 1];
+    const order = new Int32Array(prefixes.length);
+    const next = starts.slice();
+    prefixes.forEach((prefix, k) => (order[next[prefix]++] = k));
+    return { starts, order, ends, changes };
+  };
+  const groups = new Map<number, Group>();
+  /** The tags of `name` (lowercased; a word boundary after it, as between each of its parts), or none. */
+  const groupOf = (name: string): Group | undefined => {
+    tags ??= read();
+    let prefix = 0;
+    for (let start = 0, end = 1; end <= name.length; end++) {
+      if (end < name.length && isWord(name[end - 1]) === isWord(name[end])) continue;
+      if ((prefix = step(prefix, name.slice(start, end), false)) < 0) return undefined;
+      start = end;
+    }
+    let group = groups.get(prefix);
+    if (!group) {
+      // Its tags' ends; the depth after each, and for each, the first tag after it where the depth is lower (its
+      // element's end).
+      const { starts, order, ends, changes } = tags;
+      const count = starts[prefix + 1] - starts[prefix];
+      const at = new Int32Array(count);
+      const sums = new Int32Array(count + 1);
+      for (let k = 0; k < count; k++) {
+        const tag = order[starts[prefix] + k];
+        at[k] = ends[tag];
+        sums[k + 1] = sums[k] + changes[tag];
+      }
+      const below = new Int32Array(count + 1).fill(-1);
+      const stack: number[] = [];
+      for (let k = count; k >= 0; k--) {
+        while (stack.length && sums[stack[stack.length - 1]] >= sums[k]) stack.pop();
+        below[k] = stack.length ? stack[stack.length - 1] : -1;
+        stack.push(k);
+      }
+      groups.set(prefix, (group = { at, below }));
+    }
+    return group;
+  };
+  const open = /<([a-z][\w-]*)/iy;
+  return rewrite(html, (at) => {
+    open.lastIndex = at;
+    const m = open.exec(html);
+    if (!m) return at + 1;
+    // Its name: the longest start of its letters, digits, `_` and `-` that a word boundary ends.
+    let nameEnd = at + 1 + m[1].length;
+    while (isWord(html[nameEnd - 1]) === isWord(html[nameEnd])) nameEnd--;
+    const close = gt(nameEnd);
+    if (close < 0) return;
+    if (!test(html.slice(at, close + 1))) return close + 1;
+    let end = close + 1;
+    const name = html.slice(at + 1, nameEnd);
+    if (html[close - 1] !== "/" && !VOID.test(name)) {
+      const group = groupOf(name.toLowerCase());
+      if (group) {
+        // The first of its name's tags after its start tag, and where the depth from there first falls below it.
+        const ends = group.below[firstFrom(group.at, end + 1)];
+        if (ends > 0) end = group.at[ends - 1];
+      }
+    }
+    return [end, ""];
+  });
+}
+
+/**
+ * Each link replaced, as `/<a\b((?:[^>"']|"[^"]*"|'[^']*')*)>([\s\S]*?)<\/a>/gi` replaces it: its attributes to the
+ * first `>` outside a quoted value, then what's in it to the first `</a>` after. `replace` is given the link, its
+ * attributes and what's in it.
+ */
+export function replaceLinks(text: string, replace: (link: string, attributes: string, content: string) => string): string {
+  const close = places(text, /<\/a>/gi);
+  let ends: Int32Array | undefined;
+  return rewrite(text, (at) => {
+    if ((text[at + 1] !== "a" && text[at + 1] !== "A") || isWord(text[at + 2])) return at + 1;
+    ends ??= attributeEnds(text);
+    const open = ends[at + 2];
+    const closing = open < 0 ? -1 : close(open + 1);
+    return closing < 0 ? at + 1 : [closing + 4, replace(text.slice(at, closing + 4), text.slice(at + 2, open), text.slice(open + 1, closing))];
+  });
+}
diff --git a/packages/shared/src/utils/html-to-text.test.ts b/packages/shared/src/utils/html-to-text.test.ts
index 38950cfe..f43b7a06 100644
--- a/packages/shared/src/utils/html-to-text.test.ts
+++ b/packages/shared/src/utils/html-to-text.test.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { htmlToPlainText } from "./html-to-text";
+import { growth, inTime, within } from "../test-timing";
 
 describe("htmlToPlainText", () => {
   it("returns empty string for empty input", () => {
@@ -7,6 +8,11 @@ describe("htmlToPlainText", () => {
     expect(htmlToPlainText(undefined as any)).toBe("");
   });
 
+  it("keeps preformatted text (code) as it is: its indentation, blank lines and markup's text", () => {
+    const html = '<p>Before</p><pre style="x"><code><span style="color:red">if</span> (a) {\n    go(&quot;x&quot;);\n\n  }</code></pre><p>After</p>';
+    expect(htmlToPlainText(html)).toBe('Before\nif (a) {\n    go("x");\n\n  }\nAfter');
+  });
+
   it("returns plain text unchanged", () => {
     expect(htmlToPlainText("Hello World")).toBe("Hello World");
   });
@@ -17,6 +23,14 @@ describe("htmlToPlainText", () => {
     expect(htmlToPlainText("<h2>Features</h2>")).toBe("FEATURES");
   });
 
+  it("keeps an email service's tags (`<%first_name%>`), which a browser reads as text too: in headings as written", () => {
+    expect(htmlToPlainText("<p>Hi <%first_name%>, <b>bold</b> <%= user.name %></p><h1>Hi <%first_name%></h1><ul><li>For <%company%></li></ul>")).toBe(
+      "Hi <%first_name%>, bold <%= user.name %>\n\nHI <%first_name%>\n- For <%company%>"
+    );
+    // What isn't one is still a tag.
+    expect(htmlToPlainText("<p>a<%b c>d</p>")).toBe("ad");
+  });
+
   it("uppercases an h1/h2 around its entities, which still decode (`Q&A`, not `Q&AMP;A`)", () => {
     expect(htmlToPlainText("<h1>Q&amp;A &lt;3 caf\u00e9</h1>")).toBe("Q&A <3 CAF\u00c9");
   });
@@ -32,11 +46,35 @@ describe("htmlToPlainText", () => {
     expect(htmlToPlainText(html)).toBe("Click here (https://example.com)");
   });
 
+  it("reads an end tag with whitespace before its `>` (`</a\n>`, as prettier writes a long line's) as the end it is", () => {
+    const html = '<h1>Hi<\/h1\n><p><a href="https://a.example/x?utm=1">First</a\n      ></p\n><p><a href="https://b.example">Second</a  ></p>';
+    const text = htmlToPlainText(html);
+    expect(text).toContain("HI");
+    expect(text).toContain("First (https://a.example/x?utm=1)");
+    expect(text).toContain("Second (https://b.example)");
+    expect(text.split("\n").filter(Boolean)).toHaveLength(3);
+  });
+
   it("avoids duplicate URL when link text equals href", () => {
     const html = '<a href="https://example.com">https://example.com</a>';
     expect(htmlToPlainText(html)).toBe("https://example.com");
   });
 
+  it("keeps a heading's links as a paragraph's, in each `links` mode, their URLs as written (not in capitals)", () => {
+    const html = '<h1><a href="https://example.com/Pay?id=A1&amp;b=2">Pay invoice</a></h1><h3>See <strong><a href="https://example.com/Terms">terms</a></strong></h3><h2><a href="https://example.com/Docs">https://example.com/Docs</a></h2>';
+    expect(htmlToPlainText(html)).toBe("PAY INVOICE (https://example.com/Pay?id=A1&b=2)\n\nSee terms (https://example.com/Terms)\n\nhttps://example.com/Docs");
+    expect(htmlToPlainText(html, { links: "after" })).toBe("PAY INVOICE [1]\n\nSee terms [2]\n\nhttps://example.com/Docs\n\n[1] https://example.com/Pay?id=A1&b=2\n[2] https://example.com/Terms");
+    expect(htmlToPlainText(html, { links: "none" })).toBe("PAY INVOICE\n\nSee terms\n\nhttps://example.com/Docs");
+    expect(htmlToPlainText(html, { uppercaseHeadings: false })).toMatch(/^Pay invoice \(https:\/\/example\.com\/Pay\?id=A1&b=2\)\n/);
+  });
+
+  it("keeps a link's whole URL, whichever quote its attribute is in, and a link in preformatted text", () => {
+    expect(htmlToPlainText(`<p><a href="https://example.com/it's">a</a> <a title='x > y' href='https://example.com/"q"'>b</a> <a data-href="x" href="https://example.com/c">c</a></p>`)).toBe(
+      `a (https://example.com/it's) b (https://example.com/"q") c (https://example.com/c)`
+    );
+    expect(htmlToPlainText('<pre>run <a href="https://example.com/cli">the CLI</a>\n  then</pre>', { links: "after" })).toBe("run the CLI [1]\n  then\n\n[1] https://example.com/cli");
+  });
+
   // Line breaks
   it("converts <br> to newlines", () => {
     expect(htmlToPlainText("Line 1<br>Line 2")).toBe("Line 1\nLine 2");
@@ -119,6 +157,26 @@ describe("htmlToPlainText", () => {
   });
 
   // Skip elements
+  it("keeps text whose entities spell its placeholders as 0.2.1 wrote it, not a link's URL or preformatted text", () => {
+    // `&amp;#1;0&amp;#1;` (React's escape of `&#1;0&#1;`) was decoded twice, to U+0001, 0, U+0001, after the text's own
+    // U+0001s were set aside: then a link's placeholder, its URL in the text. 0.2.1 decodes it so too, as text.
+    expect(htmlToPlainText("<pre>KEY=secret</pre><p>Name: &amp;#1;0&amp;#1; &amp;#0;0&amp;#0; &#1;0&#1;</p><a href='https://e.test/v?t=1'>Verify</a>")).toBe("KEY=secret\nName: \u00010\u0001 \u00000\u0000 \u00010\u0001\nVerify (https://e.test/v?t=1)");
+    // Where what stands for them would be a private-use character the HTML holds as an entity, another is.
+    expect(htmlToPlainText("<p>&#xE000;&#57345;&amp;#1;</p><a href='https://e.test'>a</a>")).toBe("\ue000\ue001\u0001\na (https://e.test)");
+  });
+
+  it("leaves out a link's URL React blocks (`javascript:`), as a link without one", () => {
+    const blocked = "javascript:throw new Error(&#x27;React has blocked a javascript: URL as a security precaution.&#x27;)";
+    expect(htmlToPlainText(`<p><a href="${blocked}">Pay now</a> and <a href=" JavaScript:alert(1)">this</a></p>`)).toBe("Pay now and this");
+    expect(htmlToPlainText(`<a href="${blocked}">Pay now</a>`, { links: "after" })).toBe("Pay now");
+  });
+
+  it("keeps the text's own U+0000 and U+0001, which spell its placeholders, as written", () => {
+    // Text spelling a link's placeholder (U+0001, its number, U+0001) was that link's URL; 0.2.1 kept it.
+    expect(htmlToPlainText("<p>Name: \u00010\u0001</p><a href='https://e.test/reset?token=1'>Reset</a>")).toBe("Name: \u00010\u0001\nReset (https://e.test/reset?token=1)");
+    expect(htmlToPlainText("<p>\u00011\u0001 \u00000\u0000</p><pre>code</pre><a href='https://a.test'>b</a>")).toBe("\u00011\u0001 \u00000\u0000\ncode\nb (https://a.test)");
+  });
+
   it("skips elements with data-skip-in-text attribute", () => {
     const html = '<div data-skip-in-text="true">hidden preview</div><p>Visible content</p>';
     expect(htmlToPlainText(html)).toBe("Visible content");
@@ -160,4 +218,93 @@ describe("htmlToPlainText", () => {
     expect(text).toContain("\u00A9 2026");
     expect(text).not.toContain("Preview text here");
   });
+
+  describe("options", () => {
+    const html = '<h1>Hello &amp; welcome</h1><p>Read <a href="https://example.com/a?b=1&amp;c=2">the guide</a> and <a href="https://example.com/b">the FAQ</a>.</p><div class="footer md:x">Unsubscribe <a href="https://example.com/u">here</a></div><img src="x.png" alt="Logo"><p>One two three four five six seven eight</p>';
+
+    it("write the same text without them as with none given", () => {
+      expect(htmlToPlainText(html, {})).toBe(htmlToPlainText(html));
+      expect(htmlToPlainText(html)).toBe(
+        "HELLO & WELCOME\nRead the guide (https://example.com/a?b=1&c=2) and the FAQ (https://example.com/b).\nUnsubscribe here (https://example.com/u)\n[Logo]One two three four five six seven eight"
+      );
+    });
+
+    it("links: inline (the default), listed after the text, or left out", () => {
+      expect(htmlToPlainText(html, { links: "after" })).toBe(
+        "HELLO & WELCOME\nRead the guide [1] and the FAQ [2].\nUnsubscribe here [3]\n[Logo]One two three four five six seven eight\n\n[1] https://example.com/a?b=1&c=2\n[2] https://example.com/b\n[3] https://example.com/u"
+      );
+      expect(htmlToPlainText(html, { links: "none" })).toContain("Read the guide and the FAQ.\nUnsubscribe here\n");
+    });
+
+    it("headings as written, and lines wrapped between words", () => {
+      expect(htmlToPlainText(html, { uppercaseHeadings: false })).toMatch(/^Hello & welcome\n/);
+      const wrapped = htmlToPlainText("<p>One two three four five six seven eight</p><p>https://example.com/a-very-long-link-that-cannot-wrap</p>", { wordwrap: 12 });
+      expect(wrapped).toBe("One two\nthree four\nfive six\nseven eight\nhttps://example.com/a-very-long-link-that-cannot-wrap");
+    });
+
+    it("skip elements by tag or class, with what's in them, as data-skip-in-text marks them", () => {
+      expect(htmlToPlainText(html, { skip: ["img", ".md:x", "h1"] })).toBe("Read the guide (https://example.com/a?b=1&c=2) and the FAQ (https://example.com/b).\nOne two three four five six seven eight");
+      expect(htmlToPlainText('<div data-skip-in-text="true"><div>nested <div>deep</div></div> gone</div><p>kept</p>')).toBe("kept");
+      // A class that only starts like it isn't it.
+      expect(htmlToPlainText('<p class="footers">kept</p>', { skip: [".footer"] })).toBe("kept");
+      // A name as written, never a pattern: `(` threw, `a+` read any run of `a`s.
+      expect(htmlToPlainText("<a+>x</a+><p>y</p>", { skip: ["a+"] })).toBe("y");
+      expect(htmlToPlainText("<aa>x</aa><p>y</p>", { skip: ["a+"] })).toBe("xy");
+      expect(htmlToPlainText("<p>(</p>", { skip: ["(", "[x", "*"] })).toBe("(");
+    });
+  });
+
+  describe("in time linear in the HTML's size, whatever it holds", () => {
+    const fill = (unit: string, bytes: number) => unit.repeat(Math.ceil(bytes / unit.length)).slice(0, bytes);
+    const time = (html: string, options?: Parameters<typeof htmlToPlainText>[1]) => {
+      const start = performance.now();
+      htmlToPlainText(html, options);
+      return performance.now() - start;
+    };
+
+    it("reads tags nothing closes, and runs of spaces in preformatted text, once", async () => {
+      // Each regex looked from each place it could start to the end where nothing ended it, again from the next: 40
+      // KB of `<img alt="a" ` took a minute, 80,000 spaces in a <pre> 11 s.
+      const shapes = ["<", "<<", '<img alt="a" ', "<a  ", "<a href=\"x\">", "<a '", "<li>", "<h1>", "<h3>", "<pre>", "<pre x", "<hr", "<img ", "<head", "<style", "<script", "<!--", "<a-0-0-0", '<div data-skip-in-text="true">', "<%\"", "<&"];
+      for (const unit of shapes) expect([unit, inTime(await within(500, () => htmlToPlainText(fill(unit, 102400))))]).toEqual([unit, true]);
+      expect(inTime(await within(500, () => htmlToPlainText("<pre>\n" + " ".repeat(102400) + "x\n</pre>")))).toBe(true);
+      // As before: its lines' trailing spaces off, its indentation kept.
+      expect(htmlToPlainText("<pre>\n" + " ".repeat(1000) + "x  \n</pre>")).toBe("\n" + " ".repeat(1000) + "x\n");
+    });
+
+    it("reads a tag whose name has a word boundary at each character (`a-a-…`) once, after an element it leaves out", async () => {
+      // Each of the name's starts a boundary ends was a name of its own (an element left out ends at a tag of any of
+      // them): 40 KB of `A-` took 1.3 s and 0.9 GB, 100 KB ran out of memory.
+      for (const unit of ["A-", "a-", "a-B-", "a--"]) {
+        const page = (bytes: number) => {
+          const name = fill(unit, bytes) + "a";
+          return `<div data-skip-in-text="true"></div><${name}>x</${name}><p data-skip-in-text="true"><${name}><p>y</p></${name.toUpperCase()}></p>z`;
+        };
+        const { small, large, grows } = await growth((bytes) => time(page(bytes)), [4096, 40960], { ratio: 20, floor: 50 });
+        const whole = await within(500, () => htmlToPlainText(page(40960)));
+        expect([unit, grows ? `${small.toFixed(1)} ms for 4 KB, ${large.toFixed(1)} ms for 40 KB` : "linear", inTime(whole)]).toEqual([unit, "linear", true]);
+        // As before: the paragraph left out ends at its own `</p>`, past the tags of the long name.
+        expect(htmlToPlainText(page(100))).toBe("xz");
+      }
+    });
+
+    it("costs about ten times as much for ten times as much of any short shape (random, seeded)", async () => {
+      const pieces = ["<a ", '<a href="x">', "</a>", "<li>", "</li>", "<h1>", "</h1>", "<h3>", "<pre>", "</pre>", "</td>", "<img ", '<img alt="a" ', "alt=", '"', "'", ">", "/>", "<", "<!--", "-->", "<head", "</head>", "<style", "<script", "<br", " ", "\t", "\n", "\r", "\u2028", "a", "&", "&amp;", "<%", "%>", "<p>", "</p>", '<div data-skip-in-text="true">', "<div>", "</div>", "<hr", "-", "x-", "a-", "A-", "<a-a-", "</A-A-"];
+      let seed = 7;
+      const random = (n: number) => ((seed = (Math.imul(seed, 1103515245) + 12345) >>> 0), Math.floor((seed / 2 ** 32) * n));
+      const slow: string[] = [];
+      for (let run = 0; run < 150; run++) {
+        let unit = "";
+        for (let i = 0, n = 1 + random(5); i < n; i++) unit += pieces[random(pieces.length)];
+        const options = [{}, { links: "after" as const }, { skip: ["img", ".promo"] }][random(3)];
+        // Sometimes after an element left out and a tag's `<`: a unit of a name's characters is then one long name.
+        const head = random(4) ? "" : '<div data-skip-in-text="true"></div><';
+        // (The seeded shapes stay the same: timing one again draws nothing.)
+        const { small, large, grows } = await growth((bytes) => time(head + fill(unit, bytes), options), [10240, 102400], { ratio: 20, floor: 50 });
+        if (grows) slow.push(`${JSON.stringify(unit)}: ${small.toFixed(1)} ms for 10 KB, ${large.toFixed(1)} ms for 100 KB`);
+      }
+      expect(slow).toEqual([]);
+    }, 60_000);
+  });
 });
+
diff --git a/packages/shared/src/utils/html-to-text.ts b/packages/shared/src/utils/html-to-text.ts
index 0af9c9e4..a97d2199 100644
--- a/packages/shared/src/utils/html-to-text.ts
+++ b/packages/shared/src/utils/html-to-text.ts
@@ -7,6 +7,9 @@
  * Critical for email deliverability: spam filters penalize HTML-only emails.
  */
 
+import { removeBetween, replaceAltImages, replaceElements, replaceLinks, replaceTags, untagged, withoutElements } from "./html-scan";
+import { TextMarks } from "./text-marks";
+
 /**
  * Common HTML named entity map for decoding.
  *
@@ -18,92 +21,51 @@
  * handled separately below, so anything missing here still decodes if written
  * numerically.
  */
-const HTML_ENTITIES: Record<string, string> = {
-  // Core markup + whitespace
-  "&amp;": "&",
-  "&lt;": "<",
-  "&gt;": ">",
-  "&quot;": '"',
-  "&#39;": "'",
-  "&apos;": "'",
-  "&nbsp;": " ",
-  // Dashes, quotes, and typographic punctuation
-  "&mdash;": "—",
-  "&ndash;": "–",
-  "&laquo;": "«",
-  "&raquo;": "»",
-  "&lsquo;": "‘",
-  "&rsquo;": "’",
-  "&ldquo;": "“",
-  "&rdquo;": "”",
-  "&bull;": "•",
-  "&middot;": "·",
-  "&hellip;": "…",
-  // Currency
-  "&cent;": "¢",
-  "&pound;": "£",
-  "&yen;": "¥",
-  "&euro;": "€",
-  // Legal / trademark
-  "&copy;": "©",
-  "&reg;": "®",
-  "&trade;": "™",
-  "&sect;": "§",
-  "&para;": "¶",
-  // Math and misc symbols
-  "&deg;": "°",
-  "&plusmn;": "±",
-  "&times;": "×",
-  "&divide;": "÷",
-  "&micro;": "µ",
-  "&frac14;": "¼",
-  "&frac12;": "½",
-  "&frac34;": "¾",
-  // Latin-1 accented letters (common in European names/words)
-  "&szlig;": "ß",
-  "&agrave;": "à",
-  "&aacute;": "á",
-  "&acirc;": "â",
-  "&atilde;": "ã",
-  "&auml;": "ä",
-  "&aring;": "å",
-  "&aelig;": "æ",
-  "&ccedil;": "ç",
-  "&egrave;": "è",
-  "&eacute;": "é",
-  "&ecirc;": "ê",
-  "&euml;": "ë",
-  "&igrave;": "ì",
-  "&iacute;": "í",
-  "&icirc;": "î",
-  "&iuml;": "ï",
-  "&ntilde;": "ñ",
-  "&ograve;": "ò",
-  "&oacute;": "ó",
-  "&ocirc;": "ô",
-  "&otilde;": "õ",
-  "&ouml;": "ö",
-  "&oslash;": "ø",
-  "&ugrave;": "ù",
-  "&uacute;": "ú",
-  "&ucirc;": "û",
-  "&uuml;": "ü",
-};
+const HTML_ENTITIES: Record<string, string> = Object.fromEntries(
+  // Each name, then the character it stands for (`amp&lt<…`): the same map, written compactly for the bundle.
+  Array.from("amp&lt<gt>quot\"apos'nbsp mdash—ndash–laquo«raquo»lsquo‘rsquo’ldquo“rdquo”bull•middot·hellip…cent¢pound£yen¥euro€copy©reg®trade™sect§para¶deg°plusmn±times×divide÷microµfrac14¼frac12½frac34¾szligßagraveàaacuteáacircâatildeãaumläaringåaeligæccedilçegraveèeacuteéecircêeumlëigraveìiacuteíicircîiumlïntildeñograveòoacuteóocircôotildeõoumlöoslashøugraveùuacuteúucircûuumlü".matchAll(/([a-z\d]+)([^a-z\d])/gi), ([, name, char]) => [`&${name};`, char])
+);
+
+/** How `htmlToPlainText` writes plain text; each left out is as before. */
+export interface PlainTextOptions {
+  /** Wrap lines at this many characters, between words (default: no wrapping); the URLs `links: "after"` lists aren't. */
+  wordwrap?: number;
+  /** Links: "inline" (default) `text (url)`, "after" `text [1]` with the URLs listed at the end, or "none" (the text only); a heading's too, its URL as written. */
+  links?: "inline" | "after" | "none";
+  /** h1 and h2 in capitals (default true). */
+  uppercaseHeadings?: boolean;
+  /** Elements left out, with what's in them, by tag name (`"img"`) or class (`".footer"`). */
+  skip?: string[];
+}
+
+/**
+ * `text` without the whitespace but line breaks at its lines' ends, as `/[^\S\n]+$/gm` leaves it, read once: that regex
+ * tries again from each character of a run of spaces that no line ends (80,000 spaces then `x` took 11 s). A run that
+ * ends a line goes; in one that doesn't, what's before its last line break (`\r`, U+2028, U+2029) goes.
+ */
+function trimLineEnds(text: string): string {
+  return text.replace(/[^\S\n]+/g, (run: string, at: number) => {
+    const end = at + run.length;
+    if (end === text.length || text[end] === "\n") return "";
+    for (let i = run.length - 1; i > 0; i--) if (run[i] === "\r" || run[i] === "\u2028" || run[i] === "\u2029") return run.slice(i);
+    return run;
+  });
+}
 
 /**
  * Decode HTML entities (named and numeric).
  */
-function decodeEntities(text: string): string {
+function decode(text: string, marks: TextMarks): string {
   // Named entities
   let result = text.replace(/&\w+;/g, (match) => HTML_ENTITIES[match] ?? match);
 
-  // Numeric entities: &#123; and &#x1A;
-  result = result.replace(/&#(\d+);/g, (_, code) =>
-    String.fromCharCode(parseInt(code, 10))
-  );
-  result = result.replace(/&#x([0-9a-fA-F]+);/g, (_, code) =>
-    String.fromCharCode(parseInt(code, 16))
-  );
+  // Numeric entities: &#123; and &#x1A; (U+0000 and U+0001 as what stands for them: see text-marks.ts)
+  const char = (code: number) => {
+    const decoded = String.fromCharCode(code);
+    return decoded === "\0" || decoded === "\u0001" ? marks.standIn(decoded) : decoded;
+  };
+  result = result.replace(/&#(\d+);/g, (_, code) => char(parseInt(code, 10)));
+  result = result.replace(/&#x([0-9a-fA-F]+);/g, (_, code) => char(parseInt(code, 16)));
 
   return result;
 }
@@ -122,57 +84,104 @@ function decodeEntities(text: string): string {
  * // "HELLO\nWorld"
  * ```
  */
-export function htmlToPlainText(html: string): string {
+export function htmlToPlainText(html: string, options: PlainTextOptions = {}): string {
   if (!html) return "";
+  // Its own U+0000 and U+0001 (what the placeholders are made of) kept out of their way: see text-marks.ts.
+  const marks = new TextMarks(html);
+  return marks.output(plainText(marks.input(), options, marks));
+}
 
-  let text = html;
+/** A `javascript:` URL, as a browser reads one (spaces and control characters before it, any case). */
+const BLOCKED = /^[\s\0-\x1f]*j\s*a\s*v\s*a\s*s\s*c\s*r\s*i\s*p\s*t\s*:/i;
 
-  // 1. Remove elements marked with data-skip-in-text (preview div, etc.)
-  text = text.replace(/<[^>]+data-skip-in-text="true"[^>]*>[\s\S]*?<\/[^>]+>/gi, "");
+/**
+ * An email service's tags a heading's capitals leave as written (`<%name%>`, `{{ name }}`, `{{{ raw }}}`, `{% if %}`,
+ * `*|FNAME|*`, `%%Name%%`, `%%=v(@x)=%%`, `%recipient.name%`, `${name}`, `{$name}`), and character references. The
+ * pattern reads a heading's text in parts: these, then text to the next character one can start with, then that
+ * character alone.
+ */
+const TAG = String.raw`<%[^<>]*%>|\{\{\{[^{}]*\}\}\}|\{\{[^{}]*\}\}|\{%[^{}]*%\}|\*\|[^|]*\|\*|%%[^%]*%%|%[\w.-]+%|\$\{[^{}]*\}|\{\$[^{}]*\}|&#?\w+;`;
+const SPANS = new RegExp(`${TAG}|[^&<{*%$]+|[&<{*%$]`, "g");
+const KEPT = new RegExp(`^(?:${TAG})$`);
+
+/** htmlToPlainText's text, of HTML that holds neither U+0000 nor U+0001, nor decodes to them (see `marks`). */
+function plainText(html: string, options: PlainTextOptions, marks: TextMarks): string {
+  const decodeEntities = (text: string) => decode(text, marks);
+  // An end tag with whitespace before its `>` (`</a\n  >`, as prettier writes a line too long for its width) as the
+  // steps below read one: `</a>`. (Each read once: its name, then its whitespace.)
+  let text = html.replace(/<\/([a-zA-Z][\w:-]*)\s+>/g, "</$1>");
+  const { links = "inline", uppercaseHeadings = true, skip = [], wordwrap } = options;
+
+  // 1. Remove elements marked with data-skip-in-text (preview div, a block's `skipInText`, etc.) and those `skip` names,
+  // with what's in them.
+  // (Each step reads the text once, whatever it holds: see html-scan.ts.)
+  // (A name or class as written: its characters escaped, so `a+` is no pattern and `(` no error.)
+  const skipping = skip.map((s) => (s[0] === "." ? new RegExp(`\\sclass="([^"]*\\s)?${s.slice(1).replace(/\W/g, "\\$&")}[\\s"]`) : new RegExp(`^<${s.replace(/\W/g, "\\$&")}[\\s>/]`, "i")));
+  text = withoutElements(text, (tag) => /data-skip-in-text="true"/.test(tag) || skipping.some((s) => s.test(tag)));
 
   // 2. Remove <head>, <style>, <script> blocks entirely
-  text = text.replace(/<head[\s\S]*?<\/head>/gi, "");
-  text = text.replace(/<style[\s\S]*?<\/style>/gi, "");
-  text = text.replace(/<script[\s\S]*?<\/script>/gi, "");
+  text = removeBetween(text, /<head/iy, /<\/head>/gi);
+  text = removeBetween(text, /<style/iy, /<\/style>/gi);
+  text = removeBetween(text, /<script/iy, /<\/script>/gi);
 
   // A line break, first: headings, links and list items keep theirs ("WELCOME BACK,<br>ADA").
   text = text.replace(/<br\s*\/?>/gi, "\n");
 
-  // 3. Convert headings: h1-h2 → UPPERCASE, h3-h6 → as-is
-  text = text.replace(/<h[12][^>]*>([\s\S]*?)<\/h[12]>/gi, (_, content) => {
-    const clean = content.replace(/<[^>]+>/g, "").trim();
-    // Entities stay as written, to decode below (`&amp;` uppercased wouldn't).
-    const upper = clean.replace(/&#?\w+;|[^&]+|&/g, (part: string) => (/^&#?\w+;$/.test(part) ? part : part.toUpperCase()));
+  // 3. Convert links, a heading's and preformatted text's too: <a href="url">text</a> → text (url), or text [1] with the
+  // URLs at the end, or text. Its URL (or its text, if that's the URL) is set aside until the end, so nothing changes it
+  // (a heading's capitals). An attribute's value, in either quote, is read whole (`href="…it's"`).
+  const urls: string[] = [];
+  const url = (href: string) => `\u0001${urls.push(decodeEntities(href)) - 1}\u0001`;
+  const listed: string[] = [];
+  // A link in a display condition or a repeated table (marked \u000e…\u000f by Elements for `links: "after"`) is
+  // written where it is: listed after it, it'd be in every recipient's text, or once for all of a loop's items.
+  let depth = 0;
+  text = text.replace(/[\u000e\u000f]|<a\b/gi, (part) => (part === "\u000e" ? (depth++, "") : part === "\u000f" ? ((depth = Math.max(0, depth - 1)), "") : depth > 0 ? `${part} data-unlayer-in-place=""` : part));
+  text = replaceLinks(text, (link, attributes, content) => {
+    const [, ...quoted] = /\shref\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s"'>]+))/i.exec(attributes) ?? [];
+    const href = quoted.find(Boolean);
+    if (!href) return link;
+    const clean = untagged(content).trim();
+    // A URL React blocks (`javascript:`, from data: written as React's `javascript:throw new Error(…)`) isn't one to
+    // show: the link's text, as a link without a URL is.
+    if (BLOCKED.test(decodeEntities(href))) return clean;
+    // Skip if link text is the same as URL (avoid duplication)
+    if (clean === href || clean === decodeEntities(href)) return url(href);
+    const after = links === "after" && !/\sdata-unlayer-in-place=/.test(attributes);
+    return links === "none" ? clean : after ? `${clean} [${listed.push(href)}]` : `${clean} (${url(href)})`;
+  });
+  const restore = (text: string) => text.replace(/\u0001(\d+)\u0001/g, (_, i: string) => urls[Number(i)]);
+
+  // Preformatted text (code) as it is, spaces and lines kept (but at their ends): set aside until the end.
+  const pre: string[] = [];
+  // A line of its own, unless it ends a table cell (code with line numbers: a row per line).
+  text = replaceElements(text, /<pre/iy, /<\/pre>/gi, (_, content, cell) => `\u0000${pre.push(trimLineEnds(restore(decodeEntities(untagged(content))))) - 1}\u0000${cell ?? "\n"}`, { bounded: true, after: /\s*<\/t[dh]>/iy });
+
+  // 4. Convert headings: h1-h2 → UPPERCASE (but entities and tags: see SPANS), h3-h6 → as-is
+  text = replaceElements(text, /<h[12]/iy, /<\/h[12]>/gi, (_, content) => {
+    const clean = untagged(content).trim();
+    // Entities stay as written, to decode below (`&amp;` uppercased wouldn't), and an email service's tags as they are
+    // (a service reads `{{ first_name }}`, not `{{ FIRST_NAME }}`): text is read to the next character a tag can start
+    // with, each tag to the first character that could end it, so once.
+    const upper = clean.replace(SPANS, (part: string) => (KEPT.test(part) || !uppercaseHeadings ? part : part.toUpperCase()));
     return "\n" + upper + "\n";
   });
-  text = text.replace(/<h[3-6][^>]*>([\s\S]*?)<\/h[3-6]>/gi, (_, content) => {
-    const clean = content.replace(/<[^>]+>/g, "").trim();
+  text = replaceElements(text, /<h[3-6]/iy, /<\/h[3-6]>/gi, (_, content) => {
+    const clean = untagged(content).trim();
     return "\n" + clean + "\n";
   });
 
-  // 4. Convert links: <a href="url">text</a> → text (url)
-  text = text.replace(/<a[^>]+href=["']([^"']+)["'][^>]*>([\s\S]*?)<\/a>/gi, (_, href, content) => {
-    const clean = content.replace(/<[^>]+>/g, "").trim();
-    // Skip if link text is the same as URL (avoid duplication)
-    if (clean === href || clean === decodeEntities(href)) {
-      return clean;
-    }
-    return `${clean} (${href})`;
-  });
-
   // 5. Convert images: <img alt="text"> → [text]
-  text = text.replace(/<img[^>]+alt=["']([^"']+)["'][^>]*\/?>/gi, (_, alt) => {
-    return `[${alt}]`;
-  });
+  text = replaceAltImages(text, (alt) => `[${alt}]`);
   // Remove images without alt text
-  text = text.replace(/<img[^>]*\/?>/gi, "");
+  text = replaceTags(text, /<img/iy, () => "");
 
   // 6. Convert horizontal rules
-  text = text.replace(/<hr[^>]*\/?>/gi, "\n---\n");
+  text = replaceTags(text, /<hr/iy, () => "\n---\n");
 
   // 7. Convert list items
-  text = text.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, (_, content) => {
-    const clean = content.replace(/<[^>]+>/g, "").trim();
+  text = replaceElements(text, /<li/iy, /<\/li>/gi, (_, content) => {
+    const clean = untagged(content).trim();
     return "- " + clean + "\n";
   });
 
@@ -184,7 +193,7 @@ export function htmlToPlainText(html: string): string {
   text = text.replace(/<\/(?:td|th)>/gi, "\t");
 
   // 11. Remove all remaining HTML tags
-  text = text.replace(/<[^>]+>/g, "");
+  text = untagged(text);
 
   // 12. Decode HTML entities
   text = decodeEntities(text);
@@ -202,7 +211,10 @@ export function htmlToPlainText(html: string): string {
   // Collapse 3+ consecutive newlines to 2
   text = text.replace(/\n{3,}/g, "\n\n");
   // Trim leading/trailing whitespace
-  text = text.trim();
+  text = restore(text.trim());
+  // Lines wrapped at `wordwrap` characters, between words (a longer word stays whole); the URLs listed after aren't.
+  if (wordwrap) text = text.replace(new RegExp(`(?![^\\n]{1,${wordwrap}}$)([^\\n]{1,${wordwrap}})\\s`, "g"), "$1\n");
+  if (listed.length) text += `\n\n${listed.map((href, i) => `[${i + 1}] ${decodeEntities(href)}`).join("\n")}`;
 
-  return text;
+  return text.replace(/\u0000(\d+)\u0000/g, (whole, i: string) => pre[Number(i)] ?? whole);
 }
diff --git a/packages/shared/src/utils/lexical-helpers.test.ts b/packages/shared/src/utils/lexical-helpers.test.ts
index b976cb1b..971440e6 100644
--- a/packages/shared/src/utils/lexical-helpers.test.ts
+++ b/packages/shared/src/utils/lexical-helpers.test.ts
@@ -3,8 +3,10 @@ import {
   textToTextJson,
   htmlToTextJson,
   generateHtmlFromTextJson,
+  textJsonToText,
   EMPTY_TEXT_JSON,
 } from "./lexical-helpers";
+import { inTime, within } from "../test-timing";
 
 // The inline margin reset every exported <p> must carry, matching the
 // editor's exported paragraphs (email clients strip head resets).
@@ -47,6 +49,13 @@ describe("generateHtmlFromTextJson", () => {
     expect(html.match(new RegExp(P_MARGIN_RESET, "g"))).toHaveLength(2);
   });
 
+  it("takes the `;`s off a paragraph's style in time linear in its size", async () => {
+    // `/;+\s*$/` tried again from each `;` of a long run something follows: 20,000 took 0.6 s.
+    const paragraph = (style: string) => JSON.stringify({ root: { children: [{ children: [{ text: "Styled", type: "text", format: 0 }], type: "extended-paragraph", style }], type: "root" } });
+    expect(inTime(await within(500, () => generateHtmlFromTextJson(paragraph(";".repeat(102400) + "x"))))).toBe(true);
+    expect(generateHtmlFromTextJson(paragraph("color: red;;  "))).toBe(`<p style="color: red; ${P_MARGIN_RESET}">Styled</p>`);
+  });
+
   it("keeps custom paragraph styles ahead of the margin reset", () => {
     const json = JSON.stringify({
       root: {
@@ -180,3 +189,27 @@ describe("generateHtmlFromTextJson", () => {
     );
   });
 });
+
+describe("textJsonToText", () => {
+  it("writes plain text as the text block holds it: escaped, in no paragraph, its quotes kept", () => {
+    expect(textJsonToText(textToTextJson('Fish & "chips" <b>'))).toBe('Fish &amp; "chips" &lt;b&gt;');
+    expect(textJsonToText(EMPTY_TEXT_JSON)).toBe("");
+  });
+
+  it("keeps HTML given as it is", () => {
+    expect(textJsonToText(htmlToTextJson('H<sub>2</sub>O <span style="font-size: 40px">$20</span>'))).toBe('H<sub>2</sub>O <span style="font-size: 40px">$20</span>');
+  });
+
+  it("writes formatting, links and several paragraphs as their HTML (generateHtmlFromTextJson's)", () => {
+    const rich = JSON.stringify({ root: { type: "root", children: [{ type: "paragraph", children: [{ type: "text", text: "Bold", format: 1 }] }] } });
+    const two = JSON.stringify({ root: { type: "root", children: [{ type: "paragraph", children: [{ type: "text", text: "One" }] }, { type: "paragraph", children: [{ type: "text", text: "Two" }] }] } });
+    const aligned = JSON.stringify({ root: { type: "root", children: [{ type: "paragraph", format: "center", children: [{ type: "text", text: "Mid" }] }] } });
+    for (const json of [rich, two, aligned]) expect(textJsonToText(json)).toBe(generateHtmlFromTextJson(json));
+    expect(textJsonToText(rich)).toBe(`<p style="${P_MARGIN_RESET}"><strong>Bold</strong></p>`);
+  });
+
+  it("is empty for JSON it can't read", () => {
+    expect(textJsonToText("{")).toBe("");
+    expect(textJsonToText("{}")).toBe("");
+  });
+});
diff --git a/packages/shared/src/utils/lexical-helpers.ts b/packages/shared/src/utils/lexical-helpers.ts
index d0aa0c92..083abed7 100644
--- a/packages/shared/src/utils/lexical-helpers.ts
+++ b/packages/shared/src/utils/lexical-helpers.ts
@@ -138,7 +138,7 @@ function paragraphNodeToHtml(node: any, childrenHtml: string): string {
   // Custom paragraph styles (e.g. background-color) come first so the
   // resets below win if they overlap.
   if (node.style) {
-    styleParts.push(String(node.style).replace(/;+\s*$/, ""));
+    styleParts.push(withoutTrailingSemicolons(String(node.style)));
   }
 
   if (!isInlineTool) {
@@ -261,6 +261,53 @@ export function generateHtmlFromTextJson(textJson: string): string {
   }
 }
 
+const TEXT_ENTITIES: Record<string, string> = { "&": "&amp;", "<": "&lt;", ">": "&gt;" };
+
+/** What textToTextJson writes before and after its text. */
+const PLAIN = textToTextJson("\u0000").split(JSON.stringify("\u0000")) as [string, string];
+
+/** A Lexical paragraph of plain text (`textToTextJson`'s): text nodes with no formatting, in a paragraph with none. */
+function plainParagraph(node: any): boolean {
+  return (
+    (node?.type === "paragraph" || node?.type === "extended-paragraph") &&
+    !node.format && !node.indent && !node.style && !dirAttribute(node.direction) &&
+    (node.children ?? []).every((child: any) => (child?.type === "text" || child?.type === "extended-text") && !child.format && !child.style)
+  );
+}
+
+/**
+ * The HTML a text block holds (its `text`) for a textJson: what Elements writes in the design and renders, as the
+ * builder's text block exports it. HTML given (`htmlToTextJson`) is kept as it is; a paragraph of plain text (a
+ * Paragraph's `text` or string children) is that text, escaped, with no paragraph around it; other Lexical JSON
+ * (formatting, links, several paragraphs) is its HTML, as `generateHtmlFromTextJson` writes it.
+ *
+ * @param textJson - Lexical JSON string, or the HTML passthrough
+ * @returns The text block's HTML ("" for JSON it can't read)
+ */
+export function textJsonToText(textJson: string): string {
+  // Plain text as textToTextJson writes it (most Paragraphs'): its text, read without walking the tree.
+  if (textJson === EMPTY_TEXT_JSON) return "";
+  if (textJson.startsWith(PLAIN[0]) && textJson.endsWith(PLAIN[1])) {
+    try {
+      const text = JSON.parse(textJson.slice(PLAIN[0].length, -PLAIN[1].length));
+      if (typeof text === "string") return text.replace(/[&<>]/g, (c) => TEXT_ENTITIES[c]);
+    } catch {
+      // Not one text: read as any other.
+    }
+  }
+  try {
+    const parsed = JSON.parse(textJson);
+    if (parsed?.__html) return parsed.__html;
+    const paragraphs = parsed?.root?.children;
+    if (!Array.isArray(paragraphs)) return "";
+    if (paragraphs.length > 1 || !paragraphs.every(plainParagraph)) return nodeToHtml(parsed.root);
+    // (Its quotes kept: it's text, not an attribute.)
+    return (paragraphs[0]?.children ?? []).map((node: any) => String(node.text ?? "").replace(/[&<>]/g, (c) => TEXT_ENTITIES[c])).join("");
+  } catch {
+    return "";
+  }
+}
+
 /**
  * Convert an HTML string to a textJson-compatible value.
  *
@@ -284,3 +331,14 @@ export function htmlToTextJson(html: string): string {
   if (!html) return EMPTY_TEXT_JSON;
   return JSON.stringify({ __html: html });
 }
+
+/**
+ * `style` without the `;`s and whitespace it ends in, as `.replace(/;+\s*$/, "")` leaves it: its last run of `;`s, where
+ * only whitespace follows, off. Read from its end: the regex tried again from each `;` of a long run something follows.
+ */
+function withoutTrailingSemicolons(style: string): string {
+  const trimmed = style.trimEnd();
+  let end = trimmed.length;
+  while (end && trimmed[end - 1] === ";") end--;
+  return end < trimmed.length ? style.slice(0, end) : style;
+}
diff --git a/packages/shared/src/utils/semantic-props.test.ts b/packages/shared/src/utils/semantic-props.test.ts
index be007e66..f48beb16 100644
--- a/packages/shared/src/utils/semantic-props.test.ts
+++ b/packages/shared/src/utils/semantic-props.test.ts
@@ -3,6 +3,8 @@ import {
   mapSemanticProps,
   normalizeLinkValue,
   normalizeValuesForExporter,
+  safeVideoId,
+  unrunLinks,
 } from "./semantic-props";
 
 // Simulate Button defaults (has nested buttonColors, backgroundImage, border)
@@ -265,6 +267,16 @@ describe("mapSemanticProps", () => {
       expect("fontSize" in result).toBe(false);
     });
 
+    it("skips null style values, as data gives a prop it hasn't: the default stays, not an empty style", () => {
+      const result = mapSemanticProps({ fontSize: null, color: null, textAlign: null, backgroundColor: null, borderRadius: "8px" } as never, BUTTON_DEFAULTS, "Button");
+      expect(result).toEqual({ borderRadius: "8px" });
+    });
+
+    it("keeps a content prop given as null: no content, as in 0.2.1, not the block's placeholder", () => {
+      expect(mapSemanticProps({ text: null, color: null } as never, BUTTON_DEFAULTS, "Button")).toEqual({ text: null });
+      expect(mapSemanticProps({ html: null } as never, {} as never, "Html")).toEqual({ html: null });
+    });
+
     it("handles _meta in defaults without grouping into it", () => {
       const result = mapSemanticProps(
         { backgroundColor: "#fff" },
@@ -416,6 +428,32 @@ describe("normalizeValuesForExporter", () => {
   });
 });
 
+describe("safeVideoId", () => {
+  it("percent-encodes what a video's id doesn't hold, so it can't end its player's `src`", () => {
+    expect(safeVideoId('abc" onload="alert(document.domain)')).toBe("abc%22%20onload%3D%22alert%28document.domain%29");
+    expect(safeVideoId("a'b<c>d`e&f?g#h")).toBe("a%27b%3Cc%3Ed%60e%26f%3Fg%23h");
+    // A lone surrogate has no UTF-8: U+FFFD's.
+    expect(safeVideoId("a\uD800b")).toBe("a%EF%BF%BDb");
+  });
+
+  it("keeps an id the editor writes as it is: a YouTube one, a Vimeo one (with its hash), and what its parser reads", () => {
+    for (const id of ["dQw4w9WgXcQ", "76979871", "76979871/abcdef1234", "a.b_c%20-d", ""]) expect(safeVideoId(id)).toBe(id);
+    expect(safeVideoId(76979871)).toBe(76979871);
+    expect(safeVideoId(undefined)).toBeUndefined();
+  });
+
+  it("writes one that isn't a string (an array from a JSON body) as its text", () => {
+    expect(safeVideoId(['abc" x="1'])).toBe("abc%22%20x%3D%221");
+  });
+
+  it("is a Video's id in its values (unrunLinks), and only a Video's", () => {
+    expect(unrunLinks({ video: { type: "youtube", videoId: 'abc"' } }, "Video")).toEqual({ video: { type: "youtube", videoId: "abc%22" } });
+    const video = { type: "vimeo", videoId: "76979871" };
+    expect(unrunLinks({ video }, "Video").video).toBe(video);
+    expect(unrunLinks({ video: { videoId: 'abc"' } }, "Image")).toEqual({ video: { videoId: 'abc"' } });
+  });
+});
+
 describe("border width px normalization", () => {
   // Normalization only runs for components that declare a `border` field (Column,
   // Divider, Table, …); use a Column-like defaults with an empty border group.
diff --git a/packages/shared/src/utils/semantic-props.ts b/packages/shared/src/utils/semantic-props.ts
index 0d08bb0c..be5d0175 100644
--- a/packages/shared/src/utils/semantic-props.ts
+++ b/packages/shared/src/utils/semantic-props.ts
@@ -10,8 +10,9 @@
  * - TypeScript provides autocomplete for ALL properties (flat and nested)
  */
 
-import type { DeviceProps } from "../types";
+import type { DeviceProps, ValuesInput } from "../types";
 import { cssSafeValues, normalizeCssValues } from "./css-values";
+import { entities } from "./entities";
 import { textToTextJson, htmlToTextJson } from "./lexical-helpers";
 
 /**
@@ -37,9 +38,13 @@ type FlattenObjectProps<T> = T extends object
  * Semantic props type for any component.
  * Generic TChildren parameter allows each framework to supply its own child type.
  */
-export type SemanticProps<T, TChildren = any> = Omit<FlattenObjectProps<T>, keyof DeviceProps> & DeviceProps & {
+export type SemanticProps<T, TChildren = any> = Omit<FlattenObjectProps<T>, keyof DeviceProps | "values"> & DeviceProps & {
   children?: TChildren;
-  values?: T; // Escape hatch for full control
+  /**
+   * Escape hatch for full control: the builder's values, as many as you set (the defaults fill in the rest). Its keys
+   * are checked, its values passed on as they are; the flat props are the typed way to set one.
+   */
+  values?: ValuesInput<T>;
   /** HTML string with inline formatting for Paragraph (e.g. `'Hello <b>bold</b>'`) */
   html?: string;
 };
@@ -50,34 +55,29 @@ export type SemanticProps<T, TChildren = any> = Omit<FlattenObjectProps<T>, keyo
  * Results are cached per defaultValues object reference to avoid recomputing
  * on every render.
  */
-const nestedStructureCache = new WeakMap<object, Map<string, Set<string>>>();
-
-function analyzeNestedStructure(defaultValues: any): Map<string, Set<string>> {
-  const cached = nestedStructureCache.get(defaultValues);
-  if (cached) return cached;
+interface NestedStructure {
+  /** Each nested object's key, with its keys. */
+  groups: Map<string, Set<string>>;
+  /** A key of a nested object (flat, as a prop): the first nested object that has it. */
+  owners: Map<string, string>;
+}
 
-  const nestedGroups = new Map<string, Set<string>>();
+const nestedStructureCache = new WeakMap<object, NestedStructure>();
 
-  for (const [key, value] of Object.entries(defaultValues)) {
-    // Skip special keys
-    if (key === "_meta" || key === "text" || key === "textJson" || key === "children") {
-      continue;
-    }
-
-    // Check if this is a nested object (plain object, not array, not null)
-    if (
-      value &&
-      typeof value === "object" &&
-      !Array.isArray(value) &&
-      Object.keys(value).length > 0
-    ) {
-      const props = new Set(Object.keys(value));
-      nestedGroups.set(key, props);
+function analyzeNestedStructure(defaultValues: any): NestedStructure {
+  let structure = nestedStructureCache.get(defaultValues);
+  if (!structure) {
+    const groups = new Map<string, Set<string>>();
+    const owners = new Map<string, string>();
+    // A nested object: a plain object (not an array, not null) with keys; special keys aside.
+    for (const [key, value] of Object.entries(defaultValues)) {
+      if (!/^(_meta|text|textJson|children)$/.test(key) && value && typeof value === "object" && !Array.isArray(value) && Object.keys(value).length) groups.set(key, new Set(Object.keys(value)));
     }
+    for (const [group, keys] of groups) for (const key of keys) if (!owners.has(key)) owners.set(key, group);
+    structure = { groups, owners };
+    nestedStructureCache.set(defaultValues, structure);
   }
-
-  nestedStructureCache.set(defaultValues, nestedGroups);
-  return nestedGroups;
+  return structure;
 }
 
 /**
@@ -94,36 +94,20 @@ function analyzeNestedStructure(defaultValues: any): Map<string, Set<string>> {
  * - `lineHeight: 1.4` → `"1.4"` (the field is typed as a string; unitless
  *   line-height is valid CSS).
  */
-const PX_SIZE_KEYS = [
-  "fontSize",
-  "padding",
-  "containerPadding",
-  "borderRadius",
-  "letterSpacing",
-] as const;
+/** A unit-less number as text ("20", " 0 "): read as px where a size takes one. */
+const BARE_NUMBER = /^\s*\d+\s*$/;
+
+const SIZES = ["fontSize", "padding", "containerPadding", "borderRadius", "letterSpacing"];
 
 function normalizeCssProps(props: Record<string, any>): void {
-  if (typeof props.fontFamily === "string") {
-    const v = props.fontFamily;
-    props.fontFamily = { label: v, value: v };
-  }
-  if (
-    typeof props.fontWeight === "string" &&
-    /^\d+$/.test(props.fontWeight.trim())
-  ) {
-    props.fontWeight = Number(props.fontWeight.trim());
-  }
-  if (typeof props.lineHeight === "number") {
-    props.lineHeight = String(props.lineHeight);
-  }
-  for (const key of PX_SIZE_KEYS) {
+  const { fontFamily, fontWeight } = props;
+  if (typeof fontFamily === "string") props.fontFamily = { label: fontFamily, value: fontFamily };
+  if (typeof fontWeight === "string" && BARE_NUMBER.test(fontWeight)) props.fontWeight = Number(fontWeight);
+  if (typeof props.lineHeight === "number") props.lineHeight = String(props.lineHeight);
+  // A bare number (28) or a unit-less numeric string ("0", "20") → "<n>px".
+  for (const key of SIZES) {
     const v = props[key];
-    // bare number (28) or a unit-less numeric string ("0", "20") → "<n>px"
-    if (typeof v === "number") {
-      props[key] = `${v}px`;
-    } else if (typeof v === "string" && /^\d+$/.test(v.trim())) {
-      props[key] = `${v.trim()}px`;
-    }
+    if (typeof v === "number" || (typeof v === "string" && BARE_NUMBER.test(v))) props[key] = `${String(v).trim()}px`;
   }
 }
 
@@ -139,6 +123,7 @@ export function escapeText(text: string, quotes?: boolean): string {
  * did in this text: the service fills it in. `<%` can't start an element, so it adds no markup.
  */
 export function escapeKeepingTags(text: string, quotes?: boolean, escape = (part: string) => escapeText(part, quotes)): string {
+  if (!text.includes("<%")) return escape(text);
   return text
     .split(/(<%[\w.]+%>)/)
     .map((part, i) => (i % 2 ? part : escape(part)))
@@ -162,14 +147,17 @@ const menuText = (text: string) =>
  * Inline formatting is not preserved — use the `html` prop for rich text.
  */
 function flattenChildrenText(node: any, breaks?: boolean): string {
-  if (node == null || typeof node === "boolean") return "";
-  if (typeof node === "string") return node;
-  if (typeof node === "number") return String(node);
+  if (typeof node === "string" || typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map((child) => flattenChildrenText(child, breaks)).join("");
-  if (typeof node === "object" && "props" in node) {
-    return breaks && node.type === "br" ? "<br/>" : flattenChildrenText(node.props?.children, breaks);
-  }
-  return "";
+  // (null, booleans, undefined and functions show nothing, as in React.)
+  if (!node || typeof node !== "object") return "";
+  if ("props" in node) return breaks && node.type === "br" ? "<br/>" : flattenChildrenText(node.props?.children, breaks);
+  // A Set or another collection, as React renders one; React's own objects (a portal, a lazy element) show nothing.
+  if (typeof node[Symbol.iterator] === "function") return Array.from(node as Iterable<unknown>, (child) => flattenChildrenText(child, breaks)).join("");
+  if ("$$typeof" in node) return "";
+  // A date or another object isn't text: the render fails, as React's does (`{String(order.createdAt)}` is text).
+  const found = Object.prototype.toString.call(node) === "[object Object]" ? `object with keys {${Object.keys(node).join(", ")}}` : Object.prototype.toString.call(node);
+  throw new Error(`Objects are not valid as a React child (found: ${found}). If you meant to render a collection of children, use an array instead`);
 }
 
 /**
@@ -178,12 +166,130 @@ function flattenChildrenText(node: any, breaks?: boolean): string {
  * written `<br>` in a string (as it worked before) or as a JSX `<br />`.
  */
 function childrenHtml(children: any): string {
-  return flattenChildrenText(children, true)
+  const text = flattenChildrenText(children, true);
+  if (!text.includes("<")) return escapeKeepingTags(text);
+  return text
     .split(/(<br\s*\/?>)/i)
     .map((part, i) => (i % 2 ? "<br/>" : escapeKeepingTags(part)))
     .join("");
 }
 
+const ALIGN = { align: "textAlign" };
+const TEXT = { ...ALIGN, textColor: "color" };
+/**
+ * Names authors (and agents) reach for, from CSS or React Email, where a component's prop has another, by component:
+ * each the props it stands for (a Menu's `color` is its items', linked or not). Only where it can mean nothing else;
+ * the component's own prop wins over it, and an earlier name over a later one (a Heading's `level` over `as`).
+ */
+export const PROP_ALIASES: Record<string, Record<string, string>> = {
+  Menu: { color: "textColor linkColor", textAlign: "align" },
+  Social: { textAlign: "align" },
+  Paragraph: TEXT,
+  // `as`: React Email's.
+  Heading: { ...TEXT, level: "headingType", as: "headingType" },
+  Button: TEXT,
+  Image: ALIGN,
+  Divider: ALIGN,
+};
+
+const LINK_KEYS = ["href", "action"] as const;
+
+const JAVASCRIPT_URL = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i;
+
+/**
+ * A URL that can't run code: a `javascript:` URL as React 19 tells one (controls and spaces before it, tabs and line
+ * breaks in it, any case) as the one react-dom 19 writes for it, which throws; any other as it is, byte for byte.
+ * `raw`: one written into an attribute as it is (the editor's exporters write a link's URL so), which a browser reads
+ * with its character references decoded (`&#106;avascript:`, `javascript&colon;`), as it's read here then; React
+ * escapes its own (`&` as `&amp;`), so a reference in one stays text.
+ */
+export const unrunUrl = (url: string, raw?: boolean): string => (JAVASCRIPT_URL.test(raw ? entities(url) : url) ? "javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')" : url);
+
+/**
+ * A link of any shape (`"…"`, `{ url, customAttrs }`, `{ name, values: { href }, attrs: { href } }`) with its URLs as
+ * unrunUrl writes them (a list or a number as its text).
+ */
+function unrunLink(link: any): any {
+  const unrun = (url: unknown) => unrunUrl(String(url), true);
+  const blocked = (url: unknown) => url != null && unrun(url) !== String(url);
+  if (typeof link !== "object" || link === null) return blocked(link) ? unrun(link) : link;
+  if (blocked(link.url)) link = { ...link, url: unrun(link.url) };
+  for (const key of ["values", "attrs", "customAttrs"]) if (blocked(link[key]?.href)) link = { ...link, [key]: { ...link[key], href: unrun(link[key].href) } };
+  return link;
+}
+
+/**
+ * A video's id, which a page's and a document's player writes into its `src="https://www.youtube.com/embed/…"` (or
+ * Vimeo's) as it is: what an id doesn't hold (the editor's are letters, digits, `.`, `_`, `%` and `-`, a Vimeo one's
+ * with a `/`) is percent-encoded, so an id from data (`abc" onload="…`) can't end the attribute. One that isn't a
+ * string or a number (an array from a JSON body) is its text.
+ */
+export function safeVideoId(id: unknown): unknown {
+  if (id == null || typeof id === "number") return id;
+  const encode = (c: string) => {
+    try {
+      // (`encodeURIComponent` keeps `!'()*~`: they're encoded too.)
+      return encodeURIComponent(c).replace(/[!'()*~]/g, (k) => `%${k.charCodeAt(0).toString(16).toUpperCase()}`);
+    } catch {
+      // (A lone surrogate, which has no UTF-8: U+FFFD's.)
+      return "%EF%BF%BD";
+    }
+  };
+  const safe = String(id).replace(/[^A-Za-z0-9._%/-]/gu, encode);
+  return safe === id ? id : safe;
+}
+
+/**
+ * A block's values with no link URL that runs code (see unrunUrl), in the HTML and the design alike: its `href` and
+ * `action` (Button, Image, Video), a Video's URL (an email's link to it), a Menu's items' links and a Social's icons'
+ * URLs, however they were given. The editor's exporters write those links as they are, in every mode (0.2.1 did too).
+ * A Video's id too, which they write into its player's URL as it is (see safeVideoId).
+ */
+export function unrunLinks<T>(values: T, name: string): T {
+  if (!values || typeof values !== "object") return values;
+  const out: Record<string, any> = { ...values };
+  for (const key of LINK_KEYS) if (out[key] != null) out[key] = unrunLink(out[key]);
+  if (name === "Video" && out.video && typeof out.video === "object" && out.video.url != null) out.video = { ...out.video, url: unrunLink(out.video.url) };
+  if (name === "Video" && out.video && typeof out.video === "object" && safeVideoId(out.video.videoId) !== out.video.videoId) out.video = { ...out.video, videoId: safeVideoId(out.video.videoId) };
+  if (name === "Menu" && Array.isArray(out.menu?.items)) out.menu = { ...out.menu, items: out.menu.items.map((item: any) => (item?.link != null ? { ...item, link: unrunLink(item.link) } : item)) };
+  if (name === "Social" && Array.isArray(out.icons?.icons)) out.icons = { ...out.icons, icons: out.icons.icons.map((icon: any) => (icon?.url != null ? { ...icon, url: unrunLink(icon.url) } : icon)) };
+  return out as T;
+}
+
+/**
+ * A link's target, which the exporters write into a `target="…"` as it is: one that could end the attribute or start
+ * a tag (`"`, `'`, `<`, `>`, a backtick), or that isn't a string (an array from a JSON body, written as its text), is
+ * a new tab (`_blank`) instead.
+ */
+const safeTarget = (target: unknown) => (target != null && (typeof target !== "string" || /["'<>`]/.test(target)) ? "_blank" : target);
+
+/**
+ * A link in the schema's storage shape: `"https://…"` is `{ name: "web", values: { href, target } }` (`target`, the
+ * component's, a new tab where it gives none), and a link given in `attrs` has its `href` and `target` in `values`.
+ */
+function canonicalizeLink(v: any, target: string): any {
+  if (typeof v === "string") return { name: "web", values: { href: v, target } };
+  if (!(v && typeof v === "object" && "name" in v && v.attrs && typeof v.attrs === "object")) return v;
+  const { href, target: attrsTarget, ...attrs } = v.attrs;
+  if (href === undefined && attrsTarget === undefined) return v;
+  const values = { ...(v.values as Record<string, any> | undefined) };
+  if (!values.href && href !== undefined) values.href = href;
+  if (!values.target && attrsTarget !== undefined) values.target = attrsTarget;
+  const { attrs: _attrs, ...next } = v;
+  return Object.keys(attrs).length ? { ...next, values, attrs } : { ...next, values };
+}
+
+/** The props an alias stands for (`"textColor linkColor"`), split once. */
+const aliasLists = new Map<string, string[]>();
+function aliasesOf(names: string): string[] {
+  let list = aliasLists.get(names);
+  if (!list) aliasLists.set(names, (list = names.split(" ")));
+  return list;
+}
+
+/** Whether a prop holds a block's content (its text or markup, a table's cells), not a style: one given as `null` is none. */
+export const isContentProp = (key: string): boolean => /^(text|html|headers|data)$/.test(key);
+
 /**
  * Universal semantic props mapper
  * Works for ANY component - no configuration needed!
@@ -198,11 +304,18 @@ export function mapSemanticProps<T extends Record<string, any>>(
   defaultValues: T,
   componentType: string
 ): T {
-  const { children, values, mobile, hideOnMobile: hideMobileProp, hideOnDesktop: hideDesktopProp, ...restProps } = props;
+  const { children, values, mobile, hideOnMobile: hideMobileProp, hideOnDesktop: hideDesktopProp, ...rest } = props;
+  const userProps: Record<string, any> = rest;
   // The editor hides rows and content on a device, never a column.
   const hideOnMobile = componentType === "Column" ? undefined : hideMobileProp;
   const hideOnDesktop = componentType === "Column" ? undefined : hideDesktopProp;
-  const userProps: any = { ...restProps };
+  const aliases = PROP_ALIASES[componentType];
+  if (aliases)
+    for (const alias in aliases) {
+      if (!(alias in userProps)) continue;
+      for (const prop of aliasesOf(aliases[alias])) userProps[prop] ??= userProps[alias];
+      delete userProps[alias];
+    }
 
   // Start with escape hatch if provided
   const result: any = values ? { ...values } : {};
@@ -212,18 +325,11 @@ export function mapSemanticProps<T extends Record<string, any>>(
   // Note: editor-types codegen renamed text→textJson for Button/Heading but
   // the exporter still uses plain text at runtime via generateHtmlFromTextJson
   if (children !== undefined && !result.text && !result.textJson) {
-    const textContent =
-      typeof children === "string" ? children : flattenChildrenText(children);
-    if (componentType === "Paragraph") {
-      result.textJson = textToTextJson(textContent);
-    } else if (componentType === "Heading" || componentType === "Button") {
-      // Children are text, as in React (and as Paragraph's are): markup in them
-      // shows as typed, so a value like a user's name can't inject HTML, but a
-      // line break stays one. The `text` prop still takes HTML.
-      result.text = childrenHtml(children);
-    } else {
-      result.text = textContent;
-    }
+    const textContent = flattenChildrenText(children);
+    // Heading and Button children are text, as in React (and as Paragraph's are): markup in them shows as typed, so a
+    // value like a user's name can't inject HTML, but a line break stays one. The `text` prop still takes HTML.
+    if (componentType === "Paragraph") result.textJson = textToTextJson(textContent);
+    else result.text = componentType === "Heading" || componentType === "Button" ? childrenHtml(children) : textContent;
   }
 
   // Paragraph: auto-convert `text` → `textJson` (Lexical JSON)
@@ -231,13 +337,9 @@ export function mapSemanticProps<T extends Record<string, any>>(
   // making it a drop-in replacement for the legacy Text component.
   // - values.text (escape hatch) = legacy HTML → use htmlToTextJson (preserves HTML)
   // - text prop (API) = plain text → use textToTextJson (wraps in Lexical JSON)
-  const textFromEscapeHatch = result.text;
-  const textFromProp = userProps.text;
-  const textProp = textFromEscapeHatch || textFromProp;
+  const textProp = result.text || userProps.text;
   if (componentType === "Paragraph" && textProp && !result.textJson) {
-    result.textJson = textFromEscapeHatch
-      ? htmlToTextJson(String(textProp))
-      : textToTextJson(String(textProp));
+    result.textJson = (result.text ? htmlToTextJson : textToTextJson)(String(textProp));
     delete result.text;
     delete userProps.text;
   }
@@ -261,27 +363,16 @@ export function mapSemanticProps<T extends Record<string, any>>(
   //    renderToHtml. Genuine custom attrs (class, data-*, …) are preserved.
   // Applied to both the flat prop and the `values` escape hatch. (Render-time
   // `normalizeLinkValue` also reads `attrs` as a defensive fallback.)
-  const canonicalizeLink = (v: any): any => {
-    if (typeof v === "string") {
-      return { name: "web", values: { href: v, target: "_blank" } };
-    }
-    if (v && typeof v === "object" && "name" in v && v.attrs && typeof v.attrs === "object") {
-      const { href: attrsHref, target: attrsTarget, ...customAttrs } = v.attrs;
-      if (attrsHref !== undefined || attrsTarget !== undefined) {
-        const linkValues = { ...(v.values as Record<string, any> | undefined) };
-        if (!linkValues.href && attrsHref !== undefined) linkValues.href = attrsHref;
-        if (!linkValues.target && attrsTarget !== undefined) linkValues.target = attrsTarget;
-        const next: Record<string, any> = { ...v, values: linkValues };
-        if (Object.keys(customAttrs).length) next.attrs = customAttrs;
-        else delete next.attrs;
-        return next;
-      }
-    }
-    return v;
-  };
-  for (const key of ["href", "action"] as const) {
-    if (userProps[key] !== undefined) userProps[key] = canonicalizeLink(userProps[key]);
-    if (result[key] !== undefined) result[key] = canonicalizeLink(result[key]);
+  // A flat `target` (Button, Link) is the link's: a new tab only where none is given (or where it's one that could end
+  // its attribute or isn't a string, said).
+  const target = safeTarget(userProps.target ?? "_blank") as string;
+  if (target !== (userProps.target ?? "_blank")) console.warn(`[Unlayer] ${componentType}'s target ${typeof userProps.target === "string" ? `${JSON.stringify(userProps.target)} could end its HTML attribute or start a tag` : "isn't text"}, so the link opens in a new tab (_blank).`);
+  if ("target" in userProps) delete userProps.target;
+  for (const key of LINK_KEYS) {
+    // A link given as null (nullable data) is none, as one left out is.
+    if (userProps[key] === null) delete userProps[key];
+    if (userProps[key] !== undefined) userProps[key] = canonicalizeLink(userProps[key], target);
+    if (result[key] !== undefined) result[key] = canonicalizeLink(result[key], target);
   }
 
   // Normalize CSS-idiom prop values to the shapes the exporters expect. Authors
@@ -293,94 +384,54 @@ export function mapSemanticProps<T extends Record<string, any>>(
   normalizeCssProps(userProps);
 
   // Analyze default values to detect nested object structure
-  const nestedGroups = analyzeNestedStructure(defaultValues);
+  const { groups: nestedGroups, owners } = analyzeNestedStructure(defaultValues);
 
-  // Separate flat props from potential nested props
+  // Separate flat props from potential nested props: a nested object as given, a key of one (flat) in it.
   const nested: Record<string, any> = {};
   const flat: Record<string, any> = {};
-
-  for (const [key, value] of Object.entries(userProps)) {
-    if (value === undefined) continue;
-
-    // Check if user already provided a nested object
-    if (nestedGroups.has(key)) {
-      // User passed the nested object directly
-      nested[key] = value;
-      continue;
-    }
-
-    // Check if this prop belongs to any nested group
-    let belongsToGroup = false;
-    for (const [groupName, groupProps] of nestedGroups.entries()) {
-      if (groupProps.has(key)) {
-        // This flat prop should be grouped
-        nested[groupName] = nested[groupName] || {};
-        nested[groupName][key] = value;
-        belongsToGroup = true;
-        break;
-      }
-    }
-
-    if (!belongsToGroup) {
-      // Regular flat prop
-      flat[key] = value;
+  for (const key of Object.keys(userProps)) {
+    const value = userProps[key];
+    // (A style prop given as `null`, as data gives one it hasn't, is one not given: `color: ;` isn't a color. A content
+    // prop given as `null` is no content, as in 0.2.1, not the block's placeholder.)
+    if (value === undefined || (value === null && !isContentProp(key))) continue;
+    if (nestedGroups.has(key)) nested[key] = value;
+    else {
+      const group = owners.get(key);
+      if (group) (nested[group] ||= {})[key] = value;
+      else flat[key] = value;
     }
   }
 
   // Merge everything: escape hatch < flat props < nested groups
-  const final: any = {
-    ...result,
-    ...flat
-  };
+  const final: any = { ...result, ...flat };
 
   // Merge nested groups (preserve existing from escape hatch)
-  for (const [groupName, groupValues] of Object.entries(nested)) {
-    if (Object.keys(groupValues).length > 0) {
-      final[groupName] = {
-        ...result[groupName],
-        ...groupValues
-      };
-    }
+  for (const groupName in nested) {
+    const groupValues = nested[groupName];
+    if (Object.keys(groupValues).length) final[groupName] = { ...result[groupName], ...groupValues };
   }
 
   // Some components (e.g. Column) ship an empty `border: {}` default, so the
   // nested-group detector can't see the border sub-keys and flat border-side
   // props (borderTopWidth, …) would land loose and be dropped by the exporter.
   // If the component declares a `border` field, gather them into it.
-  if (
-    defaultValues &&
-    typeof defaultValues === "object" &&
-    "border" in (defaultValues as object)
-  ) {
-    const borderSideRe = /^border(Top|Right|Bottom|Left)(Width|Style|Color)$/;
-    const collected: Record<string, any> = {};
-    for (const key of Object.keys(final)) {
-      if (borderSideRe.test(key)) {
-        collected[key] = final[key];
-        delete final[key];
-      }
-    }
-    if (Object.keys(collected).length > 0) {
-      final.border = { ...(final.border || {}), ...collected };
-    }
+  if (defaultValues && typeof defaultValues === "object" && "border" in (defaultValues as object)) {
+    const sides = Object.keys(final).filter((key) => key.startsWith("border") && /^border(Top|Right|Bottom|Left)(Width|Style|Color)$/.test(key));
+    if (sides.length) final.border = { ...(final.border || {}), ...Object.fromEntries(sides.map((key) => [key, final[key]])) };
+    for (const key of sides) delete final[key];
 
     // Border widths must carry a unit — `borderTopWidth: 1` would otherwise
     // render `border-top: 1 solid` (invalid CSS the browser drops). The
     // BorderInput type accepts a number, so normalize *Width fields (bare number
     // or unit-less numeric string → px), wherever the border came from.
+    // Cloned before rewriting: final.border may alias the caller's object (the
+    // `values` escape hatch is only a shallow clone, and a nested `border` prop
+    // passes through by reference), so mutating in place would be an impure side
+    // effect — e.g. a shared `const HAIRLINE = { borderTopWidth: 1 }` would get
+    // rewritten to "1px" in the caller.
     if (final.border && typeof final.border === "object") {
-      // Clone before rewriting: final.border may alias the caller's object (the
-      // `values` escape hatch is only a shallow clone, and a nested `border` prop
-      // passes through by reference), so mutating in place would be an impure side
-      // effect — e.g. a shared `const HAIRLINE = { borderTopWidth: 1 }` would get
-      // rewritten to "1px" in the caller.
       const b: Record<string, any> = { ...(final.border as Record<string, any>) };
-      for (const key of Object.keys(b)) {
-        if (!/Width$/.test(key)) continue;
-        const v = b[key];
-        if (typeof v === "number") b[key] = `${v}px`;
-        else if (typeof v === "string" && /^\d+(?:\.\d+)?$/.test(v.trim())) b[key] = `${v.trim()}px`;
-      }
+      for (const [key, v] of Object.entries(b)) if (/Width$/.test(key) && (typeof v === "number" || (typeof v === "string" && /^\s*\d+(\.\d+)?\s*$/.test(v)))) b[key] = `${String(v).trim()}px`;
       final.border = b;
     }
   }
@@ -391,11 +442,7 @@ export function mapSemanticProps<T extends Record<string, any>>(
       const { width, maxWidth, autoWidth, ...phone } = mobile || {};
       const mapped = mapSemanticProps(phone as SemanticProps<T>, defaultValues, componentType) as Record<string, any>;
       if (componentType === "Image" && (width !== undefined || maxWidth !== undefined || autoWidth !== undefined)) {
-        mapped.src = {
-          ...(overrides.mobile?.src || {}),
-          ...(autoWidth !== undefined ? { autoWidth } : { autoWidth: false }),
-          ...(width !== undefined || maxWidth !== undefined ? { maxWidth: width ?? maxWidth } : {}),
-        };
+        mapped.src = { ...(overrides.mobile?.src || {}), autoWidth: autoWidth === undefined ? false : autoWidth, ...(width !== undefined || maxWidth !== undefined ? { maxWidth: width ?? maxWidth } : {}) };
       } else if (width !== undefined || autoWidth !== undefined) {
         const key = componentType === "Button" ? "size" : "width";
         mapped[key] = { autoWidth: autoWidth ?? false, ...(width !== undefined ? { width: typeof width === "number" ? `${width}px` : width } : {}) };
@@ -441,11 +488,8 @@ export function mapSemanticProps<T extends Record<string, any>>(
  * storage shape.
  */
 export function normalizeLinkValue(value: unknown): Record<string, any> | undefined {
-  if (value == null) return undefined;
-  if (typeof value === "string") {
-    return { url: value, target: "_blank" };
-  }
-  if (typeof value !== "object") return undefined;
+  if (typeof value === "string") return { url: value, target: "_blank" };
+  if (!value || typeof value !== "object") return undefined;
   const v = value as Record<string, any>;
   // Already render-shape (has url) — pass through.
   if ("url" in v) return v;
@@ -454,38 +498,38 @@ export function normalizeLinkValue(value: unknown): Record<string, any> | undefi
   // reasonably put the link there — read href/target from `values` first, then
   // fall back to `attrs`, and spread any remaining `attrs` as custom attributes.
   // (Without this, `{ name, attrs: { href } }` type-checks but renders href="".)
-  if (
-    "name" in v &&
-    ((v.values && typeof v.values === "object") || (v.attrs && typeof v.attrs === "object"))
-  ) {
-    const inner = v.values && typeof v.values === "object" ? (v.values as Record<string, any>) : {};
-    const attrs = v.attrs && typeof v.attrs === "object" ? (v.attrs as Record<string, any>) : {};
-    const { href: attrsHref, target: attrsTarget, ...customAttrs } = attrs;
-    // `||` not `??`: the schema default merges in `values: { href: "" }`, so an
-    // empty `values.href` must fall through to the `attrs` href, not win over it.
-    return {
-      url: inner.href || attrsHref || "",
-      target: inner.target || attrsTarget || "_blank",
-      ...customAttrs,
-    };
-  }
-  return undefined;
+  const object = (x: unknown): Record<string, any> | undefined => (x && typeof x === "object" ? x : undefined);
+  const inner = object(v.values);
+  const attrs = object(v.attrs);
+  if (!("name" in v) || !(inner || attrs)) return undefined;
+  const { href, target, ...customAttrs } = attrs ?? {};
+  // `||` not `??`: the schema default merges in `values: { href: "" }`, so an
+  // empty `values.href` must fall through to the `attrs` href, not win over it.
+  return { url: inner?.href || href || "", target: inner?.target || target || "_blank", ...customAttrs };
 }
 
 /**
  * A link whose URL the exporters write into an `href="…"` as it is: `"`, `<`
  * and `>`, which a URL can't hold unencoded, are percent-encoded (as a browser
- * would), so a URL can't end the attribute (or Outlook's conditional comment).
+ * would), so a URL can't end the attribute (or Outlook's conditional comment);
+ * and whose target can't either (see safeTarget).
  * An email service's placeholder in the form `<%name%>` (SendGrid's
  * `<%asm_group_unsubscribe_raw_url%>`) is kept: the service fills it in as
  * written, and it can end neither.
  */
-function safeLink(link: Record<string, any>): Record<string, any> {
-  // A URL that isn't a string (an array from a JSON body or `?url[]=`) is written as its text: escaped as one.
-  const url = link.url === undefined || link.url === null ? link.url : String(link.url);
-  return typeof url === "string" ? { ...link, url: url.replace(/<%[\w.]+%>|["<>]/g, (c) => (c.length > 1 ? c : encodeURIComponent(c))) } : link;
+function safeLink(given: Record<string, any>): Record<string, any> {
+  // Its target too (see safeTarget).
+  const target = safeTarget(given.target);
+  const link = target === given.target ? given : { ...given, target };
+  return link.url == null ? link : { ...link, url: attributeUrl(link.url) };
 }
 
+/**
+ * A URL the exporters write into an attribute as it is (a link's `href`, an image's `src`), with what can end it
+ * percent-encoded (see safeLink). One that isn't a string (an array from a JSON body or `?url[]=`) is its text.
+ */
+const attributeUrl = (url: unknown) => String(url).replace(/<%[\w.]+%>|["<>]/g, (c) => (c.length > 1 ? c : encodeURIComponent(c)));
+
 /**
  * Normalize all link/action fields on an item's values to the render-value
  * shape the exporter reads. Returns a shallow clone — does not mutate.
@@ -510,12 +554,12 @@ export function normalizeValuesForExporter<T extends Record<string, any>>(
 
   // Top-level link fields used by Button (href), Image (action), Video (href),
   // Timer (action). Cheap to check both keys for every component.
-  for (const key of ["href", "action"]) {
-    if (out[key] !== undefined) {
-      const normalized = normalizeLinkValue(out[key]);
-      if (normalized !== undefined) out[key] = safeLink(normalized);
-    }
-  }
+  // A link as the exporters read it, or as it was (a shape it isn't).
+  const linkOf = (link: unknown) => {
+    const normalized = normalizeLinkValue(link);
+    return normalized ? safeLink(normalized) : link;
+  };
+  for (const key of ["href", "action"]) if (out[key] !== undefined) out[key] = linkOf(out[key]);
 
   // The Button exporter unescapes its text before writing it, where the
   // editor's canvas shows the text as the HTML it is. Escaping it once here
@@ -531,20 +575,29 @@ export function normalizeValuesForExporter<T extends Record<string, any>>(
       ...out.menu,
       items: out.menu.items.map((item: any) => {
         if (!item) return item;
-        const next = mode === "email" && typeof item.text === "string" ? { ...item, text: menuText(item.text) } : item;
-        if (next.link === undefined) return next;
-        const normalized = normalizeLinkValue(next.link);
-        if (normalized === undefined) return next;
-        return { ...next, link: safeLink(normalized) };
+        // (In an email, text that isn't a string, an array from a JSON body, is its text, escaped as text is.)
+        const next = mode === "email" && item.text != null ? { ...item, text: menuText(String(item.text)) } : item;
+        const link = linkOf(next.link);
+        return link === next.link ? next : { ...next, link };
       }),
     };
   }
 
   // Social icons each carry a `url`, written into an href as it is, and a `name`, which an email writes into its
-  // `title`, `alt` and image URL as it is too (a web page or a document escapes it).
+  // `title`, `alt` and image URL as it is too (a web page or a document escapes it); a name that isn't a string (an
+  // array from a JSON body) is its text.
   if (componentName === "Social" && out.icons && Array.isArray(out.icons.icons)) {
-    const named = (icon: any) => (mode === "email" && typeof icon.name === "string" ? { ...icon, name: escapeText(icon.name, true) } : icon);
-    out.icons = { ...out.icons, icons: out.icons.icons.map((icon: any) => (icon && typeof icon === "object" ? named(safeLink(icon)) : icon)) };
+    const named = (icon: any) => (icon.name == null || (mode !== "email" && typeof icon.name === "string") ? icon : { ...icon, name: mode === "email" ? escapeText(String(icon.name), true) : String(icon.name) });
+    // And an image of its own (`imgUrl`), which an email writes into its `src` as it is.
+    const imaged = (icon: any) => (icon.imgUrl == null ? icon : { ...icon, imgUrl: attributeUrl(icon.imgUrl) });
+    out.icons = { ...out.icons, icons: out.icons.icons.map((icon: any) => (icon && typeof icon === "object" ? imaged(named(safeLink(icon))) : icon)) };
+  }
+
+  // A Video's URL and thumbnail, which an email writes into its link's `href` and its image's `src` as they are.
+  if (componentName === "Video" && mode === "email" && out.video && typeof out.video === "object") {
+    const video = { ...out.video };
+    for (const key of ["url", "thumbnail"]) if (video[key] != null) video[key] = attributeUrl(video[key]);
+    out.video = video;
   }
 
   return out as T;
diff --git a/packages/shared/src/utils/text-marks.ts b/packages/shared/src/utils/text-marks.ts
new file mode 100644
index 00000000..0f266e31
--- /dev/null
+++ b/packages/shared/src/utils/text-marks.ts
@@ -0,0 +1,41 @@
+/**
+ * The plain text's placeholders are U+0000 and U+0001 around a number (a link's URL, preformatted text): the text's own
+ * (as it's written, or as an entity: `&#1;`, and `&amp;#1;`, which is decoded twice, as 0.2.1 decoded it) are kept out of
+ * their way, as two private-use characters the HTML holds none of (as it's written or as an entity), put back once the
+ * placeholders are gone. Where the HTML holds all of those (6,400), its own are left out.
+ */
+export class TextMarks {
+  private free?: [nul: string, one: string] | null;
+
+  constructor(private html: string) {}
+
+  /** The HTML, its own U+0000 and U+0001 as their stand-ins. */
+  input(): string {
+    if (!/[\0\u0001]/.test(this.html)) return this.html;
+    return this.html.replace(/[\0\u0001]/g, (char) => this.standIn(char));
+  }
+
+  /** What stands for `char` (U+0000 or U+0001) until the end: one of two private-use characters, or nothing. */
+  standIn(char: string): string {
+    const free = this.pick();
+    return free ? free[char === "\0" ? 0 : 1] : "";
+  }
+
+  /** The text, its stand-ins as what they stood for. */
+  output(text: string): string {
+    const free = this.free;
+    return free ? text.split(free[0]).join("\0").split(free[1]).join("\u0001") : text;
+  }
+
+  /** Two private-use characters the HTML holds none of, as written or as an entity (found once, where first needed). */
+  private pick(): [string, string] | null {
+    if (this.free !== undefined) return this.free;
+    const held = new Set<number>();
+    for (let i = 0; i < this.html.length; i++) held.add(this.html.charCodeAt(i));
+    // (Each `#…;`, wherever it is: `&amp;#xE000;` is decoded to one too.)
+    for (const [, decimal, hex] of this.html.matchAll(/#(?:(\d+)|x([0-9a-f]+));/gi)) held.add(String.fromCharCode(decimal ? parseInt(decimal, 10) : parseInt(hex, 16)).charCodeAt(0));
+    const free: string[] = [];
+    for (let code = 0xe000; code <= 0xf8ff && free.length < 2; code++) if (!held.has(code)) free.push(String.fromCharCode(code));
+    return (this.free = free.length === 2 ? [free[0], free[1]] : null);
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed94ae7b..d657802d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,7 +22,7 @@ importers:
         version: 27.0.0
       tsup:
         specifier: ^8.0.1
-        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)(typescript@5.9.3)
+        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3)
       typescript:
         specifier: ^5.6.3
         version: 5.9.3
@@ -228,7 +228,7 @@ importers:
         version: 18.3.1(react@18.3.1)
       tsup:
         specifier: ^8.0.1
-        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)(typescript@5.9.3)
+        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3)
       tsx:
         specifier: ^4.20.5
         version: 4.21.0
@@ -242,7 +242,7 @@ importers:
         specifier: ^1.0.12
         version: 1.0.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@unlayer/react-elements':
-        specifier: workspace:^0.2.0
+        specifier: workspace:^0.3.0
         version: link:../react
       prettier:
         specifier: ^3.3.3
@@ -283,7 +283,7 @@ importers:
         version: react@19.1.0
       tsup:
         specifier: ^8.0.1
-        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)(typescript@5.9.3)
+        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3)
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
@@ -345,21 +345,33 @@ importers:
       concurrently:
         specifier: 9.2.1
         version: 9.2.1
+      highlight.js:
+        specifier: 11.12.0
+        version: 11.12.0
       http-server:
         specifier: 14.1.1
         version: 14.1.1
       jsdom:
         specifier: ^24.1.3
         version: 24.1.3
+      marked:
+        specifier: 18.0.14
+        version: 18.0.14
       playwright:
         specifier: 1.60.0
         version: 1.60.0
+      prettier:
+        specifier: 3.6.2
+        version: 3.6.2
       storybook:
         specifier: ^9.1.1
         version: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      tailwindcss:
+        specifier: 4.2.1
+        version: 4.2.1
       tsup:
         specifier: ^8.0.1
-        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)(typescript@5.9.3)
+        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3)
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
@@ -375,7 +387,7 @@ importers:
     devDependencies:
       tsup:
         specifier: ^8.0.1
-        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)(typescript@5.9.3)
+        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3)
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@25.3.5)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
@@ -2872,6 +2884,10 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  highlight.js@11.12.0:
+    resolution: {integrity: sha512-nbfWpyRMcMrPMmDwJB+dhX/eiaPKtc2RB+0QZskqJ3WjRA/FDS0e9hZrx8EC/lbEv8gXy98FcDbNa/dspAaJMg==}
+    engines: {node: '>=12.0.0'}
+
   homedir-polyfill@1.0.3:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
@@ -3500,6 +3516,11 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
+  marked@18.0.14:
+    resolution: {integrity: sha512-mBHK6FBHuBAlhgRe88w9F0O1AbwwXJUcQibUbC/QcdTbVGAD7aWza+xt3N6oT/jCZx3/OMeS+8rnuiHZcQ9s7A==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -3565,6 +3586,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.20:
+    resolution: {integrity: sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -3804,6 +3830,10 @@ packages:
       yaml:
         optional: true
 
+  postcss@8.5.30:
+    resolution: {integrity: sha512-zkd+e9S1AQHhmaBKye9zlFHWjOwVgqXl1q3ECYy8561K7qxR2cREf/STLskulBFd78k6AOFeA+ff1TtEzk9bAA==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -4006,8 +4036,8 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  sax@1.5.0:
-    resolution: {integrity: sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA==}
+  sax@1.6.1:
+    resolution: {integrity: sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==}
     engines: {node: '>=11.0.0'}
 
   saxes@6.0.0:
@@ -4103,6 +4133,10 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  source-map-js@1.2.2:
+    resolution: {integrity: sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==}
+    engines: {node: '>=0.10.0'}
+
   source-map-support@0.5.13:
     resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
 
@@ -6187,7 +6221,7 @@ snapshots:
   '@testing-library/dom@9.3.4':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.28.4
+      '@babel/runtime': 7.28.6
       '@types/aria-query': 5.0.4
       aria-query: 5.1.3
       chalk: 4.1.2
@@ -7336,6 +7370,8 @@ snapshots:
 
   he@1.2.0: {}
 
+  highlight.js@11.12.0: {}
+
   homedir-polyfill@1.0.3:
     dependencies:
       parse-passwd: 1.0.0
@@ -8212,6 +8248,8 @@ snapshots:
 
   marked@15.0.12: {}
 
+  marked@18.0.14: {}
+
   math-intrinsics@1.1.0: {}
 
   merge-stream@2.0.0: {}
@@ -8264,12 +8302,14 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  nanoid@3.3.20: {}
+
   natural-compare@1.4.0: {}
 
   needle@3.3.1:
     dependencies:
       iconv-lite: 0.6.3
-      sax: 1.5.0
+      sax: 1.6.1
     optional: true
 
   node-addon-api@7.1.1:
@@ -8486,14 +8526,20 @@ snapshots:
 
   postal-mime@2.7.6: {}
 
-  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0):
+  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 2.6.1
-      postcss: 8.5.6
+      postcss: 8.5.30
       tsx: 4.21.0
 
+  postcss@8.5.30:
+    dependencies:
+      nanoid: 3.3.20
+      picocolors: 1.1.1
+      source-map-js: 1.2.2
+
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
@@ -8723,12 +8769,12 @@ snapshots:
     dependencies:
       chokidar: 4.0.3
       immutable: 5.1.5
-      source-map-js: 1.2.1
+      source-map-js: 1.2.2
     optionalDependencies:
       '@parcel/watcher': 2.5.6
     optional: true
 
-  sax@1.5.0:
+  sax@1.6.1:
     optional: true
 
   saxes@6.0.0:
@@ -8822,6 +8868,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  source-map-js@1.2.2: {}
+
   source-map-support@0.5.13:
     dependencies:
       buffer-from: 1.1.2
@@ -9063,7 +9111,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)(typescript@5.9.3):
+  tsup@8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.11)
       cac: 6.7.14
@@ -9074,7 +9122,7 @@ snapshots:
       fix-dts-default-cjs-exports: 1.0.1
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)
+      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)
       resolve-from: 5.0.0
       rollup: 4.52.5
       source-map: 0.8.0-beta.0
@@ -9084,7 +9132,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       '@swc/core': 1.15.40
-      postcss: 8.5.6
+      postcss: 8.5.30
       typescript: 5.9.3
     transitivePeerDependencies:
       - jiti
@@ -9239,7 +9287,7 @@ snapshots:
       esbuild: 0.25.11
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
-      postcss: 8.5.6
+      postcss: 8.5.30
       rollup: 4.52.5
       tinyglobby: 0.2.15
     optionalDependencies:
diff --git a/tests/next14-integration/app/email-page/page.jsx b/tests/next14-integration/app/email-page/page.jsx
index c480aa57..98ca0d63 100644
--- a/tests/next14-integration/app/email-page/page.jsx
+++ b/tests/next14-integration/app/email-page/page.jsx
@@ -1,8 +1,16 @@
-// A Server Component that renders an email (see lib/email.js).
+// A Server Component that renders an email (see lib/email.js), then calls a hook: Elements' renders put React's
+// dispatcher (Next.js's Flight renderer's) back as they found it.
+import { useId } from "react";
 import { emailCounts } from "@/lib/email";
 
 export const dynamic = "force-dynamic";
 
 export default function EmailPage() {
-  return <pre id="counts">{JSON.stringify(emailCounts())}</pre>;
+  const counts = emailCounts();
+  return (
+    <>
+      <pre id="counts">{JSON.stringify(counts)}</pre>
+      <i id="hook-after">{useId()}</i>
+    </>
+  );
 }
diff --git a/tests/next14-integration/lib/email.js b/tests/next14-integration/lib/email.js
index c7aadc4c..1121b0b7 100644
--- a/tests/next14-integration/lib/email.js
+++ b/tests/next14-integration/lib/email.js
@@ -1,7 +1,7 @@
 // The email tests/nextjs-integration renders (see its src/lib/email.ts), on Next.js 14 with React 18: 0.2.0's first
 // build failed here (`next build` collecting a route that imports Elements, and a Server Component rendering one).
 import React from "react";
-import { ColumnLayouts, Column, Email, Paragraph, Row, Button, renderToHtml, renderToJson } from "@unlayer/react-elements";
+import { ColumnLayouts, Column, Email, Paragraph, Row, Button, UnlayerProvider, renderToHtml, renderToJson } from "@unlayer/react-elements";
 
 const h = React.createElement;
 
@@ -17,7 +17,11 @@ function Welcome({ name }) {
 export function emailCounts() {
   const html = renderToHtml(h(Welcome, { name: "Ada" }));
   const design = renderToJson(h(Welcome, { name: "Ada" }));
+  // An <UnlayerProvider> around the template configures it, in the HTML and the design (React Server Components'
+  // React has no context: the render functions read its config off the element).
+  const provided = h(UnlayerProvider, { config: { textDirection: "rtl" }, children: h(Welcome, { name: "Ada" }) });
   return {
+    provider: /<html[^>]* dir="rtl"/.test(renderToHtml(provided)) && renderToJson(provided).body.values.textDirection === "rtl",
     tables: (html.match(/<table/g) ?? []).length,
     text: html.includes("Hello Ada") && html.includes("Right"),
     rows: design.body.rows.length,
diff --git a/tests/next16-integration/app/async-page/page.jsx b/tests/next16-integration/app/async-page/page.jsx
new file mode 100644
index 00000000..a2d8b8f5
--- /dev/null
+++ b/tests/next16-integration/app/async-page/page.jsx
@@ -0,0 +1,18 @@
+// An async Server Component that renders an email with the async renderers (see lib/async-email.js), when it's
+// requested (in a Suspense boundary, as Cache Components asks of what waits for a request).
+import { Suspense } from "react";
+import { connection } from "next/server";
+import { asyncEmailCounts } from "@/lib/async-email";
+
+async function Counts() {
+  await connection();
+  return <pre id="counts">{JSON.stringify(await asyncEmailCounts())}</pre>;
+}
+
+export default function AsyncEmailPage() {
+  return (
+    <Suspense fallback={null}>
+      <Counts />
+    </Suspense>
+  );
+}
diff --git a/tests/next16-integration/app/async/route.js b/tests/next16-integration/app/async/route.js
new file mode 100644
index 00000000..221ae587
--- /dev/null
+++ b/tests/next16-integration/app/async/route.js
@@ -0,0 +1,8 @@
+// A route handler that renders an email with the async renderers (see lib/async-email.js), when it's requested.
+import { connection } from "next/server";
+import { asyncEmailCounts } from "@/lib/async-email";
+
+export async function GET() {
+  await connection();
+  return Response.json(await asyncEmailCounts());
+}
diff --git a/tests/next16-integration/app/email-page/page.jsx b/tests/next16-integration/app/email-page/page.jsx
index 8655c0f3..cee9a4e9 100644
--- a/tests/next16-integration/app/email-page/page.jsx
+++ b/tests/next16-integration/app/email-page/page.jsx
@@ -1,6 +1,14 @@
-// A Server Component that renders an email (see lib/email.js), prerendered when the app builds.
+// A Server Component that renders an email (see lib/email.js), prerendered when the app builds, then calls a hook:
+// Elements' renders put React's dispatcher (Next.js's Flight renderer's) back as they found it.
+import { useId } from "react";
 import { emailCounts } from "@/lib/email";
 
 export default function EmailPage() {
-  return <pre id="counts">{JSON.stringify(emailCounts())}</pre>;
+  const counts = emailCounts();
+  return (
+    <>
+      <pre id="counts">{JSON.stringify(counts)}</pre>
+      <i id="hook-after">{useId()}</i>
+    </>
+  );
 }
diff --git a/tests/next16-integration/lib/async-email.js b/tests/next16-integration/lib/async-email.js
new file mode 100644
index 00000000..75da059d
--- /dev/null
+++ b/tests/next16-integration/lib/async-email.js
@@ -0,0 +1,34 @@
+// The email tests/nextjs-integration renders with the async renderers (see its src/lib/async-email.ts), on Next.js 16.
+import React from "react";
+import { ColumnLayouts, Column, Email, Paragraph, Row, Button, UnlayerProvider } from "@unlayer/react-elements";
+import { renderToHtml, renderToJson } from "@unlayer/react-elements/async";
+import { emailCounts } from "@/lib/email";
+
+const h = React.createElement;
+
+async function Greeting({ name }) {
+  return h(Paragraph, null, `Hello ${await Promise.resolve(name)}`);
+}
+
+function Welcome({ name }) {
+  return h(
+    Email,
+    null,
+    h(Row, null, h(Column, null, h(Greeting, { name }), h(Button, { href: "https://example.com" }, "Get started"))),
+    h(Row, { layout: ColumnLayouts.TwoEqual }, h(Column, null, h(Paragraph, null, "Left")), h(Column, null, h(Paragraph, null, "Right")))
+  );
+}
+
+export async function asyncEmailCounts() {
+  const html = await renderToHtml(h(Welcome, { name: "Ada" }));
+  const design = await renderToJson(h(Welcome, { name: "Ada" }));
+  const provided = h(UnlayerProvider, { config: { textDirection: "rtl" }, children: h(Welcome, { name: "Ada" }) });
+  return {
+    provider: /<html[^>]* dir="rtl"/.test(await renderToHtml(provided)) && (await renderToJson(provided)).body.values.textDirection === "rtl",
+    tables: (html.match(/<table/g) ?? []).length,
+    syncTables: emailCounts().tables,
+    text: html.includes("Hello Ada") && html.includes("Right"),
+    rows: design.body.rows.length,
+    columns: design.body.rows.map((row) => row.columns.length),
+  };
+}
diff --git a/tests/next16-integration/lib/email.js b/tests/next16-integration/lib/email.js
index 1549d3d6..e8b0692d 100644
--- a/tests/next16-integration/lib/email.js
+++ b/tests/next16-integration/lib/email.js
@@ -1,7 +1,7 @@
 // The email tests/nextjs-integration renders (see its src/lib/email.ts), on Next.js 16 with Cache Components: 0.2.0
 // failed the build here, as its render asked crypto.getRandomValues() for a nonce, which a prerender may not read.
 import React from "react";
-import { ColumnLayouts, Column, Email, Paragraph, Row, Button, renderToHtml, renderToJson } from "@unlayer/react-elements";
+import { ColumnLayouts, Column, Email, Paragraph, Row, Button, UnlayerProvider, renderToHtml, renderToJson } from "@unlayer/react-elements";
 
 const h = React.createElement;
 
@@ -17,7 +17,11 @@ function Welcome({ name }) {
 export function emailCounts() {
   const html = renderToHtml(h(Welcome, { name: "Ada" }));
   const design = renderToJson(h(Welcome, { name: "Ada" }));
+  // An <UnlayerProvider> around the template configures it, in the HTML and the design (React Server Components'
+  // React has no context: the render functions read its config off the element).
+  const provided = h(UnlayerProvider, { config: { textDirection: "rtl" }, children: h(Welcome, { name: "Ada" }) });
   return {
+    provider: /<html[^>]* dir="rtl"/.test(renderToHtml(provided)) && renderToJson(provided).body.values.textDirection === "rtl",
     tables: (html.match(/<table/g) ?? []).length,
     text: html.includes("Hello Ada") && html.includes("Right"),
     rows: design.body.rows.length,
diff --git a/tests/next16-integration/package.json b/tests/next16-integration/package.json
index f50b28bc..75e758d1 100644
--- a/tests/next16-integration/package.json
+++ b/tests/next16-integration/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "verify": "node ../nextjs-integration/verify.mjs 3767 --no-edge"
+    "verify": "node ../nextjs-integration/verify.mjs 3767 --no-edge --async"
   },
   "dependencies": {
-    "next": "16.4.0",
+    "next": "16.4.2",
     "react": "19.3.0",
     "react-dom": "19.3.0"
   }
diff --git a/tests/nextjs-integration/package.json b/tests/nextjs-integration/package.json
index d1869e89..8a92948e 100644
--- a/tests/nextjs-integration/package.json
+++ b/tests/nextjs-integration/package.json
@@ -4,12 +4,14 @@
   "private": true,
   "scripts": {
     "build": "next build --turbopack",
-    "verify": "node verify.mjs"
+    "build:webpack": "next build",
+    "verify": "node verify.mjs 3765 --async --pages-api"
   },
   "dependencies": {
     "next": "15.5.3",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "tailwindcss": "4.2.1"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/tests/nextjs-integration/src/app/async-page/page.tsx b/tests/nextjs-integration/src/app/async-page/page.tsx
new file mode 100644
index 00000000..dcaf4ff9
--- /dev/null
+++ b/tests/nextjs-integration/src/app/async-page/page.tsx
@@ -0,0 +1,8 @@
+// An async Server Component that renders an email with the async renderers (see src/lib/async-email.ts).
+import { asyncEmailCounts } from "@/lib/async-email";
+
+export const dynamic = "force-dynamic";
+
+export default async function AsyncEmailPage() {
+  return <pre id="counts">{JSON.stringify(await asyncEmailCounts())}</pre>;
+}
diff --git a/tests/nextjs-integration/src/app/async/route.ts b/tests/nextjs-integration/src/app/async/route.ts
new file mode 100644
index 00000000..87d9d74c
--- /dev/null
+++ b/tests/nextjs-integration/src/app/async/route.ts
@@ -0,0 +1,8 @@
+// A route handler that renders an email with the async renderers (see src/lib/async-email.ts).
+import { asyncEmailCounts } from "@/lib/async-email";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  return Response.json(await asyncEmailCounts());
+}
diff --git a/tests/nextjs-integration/src/app/edge/route.ts b/tests/nextjs-integration/src/app/edge/route.ts
index ce209525..94ba2c2e 100644
--- a/tests/nextjs-integration/src/app/edge/route.ts
+++ b/tests/nextjs-integration/src/app/edge/route.ts
@@ -1,6 +1,6 @@
 // An edge route that renders an email (see src/lib/email.ts). The build must succeed: React 19's browser server
 // build, which Elements once loaded, opens a MessageChannel there when it loads. React here is React Server
-// Components', which react-dom can't render with: Elements says to render in the Node.js runtime.
+// Components', which react-dom can't render with: Elements renders the email without it.
 import { emailCounts } from "@/lib/email";
 
 export const runtime = "edge";
diff --git a/tests/nextjs-integration/src/app/email-page/page.tsx b/tests/nextjs-integration/src/app/email-page/page.tsx
index 4cf27e62..64d56ade 100644
--- a/tests/nextjs-integration/src/app/email-page/page.tsx
+++ b/tests/nextjs-integration/src/app/email-page/page.tsx
@@ -1,8 +1,16 @@
-// A Server Component that renders an email (see src/lib/email.ts).
+// A Server Component that renders an email (see src/lib/email.ts), then calls a hook: Elements' renders put React's
+// dispatcher (Next.js's Flight renderer's) back as they found it.
+import { useId } from "react";
 import { emailCounts } from "@/lib/email";
 
 export const dynamic = "force-dynamic";
 
 export default function EmailPage() {
-  return <pre id="counts">{JSON.stringify(emailCounts())}</pre>;
+  const counts = emailCounts();
+  return (
+    <>
+      <pre id="counts">{JSON.stringify(counts)}</pre>
+      <i id="hook-after">{useId()}</i>
+    </>
+  );
 }
diff --git a/tests/nextjs-integration/src/lib/async-email.ts b/tests/nextjs-integration/src/lib/async-email.ts
new file mode 100644
index 00000000..ddf4eca4
--- /dev/null
+++ b/tests/nextjs-integration/src/lib/async-email.ts
@@ -0,0 +1,39 @@
+// The email src/lib/email.ts renders, its greeting loaded as it renders, through the async renderers: what verify.mjs
+// checks comes out as the same email (as many tables as the synchronous renderers give, the same design), from a
+// route handler and from an async Server Component. Elements' React isn't react-dom's there, and 0.3.0's async
+// renderers gave a web layout and a design without rows, with only a warning.
+import React from "react";
+import { ColumnLayouts, Column, Email, Paragraph, Row, Button, UnlayerProvider } from "@unlayer/react-elements";
+import { renderToHtml, renderToJson } from "@unlayer/react-elements/async";
+import { emailCounts } from "@/lib/email";
+import { asyncEntryChecks } from "@/lib/entries";
+
+const h = React.createElement;
+
+async function Greeting({ name }: { name: string }) {
+  return h(Paragraph, null, `Hello ${await Promise.resolve(name)}`);
+}
+
+function Welcome({ name }: { name: string }) {
+  return h(
+    Email,
+    null,
+    h(Row, null, h(Column, null, h(Greeting, { name }), h(Button, { href: "https://example.com" }, "Get started"))),
+    h(Row, { layout: ColumnLayouts.TwoEqual }, h(Column, null, h(Paragraph, null, "Left")), h(Column, null, h(Paragraph, null, "Right")))
+  );
+}
+
+export async function asyncEmailCounts() {
+  const html = await renderToHtml(h(Welcome, { name: "Ada" }));
+  const design = await renderToJson(h(Welcome, { name: "Ada" }));
+  const provided = h(UnlayerProvider, { config: { textDirection: "rtl" }, children: h(Welcome, { name: "Ada" }) });
+  return {
+    provider: /<html[^>]* dir="rtl"/.test(await renderToHtml(provided)) && (await renderToJson(provided)).body.values.textDirection === "rtl",
+    tables: (html.match(/<table/g) ?? []).length,
+    syncTables: emailCounts().tables,
+    text: html.includes("Hello Ada") && html.includes("Right"),
+    rows: design.body.rows.length,
+    columns: design.body.rows.map((row) => row.columns.length),
+    entries: await asyncEntryChecks(),
+  };
+}
diff --git a/tests/nextjs-integration/src/lib/email.ts b/tests/nextjs-integration/src/lib/email.ts
index d485bebc..daf005d2 100644
--- a/tests/nextjs-integration/src/lib/email.ts
+++ b/tests/nextjs-integration/src/lib/email.ts
@@ -1,7 +1,8 @@
 // An email rendered on the server with renderToHtml and renderToJson: what verify.mjs checks comes out as an
 // email (tables, not a web layout) with its design, from a route handler and from a Server Component.
 import React from "react";
-import { ColumnLayouts, Column, Email, Paragraph, Row, Button, renderToHtml, renderToJson } from "@unlayer/react-elements";
+import { ColumnLayouts, Column, Email, Paragraph, Row, Button, UnlayerProvider, renderToHtml, renderToJson } from "@unlayer/react-elements";
+import { entryChecks } from "@/lib/entries";
 
 const h = React.createElement;
 
@@ -17,10 +18,15 @@ function Welcome({ name }: { name: string }) {
 export function emailCounts() {
   const html = renderToHtml(h(Welcome, { name: "Ada" }));
   const design = renderToJson(h(Welcome, { name: "Ada" }));
+  // An <UnlayerProvider> around the template configures it, in the HTML and the design (React Server Components'
+  // React has no context: the render functions read its config off the element).
+  const provided = h(UnlayerProvider, { config: { textDirection: "rtl" }, children: h(Welcome, { name: "Ada" }) });
   return {
+    provider: /<html[^>]* dir="rtl"/.test(renderToHtml(provided)) && renderToJson(provided).body.values.textDirection === "rtl",
     tables: (html.match(/<table/g) ?? []).length,
     text: html.includes("Hello Ada") && html.includes("Right"),
     rows: design.body.rows.length,
     columns: design.body.rows.map((row) => row.columns.length),
+    entries: entryChecks(),
   };
 }
diff --git a/tests/nextjs-integration/src/lib/entries.ts b/tests/nextjs-integration/src/lib/entries.ts
new file mode 100644
index 00000000..049280df
--- /dev/null
+++ b/tests/nextjs-integration/src/lib/entries.ts
@@ -0,0 +1,43 @@
+// Every entry of Elements, rendered where src/lib/email.ts's email is (each route, page and component of the app,
+// in each of Next.js's layers and with either bundler): a <Font> and a <Head> tag, Markdown, highlighted code and
+// the design as code with the synchronous renderers, and Tailwind classes with the async ones (which load tailwindcss,
+// installed with the app, as they run). A bundler that can't load an entry fails the build (webpack checks every name
+// a module imports), or the route gives `false` for it.
+import React from "react";
+import { Column, Email, Paragraph, Row, renderToHtml, renderToJson } from "@unlayer/react-elements";
+import { renderToHtml as renderToHtmlAsync } from "@unlayer/react-elements/async";
+import { CodeBlock } from "@unlayer/react-elements/code";
+import { designToElements } from "@unlayer/react-elements/codegen";
+import { Font } from "@unlayer/react-elements/font";
+import { Head } from "@unlayer/react-elements/head";
+import { Markdown } from "@unlayer/react-elements/markdown";
+import { Tailwind } from "@unlayer/react-elements/tailwind";
+
+const h = React.createElement;
+
+// The design is made without the <Head>, whose tags a design can't hold (Elements warns).
+const email = (head?: React.ReactNode) =>
+  h(
+    Email,
+    null,
+    h(Font, { family: "Inter", url: "https://fonts.googleapis.com/css2?family=Inter", fallback: "Arial, sans-serif", default: true }),
+    head,
+    h(Row, null, h(Column, null, h(Markdown, null, "# A Markdown heading"), h(CodeBlock, { language: "ts" }, "const total = 1;")))
+  );
+
+export function entryChecks() {
+  const html = renderToHtml(email(h(Head, null, h("meta", { name: "entries", content: "every entry" }))));
+  return {
+    font: html.includes("fonts.googleapis.com/css2?family=Inter"),
+    head: html.includes('<meta name="entries" content="every entry"'),
+    markdown: html.includes("A Markdown heading"),
+    code: /<span style="[^"]*color[^"]*">const<\/span>/.test(html),
+    codegen: designToElements(renderToJson(email())).code.includes('import { Font } from "@unlayer/react-elements/font"'),
+    tailwind: typeof Tailwind === "function",
+  };
+}
+
+export async function asyncEntryChecks() {
+  const tailwind = h(Tailwind, null, h(Email, null, h(Row, null, h(Column, null, h(Paragraph, { className: "text-[#123456]" }, "Tailwind")))));
+  return { ...entryChecks(), tailwind: (await renderToHtmlAsync(tailwind)).includes("color: #123456") };
+}
diff --git a/tests/nextjs-integration/src/pages/api/edge-email.ts b/tests/nextjs-integration/src/pages/api/edge-email.ts
new file mode 100644
index 00000000..7a201dd6
--- /dev/null
+++ b/tests/nextjs-integration/src/pages/api/edge-email.ts
@@ -0,0 +1,16 @@
+// A Pages Router API route on the edge runtime that renders an email (see src/lib/email.ts). It has no react-server
+// condition, so React here is the full one and react-dom renders with it: Elements must render, unlike in an App
+// Router edge route (src/app/edge/route.ts).
+import { emailCounts } from "@/lib/email";
+
+// webpack (Next.js 15's default bundler) fails an edge API route's build for code that could evaluate a string:
+// @unlayer/exporters has lodash's `Function("return this")()`, which the edge runtime never reaches (it has globalThis).
+export const config = { runtime: "edge", unstable_allowDynamic: ["**/node_modules/@unlayer/exporters/**"] };
+
+export default function handler() {
+  try {
+    return Response.json(emailCounts());
+  } catch (error) {
+    return Response.json({ error: (error as Error).message });
+  }
+}
diff --git a/tests/nextjs-integration/src/pages/api/email.ts b/tests/nextjs-integration/src/pages/api/email.ts
new file mode 100644
index 00000000..b6f649a6
--- /dev/null
+++ b/tests/nextjs-integration/src/pages/api/email.ts
@@ -0,0 +1,7 @@
+// A Pages Router API route that renders an email (see src/lib/email.ts), in the Node.js runtime.
+import type { NextApiRequest, NextApiResponse } from "next";
+import { emailCounts } from "@/lib/email";
+
+export default function handler(_request: NextApiRequest, response: NextApiResponse) {
+  response.status(200).json(emailCounts());
+}
diff --git a/tests/nextjs-integration/verify.mjs b/tests/nextjs-integration/verify.mjs
index dc701b2a..af6bdeff 100644
--- a/tests/nextjs-integration/verify.mjs
+++ b/tests/nextjs-integration/verify.mjs
@@ -1,13 +1,18 @@
 // Starts the built app and checks that an email rendered on the server is one: email tables, not a web layout,
-// and a design with its rows, from a route handler and from a Server Component; and what an edge route gets. `next build` succeeding isn't
-// enough: Elements once rendered rows as a web page there, and an empty design, without an error.
+// and a design with its rows (and an UnlayerProvider's config in both), from a route handler and from a Server
+// Component; what an App Router edge route gets, and an email from Pages Router API routes (Node.js and edge).
+// `next build` succeeding isn't enough: Elements once rendered rows as a web page there, and an empty design, without
+// an error. The app is built with Turbopack and with webpack (`npm run build:webpack`), and checked after each.
 import { spawn } from "node:child_process";
 
 // Run in the app's folder (tests/next14-integration and tests/next16-integration run it too, without an edge route:
 // Next.js 14 can't bundle Elements for the edge runtime, 0.1.22 neither, and Next.js 16 deprecates it), on a port of
-// its own.
+// its own; with `--async`, the async renderers' route handler and Server Component too, and with `--pages-api`, a
+// Pages Router API route in the Node.js runtime.
 const port = Number(process.argv[2] ?? 3765);
 const edgeRoute = !process.argv.includes("--no-edge");
+const asyncRoutes = process.argv.includes("--async");
+const pagesApi = process.argv.includes("--pages-api");
 const server = spawn("npx", ["next", "start", "-p", String(port)], { stdio: "inherit" });
 const fail = (message) => {
   console.error(`✗ ${message}`);
@@ -31,22 +36,51 @@ const check = (where, counts) => {
   if (!(counts.tables >= 8)) fail(`${where}: ${counts.tables} tables in the email (rows came out as a web layout)`);
   if (!counts.text) fail(`${where}: the email's text is missing`);
   if (counts.rows !== 2 || counts.columns.join() !== "1,2") fail(`${where}: the design has rows ${JSON.stringify(counts.columns)}, not [1,2]`);
-  console.log(`✓ ${where}: ${counts.tables} tables, design rows ${JSON.stringify(counts.columns)}`);
+  if (counts.provider !== true) fail(`${where}: an UnlayerProvider's textDirection didn't reach the email and its design`);
+  // The app's every-entry check (tests/nextjs-integration/src/lib/entries.ts), where it has one.
+  const entries = Object.entries(counts.entries ?? {});
+  const failed = entries.filter(([, ok]) => ok !== true).map(([entry]) => entry);
+  if (failed.length) fail(`${where}: Elements' ${failed.join(", ")} entry didn't render`);
+  console.log(`✓ ${where}: ${counts.tables} tables, design rows ${JSON.stringify(counts.columns)}${entries.length ? `, ${entries.length} entries` : ""}`);
 };
 check("route handler", JSON.parse(await get("/email")));
-const counts = async (path, where) => {
-  const json = /<pre id="counts">([^<]*)<\/pre>/.exec(await get(path))?.[1]?.replace(/&quot;/g, '"');
+const counts = async (path, where, checked = check) => {
+  const page = await get(path);
+  const json = /<pre id="counts">([^<]*)<\/pre>/.exec(page)?.[1]?.replace(/&quot;/g, '"');
   if (!json) fail(`${where}: no counts on the page`);
-  check(where, JSON.parse(json));
+  checked(where, JSON.parse(json));
+  return page;
 };
-await counts("/email-page", "Server Component");
+// The Server Component's own hook after Elements' renders: React's dispatcher (Flight's) was put back.
+const serverComponent = await counts("/email-page", "Server Component");
+if (!/<i id="hook-after">[^<]+<\/i>/.test(serverComponent)) fail("Server Component: its useId() after Elements' renders gave nothing");
+console.log(`✓ Server Component: its hook after Elements' renders works (${/<i id="hook-after">([^<]+)<\/i>/.exec(serverComponent)[1]})`);
 // A Client Component working the email out in useMemo, in its server render.
 await counts("/client-email", "Client Component");
-// An edge route: it renders the email, or (react-dom can't render with React Server Components' React) says where to.
+// The async renderers, on the same email with its greeting loaded as it renders: the same email as the synchronous
+// renderers give. Elements' React isn't react-dom's in a route handler or a Server Component, and 0.3.0's async
+// renderers gave 3 tables (a web layout) and a design without rows there.
+if (asyncRoutes) {
+  const same = (where, counts) => {
+    if (counts.tables !== counts.syncTables) fail(`${where}: ${counts.tables} tables in the email, where the synchronous renderers give ${counts.syncTables}`);
+    check(where, counts);
+  };
+  same("async route handler", JSON.parse(await get("/async")));
+  await counts("/async-page", "async Server Component", same);
+}
+// An App Router edge route: React there is React Server Components', which react-dom can't render with; Elements
+// renders the email without it.
 const edge = edgeRoute ? JSON.parse(await get("/edge")) : undefined;
 if (!edge);
 else if (edge.error === undefined) check("edge route", edge);
-else if (/render emails in the Node\.js runtime/.test(edge.error)) console.log(`✓ edge route: ${edge.error}`);
 else fail(`edge route: ${edge.error}`);
+// A Pages Router API route in the Node.js runtime.
+if (pagesApi) check("Pages Router API route", JSON.parse(await get("/api/email")));
+// A Pages Router API route on the edge runtime: React there is the full one, so the email renders.
+if (edgeRoute) {
+  const pages = JSON.parse(await get("/api/edge-email"));
+  if (pages.error !== undefined) fail(`Pages Router edge API route: ${pages.error}`);
+  check("Pages Router edge API route", pages);
+}
 server.kill();
 process.exit(0);
diff --git a/tests/older-peers/.gitignore b/tests/older-peers/.gitignore
new file mode 100644
index 00000000..504afef8
--- /dev/null
+++ b/tests/older-peers/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json
diff --git a/tests/older-peers/package.json b/tests/older-peers/package.json
new file mode 100644
index 00000000..3c9f5cff
--- /dev/null
+++ b/tests/older-peers/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "older-peers-test",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "verify": "node verify.mjs"
+  },
+  "dependencies": {
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
+  },
+  "devDependencies": {
+    "prettier": "2.8.8",
+    "tailwindcss": "3.4.17"
+  }
+}
diff --git a/tests/older-peers/verify.mjs b/tests/older-peers/verify.mjs
new file mode 100644
index 00000000..14f156d7
--- /dev/null
+++ b/tests/older-peers/verify.mjs
@@ -0,0 +1,41 @@
+// A project with Tailwind CSS 3 and prettier 2 of its own (see package.json), with the packed Elements installed in it
+// (`npm install --no-save <tarball>`). Tailwind and prettier are optional peer dependencies of any version, so the
+// install keeps the project's own: an 0.3.0 build's (">=4.0.0", ">=3.0.0") failed it with npm's ERESOLVE. Elements
+// renders, and what needs Tailwind CSS 4 or prettier 3 says to upgrade, as a module and required.
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import { createRequire } from "node:module";
+
+// Nothing here waits on the network: a render that hangs fails the check rather than the job's timeout.
+const timer = setTimeout(() => {
+  console.error("✗ still running after 60s");
+  process.exit(1);
+}, 60_000);
+
+const require = createRequire(import.meta.url);
+const versionOf = (name) => JSON.parse(fs.readFileSync(new URL(`./node_modules/${name}/package.json`, import.meta.url), "utf8")).version;
+// The project's own, not another copy installed for Elements.
+assert.equal(versionOf("tailwindcss"), "3.4.17");
+assert.equal(versionOf("prettier"), "2.8.8");
+for (const name of ["tailwindcss", "prettier"]) assert.equal(fs.existsSync(new URL(`./node_modules/@unlayer/react-elements/node_modules/${name}`, import.meta.url)), false, `a ${name} of Elements' own`);
+
+const tailwind = "[Unlayer] loadTailwind needs Tailwind CSS 4, and the tailwindcss installed is Tailwind CSS 3 or older (a PostCSS plugin): upgrade it with `npm install tailwindcss@4` (it's an optional peer dependency of @unlayer/react-elements).";
+const prettier = "[Unlayer] `pretty` needs prettier 3, and prettier 2.8.8 is installed: upgrade it with `npm install prettier@3` (an optional peer dependency of @unlayer/react-elements).";
+
+const React = require("react");
+const h = React.createElement;
+const builds = {
+  module: { E: await import("@unlayer/react-elements"), T: await import("@unlayer/react-elements/tailwind"), A: await import("@unlayer/react-elements/async") },
+  commonjs: { E: require("@unlayer/react-elements"), T: require("@unlayer/react-elements/tailwind"), A: require("@unlayer/react-elements/async") },
+};
+for (const [format, { E, T, A }] of Object.entries(builds)) {
+  const email = h(E.Email, null, h(E.Row, null, h(E.Column, null, h(E.Paragraph, { className: "text-red-500" }, "Hi there"))));
+  assert.ok(E.renderToHtml(email).includes("Hi there"), `${format}: an email renders`);
+  assert.ok((await A.renderToHtml(email)).includes("Hi there"), `${format}: an email renders with the async renderers`);
+  await assert.rejects(T.loadTailwind(), { message: tailwind }, `${format}: loadTailwind`);
+  await assert.rejects(T.renderToHtml(h(T.Tailwind, { config: {} }, email)), { message: tailwind }, `${format}: <Tailwind config>`);
+  await assert.rejects(A.pretty("<p>Hi there</p>"), { message: prettier }, `${format}: pretty`);
+  await assert.rejects(A.renderToHtml(email, { pretty: true }), { message: prettier }, `${format}: renderToHtml's pretty`);
+  console.info(`✓ ${format}: installs with Tailwind CSS 3 and prettier 2, renders, and says to upgrade them`);
+}
+clearTimeout(timer);