🔍Commands & Search

The Commands & Search Panel is a centralized place to navigate the builder and perform actions such as switching pages and adding components — all with the keyboard.

Commands & Search speeds up the building process and introduces new shortcuts.

Open Commands & Search with ⌘ + K (Control + K for Windows).

Actions

• Add components

• Search instances by name – find any instance in your project

• Switch breakpoints

• Switch pages

  • Open page settings

• Manage tokens – create, edit, and delete style tokens

• Manage data variables – view, edit, and organize your project's data variables

• Manage CSS variables – view all CSS custom properties defined in your project

• Execute commands

  • Unwrap – Move the children out of the current instance and remove the current instance.

  • Wrap In Box – Wrap the current instance in a Box.

  • Wrap In Link – Wrap the current instance in a Link.

  • Wrap In (any component) – Wrap the current instance in any component you choose.

  • Wrap In Element – Wrap the current instance in any HTML element.

  • Convert To – Convert the current instance to a different component type while preserving children and styles.

  • Replace With Element – Replace the current instance with a different HTML element.

  • Insert Tag – Insert specific HTML tags at the current position.

  • Delete Unused Variables – Remove data variables that are no longer referenced anywhere.

  • Delete Unused CSS Variables – Remove CSS custom properties that are no longer used.

  • All other keyboard shortcuts

Secondary Actions with Tab

Some items in the Commands Panel have secondary actions. Press Tab to access them. For example, when searching pages, you can press Tab and arrow to "Settings" to go directly to that page's settings.

Find Forgotten Shortcuts

If you forget a shortcut like renaming an instance, search for the action (e.g., "edit instance label") and the Commands Panel will show the shortcut so you can learn it.

Group Counters

Each category in the Commands Panel shows a counter indicating how many items it contains, helping you quickly understand the scope of your project.

Related

• Shortcuts – Complete list of keyboard shortcuts

• Anatomy of the Webstudio Builder – Overview of the Builder interface

• Design Tokens – Manage reusable style packages

• CSS Variables – Manage CSS custom properties

• Data Variables – Manage data variables in your project