Webflow Components API
The Webflow Components API provides endpoints for listing components within a site, and retrieving or updating component content and properties.
The Webflow Components API provides endpoints for listing components within a site, and retrieving or updating component content and properties.
openapi: 3.1.0
info:
title: Webflow Components API
description: Webflow Data API v2 - Components endpoints.
version: 2.0.0
contact:
name: Webflow Developer Relations
email: [email protected]
url: https://developers.webflow.com
termsOfService: https://webflow.com/legal/terms
license:
name: MIT
url: https://opensource.org/licenses/MIT
servers:
- url: https://api.webflow.com/v2
description: Webflow API v2
x-fern-server-name: Data API
security:
- OAuth2: []
- ApiKey: []
tags:
- name: Components
paths:
/sites/{site_id}/components:
get:
x-fern-sdk-group-name: components
x-fern-sdk-method-name: list
security:
- OAuth2:
- components:read
operationId: list-components
summary: Webflow List Components
description: 'List of all components for a site.
Required scope | `components:read`
'
tags:
- Components
parameters:
- name: site_id
in: path
description: Unique identifier for a Site
example: 580e63e98c9a982ac9b8b741
required: true
schema:
type: string
format: objectid
default:
- name: branchId
in: query
allowEmptyValue: true
description: Scope the operation to work on a specific branch.
example: 68026fa68ef6dc744c75b833
required: false
schema:
type: string
format: objectid
- in: query
allowEmptyValue: true
name: limit
example: 100
description: 'Maximum number of records to be returned (max limit: 100)'
required: false
schema:
type: integer
- in: query
example: 0
allowEmptyValue: true
name: offset
description: Offset used for pagination if the results have more than limit records
required: false
schema:
type: integer
responses:
'200':
description: Request was successful
content:
application/json:
schema:
description: List of Components on a site.
type: object
example:
components:
- id: 6596da6045e56dee495bcbba
name: Primary Button
group: Buttons
description: A default button component that can be used across the site
- id: 658205daa3e8206a523b5ad4
name: Secondary Button
group: Buttons
description: A secondary button component that can be used across the site
- id: 6258612d1ee792848f805dcf
name: Card
group:
description:
- id: 68a2b1d1ee792848f805dcf
name: Nav
group:
description:
readonly: true
pagination:
limit: 20
offset: 0
total: 4
properties:
components:
type: array
items:
description: The Component object
type: object
required:
- id
example:
id: 6258612d1ee792848f805dcf
name: Primary Button
group: Buttons
description: A default button component that can be used across the site
properties:
id:
type: string
description: Unique identifier for the Component
example: 8505ba55-ef72-629e-f85c-33e4b703d48b
name:
type: string
description: Component Name
readOnly: true
example: My Button Component
group:
type: string
description: The group that the component belongs to
readOnly: true
example: Buttons
description:
type: string
description: Component Description
readOnly: true
example: A button component that can be used across the site
readonly:
type: boolean
description: Indicates whether the component is read-only. Components that cannot be updated within this Site are set to readonly. Workspace Libraries are a good example.
optional: true
readOnly: true
example: true
pagination:
description: Pagination object
type: object
required:
- limit
- offset
- total
properties:
limit:
type: integer
description: The limit used for pagination
example: 100
readOnly: true
offset:
type: integer
description: The offset used for pagination
example: 0
readOnly: true
total:
type: integer
description: The total number of records
example: 100
readOnly: true
'400':
description: Request body was incorrectly formatted.
x-logErrorCode: 400
content:
application/json:
schema:
type: object
example:
code: not_authorized
message: Request not authorized
externalReference:
details: []
properties:
code:
type: string
description: Error code
example: not_authorized
enum:
- bad_request
- collection_not_found
- conflict
- duplicate_collection
- duplicate_user_email
- ecommerce_not_enabled
- forbidden
- forms_require_republish
- incompatible_webhook_filter
- internal_error
- invalid_auth_version
- invalid_credentials
- invalid_domain
- invalid_user_email
- item_not_found
- missing_scopes
- no_domains
- not_authorized
- not_enterprise_plan_site
- not_enterprise_plan_workspace
- order_not_found
- resource_not_found
- too_many_requests
- unsupported_version
- unsupported_webhook_trigger_type
- user_limit_reached
- user_not_found
- users_not_enabled
- validation_error
message:
type: string
description: Error message
example: Request not authorized
externalReference:
type: string
description: Link to more information
example: ''
details:
type: array
description: Array of errors
items:
- type: string
example: Invalid email address
description: Error message
- type: object
example:
field: email
message: Invalid email address
description: Error message
example: []
example:
code: bad_request
message: 'Bad Request: Request is malformed'
externalReference:
details: []
'401':
description: Provided access token is invalid or does not have access to requested resource
x-logErrorCode: 401
content:
application/json:
schema:
type: object
example:
code: not_authorized
message: Request not authorized
externalReference:
details: []
properties:
code:
type: string
description: Error code
example: not_authorized
enum:
- bad_request
- collection_not_found
- conflict
- duplicate_collection
- duplicate_user_email
- ecommerce_not_enabled
- forbidden
- forms_require_republish
- incompatible_webhook_filter
- internal_error
- invalid_auth_version
- invalid_credentials
- invalid_domain
- invalid_user_email
- item_not_found
- missing_scopes
- no_domains
- not_authorized
- not_enterprise_plan_site
- not_enterprise_plan_workspace
- order_not_found
- resource_not_found
- too_many_requests
- unsupported_version
- unsupported_webhook_trigger_type
- user_limit_reached
- user_not_found
- users_not_enabled
- validation_error
message:
type: string
description: Error message
example: Request not authorized
externalReference:
type: string
description: Link to more information
example: ''
details:
type: array
description: Array of errors
items:
- type: string
example: Invalid email address
description: Error message
- type: object
example:
field: email
message: Invalid email address
description: Error message
example: []
example:
code: not_authorized
message: Request not authorized
externalReference:
details: []
'404':
description: Requested resource not found
x-logErrorCode: 404
content:
application/json:
schema:
type: object
example:
code: not_authorized
message: Request not authorized
externalReference:
details: []
properties:
code:
type: string
description: Error code
example: not_authorized
enum:
- bad_request
- collection_not_found
- conflict
- duplicate_collection
- duplicate_user_email
- ecommerce_not_enabled
- forbidden
- forms_require_republish
- incompatible_webhook_filter
- internal_error
- invalid_auth_version
- invalid_credentials
- invalid_domain
- invalid_user_email
- item_not_found
- missing_scopes
- no_domains
- not_authorized
- not_enterprise_plan_site
- not_enterprise_plan_workspace
- order_not_found
- resource_not_found
- too_many_requests
- unsupported_version
- unsupported_webhook_trigger_type
- user_limit_reached
- user_not_found
- users_not_enabled
- validation_error
message:
type: string
description: Error message
example: Request not authorized
externalReference:
type: string
description: Link to more information
example: ''
details:
type: array
description: Array of errors
items:
- type: string
example: Invalid email address
description: Error message
- type: object
example:
field: email
message: Invalid email address
description: Error message
example: []
example:
code: resource_not_found
message: 'Requested resource not found: The site cannot be found'
externalReference:
details: []
'429':
description: The rate limit of the provided access_token has been reached. Please have your application respect the X-RateLimit-Remaining header we include on API responses.
x-logErrorCode: 429
headers:
X-RateLimit-Remaining:
description: Contains the number of available requests remaining in the current minute
schema:
type: number
X-RateLimit-Limit:
description: Contains your current overall rate limit per minute
schema:
type: number
content:
application/json:
schema:
type: object
example:
code: not_authorized
message: Request not authorized
externalReference:
details: []
properties:
code:
type: string
description: Error code
example: not_authorized
enum:
- bad_request
- collection_not_found
- conflict
- duplicate_collection
- duplicate_user_email
- ecommerce_not_enabled
- forbidden
- forms_require_republish
- incompatible_webhook_filter
- internal_error
- invalid_auth_version
- invalid_credentials
- invalid_domain
- invalid_user_email
- item_not_found
- missing_scopes
- no_domains
- not_authorized
- not_enterprise_plan_site
- not_enterprise_plan_workspace
- order_not_found
- resource_not_found
- too_many_requests
- unsupported_version
- unsupported_webhook_trigger_type
- user_limit_reached
- user_not_found
- users_not_enabled
- validation_error
message:
type: string
description: Error message
example: Request not authorized
externalReference:
type: string
description: Link to more information
example: ''
details:
type: array
description: Array of errors
items:
- type: string
example: Invalid email address
description: Error message
- type: object
example:
field: email
message: Invalid email address
description: Error message
example: []
example:
code: too_many_requests
message: Too many requests
externalReference:
details: []
'500':
description: We had a problem with our server. Try again later.
content:
application/json:
x-logErrorCode: 500
schema:
type: object
example:
code: not_authorized
message: Request not authorized
externalReference:
details: []
properties:
code:
type: string
description: Error code
example: not_authorized
enum:
- bad_request
- collection_not_found
- conflict
- duplicate_collection
- duplicate_user_email
- ecommerce_not_enabled
- forbidden
- forms_require_republish
- incompatible_webhook_filter
- internal_error
- invalid_auth_version
- invalid_credentials
- invalid_domain
- invalid_user_email
- item_not_found
- missing_scopes
- no_domains
- not_authorized
- not_enterprise_plan_site
- not_enterprise_plan_workspace
- order_not_found
- resource_not_found
- too_many_requests
- unsupported_version
- unsupported_webhook_trigger_type
- user_limit_reached
- user_not_found
- users_not_enabled
- validation_error
message:
type: string
description: Error message
example: Request not authorized
externalReference:
type: string
description: Link to more information
example: ''
details:
type: array
description: Array of errors
items:
- type: string
example: Invalid email address
description: Error message
- type: object
example:
field: email
message: Invalid email address
description: Error message
example: []
example:
code: internal_error
message: An Internal Error occurred
externalReference:
details: []
/sites/{site_id}/components/{component_id}/dom:
get:
x-fern-sdk-group-name: components
x-fern-sdk-method-name: get-content
security:
- OAuth2:
- components:read
operationId: get-component-content
summary: Webflow Get Component Content
description: 'Get static content from a component definition. This includes text nodes, image nodes, select nodes, text input nodes, submit button nodes, and nested component instances.
To retrieve dynamic content set by component properties, use the [get component properties](/data/reference/pages-and-components/components/get-properties) endpoint.
<Note>If you do not provide a Locale ID in your request, the response will return any content that can be localized from the Primary locale.</Note>
Required scope | `components:read`
'
tags:
- Components
parameters:
- name: site_id
in: path
description: Unique identifier for a Site
example: 580e63e98c9a982ac9b8b741
required: true
schema:
type: string
format: objectid
default:
- name: component_id
in: path
description: Unique identifier for a Component
example: 8505ba55-ef72-629e-f85c-33e4b703d48b
required: true
schema:
type: string
default:
- name: localeId
in: query
allowEmptyValue: true
example: 65427cf400e02b306eaa04a0
description: 'Unique identifier for a specific Locale.
[Lear more about localization.](/data/v2.0.0/docs/working-with-localization)
'
schema:
type: string
- name: branchId
in: query
allowEmptyValue: true
description: Scope the operation to work on a specific branch.
example: 68026fa68ef6dc744c75b833
required: false
schema:
type: string
format: objectid
- in: query
allowEmptyValue: true
name: limit
example: 100
description: 'Maximum number of records to be returned (max limit: 100)'
required: false
schema:
type: integer
- in: query
example: 0
allowEmptyValue: true
name: offset
description: Offset used for pagination if the results have more than limit records
required: false
schema:
type: integer
responses:
'200':
description: Request was successful
content:
application/json:
schema:
description: 'The Component DOM schema represents the content structure of a component. Similar to Page DOM, it captures various content nodes and their associated attributes, but specifically for a component''s structure. Each node has a unique identifier and can contain text, images, select or text inputs, submit buttons, or nested component instances.
'
type: object
example:
componentId: 69118560-d0bc-15fc-bbf8-b8fe5f6535b5
nodes:
- id: a245c12d-995b-55ee-5ec7-aa36a6cad623
type: text
text:
html: <h1>The Hitchhiker's Guide to the Galaxy</h1>
text: The Hitchhiker's Guide to the Galaxy
attributes: {}
- id: a245c12d-995b-55ee-5ec7-aa36a6cad627
type: text
text:
html: <div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>
text:
attributes:
number: forty two
- id: a245c12d-995b-55ee-5ec7-aa36a6cad629
type: image
image:
alt: Marvin, the Paranoid Android
assetId: 659595234426a9fcbad57043
attributes: {}
- id: 6e468d51-8942-f7be-34cc-347b0e24e118
type: text-input
placeholder: Search…
attributes: {}
- id: 82cdcd0b-b9c7-0ddc-0519-bc1fa02de26e
type: select
choices:
- text: Magrathea
value: Magrathea
- text: Earth
value: mostly-harmless
- text: Vogsphere
value: Vogsphere
attributes: {}
- id: 9fa3a9c4-87d4-19b0-95f7-1b0b099f82ab
type: submit-button
waitingText: Please wait...
value: Subscribe
attributes: {}
- id: a245c12d-995b-55ee-5ec7-aa36a6cad631
type: component-instance
componentId: 6258612d1ee792848f805dcf
propertyOverrides:
- propertyId: a245c12d-995b-55ee-5ec7-aa36a6cad633
type: Plain Text
text:
html:
text: Don't Panic!
- propertyId: a245c12d-995b-55ee-5ec7-aa36a6cad635
type: Rich Text
text:
html: <div><p>Always know where your towel is.</p></div>
text:
pagination:
limit: 7
offset: 0
total: 7
properties:
componentId:
type: string
description: Component ID
nodes:
type: array
items:
description: 'A generic representation of a content element within the Document Object Model (DOM). Each node has a unique identifier and a specific type that determines its content structure and attributes.
'
type: object
properties:
oneOf:
- title: Text Node DOM
description: 'Represents text content within the DOM. It contains both the raw text and its HTML representation. Additional attributes can be associated with the text for styling or other purposes.
'
type: object
required:
- id
- type
- text
properties:
id:
type: string
description: Node UUID
type:
description: The type of the node
type: string
enum:
- text
default: text
text:
description: The text content of the node
properties:
html:
description: The HTML content of the text node.
type: string
nullable: true
text:
description: The raw text content of the text node.
type: string
nullable: true
attributes:
type: object
description: The custom attributes of the node
additionalProperties:
type: string
- title: Image Node
description: 'Represents an image within the DOM. It contains details about the image, such as its alternative text (alt) for accessibility and an asset identifier for fetching the actual image resource. Additional attributes can be associated with the image for styling or other purposes.
'
type: object
required:
- id
- type
- image
properties:
id:
type: string
description: Node UUID
type:
type: string
description: The type of the node
enum:
- image
default: image
image:
description: The image details of the node
properties:
alt:
type: string
nullable: true
assetId:
type: string
attributes:
type: object
description: The custom attributes of the node
additionalProperties:
type: string
- title: Component Node
description: 'Represents a component instance within the DOM. It contains details about the component instance, such as its type and properties.
'
type: object
required:
- id
- type
- componentId
- propertyOverrides
properties:
id:
type: string
description: The unique identifier of the component instance node
type:
description: The type of the node
type: string
enum:
- component-instance
default: component-instance
componentId:
type: string
description: The unique identifier of the component
propertyOverrides:
description: List of component properties with overrides for a component instance.
type: array
items:
description: 'Represents a property of a component instance in the DOM. A property contains a list of both the raw text and the HTML representation, allowing for flexibility in rendering and processing. Additional attributes can be associated with the text for styling or other purposes.
'
type: object
properties:
propertyId:
type: string
description: The ID of the property.
example: 7dd14c08-2e96-8d3d-2b19-b5c03642a0f0
type:
de
# --- truncated at 32 KB (127 KB total) ---
# Full source: https://raw.githubusercontent.com/api-evangelist/webflow/refs/heads/main/openapi/webflow-components-openapi.yml