> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# The Creator Interface and Menus

# 🖥️ The Creator Interface and Menus
Welcome to the heart of Celestory: the Creator. This is the web app you open in your browser to design, test and publish your interactive experiences. This guide walks you through every corner of its interface so you feel at home from your very first session. 🏡
---
${frame}[Video: the Creator interface and menus](https://celestory-docs-videos.netlify.app/en/panorama-ia/interface-et-menus-du-creator.html)

## 1. 🗺️ Interface Overview
The Creator screen comes down to three areas: a top bar, a panel on the left, and the canvas filling everything else. Settings open in **floating windows** that you can move around and stack on top of the canvas.
```plain text
┌──────────────────────────────────────────────────────────────┐
│  🔝 TOP BAR                                                  │
│  Project menu · Undo/Redo · Add · Save                       │
│  Publish · Share · ▶ Play current module · Profile           │
├────────────┬─────────────────────────────────────────────────┤
│            │                                                 │
│  📚       │     🗺️  CENTRAL CANVAS                         │
│  MODULES  │     (The Node Graph)                            │
│  PANEL    │                                                 │
│            │     ┌───────────────────────────┐              │
│  Start    │     │ 🪟 Floating window         │              │
│  graph    │     │ (editing a block,          │              │
│  Charac-  │     │  files, variables…)        │              │
│  ters     │     └───────────────────────────┘              │
│  Stages   │                                    🔍 Zoom ↘    │
│  Context  │                                                 │
└────────────┴─────────────────────────────────────────────────┘
```
🔺 There is **no** properties panel docked on the right, and no console bar at the bottom: everything you configure opens in a floating window.
---
## 2. 🔝 The Top Bar
This is the permanent ribbon running across the top of the screen. It gathers the global commands for your project.
### 🏠 The Project Menu
-   Top left, the blue button carries your project's name. **Hovering over this button opens the project menu**, which is where every tool window opens from (Files, Variables, Menus, Style…). It is your main entry point: make it a reflex to go there whenever you are looking for something.
-   To **rename** your project or go back to your project list, use *Project* in that same menu.
### 💾 Saving
-   **Manual save**: the floppy-disk button, or the `Cmd+S` shortcut (`Ctrl+S` on Windows), stores your graph in the cloud. 🔺 **Get into the habit of saving before any delicate operation**: the interface shows no permanent "saved" indicator.
-   **Undo / Redo**: the two arrows, or `Cmd+Z` and `Cmd+Shift+Z`.
### ➕ Add a block
-   The `+` button opens the list of available blocks, with a search field. (See §5.)
### ▶️ Preview & Testing
-   **Play current module**: runs your module exactly as the end user will experience it, with no compiling and no publishing. 🧪
### 📤 Publishing & Export
-   **Publish**: compiles your project into a standalone web app, ready to be shared or hosted.
-   **Share**: gives other team members access to the project.
-   **Import/Export modules**: from the project menu, to archive a project or move it to another environment.
### 👤 Profile
-   On the right, your avatar gives access to your account and your subscription.
---
## 3. 📚 The Modules Panel (on the left)
This panel shows your **project architecture**, and nothing else. You can make it semi-transparent or hide it with the two small buttons in its header.
A Celestory project is not one monolithic graph. It is split into **Modules** (independent sub-graphs), each containing:
-   **Start graph**: the module's entry point. 🔱
-   **Characters**: who speaks in your dialogues (name, image, appearance, entrance effect).
-   **Stages**: the available backgrounds.
-   **Context**: opens the « Project variables » window (variables belong to the whole project, not to the module).
-   **Module settings**: template, app style, block styles.
-   **Global graphs**: shared across all modules.
The **+ Add** button at the bottom creates a new module. The *Open module* block lets you call one module from another, like a reusable "function". 🌳
### 🪟 The tool windows
Everything else — files, variables, menus… — lives in windows opened **from the project menu** (the blue button in the top left), not from this panel:
| Window | What it is for | Shortcut |
|---|---|---|
| Project | Rename, go back to the list | |
| Search blocks | Find a block in a large graph | `Cmd+Shift+F` |
| History | Previous versions of the project | `Cmd+Shift+H` |
| Labels | Organise your blocks by label | `Cmd+Shift+L` |
| Files | Your media library (images, sounds, videos, fonts…) | `Cmd+Shift+E` |
| Variables | The project's variable registry | `Cmd+Shift+V` |
| Menus | Your app's menu pages | `Cmd+Shift+U` |
| Generate | Text, image, video, audio, and connectors | `Cmd+Shift+G` |
| Style | Your application's theme | `Cmd+Shift+X` |
| Analytics | How your app is actually used | `Cmd+Shift+A` |
| Integrations | Your external connections | |
| Translate | Your app's languages | `Cmd+Shift+K` |
| Project settings | | `Cmd+Shift+,` |
---
## 4. 🪟 The Block Editing Window
This is where the details of each node are set, and it is the single most frequent gesture in the whole tool.
### 👉 Double-click a block
A **single click** only **selects** the block (it gets a blue outline) — handy for moving or deleting it. To open its settings, you have to **double-click**. A floating window opens, titled "Editing block <name>". 🎛️
### What you find in it:
-   **Custom title**: rename the block so you can find your way around a complex graph (e.g. "Dialogue — Level 2 intro").
-   **The inputs and their links**: every input point is listed, with a *Disconnect* button if a link already arrives there.
-   **The block's own fields**: they differ from one block to another. A Dialogue block offers a character and a text editor; an Image block, a file picker; a Condition block, a logic rule.
-   **Edit block style**, when the link is present: ⚠️ despite its name, it opens the appearance of the **whole module**, not that one block's. The link only appears on block families that have an appearance section, and only inside a Chatbot module.
🔺 The window stays open while you work on the canvas; you can move it by its header, resize it, and open several at once. The CSS, HTML5 and *Run Javascript* blocks open a real code editor in it.
🔺 Two pitfalls: double-clicking a **link** (rather than a block) inserts a Connector block; and **switching modules closes every open editing window**.
---
## 5. 🗺️ The Central Canvas (The Graph)
This is the largest and most important area — the infinite space in which you build your creation. (See the dedicated tutorial: The Graph Interface.)
### The essential gestures:
-   🤚 **Pan**: left-click on empty space + drag.
-   🔍 **Zoom**: mouse wheel, or the buttons in the bottom right (one of which is a "zoom to fit" button).
-   🧱 **Add a block**: the `+` button in the top bar, or **right-click → Add block**. A list opens, with a **search field** at the top, then two sections: **Most used blocks** and **Other blocks** (alphabetical). Type the first few letters — by far the fastest route. Clicking the name adds the block. A ⭐ marks the blocks reserved for the Business plan, labelled « ORGANIZATION » (HTML5, HTTP Request, MCP… not only the AI blocks).
-   🔗 **Connect two blocks**: click a point and drag the wire to the target point.
-   ⚙️ **Configure a block**: **double-click** (see §4).
-   🗑️ **Delete**: select, then `Delete` or `Backspace`.
🔺 A block you have just added lands at a default spot on the canvas: it may **cover an existing block**. If your new block seems not to have appeared, move it — the old one is probably underneath.
### 📋 The Context Menu (Right Click)
A right click, on the canvas as well as on a block, opens a short menu:
-   💬 **Comment**: drops a free-form note on the canvas, for you or your team.
-   ➕ **Add block**.
-   📋 **Paste**, when something was copied beforehand.
The other actions (copy, delete) go through the keyboard shortcuts in §7.
---
## 6. 🎮 The Preview (Test Mode)
One of Celestory's major strengths: you can test your experience in real time without ever leaving the Creator. 🧪
### How it works:
1. ▶️ Click **Play current module** in the top bar.
1. 🖥️ Your module opens exactly as it will appear to the end user.
1. 🎯 Play, click, answer — just like a real user.
1. 🔄 Go back to the editor, change a block, run it again: the loop is instant.
🔺 Remember to save (`Cmd+S`) before starting a test, so you are sure you are playing the latest version.
---
## 7. ⌨️ The Essential Shortcuts
On Windows and Linux, replace `Cmd` with `Ctrl`. The full list, canvas included, is in
the dedicated article **The Creator's Keyboard Shortcuts**.

| Action | Shortcut |
|---|---|
| Save | `Cmd+S` |
| Undo / Redo | `Cmd+Z` / `Cmd+Shift+Z` |
| Select all · Copy · Paste | `Cmd+A` · `Cmd+C` · `Cmd+V` |
| Group the selected blocks | `Cmd+G` |
| Delete (blocks, links, groups) | `Delete` or `Backspace` |
| Zoom in / zoom out · Fit · Recenter | `+` / `-` · `F` · `C` |
| Search blocks | `Cmd+Shift+F` |
| Files · Variables · Menus | `Cmd+Shift+E` · `Cmd+Shift+V` · `Cmd+Shift+U` |
| Generate (AI Generation) | `Cmd+Shift+G` |
| History · Style · Labels | `Cmd+Shift+H` · `Cmd+Shift+X` · `Cmd+Shift+L` |
| Translate · Analytics | `Cmd+Shift+K` · `Cmd+Shift+A` |
| Project settings | `Cmd+Shift+,` |

🔺 A few combinations show up in tooltips or menus without being active on the keyboard:
`Shift+P` (Play), `Shift+S` (Share), `Shift+B` (Publish), `Cmd+Shift+I` (Integrations) and `F1`.
Use the top bar buttons for those four.

---

→ Next step: now that you know where everything is, dive into the canvas with the tutorial **The Graph Interface**. 🚀