# Finding your way around

> Locate Studio’s main controls, switch views, find nodes and saved work, navigate a graph, and understand the different controls used on a phone.

Source: https://kaitoi.io/docs/start/navigation/
Section: Start here / Getting started
Written for: Anyone learning the Studio interface on desktop or mobile.
Last reviewed: 2026-10-24

---

Studio has several views of your work and several places to find tools. Start
with **Graph** when following the desktop instructions below. The
[phone layout](#on-a-phone) has its own controls.

Hover a desktop icon to read its tooltip. Some controls also have an accessible
name that is more descriptive than the tooltip: **Assistant**, for example,
is the toolbar control named **Toggle Assistant**.

## Find the control you need

In Graph, the floating toolbar starts near the top center; drag its grip to
move it. The library opens as a tall left panel, and the view dock floats at
the bottom center. Browser has a horizontal section bar at the top. Settings
opens a centered panel with a left sidebar. The toolbar's robot-shaped
**Assistant** control opens Penny's input near the bottom center, with its
chat control inside the input bar. Panel sizes and the toolbar's position can
differ between workspaces.


**Switch views — floating bottom-center view dock.** Labels sit below the
icons. It contains **Settings**, **Browser**,
**Lab**, **Graph**, **Blocks**, **Story**, and **Timeline**. Choose Graph to
return to the node canvas. Lab depends on account access. If the dock is
auto-hidden, move to the bottom edge and use **Pin dock** to keep it visible.

**Add a node — tall left library panel.** Its collapsed trigger sits at the
left edge of the canvas. Open **Show node library**, then use the
**Library selector** to choose **Nodes** and search for an operation. The
selector also offers **Projects**. In Graph, **Tab** opens the node search
when you are not editing a field.

**Find existing work — Browser.** Browser fills the workspace, with a horizontal
section bar at the top. Its sections are **Outputs**, **Nodes**,
**Projects**, **Templates**, **Files**, **Tutorials**, and **Playbooks**.
Templates depends on account access. Use **Back** to leave Browser.

**Use graph tools — floating, movable graph toolbar.** It starts near the top
center. **New Project**, **Save Project**,
**Open Projects**, and **Run Graph** handle project work and the selected
nodes. **More Options** reveals tools including **Minimap**, **Project Spend**,
**Drawing Canvas**, and **Project Variables**.

**Ask Penny — graph toolbar’s Assistant control.** **Assistant** opens Penny
for graph work; **Cmd/Ctrl+J** toggles it. Penny's input opens near the bottom
center, with a chat control inside the input bar. Lab has its own chat interface.

**Change settings — Settings.** Open it from the dock or toolbar, or use
**Cmd/Ctrl+,**. A centered panel has a section sidebar on the left and the
selected section on the right. Desktop sections include **Account**, **General**, **Storage**,
**Connectors**, **Integrations**, **Variables**, **MCP**, and **Developer**.
**Admin** appears for instance administrators.

*Figure: A concept guide to Studio’s desktop controls, using their actual labels. This is a control finder, not a screenshot.*

The **Station** toolbar control opens Station mode for a saved project.
That mode has its own panel and mode bar; it hides the usual graph toolbar
and view dock. [Stations](/docs/stations/creating/) explains that workflow.

## Switch views and return to Graph

The dock's number keys follow this order:

| Key   | View         | Use it for                                  |
| ----- | ------------ | ------------------------------------------- |
| **1** | **Browser**  | Browse existing work and resources          |
| **2** | **Lab**      | Create through conversation, when available |
| **3** | **Graph**    | Build and inspect a node workflow           |
| **4** | **Blocks**   | Work with supported operations as blocks    |
| **5** | **Story**    | Plan scenes and shots in a storyboard       |
| **6** | **Timeline** | Arrange clips and sound                     |

Choose **Graph** to return to the canvas. Clicking the active overlay's dock
button also closes it and returns to Graph. Switching views does not make a
new copy of the graph. Lab conversations and canvas items have their own
state; [Choose where to work](/docs/start/overview/) explains that distinction.

## Find nodes, projects, and results

The left library is a quick way to add a node. Its **Library selector** switches
between **Nodes** and **Projects**, so check the current label before searching.

**Browser → Nodes** is another way to browse operations. **Browser → Projects**
finds saved projects, and **Browser → Templates** finds reusable starting
workflows when templates are available on your account.

Use **Browser → Outputs** to inspect node results from the current graph.
Use **Browser → Files** for your Files library. A node result and a file you
have kept in that library have different roles; see
[Files and results](/docs/studio/files-and-results/).

## Move around and select nodes

These gestures apply to the graph canvas:

| Goal                       | Desktop control                                              |
| -------------------------- | ------------------------------------------------------------ |
| Pan                        | Scroll with a trackpad, or drag with the middle mouse button |
| Pan from empty canvas      | Hold Cmd/Ctrl and drag                                       |
| Zoom                       | Pinch on a trackpad, or hold Cmd/Ctrl while scrolling        |
| Select a node              | Click it                                                     |
| Add nodes to the selection | Shift-click more nodes                                       |
| Select an area             | Left-drag a box over empty canvas                            |
| Clear the selection        | Click empty canvas without Shift                             |

A node's fields and media preview can handle gestures of their own. Use empty
canvas when you want to move the graph without editing a control.

Mouse-wheel scrolling can pan or zoom, depending on how the browser reports
the input. Use middle-button dragging when you want to pan reliably.

### Bring work back into view

Press **F**, or use **Fit to View** in the minimap toolbar (tooltip: **Fit nodes
to view**). With nodes selected, it frames that selection. With nothing
selected, it frames the whole graph.


With **nothing selected**, Fit to View frames nodes **A, B, and C**.
With **B and C selected**, it frames **B and C** instead. The diagram changes
the viewport; the nodes stay in the same graph positions.

Click empty canvas to clear the selection before fitting the whole graph.
Fitting does not hide other nodes; nearby nodes can still be visible in Studio.
**Auto arrange nodes** is a separate action that changes node positions.

*Figure: Concept: Fit to View frames the selection when one exists, or the whole graph when nothing is selected.*

If the minimap is hidden, open **More Options → Minimap** in the graph toolbar.
Hover the minimap to reveal its toolbar. **Auto Arrange** (tooltip: **Auto
arrange nodes**, shortcut **U**) moves the selection, or all nodes if nothing
is selected, into a layout.

## A few useful desktop shortcuts

Use **Cmd** on macOS and **Ctrl** on Windows/Linux. Finish editing a field and
close overlays before using graph shortcuts; other views and editors have
their own keys.

| Action                                              | Shortcut       |
| --------------------------------------------------- | -------------- |
| Open the node library and focus search              | **Tab**        |
| Fit the selection, or the whole graph if unselected | **F**          |
| Auto arrange nodes                                  | **U**          |
| Toggle node pins                                    | **M**          |
| Toggle Blocks                                       | **W**          |
| Toggle Penny in Graph                               | **Cmd/Ctrl+J** |
| Save the project                                    | **Cmd/Ctrl+S** |
| Open Settings                                       | **Cmd/Ctrl+,** |

**Run Graph** uses the selected nodes. It can also evaluate upstream work
needed to supply their inputs. With nothing selected, Studio asks you to select
nodes first. Review the selection before running, especially when it includes
paid operations. [Your first project](/docs/start/first-project/) introduces
the node's own run control.

## Settings and missing controls

Open **Settings** from the dock or toolbar. **Account**, **General**, **Storage**,
and **Connectors** are grouped first. **Integrations**, **Variables**, **MCP**,
and **Developer** appear under **Advanced**. **Admin** is for instance
administrators.

Available features depend on your account and installation. Read a feature's
access message when a control is restricted. In particular, a missing Lab view
or unavailable template action can be an account-access difference.

If you cannot find a control, return to Graph, reveal the dock at the bottom
edge, check the library's Nodes/Projects selector, and open **More Options**
for extra graph tools. A saved project in Station mode uses the Station mode
bar instead of those usual controls.

## On a phone

Studio uses a compact workflow interface with blocks and sheets for parameters,
history, and projects. Once a workflow has blocks, its project menu includes
project actions, a graph button, and Settings. With one block selected and
**Multi-Select** off, tap that block again to hide or show the controls,
including the project menu. The **Ask Penny** control opens the assistant sheet.

In the mobile graph view, use the visible **Fit to view**, **Auto arrange nodes**,
and **Close graph view** controls. **Multi-Select** lets you select several
nodes. Drag empty canvas to pan and use two fingers to zoom.

Mobile Settings has **Account** and **Variables** tabs. The full desktop
Settings list above describes the desktop layout. For running a workflow
someone has already packaged, [a Station](/docs/stations/using/) provides a
focused interface.

Continue with [Projects](/docs/concepts/projects/) to understand what Studio
saves and how a workflow stays editable.