Visual template editor

Let product and design teams edit templates visually

Designers can update the layout in the visual editor while application code continues using the same template ID and variable names.

Start free Read the editor docs

No-code visual editor
Flexible layout blocks
Built-in stock photo search

Visual template editor

Library

Presets

My media

Stock photos

New report

Properties

Layout

Grid panel

Variable

report_title

Typography

Inter · 48px

Build your template

Two ways to build, one way to render

Both template types render by ID with named values.

Use cases

Keep image generation code small

Explore image templates

Separate data from design

Keep application data in the request while HTML, CSS, and layout stay in the template.

Versioned releases

Publish template changes deliberately and choose which version an integration renders.

Smaller requests

Send a template ID and its values instead of repeating the full HTML and CSS document.

Reusable render settings

Store image dimensions, fonts, browser behavior, and output settings with the template.

Example conversation

You

Use the HCTI MCP to list my templates and use the product-launch design with this title, price, and product image.
HTML/CSS to Image

I found the visual-editor template and its named values. I’ll fill them and return the generated image URL.
You

Create an Open Graph image from my blog template with this title, author, and cover image.
HTML/CSS to Image

I’ll render the saved block-based design with those three named values.
You

I published a new report-card design in the visual editor. Render its latest version with these student values.
HTML/CSS to Image

I’ll find the latest published version, fill its named values, and return the generated image URL.

MCP connected with OAuth

MCP integration

Use the HCTI API from your AI tools

Connect an MCP-compatible AI client to HCTI through OAuth.

Generate images and PDFs, capture webpages, and work with templates without putting an API key in the prompt.

Visual template editor

Design flexible image templates without writing layout code

Start from a preset or blank canvas, arrange blocks, and make the properties that change into named variables.

Choose a preset or blank canvas

Use a ready-made design or start at the dimensions you need.
Arrange blocks and media

Build with text, images, shapes, panels, and files from the media library.
Add variables and publish

Name the editable properties, preview the result, and publish the template for rendering.

Preset library

Start with a ready-made template

Choose a preset, customize it in the visual editor, and save it as a reusable template for your organization.

Browse all templates

Try the Editor

Visual editor

Create the layout without writing HTML or CSS

Use layout controls, saved media, presets, and searchable stock photography. Published templates render through the same image API as HTML/CSS templates.

Block-based design
Set layout, typography, color, spacing, and variables in the editor.
Media library
Reuse uploaded logos, product images, illustrations, and other team assets.
Preset library
Open a ready-made design and customize it for your images.
Stock photos from Pexels
Find photography without leaving the editor.

Template editor workspace

Start: Preset library
Design: Blocks · layout · typography
Media: Uploads + stock photos
Publish: Saved template ID

Visual template editor

Design a dynamic image template without writing code

Start with a preset or a blank canvas, build with flexible blocks, add variables and media, then render every variation through the API.

Start free Try the editor

Visual template workflows

Build reusable designs for every team

See how teams use the no-code editor, shared media, presets, and variables to maintain dynamic image designs.

Generate Images

Generate PDFs

Generate Images

Generate PDFs

Let product and design teams edit templates visually

Two ways to build, one way to render