Template Editor

PDF-Sign uses Editor.js, a modern block-based editor, to create and edit your PDF templates. This guide covers all the available tools and features.

Why Editor.js?

Editor.js was chosen for several compelling reasons:

• Block-based architecture: Each content element (paragraph, heading, image, etc.) is an independent block, making it easy to rearrange and manage content
• Clean JSON output: Instead of messy HTML, Editor.js outputs structured JSON data that's easy to validate, process, and convert to clean HTML for PDF generation
• Extensibility: Custom blocks like Charts and QR Codes can be added seamlessly
• Modern UX: Intuitive interface with drag-and-drop, keyboard shortcuts, and inline formatting
• No contenteditable mess: Unlike traditional WYSIWYG editors, Editor.js avoids the common pitfalls of contenteditable by isolating each block

Block Tools

Text & Paragraph

The default block type. Click anywhere and start typing to create a paragraph.

Features:

• Inline formatting (bold, italic, underline, strikethrough)
• Text alignment (left, center, right, justify)
• Variable insertion with {{variable_name}} syntax

Heading

Create hierarchical headings for your document structure.

Levels: H1, H2, H3, H4

Shortcut: Cmd+Shift+H (Mac) / Ctrl+Shift+H (Windows)

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

List

Create ordered (numbered) or unordered (bullet) lists.

Types:

• Unordered list (bullet points)
• Ordered list (numbered)

Tip: Press Tab to indent list items, Shift+Tab to outdent.

Checklist

Create interactive checklists with checkboxes.

Perfect for:

• Task lists
• Requirements checklists
• Approval forms

Table

Insert data tables with customizable rows and columns.

Default: 2 rows x 3 columns

Features:

• Add/remove rows and columns
• Inline formatting within cells
• Variable support in cells

Quote

Add blockquotes with optional attribution.

"The best PDF templates are simple and effective."
— PDF-Sign Team

Alert

Highlight important information with colored alert boxes.

Types:

• Info (blue)
• Success (green)
• Warning (yellow)
• Danger (red)

Use alerts for:

• Important notices
• Warnings and disclaimers
• Success messages
• Error information

Delimiter

Insert a horizontal line to visually separate sections.

Image

Upload or embed images in your templates.

Supported formats: JPEG, PNG, GIF, WebP, SVG

Max size: 10 MB

Options:

• Upload from your computer
• Paste image URL
• Replace existing image

Images are automatically stored in Supabase Storage and served via CDN.

Advanced Blocks

Columns (Layout)

Create multi-column layouts for complex document structures.

Options: 2 columns or 3 columns

Use cases:

• Side-by-side comparisons
• Contact information layouts
• Invoice line items with descriptions

Each column supports:

• Rich text formatting
• Variable insertion
• Links

Chart

Generate dynamic charts from data passed via API variables.

Chart types:

• Bar chart
• Line chart
• Pie chart
• Doughnut chart
• Radar chart
• Polar area chart

Configuration:

• Variable name (data source)
• Chart type
• Width (200-1200px)
• Height (150-800px)

Usage:

1. Add a Chart block in your template
2. Set a variable name (e.g., sales_chart)
3. Choose chart type and dimensions
4. When generating PDF via API, pass the chart data:

{
  "variables": {
    "sales_chart": {
      "labels": ["Jan", "Feb", "Mar", "Apr"],
      "datasets": [{
        "label": "Sales 2024",
        "data": [12000, 19000, 15000, 25000],
        "backgroundColor": ["#3b82f6", "#10b981", "#f59e0b", "#ef4444"]
      }]
    }
  }
}

QR Code

Generate QR codes with fixed values or dynamic variables.

Sizes:

• Small (100px)
• Medium (150px)
• Large (200px)

Data source options:

1. Fixed Value: Enter a static URL or text

   • Example: https://pdf-sign.com/verify/

2. Variable: Use a template variable for dynamic content

   • Example: {{ticket_url}}
   • The QR code content is set when generating the PDF

Use cases:

• Event tickets with unique verification URLs
• Product labels with inventory links
• Invoices with payment links
• Business cards with vCard data

Inline Tools

Apply formatting to selected text within any block:

