Skip to main content

Templates

The Templates section in your Dashboard provides a comprehensive interface for creating, managing, and maintaining reusable PDF templates. This feature enables you to build HTML layouts with Handlebars templating that can be populated with dynamic data through API calls.

Getting Started – Your First Template​

When you first access the Templates section through the left sidebar in your Dashboard, you'll see the getting started interface:

Empty Templates State

What you'll see:

  • Template Usage Counter: Shows current usage against your plan limits (e.g., Template Usage: 0 / 10).
  • Create Template Button: Your starting point for PDF template creation.
  • Documentation Link: Quick access to template documentation.

Step 1: Creating Your First Template​

Click the "Create Template" button to begin your template creation journey:

Create New Template Dialog

Fill in Template Details:

1

Template Name (required): Give your template a descriptive name.

2

Description (optional): Add details about the template's purpose or use case.

3

Template Engine: Currently set to "Handlebars" (additional engines coming soon).

4

Choose Your Creation Method:

Option 1: Generate with AI:

  • Let AI build your template from a simple description.
  • Attach reference files (PDFs, images, code) to provide additional context.
  • Get complete HTML/CSS layout with Handlebars syntax, sample data, and PDF settings.
  • Great for turning concepts into functional templates quickly.
tip

Learn more about AI-powered template creation in the AI Template Generation guide.

Option 2: Choose from Gallery:

  • Perfect for getting started quickly.
  • Professional designs ready to customize.
  • Covers common business needs: invoices, certificates, resumes, shipping labels, and more.
Browse Templates

Explore available templates in our PDF Templates Gallery.

Option 3: Create from Scratch:

  • Full control over design.
  • Define your own data structure and Handlebars variables.
  • Best for unique requirements.

If you select "Choose from Gallery", you'll see the template gallery:

Template Gallery

Select Your Template:

  1. Browse available templates by category.
  2. Click "Create Template" on your chosen design.
  3. You'll be taken directly to the Template Designer.

Step 3: Welcome to the Template Designer​

After selecting a template (or creating from scratch), you'll enter the powerful template designer:

Template Designer Interface

Designer Layout Overview:

1

Left Panel: Code editor with your HTML/CSS and Handlebars syntax.

2

Right Panel: Live preview of your template with the ability to generate real PDFs to see how they look.

Top Toolbar:

3

Actions: History | Save Draft | Publish | Exit

4

Tabs: Template code, sample data, and PDF options.

Step 4: Exploring the Designer Tabs​

TEMPLATE Tab – Your Code Editor​

This is where you'll write your HTML/CSS code with Handlebars variables:

Template Designer - Code Editor

Key Features:

  • Syntax highlighting for HTML, CSS, and Handlebars.
  • Error Detection: Real-time syntax validation and error highlighting.
  • Code editor options:
    • Prettier ☰: Auto-format code with Prettier.
    • Word Wrap ↩️: Toggle line wrapping for improved readability.
    • Refresh 🔄: Manual preview refresh.
    • AI Assist 🪄: AI-powered template editing – describe changes, attach reference files, and let AI update your template. Review proposed changes in a diff view before accepting or rejecting them.
    • Theme 🔆 | 🌙: Dark/Light mode toggle.
Template Designer - Code Editor Toolbar

  • Find & Replace (Ctrl+F): Search through your code with find and replace options.
Template Designer - Code Editor - Find & Replace

DATA Tab​

Switch to the DATA tab to provide sample JSON data:

Template Designer - Data Tab

This data will populate your Handlebars variables in the quick preview and during real PDF generation, showing you exactly how your template will render with real data.

OPTIONS Tab​

Configure PDF Options​

Template Designer - Options Tab - PDF Options

PDF Generation Options:

  • Format: Choose from A4, Letter, Legal, and more.
  • Orientation: Portrait or Landscape.
  • Display Header & Footer: Add page headers/footers.
  • Print Background: Include background colors and images.
  • Wait Until: Choose when page is considered fully loaded (domcontentloaded, load, networkidle, commit).
  • Wait For Function: JavaScript function to wait until content loads completely (you can write your own custom function).

Set Designer Options​

Template Designer - Options Tab - Designer Options

Designer Options:

  • Quick HTML Preview Updates: Toggle real-time preview refresh without full page reloads (can be disabled for manual refresh).
  • Auto-save Draft: Automatically save your template every 30 seconds when changes are detected.
  • Editor Font Size: Customize code editor font size for better readability.

