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

# Handy Editor

> Handy Editor is a Workflow Element that opens a WYSIWYG editor for freehand design editing. Use it on the editor screen when customers build a design from scratch or customize a template without rigid constraints.

The element comes in two variations. The regular `au-handy-editor` renders the design on a canvas. The 3D-enabled `au-handy-editor-3d` also renders an associated 3D mockup and updates its texture in real time. The 3D-enabled variation typically serves packaging, labelling, and promotional product scenarios.

![Handy Editor with the design canvas.](./images/handy-editor.png)

![Handy Editor with the 3D mockup in the right panel.](./images/handy-editor-3d.png)

## What you can do

- Load a product by PIM product reference, product ID, or design ID.
- Load a public design template, a private design, or a saved design for recovery.
- Configure the asset library, the image uploader, and the item tools.
- Set up preflight validation rules for resolution, print areas, and the number of colors.
- Apply finishing variations, such as foils, to colorless containers.
- Publish the configuration as a workflow file assigned to a product.

## Configuration format

### Regular Handy Editor

- Component: `handy-editor`
- Tag name: `au-handy-editor`
- Actual protocol version: `2`

```json
{
  "configVersion": 2,
  "component": "handy-editor",
  "tagName": "au-handy-editor",
  "input": {},
  "settings": {},
  "resources": {},
  "localization": {}
}
```

### 3D-enabled Handy Editor

- Component: `handy-editor-3d`
- Tag name: `au-handy-editor-3d`
- Actual protocol version: `2`

```json
{
  "configVersion": 2,
  "component": "handy-editor-3d",
  "tagName": "au-handy-editor-3d",
  "input": {},
  "settings": {},
  "resources": {},
  "localization": {}
}
```

Both variations accept the same input, settings, and resources. See the [workflow file format](https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/format.md) to learn how one file combines several element configurations.

## Recommended path

If you configure the Handy Editor for the first time, follow these pages in order:

1. [Choose how to load a product into the editor](https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/handy-editor/input.md)
2. [Configure the editor behavior](https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/handy-editor/settings.md)
3. [Provide asset folders and finishing variations](https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/handy-editor/resources.md)

## Developer's documentation

- [Add Handy Editor to a page and initialize it](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/quick-start.md)
- [Embed your own HTML into the editor](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/slots.md)
- [Handle customization results](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/output-data.md)
- [What's new](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/whats-new.md)