For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
ReferenceGuidesExamplesChangelog
ReferenceGuidesExamplesChangelog
  • Designer API
    • Introduction
    • Getting Started
    • Webflow CLI
    • Error Handling
    • App Modes
  • Elements
    • Creating & Retrieving Elements
    • Element Properties & Methods
    • Element Types & Methods
  • Styles
    • Managing Style Properties
    • Managing Variable Modes
  • Components
      • Create a component instance
      • Open a component canvas
      • Set the selected variant
      • Select a component
      • Exit out of a component
      • Get root element
      • Get component name
      • Get component
      • Set component name
      • Get component settings
      • Set component settings
      • Get props
      • Create a prop
      • Create multiple props
      • Get a prop
      • Get a prop by name
      • Set prop settings
      • Remove a prop
  • Variables & Collections
    • Variable Collections
    • Variables
    • Variable Modes
  • Assets
  • Pages & Folders
  • Utilities
    • User Events & Notifications
    • App Intents & Connections
  • Additional Resources
    • API Playground
    • FAQs
LogoLogo
Resources
Get started
On this page
  • component.createProps(options)
  • Syntax
  • Parameters
  • Returns
  • Examples
  • Designer Ability
ComponentsManaging Components

Create multiple props (Beta)

Was this page helpful?
Previous

Get a prop (Beta)

Next
Built with

component.createProps(options)

Creates multiple props on a component in a single transaction. This is the bulk counterpart to component.createProp(), accepting an array of prop definitions and returning an array of created props in the same order.

The operation is all-or-nothing: if any prop in the array fails validation, no props are created.

Name conflict auto-increment applies across the entire batch and against props that already exist on the component. For example, if two items in the array both specify name: 'Heading' in the same group, the second becomes 'Heading 2'.

Beta

These methods are in public beta and may change with future releases.

Syntax

1component.createProps(options: CreatePropOptions[]): Promise<Prop[]>

The CreatePropOptions type and Prop response type are identical to those used by component.createProp().

Parameters

  • options : CreatePropOptions[] — An array of prop definitions. Each item uses the same shape as the options parameter of component.createProp(). The array must contain at least one item.

Returns

Promise<Prop[]>

A Promise that resolves to an array of Prop objects in the same order as the input array. Each Prop object has the same shape as the return value of component.createProp().

Examples

Create multiple props at once:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const props = await component.createProps([
5    {
6      type: 'textContent',
7      name: 'Heading',
8      group: 'Content',
9      defaultValue: 'Welcome to our site',
10    },
11    {
12      type: 'textContent',
13      name: 'Subheading',
14      group: 'Content',
15      defaultValue: 'We build things',
16    },
17    {
18      type: 'imageAsset',
19      name: 'Background Image',
20      group: 'Content',
21    },
22    {
23      type: 'link',
24      name: 'CTA Link',
25      group: 'Content',
26      defaultValue: {
27        mode: 'url',
28        to: 'https://example.com/signup',
29        openInNewTab: true,
30      },
31    },
32    {
33      type: 'number',
34      name: 'Overlay Opacity',
35      group: 'Settings',
36      min: 0,
37      max: 100,
38      decimals: 0,
39      defaultValue: 50,
40    },
41  ])
42  console.log(props)
43  /*
44  [
45    {
46      id: 'prop_1',
47      type: 'textContent',
48      valueType: 'textContent',
49      bindableTo: ['string', 'textContent', 'altText', 'id'],
50      name: 'Heading',
51      group: 'Content',
52      defaultValue: 'Welcome to our site',
53      tooltip: null
54    },
55    {
56      id: 'prop_2',
57      type: 'textContent',
58      valueType: 'textContent',
59      bindableTo: ['string', 'textContent', 'altText', 'id'],
60      name: 'Subheading',
61      group: 'Content',
62      defaultValue: 'We build things',
63      tooltip: null
64    },
65    {
66      id: 'prop_3',
67      type: 'imageAsset',
68      valueType: 'imageAsset',
69      bindableTo: ['image'],
70      name: 'Background Image',
71      group: 'Content',
72      defaultValue: null,
73      tooltip: null
74    },
75    {
76      id: 'prop_4',
77      type: 'link',
78      valueType: 'link',
79      bindableTo: ['link'],
80      name: 'CTA Link',
81      group: 'Content',
82      defaultValue: {
83        mode: 'url',
84        to: 'https://example.com/signup',
85        openInNewTab: true
86      },
87      tooltip: null
88    },
89    {
90      id: 'prop_5',
91      type: 'number',
92      valueType: 'number',
93      bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
94      name: 'Overlay Opacity',
95      group: 'Settings',
96      defaultValue: 50,
97      tooltip: null,
98      min: 0,
99      max: 100,
100      decimals: 0
101    }
102  ]
103  */
104}

Name conflicts auto-increment within the batch:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const props = await component.createProps([
5    { type: 'textContent', name: 'Heading', group: 'Content' },
6    { type: 'textContent', name: 'Heading', group: 'Content' },
7  ])
8  console.log(props[0].name) // 'Heading'
9  console.log(props[1].name) // 'Heading 2'
10}

Try this example

Designer Ability

Designer AbilityPermissionLocaleBranchWorkflowSitemode
canModifyComponentsanyanyanyCanvasDesign