> This page is for Data API, version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/data/v2.0.0/llms.txt
> - v2 Beta: https://developers.webflow.com/data/v2.0.0-beta/llms.txt
> - v1: https://developers.webflow.com/data/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Localizing components

> How to use Component APIs to localize component definitions and component instances in secondary locales

Components are reusable design elements that can be instanced across your site.

## Workflows

Webflow enables you to localize both a component definition and component instances via the Data API.

#### [Localize component definitions](#component-definitions)

Localize the static content of a component definition across an **entire
locale**

#### [Localize component instances](#component-instances)

Localize a component instance on a **specific page** by modifying its properties.

## Key concepts

To understand how to localize components, you'll need to understand the key concepts of components in Webflow.

#### Component definition

A component definition serves as the blueprint for a component. It contains the component's static content, like text and images, and defines the component's properties: customizable fields that allow for dynamic content. When you change a component definition, the updates apply to all instances of that component, unless an instance has a property override.

A component definition contains two types of localizable content:

* **Static content**: Text nodes, form elements, and nested component instances
* **Property defaults**: Default text values for component properties

  ![Component Definition](/_fern-files/webflow.docs.buildwithfern.com/f260ff5cfaea4ba95d769501590b4be09d6b0faa61c6753f18451fb5c51fc0d7/products/data/pages/Localization/assets/Component-Definition-Light.svg)

#### Component instance

A **component instance** is a live copy of a component definition placed on a page. While the definition acts as a template, an instance is the actual element that users see.

By default, an instance inherits all content and property values directly from its component definition. If you change these in the definition, all instances update automatically.

However, you can customize an instance by applying a **property override**. An override is a unique value for a property that applies only to a single instance. For example, if you have a "Job Card" component, you can use overrides to give each instance on your "Jobs" page a different title, description, and location.

**You can only localize property overrides of a component instance.** To localize the default properties of a component, you need to update the component definition.

![Component Instance](/_fern-files/webflow.docs.buildwithfern.com/192b968932d408573ab17bb7beb30723fecf8d6a035f47bc400c75d2d3aebcda/products/data/pages/Localization/assets/Component-Instance-Light.svg)

### Localizable content

To completely localize your site, you'll need to localize all three types of component content.

| Content Type           | Scope                  | Description                                                           |
| :--------------------- | :--------------------- | :-------------------------------------------------------------------- |
| **Property Overrides** | Page-specific Instance | Custom values applied to a single component instance.                 |
| **Property Defaults**  | Site-wide Definition   | Default values for properties, used by instances without an override. |
| **Static Content**     | Site-wide Definition   | Fixed text content that's part of the component's structure.          |

Some key points to remember when localizing component content:

* Property overrides only affect a specific component instance on a page
* Default properties affect all instances that don't have overrides
* Static content affects all instances across the site
* Only content bound to component properties can be overridden at the instance or per-page level

## Component definitions

Component definitions contain two types of localizable content:

#### [Static content](#localize-static-content)

Text nodes, form elements, and nested component instances

#### [Property defaults](#localize-default-properties)

Default values for component properties

### Localize static content

To localize static content, you'll first need to get the content of the selected component, and then update the content in a secondary locale.

#### List site components

Use the [List Components](/data/reference/pages-and-components/components/list) endpoint
to get a list of all components on your site.

#### Get static content of a component

Use the [Get Component Content](/data/reference/pages-and-components/components/get-content)
endpoint to get the static content of a selected component definition.

#### Update static content of a component

Use the [Update Component Content](/data/reference/pages-and-components/components/update-content)
endpoint to update the static content of the selected component definition in a secondary locale.

#### List site components

Use the [List Components](/data/reference/pages-and-components/components/list) endpoint to get a list of all components on your site.

##### Request

**`cURL`**

```curl cURL
curl -G https://api.webflow.com/v2/sites/<SITE_ID>/components \
     -H "Authorization: Bearer <token>" \
     -d limit=100 \
     -d offset=0
```

**`Node.js`**

```javascript Node.js
const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
const components = await client.components.list("YOUR_SITE_ID");
```

##### Response

The endpoint returns a `components` array with the details of each component definition on your site. The response also includes a `pagination` object for pagination through results over the 100 item limit.

### Schema (`response.body`)

```yaml
openapi: 3.1.0
info:
  title: API
  version: 1.0.0
paths:
  /sites/{site_id}/components:
    get:
      operationId: subpackageComponents_list
      summary: List Components
      description: |
        List of all components for a site.

        Required scope | `components:read`
      tags:
        - subpackage_components
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: branchId
          in: query
          description: Scope the operation to work on a specific branch.
          required: false
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          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:
                $ref: '#/components/schemas/components_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/List-componentsRequestBadRequestError'
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/List-componentsRequestUnauthorizedError'
        '404':
          description: Requested resource not found
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/List-componentsRequestNotFoundError'
        '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.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/List-componentsRequestTooManyRequestsError
        '500':
          description: We had a problem with our server. Try again later.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/List-componentsRequestInternalServerError'
tags:
  - name: subpackage_components
servers:
  - url: https://api.webflow.com/v2
    description: Data API
components:
  schemas:
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaComponentsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Component
        name:
          type: string
          description: Component Name
        group:
          type: string
          description: The group that the component belongs to
        description:
          type: string
          description: Component Description
        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.
      required:
        - id
      description: The Component object
      title: >-
        SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaComponentsItems
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: integer
          description: The limit used for pagination
        offset:
          type: integer
          description: The offset used for pagination
        total:
          type: integer
          description: The total number of records
      required:
        - limit
        - offset
        - total
      description: Pagination object
      title: SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaPagination
    components_list_Response_200:
      type: object
      properties:
        components:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaComponentsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object
      description: List of Components on a site.
      title: components_list_Response_200
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode:
      type: string
      enum:
        - aeo_input_validation
        - analyze_filter_conflict
        - analyze_input_validation
        - analyze_unsupported_filter
        - bad_request
        - batch_too_large
        - before_historical_floor
        - billing_provider_unavailable
        - branch_merge_conflict
        - branch_merge_in_progress
        - branch_not_found
        - branch_publish_failed
        - branch_sync_pending
        - branch_task_not_found
        - branch_update_in_progress
        - brand_not_configured
        - cannot_invite_self
        - cannot_remove_self
        - cannot_update_user_role
        - client_seats_unavailable
        - collection_not_found
        - competitors_not_configured
        - conflict
        - conflicting_scope_filters
        - default_site_role_required
        - duplicate_collection
        - duplicate_member_in_request
        - duplicate_site_in_request
        - duplicate_user_email
        - ecommerce_not_enabled
        - end_time_too_recent
        - enterprise_provisioning_upstream_error
        - enterprise_self_provisioning_not_entitled
        - forbidden
        - forms_require_republish
        - incompatible_webhook_filter
        - insufficient_permissions
        - insufficient_seats
        - internal_error
        - invalid_auth_version
        - invalid_credentials
        - invalid_domain
        - invalid_resolution
        - invalid_site_role
        - invalid_time_range
        - invalid_user_email
        - invalid_workspace_role
        - invite_expired
        - invite_role_conflict
        - item_not_found
        - managed_by_scim
        - member_already_has_access
        - member_has_no_site_access
        - member_is_paying_client
        - member_not_found
        - member_not_removable
        - member_role_conflict
        - missing_scopes
        - no_domains
        - no_members_or_invites
        - not_authorized
        - not_enterprise_plan_site
        - not_enterprise_plan_workspace
        - optimize_before_historical_floor
        - optimize_input_validation
        - optimize_invalid_interval
        - optimize_unknown_dimension
        - optimize_unknown_goal
        - optimize_unknown_optimization
        - optimize_unsupported_group_by
        - order_not_found
        - page_cannot_branch
        - resource_not_found
        - service_unavailable
        - site_access_not_applicable_to_member
        - site_access_not_scopable_for_role
        - site_access_roles_must_match
        - site_not_in_workspace
        - site_role_id_invalid
        - site_role_id_not_allowed
        - site_role_id_required
        - site_specific_access_disabled
        - site_specific_access_not_entitled
        - time_range_too_wide
        - too_many_requests
        - unsupported_bot_provider
        - unsupported_version
        - unsupported_webhook_trigger_type
        - user_limit_reached
        - user_not_found
        - users_not_enabled
        - validation_error
        - workspace_invite_not_found
        - workspace_member_managed_by_scim
        - workspace_member_not_found
        - workspace_member_not_removable
        - workspace_role_not_grantable
      description: Error code
      title: SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems:
      oneOf:
        - type: string
        - type: object
          additionalProperties:
            description: Any type
      title: >-
        SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
    List-componentsRequestBadRequestError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestBadRequestError
    List-componentsRequestUnauthorizedError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestUnauthorizedError
    List-componentsRequestNotFoundError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestNotFoundError
    List-componentsRequestTooManyRequestsError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestTooManyRequestsError
    List-componentsRequestInternalServerError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestInternalServerError

```

