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

# Components

> Learn how to Create and Edit Components using Webflow APIs

[Webflow Components](https://help.webflow.com/hc/en-us/articles/33961303934611) are customizable blocks created from [Elements](/designer/reference/elements-overview). They serve as the foundation for structuring visual hierarchies on a Webflow site, ensuring that designs are modular, reusable, and consistent.

![](/_fern-files/webflow.docs.buildwithfern.com/e06f0465a47c22ac130ab79c17c07414af1348a379f500555ae026dea17f8350/assets/images/41019fc-Devimage_Components_650px_2.png)

## Key concepts

#### Component definition

Also known as the component object, the **component definition** is the blueprint for a component. It defines the structure of elements within the component, as well as properties that can be used to customize the component instance. Any modifications made to the component definition will propagate to all associated component instances. This ensures consistency across instances while allowing for centralized changes.

#### Component instance

A **component instance** is a "carbon-copy" of the component definition. While it retains the core design and structure of the definition, each instance can be [customized through unique properties.](https://help.webflow.com/hc/en-us/articles/33961303934611) This allows designers and users to assign custom values to a component instance’s properties, tailoring its appearance and behavior, without modifying the underlying component definition.

#### Component properties

**Component properties** are pre-defined attributes within a Component Definition that can be assigned a specific value in the Component Instance. They allow designers or users to modify specific aspects of an Instance - text, images, links, and more - without affecting its foundational design.

> **Component properties are not yet supported**
>
> Currently, our APIs don't support the creation and management of Component Properties.
>
> We understand the importance of this feature for our users, and we're excited to share that it's on our development roadmap. We're committed to enhancing our API capabilities and will provide updates as we make progress. Thank you for your patience and understanding!

## Methods

### Create a component definition

You can create a component definition within an existing root element or create an unattached component definition and place it on the page later.

To create a component definition within an existing element, pass the name for the new component and the root element to the `webflow.registerComponent()` function.
In the above card component example, the root element would be the container DIV element, which has  the `img`, `div`, and `button` as child elements.
This example creates a component definition within an existing element:

```typescript
// Get selected element
const rootElement = await webflow.getSelectedElement();

if (rootElement) {

  // Create a component from the Root Element
  const component = await webflow.registerComponent('Card Component', rootElement);
  console.log(`Component registered with ID: ${component.id}`);

} else {
  console.log("No element is currently selected. Please select a root element first.");
}
```

This example creates a component that is not inside any element, equivalent to clicking **New component > Create blank** in the Designer:

```typescript
// Create a hero component in the Sections group that is not within an existing element
const hero = await webflow.registerComponent({
  name: 'Hero Section',
  group: 'Sections',
  description: 'A reusable hero section with heading and CTA',
});
```

For more information, see [Create a component](/designer/reference/create-component-definition).

### Edit a component definition

To make changes to a component definition, its component instance must be present on the page. You'll then need to get the Component Instance, and use the `enterComponent` method to focus Webflow on the component definition. Once the component definition is in focused, you can get the root element of the component, and then insert / remove child elements from the root element.

```typescript
enterComponent: async () => {
  // Step 1: Fetch the currently selected element
  const selectedElement = await webflow.getSelectedElement()

  if (selectedElement && selectedElement.type === 'ComponentInstance') {
    //  Step 2: Enter the context of the selected ComponentElement
    await webflow.enterComponent(selectedElement as ComponentElement)
    console.log('Successfully entered the component context.')

    // Step 3: After entering the component's context, fetch the root element
    const rootElement = await webflow.getRootElement()
    if (rootElement) {
      // Check if element supports child elements
      if (rootElement?.children) {
        // Append newElement as a child to of the selected element
        const newElement = await rootElement?.append(webflow.elementPresets.DivBlock)
        console.log('Added new child element:', newElement)
      } else {
        console.log('Root element does not support child elements')
      }
    } else {
      console.log('No root element found in this component context.')
    }
  } else {
    console.log('The selected element is not a ComponentElement.')
  }
}
```

### Add a component instance to a page

Use `webflow.createInstance(componentDefinition)` to [add a component instance](/designer/reference/create-component-instance) to the page. Component instances can be nested as part of element hierarchies, including under other component instances.