Headless Editor
Use this section to create your own customization experience using the Headless Editor.
What is Headless Editor
The Headless Editor is a workflow element for building your own editor. Unlike other editors, it has almost no user interface of its own. The only UI component it exposes is the design viewer. All other functionality is exposed through JavaScript methods and events. You build your own controls to edit element content, modify properties, and apply other manipulations with a design.
A typical use case is deeply integrating customization with a product page. Like the Simple Editor, the Headless Editor is embedded into your product page. Unlike the Simple Editor, however, it gives you full control over where input fields for text elements or image placeholder upload buttons appear on your page.
Capabilities
- Load products by product reference or Customer's Canvas product ID.
- Change product options and variants from code.
- Read and update text, image placeholders, and barcodes on the current design surface.
- Read and update surface container settings and manipulate the underlying print product model.
- Generate previews and collect a cart line item to finish a customization session.
- Control the built-in viewer and its loading states.
Recommended path
If you are integrating the Headless Editor for the first time, follow these pages in order:
- Quick start — build a working storefront page end to end.
- Integration guidelines — learn all supported initialization and finalization scenarios.
- Products, options, and variants — select product options and variants.
- Design elements — edit text, images, barcodes, and containers on the current surface.
Before you start, prepare a test product in Customer's Canvas BackOffice. See Prepare for frontend integration.
Section map
- How-to guides — step-by-step instructions for common integration tasks:
- Quick start — build a minimal storefront from a Vite project.
- Integration guidelines — embed the editor, initialize it, and collect results.
- Products, options, and variants — work with options and variants.
- Design elements — edit text items, image placeholders, barcodes, and containers.
- Previews — generate temporary and permanent previews.
- Toggle sets — read and apply toggle sets from the current design.
- Viewer settings and appearance — configure the built-in viewer states.
- Reference — configuration options and styling:
- Settings — the editor settings.
- CSS variables — style the built-in viewer states.
- API Reference — the TypeScript reference generated from the package types.