Event Flyer Template HTML and JSON

This guide is based on the Event Flyer template in the Gallery.

It explains a practical flow: template HTML structure, matching JSON payload, and API render request.

Step 1 - Template HTML structure

HTML

<div class="flyer">
<div class="top-label">{{event_type}}</div>
<h1>{{event_title}}</h1>
<h2>{{event_subtitle}}</h2>
<div class="details">
<div class="detail">
<div class="detail-label">Date</div>
<div class="detail-value">{{event_date}}</div>
</div>
<div class="detail">
<div class="detail-label">Time</div>
<div class="detail-value">{{event_time}}</div>
</div>
<div class="detail">
<div class="detail-label">Venue</div>
<div class="detail-value">{{venue}}</div>
</div>
<div class="detail">
<div class="detail-label">Admission</div>
<div class="detail-value">{{admission}}</div>
</div>
</div>
<div class="speakers">
<h3>Featured Speakers</h3>
<div class="speaker-list">{{#each speakers}}<div class="speaker">
<div class="speaker-name">{{this.name}}</div>
<div class="speaker-role">{{this.role}}</div>
</div>{{/each}}</div>
</div>
<div style="text-align:center">
<div class="cta">{{cta_text}}</div>
</div>
</div>

Step 2 - Matching JSON payload

JSON

{
  "event_type": "Tech Conference",
  "event_title": "DevSummit 2026",
  "event_subtitle": "Where innovation meets execution",
  "event_date": "April 15-16, 2026",
  "event_time": "9:00 AM \u2013 6:00 PM",
  "venue": "Convention Center, San Francisco",
  "admission": "Free / VIP $199",
  "speakers": [
    {
      "name": "Sarah Chen",
      "role": "CTO, TechFlow"
    },
    {
      "name": "Marcus Reid",
      "role": "VP Eng, Cloudbase"
    },
    {
      "name": "Priya Patel",
      "role": "Head of AI, Nexus"
    }
  ],
  "cta_text": "REGISTER NOW \u2192"
}

Step 3 - Final rendered preview in page

Rendered output preview Template style preview

Preview uses the original Gallery template HTML and CSS with sample payload values.

Step 4 - Key mapping checklist

{{event_type}} -> event_type
{{event_title}} -> event_title
{{event_subtitle}} -> event_subtitle
{{event_date}} -> event_date
{{#each speakers}} -> speakers[]
{{this.name}} -> speakers[].name

Step 5 - Render request example

BASH

curl -X POST "https://api.hookpdf.com/v1/render" \
  -H "Authorization: Bearer <api_key>" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "<gallery-event-flyer-template_id>",
    "payload": {
      "event_type": "Tech Conference",
      "event_title": "DevSummit 2026",
      "event_subtitle": "Where innovation meets execution",
      "event_date": "April 15-16, 2026",
      "event_time": "9:00 AM \u2013 6:00 PM",
      "venue": "Convention Center, San Francisco",
      "admission": "Free / VIP $199"
    }
  }'

Use this template for free now

Start with this template in HookPDF and render your first PDF for free.

Use this template free

Event Flyer Template: HTML + JSON Payload