> For the complete documentation index, see [llms.txt](https://help.blings.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.blings.io/apps/blings-studio/editor-workspace.md).

# Editor Workspace

Studio keeps the main MP5 editing surfaces on one screen: project actions at the top, scene navigation on the left, connectors or tools beside the scene list, the live canvas in the center, scene properties on the right, and timeline controls at the bottom.

<figure><img src="/files/lY3kEjdsCFkE5JNel0Oa" alt="Studio editor showing scene list, connectors, canvas, scene properties, and project actions"><figcaption></figcaption></figure>

## Workspace Areas

<figure><img src="/files/9defcEQM92yAbVQhKSKk" alt="Studio project bar with interaction modes, Flow Map, Data, Save Project, View Draft, Publish, and canvas context"><figcaption></figcaption></figure>

* **Project bar** contains undo, redo, interaction mode, Flow Map, Data, Save Project, View Draft, Publish, and menu controls.
* **Scene list** shows every scene in the project, including duplicates and alternate routing scenes.
* **Canvas** previews the current scene in the viewer frame.
* **Connector panel** lists editable connections in Connect mode.
* **Scene properties** exposes scene-level size, duration, colors, and assets.
* **Timeline** controls layer timing and frame-level sequencing.

## Interaction Modes

{% tabs %}
{% tab title="View Mode" %}

<figure><img src="/files/wTMWlq1p9aWEO7VnRlsG" alt="Studio view mode with canvas preview and scene properties"><figcaption></figcaption></figure>

View mode is used to inspect the MP5 experience without editing connector mappings. It keeps the canvas prominent and supports playback-oriented review.
{% endtab %}

{% tab title="Design Mode" %}

<figure><img src="/files/wFIZlMChSUGPCmYcEP4z" alt="Studio design mode with canvas, assets, colors, and expanded timeline"><figcaption></figcaption></figure>

Design mode exposes canvas tools, scene properties, colors, assets, and timeline controls. Use it to adjust visual composition, scene settings, and layer timing.
{% endtab %}

{% tab title="Connect Mode" %}

<figure><img src="/files/pZ7imt6sdRmFqoo1lmCf" alt="Studio connector detail with selected text connector and mapped values"><figcaption></figcaption></figure>

Connect mode focuses on the relationship between the creative layers and the data that drives them. Text, layer hide, color, and media connectors appear in the connector list with their current mapped values.
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Changing modes changes the editing surface, not the project delivery state. Save Project is used when edits need to be stored.
{% endhint %}

{% content-ref url="/pages/aW68QWx8104Pv6Dytu64" %}
[Connectors](/apps/blings-studio/connectors.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://help.blings.io/apps/blings-studio/editor-workspace.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.