**`Response`**

```json title="Response"
{
  "components": [
    {
      "id": "1fa6f97b-84f7-2db3-29cb-1275161e432f",
      "name": "Navbar"
    },
    {
      "id": "9fa3a9c4-87d4-19b0-95f7-1b0b099f82a0",
      "name": "Footer"
    },
    {
      "id": "db278ae3-20d1-6657-c0c9-083a38fbc2c4",
      "name": "Locale dropdown"
    },
    {
      "id": "d2de2e85-bab1-8dbb-1648-2bbedc5417dd",
      "name": "Hero"
    },
    {
      "id": "fd06c181-43b2-e1c0-9d7f-0b332cd9905b",
      "name": "Card"
    },
    {
      "id": "33666cc8-031a-c160-37ec-654c05d48750",
      "name": "Job Card"
    },
    {
      "id": "d2154999-bbdb-8145-1152-53511d5c3f70",
      "name": "Button"
    }
  ],
  "pagination": {
    "limit": 100,
    "offset": 0,
    "total": 7
  }
}
```

#### Get static content from the primary locale

Retrieve existing static content from the primary locale for a specific component. Send a

GET

request to the [get component content](/data/reference/pages-and-components/components/get-content) endpoint, and include the component `id` in the request path.

\


##### Request

**`cURL`**

```curl cURL
curl -G https://api.webflow.com/v2/sites/<SITE_ID>/components/<COMPONENT_ID>/dom \
     -H "Authorization: Bearer <token>" \
     -d limit=100 \
     -d offset=0
```

**`Node.js`**

```javascript Node.js
const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
const content = await client.components.getContent(
  "YOUR_SITE_ID",
  "YOUR_COMPONENT_ID"
);
```

\


##### Response

The response contains a `nodes` array with the component's static content. Each node includes a `type` property that defines its content type.

### Schema (`response.body`)

