> For the complete documentation index, see [llms.txt](https://stage-precision.gitbook.io/grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://stage-precision.gitbook.io/grid/controller/controller-view/controller-editor.md).

# Controller Editor

<figure><img src="https://1089527861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1lzYXYTbE4lxMSWTSQTM%2Fuploads%2FtYwX8oBY2MGrbFO3q0h4%2FController%20Editor%20Empty.png?alt=media&amp;token=50072742-b247-4c7a-a5b7-b5f4f968f1c6" alt=""><figcaption></figcaption></figure>

The Controller Editor is the view used to design and operate a Controller. It shows the pages and buttons of a Controller and allows them to be tested directly on screen, with or without a StreamDeck connected. It is the same for a Virtual Controller and a StreamDeck.

## Opening the Controller Editor

The Controller Editor is opened from the Inspector. Select a Virtual Controller or a StreamDeck in the Project Tree and click **Open Editor**.&#x20;

<figure><img src="https://1089527861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1lzYXYTbE4lxMSWTSQTM%2Fuploads%2FTWHs8tFZXwPiKqztnPD9%2FOpening%20Controller%20Editor.gif?alt=media&amp;token=4ec4453d-bc53-48bc-9f09-5701de28ecf8" alt=""><figcaption></figcaption></figure>

It is also possible to open this view from the view list at the top menu.

It is a view like any other in Grid Studio, so it can also be opened from the **View** option in the top menu bar.

### The Editor Follows the Selection

Like the Artboard, the Node Editor, and the Inspector, the Controller Editor follows the selected object. When a Controller is selected in the Project Tree, the editor jumps to the matching Controller and shows its pages and buttons. Selecting a different Controller switches the editor to that one.

This behavior can be turned off by locking the view to a specific Controller by clicking on the lock icon.

<figure><img src="https://1089527861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1lzYXYTbE4lxMSWTSQTM%2Fuploads%2F922utLcQKqNcStCnA3Qs%2FController%20Editor%20Swapping.gif?alt=media&amp;token=8a1f421f-1693-459f-89c5-8afe90363602" alt=""><figcaption></figcaption></figure>

The name of the view shows which controller it is displaying, and clicking on the down arrow next to the name allows a quick access to switch between all available controllers in your project.

***

## Choosing the Controller

### Locking the View

By default the editor follows the object selected in the Project Tree. Use the lock at the top left of the view to lock it to a specific Controller. A locked editor stays on that Controller even when other objects are selected.

This is useful when the Controller Editor should stay open next to other views while you work on the rest of the project.

### Switching Between Controllers

Click the **down arrow** at the top left to quickly swap to another Controller. This allows you to navigate between the Controllers of a project without going back to the Project Tree.

<figure><img src="https://1089527861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1lzYXYTbE4lxMSWTSQTM%2Fuploads%2F8Phw4yqsky8QFIHmI4XU%2FController%20Editor%20Quick%20Switch.gif?alt=media&amp;token=1a265885-a4ab-45bd-8a96-6e7193071465" alt=""><figcaption></figcaption></figure>

## Working With Pages

Controller supports the concept of pages allowing for the grouping of buttons.

There are buttons at the top right of the Controller view dedicated to working with pages.

<figure><img src="https://1089527861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1lzYXYTbE4lxMSWTSQTM%2Fuploads%2FqfObCJwcvrXiGcy0rYgw%2FController%20Page%20Manager.png?alt=media&amp;token=5f3ab8b4-1335-45c7-a8a3-6c8fac6b7f62" alt=""><figcaption></figcaption></figure>

For more information about pages, see [**Pages**](/grid/controller/controller-pages/pages.md).

***

## Copying and Resetting Buttons

Right-clicking a button in edit mode opens a context menu with three options:

| Option    | What it does                                                                                   |
| --------- | ---------------------------------------------------------------------------------------------- |
| **Copy**  | Copies the setup of the button: its Controller settings, widget, and linked events or workflow |
| **Paste** | Applies a previously copied button's setup onto the selected button                            |
| **Reset** | Clears the button back to its default, empty state                                             |

<figure><img src="https://1089527861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1lzYXYTbE4lxMSWTSQTM%2Fuploads%2FBomQerOlpSlckHY0igNg%2FControlle%20Button%20Copy%20Paste%20Reset.gif?alt=media&amp;token=06607667-eebf-479f-b053-23be4f846059" alt=""><figcaption></figcaption></figure>

This makes it quick to build one button, then transfer its setup to others without configuring each one from scratch. Copy and Paste can be used across buttons on the same page, on different pages, and between different Controllers.

***

## Edit Mode and Play Mode

The Controller Editor has two modes.

| Mode          | Purpose                                                                                                 |
| ------------- | ------------------------------------------------------------------------------------------------------- |
| **Edit mode** | Building and configuring the Controller: selecting buttons and setting up their behavior and appearance |
| **Play mode** | Operating the Controller on screen, as if the physical controls were being used                         |

<figure><img src="https://1089527861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1lzYXYTbE4lxMSWTSQTM%2Fuploads%2FWd7dBbzyt6Gjs0uDWPeh%2FController%20Play%20Mode.gif?alt=media&amp;token=4e2bc2d0-0fa2-469b-b0c8-a110f645b394" alt=""><figcaption></figcaption></figure>

The **Play** button on the far right of the top right controls switches from edit mode to play mode. While play mode is active, the same button becomes a **Stop** button. Click it to leave play mode and return to edit mode.

### Operating in Play Mode

In play mode the view is interactive. Buttons, encoders, and touch strips can be operated with the mouse and keyboard.

| Control         | Action to simulate | How                                                                |
| --------------- | ------------------ | ------------------------------------------------------------------ |
| **Button**      | Press              | Click the button                                                   |
| **Button**      | Press and hold     | Click and hold the button                                          |
| **Encoder**     | Push               | Click the encoder                                                  |
| **Encoder**     | Turn               | Hold **SHIFT** and use the mouse **scroll wheel** over the encoder |
| **Touch strip** | Tap                | Click the touch strip                                              |
| **Touch strip** | Swipe              | Click and drag on the touch strip                                  |

Press and hold simulates holding down a physical button on a StreamDeck. This matters for buttons whose behavior depends on how long they are held, such as the **Ramp** value modes, or **Set and Release**, which applies a different value when the button is released.

{% hint style="info" %}
Play mode makes it possible to test a StreamDeck layout without touching the device, and to operate a Virtual Controller without any hardware.
{% endhint %}

### Returning to Edit Mode

Click the **Stop** button to exit play mode. The view returns to edit mode, where buttons can be selected and configured again.

{% hint style="info" %}
Using the keyboard shortcut `V` allows quick toggling between the Play and Edit mode
{% endhint %}