Create a prop (Beta)

1
component.createProp(options: CreatePropOptions): Promise<Prop>

1
interface CreatePropCommon {
2
  /** Display name for the prop. Auto-incremented on name conflicts within the same group. */
3
  name: string;
4
  /** Group name. Props with the same group appear together in the props panel. */
5
  group?: string;
6
  /** Tooltip text shown on hover in the props panel. */
7
  tooltip?: string;
8
}
9
10
interface CreateTextContentProp extends CreatePropCommon {
11
  type: 'textContent';
12
  /** Whether the text input supports multiple lines. */
13
  multiline?: boolean;
14
  defaultValue?: string;
15
}
16
17
interface CreateStringProp extends CreatePropCommon {
18
  type: 'string';
19
  defaultValue?: string;
20
}
21
22
interface CreateRichTextProp extends CreatePropCommon {
23
  type: 'richText';
24
  defaultValue?: { innerText: string };
25
}
26
27
interface CreateLinkProp extends CreatePropCommon {
28
  type: 'link';
29
  defaultValue?:
30
    | { mode: 'url' | 'phone'; to?: string; openInNewTab?: boolean; rel?: 'preload' | 'prefetch' | 'prerender' }
31
    | { mode: 'page'; to?: { pageId: string }; openInNewTab?: boolean; rel?: 'preload' | 'prefetch' | 'prerender' }
32
    | { mode: 'pageSection'; to?: { fullElementId: { element: string; component: string } }; openInNewTab?: boolean; rel?: 'preload' | 'prefetch' | 'prerender' }
33
    | { mode: 'email'; to?: string; emailSubject?: string; openInNewTab?: boolean; rel?: 'preload' | 'prefetch' | 'prerender' }
34
    | { mode: 'file'; to?: { assetId: string }; openInNewTab?: boolean; rel?: 'preload' | 'prefetch' | 'prerender' }
35
    | { mode: 'collectionPage'; to?: { pageSlug: string }; openInNewTab?: boolean; rel?: 'preload' | 'prefetch' | 'prerender' };
36
}
37
38
interface CreateImageAssetProp extends CreatePropCommon {
39
  type: 'imageAsset';
40
  /** Default asset ID. */
41
  defaultValue?: string;
42
}
43
44
interface CreateVideoProp extends CreatePropCommon {
45
  type: 'video';
46
  defaultValue?: {
47
    src?: string;
48
    title?: string;
49
  };
50
}
51
52
interface CreateNumberProp extends CreatePropCommon {
53
  type: 'number';
54
  min?: number;
55
  max?: number;
56
  /** Number of decimal places allowed. */
57
  decimals?: number;
58
  defaultValue?: number;
59
}
60
61
interface CreateBooleanProp extends CreatePropCommon {
62
  type: 'boolean';
63
  /** Label shown when the value is true. */
64
  trueLabel?: string;
65
  /** Label shown when the value is false. */
66
  falseLabel?: string;
67
  defaultValue?: boolean;
68
}
69
70
interface CreateIdProp extends CreatePropCommon {
71
  type: 'id';
72
  /**
73
   * Default ID value. Normalized on the host side: invalid characters are stripped,
74
   * spaces become hyphens, and the result is lowercased.
75
   * The response returns the normalized value.
76
   */
77
  defaultValue?: string;
78
}
79
80
interface CreateAltTextProp extends CreatePropCommon {
81
  type: 'altText';
82
  /**
83
   * Default alt text value. Accepts a custom string, null, or the special strings
84
   * "decorative" (marks the image as decorative) and "inherit" (inherits alt text from the asset).
85
   */
86
  defaultValue?: string | null;
87
}
88
89
type CreatePropOptions =
90
  | CreateTextContentProp
91
  | CreateStringProp
92
  | CreateRichTextProp
93
  | CreateLinkProp
94
  | CreateImageAssetProp
95
  | CreateVideoProp
96
  | CreateNumberProp
97
  | CreateBooleanProp
98
  | CreateIdProp
99
  | CreateAltTextProp;