```yaml
openapi: 3.1.0
info:
  title: API
  version: 1.0.0
paths:
  /sites/{site_id}/components/{component_id}/dom:
    get:
      operationId: subpackageComponents_get-content
      summary: 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:
        - subpackage_components
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: component_id
          in: path
          description: Unique identifier for a Component
          required: true
          schema:
            type: string
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Learn more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: branchId
          in: query
          description: Scope the operation to work on a specific branch.
          required: false
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: translatable
          in: query
          description: >
            Unique identifier for the secondary Locale you're translating
            **into**. Returns only content that hasn't been excluded from
            translation for that locale.


            This is independent of `localeId`, which selects which version of
            the content is returned. To fetch the source text to translate,
            request the primary locale's content and set `translatable` to the
            locale you're translating into:


            `?localeId={primary locale id}&translatable={target locale id}`


            Only exclusion rules scoped to manual translation are respected —
            rules scoped only to automatic translation don't affect this
            parameter's response.


            Omitting `translatable` returns the same response as if this
            parameter didn't exist. The value must be the id of one of the
            site's secondary locales — the primary locale id, or any other
            value, returns a `400` error. Requires translation exclusions to be
            enabled for the site; if they aren't, the request returns a `403`
            error.


            [Learn more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/components_get-content_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/Get-component-contentRequestBadRequestError
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/Get-component-contentRequestUnauthorizedError
        '404':
          description: Requested resource not found
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Get-component-contentRequestNotFoundError'
        '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.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/Get-component-contentRequestTooManyRequestsError
        '500':
          description: We had a problem with our server. Try again later.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/Get-component-contentRequestInternalServerError
tags:
  - name: subpackage_components
servers:
  - url: https://api.webflow.com/v2
    description: Data API
components:
  schemas:
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Type:
      type: string
      enum:
        - text
      default: text
      description: The type of the node
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Type
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Text:
      type: object
      properties:
        html:
          type:
            - string
            - 'null'
          description: The HTML content of the text node.
        text:
          type:
            - string
            - 'null'
          description: The raw text content of the text node.
      description: The text content of the node
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Text
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems0:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Type
          description: The type of the node
        text:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Text
          description: The text content of the node
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - text
      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.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems0
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Type:
      type: string
      enum:
        - image
      default: image
      description: The type of the node
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Type
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Image:
      type: object
      properties:
        alt:
          type:
            - string
            - 'null'
        assetId:
          type: string
      description: The image details of the node
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Image
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems1:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Type
          description: The type of the node
        image:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Image
          description: The image details of the node
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - image
      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.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems1
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2Type:
      type: string
      enum:
        - component-instance
      default: component-instance
      description: The type of the node
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2Type
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsOneOf0Type:
      type: string
      enum:
        - Plain Text
        - Rich Text
        - Alt Text
      description: The type of the property.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsOneOf0Type
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsOneOf0Text:
      type: object
      properties:
        html:
          type:
            - string
            - 'null'
          description: The HTML content of the text node.
        text:
          type:
            - string
            - 'null'
          description: The raw text content of the text node.
      description: >-
        Represents text content within the DOM. It contains both the raw text
        and its HTML representation.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsOneOf0Text
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems0:
      type: object
      properties:
        propertyId:
          type: string
          description: The ID of the property.
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsOneOf0Type
          description: The type of the property.
        label:
          type: string
          description: The label of the property in the UI.
        text:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsOneOf0Text
          description: >-
            Represents text content within the DOM. It contains both the raw
            text and its HTML representation.
      required:
        - propertyId
        - type
        - label
        - text
      description: >
        A text-based component property containing raw text and HTML
        representation.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems0
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems:
      oneOf:
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems0
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems2:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier of the component instance node
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2Type
          description: The type of the node
        componentId:
          type: string
          description: The unique identifier of the component
        propertyOverrides:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems
          description: >-
            List of component properties with overrides for a component
            instance.
      required:
        - id
        - type
        - componentId
        - propertyOverrides
      description: >
        Represents a component instance within the DOM. It contains details
        about the component instance, such as its type and properties.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems2
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf3Type:
      type: string
      enum:
        - text-input
      default: text-input
      description: The type of the node
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf3Type
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems3:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf3Type
          description: The type of the node
        placeholder:
          type: string
          description: The placeholder text of the input node
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - placeholder
      description: >
        Represents text input and textarea elements within the DOM. It contains
        the placeholder text in the input. Additional attributes can be
        associated with the text for styling or other purposes.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems3
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4Type:
      type: string
      enum:
        - select
      default: select
      description: The type of the node
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4Type
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4ChoicesItems:
      type: object
      properties:
        value:
          type: string
          description: The value of the choice when selected.
        text:
          type: string
          description: The text to display for the choice.
      required:
        - value
        - text
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4ChoicesItems
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems4:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4Type
          description: The type of the node
        choices:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4ChoicesItems
          description: The list of choices in this select node.
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - choices
      description: >
        Represents select elements within the DOM. It contains the list of
        choices in the select. Additional attributes can be associated with the
        text for styling or other purposes.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems4
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf5Type:
      type: string
      enum:
        - submit-button
      default: submit-button
      description: The type of the node
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf5Type
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems5:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf5Type
          description: The type of the node
        value:
          type: string
          description: The text content of the submit button.
        waitingText:
          type: string
          description: The text to show while the form is submitting.
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - value
        - waitingText
      description: >
        Represents submit button elements within the DOM. It contains the text
        and waiting text of the button. Additional attributes can be associated
        with the text for styling or other purposes.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems5
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf6Type:
      type: string
      enum:
        - search-button
      default: search-button
      description: The type of the node
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf6Type
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems6:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf6Type
          description: The type of the node
        value:
          type: string
          description: The text content of the search button.
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - value
      description: >
        Represents search button elements within the DOM. It contains the text
        of the button. Additional attributes can be associated with the text for
        styling or other purposes.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems6
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems:
      oneOf:
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems0
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems1
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems2
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems3
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems4
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems5
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems6
      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.
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: integer
          description: The limit used for pagination
        offset:
          type: integer
          description: The offset used for pagination
        total:
          type: integer
          description: The total number of records
      required:
        - limit
        - offset
        - total
      description: Pagination object
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaPagination
    components_get-content_Response_200:
      type: object
      properties:
        componentId:
          type: string
          description: Component ID
        nodes:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object
      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.
      title: components_get-content_Response_200
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaCode:
      type: string
      enum:
        - aeo_input_validation
        - analyze_filter_conflict
        - analyze_input_validation
        - analyze_unsupported_filter
        - bad_request
        - batch_too_large
        - before_historical_floor
        - billing_provider_unavailable
        - branch_merge_conflict
        - branch_merge_in_progress
        - branch_not_found
        - branch_publish_failed
        - branch_sync_pending
        - branch_task_not_found
        - branch_update_in_progress
        - brand_not_configured
        - cannot_invite_self
        - cannot_remove_self
        - cannot_update_user_role
        - client_seats_unavailable
        - collection_not_found
        - competitors_not_configured
        - conflict
        - conflicting_scope_filters
        - default_site_role_required
        - duplicate_collection
        - duplicate_member_in_request
        - duplicate_site_in_request
        - duplicate_user_email
        - ecommerce_not_enabled
        - end_time_too_recent
        - enterprise_provisioning_upstream_error
        - enterprise_self_provisioning_not_entitled
        - forbidden
        - forms_require_republish
        - incompatible_webhook_filter
        - insufficient_permissions
        - insufficient_seats
        - internal_error
        - invalid_auth_version
        - invalid_credentials
        - invalid_domain
        - invalid_resolution
        - invalid_site_role
        - invalid_time_range
        - invalid_user_email
        - invalid_workspace_role
        - invite_expired
        - invite_role_conflict
        - item_not_found
        - managed_by_scim
        - member_already_has_access
        - member_has_no_site_access
        - member_is_paying_client
        - member_not_found
        - member_not_removable
        - member_role_conflict
        - missing_scopes
        - no_domains
        - no_members_or_invites
        - not_authorized
        - not_enterprise_plan_site
        - not_enterprise_plan_workspace
        - optimize_before_historical_floor
        - optimize_input_validation
        - optimize_invalid_interval
        - optimize_unknown_dimension
        - optimize_unknown_goal
        - optimize_unknown_optimization
        - optimize_unsupported_group_by
        - order_not_found
        - page_cannot_branch
        - resource_not_found
        - service_unavailable
        - site_access_not_applicable_to_member
        - site_access_not_scopable_for_role
        - site_access_roles_must_match
        - site_not_in_workspace
        - site_role_id_invalid
        - site_role_id_not_allowed
        - site_role_id_required
        - site_specific_access_disabled
        - site_specific_access_not_entitled
        - time_range_too_wide
        - too_many_requests
        - unsupported_bot_provider
        - unsupported_version
        - unsupported_webhook_trigger_type
        - user_limit_reached
        - user_not_found
        - users_not_enabled
        - validation_error
        - workspace_invite_not_found
        - workspace_member_managed_by_scim
        - workspace_member_not_found
        - workspace_member_not_removable
        - workspace_role_not_grantable
      description: Error code
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaCode
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaDetailsItems:
      oneOf:
        - type: string
        - type: object
          additionalProperties:
            description: Any type
      title: >-
        SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaDetailsItems
    Get-component-contentRequestBadRequestError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-contentRequestBadRequestError
    Get-component-contentRequestUnauthorizedError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-contentRequestUnauthorizedError
    Get-component-contentRequestNotFoundError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-contentRequestNotFoundError
    Get-component-contentRequestTooManyRequestsError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-contentRequestTooManyRequestsError
    Get-component-contentRequestInternalServerError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-contentRequestInternalServerError

```

**`Get Component Content response example`**

```json title="Get Component Content response example"
{
  "componentId": "33666cc8-031a-c160-37ec-654c05d48750",
  "nodes": [
    {
      "type": "text",
      "id": "dca4e42f-0d46-0c2a-420f-6496321fec8b",
      "text": {
        "html": "<div class=\"text-block-2\">NEW&nbsp;OPPORTUNITY</div>",
        "text": "NEW OPPORTUNITY"
      },
      "attributes": {}
    },
    {
      "type": "component-instance",
      "id": "d2154999-bbdb-8145-1152-53511d5c3f73",
      "componentId": "d2154999-bbdb-8145-1152-53511d5c3f70",
      "propertyOverrides": [
        {
          "propertyId": "d9e0fd5c-e7f7-d25a-fdc4-3741ec86fc43",
          "type": "Plain Text",
          "label": "Button Text",
          "text": {
            "text": "Apply Now"
          }
        }
      ]
    }
  ],
  "pagination": {
    "limit": 100,
    "offset": 0,
    "total": 2
  }
}
```

##### Node types

\


