HTML to image: a headless browser, Satori, or a template API
There are three common ways to make images from a design and data. A headless browser and Satori take HTML. A template API such as MintRender draws its own templates.
1. A headless browser
Puppeteer or Playwright open your HTML page in a real browser, then take a screenshot or print a PDF. Everything a browser can draw works: any CSS, web fonts and JavaScript. You run the browser yourself, or rent one (for example Cloudflare Browser Run, billed per browser hour). Each image needs a browser to start and load the page. Facts and costs.
2. Satori and @vercel/og
Satori turns HTML and CSS written as JSX into an SVG, and @vercel/og makes it a PNG. There is no browser to run, but it supports a part of CSS only, you load each font file yourself, and the design lives in your code. Facts and limits.
3. A template API
The design is a template made in a visual editor, with named fields. Your code (or n8n, Make, a signed link or an AI assistant) sends the values, and the service sends the file back. Some services take HTML templates too: HTML/CSS to Image, CraftMyPDF and APITemplate.io and Pictify.
MintRender is a template API that does not take HTML. Its own engine draws the template to SVG, PNG, JPEG, WebP or PDF, with text that fits its box, any Google font by name, QR codes, barcodes and charts. If your designs are HTML today, draw them again in the editor, or ask the AI template maker for a first version.
Which one to pick
| Headless browser | Satori | MintRender | |
|---|---|---|---|
| Takes HTML and CSS | yes, all of it | a part of CSS, as JSX | no: a visual template |
| Who changes the design | developers | developers | anyone, in the editor |
| Runs a browser | yes | no | no |
| Fonts | web fonts | you load the files | any Google font by name |
| Formats | screenshots and PDF | SVG, PNG | PNG, JPEG, WebP, SVG, PDF |
| What you pay | browser time and servers | your hosting | per file, 100 free a month |
Pick the browser when you need real HTML and JavaScript; Satori when developers own the design and run on Vercel; MintRender when other people change the design and you want images, PDFs and signed links without running anything. All products compared.
Move an HTML design to a template
Draw the design again in the editor, or write the scene JSON. Most CSS ideas have a field with the same job:
| CSS | Scene field |
|---|---|
position: absolute; left; top; width; height | x, y, w, h in px |
font-family, font-weight, font-style, font-size | font (a Google Fonts family), weight, italic, size |
color, text-align, line-height, letter-spacing, text-transform: uppercase | color, align, lineHeight, letterSpacing, uppercase |
-webkit-line-clamp with text-overflow: ellipsis | maxLines |
| Text that shrinks to fit (no CSS for it) | fit: "shrink" with minSize |
background-color, linear-gradient(), radial-gradient() | fill or background with a colour or a gradient |
object-fit, object-position | fit, focal |
border-radius, border | radius, stroke |
box-shadow, filter: blur(), opacity, mix-blend-mode | shadow, blur, opacity, blend |
transform: rotate() | rotation (degrees, about the box centre) |
overflow: hidden on a wrapper | a group with clip: true |
Template variables like {{title}} | param on the layer, then data in the API |
Flex and grid layouts, CSS animations and JavaScript have no field. Each layer has a fixed box, and text fits inside its box. The full list of fields is on the Templates and JSON page.
Seen MintRender used for content that breaks our terms? Report it. Questions about the API: support@mintrender.com, with the request id.