Templates

Use Templates in the Dashboard to create, manage, and publish reusable PDF layouts. Templates are HTML/CSS documents with Handlebars variables that you populate with templateData in API requests.

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:

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 Create Template:

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: Handlebars is currently supported.
4. Creation Method: Choose how to start the template.

Option 1: Generate with AI:

• Generate a template from a prompt.
• Attach reference files (PDFs, images, code) to provide additional context.
• The AI generates an HTML/CSS template with Handlebars variables, sample data, and PDF settings.

AI Template Generation

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

Option 2: Choose from Gallery:

• Start from an existing template design.
• Customize the layout, sample data, and PDF options.
• 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.
• Use this option when an existing gallery template does not fit your document.

Step 2: Template Gallery

If you select "Choose from Gallery", you'll see the 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 one from scratch, you'll enter the Template Designer:

Designer Layout Overview:

1. Left Panel: Code editor with your HTML/CSS and Handlebars syntax.
2. Right Panel: Live preview of your template, with Real PDF Preview available for final output checks.

Top Toolbar:

1. Actions: History, Save Draft, Publish, and Exit.
2. Tabs: Template code, sample data, and PDF options.

Step 4: Exploring the Designer Tabs

Template Tab

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

Key Features:

• Syntax highlighting for HTML, CSS, and Handlebars.
• Error detection: Real-time syntax validation and error highlighting.
• Code editor options:
  • Prettier: Format code with Prettier.
  • Word Wrap: Toggle line wrapping.
  • Refresh: Refresh the preview manually.
  • AI Assist: Describe changes, attach reference files, and review proposed edits in a diff view before accepting or rejecting them.
  • Theme: Switch between dark and light mode.

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

Data Tab

Switch to the Data tab to provide sample JSON data:

This data populates your Handlebars variables in Quick HTML Preview and Real PDF Preview, so you can check how the template renders with representative data.

Options Tab

Configure PDF options for this template:

PDF Generation Options:

• Format: Choose a page format such as A4, Letter, or Legal. See the format parameter for the full list.
• 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

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.

Real PDF Preview

1. Click the Real PDF Preview tab.
2. Click Generate PDF.
3. Wait for processing (usually a few seconds).

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.

Usage

Successful Real PDF Preview generations count as document conversions.

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.

Step 7: Publish Your Template

When the template is ready, publish it to make it available for API requests:

1. Click the "Publish" button.
2. Add a version comment (optional).
3. Click "Publish" to confirm.

What happens when you publish:

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

Published Template Required

Publish the template before using it in API conversion requests. Drafts can be previewed in the Designer, but API calls use the published version.

Step 8: Get Your API Integration Code

Click Get API Code to view integration examples for the current template:

Code snippets available in multiple languages:

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

These examples call /v1/direct with the template ID and sample templateData. When you use a template through the API, PDFBolt uses the currently published version.

Copy a code example and test it in your application.

Managing Your Templates

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

Template List Overview

Each template shows:

No.	Column	Description
1	Name	Template name with unique ID
2	Draft Status	Current draft status and last modification
3	Active Version	Published version available via API
4	Actions	Management 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

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.

• Duplicate Template: Create a copy for variations.

• Get API Code: View /v1/direct integration examples for the published template version.

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

• Delete Template: Permanently remove template.

Working with Template Versions

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:

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:

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

Use this to verify visual changes before restoring or publishing.

Restore Previous Versions:

1. Click "Restore" next to any version.

2. Creates a new draft from that version.
3. Make any additional changes needed.
4. Publish as a new version.

Helpful Links

📄️ AI Template Generation

Create and edit templates with AI using prompts

📄️ PDF Templates Gallery

Browse template designs for common documents

📄️ Templates Overview

Learn about template concepts, benefits, and use cases

📄️ Template Parameters

templateId, templateData, and PDF options reference

📄️ Quick Start

Integration examples and code snippets

📄️ API Endpoints

All available endpoints

🔗 Handlebars Docs

Official templating syntax guide

📄️ Support

Get help from our team