PDF-Sign Docs

Templates

Templates are the foundation of PDF generation in PDF-Sign. They define the structure and layout of your PDF documents using HTML.

What is a Template?

A template is an HTML document that includes:

  • Static content: Text, images, and styling that remain the same
  • Dynamic variables: Placeholders that get replaced with your data at generation time
  • CSS styling: Custom styles for branding and formatting

Creating a Template

  1. Navigate to Templates in your dashboard
  2. Click "New Template"
  3. Use the rich text editor to design your document
  4. Add variables using the Variables panel
  5. Preview your template in real-time
  6. Save your template

Template Structure

A basic template might look like this:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
    }
    .header {
      text-align: center;
      margin-bottom: 40px;
    }
    .details {
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>INVOICE</h1>
    <p>Invoice #{{invoiceNumber}}</p>
  </div>

  <div class="details">
    <p><strong>Bill To:</strong> {{clientName}}</p>
    <p><strong>Date:</strong> {{date}}</p>
    <p><strong>Amount Due:</strong> ${{amount}}</p>
  </div>

  <div class="footer">
    <p>Thank you for your business!</p>
  </div>
</body>
</html>

Template Features

Rich Text Editor

The built-in editor supports:

  • Headers and paragraphs
  • Bold, italic, and underline text
  • Lists (ordered and unordered)
  • Tables
  • Images
  • Code blocks
  • Custom HTML

Real-time Preview

See how your PDF will look as you edit:

  • Preview updates automatically
  • View with sample variable values
  • Check formatting and layout

Custom Styling

Add CSS to customize your templates:

  • Custom fonts
  • Colors and backgrounds
  • Margins and padding
  • Page breaks
  • Print-specific styles

CSS Support

Templates support full CSS including flexbox and grid layouts. Use @media print for print-specific styles.

Variable Syntax

Variables use double curly braces:

{{variableName}}

Variables must be:

  1. Defined in the Variables panel before use
  2. Given a name, type, and optional default value
  3. Provided when generating the PDF

Learn more about Variables.

Template Best Practices

1. Keep It Simple

  • Use semantic HTML
  • Avoid complex JavaScript
  • Keep CSS organized

2. Design for Print

  • Use absolute units (pt, mm, cm) for margins
  • Include page breaks where needed
  • Test with different content lengths

3. Use Variables Effectively

  • Name variables descriptively
  • Set sensible default values
  • Group related variables together

4. Optimize Images

  • Use web-optimized images
  • Include image dimensions
  • Consider using base64 for small images

Template Examples

Invoice Template

<div class="invoice">
  <h1>Invoice #{{invoiceNumber}}</h1>
  <p>Date: {{date}}</p>
  <p>Client: {{clientName}}</p>
  <p>Amount: ${{amount}}</p>
</div>

Certificate Template

<div class="certificate">
  <h1>Certificate of Completion</h1>
  <p>This certifies that</p>
  <h2>{{recipientName}}</h2>
  <p>has successfully completed</p>
  <h3>{{courseName}}</h3>
  <p>on {{completionDate}}</p>
</div>

Receipt Template

<div class="receipt">
  <h2>Receipt</h2>
  <p>Transaction ID: {{transactionId}}</p>
  <p>Date: {{date}}</p>
  <p>Amount: ${{amount}}</p>
  <p>Payment Method: {{paymentMethod}}</p>
</div>