Editing HTML/CSS templates

Create and edit HTML/CSS templates directly in the dashboard. Work on your markup and styles alongside a live preview, test Handlebars variables, and save the template for image generation through the API.

Existing HTML/CSS templates created through the API open in the same code editor.

To create a template:

1. Open Templates in the dashboard.
2. Click Create New Template.
3. Choose Code editor under How would you like to build?
4. Edit the starter HTML and CSS, then click Save. Enter a template name when prompted.

To edit an existing template, find the HTML/CSS entry in the Templates list and click its pencil button, Edit template. Its saved markup, styles, and rendering options load into the workspace.

The list also has a Duplicate template action. Use it to start an unsaved copy that gets its own template ID when you save it.

Choose Block editor when you want to arrange text, images, and layouts visually. The block editor quick start covers that workflow.

On wide workspaces, Split panels moves Options and Variables into a separate middle column so you can keep the source, settings, and preview visible together. Click Combine to return them to the source tabs.

Use the HTML tab for markup and the CSS tab for styles. Changes update the preview automatically.

To follow the example shown in the screenshots, put this in HTML:

<div class="card">
  <h1>{{title}}</h1>
  <p>{{description}}</p>
</div>

Then add these styles in CSS:

.card {
  padding: 48px;
  font-family: sans-serif;
  background: white;
  min-width: 240px;
}
h1 {
  color: #2563eb;
}

The editor discovers Handlebars variables in your HTML, such as {{title}}, and lists them in Variables.

Use Structured to fill in individual fields. Simple values can be entered as Text, Number, or Boolean. Use Raw JSON for arrays, objects, or a complete test payload:

{
  "title": "Hello, world",
  "description": "Your HTML and CSS template starts here."
}

Enter the values object itself here; the template_values wrapper is only needed in your image creation request. If the JSON is invalid, the editor shows an error and keeps using the previous valid values in the preview.

Turn on Show placeholders above the preview to display the Handlebars expressions instead of substituting your test values.

Open Options to configure the saved template’s rendering behavior. For example:

• Choose a viewport preset or enter its width and height.
• Set Google Fonts, device scale, or a transparent background.
• Choose a selector and configure capture timing.
• Configure PDF options, request overrides, a proxy, or a storage destination.

The live preview reflects your HTML, CSS, Google Fonts, viewport, color scheme, and background transparency. Generate an image through the API to verify capture timing, cropping, output, and delivery settings.

Use Fit to fit the design into the available space, 100% to view it at actual size, or the − and + buttons to change the preview zoom. Outline makes the preview boundary visible. These controls change how you view the preview, not the template’s output dimensions.

If your HTML includes JavaScript, it runs inside the preview. Click Reset to restart the preview and clear its script state. Script errors appear above the preview; Handlebars errors must be fixed before saving.

Click Details or the template name to edit its name and description. Click Save to persist your HTML, CSS, details, and rendering options. Changes marked Unsaved changes have not been saved yet.

After saving, the toolbar shows the saved version and the page URL contains your template ID. If someone has saved a newer version since you opened the template, the editor asks before overwriting it. Cancel that prompt and reload if you want to review the newer version first.

To render the saved template, send an image creation request to POST /v1/image/:template_id with your values:

{
  "template_values": {
    "title": "Hello, world",
    "description": "Your HTML and CSS template starts here."
  }
}

Requests using only the template ID use its latest version. Use POST /v1/image/:template_id/:template_version to pin a specific version, or create a signed template URL.

Your member role needs permission to read templates to open existing ones and permission to create/update templates to save. See permissions for details.