Changelog

You can now programmatically open a Component’s canvas or navigate to a page with the new webflow.openCanvas() method (Beta).

1
// Open a component canvas by ID
2
await webflow.openCanvas({ componentId: 'component-id' });
3
4
// Open a component canvas by reference
5
const components = await webflow.getAllComponents();
6
await webflow.openCanvas(components[0]);
7
8
// Navigate to a page by ID
9
await webflow.openCanvas({ pageId: 'page-id' });

Previously, Designer Extensions and MCP agents that needed to modify a Component’s internal structure had to rely on the user manually navigating to the component canvas. The openCanvas() method removes that manual step and enables fully automated Component workflows.

openCanvas() accepts a Component ID, a Component reference, or a ComponentElement (instance) reference to open the component canvas. It also accepts a page ID or Page reference to navigate to a page — equivalent to calling webflow.switchPage().

For more information, see Open a canvas.