ComponentsManaging Components

Open a Component canvas (Beta)

webflow.openCanvas(target)

Open a Component’s canvas or a page for editing in the Designer.

To specify the Component to open, pass one of the following objects:

  • Component
  • ComponentInstance
  • A component ID as a string

You can also open a page for editing by passing a Page object. In this case, this method behaves the same as the webflow.switchPage() method.

Beta

These methods are in public beta and may change with future releases.

Syntax

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

Where OpenCanvasOptions is one of:

interface OpenCanvasByComponentId {
  componentId: string;
}
interface OpenCanvasByPageId {
  pageId: string;
}
type OpenCanvasOptions = OpenCanvasByComponentId | OpenCanvasByPageId;

Parameters

target: One of the following values:

TypeDescription
ComponentA Component to open in the Designer
ComponentElementA Component instance to specify the Component to open in the Designer
PageA page to open in the Designer
{ componentId: string }The ID of the Component to open in the Designer
{ pageId: string }The ID of a page to open in the Designer

Returns

Promise<void>

A Promise that resolves when the canvas or page has opened.

Example

// Open a Component canvas by ID
await webflow.openCanvas({ componentId: 'component-id' });
// Open a Component canvas by Component reference
const components = await webflow.getAllComponents();
const hero = components[0];
await webflow.openCanvas(hero);
// Open a Component canvas via an instance reference
const selectedElement = await webflow.getSelectedElement();
if (selectedElement?.type === 'ComponentInstance') {
  await webflow.openCanvas(selectedElement as ComponentElement);
}
// Navigate to a page by ID
await webflow.openCanvas({ pageId: 'page-id' });
// Navigate to a page by reference (equivalent to webflow.switchPage)
const pagesAndFolders = await webflow.getAllPagesAndFolders();
const pages = pagesAndFolders?.filter((i): i is Page => i.type === 'Page');
await webflow.openCanvas(pages[0]);

Error handling

ScenarioError tagMessage
Invalid component IDInvalidRequest"Invalid component ID"
Invalid page IDInvalidRequest"Invalid page ID"
Component canvas not availableInvalidRequest"Component canvas is not available in the current mode"
No access to the component or pageUnauthorized

The component canvas is only available in Design mode. Calling openCanvas() with a component ID or reference in Build mode throws an InvalidRequest error.

Designer Ability

Designer AbilityLocaleBranchWorkflowSiteMode
canModifyComponentsanyanycanvasDesign