Adding Elements — Editor — Elements

Element Types

The toolbar at the top of the editor lets you add six types of elements. Each serves a different purpose in your document design.

Text

Use Text for static content that stays the same on every generated document — headings, labels, legal disclaimers, company taglines, etc.

Double-click to edit the content directly on the canvas
Full formatting: font family, size, weight, color, alignment
Supports line height, letter spacing, and text decoration

When to use: Anything that doesn't change between documents.

Field

Fields are the magic of Document Stack. They look like text on the canvas, but they get replaced with dynamic data when you generate a PDF.

Add a Field element to the canvas
In the inspector, set a Field Key (e.g., customer_name)
When you call the API, pass {"customer_name": "Acme Corp"}
The field becomes "Acme Corp" in the generated PDF

When to use: Customer names, dates, amounts, addresses — anything dynamic.

Naming Convention

Use snake_case for field keys (e.g., invoice_number,due_date). It makes your API payloads clean and predictable.

Image

Add logos, product photos, signatures, or any visual content. Images can be:

Static — Upload an image or paste a URL that stays the same
Dynamic — Set a field key and pass a URL or base64 string at generation time

When to use: Company logos, signatures, product images, QR codes.

Table

Tables display rows of data with configurable columns. They're bound to an array in your data payload, so they grow dynamically based on how many rows you pass.

See the Tables page for a full guide on configuring table columns, styling headers, and passing data.

When to use: Line items, attendee lists, product catalogs, schedules.

Icon

Choose from a built-in library of vector icons. Icons scale cleanly at any size and can be colored to match your design.

When to use: Status indicators, checkmarks, decorative accents, contact icons.

Line

Simple horizontal or vertical dividers. Configure thickness, color, and dash pattern in the inspector.

When to use: Section separators, underlines, visual structure.

Positioning Tips

Elements snap to each other and to the grid when you drag them
Use the inspector to set exact X, Y, width, and height values for pixel-perfect placement
Elements are layered — use the Layers panel to control which element appears in front