cv-customizer

The root component that orchestrates the entire product customizer. It creates a ChamevoCanvas and ChamevoJS instance, wires events to the Stencil Store, and manages the responsive layout.

Properties

Property	Attribute	Type	Default	Description
options	options	string | Partial<ChamevoOptions>	'{}'	Customizer configuration. JSON string (HTML) or object (JS).
colorScheme	color-scheme	'light' | 'dark'	'light'	Color theme. Toggles .cv-dark class.
uiStyle	ui-style	'default' | 'rounded' | 'sharp'	'default'	Shape preset.
moduleDisplay	module-display	'sidebar' | 'dialog'	'sidebar'	How module panels are displayed.
shadow	shadow	'none' | 'sm' | 'md' | 'lg'	'none'	Box shadow on container.
proxyFileServer	proxy-file-server	string	''	CORS proxy URL.

Events

Event	e.detail	Description
cvReady	{ chamevo, canvas }	Customizer initialized.
cvProductCreate	{ product }	Product loaded.
cvProductChange	{ product }	Product changed.
cvViewSelect	{ view, index }	View switched.
cvElementSelect	{ element }	Element selected/deselected.
cvPriceChange	{ price, singleProductPrice, pricingRulesPrice }	Price changed.

Methods

Method	Returns	Description
loadProduct(product, options?)	Promise<void>	Load a CVProduct or legacy CVView[]. Pass { replaceInitialElements: true } to preserve user-added elements across the load; when omitted it falls back to mainOptions.replaceInitialElements.
selectView(index)	Promise<void>	Switch to a view by index.
getProduct()	Promise<CVProduct | null>	Get current product.
getOrder()	Promise<object>	Get product + fonts + colors. Also clears hasUnsavedChanges, so the unsavedProductAlert beforeunload prompt won't fire on the navigation that follows (every consumer that reads the order is about to persist it). To peek without that side effect, snapshot hasUnsavedChanges first.
getElements(viewIndex?, type?)	Promise<object[]>	Get elements.
markSaved()	Promise<void>	Mark the current state as saved — clears hasUnsavedChanges so the unsavedProductAlert beforeunload prompt won't fire on the next navigation. Call before an external flow (e.g. lightbox add-to-cart) initiates navigation that is the user's save action.
undo()	Promise<void>	Undo.
redo()	Promise<void>	Redo.
reset()	Promise<void>	Clear all views.
setProducts(catalog)	Promise<void>	Set product catalog.
setGraphics(catalog)	Promise<void>	Set graphics catalog.
registerModule(moduleId, target)	Promise<() => void>	Mount a module into an external DOM element. Returns cleanup function.

Slots

Slot	Position
toolbar-top	Above the canvas
sidebar	Left of the canvas
panel	Right of the canvas
toolbar-bottom	Below the canvas

CSS Custom Properties

Property	Default	Description
All --cv-* tokens	See Theming	Cascade into all child components.

Responsive Layout

Container Width	Behavior
< 580px	Bottom tab bar + dialog panels
580-1024px	Dialog panels
> 1024px	Sidebar panels

Layout size is exposed via the data-layout-size attribute (sm, md, lg) for CSS overrides.

Custom Modules

Add custom web components as mainbar modules by passing CustomModule descriptors in mainBarModules:

customizer.options = {
    mainBarModules: [
        'text',
        'images',
        { id: 'quote', element: 'my-quote-picker', icon: 'sparkle', label: 'Quote' },
    ],
};

See Custom Modules for full details.

Distributed Modules (registerModule)

Mount any module into an external DOM element:

// Mount the text module into an external container
const cleanup = await customizer.registerModule('text', '#external-panel');

// Unmount when done
cleanup();

Works with both built-in module IDs ('text', 'images', 'designs', etc.) and custom module IDs defined in mainBarModules.