ComponentsManaging Components

Set prop settings (Beta)

component.setProp(propId, updates)

Updates one or more settings on an existing prop.

Only the settings that you pass to this method change. This method returns the full updated Prop object, not only properties that changed.

To clear a setting, pass undefined as its new value.

This action is undoable in the Webflow Designer.

A prop’s type cannot be changed after creation. Passing a type field returns an error.

Beta

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

Syntax

component.setProp(propId: string, updates: SetPropOptions): Promise<Prop>
component.setProp(updates: SetPropOptionsWithId): Promise<Prop>

Parameters

The method accepts two call signatures: an ID string plus an updates object or a single object that includes the id field.

SetPropOptions — all fields are optional:

interface SetPropOptions {
  /** Update the display name. */
  name?: string;
  /** Move to a different group, or null to ungroup. */
  group?: string | null;
  /** Update the tooltip, or null to remove it. */
  tooltip?: string | null;
  /**
   * Update the default value. Shape must match the prop's type.
   * Pass null to clear the default value.
   */
  defaultValue?: PropDefaultValue;
  // Type-specific settings (only valid for the matching prop type):
  multiline?: boolean;       // textContent only
  min?: number | null;       // number only
  max?: number | null;       // number only
  decimals?: number | null;  // number only
  trueLabel?: string | null; // boolean only
  falseLabel?: string | null; // boolean only
}
interface SetPropOptionsWithId extends SetPropOptions {
  /** The ID of the prop to update. */
  id: string;
}
  • propId : string — The unique ID of the prop to update (first-argument signature only).
  • updates.name : string — (optional) The new display name. If a prop with the same name already exists in the same group, the name is automatically incremented (for example, Heading becomes Heading 2).
  • updates.group : string | null — (optional) Move the prop to a different group, or pass null to remove it from its group.
  • updates.tooltip : string | null — (optional) New tooltip text, or null to remove the tooltip.
  • updates.defaultValue : varies by type — (optional) New default value. The shape must match the prop’s type. Pass null to clear the default value.
  • updates.multiline : boolean — ('textContent' only, optional) Whether the text input supports multiple lines.
  • updates.min : number | null — ('number' only, optional) Minimum allowed value. Pass null to remove the constraint.
  • updates.max : number | null — ('number' only, optional) Maximum allowed value. Pass null to remove the constraint.
  • updates.decimals : number | null — ('number' only, optional) Number of decimal places allowed. Pass null to remove the constraint.
  • updates.trueLabel : string | null — ('boolean' only, optional) Label shown when the value is true. Pass null to remove the label.
  • updates.falseLabel : string | null — ('boolean' only, optional) Label shown when the value is false. Pass null to remove the label.

Returns

Promise<Prop>

A Promise that resolves to the full updated Prop object after the update is applied.

The Prop interface uses the same shape as the return value of component.createProp():

interface Prop {
  /** Unique prop ID. */
  id: string;
  /** The prop type. */
  type: PropType;
  /** The binding value type, derived from the prop type. */
  valueType: BindableValueType;
  /** Value types that this prop can bind to. */
  bindableTo: readonly BindableValueType[];
  /** Display name (may be auto-incremented if there was a name conflict). */
  name: string;
  /** Group name, or null if ungrouped. */
  group: string | null;
  /** Tooltip text, or null if not set. */
  tooltip: string | null;
  /** Default value, or null if not set. */
  defaultValue: unknown | null;
  // Type-specific settings, included when applicable:
  multiline?: boolean;   // textContent
  min?: number;          // number
  max?: number;          // number
  decimals?: number;     // number
  trueLabel?: string;    // boolean
  falseLabel?: string;   // boolean
}

Examples

Update the default value of a link prop:

const component = await webflow.getCurrentComponent()
if (component) {
  const prop = await component.getProp('prop_123')
  const updated = await component.setProp(prop.id, {
    defaultValue: {
      ...prop.defaultValue,
      rel: 'preload',
    },
  })
  console.log(updated.defaultValue)
  /*
  {
    mode: 'url',
    to: 'https://example.com/signup',
    openInNewTab: true,
    rel: 'preload'
  }
  */
}

Update a prop name and tooltip using the object-with-ID signature:

const component = await webflow.getCurrentComponent()
if (component) {
  const updated = await component.setProp({
    id: 'prop_456',
    name: 'Hero Heading',
    tooltip: 'The main headline for the hero section',
  })
  console.log(updated.name)    // 'Hero Heading'
  console.log(updated.tooltip) // 'The main headline for the hero section'
}

Update number constraints:

const component = await webflow.getCurrentComponent()
if (component) {
  const updated = await component.setProp('prop_789', {
    min: 0,
    max: 200,
    decimals: 2,
    defaultValue: 75.5,
  })
  console.log(updated)
  /*
  {
    id: 'prop_789',
    type: 'number',
    valueType: 'number',
    bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
    name: 'Overlay Opacity',
    group: 'Settings',
    tooltip: null,
    defaultValue: 75.5,
    min: 0,
    max: 200,
    decimals: 2
  }
  */
}

Move a prop to a different group:

const component = await webflow.getCurrentComponent()
if (component) {
  const updated = await component.setProp('prop_456', { group: 'Layout' })
  console.log(updated.group) // 'Layout'
}

Remove a prop from its group:

const component = await webflow.getCurrentComponent()
if (component) {
  const updated = await component.setProp('prop_456', { group: null })
  console.log(updated.group) // null
}

Remove a tooltip:

const component = await webflow.getCurrentComponent()
if (component) {
  const updated = await component.setProp('prop_456', { tooltip: null })
  console.log(updated.tooltip) // null
}

Designer Ability

Designer AbilityPermissionLocaleBranchWorkflowSitemode
canModifyComponentsanyanyanyCanvasDesign