Visual template editor

Build agent-ready image tools without writing layout code

Create the approved design visually, choose which properties become variables, and give agents a constrained set of values they can populate safely.

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

Turn agent responses into consistent images

Explore image templates

Summary images

Map fields from an agent response into a fixed visual summary instead of asking the model to write layout code.

Image generation tools

Give an agent named values to fill instead of asking it to write HTML.

Visual response cards

Use fields from an agent response to render branded cards, plans, comparisons, and recommendations.

Content variation

Let agents change copy and imagery while the template preserves typography, spacing, and layout.

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

Build agent-ready image tools without writing layout code

Two ways to build, one way to render