---
title: "Handy Editor | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/"
---

# Handy Editor

> Use this section to embed the Handy Editor into your storefront, initialize it with product data, and handle customization results. The Handy Editor is a WYSIWYG editor for freehand design editing — your customers can create designs from scratch or customize templates without rigid constraints.

The editor is available in two versions: the base version `au-handy-editor` and a version with 3D preview support `au-handy-editor-3d`. Both versions share the same settings and customization options. In the 3D version, the `init` and `update` methods take `IHandyEditor3DConfiguration`, which extends `IHandyEditorInitArgs` with 3D viewer settings.

![Handy Editor with 3D viewer.](images/handy-editor-3d.png)

## What you can do

- Add the Handy Editor to a web page and configure it with a workflow file.
- Load products by PIM data, product reference, or design ID.
- Connect external image storage and AI tools for background removal, upscaling, and text-to-image generation.
- Customize the editor's appearance with CSS variables and embed your own HTML through slots.
- Localize the interface and override default text labels.
- Receive customization results and save them as private designs.

## Recommended path

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

1. [Quick start](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/quick-start.md) — launch the editor with minimal configuration.
2. [Initialization](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/initialization.md) — learn all supported initialization scenarios.
3. [Input](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/input.md) — choose the right way to pass product data.
4. [Settings](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/settings.md) — configure features, tools, and validation rules.

## Section map

- **How-to guides** — step-by-step instructions for common integration tasks:
  - [Initialization](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/initialization.md) — add the editor to a page and pass the configuration.
  - [Input](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/input.md) — choose how to load products into the editor.
  - [External storage](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/external-storage.md) — connect an external image source.
  - [Connecting AI tools](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/connecting-ai-tools.md) — enable background removal, upscaling, and text-to-image.
  - [Localization](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/localization.md) — change the interface language and override labels.
  - [Slots](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/slots.md) — embed your own HTML into the editor.
- **Reference** — complete reference for configuration and APIs:
  - [Settings](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/settings.md) — all feature flags and configuration sections.
  - [Resources](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/resources.md) — additional data such as image library folders.
  - [Styling](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/styling.md) — CSS variables for customizing the appearance.
  - [Output data](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/output-data.md) — the structure of customization results.
  - [Web component API](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/web-component-api.md) — methods and events of the component.
  - [Plugin API](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/plugin-api.md) — the API for building plugins.
  - [Desktop and mobile feature comparison](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/features.md) — which features each version supports.

<head>
  <script type="application/ld+json">
    {JSON.stringify({
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "@id": "https://customerscanvas.com/#handy-editor",
      "name": "Handy Editor",
      "description": "A WYSIWYG editor for freehand design editing that lets customers create designs from scratch or customize templates.",
      "applicationCategory": "DesignApplication",
      "operatingSystem": "All",
      "url": "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/",
      "author": {
        "@type": "Organization",
        "@id": "https://www.aurigma.com/#organization",
        "name": "Aurigma",
        "url": "https://www.aurigma.com/"
      }
    })}
  </script>
</head>