The visual builder lets you create PDF templates by dragging and dropping blocks onto a canvas — no HTML or CSS required. In this tutorial, you will build a simple document template from scratch, add text and images, connect test data, and generate your first PDF.

Opening the builder

From your PDFMonkey dashboard, click New Template. Give your template a name, then select Builder as the template mode. Click Create to open the visual editor.

Getting to know the interface

The builder has three main areas:

The builder interface showing the three-panel layout

Left panel — switches between the Elements tree (showing your template structure) and the Blocks panel (where you pick new blocks to add).
Center canvas — a live preview of your template. What you see here is what your PDF will look like.
Right panel — switches between Styles (visual properties like colors, spacing, and fonts) and Settings (block-specific configuration and logic).

The toolbar at the top of the canvas gives you access to test data, custom CSS and JavaScript editors, external assets, and keyboard shortcuts.

Adding your first blocks

Every new template starts with a Page block already in place. The Page block represents a single page of your PDF — it controls paper size, orientation, and margins.

To add content, switch to the Blocks panel in the left sidebar. Blocks are organized into three categories: Layout, Content, and Extra.

The Blocks panel showing the three block categories

Start by adding a Container block inside the Page. A Container groups other blocks together and controls their layout (vertical stack, horizontal row, or grid). Drag it from the Blocks panel onto the canvas, or click it to add it inside the currently selected element.

Next, add a Heading block inside the Container. Select the Heading in the canvas, then look at the right panel under Settings to pick the heading level (h1 through h6). Click Edit Heading Content to type your heading text.

Add a Text block below the Heading. Text blocks support rich formatting — bold, italic, lists, and links.

You can reorder blocks by dragging them in the Elements tree on the left panel. This is often easier than dragging on the canvas itself.

Editing text content

Select a Text block and open the Settings tab in the right panel. Click Edit Text Content to open the rich text editor.

The editor gives you a formatting toolbar with options for bold, italic, underline, strikethrough, bullet lists, numbered lists, and links. Type your content, apply formatting as needed, then close the modal. Your changes appear immediately on the canvas.

Heading blocks work the same way — click Edit Heading Content in Settings to open the editor.

Adding an image

Add an Image block from the Content category in the Blocks panel. Select it, then open the Settings tab to configure the image source.

Image block settings showing the source URL input

You have three options for setting the image source:

Static URL — paste a direct link to an image hosted online.
Upload — click the upload button to select a file from your computer. The image is converted to a data URI and embedded directly in the template.
Dynamic binding — click the variable browser button to bind the source to a field in your test data (for example, company.logo). This lets each generated document use a different image.

For the best PDF rendering performance, use optimized images. Large, high-resolution files increase generation time.

Using test data

Most templates include dynamic content — data that changes for each generated document. The builder lets you define test data so you can preview how your template looks with real values.

Click the Edit Test Data button in the toolbar above the canvas. This opens a JSON editor where you define sample data.

The test data editor with a sample JSON payload

Enter a JSON object with the fields your template needs. For example:

{
  "name": "Jane Smith",
  "company": "Acme Corp",
  "items": [
    { "description": "Consulting", "amount": 1500 },
    { "description": "Development", "amount": 3000 }
  ]
}

Once you save the test data, the variable browser throughout the builder shows your available fields. You can bind text content, image sources, visibility conditions, and loops to these data paths. Changes to the test data update the canvas preview immediately.

The test data editor supports JSON comments (lines starting with //). Use them to document what each field represents — they are stripped during parsing and do not affect your template.

Saving your template

Press Ctrl+S (or Cmd+S on Mac) to save your template. The builder sends the save request to the dashboard, where your template is stored.

Remember to Publish your template from the dashboard before generating documents. Unpublished templates cannot be used for document generation.

Generating a document

Once your template is published, you can generate documents in three ways:

Using the Dashboard — create documents manually with a form.
Using the API — generate documents programmatically from your application.
Using an Integration — connect with Zapier, Make, n8n, and other no-code platforms.

In every case you send a JSON payload matching your test data structure, and PDFMonkey produces a PDF.

Next steps

Now that you have built your first template, explore the other builder features:

Available Blocks — learn about every block type and its configuration options.
Images — go deeper on static, uploaded, and dynamic images.
Conditions and Loops — make content conditional or repeat it for each item in a collection.
Test Data — advanced test data techniques and the variable browser.

Your First Template