| Node type            | Description                                                                                                                                                                                                                                                                                         |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`               | Represents text content. Including headings, [text blocks](https://help.webflow.com/hc/en-us/articles/33961346059027-Use-text-blocks-in-Webflow), [rich text](https://help.webflow.com/hc/en-us/articles/33961256808467-Rich-text-element-overview), form labels, and other text content on a page. |
| `image`              | Represents static images on a page. It contains alt text details for accessibility and the `assetId` for fetching the actual image resource.                                                                                                                                                        |
| `text-input`         | Represents a `textinput` and `textarea` fields on a form.                                                                                                                                                                                                                                           |
| `select`             | Represents a select field and its options on a form.                                                                                                                                                                                                                                                |
| `submit-button`      | Represents a submit button on a form. It contains the button text and waiting text of the button.                                                                                                                                                                                                   |
| `search-button`      | Represents the button text of a search button on a [site search element](https://help.webflow.com/hc/en-us/articles/33961242348179-Site-search).                                                                                                                                                    |
| `component-instance` | Represents a component instance on a page. Learn more about [localizing components](/data/docs/working-with-localization/localize-components) in the guide.                                                                                                                                         |

\


##### Node properties

Each node type has a specific structure and properties that define the
content it contains. However, all nodes will have `id`, `type`, and
`attributes` properties.

**`id`** `string` — required

Node UUID

---

**`type`** `enum` — required

The type of the node.

---

**`attributes`** `map from strings to strings`

The custom attributes of the node

---

\


##### Node properties by type

Each node type has a unique structure for accessing component content.

For example, a `text` node contains a `text` object, which includes `html` and `text` properties. These properties provide context for strings that can be localized. See the tabs below for the specific properties for each node type.

\


#### Text

**`id`** `string` — required

Node UUID

---

**`type`** `enum` — required

The type of the node. `text`

---

**`text`** `object` — required

The text content of the node

#### + Show 2 properties

**`html`** `string` — required

The HTML content of the node

---

**`text`** `string` — required

The text content of the node

---

---

**`attributes`** `map from strings to strings`

The custom attributes of the node

---

**`Text node example`**

```json title="Text node example"
{
  "id": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
  "type": "text",
  "text": {
    "html": "<h1>Don't Panic!</h1>",
    "text": "Don't Panic!"
  },
  "attributes": {}
},
{
  "id": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
  "type": "text",
  "text": {
    "html": "<span data-w-id=\"b3107...\">$9.99</span>",
    "text": "$9.99"
  },
  "attributes": {}
}
```

> **Nested HTML tags**
>
> The `text.html` property may contain nested HTML tags with `data-w-id` attributes (e.g., `data-w-id="some-unique-identifier"`). Retain these identifiers when updating page content in secondary locales to preserve custom attributes and links on inner HTML elements.

#### Image

**`id`** `string` — required

Node UUID

---

**`type`** `enum` — required

The type of the node. `image`

---

**`image`** `object` — required

The image content of the node

#### + Show 2 properties

**`alt`** `string` — required

The alt text for the image

---

**`assetId`** `string` — required

The ID of the asset for the image

---

---

**`attributes`** `map from strings to strings`

The custom attributes of the node

---

**`Image node example`**

```json title="Image node example"
{
  "id": "a245c12d-995b-55ee-5ec7-aa36a6cad629",
  "type": "image",
  "image": {
    "alt": "Marvin, the Paranoid Android",
    "assetId": "659595234426a9fcbad57043"
  },
  "attributes": {}
}
```

> **Updating images isn't supported by the API**
>
> Currently, the API returns `image` nodes in the response body of a
>
> GET
>
> static contnet request. However, updating images isn't supported by the API. To update images, you'll need to update the image asset in the Webflow designer.

#### Text Input

**`id`** `string` — required

Node UUID

---

**`type`** `enum` — required

The type of the node. `text-input`

---

**`placeholder`** `string`

The placeholder text for the input field

---

**`attributes`** `map from strings to strings`

The custom attributes of the node

---

**`Text input node example`**

```json title="Text input node example"
{
  "id": "a245c12d-995b-55ee-5ec7-aa36a6cad642",
  "type": "text-input",
  "placeholder": "Enter something here...",
  "attributes": {}
}
```

#### Select

**`id`** `string` — required

Node UUID

---

**`type`** `enum` — required

The type of the node. `select`

---

**`choices`** `list of objects` — required

The choices for the select field

#### + Show 2 properties

**`value`** `string` — required

The value of the choice

---

**`text`** `string` — required

The text of the choice

---

---

**`attributes`** `map from strings to strings`

The custom attributes of the node

---

**`Select node example`**

```json title="Select node example"
{
  "id": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
  "type": "select",
  "choices": [
    {
      "value": "choice-1",
      "text": "First choice"
    },
    {
      "value": "choice-2",
      "text": "Second choice"
    }
  ],
  "attributes": {}
}
```

#### Submit Button

**`id`** `string` — required

Node UUID

---

**`type`** `enum` — required

The type of the node. `submit-button`

---

**`value`** `string` — required

The text content of the button

---

**`waitingText`** `string`

The text content of the button while submitting

---

**`attributes`** `map from strings to strings`

The custom attributes of the node

---

**`Submit button node example`**

```json title="Submit button node example"
{
  "id": "a245c12d-995b-55ee-5ec7-aa36a6cad671",
  "type": "submit-button",
  "value": "Submit",
  "waitingText": "Submitting...",
  "attributes": {}
}
```

#### Component Instance

**`id`** `string` — required

Node UUID

---

**`type`** `enum` — required

The type of the node. `component-instance`

---

**`componentId`** `string` — required

The ID of the component

---

**`propertyOverrides`** `array`

The property overrides for the component instance

#### + Show 4 properties

**`propertyId`** `string` — required

The ID of the property

---

**`type`** `string` — required

The type of the property

---

**`label`** `string` — required

The label of the property

---

**`text`** `object` — required

The text content of the property

#### + Show 2 properties

**`html`** `string`

The HTML content of the property

---

**`text`** `string`

The text content of the property

---

---

---

**`Component instance node example`**

```json title="Component instance node example"
{
  "id": "a245c12d-995b-55ee-5ec7-aa36a6cad631",
  "type": "component-instance",
  "componentId": "6258612d1ee792848f805dcf",
    "propertyOverrides": [
      {
        "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad633",
      "type": "Plain Text",
      "label": "Catchphrase",
      "text": {
        "html": null,
        "text": "Don't Panic!"
      }
      },
      {
        "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
      "type": "Rich Text",
      "label": "Tagline",
      "text": {
        "html": "<div><p>Always know where your towel is.</p></div>",
        "text": null
      }
    }
  ]
}
```

##### Nested component instances

A nested component instance is a component instance that's permanently included within another component's definition.

For example, a Job Card component might always include a Button component as part of its design. This Button will be a nested component instance that has its own properties, which can be overridden in the Job Card's definition.

![Nested component instance](/_fern-img/942180afed092b4f6508afb2e526e08b1aa62b81f299138b5437c22872dbf613.webp)

The

Apply Now

button is a nested component
instance that has its own properties. In the Button instance, the "button
text" property is overridden from its default value of "Click here" to
"Apply Now." This is indicated by the blue overlay on the "Button Text"
label. Now that the button text property is overridden, it's localizable.

![Nested component instance](/_fern-img/18b1f812066a7876279fc90285a16439683374c33ce92de886f383e6dd07a038.webp)

#### Update static content

After translating the content you received from your earlier request, update it with the [update component content endpoint](/data/reference/pages-and-components/components/update-content), passing the target `localeId` as a query parameter and the translated `nodes` in the request body.

You only need to include the `nodeId` and the content property for that specific node type.

##### Request

**`cURL`**

```curl cURL
curl -X POST https://api.webflow.com/v2/sites/<SITE_ID>/components/<COMPONENT_ID>/dom?localeId=<SECONDARY_LOCALE_ID> \
     -H "Authorization: Bearer <token>" \
     -H "Content-Type: application/json" \
     -d '{
       "nodes": [
        {
          "nodeId": "dca4e42f-0d46-0c2a-420f-6496321fec8b",
          "text": "<div class=\"text-block-2\">NUEVA&nbsp;OPORTUNIDAD</div>"
        },
        {
          "nodeId": "d2154999-bbdb-8145-1152-53511d5c3f73",
          "propertyOverrides": [
            {
              "propertyId": "d9e0fd5c-e7f7-d25a-fdc4-3741ec86fc43",
              "text": "Aplicar ahora"
            }
          ]
        }
      ]
     }'
