Skip to main content

Introducing PDF Templates: The Smart Way to Document Generation

· 7 min read
Michał Szymanowski
Michał Szymanowski
PDFBolt Co-Founder

Introducing PDFBolt Templates Feature

We're excited to announce PDFBolt Templates – a new feature that separates design from data in PDF generation. Instead of rebuilding HTML for every document, create reusable layouts once and populate them with dynamic data. Whether you're generating invoices, certificates, or reports, Templates make your workflow more efficient, consistent, and maintainable.

See Templates in Action​

The Challenge with Traditional PDF Generation​

If you've been generating PDFs programmatically, you're probably familiar with this workflow: craft HTML content, embed your data directly into the markup, send everything to the API, and hope the formatting stays consistent across different documents.

While this approach works, it comes with some inherent challenges:

  • Code Duplication: Similar HTML structures are recreated across all documents.
  • Maintenance Overhead: Design changes require updates in multiple code locations.
  • Separation of Concerns: Business logic becomes mixed with presentation markup.
  • Complex Data Handling: Managing loops, conditionals, and nested data in string templates.
  • Inconsistency risks – Slight variations in data structure can break your layouts

What Are Templates?​

Templates solve these challenges by separating your PDF design from your data. Instead of sending complete HTML to our API, you create reusable layouts once and then populate them with different data for each PDF generation.

How to Use Templates​

1. Design Your Dynamic Template​

