> ## Documentation Index
> Fetch the complete documentation index at: https://docs.altoura.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creator App Overview

> The **Creator App** is the training logic editor for Altoura Creator Studio. It's where you build interactive, scenario-based training by connecting **States** with **Transitions** — creating a visual flowchart that guides learners through your training.

Think of it like designing a choose-your-own-adventure story, but for professional training. Instead of pages, you have interactive moments (States), and instead of reader choices, you have events like taps, movements, or decisions that move the training forward.

## The Visual Canvas

At the heart of the Creator App is the **visual canvas** — a workspace where you design your training flow.

<Frame caption="The Creator App canvas with steps, 3D viewer, and properties panel">
  <img src="https://mintcdn.com/altoura-785c3552/tTpIMxdUL2IATdoa/creator-studio/creator-app/images/overview-canvas-full.png?fit=max&auto=format&n=tTpIMxdUL2IATdoa&q=85&s=19a4445cd198cf3602eb771084b954b8" alt="Creator App canvas showing steps, 3D viewer, and properties panel" width="3452" height="1730" data-path="creator-studio/creator-app/images/overview-canvas-full.png" />
</Frame>

<CardGroup cols={2}>
  <Card title="States (Nodes)" icon="circle">
    Appear as boxes on the canvas. Each state represents a moment or scene in your training.
  </Card>

  <Card title="Transitions (Arrows)" icon="arrow-right">
    Lines connecting states. Show how the training moves from one moment to the next when events occur.
  </Card>
</CardGroup>

When you open the Creator App, you'll see:

* **Canvas**: The center workspace with your steps and transitions
* **Properties Panel**: Opens with **Step Properties** on the ribbon. Holds **On Entry**, **Transitions**, and **On Exit** tabs for the selected step.
* **Add Action picker**: Opens inside the Properties panel tabs when you add an action. Search or browse actions by category.
* **Variable Inspector**: Manage all the data (variables) your training uses.

<CardGroup cols={2}>
  <Frame caption="Add Action picker — browse or search actions by category">
    <img src="https://mintcdn.com/altoura-785c3552/tTpIMxdUL2IATdoa/creator-studio/creator-app/images/overview-action-panel.png?fit=max&auto=format&n=tTpIMxdUL2IATdoa&q=85&s=afbce0fde8f899b5948a317fdbde71a1" alt="Add Action picker showing actions like Set Variable, Delay, Load Scene grouped by category" width="653" height="1024" data-path="creator-studio/creator-app/images/overview-action-panel.png" />
  </Frame>

  <Frame caption="Variables pane — view system, internal, meta, and custom variables">
    <img src="https://mintcdn.com/altoura-785c3552/tTpIMxdUL2IATdoa/creator-studio/creator-app/images/overview-variable-inspector.png?fit=max&auto=format&n=tTpIMxdUL2IATdoa&q=85&s=c68061a6dc87a2e5d4ee75d653cbdc5b" alt="Variables pane showing System Variables, Internal Variables, Meta Variables, and the Variables section with an Add Variable button" width="746" height="1414" data-path="creator-studio/creator-app/images/overview-variable-inspector.png" />
  </Frame>
</CardGroup>

## How Training Flows Through States

Training progresses in a clear sequence:

1. **Start state** fires (automatically, when the training begins)
2. Learner sees the state's scene in the 3D viewer
3. An **event** occurs (learner taps, moves, makes a choice, etc.)
4. An optional **condition** checks if the transition should fire
5. **Actions** run during the transition
6. Training moves to the **next state**
7. The next state's entry actions run, and the cycle repeats

This repeats until the training reaches a **Final state** — the end.

## Key Concepts at a Glance

<CardGroup cols={2}>
  <Card title="States" icon="rectangle-landscape">
    Discrete moments in the training. Each state has a 3D scene and can trigger actions on entry and exit.
  </Card>

  <Card title="Events" icon="zap">
    Things that happen: learner taps an object, moves it, makes a choice, or clicks Next/Back.
  </Card>

  <Card title="Transitions" icon="arrow-right-arrow-left">
    Connections between states. Can have conditions and actions that run during the move.
  </Card>

  <Card title="Conditions" icon="code">
    Logical rules (e.g., "score >= 80") that determine whether a transition fires.
  </Card>

  <Card title="Variables" icon="database">
    Named data storage (strings, numbers, true/false, objects, arrays) that persists across states.
  </Card>

  <Card title="Actions" icon="play">
    Things your training does: load a scene, play audio, show text, set a variable, send an event.
  </Card>
</CardGroup>

## Next Steps

Ready to dive deeper? Here's what you'll learn:

<CardGroup cols={2}>
  <Card title="States" href="/creator-studio/creator-app/states">
    Create and configure discrete moments in your training.
  </Card>

  <Card title="Events" href="/creator-studio/creator-app/events">
    Understand what triggers transitions: taps, moves, choices, and more.
  </Card>

  <Card title="Conditions" href="/creator-studio/creator-app/conditions">
    Build branching logic so your training responds to learner behavior.
  </Card>

  <Card title="Entry & Exit Actions" href="/creator-studio/creator-app/transitions/onentry">
    Learn what runs automatically when states start and stop.
  </Card>

  <Card title="Variables" href="/creator-studio/creator-app/variables/creating-variables">
    Store and use data throughout your training.
  </Card>

  <Card title="Conditional Transitions" href="/creator-studio/creator-app/transitions/conditional">
    Combine events, conditions, and actions into powerful branching flows.
  </Card>
</CardGroup>
