--- title: "Introducing the Template Editor" description: "Learn about how our new editor offers the best of both worlds: rich interactive visual design while keeping things grounded in HTML/CSS implementation." published: "2026-07-14" author: "Jeffrey Needles" canonical: "https://htmlcsstoimage.com/blog/introducing-the-template-editor" --- # Background We've offered API-driven reusable templates since 2020, but we've always wanted a way to build them interactively. Traditional templating tools either lock you into a web-focused experience expecting links, nav and structure - or go too far and drop you in a freeform canvas that doesn't jibe well with structured templating. Our editor offers the best of both worlds: rich interactivity and visual design while keeping things grounded in HTML/CSS implementations, so when you're building, you can be confident in the final render. ## Why Templates Matter There's no one use-case for dynamically generated images, a lot of people will talk social cards or video thumbnails - but operating for almost a decade - we've seen implementations across the spectrum. While some people really do take a wide variety of inconsistent HTML/CSS and turn it into images - most users tend to follow some kind of pattern. Templates enable a few things: 1. **Consistency**: because the baseline of your style is centralized, updating it means any future image you generate will match. 2. **Easier GET URLs**: you can use the [create-and-render](https://docs.htmlcsstoimage.com/getting-started/create-and-render/) endpoint to generate HTML/CSS or URL images, but debugging is trickier, and URLs can get massive. Instead, with a [template](https://docs.htmlcsstoimage.com/getting-started/create-and-render/#creating-a-templated-image-url) - your query string only needs to hold the variable values, not the full style. 3. **Simpler integration**: Because you can iterate on template design outside of your application code, developers can keep integrations small while designers, marketers, or operations teams adjust the visual layer more directly. ## Introducing the Template Editor The Template Editor is a visual editor built into your HCTI dashboard. You can design templates interactively, preview changes as you work, and still rely on the same HTML/CSS rendering pipeline when it's time to generate images through the API. #### Blocks Unlike traditional block editors - ours emphasizes freeform placement of text, image, shape or raw HTML blocks. We also built _Panels_ in familiar HTML-functionality like flex & grid forms so you can keep some layouts structured & flexible. Read more about the different block types in our [docs](https://docs.htmlcsstoimage.com/template-editor/blocks/). #### Variables Instead of simply relying on handlebars for templating (although they are still supported!) - we've built in a more robust variable system you can use to assign many properties' values like sizes, colors and urls. You can now also say: > `name` is **required** - any image created without it should fail. No more `{{name}} has invited you to a party` #### Previews Since the primary difference from our existing API-driven templates is this **interactive** editor - previewability was paramount. You'll notice as you use the editor, most properties react in real time, as you hover over the padding or margin - you'll see where that manifests in the editor... you can drag your mouse over color pickers to watch the effect immediately, instead of waiting to click. Don't like that change - no worries, undo/redo is fully supported, but _does not_ get polluted as you preview. #### Docs Since this is new, we wanted to ensure there's a wealth of [docs](https://docs.htmlcsstoimage.com/template-editor/) available. Did we miss something? Maybe need some more clarification? Just [let us know](mailto:support@htmlcsstoimage.com). ## Start From a Preset Need some inspiration? We launched the [Presets Library](/templates) with templates for patterns we see all the time: [social posts](/templates?filt-Type=social-post), [product announcements](/templates?filt-Type=announcements), [video thumbnails](/templates?filt-Type=video-thumbnail), [promotional material](/templates?filt-Category=promotional), and more. The goal is not just to give you something pretty to start from, but to show how reusable image systems can be structured with variables, layout, and brand styling already in place. Try out the editor yourself with our [Template Playground](/templates/playground). ## Powered by the Same API Our HTML/CSS Templates are not going anywhere. If you've got existing code or style libraries that you take advantage of - building templates into your code is a fantastic approach. The template editor enables a new style of creation. Importantly, while block templates can't be created or updated in the API - nothing about the rendering pipeline changes. If you're using an HTML/CSS to Image client library - they're already compatible. The HCTI [MCP](https://docs.htmlcsstoimage.com/integrations/mcp/) understands the difference. ## What's Next? We're really excited about the possibilities of the product, and already have a roadmap of block types, feature enhancements and styling opportunities. We're also excited to share about some of the unique engineering that went into this product. If you're interested in how the editor works and what it takes to build this kind of product, check out our [Engineering Series](/blog/building-a-visual-template-editor-in-blazor-wasm) to learn more. If you've got feature requests, ideas or any feedback at all - feel free to get in touch over [email](mailto:support@htmlcsstoimage.com) or [Twitter](https://twitter.com/htmlcsstoimage).