HTML Template to Image

The API enables you to add data to your HTML template and convert it to an image. This feature streamlines the generation of infographics, covers, personalized cards, and so on.

The data can be provided in JSON, XML, CSV or YAML and can be uploaded from a file or a string.

The supported template syntax is based on the Jinja rendering engine. The most common constructs are:

  • Data rendering: Invoice: {{ invoice.number }}
  • For loop: {% for item in invoice.items %} ... {% endfor %}
  • If statement: {% if invoice.total > 100 %} ... {% endif %}
  • Filter: {{ invoice.to.first_name|capitalize }}
  • Number formatting:
    • Thousands separator: {{ "{:,}".format(item.quantity) }}
    • Two decimal places: {{ "{:.2f}".format(item.price) }}

The following template filters are supported:
capitalize, center, default, escape, first, forceescape, format, indent, join, last, length, list, lower, replace, reverse, safe, slice, sort, string, striptags, title, trim, truncate, unique, upper, wordcount, wordwrap

Example

Below is a simple infographics template example along with sample JSON data. The code shows how to pass the template and the data to the API and convert it to a PNG image.

Template

<html>
  <head>
    <script>
      // populate the array from data
      var data = [
        {% for country in countries %}
          ["{{ country.name }}", {{ country.population }}],
        {% endfor %}
      ];
      var chart = new InfoGraphics(data, '#infographics');
    </script>
  </head>

  <body>
    <h1>{{ title }}</h1>
    <div id="#infographics"></div>

    {% if description %}
    <p>{{ description }}</p>
    {% endif %}
  </body>
</html>

JSON Data

{
  "title": "Population by Country (2023)",
  "description": "Data based on the latest UN estimates.",
  "countries": [
    { "name": "India", "population": 1428627663 },
    { "name": "China", "population": 1425671352 },
    { "name": "United States", "population": 339996563 },
    { "name": "Indonesia", "population": 277534122 },
    { "name": "Pakistan", "population": 240485658 }
  ]
}

API Code