Quick Start Guide

Welcome to the Quick Start Guide! In this tutorial, you will learn how to design a professional, dynamic Invoice template from scratch using ComposeIt's drag-and-drop builder, set up data sources, bind variables, and generate a PDF programmatically.

Follow these 32 steps to build and render your template whilst learning the core concepts of the platform:

You can also find the template created here in the gallery.

Step 1: Create a Template

Open your dashboard and create a new template to start with a fresh layout.

Step 2: Document Settings

Go to the Document Settings panel and set the left and right margins to 0 for full-width layouts, then top and bottom to 2cm.

Step 3: Theme Settings

Open the Theme Manager. Set the Body font-size to 0.8rem and the font-family to Arial for crisp invoice typography.

Step 4: Configure Data Sources

Set up the structure of the data your template will receive. Create three collections:

1. Invoice (Main Table)

2. Company Collection

3. Product Collection

Step 5: Open Blocks Panel

Access the Block Manager containing pre-built structural elements like Rows, Columns, Tables, and Images.

Step 6: The initial layout

There is a Header Column at the top of the page with height 2cm(matching settings) and Footer Column at the bottom. Under the Style Manager:

1. Add classes bg-primary-color and primary-color to each.

Delete the default text element then drag a 2 Columns layout block into the canvas. Under the Style Manager:

1. Add classes bg-primary-color and primary-color to the row.
2. Add a left and right padding of 2cm (all rows in this layout will use this spacing).

Step 7: Add Invoice Title

Add a Text component into the first column. From the inline Rich Text Editor (RTE) toolbar, set the text to "INVOICE" and change the font size to 30.

Step 8: Add Variables to Header

Add the dynamic invoice variables. Type / in the text area to open the path selector, and select invoice.number, invoice.date and invoice.due date.

Step 9: Add Logo Placeholder

Add an Image component into the second column.

Step 10: Align the Image

Select the image and align it to the center within its column container.

Step 11: Add Company Branding

In the header, add text for the company name (set font size to 24) and a tagline (set font size to 18).

Step 12: Align Branding Text

Set the text alignment of your tagline and branding info to center or right as desired.

Step 13: Upload Logo Asset

Double-click the image placeholder to open the Asset Manager and upload your company logo.

Step 14: Resize Logo

Scale down the logo dimensions using the slider to fit elegantly inside the header column.

Step 15: Apply Image Filters

If the logo is colored and needs to match a monochrome header, go to the Image Styles section and set filters: brightness to 0% and invert to 100% to turn it solid white. Ensure brightness is applied first, you can reorder the filters using drag and drop.

Step 16: Add To/From Section

Add a new 2 Columns layout block into the canvas. Under the Style Manager:

1. Add a left and right padding of 2cm.

Add text in each column for the "BILL TO" and "BILL FROM" sections with their corresponding company address variables.

We've set the text size for "BILL TO" and "BILL FROM" to 14

Step 17: Add Table Container

Add a single-column layout block underneath the billing sections, remember to add a left and right padding of 2cm, then add a Table block inside it.

Step 18: Style the Table

Select the table and configure the classes and styles You can easily select the table from the layers panel:

1. Add class bg-primary-color and primary-color.
2. Toggle off the horizontal and vertical borders for the header and body.
3. For the body, set color to #000000, background to #ffffff, and zebra background to #f0f0f0.

Step 19: Remove Table Borders

Turn off any outer table borders for a modern, clean grid look.

Step 20: Add Columns to Table

To add columns (e.g. description, quantity, price, total):

1. Click a cell in the table header or body.
2. Click the more menu (...) on the toolbar.
3. Select Columns > Insert after.

Step 21: Bind Table Data Source

Attach the products data collection to your table:

1. Select the Table then open the collections modal via the toolbar button or the edit logic button in the style manager.

2. Bind the source to invoice.products, you can also add sorting and filtering.

Step 22: Add Table Variables

Click inside the table cells and use / to map fields from the products context.

Step 23: Add Totals Layout

Add a 2-column layout below the table add spacing as shown previously.

1. Resize the right column width to 40%.
2. Add classes bg-primary-color and primary-color to the right column.

3. Clone the layout to get a balanced 20%/20% spacing for labels and variables.

Step 24: Bind Totals Variables

Add text labels for Subtotal, Tax, and Grand Total, and insert the corresponding variables (invoice.sub_total, invoice.tax, invoice.grand_total) in the column next to them.

Step 24: Remove Spacing

Remove the bottom padding of the table row and the top padding of the row below it to close any unwanted gaps.

Step 26: Add Footer Rows

Add another 2-column layout. In the first column, add the invoice notes variable.

Optionally in the second column add some text with Sign Below, then below it add a 1 Column layout, add a Signature block from docuseal section to the column and resize to fit the column. The Signature element will be invisible so add a dashed border on the column.

Step 27: The layout so far

By now you canvas should look like this.

Step 28: Preview with Sample Data

After adding some mock data for companies, products and invoice we can use a mock record to preview how the PDF renders with populated dynamic data fields.

Ensure all changes in the editor are saved then click generate to get a sample PDF.

Step 29: Format Values & Markdown

Apply custom formatting to variables by clicking the data icon in the toolbar to open the setting modal:

• Use the number formatting number variables unit price, total, sub total, tax and grand total.

• Toggle the Markdown to HTML renderer option for the notes variable so formatting is converted correctly.

Step 30: Final Visual Preview

Confirm the invoice styling, zebra striped row colors, and totals alignments look correct in the final draft.

Step 31: Publish the Template

Once satisfied, click Publish button on the top right. This will remove the watermark and generate live PDFs which count towards your quota.

Step 32: Generate PDF via API Script

Create an API key with the documents.write permission from the dashboard and run a simple script targeting the POST /api/export endpoint with your dynamic data payload to generate the PDF instantly, without the watermark.

curl -X POST https://app.composeit.app/api/export \
  -H "Content-Type: application/json" \
  -H "x-api-key: YOUR_API_KEY" \
  -d '{
    "templateId": "your-template-id",
    "formats": ["pdf"],
    "data": {
      "tax": 576,
      "notes": "**Thank you for your business!**",
      "number": "INV002",
      "bill to": {
        "name": "Company Name",
        "address": "24 Lorem Street, Lorem City, Area, 509394"
      },
      "products": [
        {
          "name": "Design",
          "total": 240,
          "quantity": 2,
          "unit price": 120,
          "description": "Super nice web apps"
        },
        {
          "name": "Development",
          "total": 1500,
          "quantity": 10,
          "unit price": 150,
          "description": "Very awesome delivery"
        },
        {
          "name": "Testing",
          "total": 180,
          "quantity": 3,
          "unit price": 60,
          "description": "It works"
        }
      ],
      "bill from": {
        "name": "My Company",
        "address": "33 My Home, Lorem City, Area, 984733"
      },
      "sub total": 1920,
      "grand total": 2496
    }
  }'

You should receive an output like this:

{
  pdf: {
    url: "...";
    filename: "";
    sizeBytes: 2099394;
    storageKey: "...";
    mimeType: "...";
    checksum: documentChecksum
  }
}

PDFs are only stored for 24hrs so make sure to save them in your own storage if need them later!