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:

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

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:

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