Templates use Handlebars, a templating engine that brings your static HTML to life with dynamic data. Simply write {{customerName}}, use {{#each items}} for loops, and {{#if condition}} for conditional content. Handlebars automatically merges your JSON data with the template, so you can focus on document design rather than data manipulation.

PDFBolt Templates code editor showing Handlebars template syntax with real-time preview

Need Another Template Engine?

Looking for a different templating engine? Contact us at contact@pdfbolt.com and we'll consider adding engines based on your needs.

2. Visual Designer That Actually Works​

Creating templates isn't just about writing code. PDFBolt's visual designer provides:

  • Split View: Code on the left, preview on the right.
  • Quick HTML Preview: See changes instantly as you type.
  • Real PDF Preview: Generate actual PDFs to see the final result.
Template Designer Preview

Template Designer - Data Tab

  • Syntax Highlighting: For HTML, CSS, and Handlebars.
  • Error Detection: Catch syntax issues before publishing.

Choose your starting point:

📚 Gallery TemplatesStart with professionally designed templates for invoices, certificates, shipping labels, resumes, and more.
Template Gallery

🎨 Custom CreationBuild from scratch with complete design control for unique requirements.
✨ AI GenerationDescribe your document needs and let AI create a custom template instantly.

Coming Soon

4. Version Control and Team Collaboration​

Templates include built-in version management:

  • Drafts: Work on changes without affecting live templates.
  • Auto-Save Draft: Automatically saves your work to prevent data loss.
  • Version Control: Publish versions when ready (v1, v2, v3, etc.).
  • Rollback Capability: Restore previous versions if needed.
  • Team Access: Team members can collaborate on template designs.
  • Change History: Document what changed, who made updates, and when.
Templates Dashboard

Real-World Example​

1. Create Your Template​

Order Confirmation Template Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Order Confirmation</title>
  <style>
    * {
      margin:0;
      padding:0;
    }

    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }

    .order-confirmation {
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    h1 {
      color: #2c5530;
      margin-bottom: 10px;
      font-size: 24px;
    }

    .shipping-address {
      background: #f8f9fa;
      padding: 10px 15px;
      border-radius: 8px;
      margin: 20px 0;
      border: 1px solid #eee;
    }

    .item {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }

    .item:last-child {
      border-bottom: none;
    }

    .total {
      font-size: 18px;
      font-weight: bold;
      color: #2c5530;
      text-align: right;
      padding-top: 10px;
      border-top: 2px solid #2c5530;
    }

    p {
      margin: 10px 0;
    }

  </style>
</head>
<body>
  <div class="order-confirmation">
    <h1>Order #{{orderNumber}} Confirmed</h1>
    <p>Thank you, {{customer.firstName}}!</p>
    {{#if hasTracking}}
    <p><strong>Tracking Number:</strong> {{trackingNumber}}</p>
    {{/if}}

    <div class="shipping-address">
      <h4>Shipping Address</h4>
      <p>{{shippingAddress.street}}</p>
      <p>{{shippingAddress.city}}, {{shippingAddress.state}} {{shippingAddress.zip}}</p>
    </div>

    <div class="items">
      <h4>Order Items</h4>
      {{#each items}}
      <div class="item">
        <span>{{name}}</span>
        <span>${{price}}</span>
      </div>
      {{/each}}
    </div>

    <div class="total">Total: ${{orderTotal}}</div>

  </div>
</body>
</html>

2. Test with Real Data​

  • Add sample JSON data in the DATA tab.
  • Use Quick HTML Preview to see results.
  • Generate actual PDFs to verify output.
Sample JSON Data
{
  "orderNumber": "2025-0156",
  "customer": {
    "firstName": "Sarah"
  },
  "shippingAddress": {
    "street": "123 Main Street, Apt 4B",
    "city": "San Francisco",
    "state": "CA",
    "zip": "94105"
  },
  "items": [
    {
      "name": "Wireless Bluetooth Headphones",
      "price": "99.99"
    },
    {
      "name": "Phone Case - Clear",
      "price": "24.99"
    },
    {
      "name": "USB-C Cable 6ft",
      "price": "19.99"
    }
  ],
  "orderTotal": "144.97",
  "hasTracking": true,
  "trackingNumber": "1Z999AA1234567890"
}

3. Publish and Integrate​

  • Click Publish to make template available via API.
  • Get integration code for your preferred language.
  • In your API request, use only templateId and templateData.
Template Designer - API Code Integration Examples

API Integration: Node.js Example
const axios = require('axios');
const fs = require('fs');

async function generatePdf() {
    const templateData = {
        orderNumber: "2025-0156",
        customer: {
            firstName: "Sarah"
        },
        shippingAddress: {
            street: "123 Main Street, Apt 4B",
            city: "San Francisco",
            state: "CA",
            zip: "94105"
        },
        items: [
            {
                name: "Wireless Bluetooth Headphones",
                price: "99.99"
            },
            {
                name: "Phone Case - Clear",
                price: "24.99"
            },
            {
                name: "USB-C Cable 6ft",
                price: "19.99"
            }
        ],
        orderTotal: "144.97",
        hasTracking: true,
        trackingNumber: "1Z999AA1234567890"
    };

    try {
        const response = await axios.post('https://api.pdfbolt.com/v1/direct', {
            templateId: "2f73cb39-5569-4941-8a47-9896ab27644c",
            templateData: templateData
        }, {
            headers: {
                "API-KEY": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
                "Content-Type": "application/json"
            },
            responseType: 'arraybuffer'
        });

        if (response.status !== 200) {
            throw new Error(`HTTP ${response.status}`);
        }

        fs.writeFileSync('order_confirmation.pdf', response.data);
        console.log('PDF generated successfully: order_confirmation.pdf');

    } catch (error) {
        console.error('Error generating PDF:', error.message);
        throw error;
    }
}

generatePdf().catch(console.error);

4. Result: Professional PDF Generated​

After running the integration code, you'll get a perfectly formatted PDF with all your data:

Generated PDF showing order confirmation with all dynamic data populated

That's it! 🎉 You can now generate professional PDFs with any data you send. The same template can create thousands of documents with different details.

Technical Details​

Templates simplify PDF generation through PDFBolt's developer-friendly API:

  • API endpoints – Use /direct, /sync, or /async endpoints → See all API options.
  • All PDF options supported – Page size, orientation, margins, headers/footers, and all other PDF Conversion Parameters work with templates.
  • Multiple programming languages – Ready-to-use code examples for Node.js, Python, PHP, Java, C#, Go, and Rust.
  • High performance – Templates are stored server-side and ready to use, so no massive HTML sending or URL fetching required on each generation.

Ready to Try Templates?​

Templates are available now in your PDFBolt account. If you're not currently using PDFBolt, you can start with our free plan to explore the feature.

The best way to understand the value is to see it in action – log into your account or sign up for free and create your first template. We think you'll love how much easier PDF generation becomes.

Questions or need help getting started?

Our documentation covers everything from basic setup to advanced template features, and our support team is always ready to help at contact@pdfbolt.com.

Additional Resources

Explore these comprehensive resources for detailed implementation:

→ Templates Documentation – Complete guide to template concepts, benefits, and use cases.

→ Complete Template Workflow – Step-by-step walkthrough from template design to successful PDF generation via API.

→ Complete Invoice Template Example – Ready-to-use invoice template with API integration code.

→ All Template Features – Discover all capabilities from basic creation to advanced features.

→ API Integration Code – Ready-to-use code snippets for Node.js, Python, PHP, Java, C#, Go, Rust, and cURL.