---
title: "render-design-preview-with-mockup | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/printer-guide/pipelines/tasks/render-design-preview-with-mockup/"
---

# render-design-preview-with-mockup

> Learn how the render-design-preview-with-mockup task renders design previews on mockups.

This task prepares a preview for the specified artifact (design) using a mockup.

:::note
The rendering is performed based on the settings specified in this task. The rendering settings configured in the editor will be ignored.
:::

## Parameters

- `mockupId` (string): The ID of the mockup in Asset Storage.
- `mockupFolder` (string): The path to the mockup folder in Asset Storage (e.g., `/Cards/Stack`).
- `mockupName` (string): The name of the mockup file in Asset Storage within the specified folder (e.g., `Card.psd`).
- `previewWidth` (number): The width of the preview image in pixels.
- `previewHeight` (number): The height of the preview image in pixels.
- `previewFormat` (string): The output file format for the preview image, either `Jpeg` or `Png`.
- `mockupTargetArtworkLayers` (string[]): An array of smart-object names within the mockup where the artifact will be inserted. You may find this useful if mockup masks are treated as smart object layers.
- `visualizePrintAreas` (boolean): If `true`, indicates that design print area bounds should be visualized. The default value is `true`.

These parameters support [argument interpolation](https://customerscanvas.com/docs/hub/printer-guide/pipelines/concepts/interpolation.md) following the common rules.

:::note
If only `mockupFolder` is specified (i.e., `mockupId` and `mockupName` are not set):
- **Each single input artifact** will be inserted into **all** mockups in the specified folder.
- **Only one element** from **each collection** of input artifacts will be inserted into **all** mockups in the specified folder.
:::

## Examples

### Using a specific mockup by ID

```json
{
    "description": "Prepare preview of design file with mockup",
    "name": "render-design-previews",
    "type": "render-design-preview-with-mockup",
    "inputArtifacts": [
        "design"
    ],
    "parameters": {
        "mockupId": "6565dac9c2807e72a406fb7a",
        "previewWidth": 500,
        "previewHeight": 500,
        "previewFormat": "Jpeg"
    },
    "outputArtifacts": [
        "preview"
    ]
}
```

### Using a mockup folder with target layers

This is how to generate a preview when a custom field `MockupFolderPath` specifies a folder with mockups, and all of them contain a `Design` smart object.

```json
{
    "description": "Prepare design preview with mockup folder",
    "name": "render-design-previews",
    "type": "render-design-preview-with-mockup",
    "inputArtifacts": [
        "design"
    ],
    "parameters": {
        "mockupFolder": "{{project.items.@.fields.MockupFolderPath}}",
        "mockupTargetArtworkLayers": [
            "Design"
        ],
        "previewWidth": 2048,
        "previewHeight": 2048,
        "previewFormat": "Png"
    },
    "outputArtifacts": [
        "preview*"
    ]
}
```