HTML Template to Image

HTML template rendering combines a reusable HTML layout with structured data to create personalized images. Place variables in the HTML and supply their values through PDFCrowd's HTML to Image API.

This guide walks through a complete event-pass example that you can adapt to certificates, cards, letters, and marketing materials. You can provide template data as JSON, XML, CSV, or YAML.

Quick Start

PDFCrowd templates use Jinja syntax for variables, loops, conditions, and filters. This example uses each of these features to create a personalized event pass.

HTML Template

The HTML template defines the layout and contains placeholders for the event and attendee details. You can reuse it with different data for each pass. Save it as event-pass.html.

        
        
        
      
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ event.name }}</title>
    <style>
      body { font-family: Arial, sans-serif; margin: 24px; color: #222; }
      h1 { color: #146c94; }
      .vip { font-weight: bold; }
    </style>
  </head>
  <body>
    <main class="event-pass">
      <p>{{ event.type|upper }}</p>
      <h1>{{ event.name }}</h1>

      <h2>{{ attendee.name }}</h2>
      {% if attendee.vip %}<p class="vip">VIP access</p>{% endif %}

      <p><strong>Date:</strong> {{ event.date }}</p>
      <p><strong>Venue:</strong> {{ event.venue }}</p>

      <ul>
        {% for session in event.sessions %}
          <li>{{ session.time }} &mdash; {{ session.title }}</li>
        {% endfor %}
      </ul>

      <p>Pass {{ attendee.pass_id }} &middot; {{ attendee.ticket_type }}</p>
    </main>
  </body>
</html>

Template Data

The template data provides the values inserted into the HTML. This example uses JSON to describe one attendee and event. Save it as attendee-data.json.

        
        
        
      
{
  "attendee": {
    "name": "Jordan Lee",
    "pass_id": "NS-2048",
    "ticket_type": "All Access",
    "vip": true
  },
  "event": {
    "type": "Design conference",
    "name": "Northstar Design Summit",
    "date": "October 18",
    "venue": "Harbor Hall, Seattle",
    "sessions": [
      { "time": "09:00", "title": "Opening keynote" },
      { "time": "11:30", "title": "Design systems workshop" },
      { "time": "15:00", "title": "Product critique" }
    ]
  }
}

Generate the Image

Keep both files in the same directory, choose your preferred language, and run its example. The result is saved as event-pass.png.

curl --user "demo:demo" \
  --form "file=@event-pass.html" \
  --form "data_file=@attendee-data.json" \
  --form "output_format=png" \
  --form "screenshot_width=576" \
  --form "screenshot_height=384" \
  --output "event-pass.png" \
  https://api.pdfcrowd.com/convert/24.04/

# install: "pip install pdfcrowd"
import pdfcrowd

api = pdfcrowd.HtmlToImageClient("demo", "demo")
api.setDataFile("attendee-data.json")
api.setScreenshotWidth(576)
api.setScreenshotHeight(384)

api.convertFileToFile("event-pass.html", "event-pass.png")

// install: "composer require pdfcrowd/pdfcrowd"
require "pdfcrowd.php";

$api = new \Pdfcrowd\HtmlToImageClient("demo", "demo");
$api->setDataFile("attendee-data.json");
$api->setScreenshotWidth(576);
$api->setScreenshotHeight(384);

$api->convertFileToFile("event-pass.html", "event-pass.png");

// install: "npm install pdfcrowd"
var pdfcrowd = require("pdfcrowd");
var api = new pdfcrowd.HtmlToImageClient("demo", "demo");

api.setDataFile("attendee-data.json");
api.setScreenshotWidth(576);
api.setScreenshotHeight(384);

api.convertFileToFile("event-pass.html", "event-pass.png",
    function(err, fileName) { /* done */ });

// Maven: https://search.maven.org/artifact/com.pdfcrowd/pdfcrowd/
import com.pdfcrowd.*;

Pdfcrowd.HtmlToImageClient api =
    new Pdfcrowd.HtmlToImageClient("demo", "demo");

api.setDataFile("attendee-data.json");
api.setScreenshotWidth(576);
api.setScreenshotHeight(384);

api.convertFileToFile("event-pass.html", "event-pass.png");

// nuget install -OutputDirectory packages Pdfcrowd.Official
pdfcrowd.HtmlToImageClient api =
    new pdfcrowd.HtmlToImageClient("demo", "demo");

api.setDataFile("attendee-data.json");
api.setScreenshotWidth(576);
api.setScreenshotHeight(384);

api.convertFileToFile("event-pass.html", "event-pass.png");

# install: "gem install pdfcrowd"
require "pdfcrowd"

api = Pdfcrowd::HtmlToImageClient.new("demo", "demo")
api.setDataFile("attendee-data.json")
api.setScreenshotWidth(576)
api.setScreenshotHeight(384)

api.convertFileToFile("event-pass.html", "event-pass.png")

// install: "go get github.com/pdfcrowd/pdfcrowd-go"
import "github.com/pdfcrowd/pdfcrowd-go"

api := pdfcrowd.NewHtmlToImageClient("demo", "demo")
api.SetDataFile("attendee-data.json")
api.SetScreenshotWidth(576)
api.SetScreenshotHeight(384)

api.ConvertFileToFile("event-pass.html", "event-pass.png")

# install: "pip install pdfcrowd"
html2image -user-name "demo" -api-key "demo" \
  -data-file "attendee-data.json" \
  -screenshot-width 576 \
  -screenshot-height 384 \
  "event-pass.html" > "event-pass.png"

View HTTP API documentation →

Result

The template and data produce this personalized event pass. Download the generated image to view the full-size result.

Download event-pass.png

Template Syntax

Template syntax controls how data is inserted, repeated, formatted, or shown conditionally. PDFCrowd templates use Jinja for these operations; the sections below summarize common constructs and supported filters.

Constructs

Insert a value: {{ attendee.name }}
Loop over items: {% for session in event.sessions %} ... {% endfor %}
Show content conditionally: {% if attendee.vip %} ... {% endif %}
Apply a filter: {{ event.type|upper }}
Format a number:
- Thousands separator: {{ "{:,}".format(number) }}
- Two decimal places: {{ "{:.2f}".format(number) }}

Supported Filters

Template filters transform values before they are inserted into the output, for example to change capitalization, provide a default value, sort a list, or format text. The following filters are supported: