📚 Components

PDF Component Documentation

🎨 New! Styled Cover Pages - Professional, pre-designed cover pages with minimal configuration required.

📝 Enhanced! Lists now support professional styled markers (circle-number, etc.) with automatic spacing and individual item styling.

📊 New! Charts now powered by Chart.js! Create professional donut charts with center text and radar/spider charts for multi-dimensional analysis.

Core Concepts

Cover Pages

Text Components

Data Components

Layout Components

Visual Components

Special Components

Core Concepts

page-structure

Understanding PDF page structure, page breaks, and content organization.

Properties

Property	Type	Required	Default	Description
`pages`	`PDFPage[]`	Required	-	Array of page objects - each represents a physical PDF page
`pageBreak`	`Component`	Optional	-	Component that forces content to start on a new page within the same page object
`size`	`string`	Optional	`A4`	Page size: A4, A3, A5, letter, legal
`orientation`	`string`	Optional	`portrait`	Page orientation: portrait or landscape
`margins`	`Margins`	Optional	-	Page margins in pixels (top, right, bottom, left)

Examples

Multi-Page Document Structure

Proper way to structure a multi-page document

{
  "metadata": { "title": "My Report" },
  "pages": [
    {
      "size": "A4",
      "components": [
        { "type": "coverPage", "title": "Cover Page" }
      ]
    },
    {
      "size": "A4", 
      "components": [
        { "type": "heading", "level": 1, "content": "Chapter 1" },
        { "type": "paragraph", "content": "Content for page 2..." },
        
        { "type": "pageBreak" },
        
        { "type": "heading", "level": 1, "content": "Chapter 2" },
        { "type": "paragraph", "content": "This starts on page 3..." }
      ]
    }
  ]
}

Page Break vs New Page Object

When to use pageBreak component vs creating new page objects

// ✅ GOOD: Use pageBreak for related content
{
  "pages": [
    {
      "components": [
        { "type": "heading", "content": "Section 1" },
        { "type": "paragraph", "content": "Content..." },
        
        { "type": "pageBreak" },
        
        { "type": "heading", "content": "Section 2" },
        { "type": "paragraph", "content": "More content..." }
      ]
    }
  ]
}

// ❌ AVOID: Separate pages for minimal content
{
  "pages": [
    {
      "components": [
        { "type": "heading", "content": "Section 1" },
        { "type": "paragraph", "content": "Content..." }
      ]
    },
    {
      "components": [
        { "type": "heading", "content": "Section 2" }
        // This creates a nearly blank page!
      ]
    }
  ]
}

Page Margins and Sizing

Customizing page dimensions and spacing

{
  "pages": [
    {
      "size": "A4",
      "orientation": "landscape",
      "margins": { "top": 60, "right": 40, "bottom": 60, "left": 40 },
      "components": [
        { "type": "heading", "content": "Wide Layout Content" }
      ]
    }
  ]
}