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. 🏡

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.

┌──────────────────────────────────────────────────────────────┐
│  🔝 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:

---

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 ". 🎛️

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.
2. 🖥️ Your module opens exactly as it will appear to the end user.
3. 🎯 Play, click, answer — just like a real user.
4. 🔄 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.

🔺 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. 🚀