helios-studio

Run a local development server for Helios compositions with hot-reload and asset management.

94|6|Updated Aug 12, 2025
One-click install
npx skills add https://github.com/BintzGavin/helios --skill helios-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: helios-studio
Source: https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios/studio
Command: npx skills add https://github.com/BintzGavin/helios --skill helios-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helios Studio provides a local development and preview environment for building and testing Helios compositions, enabling hot-reload, asset management, and a unified editor workflow.

Core Features & Use Cases

  • Playback & Preview: Interactive timeline with hot reloading, audio controls, and safe-area guides.
  • MCP Server & Props Editor: Inspect composition schemas, update input props, trigger renders for AI agents, and manage groupings.
  • Assets & Render Management: Manage assets in the assets/ panel, trigger renders, and export outputs for client delivery.

Quick Start

Run the studio from your project root: npx helios studio This starts a local server (typically at http://localhost:5173) where you can view and debug your composition.

Frequently Asked Questions about helios-studio

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview Helios compositions with hot-reload during local development?▼

To preview Helios compositions with hot-reload, launch the integrated development server using the npx helios studio command. This starts a local Vite-based server at http://localhost:5173, providing an interactive timeline with hot reloading and audio controls for live editing.

What is an MCP server used for in composition development?▼

An MCP server in composition development allows AI agents to inspect composition schemas, update input props via a props editor, and trigger renders. It enables automated management and interaction with your Helios compositions during the local development process.

Do I need Node.js and npm to run the Helios development server?▼

Yes, you need Node.js and npm installed because the Helios development server relies on a Node.js environment and a Vite-based workflow. You execute the studio locally using the npx helios studio command from your project root.

How do I manage assets and export renders for client delivery?▼

You manage assets and export renders for client delivery using the integrated assets panel. Place media files in the assets/ directory, trigger renders directly through the editor, and export the final outputs for client delivery from the local development server.

Can I automate Helios composition tasks using local scripts?▼

Yes, you can automate Helios composition tasks using an optional scripts/ directory for automation. Combined with the MCP server, this allows you to automate prop updates, render triggering, and asset management within your local Vite-based workflow.