Creating visual assets

Last updated on July 28, 2025
•
9 minutes to read

You may want to create product designs, generate images using external services such as Midjourney, or generate the packaging mockups. Customer's Canvas can simplify the development and design process, allowing users to quickly and easily create visual materials with the Asset Generator API.

Use Cases

Packaging Mockups

The Asset Generator API allows you to create packaging mockups. Users can provide dimensions and other packaging parameters, and the API will return the appropriate mockup. This can be useful for companies that often need to create new packaging designs for their products.

Future Implementations

Further implementations of the Asset Generator API will include additional functionalities such as image generation based on user descriptions and creating product designs with customizable parameters like colors, logos, and texts. These upcoming features will be particularly useful for projects requiring a large number of unique images or multiple design options.

Data models

For now, this API only supports creating 3D mockups, and users need to specify the parameters of MockupCreationModel:

Name: The mockup name.
Specification: One of the supported models, FEFCO or ECMA.
Material: The type of material the box should be made of, such as cardboard, plastic, metal, etc.
Box dimensions: The length, width, and height of the box in the metric measurement system.
Material: The type of material the box should be made of, such as cardboard, plastic, metal, etc.
Flute type: The type of corrugated flutes.
Print sides: The front, back, or both sides.

After a box has been created, users can personalize:

Color: The color of the box. It can be a specific color code (for example, a HEX code for web design) or just the name of the color.
Logo: If the company logo is to be placed on the box, users upload a graphical representation of it.
Text: Any text that should be displayed on the box, such as the product name, instructions for use, etc.

Parameter rules

When defining specification parameters, you can apply rules for filling in their values, such as minimum and maximum values. You can define one or all the rules of MockupSpecParamRulesDto:

Default: The default value specified as a string is optional. If a default value is specified, its data type (after conversion from string) must correspond to MockupSpecParamDto.Type.
Min: The minimum allowable value is mandatory for parameters with numeric data types (for example, if MockupSpecParamDto.Type="float").
Max: The maximum allowable value is mandatory for parameters with numeric data types (for example, if MockupSpecParamDto.Type="float").
LessOrEqual: This rule expresses the "less than or equal to" constraint. Some specifications have parameters whose values are constrained by the values of other parameters according to the "less than or equal to" rule. If such a dependency exists, it should be reflected in the LessOrEqual field. When referring to other parameters, use their aliases, Alias (not the name, Name). For example, the value lessOrEqual=['H/2', 'L'] indicates that this parameter must be less than or equal to half the height and also less than or equal to the length.
GreaterOrEqual: This rule expresses the "greater than or equal to" constraint. Some specifications have parameters whose values are constrained by the values of other parameters according to the "greater than or equal to" rule. If such a dependency exists, it should be reflected in the GreaterOrEqual field. When referring to other parameters, use their aliases, Alias (not the name, Name). For example, the value greaterOrEqual=['H/2', 'L'] indicates that this parameter must be greater than or equal to half the height and also greater than or equal to the length.
Equal: This rule expresses the "equal to" constraint. Some specifications have parameters whose values are fixed and tied to the values of other parameters. If such a dependency exists, it should be reflected in the Equal field. When referring to other parameters, use their aliases, Alias (not the name, Name). For example, the value equal="H/2" indicates that this parameter must be equal to half the height.

To refer to other parameters, use their aliases, Alias (not Name).

Validation results

The validation process stops upon detecting the first invalid parameter. The validation result of the mockup specification parameters is represented by the MockupSpecParamsValidationResult model:

IsValid: Indicates if the parameters of the mockup specification are valid. If all parameters pass the validation successfully, the IsValid flag is set to true. If any parameter fails the validation, the IsValid flag is set to false.
ErrorInfo: Contains error information. If the validation of parameters is successful, the error information is absent (value is null). Otherwise, ErrorInfo should contain the information necessary to correct the error (invalid parameter value).
FailedParameter: Specifies the failed specification parameter. If the validation of parameters is successful, the information about the invalid parameter is absent (value is null). Otherwise, FailedParameter should specify the parameter that caused the validation error.
FailedValue: Indicates the failed value of the specification parameter. If the validation of parameters is successful, the information about the invalid parameter value is absent (value is null). Otherwise, FailedValue should indicate the value that failed the validation.

Generating mockups

3D mockups are generated according to the MockupSpecDto specifications from a backend library. Since all specification parameters and their value ranges are hard-coded, this API only allows you to read the available specifications, apply the user input to their parameters MockupSpecParamDto, and generate the mockups.

The 3D mockup generation is implemented through the following steps.

1. Get a specification

To get the list of all available specifications, use the endpoint GET /api/asset-generator/v1/mockups/specifications. To find a specification by name, use GET /api/asset-generator/v1/mockups/specifications/{name}.

Let's look at how you can obtain a list of available mockup specifications.

curl -X GET \
  "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications" \
  -H "accept: application/json" \
  -H "Authorization: Bearer <TOKEN>"

GET https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications

var specifications = await mockupGeneratorApiClient.GetAllSpecificationsAsync();

var specifications = _mockupGeneratorApiClient.getAllSpecifications();

This endpoint returns an array of available specifications, where you can find their names, preview image names, and whether the specifications are licensed.

[
  {
    "name": "FEFCO 0201",
    "group": "Packaging",
    "imageNames": [
      "box",
      "schema"
    ],
    "licensed": true
  },
  ...
]

Preview images provide a visual representation of how the product will look and how dimensions will be applied in mockups, for example:

Specifications preview images.

These drawings are generated based on the specification by the endpoint GET /api/asset-generator/v1/mockups/specifications/{name}/images/{imageName}. Let's generate the schema.

curl -X GET \
  "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/images/schema" \
  -H "accept: application/octet-stream" \
  -H "Authorization: Bearer <TOKEN>"

