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 personalize 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 share the same API, settings, and customization options.

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 — launch the editor with minimal configuration.
2. Initialization — learn all supported initialization scenarios.
3. Input — choose the right way to pass product data.
4. Settings — configure features, tools, and validation rules.

Section map

• How-to guides — step-by-step instructions for common integration tasks:
  • Initialization — add the editor to a page and pass the configuration.
  • Input — choose how to load products into the editor.
  • External storage — connect an external image source.
  • Connecting AI tools — enable background removal, upscaling, and text-to-image.
  • Localization — change the interface language and override labels.
  • Slots — embed your own HTML into the editor.
• Reference — complete reference for configuration and APIs:
  • Settings — all feature flags and configuration sections.
  • Resources — additional data such as image library folders.
  • Styling — CSS variables for customizing the appearance.
  • Output data — the structure of customization results.
  • Web component API — methods and events of the component.
  • Plugin API — the API for building plugins.
  • Desktop and mobile feature comparison — which features each version supports.