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

# Helios Studio

> Browser-based IDE for developing and previewing Helios video compositions

Helios Studio is a visual development environment for programmatic video. It provides a timeline, props editor, and real-time preview for building Helios compositions.

## Features

* **Visual timeline** - Scrub through frames, manage playback, and navigate your video
* **Props editor** - Adjust composition inputs dynamically with a schema-aware interface
* **Assets panel** - Manage and preview project assets (images, audio, video)
* **Renders panel** - Track render jobs and client-side exports
* **Hot reloading** - Instant feedback when you modify composition code
* **Diagnostics** - Inspect environment capabilities and system status
* **Client-side export** - Export MP4/WebM directly from the browser using WebCodecs

## Getting started

The recommended way to use Studio is through the Helios CLI.

### Initialize a new project

Scaffold a project with your preferred framework:

```bash theme={null}
npx helios init my-project
```

You'll be prompted to choose from React, Vue, Svelte, Solid, or Vanilla JavaScript.

### Install dependencies

```bash theme={null}
cd my-project
npm install
```

### Start Studio

```bash theme={null}
npm run dev
```

This launches the Studio development server, typically at `http://localhost:5173`.

## Commands

### Start development server

```bash theme={null}
npx helios studio
```

Launches the Studio UI for the current directory. This is what `npm run dev` typically executes in scaffolded projects.

### Preview production build

```bash theme={null}
npx helios preview
```

Serves the static build output using Vite preview mode, providing a production-like environment for verifying your composition before deployment.

### Compare component

```bash theme={null}
npx helios diff <component-name>
```

Compares your local component implementation against the official registry version, highlighting any modifications you've made.

### List components

```bash theme={null}
npx helios components [query] [--all] [--framework <name>]
```

Lists available components in the registry. Filter by name/description, framework, or show all components.

## Keyboard shortcuts

| Key                | Action                    |
| ------------------ | ------------------------- |
| `Space`            | Play / Pause              |
| `Arrow Left/Right` | Previous / Next Frame     |
| `Shift` + `Arrow`  | Jump 10 Frames            |
| `Home`             | Go to Start               |
| `I`                | Set In Point              |
| `O`                | Set Out Point             |
| `L`                | Toggle Loop               |
| `Cmd/Ctrl` + `K`   | Open Composition Switcher |
| `?`                | Open Shortcuts Help       |

## Architecture

Studio acts as a host environment for the Helios Player.

* **Frontend** - React-based UI wrapping the `<helios-player>` component
* **Backend** - Vite plugin (`vite-plugin-studio-api`) providing API endpoints for file discovery, asset management, and render orchestration
* **Context** - `StudioContext` manages global state (active composition, player state, assets)

## Standalone installation

You can install Studio globally without initializing a project:

```bash theme={null}
npm install -g @helios-project/studio
```

Then run from any directory:

```bash theme={null}
helios-studio
```

## Development

To contribute to Studio or run it locally:

```bash theme={null}
# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test
```