Skip to main content

Template Designer

Design PDF documents and Excel spreadsheets from templates using the visual Template Designer.

Overview​

Create professional PDFs and data-rich Excel files with the drag-and-drop interface. Perfect for invoices, reports, certificates, and data exports.

Template Types​

PDF Templates​

  • Use for: Invoices, reports, certificates, contracts
  • Components: Text, images, tables, charts, dividers
  • Output: Professional PDF documents

Excel Templates​

  • Use for: Data exports, spreadsheets, reports
  • Components: Tables, charts, formulas
  • Output: Excel .xlsx files with multiple sheets

AI Assistance​

Use AI tools like ChatGPT, Claude, or Gemini to generate PDF and Excel templates automatically.

Generate Templates with AI​

  1. Provide the AI with our Template Schema Reference
  2. Describe the document you want (e.g., "professional invoice with itemized table and tax calculation")
  3. Specify the output format: PDF, Excel, or both
  4. Copy the generated JSON into the Schema Editor
tip

For PDF/Excel templates, AI can generate complex features like:

  • Multi-page layouts with headers/footers
  • Tables with calculated columns
  • Charts linked to data variables
  • Conditional sections based on data

Edit Templates with AI​

Already have a template? Use AI to:

  • Add new pages or sheets
  • Create calculated columns in tables
  • Add charts and data visualizations
  • Implement conditional logic

Simply export your template JSON, share it with the AI, describe your changes, and import the updated JSON.

Learn more:

PDF Designer​

Available Components​

  • Text blocks
  • Images and logos (select from Asset Gallery)
  • Data tables
  • Charts (bar, line, pie, area)
  • Dividers and spacers
  • Headers and footers
  • Page numbers

Page Settings​

  • Size: A4, Letter, Legal, Custom
  • Orientation: Portrait or Landscape
  • Margins: Top, bottom, left, right
  • Header/Footer: Add to all pages

Excel Designer​

Sheet Management​

  • Create multiple sheets
  • Name sheets
  • Link between sheets

Components​

  • Tables: Structured data tables with calculated columns
  • Charts: Visual data representation

Calculated Columns​

Use JavaScript expressions for calculated values in tables:

row.quantity * row.unitPrice
row.rowNum + 1
row.price > 100 ? 'Premium' : 'Standard'

Charts​

Available Chart Types​

  1. Bar Chart: Compare values
  2. Line Chart: Show trends
  3. Pie Chart: Show proportions
  4. Area Chart: Cumulative trends

Chart Configuration​

  • Data source: Link to table or variable
  • Colors: Customize chart colors
  • Labels: Axis labels and title
  • Legend: Show/hide, position

Adding Images to PDFs​

  1. Drag Image component onto PDF canvas
  2. Click the image component
  3. In properties panel, click Select from Gallery
  4. Browse and select an image from your Asset Gallery
  5. Click Select to insert
  6. Adjust size and position as needed

Benefits:

  • Company logos appear consistently
  • Brand assets are centrally managed
  • Same asset used across all templates
  • Update once to update everywhere

Upload New Assets​

Before designing, upload assets to the gallery:

  1. Navigate to Asset Gallery
  2. Click Upload
  3. Select logos, signatures, or images needed for documents
  4. Organize in folders (e.g., "Logos", "Signatures")

Variables in Templates​

Use the variable system to inject dynamic data:

Invoice #{{invoice.number}}
Customer: {{customer.name}}
Total: {{invoice.total}}

Variables use double curly braces {{variableName}} syntax and automatically appear in the Variables tab.

Designer Interface​

The Template Designer has a three-panel interface:

  1. Left Panel: Component Library - Drag components from here
  2. Center Panel: Canvas - Design your PDF/Excel template
  3. Right Panel: Three tabs for editing
    • Properties Tab: Edit selected component settings
    • Layers Tab: View and manage component hierarchy
    • Variables Tab: See all variables used in the template

Layers Tab (Component Tree)​

The Layers tab shows a hierarchical tree view of all components in your template.

Features​

Hierarchical View​

  • All components organized in a tree structure
  • Nested components show parent-child relationships
  • Special handling for layout components (containers, tables, columns)

