A layout engine for image generation in JavaScript. Compose images like you write components.
Built for real-world document generation
HTML and CSS were built for the web — not for programmatic mass document generation. Sone gives you a typed, declarative API tailored for its rendering engine. No missing specs. No browser overhead.
Multi-page PDF
Automatic page breaking, repeating headers and footers, page margins. Pages are just layout.
Rich text first-class
Mixed-style spans, justification, decorations, drop shadows, and per-glyph gradients in a single Text node.
Bidirectional & multilingual
Automatic RTL detection for Arabic, Hebrew, mixed paragraphs. Custom font loading for any script.
Hyphenation in 80+ languages
Automatic syllable-aware word hyphenation via Knuth–Liang patterns. Composes with balanced wrap.
Flexbox & CSS Grid
Powered by yoga-layout — the same engine behind React Native. If you know CSS, you already know Sone.
Output anywhere
Render to PNG, JPG, WebP, PDF, SVG, or raw Canvas. Same node tree, six formats.
No browser, no Puppeteer
Native Skia bindings. Images render in single-digit milliseconds, multi-page PDFs in tens of milliseconds.
Just JavaScript
No JSX, no HTML, no transpiler. Plain function calls that work in Node.js, Deno, Bun, and the browser.
YOLO / COCO datasets
Tag any node and export the full layout as a YOLO or COCO bounding-box dataset for ML training.
Just JavaScript. No JSX, no HTML.
Plain function calls that work anywhere JavaScript runs. Compose nodes like Column, Row, Text, Photo — Sone figures out where everything goes.
For Tailwind users
If you know Tailwind, you already know Sone
Same vocabulary, same flexbox model — just method calls instead of class strings. The card on the left and the card on the right render to identical pixels.
Want the full method list? Browse the layout reference →
Code in, document out
Every snippet below was rendered by Sone into the image beside it. Same builders, no JSX, no CSS — composing nodes is the entire API.
Open Graph image
Fixed-size 1200×630 social card. Same node tree renders to PNG, JPG, or WebP — single-digit-millisecond render means you can produce them per request.
Receipt with tab leaders
Tab stops with a "." leader give classic Word-style table-of-contents alignment in a single Text node — no Table needed.
Inline gradient span
Spans inside a Text inherit the paragraph layout but can override color, weight, font, decorations — even a CSS gradient color.
Stats card with semantic spans
Two-column dashboard tile. Each delta is a Span inside the body text — color the trend without breaking out into a separate node.
Pull-quote
maxWidth + lineHeight + a decorative leading character. The author block is a sibling Column with its own typography.
Feature row
A Row of two Columns — the icon tile is just a sized Column with a background. Compose features without a CSS framework.
What you can build
A small sample of outputs from the test suite — click any tile to open its source on GitHub. Every image is generated programmatically — no headless browser, no HTML parsing.
Header, line-items table, totals, and footer in one node tree.
Section headings, mixed typography, charts, and signatures.
Itemized pricing with branded header — same render as the invoice.
Tabular transactions with running balances and categorization.
Single-page document with mixed typography and tables.
Centered hero typography with decorative paths.
Auto-paginated reports with repeating headers and footers.
Render mobile app screens — perfect for store screenshots.
Colspan, rowspan, custom borders, and cell spacing.
True 2D layout with explicit column and row tracks.
Ordered, unordered, and custom-marker lists with nesting.
Mixed weights, decorations, and per-span colors.
Lines distribute to roughly equal widths — great for headings.
Knuth–Liang hyphenation for 80+ languages.
Dot or dash leaders fill the gap between aligned columns.
Rotate text 0°/90°/180°/270° while preserving flex layout.
Mixed LTR/RTL paragraphs with auto-detected base direction.
Render any SVG path with stroke, fill, and gradient color.
Mask any subtree to an arbitrary SVG path shape.
Decorative photo masks for hero treatments and avatars.
Use text glyphs as a mask over an image fill.
Drop-in Shiki integration via the sone/shiki entry.
How Sone compares
Sone, Takumi, Vercel Satori, and PlutoBook all turn code (or HTML/CSS) into images and PDFs, but they make different trade-offs. Pick by what you're shipping.
This table was generated with AI assistance. Some details may be outdated or wrong — check each project's docs before deciding. Spot a mistake? File an issue.
| Feature | Sonethis library | TakumiRust renderer | SatoriVercel | PlutoBookHTML → PDF |
|---|---|---|---|---|
| API | Plain JS function calls | JSX (HTML + CSS subset) | JSX (HTML + CSS subset) | HTML + CSS document |
| Renderer | skia-canvas (native Skia) | Rust + WGPU/Skia | SVG → resvg / Sharp | C++ + Cairo |
| JS / TS API | Yes | Yes | Yes | Node.js, C++, Python |
| Build step required | No | JSX | JSX | No |
| Image output (PNG / JPG / WebP) | Yes | Yes | PNG via post-render | PNG only |
| PDF output | multi-page, headers, footers | No | No | core feature |
| SVG output | Yes | No | native format | No |
| CSS Grid | Yes | No | No | Yes |
| Flexbox layout | yoga-layout | Yes | yoga-layout | Yes |
| Bidirectional text (RTL) | auto, full UBA | limited | limited | Yes |
| Hyphenation | 80+ languages | No | No | CSS hyphens |
| Balanced line wrapping | Yes | No | No | No |
| Tab stops & leaders | Yes | No | No | via CSS |
| Custom font loading | Yes | Yes | Yes | Yes |
| Layout metadata (bboxes) | YOLO / COCO export | No | No | No |
| Browser runtime | PNG / JPG / WebP | No | PNG / SVG | No |
| Edge runtime | No | Yes | Yes | No |
Documents at scale
Invoices, reports, resumes, multi-page PDFs, and OG images on Node servers — first-class typography and pagination.
Edge-fast OG images
Very fast OG images and dynamic banners on edge runtimes where Rust binaries are available.
JSX-native social cards
Edge-friendly OG images with familiar JSX + CSS — the lowest-friction option if you already write React.
Print-quality PDFs
Print-perfect PDFs from existing HTML/CSS templates — Node.js, Python, and C++ bindings cover most pipelines.
Frequently asked
Common questions about what Sone solves and how it fits into a document pipeline.