> 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.

# Create a component instance

Adding a component instance, also known as a *ComponentElement*, to the canvas resembles the same process as adding any element to the canvas. Use the [element creation methods](/designer/reference/insert-element-after) in combination with a Component Object to create a new Component Instance.

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

// Get Component
const allComponents = await webflow.getAllComponents()
const firstComponent = allComponents[0]

// Add Component instance onto a page
await selectedElement?.before(firstComponent)
```

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

---

### Designer Ability

| Designer Ability        | Locale  | Branch | Workflow | SiteMode |
| :---------------------- | :------ | :----- | :------- | :------- |
| **canCreateComponents** | primary | any    | canvas   | any      |