React to PNG. No browser in the loop.
Turning a component into an image usually means shipping headless Chromium. We're chaining three small engines instead: Yoga for layout, Pretext for text, Skia for pixels. It's in development, and you can play with the output below.
- browsers spawned
- 0
- browsers spawned
- engines chained
- 3
- engines chained
- demo templates
- 6
- demo templates
01 · Try it
Make an OG image. Six styles, all at once.
- JSX in
- Yoga layout
- Pretext text
- Skia render
- PNG out
The walkthrough is paced for reading. The real library will run these stages in Node at build time.
02 · The pipeline
Now take your card apart. Five stages, zero browsers.
Every number here is measured live from your title, using the Classic template's layout rules.
03 · The problem
Every option ships too much or too little.
Puppeteer
Ships a browser
- ~200 MB of headless Chromium
- Slow cold starts, flaky in CI
- Memory-hungry in production
Satori / next/og
Ships a CSS subset
- No CSS grid, limited transforms
- Satori outputs SVG, not PNG
- Complex layouts break
@aumiqx/pixels
Ships three engines
- Yoga, Pretext and Skia in WASM
- Plain Node, nothing to spawn
- Full flexbox, direct PNG
| Capability | Puppeteer | Satori | next/og | pixels (goal) |
|---|---|---|---|---|
| No browser needed | ||||
| Full CSS flexbox | ||||
| PNG output | ||||
| Works with static export | ||||
| Under 1 MB install | ||||
| Custom fonts | ||||
| Runs in CI |
The pixels column is the design target. The library is still in development.
04 · The API
One function. A buffer out.
1import { render } from "@aumiqx/pixels"2import { OgImage } from "./templates/og"34const png = await render(5 <OgImage6 title="Best AI Tools for 2026"7 description="A guide to the tools that matter."8 accent="#B4A4F5"9 />10)1112fs.writeFileSync("public/og/my-page.png", png)
Write a component, pass it to render(), get a PNG buffer back. It runs in a build script, a CI job or anywhere Node runs.
This is the shape we are building toward. It is not on npm yet, and the demo above draws with Canvas 2D to show what the output looks like.
05 · Beyond OG
Images are just the start. Anything React can draw.
Build-time OG images
A branded preview for every page, generated at build. Works with static export.
PDFs from components
The same components that render your UI produce invoices, reports and certificates.
Email previews
See templates as exact images before they reach an inbox.
Visual regression tests
Snapshot components to pixels and diff them, with no browser in CI.