# Commands & search

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

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

<figure><img src="/files/DNzV3PeRFIDPQYQCLX0X" alt="Commands and search dialog open with results listed"><figcaption><p>Commands &#x26; search</p></figcaption></figure>

{% embed url="<https://youtu.be/ofUP0Uc_ttY>" %}

### 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](/university/core-components/link.md).
  * 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](/university/foundations/shortcuts.md)

### 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](/university/foundations/shortcuts.md) – Complete list of keyboard shortcuts
* [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder.md) – Overview of the Builder interface
* [Design tokens](/university/foundations/design-tokens.md) – Manage reusable style packages
* [CSS variables](/university/foundations/css-variables.md) – Manage CSS custom properties
* [Data variables](/university/foundations/variables.md) – Manage data variables in your project


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/university/foundations/commands-and-search.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.