Core and API
Mount, resize, and destroy the designer
Create a stable runtime instance that follows its container and can be removed or remounted without leaking listeners.
Guide overview
Before you start
- A production JavaScript bundle is available.
- The host page contains a dedicated designer container.
- The initial product state can be loaded from the host.
Expected result
The designer initializes once, resizes with its container, and is cleanly destroyed when the host view closes.
Prepare a stable host container
Give the mount node a predictable width and a responsive height before creating the runtime. A zero-height or frequently replaced node can make the canvas appear blank even though initialization succeeded.
Load the shared stylesheet before the JavaScript bundle and keep the container outside animated layout transitions until the ready event has fired.
Create a dedicated empty mount element.
Apply a minimum height and responsive constraints.
Load the runtime stylesheet and scripts in version order.
Create and observe the instance
Pass locale, permissions, adapters, initial state, and the selected interface template through the public constructor. Wait for the ready event before loading additional state or calling view-specific methods.
Use a ResizeObserver on the host container when the surrounding application changes panels, sidebars, or modal dimensions. Avoid calculating renderer dimensions from the browser viewport alone.
Create one runtime instance.
Subscribe to ready and error events.
Load the product state.
Forward container resize notifications.
Destroy before remounting
Single-page applications must release the instance before removing its DOM node. Destruction clears renderer resources, keyboard listeners, observers, upload work, and module portals owned by that instance.
A remount should always start from serialized state rather than retained Fabric or Babylon objects.
Persist pending state.
Call the public destroy method.
Remove the old host node.
Create a fresh instance only after the new node is mounted.