# Main Editor View

The Main Editor is the primary working environment used to build and test a show. It is accessible at the root URL (`http://localhost:8123/`).

![Main editor screenshot](/files/RgFeIIKjMAblvraaQj9E)

## Header Bar

![Header bar](/files/XZEWR8BNqng6EBNvemYo)

| Element               | Description                                                      |
| --------------------- | ---------------------------------------------------------------- |
| **Logo / Brand**      | Customisable via `public/brand/` assets                          |
| **Screen tabs**       | One tab per configured output screen; click to switch the canvas |
| **+ Screen**          | Create a new output screen                                       |
| **Transport**         | Play, Stop, Pause, and timecode display for the active screen    |
| **Config**            | Open the system configuration panel                              |
| **Diagnostics**       | Toggle the Performance Diagnostics overlay                       |
| **Connection status** | Green dot = connected to engine; red = disconnected              |

## Composition Canvas

The central area shows a live preview of the active screen. The canvas scales to fit the available space.

* **Click** a layer thumbnail to select it and populate the Inspector.
* **Double-click** a layer to enter in-place editing mode (where available).
* **Right-click** on the canvas for a context menu with layer options.

## Keyboard Shortcuts

| Shortcut | Action                   |
| -------- | ------------------------ |
| `Space`  | Play / Pause             |
| `Ctrl+S` | Save project             |
| `Ctrl+Z` | Undo                     |
| `Ctrl+Y` | Redo                     |
| `Delete` | Remove selected item     |
| `Ctrl+D` | Duplicate selected item  |
| `F11`    | Toggle fullscreen editor |

## Theming & Branding

Exaplay 3 supports white-label theming. Place custom assets in `public/brand/`:

| File         | Purpose                                |
| ------------ | -------------------------------------- |
| `logo.png`   | Replaces the header logo               |
| `splash.png` | Splash screen shown on startup         |
| `brand.css`  | CSS overrides for colours, fonts, etc. |


---

# 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.exaplay.one/v3/user-interface/main-view.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.