Resources

• Last updated on March 3, 2025
• •
• 2 minutes to read

Resources are the additional data you provide to assist the user to personalize the design. For the Template Editor, you need to define asset source folders, profiles for color management, and measure units. These resources are organized into the following sections.

{
    "resources": {
        "imageManager": { },
        "fonts": { },
        "fontSelector": { },
        "colorManagement": { },
        "surfaceSizesList": [ ],
        "unitList": [ ]
    }
}

imageManager

The imageManager object lets you specify paths to Asset Storage subfolders in the sourceFolders array. To update the source folder for images, use:

{
    "resources": {
        "imageManager": {
            "sourceFolders": ["/Filters"]
        }
    }
}

fonts

In the sourceFolders property, you can specify Asset Storage folders that contain the required fonts.

{
    "resources": {
        "fonts": {
            "sourceFolders": ["/Handwriting"]
        }
    }
}

fontSelector

In the defaultFont property, you can provide the PostScript name of the font that will be used by default when creating text in the editor. To change the default font, use:

{
    "resources": {
        "fontSelector": {
            "defaultFont": "Roboto-Regular"
        }
    }
}

colorManagement

Using the cmykProfile and rgbProfile properties, you can specify color profiles for converting colors. To ensure precise color conversion, pass the appropriate color profile description.

Configure the color profiles as follows:

{
    "resources": {
        "colorManagement": {
            "rgbProfile": "Apple RGB",
            "cmykProfile": "Japan Color 2002 Newspaper"
        }
    }
}

surfaceSizesList

The surfaceSizesList array allows you to provide size presets, which will be available in the page Settings panel. Each array element defines the display name, width, and height of the page size. The width and height are measured in points.

{
    "resources": {
        "surfaceSizesList": [
            {
                "name": "Card",
                "size": {
                    "width": 800,
                    "height": 600
                }
            }
        ]
    }
}

unitList

In the unitList array, you can provide the possible measurement units to the editor. The structure defining the measurement units looks like this:

{
    "name": string,      // Full name, for example, centimeter, typographic point, etc.
    "shortName": string, // Short alias, for example: pt, in, cm, etc.
    "ratio": number,     // Relation to the typographic point. For example, 1 inch equals 72 points, and 1 mm is 2.835 points.
    "accuracy": number,  // Precision level, typically the number of decimal places displayed.
    "step": number       // Increment/decrement step. For example, for 1/8 inch, the step is 0.125.
}

If provided, the user will be able to select these measurement units in the editor's settings window.

To add a new unit of measurement equivalent to one and a half inches, use:

{
    "resources": {
        "unitList": [
            {
                "name": "cust",
                "shortName": "cust",
                "ratio": 1.5,
                "accuracy": 1,
                "step": 0.3
            }
        ]
    }
}