```

**`Node.js`**

```javascript Node.js
const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.components.updateContent("YOUR_COMPONENT_ID", {
  localeId: "SECONDARY_LOCALE_ID",
  nodes: [
    {
      nodeId: "dca4e42f-0d46-0c2a-420f-6496321fec8b",
      text: '<div class="text-block-2">NUEVA&nbsp;OPORTUNIDAD</div>',
    },
    {
      nodeId: "d2154999-bbdb-8145-1152-53511d5c3f73",
      propertyOverrides: [
        {
          propertyId: "d9e0fd5c-e7f7-d25a-fdc4-3741ec86fc43",
          text: "Aplicar ahora",
        },
      ],
    },
  ],
});
```

##### Response

A successful response will return an object with and `error` property with an empty array.

### Localize default properties

Component properties are typed variables that make component content dynamic and customizable per instance. When content is bound to a property, each component instance can have different values for that property.

Component definitions can store **default values** for properties, which are used as fallbacks when instances don't have property overrides. To localize the default values follow the steps below.

#### List site components

Use the [List Components](/data/reference/pages-and-components/components/list) endpoint
to get a list of all components on your site.

#### Get component properties

Use the [Get Component Properties](/data/reference/pages-and-components/components/get-properties)
endpoint to get the default properties of the selected component definition.

#### Update component properties

Use the [Update Component Properties](/data/reference/pages-and-components/components/update-properties)
endpoint to update the default properties of the selected component
definition.

#### List site components

Use the [List Components](/data/reference/pages-and-components/components/list) endpoint to get a list of all components on your site.

##### Request

**`cURL`**

```curl cURL
curl -G https://api.webflow.com/v2/sites/<SITE_ID>/components \
     -H "Authorization: Bearer <token>" \
     -d limit=100 \
     -d offset=0
```

**`Node.js`**

```javascript Node.js
const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
const components = await client.components.list("YOUR_SITE_ID");
```

##### Response

The endpoint returns a `components` array with the details of each component definition on your site. The response also includes a `pagination` object for pagination through results over the 100 item limit.

### Schema (`response.body`)

```yaml
openapi: 3.1.0
info:
  title: API
  version: 1.0.0
paths:
  /sites/{site_id}/components:
    get:
      operationId: subpackageComponents_list
      summary: List Components
      description: |
        List of all components for a site.

        Required scope | `components:read`
      tags:
        - subpackage_components
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: branchId
          in: query
          description: Scope the operation to work on a specific branch.
          required: false
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          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:
                $ref: '#/components/schemas/components_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/List-componentsRequestBadRequestError'
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/List-componentsRequestUnauthorizedError'
        '404':
          description: Requested resource not found
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/List-componentsRequestNotFoundError'
        '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.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/List-componentsRequestTooManyRequestsError
        '500':
          description: We had a problem with our server. Try again later.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/List-componentsRequestInternalServerError'
tags:
  - name: subpackage_components
servers:
  - url: https://api.webflow.com/v2
    description: Data API
components:
  schemas:
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaComponentsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Component
        name:
          type: string
          description: Component Name
        group:
          type: string
          description: The group that the component belongs to
        description:
          type: string
          description: Component Description
        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.
      required:
        - id
      description: The Component object
      title: >-
        SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaComponentsItems
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: integer
          description: The limit used for pagination
        offset:
          type: integer
          description: The offset used for pagination
        total:
          type: integer
          description: The total number of records
      required:
        - limit
        - offset
        - total
      description: Pagination object
      title: SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaPagination
    components_list_Response_200:
      type: object
      properties:
        components:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaComponentsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object
      description: List of Components on a site.
      title: components_list_Response_200
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode:
      type: string
      enum:
        - aeo_input_validation
        - analyze_filter_conflict
        - analyze_input_validation
        - analyze_unsupported_filter
        - bad_request
        - batch_too_large
        - before_historical_floor
        - billing_provider_unavailable
        - branch_merge_conflict
        - branch_merge_in_progress
        - branch_not_found
        - branch_publish_failed
        - branch_sync_pending
        - branch_task_not_found
        - branch_update_in_progress
        - brand_not_configured
        - cannot_invite_self
        - cannot_remove_self
        - cannot_update_user_role
        - client_seats_unavailable
        - collection_not_found
        - competitors_not_configured
        - conflict
        - conflicting_scope_filters
        - default_site_role_required
        - duplicate_collection
        - duplicate_member_in_request
        - duplicate_site_in_request
        - duplicate_user_email
        - ecommerce_not_enabled
        - end_time_too_recent
        - enterprise_provisioning_upstream_error
        - enterprise_self_provisioning_not_entitled
        - forbidden
        - forms_require_republish
        - incompatible_webhook_filter
        - insufficient_permissions
        - insufficient_seats
        - internal_error
        - invalid_auth_version
        - invalid_credentials
        - invalid_domain
        - invalid_resolution
        - invalid_site_role
        - invalid_time_range
        - invalid_user_email
        - invalid_workspace_role
        - invite_expired
        - invite_role_conflict
        - item_not_found
        - managed_by_scim
        - member_already_has_access
        - member_has_no_site_access
        - member_is_paying_client
        - member_not_found
        - member_not_removable
        - member_role_conflict
        - missing_scopes
        - no_domains
        - no_members_or_invites
        - not_authorized
        - not_enterprise_plan_site
        - not_enterprise_plan_workspace
        - optimize_before_historical_floor
        - optimize_input_validation
        - optimize_invalid_interval
        - optimize_unknown_dimension
        - optimize_unknown_goal
        - optimize_unknown_optimization
        - optimize_unsupported_group_by
        - order_not_found
        - page_cannot_branch
        - resource_not_found
        - service_unavailable
        - site_access_not_applicable_to_member
        - site_access_not_scopable_for_role
        - site_access_roles_must_match
        - site_not_in_workspace
        - site_role_id_invalid
        - site_role_id_not_allowed
        - site_role_id_required
        - site_specific_access_disabled
        - site_specific_access_not_entitled
        - time_range_too_wide
        - too_many_requests
        - unsupported_bot_provider
        - unsupported_version
        - unsupported_webhook_trigger_type
        - user_limit_reached
        - user_not_found
        - users_not_enabled
        - validation_error
        - workspace_invite_not_found
        - workspace_member_managed_by_scim
        - workspace_member_not_found
        - workspace_member_not_removable
        - workspace_role_not_grantable
      description: Error code
      title: SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems:
      oneOf:
        - type: string
        - type: object
          additionalProperties:
            description: Any type
      title: >-
        SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
    List-componentsRequestBadRequestError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestBadRequestError
    List-componentsRequestUnauthorizedError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestUnauthorizedError
    List-componentsRequestNotFoundError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestNotFoundError
    List-componentsRequestTooManyRequestsError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestTooManyRequestsError
    List-componentsRequestInternalServerError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: List-componentsRequestInternalServerError

