Resources

• Last updated on April 24, 2026
• •
• 3 minutes to read

Resources are the additional data you provide to assist the user to personalize the design. Unlike the input data, the user does not modify the resources. Unlike the settings, they do not affect the behavior of the editor.

A good example of resources are the folders used as image libraries for the Images and Clipart buttons.

Resources are organized into sections. They are described below.

{
    "resources": {
        "assetLibrary": {},
        "finishingContainers": []
   }
}

assetLibrary

In Handy Editor resources, the assetLibrary section allows for specifying the source folder for Images, Clipart, and Shapes graphic libraries.

• clipartsFolder defines the root folder for the Clipart library. This folder should contain vector content (preferable, single-color SVG shapes), like icons, decorations, etc.
• imagesFolder defines the root folder for the Images library. It may contain content of any image format supported by Customer's Canvas, such as JPEG, PNG, PDF, TIFF, SVG, etc.
• shapesFolder defines the root folder for the Shapes library. It may contain content of vector formats supported by Customer's Canvas, such as PDF, AI, or SVG. These shapes will be added to the general shape list.

Note

The editor will load the content of all subfolders as well.

A path to the folder should be specified relative to the root of the Images section in your Customer's Canvas asset manager. Folders are separated by a slash character (/). Adding a slash to the beginning of a path is allowed, but not necessary.

{
    "assetLibrary": {
        "clipartsFolder": "/Image Library/Clipart",
        "imagesFolder": "Image Library/Images",
        "shapesFolder": "Shapes"
    }
}

finishingContainers

The finishingContainers section allows you to apply different finishing variations (textures) to a container. You can use it to either modify the settings of an existing container or create a new one.

In the UI, it appears as an Apply finish drop-down list of available finishes (if there is more than one) and applies the selected finish on click.

Note

This feature only works with Colorless сontainers and supports both color and texture visualization.

A finishing container is defined by the following properties:

{
    "finishingContainers": [
        {
            "name": "Texture",
            "visualization": {
                "name": "Gold Foil Finish",
                "preselected": true,
                "texture": "66c32a3cca10b5a3e7e67e46",
                "opacity": 0.8,
                "enableGlareEffect": true
            },
            "format": "onebit",
            "dither": "diffusion",
            "amount": 75,
            "opaque": false,
            "outputColor": "#B8860B"
        }
    ]
}

• name defines the name of the container to bind the finishing to.
• visualization contains the display name, texture reference, and preselect state for the UI.
  • name is the display name shown in the UI.
  • preselected indicates whether this finish is applied by default.
  • texture specifies the texture to use. This can be either an image ID from the asset storage or a URL to an image.
  • color defines the color for the visualization.
  • opacity sets the opacity level for the visualization.
  • enableGlareEffect enables or disables the glare effect for the visualization.
• format defines the output format for the finishing container. Possible values are: "onebit", "grayscale", and "vector".
• dither specifies the dithering method applied to the finish. Possible values are: "none", "diffusion", "pattern", and "noise".
• amount defines the amount or intensity of the finishing effect.
• opaque indicates whether the finishing container is opaque.
• outputColor defines the output color for the finishing container.

Note

When creating a container that does not yet exist in the design, make sure to specify all the necessary settings.