Step 5: Preview Your Template​

Quick HTML Preview (Default)​

The default preview mode provides instant visual feedback during template development without full PDF generation:

  • Real-time updates as you edit (when enabled).
  • Zoom controls: +/- buttons, fit to width, fit to page.
  • Page breaks: Toggle to see print layout divisions.
Template Designer - Quick HTML Preview

Real PDF Preview – The Real Test​

  1. Click the "REAL PDF PREVIEW" tab.
  2. Click "Generate PDF" button.
  3. Wait for processing (usually a few seconds).
Template Designer - Real PDF Preview

Why use Real PDF Preview:

  • See exactly what the API will generate.
  • Test complex layouts and styling.
  • Verify page breaks and formatting.
  • Ensure all fonts and images load correctly.
  • Preview print-specific styles like @media print CSS rules if added.
  • Check header/footer rendering if configured in PDF Options.

Step 6: Save Your Work​

Your template automatically saves every 30 seconds (if not disabled in Designer Options). You can also manually save by clicking "Save Draft" anytime. It creates a draft version you can continue editing.

Template Designer - Save Draft and Auto-save Feature

Step 7: Publish Your Template​

When you're satisfied with your template, it's time to make it available via API:

  1. Click the "Publish" button.
  2. Add a version comment (optional).
  3. Click "Publish" to confirm.
Template Designer - Publish Version Dialog

What happens when you publish:

  • Creates version v1 of your template (subsequent versions will be v2, v3, etc.).
  • Template becomes available via API immediately.
  • You can use a unique template ID for API calls.
  • You can continue editing (creates new draft for next version).
Published Template Required

Template must be published before you can use it for PDF generation. Draft versions cannot be accessed through API calls.

Step 8: Get Your API Integration Code​

Click "Get API Code" to access ready-to-use integration examples:

Template Designer - API Code Integration Examples

Code snippets available in multiple languages:

  • Node.js (Axios and Fetch variants)
  • Python
  • cURL
  • Java
  • C#
  • PHP
  • Go
  • Rust

Copy a code example and test it in your application.

Success! You've now created your first template and can generate PDFs.

Managing Your Templates​

Once you have templates, your dashboard will look like this:

Templates Dashboard

Template List Overview​

Each template shows:

No.ColumnDescription
1️⃣NameTemplate name with unique ID
2️⃣Draft StatusCurrent draft status and last modification
3️⃣Active VersionPublished version available via API
4️⃣ActionsManagement options menu

Template Status Indicators​

  • Draft Active (Orange): Has unpublished changes.
  • Version Badge (Green): Published version (v1, v2, etc.).
  • "Not published yet": Created but never published.
  • "No active draft": Published with no pending changes.

Template Actions Menu​

Template Actions Menu - Management Options

Click the three dots (⋮) next to any template for these options:

  • Modify in Designer: Open template in code editor.
  • Edit Template Details: Change name or description.
Template Actions - Edit Template Details

  • Duplicate Template: Create a copy for variations.
Template Actions - Duplicate Template

  • Get API Code: Access ready-to-use integration examples (same as clicking "Get API Code" button in designer).

  • Discard Draft: Remove unpublished changes and revert to published version (if active draft exists).

Template Actions - Discard Draft Dialog

  • Delete Template: Permanently remove template.
Template Actions - Delete Template Confirmation

Working with Template Versions​

Version History

Access Version History:

  1. Click "History" button in the template designer.
  2. See who published each version and when.
  3. Read version comments explaining changes (if added).

Compare Versions (Show Diff):

Click "Show Diff" on any version to compare it with your current editor state.

Code Tab - Compare template code side-by-side:

Code comparison view showing template differences side by side

You can compare:

  • Template - HTML/CSS/Handlebars template differences.
  • Data - Sample JSON data differences.
  • Parameters - PDF generation options differences (format, header, footer, orientation, etc.).

Changes are highlighted for easy identification.

PDF Preview Tab - Compare rendered PDF output:

PDF preview comparison showing historical and current PDF side by side

  • Left side: PDF generated from historical version.
  • Right side: PDF generated from current editor state.

Useful for visual verification of changes.

Restore Previous Versions:

  1. Click "Restore" next to any version.
Restore previous version dialog
  1. Creates a new draft from that version.
  2. Make any additional changes needed.
  3. Publish as a new version.