```

**`Response`**

```json title="Response"
{
  "components": [
    {
      "id": "1fa6f97b-84f7-2db3-29cb-1275161e432f",
      "name": "Navbar"
    },
    {
      "id": "9fa3a9c4-87d4-19b0-95f7-1b0b099f82a0",
      "name": "Footer"
    },
    {
      "id": "db278ae3-20d1-6657-c0c9-083a38fbc2c4",
      "name": "Locale dropdown"
    },
    {
      "id": "d2de2e85-bab1-8dbb-1648-2bbedc5417dd",
      "name": "Hero"
    },
    {
      "id": "fd06c181-43b2-e1c0-9d7f-0b332cd9905b",
      "name": "Card"
    },
    {
      "id": "33666cc8-031a-c160-37ec-654c05d48750",
      "name": "Job Card"
    },
    {
      "id": "d2154999-bbdb-8145-1152-53511d5c3f70",
      "name": "Button"
    }
  ],
  "pagination": {
    "limit": 100,
    "offset": 0,
    "total": 7
  }
}
```

#### Get component properties

Retrieve component property definitions and their default values using the [Get Component Properties](/data/reference/pages-and-components/components/get-properties) endpoint.

##### Request

**`cURL`**

```curl cURL
curl -G https://api.webflow.com/v2/sites/<SITE_ID>/components/<COMPONENT_ID>/properties \
     -H "Authorization: Bearer <token>"
```

**`Node.js`**

```javascript Node.js
const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
const properties = await client.components.getProperties("YOUR_COMPONENT_ID");
```

##### Response

The response will return an object with the `componentId`, `properties`, and `pagination` properties. Each property will have a type and text property, which contains the property's default text value.

### Schema (`response.body`)

```yaml
openapi: 3.1.0
info:
  title: API
  version: 1.0.0
paths:
  /sites/{site_id}/components/{component_id}/properties:
    get:
      operationId: subpackageComponents_get-properties
      summary: Get Component Properties
      description: >
        Get the default property values of a component definition.


        <Note>If you do not include a `localeId` in your request, the response
        will return any properties that can be localized from the Primary
        locale.</Note>


        Required scope | `components:read`
      tags:
        - subpackage_components
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: component_id
          in: path
          description: Unique identifier for a Component
          required: true
          schema:
            type: string
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Learn more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: branchId
          in: query
          description: Scope the operation to work on a specific branch.
          required: false
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: translatable
          in: query
          description: >
            Unique identifier for the secondary Locale you're translating
            **into**. Returns only content that hasn't been excluded from
            translation for that locale.


            This is independent of `localeId`, which selects which version of
            the content is returned. To fetch the source text to translate,
            request the primary locale's content and set `translatable` to the
            locale you're translating into:


            `?localeId={primary locale id}&translatable={target locale id}`


            Only exclusion rules scoped to manual translation are respected —
            rules scoped only to automatic translation don't affect this
            parameter's response.


            Omitting `translatable` returns the same response as if this
            parameter didn't exist. The value must be the id of one of the
            site's secondary locales — the primary locale id, or any other
            value, returns a `400` error. Requires translation exclusions to be
            enabled for the site; if they aren't, the request returns a `403`
            error.


            [Learn more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/components_get-properties_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/Get-component-propertiesRequestBadRequestError
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/Get-component-propertiesRequestUnauthorizedError
        '404':
          description: Requested resource not found
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/Get-component-propertiesRequestNotFoundError
        '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.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/Get-component-propertiesRequestTooManyRequestsError
        '500':
          description: We had a problem with our server. Try again later.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/Get-component-propertiesRequestInternalServerError
tags:
  - name: subpackage_components
servers:
  - url: https://api.webflow.com/v2
    description: Data API
components:
  schemas:
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsOneOf0Type:
      type: string
      enum:
        - Plain Text
        - Rich Text
        - Alt Text
      description: The type of the property.
      title: >-
        SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsOneOf0Type
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsOneOf0Text:
      type: object
      properties:
        html:
          type:
            - string
            - 'null'
          description: The HTML content of the text node.
        text:
          type:
            - string
            - 'null'
          description: The raw text content of the text node.
      description: >-
        Represents text content within the DOM. It contains both the raw text
        and its HTML representation.
      title: >-
        SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsOneOf0Text
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItems0:
      type: object
      properties:
        propertyId:
          type: string
          description: The ID of the property.
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsOneOf0Type
          description: The type of the property.
        label:
          type: string
          description: The label of the property in the UI.
        text:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsOneOf0Text
          description: >-
            Represents text content within the DOM. It contains both the raw
            text and its HTML representation.
      required:
        - propertyId
        - type
        - label
        - text
      description: >
        A text-based component property containing raw text and HTML
        representation.
      title: >-
        SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItems0
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItems:
      oneOf:
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItems0
      title: >-
        SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItems
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: integer
          description: The limit used for pagination
        offset:
          type: integer
          description: The offset used for pagination
        total:
          type: integer
          description: The total number of records
      required:
        - limit
        - offset
        - total
      description: Pagination object
      title: >-
        SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaPagination
    components_get-properties_Response_200:
      type: object
      properties:
        componentId:
          type: string
          description: Component ID
        properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object
      description: >
        The Component Properties schema represents a list of properties that
        store text content. Each property has a unique identifier and can be of
        different types like plain text or rich text. The schema also provides
        pagination details for scenarios where there more properties than the
        limit.
      title: components_get-properties_Response_200
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaCode:
      type: string
      enum:
        - aeo_input_validation
        - analyze_filter_conflict
        - analyze_input_validation
        - analyze_unsupported_filter
        - bad_request
        - batch_too_large
        - before_historical_floor
        - billing_provider_unavailable
        - branch_merge_conflict
        - branch_merge_in_progress
        - branch_not_found
        - branch_publish_failed
        - branch_sync_pending
        - branch_task_not_found
        - branch_update_in_progress
        - brand_not_configured
        - cannot_invite_self
        - cannot_remove_self
        - cannot_update_user_role
        - client_seats_unavailable
        - collection_not_found
        - competitors_not_configured
        - conflict
        - conflicting_scope_filters
        - default_site_role_required
        - duplicate_collection
        - duplicate_member_in_request
        - duplicate_site_in_request
        - duplicate_user_email
        - ecommerce_not_enabled
        - end_time_too_recent
        - enterprise_provisioning_upstream_error
        - enterprise_self_provisioning_not_entitled
        - forbidden
        - forms_require_republish
        - incompatible_webhook_filter
        - insufficient_permissions
        - insufficient_seats
        - internal_error
        - invalid_auth_version
        - invalid_credentials
        - invalid_domain
        - invalid_resolution
        - invalid_site_role
        - invalid_time_range
        - invalid_user_email
        - invalid_workspace_role
        - invite_expired
        - invite_role_conflict
        - item_not_found
        - managed_by_scim
        - member_already_has_access
        - member_has_no_site_access
        - member_is_paying_client
        - member_not_found
        - member_not_removable
        - member_role_conflict
        - missing_scopes
        - no_domains
        - no_members_or_invites
        - not_authorized
        - not_enterprise_plan_site
        - not_enterprise_plan_workspace
        - optimize_before_historical_floor
        - optimize_input_validation
        - optimize_invalid_interval
        - optimize_unknown_dimension
        - optimize_unknown_goal
        - optimize_unknown_optimization
        - optimize_unsupported_group_by
        - order_not_found
        - page_cannot_branch
        - resource_not_found
        - service_unavailable
        - site_access_not_applicable_to_member
        - site_access_not_scopable_for_role
        - site_access_roles_must_match
        - site_not_in_workspace
        - site_role_id_invalid
        - site_role_id_not_allowed
        - site_role_id_required
        - site_specific_access_disabled
        - site_specific_access_not_entitled
        - time_range_too_wide
        - too_many_requests
        - unsupported_bot_provider
        - unsupported_version
        - unsupported_webhook_trigger_type
        - user_limit_reached
        - user_not_found
        - users_not_enabled
        - validation_error
        - workspace_invite_not_found
        - workspace_member_managed_by_scim
        - workspace_member_not_found
        - workspace_member_not_removable
        - workspace_role_not_grantable
      description: Error code
      title: >-
        SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaCode
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaDetailsItems:
      oneOf:
        - type: string
        - type: object
          additionalProperties:
            description: Any type
      title: >-
        SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaDetailsItems
    Get-component-propertiesRequestBadRequestError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-propertiesRequestBadRequestError
    Get-component-propertiesRequestUnauthorizedError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-propertiesRequestUnauthorizedError
    Get-component-propertiesRequestNotFoundError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-propertiesRequestNotFoundError
    Get-component-propertiesRequestTooManyRequestsError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-propertiesRequestTooManyRequestsError
    Get-component-propertiesRequestInternalServerError:
      type: object
      properties:
        code:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaCode
          description: Error code
        message:
          type: string
          description: Error message
        externalReference:
          type: string
          description: Link to more information
        details:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaDetailsItems
          description: Array of errors
      title: Get-component-propertiesRequestInternalServerError

```

**`Response`**

```json title="Response"
{
  "componentId": "33666cc8-031a-c160-37ec-654c05d48750",
  "properties": [
    {
      "propertyId": "ecce29ad-f890-3428-1e29-5232054f8932",
      "type": "Plain Text",
      "label": "Title",
      "text": {
        "text": "Job Title"
      }
    },
    {
      "propertyId": "b0e6e289-f003-51df-07c2-387775f9a267",
      "type": "Plain Text",
      "label": "Department",
      "text": {
        "text": "Department"
      }
    },
    {
      "propertyId": "a0c19de3-e501-89ae-0a69-45b95dbe1dd6",
      "type": "Plain Text",
      "label": "Description",
      "text": {
        "text": "Apply if you are an expert in delaying tasks, have perfected the art of avoiding work, and mastered the subtle skill of looking busy while accomplishing nothing."
      }
    },
    {
      "propertyId": "d0b64214-eb68-fa04-3c93-26f8be2df466",
      "type": "Plain Text",
      "label": "Location",
      "text": {
        "text": "Location"
      }
    },
    {
      "propertyId": "aaeb508c-75ad-c326-ff4d-c607620dc41a",
      "type": "Plain Text",
      "label": "Contract Type",
      "text": {
        "text": "Contract Type"
      }
    },
  ],
  "pagination": {
    "limit": 100,
    "offset": 0,
    "total": 5
  }
}
```

##### Property types

Component properties can be of different types:

* **Plain Text** - Single-line text without HTML formatting
* **Rich Text** - Multi-line text with HTML formatting support
* **Alt Text** - Alternative text for images

#### Update component properties

Localize component property default values using the [Update Component Properties](/data/reference/pages-and-components/components/update-properties) endpoint. Provide a `properties` array with each of the property IDs and the translated strings in the `text` field. You must pass the `localeId` of the secondary locale you want to update as a query parameter.

##### Request

**`cURL`**

```curl cURL
curl -X POST https://api.webflow.com/v2/sites/<SITE_ID>/components/<COMPONENT_ID>/properties?localeId=<SECONDARY_LOCALE_ID> \
     -H "Authorization: Bearer <token>" \
     -H "Content-Type: application/json" \
     -d '{
       "properties": [
         {
           "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
           "text": "Guía del autoestopista galáctico"
         },
         {
           "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
           "text": "<div><h3>¡No entres en pánico!</h3><p>Siempre sabe dónde está tu toalla.</p></div>"
         }
       ]
     }'
