Webflow Designer API
Every section on this page — its structure, brand-bound styles, layout, components, and attributes — was generated programmatically through the Webflow MCP Designer tools. Scroll to see each capability in action.
Book a demoStyles & Design Tokens
Each swatch is a class whose background is bound to a Webflow variable from the Mitiga 2025 collection — not a hard-coded hex. Change the variable and every swatch updates instantly.
Mitiga Purple · #5948D2
Mitiga Coral · #FF6B6C
Resilience Teal · #80C9B6
Layout
These three cards sit in a CSS Grid created through the API. Breakpoint styles collapse the grid to two columns on tablet and one on mobile — all set programmatically.
Sections, containers, grids, headings, buttons and forms — created and nested through element_builder.
Create classes, combo classes and breakpoint overrides, with values bound to Webflow brand variables.
Set text, links, attributes, IDs, heading levels and visibility on any element — all through the API.
Components
Build an element once, register it as a component, then place instances anywhere. Edit the component and every instance updates — the cards below are three instances of one component created via the API.
Registered as a component through the API. Edit the component once and every instance updates in sync.
Registered as a component through the API. Edit the component once and every instance updates in sync.
Registered as a component through the API. Edit the component once and every instance updates in sync.
Attributes & Settings
Beyond visuals, the API configures the element itself — custom data attributes, a DOM id, heading levels, link targets and visibility. The block below had its id and attributes set programmatically:
// configured via element_tool — add_or_update_attribute, update_id_attribute
#id → api-demo-config
data-demo → true
data-section → attributes
data-built-by → webflow-designer-api