---
title: "VDP previews | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/printer-guide/pipelines/examples/render-vdp-preview/"
---

# VDP previews

> Learn how to render VDP previews, apply mockups, and produce print-ready files.

This topic demonstrates how to use **Variable Data Printing (VDP) Rendering** to generate personalized football team jerseys. The pipeline retrieves data from a design, renders previews, applies a mockup, and generates final print-ready files —all while dynamically inserting player names and numbers.

## Prerequisites

- A **design template** with placeholders for player names and numbers.
- A **mockup** (e.g., a jersey template) to visualize the final product.
- **VDP data** in the required format (see [Data Format](#data-format)).

## Pipeline Workflow

The pipeline consists of the following tasks:

1. **Extract the design** from the project.
2. **Render preview images** (JPEG/PNG) for validation.
3. **Merge preview pages** into a single file.
4. **Apply a mockup** to visualize the final product.
5. **Render high-resolution print files** (PDF).
6. **Finalize** and output all artifacts.

### Visual Workflow

![Artifact flow.](./images/render-vdp-preview-flow.png)

## Pipeline Definition

```json
{
    "tasks": [
        {
            "description": "Extract design from project",
            "name": "extract",
            "type": "extract-project-design",
            "parameters": {},
            "outputArtifacts": ["design"]
        },
        {
            "description": "Render preview archive (ZIP with JPEG files)",
            "name": "render-vdp-preview",
            "type": "render-vdp-preview",
            "inputArtifacts": ["design"],
            "parameters": {
                "previewOutputWidth": 1000,
                "previewOutputHeight": 1000,
                "previewOutputFileFormat": "jpeg",
                "previewOutputShowStubContent": true,
                "previewOutputShowMockup": true,
                "previewOutputArchiveType": "Zip",
                "previewOutputArchiveCompressionType": "LZMA"
            },
            "outputArtifacts": ["previewArchive"]
        },
        {
            "description": "Render individual preview files (PNG)",
            "name": "render-vdp-preview",
            "type": "render-vdp-preview",
            "inputArtifacts": ["design"],
            "parameters": {
                "previewOutputWidth": 1000,
                "previewOutputHeight": 1000,
                "previewOutputFileFormat": "Png",
                "previewOutputShowStubContent": false,
                "previewOutputShowMockup": false,
                "previewOutputArchiveType": "None"
            },
            "outputArtifacts": ["previewFilePage*"]
        },
        {
            "description": "Merge preview pages into a single PDF",
            "name": "merge-separate-pages",
            "type": "merge-separate-pages",
            "inputArtifacts": ["previewFilePage*"],
            "outputArtifacts": ["previewFile"]
        },
        {
            "description": "Apply mockup to preview pages",
            "name": "render-image-preview-with-mockup",
            "type": "render-image-preview-with-mockup",
            "inputArtifacts": ["previewFilePage*"],
            "parameters": {
                "mockupId": "68f866b1b7511aaff8a97eea",
                "previewWidth": 1000,
                "previewHeight": 1000,
                "previewFormat": "Png",
                "fitMode": "Shrink"
            },
            "outputArtifacts": ["previewFilePageWithMockup*"]
        },
        {
            "description": "Merge mockup preview pages into a single PDF",
            "name": "merge-separate-pages",
            "type": "merge-separate-pages",
            "inputArtifacts": ["previewFilePageWithMockup*"],
            "outputArtifacts": ["previewFileWithMockup"]
        },
        {
            "description": "Render high-resolution print file (PDF)",
            "name": "render-vdp-hires",
            "type": "render-vdp-hires",
            "inputArtifacts": ["design"],
            "parameters": {
                "hiResOutputDpi": 300,
                "hiResOutputFileFormat": "pdf",
                "hiResOutputColorSpace": "cmyk",
                "hiResOutputPdfTextMode": "Text"
            },
            "outputArtifacts": ["textFile"]
        },
        {
            "description": "Finalize pipeline",
            "name": "finalize",
            "type": "finalize",
            "finalArtifacts": [
                "previewArchive",
                "previewFile",
                "previewFileWithMockup",
                "textFile"
            ]
        }
    ]
}
```

## Key Features

### Data Format

The VDP data must be embedded in the design. For example, you can populate placeholders in a design as follows:

```json
{
  "vdpDataSet": {
    "surfacesData": [
      {
        "surfaceBinding": {
          "surfaceIndexes": [0],
          "isSingleBinding": true
        },
        "data": [
          { "placeholders": { "name": "A. Smith", "number": "3" } },
          { "placeholders": { "name": "M. Johnson", "number": "7" } },
          { "placeholders": { "name": "D. Williams", "number": "12" } }
        ],
        "iterateOverSurfacesFirst": false
      }
    ]
  },
  "vdpItemsData": null
}
```

To change the entire layer content and style, you can provide `data` in the following format:

```json
{
  "vdpDataSet": { 
    "surfacesData": [ 
      { 
        "surfaceBinding": { 
          "surfaceIndexes": [ 0 ],
          "isSingleBinding": true
        },
        "data": [
            {
              "name": { "text": "Ibragimovich" },
              "number": { "text": "9" }
            },
            {
              "name": { "text": "Beckham" },
              "number": { "text": "23" }
            }
        ],
        "iterateOverSurfacesFirst": false 
      } 
    ] 
  }, 
  "vdpItemsData": null 
}
```

For more details about providing `data`, see the [Save VDP data](https://customerscanvas.com/docs/hub/dev-center/api/storefront/working-with-projects.md) topic.

### Output Artifacts

This pipeline generates four outputs:
- **Multi-page print file (PDF)** – High-resolution file for printing.
- **Multi-page preview PDF** – For validation.
- **ZIP archive with JPEG files** – One file per data sample.
- **Mockup preview PDF** – Visualization of the final product.

### Mockup Integration

The mockup is applied using its unique identifier (`mockupId`). Ensure the mockup is uploaded to asset storage and its ID is pasted before running the pipeline.

## Downloadable Assets

For reference, you can download [zipped examples](pathname:///files/jersey.zip) with a design template, a mockup, and rendered previews.

| Asset Type | Description | Example |
|------------|-------------|---------|
| **Design Template** | The design with placeholders for player names and numbers. VDP data is already embedded. | ![Design Template Placeholder](./images/j-design.png) |
| **Mockup** | A visual template (e.g., jersey) for previewing the final product. | ![Mockup Placeholder](./images/j-mockup.png) |
| **Preview Output** | Generated VDP previews for validation. | ![Preview Placeholder](./images/j-preview.png) |

## Related Topics

- For designers: find tutorials about designing mockups in the [Mockups](https://customerscanvas.com/docs/hub/designers-manual/mockups/pim-mockups.md) documentation.
- For integrators: find details about providing designs with VDP data in the [Save VDP data](https://customerscanvas.com/docs/hub/dev-center/api/storefront/working-with-projects.md) topic.