Selection Sync​

  • Click a component in the tree → highlights it on the canvas
  • Click a component on the canvas → highlights it in the tree
  • Auto-expand and auto-scroll to selected component

Drag & Drop in Tree​

  • Reorder: Drag components up or down
  • Move to container: Drag into different containers
  • From library: Drag components directly from library into tree

Right-Click Context Menu​

Quick actions available via right-click:

  • Duplicate (Ctrl+D) - Copy component
  • Delete (Del) - Remove component
  • Cut (Ctrl+X) - Cut to clipboard
  • Copy (Ctrl+C) - Copy to clipboard
  • Paste (Ctrl+V) - Paste from clipboard
  • Move Up (Ctrl+Shift+↑) - Move up in list
  • Move Down (Ctrl+Shift+↓) - Move down in list
  • Wrap in Container (Ctrl+G) - Wrap in container
  • Unwrap (Ctrl+Shift+G) - Remove parent container

Expand/Collapse​

  • Click arrow to expand/collapse individual components
  • Expand All / Collapse All buttons
  • Keyboard shortcuts: Ctrl+] to expand, Ctrl+[ to collapse

Use Cases​

Complex PDFs: Navigate multi-page documents with many components

Excel Sheets: Manage multiple sheets and their components

Reordering: Quickly reorganize without canvas drag-drop

Variables Tab​

The Variables tab automatically tracks all variables used in your template.

Automatic Detection​

Variables are automatically extracted from:

  • Component content
  • Table cells
  • Chart data sources
  • Conditional logic
  • Loop data

Variable Information​

Each variable displays:

  • Name: Variable identifier
  • Type: Auto-detected (String, Number, Boolean, Date, Array, Object)
  • Usage Count: Number of times used
  • Usage Locations: All places where variable appears

Type Detection​

Smart typing based on naming patterns:

  • Number: "count", "total", "amount", "price", "quantity"
  • Boolean: "is", "has", "enabled", "active"
  • Date: "date", "time", "timestamp"
  • Array: "items", "list", "products"
  • Object: "user", "customer", "address"

Complex Variables​

For arrays and objects, the tab shows:

  • Array: Item type and schema
  • Object: All properties with types

Grouping​

  • Variables organized by type
  • Collapsible groups with counts
  • Filter by type

Click any usage location to:

  1. Navigate to the component
  2. Highlight it in tree and canvas
  3. Open properties panel

Keyboard Shortcuts​

The Template Designer includes keyboard shortcuts for efficient editing:

Editing​

  • Ctrl/Cmd + C - Copy component
  • Ctrl/Cmd + X - Cut component
  • Ctrl/Cmd + V - Paste component
  • Ctrl/Cmd + D - Duplicate component
  • Delete or Backspace - Delete component
  • Ctrl/Cmd + Z - Undo
  • Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y - Redo

Movement​

  • Ctrl/Cmd + Shift + ↑ - Move component up
  • Ctrl/Cmd + Shift + ↓ - Move component down

Grouping​

  • Ctrl/Cmd + G - Wrap in container
  • Ctrl/Cmd + Shift + G - Unwrap container

View​

  • Ctrl/Cmd + [ - Collapse all tree nodes
  • Ctrl/Cmd + ] - Expand all tree nodes

General​

  • Ctrl/Cmd + S - Save template
  • Shift + ? - Show shortcuts help

Best Practices​

PDF Design​

  • Use consistent fonts and colors
  • Include company branding
  • Add page numbers for multi-page documents
  • Test print output

Excel Design​

  • Use clear column headers
  • Format numbers appropriately
  • Add charts for data visualization
  • Test formulas with sample data

Generating Documents​

Via API​

const response = await fetch('https://api.rynko.dev/api/v1/documents/generate', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer fm_your_api_key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    templateId: 'invoice-template',
    format: 'pdf', // or 'excel'
    variables: { /* your data */ }
  })
});

const result = await response.json();
console.log('Download URL:', result.downloadUrl);

From Dashboard​

  1. Go to Document Logs
  2. Click Generate button
  3. Select template
  4. Provide variables
  5. Download result

Related: Templates | Variables | Components