experiment 03

@aumiqx/pixels

React-to-image without a browser. JSX in, PNG out. Powered by Yog layout, Pretext text measurement, and Skia rendering — the same engine Chrome uses, minus the 200 MB of Chromium.

the problem

Generating images from React shouldn't require a browser.

Every existing tool either ships an entire browser engine or only supports a fraction of CSS. There has to be a better way.

Puppeteer

~200 MB install size
Spawns headless Chromium
Slow cold start, breaks in CI
Memory-hungry in production

Satori / next-og

Only ~60% CSS support
No CSS grid, no transforms
SVG output only (not PNG)
Breaks on complex layouts

@aumiqx/pixels

~200 KB total size
Pure Node.js, zero binaries
Full CSS flexbox support
Direct PNG output

52 pages on this very site are missing OG images because no good solution exists for static export.

the pipeline

Five steps. Zero browsers.

Each stage does one thing well, then hands off to the next. The entire pipeline runs in a single Node.js process.

{ }

JSX Input

Your React component tree with inline styles. Same syntax you already write.

▦

Yog Layout

Facebook's flexbox engine computes element positions. No DOM required.

Pretext Text

Measures text line-breaks and font metrics. 500x faster than DOM layout.

◉

Skia Render

Composites pixels using the same engine Chrome uses internally.

▣

PNG Output

Raw image bytes written to disk. No browser was harmed.

try it

Generate an OG image right now.

Customize the fields, hit generate, and watch each pipeline stage activate in sequence. The image renders live on a Canvas element.

JSX Input

→

Yog Layout

→

Pretext Text

→

Skia Render

→

PNG Output

1200 x 630 — scaled preview

hit "generate image" to start

In production, this runs at build time in Node.js with Yog + Skia WASM. This demo simulates it with Canvas measureText().

customize

title

description

background

#0A0A0A

text

#ffffff

accent

#8B5CF6

how it works

This demo uses Canvas measureText() to approximate what the real pipeline does.

The full @aumiqx/pixels engine replaces Canvas with:

Yog WASM for flexbox math

Pretext for text measurement

Canvaskit (Skia) for rendering

the code

Twelve lines. That's it.

Write a React component, pass it to render(), get a PNG buffer. Run it in your build script, CI pipeline, or anywhere Node.js runs.

scripts/generate-og.tsx

1import { render } from "@aumiqx/pixels"
2import { OgImage } from "./templates/og"
3
4const png = await render(
5  <OgImage
6    title="Best AI Tools for 2026"
7    description="A comprehensive guide."
8    accent="#8B5CF6"
9  />
10)
11
12fs.writeFileSync("public/og/my-page.png", png)

what you could build

OG images are just the beginning.

Build-time OG images

Generate branded social previews for every page at build. Works with static export, no API routes needed.

PDF generation

Same component code that renders your UI generates invoices, reports, and certificates as documents.

Email previews

Preview email templates as pixel-perfect images without sending. Catch layout issues before they hit inboxes.

Visual regression tests

Snapshot components to pixels. Compare programmatically. No browser, no Playwright, no flakiness.

vs existing tools

Feature comparison.

Feature	Puppeteer	Satori	next/og	@aumiqx/pixels
No browser needed
Full CSS flexbox
PNG output
Static export compatible
< 1 MB install
CSS grid support
Custom fonts
Runs in CI

supported

partial

built by aumiqx labs