Job nº AEK-001 · static build Proofing bench for Unlayer Elements

✳Asterix Elements Kit

Three documents, nine renders, zero external requests.

Every document below is a pure function of one typed object, rendered by Unlayer Elements into an email, a web page and a print document from the same component tree. The charts, QR codes, quota bars and status stamps are custom Elements tools drawn in HTML tables, so there is not one image, web font or script in any of it.

Built with Unlayer Elements. The live studio lets you change the data and watch all three outputs follow; npm run preview runs it locally.

9 documents built
0 external assets
98.8kB largest email
of 102.0kB Gmail budget
5 custom tools
13 portable blocks

The documents

Each card holds the same document three times over. Switch renderer to see what actually changes between them, which is the body width, the inbox preview text and the print rhythm, and nothing else. Drag the bottom edge of a frame to make it taller.

Invoice

A partially-paid B2B invoice with a full totals ladder, a scannable pay-by-QR code and a status stamp.

EmailWeb pagePrint / PDF

Table-based HTML with Outlook MSO conditionals, ready to hand to an ESP.

0 external assets 95.8kB 11 rows 94% of Gmail budget

email/invoice.html design JSON plain-text part

Responsive div/flexbox layout for a hosted, shareable link.

0 external assets 62.8kB 11 rows 960px wide

web/invoice.html design JSON

Print-optimised layout; piped through Chromium to produce the PDFs.

0 external assets 62.5kB 11 rows 720px wide

document/invoice.html design JSON PDF

Monthly business review

A usage and reliability review with a table-drawn bar chart, sparkline, KPI tiles and quota bars, no image assets.

EmailWeb pagePrint / PDF

Table-based HTML with Outlook MSO conditionals, ready to hand to an ESP.

0 external assets 98.8kB 14 rows 97% of Gmail budget

email/report.html design JSON plain-text part

Responsive div/flexbox layout for a hosted, shareable link.

0 external assets 61.0kB 13 rows 960px wide

web/report.html design JSON

Print-optimised layout; piped through Chromium to produce the PDFs.

0 external assets 60.9kB 14 rows 720px wide

document/report.html design JSON PDF

Proposal

A long-form statement of work: phased scope with pricing, three comparison tiers, terms and a sign-by-QR block.

EmailWeb pagePrint / PDF

Table-based HTML with Outlook MSO conditionals, ready to hand to an ESP.

0 external assets 96.7kB 12 rows 95% of Gmail budget

email/proposal.html design JSON plain-text part

Responsive div/flexbox layout for a hosted, shareable link.

0 external assets 69.3kB 15 rows 960px wide

web/proposal.html design JSON

Print-optimised layout; piped through Chromium to produce the PDFs.

0 external assets 68.9kB 15 rows 720px wide

document/proposal.html design JSON PDF

How the graphics are drawn

These are live, not screenshots. Each one is a custom tool registered through registerTool(), the same definition object the Unlayer editor takes, rendering here through the same exporter it uses inside a document. Charts in email are almost always flattened to a PNG, which disappears the moment a client blocks images.

Bar chart asterix-bar-chart One table column per point. The bar is a colour-filled cell of an exact pixel height, pushed to the baseline by a spacer cell above it.

118M

143M

131M

221M

249M

Feb

Mar

Apr

May

Jun

Metric tile asterix-kpi The delta is coloured by meaning, not direction. Latency falling is good, so it reads green. Changes inside the noise floor read neutral.

p99 ingest latency

84ms

▼ -18.2%vs May

Quota bar asterix-progress Two cells with percentage widths, the only bar technique Outlook renders reliably. The fill escalates as the allowance runs out.

Retention storage

1,140 / 1,000 GB  ·  114%

QR code asterix-qr A real, scannable code. The matrix is painted as run-length-encoded table cells with the 4-module quiet zone the spec requires. Point a phone at it.

astx.link/p/0431

Status stamp asterix-stamp The status is in the word as well as the colour, so it still reads when a PDF is printed in greyscale.

Overdue

12 days late

Take the blocks, not the whole document

Elements has a second JSON exporter that is easy to miss. renderRowToJson takes a single row and returns the shape Unlayer's Block Editor works with, rather than a whole design. So every block below is portable on its own: download one, drop it into a Block Editor, and you have a working letterhead or totals ladder without writing any React. The badges show which Asterix tools travel with the block.

Letterhead Wordmark on the left, document kind and reference on the right, monospaced so references line up. letterhead.json Meta grid Label and value pairs in two columns, for dates, references and currency. One item per column, not one per pair. meta-grid.json Party pair Two address blocks side by side under small labels, for sender and recipient. party-pair.json Line items table A financial table with per-column alignment, a detail line inside the description cell and a monospaced money column. line-items-table.json Totals ladder Right-aligned label and value pairs with rules and an emphasised final line. One nested table, so it costs one item. totals-ladder.json Status stamp Document status as a bordered badge. The state is in the word as well as the colour, so it survives greyscale printing. status-stamp.json asterix-kpiasterix-stamp KPI row Four metric tiles, two per row at email width. Deltas are coloured by meaning, so a falling latency reads green. kpi-row.json asterix-kpi Bar chart A chart drawn in table cells. No image, so it survives a client with images switched off and stays crisp at any density. bar-chart.json asterix-bar-chart Trend sparkline A headline figure beside a compact sparkline. The sparkline zooms to the series range so the shape stays readable. trend-sparkline.json asterix-kpiasterix-bar-chart Quota bars Usage against an allowance, with the fill escalating to amber and then red as the limit approaches. quota-bars.json asterix-progress Action with QR code A primary button beside a scannable QR code, for a document that might be read on paper as well as on screen. pay-cta-qr.json asterix-kpiasterix-qr Labelled prose A body-copy band with a small tracked label above it, sharing one item so the label costs nothing extra. notes.json Footer Text navigation, issuer identity and a legal line. Uses Menu rather than Social, because social icons resolve to remote images. footer.json

Running it

npm install
npm run build      # the nine documents, plain-text parts and design JSON
npm run pdf        # real PDFs from the print documents, via Chromium
npm test           # includes decoding the QR codes from rendered pixels
npm run preview    # the studio

dist/blocks/ holds each block as Block Editor row JSON, with an index.json manifest listing every block and the tools it carries.

Design JSON is what makes these loadable in the Unlayer editor. Built-in components serialise to their own types, and each custom tool serialises to { type: "custom", slug, values }, which is the shape the Builder stores.

Asterix Labs and Verano Commerce are fictional. Every address, tax ID, figure and URL is invented, and all links use reserved example domains. MIT licensed.