JavaScript integration

Start here

01

Getting started

Install a verified bundle, create a designer instance, and load the first product state.

15 min

Integration and state

02

Runtime, modules, and events

Understand the host contract used to configure layouts, modules, permissions, state, pricing, and uploads.

20 min 03

Portable product packages

Move complete products between JavaScript, WordPress, Shopify, and future integrations.

10 min 04

Mount, resize, and destroy the designer

Create a stable runtime instance that follows its container and can be removed or remounted without leaking listeners.

18 min 05

Persist product state and respond to events

Store canonical designer state, restore it safely, and connect host actions without reading renderer internals.

22 min 06

Connect uploads and external media providers

Implement durable customer uploads and optional provider search without exposing private credentials to the browser.

20 min

Product construction

07

3D products and Assembly

Prepare multipart GLB products, material variations, measurements, and optional spatial construction tools.

25 min 08

2D views, drawing areas, and layers

Build accurate product sides, constrain customer artwork, and manage every visible object as a layer.

25 min 09

Variations, nested choices, and parameters

Create product options that target one 2D object, 3D mesh, material, texture, or measurable dimension.

30 min 10

Create an accurate 2D product view

Set up one printable side from an empty canvas or directly from a product image while preserving real production dimensions.

24 min 11

Build drawing areas and production markers

Constrain customer artwork with rectangles, imported SVG paths, or a mask generated from an existing product element.

25 min 12

Configure text, images, designs, and shapes

Expose the right customer content tools and make every inserted object behave consistently as a layer.

28 min 13

Prepare and import a configurable GLB model

Turn a production-ready GLB into a responsive 3D view with stable parts, materials, camera framing, and predictable performance.

30 min 14

Create elements, variations, and material choices

Model reusable product parts and customer options without confusing fixed product elements with customer-created design layers.

28 min

Interface and permissions

15

Templates, themes, modules, and permissions

Design a responsive workspace and decide exactly which tools administrators and customers may use.

25 min 16

Design templates, module placement, and responsive UI

Build separate administration and customer interfaces with deliberate zones, permissions, mobile behavior, and theme tokens.

26 min

Commerce and production

17

Pricing, validation, and production exports

Connect live configuration prices to a host cart and generate production-ready output from the same state.

25 min

Operations and quality

18

Localization, accessibility, and release quality

Ship a translated, keyboard-friendly, responsive integration and diagnose the exact bundle running in production.

20 min 19

Diagnose loading, rendering, and performance problems

Use runtime diagnostics and a repeatable test sequence to isolate host, media, renderer, state, and permission failures.

20 min

Reference

20

TypeScript API reference

Browse generated classes, functions, types, events, and module contracts for the current JavaScript release.

Reference