Components
Designer Components tools enable you to create reusable components, insert component instances on pages, and manage component definitions in the Designer.
Designer tools require the MCP Bridge App to be open in the Webflow Designer. Ensure it’s connected before using these tools.
When to use
Use Designer Components tools to:
- Create reusable components: Convert elements into components
- Insert instances: Add component instances to pages
- Edit components: Open component view for modifications
- Manage components: Rename and organize components
- Check component context: Verify if you’re in component edit mode
Tool details
Tool name: de_component_tool
Available actions
Check if inside component view
Determine whether you’re currently viewing a component for editing.
Action: check_if_inside_component_view
Parameters:
Returns: Boolean indicating if you’re in component view
Example usage:
Use this before performing operations to ensure you’re in the correct context (page view vs. component view).
Transform element to component
Convert an existing element into a reusable component.
Action: transform_element_to_component
Parameters:
Example usage:
After transformation, the original element becomes a component instance, and a component definition is created.
Insert component instance
Add a component instance to the active page.
Action: insert_component_instance
Parameters:
Example usage:
Open component view
Launch component view to edit a component definition.
Action: open_component_view
Parameters:
Example usage:
Opening component view changes your editing context. All subsequent element operations will affect the component definition, not the page.
Close component view
Exit component view and return to page view.
Action: close_component_view
Parameters:
Example usage:
Get all components
Retrieve all available components (requires Webflow Designer connection).
Action: get_all_components
Parameters:
Returns: List of all components with IDs and metadata
Example usage:
Rename component
Change a component’s display name.
Action: rename_component
Parameters:
Example usage:
Best practices
Plan component structure first
Before creating a component:
- Identify what elements it needs
- Determine which values should be properties
- Consider reusability across pages
- Plan for variations
Well-planned components are more useful.
Use semantic naming
Name components by purpose:
- ✅
Navigation-Primary,Card-Product,Button-CTA - ❌
Component1,Div-Block,Element
Clear names make components easy to find and use.
Keep components focused
Each component should have a single, clear purpose:
- ✅ Product Card (shows product info)
- ❌ Everything Card (shows products, blog posts, team members)
Focused components are more maintainable.
Verify context before editing
Always check if you’re in component view before making changes:
This prevents editing the wrong component.
Test instances after changes
After updating a component definition:
- Check multiple instances
- Verify on different pages
- Test responsive behavior
- Ensure no layout breaks
Component changes affect many places.
Limitations
- Context switching: Opening component view changes editing context
- Property system: Limited property configuration via tools
- Designer required: Must have Bridge App connection
- No nested component editing: Cannot edit nested components directly
When you open component view, you’re editing the component definition. Changes affect ALL instances of that component across your site.