```

**`Node.js`**

```javascript Node.js
const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.components.updateProperties("YOUR_COMPONENT_ID", {
  localeId: "SECONDARY_LOCALE_ID",
  properties: [
    {
      propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad623",
      text: "Guía del autoestopista galáctico",
    },
    {
      propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad627",
      text: "<div><h3>¡No entres en pánico!</h3><p>Siempre sabe dónde está tu toalla.</p></div>",
    },
  ],
});
```

##### Response

A successful response will return an object with and `error` property that contains an empty array.

## Component instances

When you add a component to a page, you create an **instance**. To customize the content of an instance, you can override the default properties of that instance. **Only overridden properties can be localized via the properties endpoints.**

### Identify component instances on pages

Component instances appear in the page content response as `component-instance` nodes. To get page content, use the [Get Page Content](/data/reference/pages-and-components/pages/get-content) endpoint.

##### Request

### Request

GET [https://api.webflow.com/v2/pages/\{page\_id}/dom](https://api.webflow.com/v2/pages/\{page_id}/dom)

```curl
curl -G https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom \
     -H "Authorization: Bearer <token>" \
     -d localeId=65427cf400e02b306eaa04a0 \
     -d limit=100 \
     -d offset=0 \
     -d translatable=65427cf400e02b306eaa04a0
```

```typescript
import { WebflowClient } from "webflow-api";

async function main() {
    const client = new WebflowClient({
        accessToken: "YOUR_TOKEN_HERE",
    });
    await client.pages.getContent("63c720f9347c2139b248e552", {
        localeId: "65427cf400e02b306eaa04a0",
        limit: 100,
        offset: 0,
        translatable: "65427cf400e02b306eaa04a0",
    });
}
main();

