Design a template in the editor, render it from code

Draw the template once with your hands, then render it a thousand times from code. The editor and the API share one layer engine, so there is no translation step.

Open something

Go to imageapis.com/editor. The toolbar's starter menu loads any of the eight starters; every starter page also has an "Open in the editor" button. "New" gives you a 1200×630 card with a title that shrinks to fit and an accent bar. Your work autosaves in the browser, so coming back later restores it.

Move things

Select a layer by clicking it on the canvas or in the list on the left. The list is top-first, like a design tool; ↑ and ↓ change the stacking order.
Drag to move; edges and centres snap to the canvas and to other layers. Pull a corner or edge handle to resize. Arrow keys nudge by a pixel, with Shift by ten.
Duplicate with ⌘D (or the ⧉ button), delete with Delete, undo with ⌘Z.
Hide a layer with the ● button. Hidden layers stay in the template with visible: false, which is handy as a modification you flip at render time.

Style things

The Layer tab on the right lists every property the API accepts for the selected type: for text, the font (any of the 80 curated Google Fonts, or type any family), weight, size, colour, alignment, fit (shrink, clamp or none), line height, letter spacing; for images, the source URL and fit; for charts, the kind, the values, the labels, colours and so on. Colours take anything CSS does: a hex, rgba(), a gradient. The Template tab holds the canvas background and background image.

Add a layer with the buttons at the top left. A new chart comes with five bars; change kind to donut and give it labels to get a legend.

Make it a template, not a picture

Anywhere you can type text, you can type {{title}}. The Variables tab lists every placeholder in the template with an input for its value; the preview and the render use those values. Image sources, chart values and QR data take placeholders too, so one template can render a different photo, a different week of numbers and a different ticket URL each time.

Render

"Render PNG" sends the template and the variables to POST /v1/images through the site's demo (no key, 20 a minute, kept 30 days) and shows the result with its hosted URL and the curl that renders the same thing from your saved copy.

Save it, then use it from code

Paste your key under "Save to your account" and click "Save as new". The editor calls POST /v1/templates and shows the new tpl_… id; "Update" from then on is PUT /v1/templates/<id>. "List mine" opens any template already on your key, so you can edit a design you created from code.

From here the template is an id:

curl -X POST https://api.imageapis.com/v1/images \
  -H 'X-API-Key: YOUR_KEY' -H 'Content-Type: application/json' \
  -d '{"template":"tpl_…","variables":{"title":"Launch week starts Monday"},"scale":2}'

Or from an agent over MCP: "render tpl_… with the title 'Launch week starts Monday'" is one create_image call. Or as a signed URL that renders when the page is first shared.

If you would rather not paste a key, "Copy JSON" gives you the template to send with POST /v1/templates yourself, and "Copy curl" gives you the whole command.

What the editor cannot do yet

It edits layer templates. HTML-engine templates (engine: "html") load and preview, but their markup is edited in the JSON tab. There is no multi-select, no grouping and no alignment toolbar beyond snapping, and no animation: GIF and MP4 are the next stair. The changelog says what shipped.

The visual editor