Block Manager

Guide to available document building blocks including logic, content, flexbox layout structures, and form elements.

The Block Manager (accessed via the + or Build tab on the left sidebar) serves as the main component library for your document. Elements can be dragged directly onto the canvas.

Panel Overview & Search

Blocks vs. Symbols Tabs: Switch between standard document elements (Blocks) and custom reusable UI components (Symbols).
Search Field: Instantly filter components by typing keywords (e.g., "table", "condition", "chart").

Block Categories

1. Logic

Logic blocks inject dynamic runtime behavior and control flow into your document rendering:

Variable ({}): Output dynamic field values passed in your data payload (e.g., customer names, invoice totals).
Condition: Render specific sub-trees conditionally using if/else logic branches based on dynamic criteria.
Collection: Loop over arrays or lists of data (e.g., line items in an invoice) to automatically generate repeating visual elements.

2. Content

Static and dynamic display elements for layout composition:

Text: Standard text containers with rich-text formatting support.
Link: Hyperlinks with configurable URL targets and display text.
Image: Static or dynamic image elements supporting standard media formats and hosted URLs.
Page Break: Forces subsequent canvas content to begin on a new printed page.
Horizontal Rule: Inserts a thematic divider line.
Spacer: Defines dedicated vertical blank space between sections.
Table: Multi-row, multi-column grid containers for structured tabulations.
Page: Displays dynamic page numbering tokens (e.g., Page X of Y).
QR Code: Generates standard dynamic QR code vectors from input text or URL variables.
Barcode: Renders scanable linear barcode formats (e.g., CODE128, EAN) from variable strings.
Chart: Visualizes numerical payload arrays using configurable bar, line, or pie graphs.

3. Layout (Flexbox Containers)

Layout components act as structural flexbox wrappers to group, align, and organize nested content blocks:

1 Column: Full-width single-flex container.
2 Columns: Dual flexbox columns with adjustable column widths and gap spacing.
3 Columns: Triple flexbox columns designed for multi-column magazine or dashboard-style reports.

4. Forms

Interactive HTML and PDF form controls for fillable document templates:

Input: Single-line text input field.
Textarea: Multi-line text entry box for extended comments or descriptions.
Select: Dropdown selection menu with configurable options.
Checkbox: Standard binary toggle checkbox input.
Radio: Radio button option selector.

5. E-Sign (Docuseal)

Dedicated e-signature fields integrated with Docuseal for legally binding document workflows, signer data collection, and dynamic execution:

DS Input: E-signature text field assigned to specific document signers.
Signature: Dynamic drawn, typed, or uploaded electronic signature capture field.
Initials: Compact signer initial box for page-by-page sign-offs.
Date: Auto-populating or manual date picker field for signers.
DS Checkbox: Checkbox control assigned to e-signing parties.
DS Radio: Radio button selection group for signers.
DS Select: Dropdown selector field for e-signing workflows.
Multiple: Multiple-choice check group for signers.
Payment: Integrated payment capture control (e.g., credit card or Stripe collect via Docuseal).
Number: Validated numerical input field for currency, quantities, or IDs.
Phone: Phone number input field with international formatting validation.
File: Attachment upload field allowing signers to submit supplemental documents (e.g., IDs, proofs).
DS Image: Image upload field for signer-provided graphics or photos.
Stamp: Dynamic official seal or legal stamp placement field.