> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# 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()`](/designer/reference/switch-page) method.

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

### Syntax

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

Where `OpenCanvasOptions` is one of:

```typescript
interface OpenCanvasByComponentId {
  componentId: string;
}

interface OpenCanvasByPageId {
  pageId: string;
}

type OpenCanvasOptions = OpenCanvasByComponentId | OpenCanvasByPageId;
```

### Parameters

**`target`**: One of the following values:

| Type                      | Description                                                           |
| ------------------------- | --------------------------------------------------------------------- |
| `Component`               | A Component to open in the Designer                                   |
| `ComponentElement`        | A Component instance to specify the Component to open in the Designer |
| `Page`                    | A 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

```typescript
// 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]);
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

---

### Error handling

| Scenario                           | Error tag        | Message                                                   |
| ---------------------------------- | ---------------- | --------------------------------------------------------- |
| Invalid component ID               | `InvalidRequest` | `"Invalid component ID"`                                  |
| Invalid page ID                    | `InvalidRequest` | `"Invalid page ID"`                                       |
| Component canvas not available     | `InvalidRequest` | `"Component canvas is not available in the current mode"` |
| No access to the component or page | `Unauthorized`   |                                                           |

> **Warning**
>
> 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 Ability        | Locale | Branch | Workflow | SiteMode |
| ----------------------- | ------ | ------ | -------- | -------- |
| **canModifyComponents** | any    | any    | canvas   | Design   |