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

# Content Management (Rich Media & Assets)

# 📂 Content Management (Rich Media & Assets)
In Celestory Creator, building interactive experiences is not limited to drawing logical links. The software ships with deep, centralized management of your multimedia content (text, images, sounds, 3D) so that you can design a rich, finished product straight from the browser. ✨
This guide details how Celestory handles and organizes the different kinds of media and text within your projects.
---
## 1. ✍️ The Built-in Rich Text Editor
No more flavourless plain text! The narrative blocks — **Dialogue, Narrator, Alert, Notification, Choice with dialogue** — and the **Rich text** resource come with a visual text editor. 🎯
🔺 Two useful clarifications: the **Comment** block (the free-form note placed on the canvas) only has a plain text area, and the **HTML5** block opens a **code** editor, not a visual one.
### Formatting features
Double-click the block to open its editing window: a toolbar sits above the text area and lets you format your content without writing any HTML or CSS.
**In the narrative blocks (Dialogue, Narrator, Alert…):**
-   🎨 Bold, Italic, Underline, Strikethrough.
-   🔤 Choice of **font** and **size**.
-   🌈 **Text color**.
-   🎭 Inserting a **character** into the dialogue line.
**In the Rich text field**, the toolbar is more complete and adds:
-   📑 **Headings** (H1, H2, H3), **quotes**, bulleted and numbered **lists**.
-   ↔️ Paragraph **alignment**.
🔺 Neither hyperlinks nor highlighting (background color) are offered today. For clickable text or emphasis on a colored background, go through an **HTML5** block or the **CSS** block.
### 🧩 Variable Injection (Dynamic Text)
The main use of this editor is its ability to "interpolate" or "inject" dynamic data coming from the graph.
-   Principle: any word written between **double curly braces** in a text field **automatically creates a new input point on the block**. You then connect that point to a variable, and Celestory replaces the reference with its value at runtime.
-   Example: in a Dialogue block, write `Hello {{FirstName}}, welcome to this adventure!` 👋 A `FirstName` input appears on the block right away; connect it to the variable holding the player's first name.
-   🔺 **The double curly braces are mandatory.** `{FirstName}` with a single brace triggers nothing and will be displayed as is. And an input that is created but **not connected** will stay empty: creating the point is not enough, you have to wire it.
---
## 2. 🗃️ The Asset Manager (Images, Audio, Video, 3D)
Celestory centralizes all of your project's media files in a global Asset Manager. Instead of importing the same image five times into five different blocks, you import it once into your project and reference it wherever it is needed. 🖼️
### Supported media types
Celestory's cloud architecture is robust and handles a great many formats:
-   🏞️ Images: PNG, JPEG, WEBP, GIF, SVG (vector), ICO.
-   🎵 Audio: MP3, WAV, OGG, WEBM (for background music as well as sound effects).
-   🎞️ Video: MP4, WEBM, MOV.
-   🔤 Fonts: OTF and TTF, to dress your application in your own typography.
-   🎭 2D animation: **Spine**, to animate articulated characters. 🔺 A Spine character requires **three files**: the `.png` image, the `.json` file and the `.atlas` file, to be supplied separately in the Spine resource editor.
-   📄 Documents: JSON, text, Markdown, PDF, for raw data handling.
### 📥 Importing and using an Asset
1. Uploading: open the **Files** window (`Cmd+Shift+E`) and use the **+** button → *Add file(s)*. 🔺 Drag and drop from your computer is not supported: inside the media library, drag and drop only serves to file something into a folder.
1. ☁️ Cloud storage: Celestory optimizes (where needed) and stores the resource securely on its servers.
1. 👁️ Visual selection: when you click an "Image" or "Sound" field on a block, your project's gallery opens, letting you preview the asset before linking it to the block.
---
## 3. 🤖 On-the-fly AI Generation (native GenAI)
Celestory integrates generative artificial intelligence deeply. You no longer need to leave the Creator to find content. 🚀
### 🎨 In-Game Imagery
Through dedicated blocks (e.g. AI image request), you can generate visual content while creating, or better still, while the project is running for your users. The calls go out from Celestory's servers — your keys are never exposed — to **Fal** for image and video, and to **OpenRouter** for text, which gives access to many models (Mistral, OpenAI, Anthropic…).
### 💬 Smart Text and Data
The Creator can also connect to LLM models to generate dynamic dialogue, summaries, or to analyse a player's actions, making the interface no longer "sealed" but able to adapt in real time to complex inputs. 🧠
---
## 4. 🌐 External Connections (Headless Content / API)
Celestory excels at not storing content internally when you would rather it did not. 🔌
### ✂️ Separating the "Front" from the "Back"
For business-oriented projects or large serious games, it is often preferable for the text, images and data to come from a neutral external database — **Airtable** or **Baserow**, which each have their own dedicated block. For any other service, the **HTTP Request** block does the job.
-   🔌 Connector blocks: Celestory natively includes **Airtable** and **Baserow** request blocks.
-   ⚙️ How it works: rather than writing the text inside a Dialogue block, the Graph runs an operation "Fetch row 12 of the Airtable table", extracts the "Text" column, and sends it dynamically to the Dialogue block.
-   🚀 Benefit: 100% of the story content, the language translations or the product catalogue can be edited by a non-designer in Airtable. Celestory updates instantly without ever needing to open the Graph to recompile the application.
---
→ Next step: now that you know how to write formatted text and organize your media, discover how to compile this experience and push it to the Web through Deployment and Hosting. 🌍