Graphics that can't break.
The graphics & document engine for reactive templates. Every element and every property is an expression. Your layout and your brand stay correct no matter what data you feed it. No shrink-to-ugly, no clipped text, no overflows.
Now run the exact same render over the API
This hits the real /api/render . Try it out!
No API key needed above. That call is pinned to this one public demo template, so it's free and unauthenticated. Point the same request at your own templateId instead and you'll need your API key (free, 100 renders a month; get one here); every render there costs one credit.
Text composing is our passion
Define the maximum dimensions of a text frame and the engine measures every line, every word, every glyph. It reflows, it wraps, it never overflows or shrinks to ugly.
One shape, but iterated
A rect behind each line of text by iterating through text.lines.length and setting x, y, width & height to text.lines[i]'s values? No problemos for la engine de los bluepic.
Write a formula, get a pattern
Why not iterating a circle for fun and making the color be an odd/even function of the index?
Elements that know about each other
Since every property can become an expression, we can funny things like "hide this element if it collides with that one".
Groups that arrange themselves
Layout groups are very cool, trust us. Drag a handle below and watch it hold.
One input. Every property recomputes.
Drag the single slider. The text, its size, its colour and its emphasis are all expressions of that one value — there is no static property anywhere. That's the whole engine in one control.
This is the engine behind every Bluepic template
No code required to design. Build, preview and publish your own reactive templates visually in Bluepic Studio, then render them exactly like the demos above.
Start building in StudioIteration means one element, repeated by a real number
This is the actual rectangle from the "one shape, iterated" demo above — not a simplified stand-in. It's told to repeat once per line of the text next to it. The count isn't hardcoded and no repeater component exists anywhere: body.lines.length is itself an expression, so it's already correct the moment the text changes.
- The repeat count is an expressionType a longer bio, get another rectangle — nothing re-renders by hand.
- Each copy reads real, rendered geometry
body.lines[i]is that specific line's measured position — not a guessed offset.
{
"name": "rectangle",
"iteration": { "expression": "body.lines.length", "key": "i" },
"properties": {
"x": "body.lines[i].x - pad",
"y": "body.lines[i].y - pad * 0.35",
"width": "body.lines[i].width + pad * 2",
"height": "body.lines[i].height + pad * 0.7",
"fill": "#1750bfFF"
}
}One engine. Every hard problem the others punt on.
What falls out of a reactive, expression-based template — for free, deterministically, on every render.
It reflows
Text of any length pushes its neighbours and grows the card. No shrink-to-ugly, no truncation, no failed renders.
The brand can’t break
Logos, colours, fonts and safe zones are enforced as constraints at creation time — not documented in a PDF nobody reads.
One template, every size
Feed it once, get 1:1, 9:16, 16:9 and print — recomputed for each aspect ratio, not naively scaled.
Data-driven by default
Repeating rows, dynamic tables, leaderboards, itemised certificates, conditional blocks — first-class, from an array of any length.
Exports nobody else has
PNG, JPEG, PDF, MP4 — and true SVG, which no other templated API ships. One source of truth, every format.
- PNG
- JPEG
- SVG
- MP4
Generate your first graphic in one call
Deterministic output, a real editor for your users, and a template engine that holds under any data. Free to start.