Skip to main content
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: 
npx helios init my-project
You’ll be prompted to choose from React, Vue, Svelte, Solid, or Vanilla JavaScript.

​
Install dependencies

cd my-project
npm install

​
Start Studio

npm run dev
This launches the Studio development server, typically at http://localhost:5173.

​
Commands

​
Start development server

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

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

npx helios diff <component-name>
Compares your local component implementation against the official registry version, highlighting any modifications you’ve made.

​
List components

npx helios components [query] [--all] [--framework <name>]
Lists available components in the registry. Filter by name/description, framework, or show all components.

​
Keyboard shortcuts

KeyAction
SpacePlay / Pause
Arrow Left/RightPrevious / Next Frame
Shift + ArrowJump 10 Frames
HomeGo to Start
ISet In Point
OSet Out Point
LToggle Loop
Cmd/Ctrl + KOpen 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: 
npm install -g @helios-project/studio
Then run from any directory: 
helios-studio

​
Development

To contribute to Studio or run it locally: 
# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

Build docs developers (and LLMs) love

Get started for freeTalk to us