Webflow Designer API

Webflow Designer API Documentation

This skill provides comprehensive reference documentation for the Webflow Designer Extension API. Learn how to build apps that extend the Webflow Designer with custom functionality, programmatically manipulate design elements, manage styles and components, and create powerful design tools.

Document Structure

This map uses a hierarchical structure:

• ## marks documentation topic areas
• ### marks individual API references with clickable links
• Nested bullets show key methods and features
• Each reference links to the full documentation in the references/ directory

Getting Started

designer-api/getting-started

• Create your first Designer Extension
• Prerequisites
• Set up development environment
• Install Webflow CLI
• Create extension project
• Run extension locally
• Update elements programmatically

webflow-cli

• Webflow CLI overview
• Installation
• Commands
• Extension management
• Development workflow

error-handling

• Error handling patterns
• API error responses
• Best practices

app-modes

• Extension lifecycle
• App states
• Mode management

Elements

Creating & Retrieving Elements

• creating-retrieving-elements
• get-selected-element
• set-selected-element
• get-all-elements

Inserting Elements

• insert-element-before
• insert-element-after
• prepend
• append
• bulk-add-elements

Managing Elements

• remove-element
• element-properties-methods
• element-types-methods
• element-presets

Element Children

• elements/children
• element-children/append
• element-children/prepend

Custom Attributes

• elements/custom-attributes
• custom-attributes/setCustomAttribute
• custom-attributes/removeCustomAttribute
• custom-attributes/getAllCustomAttributes
• custom-attributes/getCustomAttribute

Element Styles

• elements/styles
• element-styles/getStyles
• element-styles/setStyles

Text Content

• elements/text-content
• set-text-content
• get-text-content

Element Types

DOM Element

• dom-element
• dom-element/getTag
• dom-element/setTag
• dom-element/getAllAttributes
• dom-element/getAttribute
• dom-element/setAttribute
• dom-element/removeAttribute

String Element

• string-element
• string-element/getText
• string-element/setText

Component Element

• component-element
• component-element/getComponent

Heading Element

• heading-element
• heading-element/getHeadingLevel
• heading-element/setHeadingLevel

Image Element

• image-element
• image-element/getAsset
• image-element/setAsset
• image-element/getAltText
• image-element/setAltText

Link Element

• link-element
• link-element/setSettings
• link-element/getTarget

Forms

Form Element

• forms
• form-element/set-form-name
• form-element/get-form-settings
• form-element/set-form-settings

Form Inputs

• form-inputs
• form-element/get-required-status
• form-element/set-required-status
• form-element/get-name-input-field
• form-element/set-name-input-field
• form-element/get-type-input-field
• form-element/set-type-input-field

Styles

Managing Styles

• get-all-styles
• get-style-by-name
• create-style
• remove-style
• style/is-combo-class

Style Properties

• style-properties
• set-style-properties
• get-style-property
• set-style-property
• remove-a-style-property
• remove-style-properties
• clear-all-style-properties

Variable Modes (Styles)

• managing-variable-modes-style
• get-variable-mode-style
• get-variable-modes-style
• set-variable-mode-style
• set-variable-modes-style
• remove-variable-mode-style
• remove-variable-modes-style
• remove-all-variable-modes

Components

Component Management

• get-components
• create-component-definition
• delete-component-definition
• create-component-instance
• enter-component
• exit-component

Component Properties

• get-root-element
• get-component-name
• get-component
• set-component-name

Variables

Variable Collections

• variable-collections-overview
• create-variable-collection
• get-all-variable-collections
• get-default-variable-collection
• get-variable-collection-by-id
• remove-variable-collection
• get-collection-name
• set-variable-collection-name

Variables

• variables-detail-overview
• create-number-variable
• create-color-variable
• create-font-family-variable
• create-size-variable
• create-percentage-variable
• get-all-variables
• get-variable-by-name
• get-variable
• get-variable-name
• get-variable-value
• get-variable-binding
• get-variable-css-name
• set-variable-name
• set-variable-value
• remove-variable

Variable Modes

• variable-modes
• get-all-variable-modes
• get-variable-mode-by-name
• get-variable-mode-by-id
• create-variable-mode
• remove-variable-mode
• get-variable-mode-name
• set-variable-mode-name

Assets

Asset Management

• create-an-asset
• get-all-assets
• get-asset-by-id
• get-asset-name
• set-asset-name
• get-alt-text
• set-alt-text
• set-asset-file
• get-asset-mime-type
• get-asset-url

Asset Folders

• get-asset-folder-parent
• set-asset-folder-parent
• get-all-asset-folders
• create-asset-folder
• get-asset-folder-name

Pages

Page Management

• create-folder
• create-page
• get-all-pages-and-folders
• get-current-page
• switch-page

Page Properties

• set-page-name
• get-page-title
• set-page-title
• get-page-slug
• set-page-slug
• get-page-description
• set-page-description
• get-page-publish-path
• get-page-category
• get-utility-page-key
• get-collection-id-from-cms-page
• get-collection-name-from-cms-page
• set-page-metadata
• check-if-page-is-draft
• set-draft
• check-if-page-is-homepage
• check-if-page-is-password-protected

SEO & Search

• get-search-title
• set-search-title
• check-if-page-uses-title-as-search-title
• use-page-title-as-search-title
• get-search-description
• set-search-description
• check-description-is-used-as-search-description
• use-page-description-as-search-description
• get-search-image
• set-search-image
• use-open-graph-image-as-search-image
• check-if-page-is-excluded-from-search
• exclude-page-from-search

Open Graph

• get-open-graph-title
• set-open-graph-title
• uses-title-as-open-graph-title
• set-page-to-use-title-as-open-graph-title
• get-open-graph-description
• set-open-graph-description
• uses-description-as-open-graph-description
• use-description-as-open-graph-description
• get-open-graph-image
• set-open-graph-image-url

Folders

• get-folder-name
• get-folder-slug
• get-parent-folder
• set-folder-name
• set-folder-slug
• set-parent-folder

Extension Lifecycle

Site & Extension Info

• get-site-info
• resize-extension
• close-extension
• get-breakpoint
• get-user-id-token
• get-users-designer-capabilities
• get-pseudo-mode
• get-launch-context

Events

• events
• notify-user
• user-selects-element
• user-changes-breakpoint
• user-changes-current-page
• user-changes-cms-page
• user-changes-mode
• user-changes-pseudo-mode

App Connections

• app-intents-and-connections
• set-app-connection
• get-app-connections
• remove-app-connection
• get-current-app-connection
• get-current-app-connection-resource

When to Use This Skill

Activate this skill when users ask about:

• "How do I create a Designer Extension?"
• "Programmatically add elements in Webflow Designer"
• "Manipulate styles via Designer API"
• "Create components programmatically"
• "Manage design variables in extensions"
• "Handle page SEO metadata"
• "Build custom Designer tools"
• "Listen to Designer events"
• Any Webflow Designer Extension API questions

Specific Solutions, Tips & Workarounds

• Clipboard copy, by button click
• Clipboard paste, and immediate processing
• Distinguishing between native and code components