```

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_TOKEN_HERE",
)

client.pages.get_content(
    page_id="63c720f9347c2139b248e552",
    locale_id="65427cf400e02b306eaa04a0",
    limit=100,
    offset=0,
    translatable="65427cf400e02b306eaa04a0",
)

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0&translatable=65427cf400e02b306eaa04a0"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0&translatable=65427cf400e02b306eaa04a0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
import com.mashape.unirest.http.HttpResponse;
import com.mashape.unirest.http.Unirest;

HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0&translatable=65427cf400e02b306eaa04a0")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php
require_once('vendor/autoload.php');

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0&translatable=65427cf400e02b306eaa04a0', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
using RestSharp;

var client = new RestClient("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0&translatable=65427cf400e02b306eaa04a0");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0&translatable=65427cf400e02b306eaa04a0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

##### Response

The response will return a list of nodes. Any `component-instance` type nodes will have a `propertyOverrides` array with a list of available properties to localize. If a property hasn't been overridden on the instance, it won't be included in the `propertyOverrides` array.

Each object in the `propertyOverrides` array will have the following properties:

**`propertyId`** `string` — required

The unique identifier for the property being overridden.

---

**`type`** `'Plain Text' | 'Rich Text'` — required

The type of the property.

---

**`label`** `string` — required

The user-defined label for the property.

---

**`text`** `object` — required

An object containing the overridden text content.

#### + properties

**`html`** `string | null`

The HTML content for "Rich Text" properties. This will be `null` for "Plain Text" properties.

---

**`text`** `string | null`

The plain text content for "Plain Text" properties. This will be `null` for "Rich Text" properties.

---

---

**`Response`**

```json title="Response" {8-27}
{
  "pageId": "658205daa3e8206a523b5ad4",
  "nodes": [
    {
      "id": "a245c12d-995b-55ee-5ec7-aa36a6cad631",
      "type": "component-instance",
      "componentId": "6258612d1ee792848f805dcf",
      "propertyOverrides": [
        {
          "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad633",
          "type": "Plain Text",
          "label": "Title",
          "text": {
            "html": null,
            "text": "Custom Hero Title"
          }
        },
        {
          "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
          "type": "Rich Text",
          "label": "Description",
          "text": {
            "html": "<div><p>Page-specific description text</p></div>",
            "text": null
          }
        }
      ]
    }
  ]
}
```

In this example, the component instance has overridden two properties ("Title" and "Description") with page-specific values. Any other properties defined in the component will use their default values from the component definition.

### Update component instance

To localize a component instance, create a new `nodes` array, and include an object with the `nodeId` of the component instance and a `propertyOverrides` array. Each item in the array should have the `propertyId` and `text` of the property overrides for the secondary locale.

##### Request

**`cURL`**

```curl cURL
curl -X POST https://api.webflow.com/v2/pages/<PAGE_ID>/dom?localeId=<SECONDARY_LOCALE_ID> \
     -H "Authorization: Bearer <token>" \
     -H "Content-Type: application/json" \
     -d '{
       "nodes": [
         {
           "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad631",
           "propertyOverrides": [
             {
               "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad633",
               "text": "Título personalizado del héroe"
             },
             {
               "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
               "text": "<div><p>Texto de descripción específico de la página</p></div>"
             }
           ]
         }
       ]
     }'
```

**`Node.js`**

```javascript Node.js
const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.pages.updateStaticContent("YOUR_PAGE_ID", {
  localeId: "SECONDARY_LOCALE_ID",
  nodes: [
    {
      nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad631",
      propertyOverrides: [
        {
          propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad633",
          text: "Título personalizado del héroe",
        },
        {
          propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad635",
          text: "<div><p>Texto de descripción específico de la página</p></div>",
        },
      ],
    },
  ],
});
```

##### Response

A successful response will return an object with and `error` property with an empty array.

## Complete component localization workflow

Here's a complete example demonstrating component localization across definitions and instances:

**`Node.js`**

```javascript Node.js
const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });

// Example `translations` object holding the localized content for the secondary locale
async function localizeComponentDefinition(
  siteId,
  componentId,
  secondaryLocaleId,
  translations
) {
  // 1. Get component content structure in primary locale
  const contentData = await client.components.getContent(siteId, componentId);

  // 2. Get component properties for a given component definition
  const propertiesData = await client.components.getProperties(
    siteId,
    componentId
  );

  // 3. Update static content in component definition
  if (translations.staticContent) {
    const staticUpdates = {
      nodes: contentData.nodes
        .filter((node) => translations.staticContent[node.id])
        .map((node) => {
          const update = { nodeId: node.id };
          if (node.type === "text") {
            update.text = translations.staticContent[node.id];
          } else if (node.type === "text-input") {
            update.placeholder = translations.staticContent[node.id];
          }
          return update;
        }),
    };

    await client.components.updateContent(siteId, componentId, {
      localeId: secondaryLocaleId,
      nodes: staticUpdates.nodes,
    });
  }

  // 4. Update component properties
  if (translations.properties) {
    const propertyUpdates = {
      properties: propertiesData.properties
        .filter((prop) => translations.properties[prop.propertyId])
        .map((prop) => ({
          propertyId: prop.propertyId,
          text: translations.properties[prop.propertyId],
        })),
    };

    await client.components.updateProperties(siteId, componentId, {
      localeId: secondaryLocaleId,
      properties: propertyUpdates.properties,
    });
  }
}

// Example `propertyTranslations` object holding the localized content for the secondary locale
async function localizeComponentInstance(
  pageId,
  instanceNodeId,
  secondaryLocaleId,
  propertyTranslations
) {
  // Update component instance property overrides on a specific page
  const instanceUpdates = {
    nodes: [
      {
        nodeId: instanceNodeId,
        propertyOverrides: Object.entries(propertyTranslations).map(
          ([propertyId, text]) => ({
            propertyId,
            text,
          })
        ),
      },
    ],
  };

  await client.pages.updateStaticContent(pageId, {
    localeId: secondaryLocaleId,
    nodes: instanceUpdates.nodes,
  });
}
```

## Best practices

* **Preserve HTML structure** - Always maintain `data-w-id` attributes in HTML content. These identifiers preserve custom styling, animations, and links across locales. Example:
  ```html
  // Original: "<p>Price: <span data-w-id=\"b310743e-a1ac-8409-c039-d3b594afb816\">$10</span></p>"
  // Localized: "<p>Precio: <span data-w-id=\"price-123\">$10</span></p>"
  ```
* **Batch operations** - Update multiple properties or nodes in single requests when possible (up to 1000 nodes per request)
* **Pagination** - Use `limit` and `offset` parameters in GET requests to retrieve all nodes/properties for components with extensive content
* **Content inheritance** - Only update content that needs localization; unchanged content inherits from the primary locale
* **Test in Webflow** - Verify localized content displays correctly across all component instances in Webflow. Refresh the canvas to see API changes reflected

## FAQ

#### What's the difference between component definition and instance localization?

Component definition localization affects all the base static content that
lives in each instance of that component across your site, while instance
localization only affects the specific component instance on a particular
page through property overrides.

#### Can I localize read-only components?

No, read-only components (like those from Workspace Libraries) can't be
updated via the APIs. These components are marked with `readonly: true` in
the List Components response.

#### Do component property updates affect existing instances?

Yes, updating component definition property defaults affects all instances
that don't have property overrides for those specific properties. Instances
with overrides maintain their custom values and won't be affected by changes
to the component definition.

#### Why are some component instances missing from page content?

In the primary locale, all component instances appear in the Get Page
Content response. In secondary locales, only component instances with
property overrides are included, providing a focused view of customized
content that differs from the default component definition.

#### Can I update both static content and properties in one request?

No, static content and properties require separate API calls. Use the Update
Component Content endpoint for static content and Update Component
Properties for property values.

#### What happens if I don't preserve data-w-id attributes?

If you omit `data-w-id` attributes when updating HTML content, you may lose
custom attributes or links that were applied to those elements in Webflow.
Always preserve these identifiers exactly as they appear in the original
content.