> ## 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).

# Your First Project: From Blank Page to First Screen

# 🚀 Your First Project: From Blank Page to First Screen

Your account is created, the home page is empty, and there's that big **"New project"** button. This article holds your hand from that click all the way to the moment a sentence you wrote shows up in a real player. 🎬

**The expected result**: a tiny but complete application — it starts, it displays your sentence, it stops. Nothing more, and that's exactly the point: you'll have touched every one of Celestory's founding gestures at least once.

**Time needed**: about 10 minutes, two of them spent on a wall that almost everyone hits and nobody sees coming. We've put it in the right spot in this walkthrough, right before you fall into it.

🔺 No technical prerequisites. You won't write a single line of code, and you won't need any file, image or sound.

---

${frame}[Video: Your First Project](https://celestory-docs-videos.netlify.app/en/construction-graphe/your-first-project.html)

## 1️⃣ Creating the project

On the home page, click the **New project** card — its subtitle sets the tone: *"Start a new blank project from scratch."*

A window opens and asks you for four things, and four only:

| Field | Required? | What it's for |
|---|---|---|
| **Name of the project** | ✅ Yes | The name shown everywhere. While it's empty, a red **"Name required"** message sits under the field. |
| **The credits of your experience** | No | Your thanks, your signature. Editable later. |
| **Description of the project** | No | A free-form summary. Editable later. |
| **Image** | No | The thumbnail for the project's card on your home page. |

Fill in the name, leave everything else as it is, click **Create**. The editor opens straight into your new project.

⚠️ **You are not asked to pick a template.** Despite Celestory having several templates, this window doesn't offer a choice of any: every new project is created as **Chatbot**, with no alternative available at this point. If you wanted a Visual Novel, that will be a module you add afterwards — not a checkbox here.

---

## 2️⃣ Taking stock: what Celestory just created for you

Take ten seconds to look at what's in front of you. It's worth it, because there's very little — and knowing exactly *how* little will save you a lot of confusion.

**In the graph, there is exactly one block**: a green rectangle named **Start**, sitting a little towards the top left of the workspace. That's it. No sample dialogue, no choice, no wire.

**Backstage, there are already three menus** (the blue project button, top left → **Menus**):

-   a **Main menu** with a single **Start** button already wired to your module;
-   a transparent **HUD** with a ⏸️ button;
-   a **Pause** overlay menu, with **Resume** and **Save and quit**.

**And there is nothing else**: zero variables, zero characters, zero stages, zero content resources. Your Chatbot module's character list is literally empty.

🔺 This is the key to everything that follows: the menus are ready to launch a story, but **the story itself is empty**. A fresh project is a working shell wrapped around content that doesn't exist yet.

---

## 3️⃣ Placing your first block — and wiring it in the same move

This is where the difference between a smooth first session and twenty minutes of confusion gets decided. There are two ways to add a block; only one is recommended for your very first.

### ✨ The right method: pull a wire into empty space

Look at the right edge of the **Start** block: it carries a small **hollow triangle**. That triangle is its output.

1.  Click that triangle and **drag** towards an empty area of the graph, to the right.
2.  Release **in empty space**.
3.  A **"Connect to…"** menu opens, with a search field.
4.  Type `alert` and choose the **Alert (in)** entry.

The **Alert** block appears right where you released the mouse, **and it's already wired** to the Start block. One move, two problems solved.

🔺 **Why Alert and not Dialogue?** Because Alert only asks for one thing: text. The **Dialogue** block, on the other hand, starts by asking you *"Choose your first character:"* — and since your project doesn't have any yet, you'd have to create one first. An excellent second step, a bad first one.

⚠️ **The "Most used blocks" menu lies a little.** On a fresh project, this section is pre-filled with four blocks picked in advance — **Alert, Assign, Choice, Condition** — even though you haven't used anything yet. And Dialogue, which should logically be there, isn't: it sits further down, under **Other blocks**. Don't look for logic in this ranking until you've actually built something.

### 🔺 The other methods, and the trap that comes with them

You can also add a block via the **Add block** button in the top bar, or by **right-clicking** the graph → **Add block**.

-   **Right-clicking** drops the block right where you clicked: clean, but the block arrives **unwired**.
-   The **top-bar button** drops the block at the centre of the view… except as long as you haven't panned or zoomed the graph. On a freshly created project, that centre is still `0,0` — which is **exactly the Start block's position**.

⚠️ **A block can sit exactly on top of another, pixel for pixel, with no warning at all.** Celestory stacks blocks without ever checking whether they overlap. If you use the top-bar button as your very first move, your new block will land **on top of** the Start block, and you'll think nothing happened. The fix is simple: drag the top block aside to reveal the one underneath — or, better, use the wire-pulled-into-empty-space method.

### 🔎 While we're at it: triangles and circles

Two shapes coexist on the edges of blocks:

-   **triangles** carry the story's flow (the order things happen in);
-   **circles** carry values (a text, a number, an image).

And in both cases: **hollow = nothing is plugged in, filled = something is plugged in.** One glance is enough to tell whether your graph holds together. Remember this, we'll come back to it in step 6.

---

## 4️⃣ Writing your sentence

**Double-click** the Alert block.

⚠️ A **single click only selects** the block — it doesn't open it. This is beginners' number-one cause of "I can't edit my block." Double-click, always.

A floating window opens. It contains:

-   right at the top, an **"Add custom title…"** field — this is the name the block will display on the graph. Optional, but very useful once your graph goes past five blocks;
-   further down, one field per **point** on the block. The one you care about is called `text`.

🔺 Point names are translated into the interface language (in French, `text` becomes `texte`), except the two flow points `in` and `out`, which stay the same in every language.

Click inside the `text` field and write your sentence — for example:

> Hello, and welcome to my very first Celestory experience.

It's a rich text editor: bold, lists and fonts are available in its toolbar. For this first try, plain text is more than enough.

Close the block window. The graph now shows two blocks connected by a wire. ✅

---

## 5️⃣ Saving — by hand, right now

⚠️ **Celestory never saves on its own.** There's no autosave, no periodic background save, and **no warning if you close the tab.** The browser will let you leave without a word, and everything you just did will vanish.

Two ways to save, and they do the same thing:

-   the **floppy-disk** button in the top bar (its tooltip reads: *"Save graph in the cloud."*);
-   the **`Cmd+S`** shortcut (`Ctrl+S` on Windows).

A **"Saving project…"** banner appears, then a green **"Project saved"** banner — that exact wording, hard-coded in English regardless of your interface language. Until you've seen that green banner, nothing is safe.

⚠️ The shortcut is ignored while your cursor is inside an input field (such as the Alert's `text` field): click on the graph first, then press `Cmd+S`.

🔺 Get into the habit of hitting `Cmd+S` after every change that cost you some effort. It's the only safety net there is.

---

## 6️⃣ Playing it

Click the **Play current module** button (▶ icon, top right of the bar). Its tooltip shows `Shift+P`, but that shortcut does nothing: click the button.

Two windows open:

-   **Play test** — the player itself, a phone-shaped window (360 × 680 pixels, the default portrait format for any new project);
-   **Debug** — a small panel on the right, with three tabs: **General**, **Variables**, **Display**.

Your sentence should appear in the player. 🎉 Then nothing else: that's normal, the Alert block's output isn't wired to anything further, so the story stops there. You've just built, start to finish, a working Celestory experience.

🔺 **Two ways to play, not to be confused.** Clicking the button directly launches **"Play current module"**: it starts straight at the Start block and skips your menus entirely. If you hover the button without clicking, a small menu additionally offers **"Open menu Main menu"**: that one shows your home screen, with its **Start** button, the way a real user will see it. Try both: they don't tell the same story.

🔺 Good news along the way: the player runs the **current state of your editor**, not the last saved version. So you don't need to save to test. You need to save so you don't **lose** what you're testing.

---

## 🧱 The wall: "I pressed Play and nothing happens"

This is the wall promised in the introduction, and it's almost inevitable if you added your block any other way than by pulling a wire into empty space.

**The symptom.** You click Play. The window opens, the default background shows up… and nothing else. No text, no button, no error message. If you went through the home menu, the **Start** button does respond — the screen just goes blank.

**The cause.** The **Start** block isn't wired to anything. Celestory knows where to begin, but has no idea what comes next, so it does nothing. A block placed without being wired is a dead block.

⚠️ **And above all: no one will tell you.** Celestory can detect three compile errors — no start block, several start blocks, an unrecognised block type — but these errors are shown **in no interface at all**. They only go out to the browser's technical console, which you have no reason to open. Silence is therefore not a sign that everything's fine: it's just silence.

**The three-second diagnosis.** Two reflexes, in this order:

1.  **Look at the triangles.** On the right edge of the Start block, a **hollow** triangle means: nothing leaves from here. That's your answer.
2.  **Read the Debug window**, **General** tab. It shows **"Current block"** with its ID and name. If it stubbornly keeps telling you the current block is `start`, playback never moved a single step. The **"Center view on block"** button even snaps the graph straight onto the culprit.

**The fix.** Drag a wire from the Start block's triangle to the input triangle (on the left) of your Alert block. Play again. Solved.

🔺 This wall is the first of a small family of failures that never announce themselves. Once your first screen works, the article **"When nothing works, and nothing tells you why"** catalogues the rest: stages that won't load, invisible lines, stories that freeze. Keep it handy, just not before you finish this one.

---

## ✅ The six-step recap

1.  **New project** → a name → **Create**. (No template choice: it'll be a Chatbot.)
2.  Notice there's **one block**, three menus, and nothing else.
3.  **Pull a wire** from the Start block's triangle into empty space → **Alert (in)**.
4.  **Double-click** the Alert block → write your sentence in the `text` field.
5.  **`Cmd+S`** → wait for the green banner.
6.  Click **Play current module** → read your sentence on screen.

If a project ever refuses to start, work back up this list: nine times out of ten, the answer is at step 3.

---

→ Next step: you connected two blocks without really looking at what you were doing. The article **Connecting Two Blocks: The Wire, the Triangles and the Circles** explains what these shapes mean, what can plug into what, and why some wires get refused. 🔗