1
interface Prop {
2
  /** Unique prop ID. */
3
  id: string;
4
  /** The prop type. */
5
  type: 'textContent' | 'string' | 'richText' | 'imageAsset' | 'link' | 'video' | 'number' | 'boolean' | 'id' | 'altText';
6
  /** The binding value type, derived from the prop type. */
7
  valueType: BindableValueType;
8
  /** Value types that this prop can bind to. */
9
  bindableTo: readonly BindableValueType[];
10
  /** Display name (may be auto-incremented if there was a name conflict). */
11
  name: string;
12
  /** Group name, or null if ungrouped. */
13
  group: string | null;
14
  /** Tooltip text, or null if not set. */
15
  tooltip: string | null;
16
  /** Default value, or null if not set. */
17
  defaultValue: unknown | null;
18
  // Type-specific settings, included when applicable:
19
  multiline?: boolean;   // textContent
20
  min?: number;          // number
21
  max?: number;          // number
22
  decimals?: number;     // number
23
  trueLabel?: string;    // boolean
24
  falseLabel?: string;   // boolean
25
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const headingProp = await component.createProp({
5
    type: 'textContent',
6
    name: 'Heading',
7
    group: 'Content',
8
    defaultValue: 'Welcome to our site',
9
    tooltip: 'The main heading displayed in the hero section',
10
  })
11
  console.log(headingProp)
12
  /*
13
  {
14
    id: 'prop_1',
15
    type: 'textContent',
16
    valueType: 'textContent',
17
    bindableTo: ['string', 'textContent', 'altText', 'id'],
18
    name: 'Heading',
19
    group: 'Content',
20
    defaultValue: 'Welcome to our site',
21
    tooltip: 'The main heading displayed in the hero section'
22
  }
23
  */
24
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const opacityProp = await component.createProp({
5
    type: 'number',
6
    name: 'Overlay Opacity',
7
    group: 'Settings',
8
    min: 0,
9
    max: 100,
10
    decimals: 0,
11
    defaultValue: 50,
12
  })
13
  console.log(opacityProp)
14
  /*
15
  {
16
    id: 'prop_2',
17
    type: 'number',
18
    valueType: 'number',
19
    bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
20
    name: 'Overlay Opacity',
21
    group: 'Settings',
22
    defaultValue: 50,
23
    tooltip: null,
24
    min: 0,
25
    max: 100,
26
    decimals: 0
27
  }
28
  */
29
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const showCtaProp = await component.createProp({
5
    type: 'boolean',
6
    name: 'Show CTA',
7
    group: 'Settings',
8
    trueLabel: 'Visible',
9
    falseLabel: 'Hidden',
10
    defaultValue: true,
11
  })
12
  console.log(showCtaProp)
13
  /*
14
  {
15
    id: 'prop_3',
16
    type: 'boolean',
17
    valueType: 'boolean',
18
    bindableTo: ['boolean', 'string', 'altText', 'id'],
19
    name: 'Show CTA',
20
    group: 'Settings',
21
    defaultValue: true,
22
    tooltip: null,
23
    trueLabel: 'Visible',
24
    falseLabel: 'Hidden'
25
  }
26
  */
27
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const ctaProp = await component.createProp({
5
    type: 'link',
6
    name: 'CTA Link',
7
    group: 'Content',
8
    defaultValue: {
9
      mode: 'url',
10
      to: 'https://example.com/signup',
11
      openInNewTab: true,
12
    },
13
  })
14
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const sectionIdProp = await component.createProp({
5
    type: 'id',
6
    name: 'Section ID',
7
    defaultValue: 'Hero Section',
8
  })
9
  console.log(sectionIdProp.defaultValue) // 'hero-section'
10
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  // 'decorative' marks the image as decorative (empty alt attribute)
5
  const decorativeAlt = await component.createProp({
6
    type: 'altText',
7
    name: 'Image Alt',
8
    defaultValue: 'decorative',
9
  })
10
11
  // 'inherit' inherits alt text from the asset
12
  const inheritAlt = await component.createProp({
13
    type: 'altText',
14
    name: 'Image Alt',
15
    defaultValue: 'inherit',
16
  })
17
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  // 'Heading' already exists in group 'Content'
5
  const heading2 = await component.createProp({
6
    type: 'textContent',
7
    name: 'Heading',
8
    group: 'Content',
9
  })
10
  console.log(heading2.name) // 'Heading 2'
11
}