🗺️ The Graph Interface (Visual Scripting)

Celestory Creator's main workspace is built on a node graph interface. Rather than writing code top to bottom or configuring fixed screens left to right, you design your creations the way you would draw an infinite mind map. ✨
Data and the user's journey physically travel through cables (the Links) that connect the various actions (the Blocks) to one another. 🔗

1. 🧭 Navigating the Canvas (Infinite View)

The graph is optimised to display hundreds of interconnected Blocks on screen without slowing down. 🏎️💨

Finding your way around

• 🤚 Pan: to move around the canvas, just click an empty area of the grid and drag your mouse, or use the middle mouse button.
• 🔍 Infinite Zoom: use your mouse wheel or a two-finger pinch on your trackpad to zoom out for an overview of your module's architecture, or zoom in on one very specific micro-setting on a block's point.
• 🧭 Recentering: three buttons in the bottom right of the canvas let you zoom in, zoom out and zoom to fit everything at once — handy when you have got lost in a large graph.
• 🔺 The canvas background is plain and blocks land exactly where you drop them: there is no snapping. Get into the habit of spacing out your graph yourself as you go.

2. 🧱 Anatomy of a Block (the "Nodes")

In Celestory, "Nodes" take the form of Blocks. Building a graph means connecting these Blocks. But how do you read a Block on screen? 🤔
Each block is visually divided into 3 main areas:

🏷️ The Header

It usually carries the icon and the category name (e.g. Image, Condition, Generate JSON). This is the area you "grab" to move a Block freely around the canvas.

⬅️ Left Side: The Inputs

These are the "sockets" (or ports) through which data and execution enter the Block.

• ▶️ The incoming Execution port (the "Play" arrow): this is where the story flow arrives (the fact that this action has to fire at this precise moment).
• 📥 The incoming Data ports (Values): they define the items the block must "consume" to work. For a Maths block (Addition), for instance, the two incoming data ports would be the "Number A" and "Number B" it is in charge of reading before doing its job.

➡️ Right Side: The Outputs

Once the block has done its job (showing an image, computing a sum, checking a condition), the energy leaves through the right.

• ⏯️ The outgoing Execution ports: they tell the next Block "your turn!". Some blocks (like the Condition block) have several execution outputs (usually "true" and "false", or "condition met" / "not met") to create branches (the famous "choice trees").
• 📤 The outgoing Data ports: the Block's answer. If you wire that answer into a new Block, the data has travelled correctly.

3. 🔌 Drawing Links (Connecting the Logic)

In Celestory, you literally wire your application. ⚡

1. 🎯 Create a Link: click an incoming or outgoing port (a small circle, say, or an arrow symbol on the right of a Block) and hold the click to "pull" the wire.
2. 🤝 Drop it on the destination port: release the link on the port of the next Block you want to connect. The interface will visually confirm that a cable joins the two elements.
3. ✂️ Destroy a Link: you can click an already-linked port to "tear off" the cable and drop it into empty space to delete it, or plug it in somewhere else.

💡 Link Typing

Celestory's graph is safe 🛡️. It prevents technical errors in real time by checking your data types.

• 🚥 Visual typing: if you try to link an incoming "Text" to a socket expecting a "3D Image", the graph will refuse to create the path or will show you a visual warning. You can only link what is mathematically and logically compatible, which avoids crashes when a final module is compiled.

4. 🖱️ Direct Interaction Inside the Interface

Even though no coding is required, the interface includes very advanced IDE-grade tools, right inside the Blocks:

A. 📝 The Rich Media Editor

In Dialogue, Narrator and Alert blocks, a formatting bar appears above the text area, inside the block's editing window.
You do not need any CSS: bold, italic, underline, strikethrough, plus the choice of font, size and colour of the text, are all a click away. ✨
🔺 Headings, bullet lists and quotes are not offered in these blocks: they live in the Rich text resource, which has a fuller toolbar.

B. 💻 The Embedded IDE!

Need to go one step further? In the Blocks that call for complex formatting (CSS injection, HTML5, or a snippet of JavaScript code), double-click the block: its editing window brings up the Monaco editor (the engine behind Visual Studio Code, embedded in Celestory).
That gives you all the benefits of a real code editor: dynamic syntax highlighting, line numbering and automatic bracket closing. 🚀

4bis. 🧩 Injecting a Variable into Text: Double Curly Braces

This is one of Celestory's most distinctive mechanisms, and it comes down to a single rule:
any word written between double curly braces in a text field automatically creates a new input point on the block.
For example, in a Dialogue block:

Hello {{FirstName}}! You have {{Score}} points.

As soon as you write this, two new inputs appear on the block: FirstName and Score. All that is left is to connect them to the matching variables, like any other point. At runtime, Celestory replaces each reference with the value it receives. 🪄
🔺 Two classic mistakes:

• a single curly brace ({FirstName}) triggers nothing: the text will be displayed as is;
• an input that is created but never connected stays empty at runtime. Creating the point is not enough, you have to wire it.

This mechanism works in ten blocks: Format text, Notification and HTML5 (all templates), Dialogue, Choice with dialogue, Narrator and Alert (Chatbot), Dialogue, Alert and Slide (Visual Novel).
🔺 A third, less visible mistake: the name may only contain unaccented letters, digits and underscores. {{Café}} with an accent, {{my-score}} with a hyphen or {{ FirstName }} with spaces are not detected, with no message at all. And case matters: {{firstname}} and {{FirstName}} are two different points.

5. ⚡ Productivity Tips and Shortcuts

As your graph grows (the heaviest modules often go past 100 linked Blocks, in cobweb architectures or symmetrical branches), mastering these actions will save you precious days:

1. 📦 Box Select: you can hold Shift + Left click (or draw a selection rectangle with the mouse) to scoop up several Blocks at once. The highlighted Blocks can then be moved as one while keeping their internal topology. Ideal for "airing out" your Graph with a flick of the wrist.
2. 👯 Quick Duplication: select one or more blocks, then Cmd+C and Cmd+V to paste the structure. The right-click menu then offers a Paste entry. The copy keeps the settings, but not the links to your other blocks.
3. 🗑️ Quick Deletion: select the unused Blocks or the broken links and press the Delete key (or Backspace) to prune your design on the fly.
4. 🤏 Collapsing/Expanding Blocks: some large nodes have a collapse button so they take up as little canvas space as possible while keeping their settings safe. Remember to collapse them to gain room.

→ Next step: learn to break up your sprawling Graphs with repeatable Modules and Functions, so you do not end up duplicating the same hundreds of Blocks. 🚀

Updated on: 21/09/2026