---
title: "Resources | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/handy-editor/resources/"
---

# Resources

> 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](https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/handy-editor/settings.md), 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.

```json
{
    "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.

```json
{
    "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 containers and supports both color and texture visualization.
:::

A finishing container is defined by the following properties:

```json
{
    "finishingContainers": [
        {
            "name": "Texture",
            "visualization": {
                "name": "Gold Foil Finish",
                "preselected": true,
                "texture": "66c32a3cca10b5a3e7e67e46",
                "color": "#DAA520",
                "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.
:::