GET https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/images/schema
Accept: application/octet-stream
Authorization: Bearer <TOKEN>

var specificationName = "FEFCO 0201";
var imageName = "schema";
var drawing = await mockupGeneratorApiClient.GetSpecificationImageAsync(specificationName, imageName);

const specificationName = "FEFCO 0201";
const imageName = "schema";
const drawing = await _mockupGeneratorApiClient.getSpecificationImage(specificationName, imageName);

This endpoint returns binary data, as indicated by the application/octet-stream content type.

By default, the drawing contains only one element. For a composite box, for example, a box with a lid, the drawing will include two elements: one for the box and another for the lid.

2. Get specification parameters

After you have obtained the list of specifications, you can get their parameters. Pass their name as a path parameter to the endpoint GET /api/asset-generator/v1/mockups/specifications/{name}/parameters. For example, to get the parameters of the FEFCO 0201 specification:

curl -X GET \
  "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/parameters" \
  -H "accept: application/json" \
  -H "Authorization: Bearer <TOKEN>"

GET https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/parameters

var specificationName = "FEFCO 0201";
var parameters = await mockupGeneratorApiClient.GetSpecificationParametersAsync(specificationName);

var specificationName = "FEFCO 0201";
var parameters = await _mockupGeneratorApiClient.getSpecificationParameters(specificationName);

This endpoint returns a list of supported parameters and the rules for filling them in. You can pass their values when generating a mockup or validating the parameters.

3. Validate input data

You may want to validate the input data before generating a mockup. To do so, use the endpoint POST /api/asset-generator/v1/mockups/specifications/{name}/parameters/validate.

Let's validate the mockup specification for a box of 2 x 1.5 x 1 inches. Convert these values to millimeters and use aliases instead of names. For these dimensions, the request body will look as follows:

{
  "L": "50",
  "W": "37",
  "H": "25"
}

The request example:

curl -X POST \
  "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/parameters/validate" \
  -H "accept: application/json" \
  -H "Authorization: Bearer <TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{"L":"50","W":"37","H":"25"}'

POST https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/parameters/validate
Accept: application/json
Authorization: Bearer <TOKEN>
Content-Type: application/json
{
  "L": "50",
  "W": "37",
  "H": "25"
}

var specificationName = "FEFCO 0201";
var body = """
{
    "L": "50",
    "W": "37",
    "H": "25",
}
""";
var response = await mockupGeneratorApiClient.ValidateSpecificationParametersAsync(specificationName, body);

const specificationName = "FEFCO 0201";
var body = {
    "L": "50",
    "W": "37",
    "H": "25",
};
var design = _mockupGeneratorApiClient.validateSpecificationParameters(specificationName, body);

For more details about validation results, refer to the data model description.

To avoid re-generating the same drawing, you can also check that a mockup with the specified name is already exists in Asset Storage. To do so, use the endpoint GET /api/storage/v1/mockups and filter mockups by name.

4. Generate and save the mockup

The generation of a 3D mockup is performed based on the specification parameters by the endpoint POST /api/asset-generator/v1/mockups/generate.

The following request body can be used to create a private mockup for the CrisFord user under the /Mockups/Cris subfolder.

{
    "specName": "FEFCO 0201",
    "specParameters": {
        "L": "50",
        "W": "37",
        "H": "25",
        "CT": "Corrugated",
        "FT": "B",
        "BPS": "Both"
    },
    "mockupFileName": "box2x1.5x1",
    "mockupFilePath": "/Cris",
    "privateStorageOwner": "CrisFord"
}

To generate a public mockup, pass an empty string as privateStorageOwner.

curl -X POST \
  "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/generate" \
  -H "accept: application/json" \
  -H "Authorization: Bearer <TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{
    "specName": "FEFCO 0201",
    "specParameters": {
        "L": "50",
        "W": "37",
        "H": "25",
        "CT": "Corrugated",
        "FT": "B",
        "BPS": "Both"
    },
    "mockupFileName": "box2x1.5x1",
    "mockupFilePath": "/Generated",
    "privateStorageOwner": ""
}'

POST https://api.customerscanvashub.com/api/asset-generator/v1/mockups/generate
Accept: application/json
Authorization: Bearer <TOKEN>
Content-Type: application/json

{
  "specName": "FEFCO 0201",
  "specParameters": {
    "L": "50",
    "W": "37",
    "H": "25",
    "CT": "Corrugated",
    "FT": "B",
    "BPS": "Both"
  },
  "mockupFileName": "box2x1.5x1",
  "mockupFilePath": "/Generated",
  "privateStorageOwner": ""
}

var body = """
{
    "specName": "FEFCO 0201",
    "specParameters": {
        "L": "50",
        "W": "37",
        "H": "25",
        "CT": "Corrugated",
        "FT": "B",
        "BPS": "Both"
    },
    "mockupFileName": "box2x1.5x1",
    "mockupFilePath": "/Generated",
    "privateStorageOwner": ""
}
""";

var response = await mockupGeneratorApiClient.GenerateAsync(body);

const body = {
    "specName": "FEFCO 0201",
    "specParameters": {
        "L": "50",
        "W": "37",
        "H": "25",
        "CT": "Corrugated",
        "FT": "B",
        "BPS": "Both"
    },
    "mockupFileName": "box2x1.5x1",
    "mockupFilePath": "/Generated",
    "privateStorageOwner": ""
};

const response = await _mockupGeneratorApiClient.generate(body);

The result of the generation is an M3D mockup file, which is saved in the Asset Storage. In the endpoint response, you can find the mockup ID, which can be used to download the M3D file from Assets Storage. In your tenant, you can find the generated file in the Mockups section.

Generated m3d mockup files.