Template Editor
Build a reusable image template in the dashboard, preview it with sample data, and save it for rendering through the API. Choose the visual block editor to arrange your design on a canvas, or the HTML/CSS code editor to work directly with markup and styles.
Open templates Browse Presets Templates APIChoose an editor
Section titled “Choose an editor”- Open Templates in the dashboard.
- Click Create New Template.
- Under How would you like to build?, choose the editor that fits your workflow.
| Editor | Choose it when | Start here |
|---|---|---|
| Block editor | You want to build visually with text, images, shapes, and layout panels. | Visual editor quick start |
| Code editor | You want to write HTML and CSS, or edit an HTML/CSS template you already created through the API. | HTML/CSS editor guide |
For an existing template, click its pencil button, Edit template. Entries marked BLOCKS open in the visual editor; entries marked HTML/CSS open in the code editor. Duplicate template starts a copy that gets its own template ID when saved.
What you can build
Section titled “What you can build”- Social sharing images, product graphics, certificates, reports, and cards
- Reusable layouts that generate different images from new text, image URLs, and other data
- Saved templates for API requests, signed URLs, or automatic Open Graph images
Build visually with the block editor
Section titled “Build visually with the block editor”Add blocks, arrange them on the canvas, and style them using the sidebars. Connect fields to variables when their values should change for each image.
Start from a blank template, browse the template presets, or try the template playground.
Editor areas
Section titled “Editor areas”| Area | What it controls |
|---|---|
| Canvas | Image size, canvas background, image settings, and the visible template area |
| Left sidebar | Blocks you can add to the template |
| Right sidebar | Properties for the selected canvas, block, panel child, or variable |
| Variables tab | Preview values and variable behavior before rendering |
| Preview and export | Check the generated output while you work |
Follow the visual editor quick start to build your first template.
Write HTML and CSS with the code editor
Section titled “Write HTML and CSS with the code editor”Edit your markup and styles in separate HTML and CSS tabs alongside a live preview. Use Variables to test Handlebars values, and Options to configure viewport dimensions, fonts, capture settings, and delivery options.
The code editor opens existing HTML/CSS templates created through the API, so you can continue working on them in the dashboard. Click Save to persist your changes.
Follow the HTML/CSS editor guide for a complete example, preview controls, and the save workflow.
Guides
Section titled “Guides”| Guide | Description |
|---|---|
| Visual editor quick start | Build, preview, save, and render a template using blocks |
| HTML/CSS editor | Write markup and styles with a live preview, test variables, and save HTML/CSS templates |
| Canvas | Set image size, canvas styling, and image settings in the visual editor |
| Variables | Connect render-time values to visual editor fields |
| Blocks | Choose text, media, shape, QR code, HTML, and panel blocks |
| Advanced | Visual editor layout behavior, panels, sizing, positioning, and Extra CSS |
How it fits with the API
Section titled “How it fits with the API”Both editors save reusable templates. After saving, use the template ID and pass template_values when generating images.
Use the same template rendering API for either type. You can also create signed template URLs.
For creating and updating templates programmatically, see the templates API reference.