Open a Component canvas (Beta)

1
webflow.openCanvas(target: Component | ComponentElement | Page): Promise<void>;
2
webflow.openCanvas(target: OpenCanvasOptions): Promise<void>;

1
interface OpenCanvasByComponentId {
2
  componentId: string;
3
}
4
5
interface OpenCanvasByPageId {
6
  pageId: string;
7
}
8
9
type OpenCanvasOptions = OpenCanvasByComponentId | OpenCanvasByPageId;

1
// Open a Component canvas by ID
2
await webflow.openCanvas({ componentId: 'component-id' });
3
4
// Open a Component canvas by Component reference
5
const components = await webflow.getAllComponents();
6
const hero = components[0];
7
await webflow.openCanvas(hero);
8
9
// Open a Component canvas via an instance reference
10
const selectedElement = await webflow.getSelectedElement();
11
if (selectedElement?.type === 'ComponentInstance') {
12
  await webflow.openCanvas(selectedElement as ComponentElement);
13
}
14
15
// Navigate to a page by ID
16
await webflow.openCanvas({ pageId: 'page-id' });
17
18
// Navigate to a page by reference (equivalent to webflow.switchPage)
19
const pagesAndFolders = await webflow.getAllPagesAndFolders();
20
const pages = pagesAndFolders?.filter((i): i is Page => i.type === 'Page');
21
await webflow.openCanvas(pages[0]);