workflow-preview-composition
CommunityPreview Helios compositions in the Studio.
System Documentation
What problem does it solve?
This workflow guides you through launching the Helios Studio to preview, debug, and iterate on your video composition in the browser.
Core Features & Use Cases
- Preview and iterate Helios compositions directly in the browser using the Studio.
- Live editing with hot reload to see changes instantly without restarting the preview.
- Manage timing and props with a built-in timeline and a Props Panel for dynamic adjustments.
Quick Start
Run npx helios studio from your project root to start the Studio. A local server is launched (typically at http://localhost:5173). Open the URL in your browser to view the Video Preview, Timeline, and Controls. Use the Timeline to Play/Pause with Space, scrub, step frames with Arrow keys, and toggle Looping with L. Changes you make in your code are hot-reloaded in real time, preserving the current frame. If your composition uses inputProps defined in a schema, adjust values via the Props Panel to see immediate effects.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: workflow-preview-composition Download link: https://github.com/BintzGavin/helios/archive/main.zip#workflow-preview-composition Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.