Component Overview

Webflow Components are customizable blocks created from Elements. They serve as the backbone for structuring visual hierarchies on a Webflow site, ensuring that designs are modular, reusable, and consistent.

Let’s review some key concepts of Components, and how they’re implemented in Webflow.

Definitions

Component Definition

Also known as the component object, the component definition is the blueprint for a component. It establishes the foundational structure of the elements within the component, as well as properties that can be further defined in a component instance. Any modifications made to the component definition will propagate and automatically update all associated component instances. This ensures consistency across instances while allowing for centralized changes.

Use components to manage recurring layouts and content more efficiently across your site.

Component Instance

A component instance is a concrete instantiation of the component definition. While it retains the core design and structure of the definition, each instance can be customized through unique properties. 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 Operations

With Component concepts explained, here is a quick overview of the capabilities offered by the Components API:

🛠️ Create a Component Definition

To create a component definition you’ll need a root element - or top-level element - that has child elements within its element hierarchy. With the root element identified, you can use webflow.registerComponent(rootElement) to register the component definition. In the above card component example, the root element would be the container DIV element, which has the img, div, and button child elements.

1
// Get selected element 
2
const rootElement = await webflow.getSelectedElement();
3
4
if (rootElement) {
5
6
  // Create a component from the Root Element
7
  const component = await webflow.registerComponent('MyCustomComponent', rootElement);
8
  console.log(`Component registered with ID: ${component.id}`);
9
10
} else {
11
  console.log("No element is currently selected. Please select a root element first.");
12
}

✏️ Edit a Component Definition

1. Get the component
2. Get the root element of the component
3. Insert / remove child elements from the root element.

1
// Get Component
2
const all = await webflow.getAllComponents()
3
const firstComponent = all[0]
4
5
// Get Root Element
6
const root = await firstComponent?.getRootElement() as AnyElement
7
8
if (root.children) {
9
  // Append DIV block to Root element
10
  await root?.append(webflow.elementPresets.DivBlock);
11
}

✏️ Adding a Component Instance to a Page

Use webflow.createInstance(componentDefinition) to add a component instance to the page. Component instances can be nested as part of element hierarchies, including under other component instances.

Component Properties

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.