HTML template editor

Last modified: May 16, 2022Author: Jakub Pomykała

HTML Editor is an advanced way of creating engaging images, banners, charts and more! You don't have to be a designer, but you need to know HTML and CSS basics to create a layout for your images.

HTML Template Editor for Image Generation

Usage

Use merge tags in HTML or CSS tab with the following format {{yourMergeTagName}}

Example usage of merge tags in HTML Template Editor

Put sample data

Example usage of merge tags in HTML Template Editor

Click 'Generate Image' on the right side to see an example output. RenderForm will merge your HTML template and CSS file with Sample Data.

Example usage of merge fields in HTML Template Editor

Read more about creating images from HTML Templates with API.

What is a merge tag and merge field?

Merge tag is a variable name which can be used in HTML Templates in HTML code or in CSS file.

Merge field is a mapping dictionary, it is used for mapping specific value into merge tags.

Example

{
  "mergeTag": "mergeFieldValue"
}

Merge tags and merge fields can be used only in HTML Template Editor

Working with Arrays

Sample data

{
  "myTitles": [
    "title one",
    "title two"
  ]
}

HTML Code

{{#each myTitles}}
  <h1>{{this}}</h1>
{{/each}}

Advanced templating engine usage

RenderForm under the hood uses Handlebars library to merge your tags with values. You can read Handlebars Guide to learn more about the syntax.