StylesCreating & Retrieving Styles

Set style name

style.setName(name)

Rename an existing style in place. The rename preserves the style’s CSS properties, its combo class parent relationship, and any elements the style is applied to.

Syntax

1style.setName(name: string): Promise<null>

Parameters

  • name: string - The new name for the style. The name must:
    • Be 1–150 characters long.
    • Not match another existing style’s name (including parents of combo classes).
    • Not match a reserved tag-style name.

Returns

Promise<null>

A Promise that resolves to null once the rename is committed to the Designer.

The Promise rejects with an Error when validation fails. Inspect the error’s cause.tag to determine the failure:

cause.tagMeaning
invalidStyleNameTagThe name is empty, longer than 150 characters, reserved, or collides with another style.
invalidStyleTagThe style isn’t a class style. Only class styles can be renamed.
resourceMissingTagThe style no longer exists.
modeForbiddenTagThe current workflow doesn’t allow style mutations, such as Comment mode.

Example

1// Get a style that the app previously created or looked up
2const style = await webflow.getStyleByName("btn-primary");
3
4if (style) {
5  try {
6    // Rename the style in place
7    await style.setName("button-primary");
8    console.log("Renamed to:", await style.getName());
9  } catch (err) {
10    const tag = (err as { cause?: { tag?: string } }).cause?.tag;
11
12    if (tag === "invalidStyleNameTag") {
13      console.warn("That name is empty, too long, reserved, or already in use.");
14    } else if (tag === "invalidStyleTag") {
15      console.warn("Only class styles can be renamed.");
16    } else {
17      throw err;
18    }
19  }
20} else {
21  console.log("Style not found.");
22}

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canModifyStyleBlocksAnyAnyCanvasDesign