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
      • Get all styles
      • Get style by name or path
      • Create style
      • Set style name
      • Remove style
      • Is combo class
      • Get style type
      • Is from library
      • Get parent style
    • Managing Style Properties
    • Managing Variable Modes
  • Components
  • 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
  • style.setName(name)
  • Syntax
  • Parameters
  • Returns
  • Example
  • Designer Ability
StylesCreating & Retrieving Styles

Set style name

Was this page helpful?
Previous

Remove style

Next
Built with

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}

Try this example

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canModifyStyleBlocksAnyAnyCanvasDesign