Keyboard Shortcuts

Navigation & Blocks

Text Formatting

Drag and Drop

Rearrange blocks by dragging them:

1. Hover over any block
2. Click and hold the drag handle on the left
3. Drag to the new position
4. Release to drop

Block Tunes (Settings)

Click the settings icon (gear or dots) on any block to access block-specific settings:

• Text Alignment: Left, Center, Right, Justify
• Convert to: Change block type (where applicable)
• Move up/down: Reorder blocks
• Delete: Remove block

Working with Variables

Insert template variables anywhere in your content using the {{variable_name}} syntax.

Insertion methods:

1. Type directly: Just type {{customer_name}} in any text block
2. Variable panel: Click a variable in the side panel to insert at cursor position

Variable types:

• text: Plain text values
• number: Numeric values (can be formatted)
• date: Date values (can be formatted)
• boolean: True/false values
• array: Lists of items (for tables/loops)
• object: Complex data (for charts)

Example template:

Dear {{customer_name}},

Thank you for your order #{{order_number}} placed on {{order_date}}.

Total: {{currency}}{{total_amount}}

Template Options

Below the editor, you'll find collapsible sections for configuring PDF generation options.

PDF Options

Configure how your PDF document is generated.

Page Numbering

Add automatic page numbers to your documents.

Settings:

• Enable/Disable: Toggle page numbering on or off
• Position: Choose where page numbers appear
  • Left
  • Center
  • Right

Page numbers display as "Page X of Y" (e.g., "Page 1 of 3") at the bottom of each page.

Use cases:

• Multi-page contracts and agreements
• Reports and proposals
• Long-form documents requiring navigation

Custom CSS

Add custom CSS styles to fine-tune the appearance of your PDF.

The CSS editor provides:

• Monaco editor with syntax highlighting
• Default template with common styles you can insert
• Copy and Reset buttons

Default CSS Template

Click "Insert CSS template" to get started with pre-built styles for:

/* Color variables */
:root {
  --primary-color: #2563eb;
  --secondary-color: #64748b;
  --text-color: #1e293b;
  --border-color: #e2e8f0;
}

/* Document header */
.header {
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

/* Tables */
table th {
  background-color: var(--primary-color);
  color: white;
}

/* Amounts and totals */
.amount { font-weight: 600; text-align: right; }
.total-row { font-weight: 700; background-color: #f1f5f9; }

/* Footer */
.footer {
  margin-top: 3rem;
  border-top: 1px solid var(--border-color);
}

/* Print-specific styles */
@media print {
  .no-print { display: none !important; }
  .page-break { page-break-before: always; }
}

CSS Tips

1. Use CSS variables: Define colors once, use everywhere
2. Target specific classes: Use .header, .footer, .amount for semantic styling
3. Print styles: Use @media print for print-specific adjustments
4. Page breaks: Use .page-break class to force content onto a new page

Common CSS Patterns

Centered logo:

.logo {
  display: block;
  max-height: 60px;
  margin: 0 auto;
}

Signature box:

.signature-box {
  border: 1px dashed #ccc;
  min-height: 80px;
  margin-top: 2rem;
  padding: 1rem;
}

Two-column layout:

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

Highlight important text:

.highlight {
  background-color: #fef3c7;
  padding: 0.5rem 1rem;
  border-left: 4px solid #f59e0b;
}

Best Practices

For Clean PDFs

1. Use headings hierarchically: H1 for title, H2 for sections, H3 for subsections
2. Keep paragraphs concise: Long text blocks may wrap unexpectedly
3. Test with real data: Preview your template with actual variable values
4. Optimize images: Use appropriately sized images to reduce PDF file size

For Dynamic Content

1. Name variables clearly: Use descriptive names like customer_address instead of addr
2. Document your variables: Keep track of expected variable names and types
3. Handle missing data: Design templates that look good even if optional variables are empty
4. Test edge cases: Long names, special characters, empty values

For Charts & QR Codes

1. Set appropriate dimensions: Charts should be readable at PDF scale
2. Use consistent styling: Match chart colors with your brand
3. Validate QR data: Ensure URLs are complete and accessible
4. Consider print size: QR codes need to be large enough to scan when printed