# Helios ## Docs - [Introduction to Helios](https://docs.heliosrender.com/introduction.md): A programmatic video engine that runs on web standards. Stop reinventing animation in JavaScript. Use the platform. - [Installation](https://docs.heliosrender.com/installation.md): Install Helios packages and set up your development environment for programmatic video creation. - [Quickstart](https://docs.heliosrender.com/quickstart.md): Create your first programmatic video with Helios in minutes. A hands-on tutorial from setup to render. - [System architecture](https://docs.heliosrender.com/concepts/architecture.md): Understanding Helios's native-aligned architecture and design philosophy - [Compositions](https://docs.heliosrender.com/concepts/compositions.md): How to structure and configure Helios video compositions - [Timeline and frame control](https://docs.heliosrender.com/concepts/timeline-control.md): Playback controls, seeking, and frame-accurate timeline manipulation - [Animation system](https://docs.heliosrender.com/concepts/animations.md): Using CSS animations, WAAPI, and animation libraries with Helios - [Driver system](https://docs.heliosrender.com/concepts/drivers.md): Understanding TimeDriver, DomDriver, NoopDriver, and custom time sources - [React integration](https://docs.heliosrender.com/frameworks/react.md): Use Helios with React for declarative video animations - [Vue integration](https://docs.heliosrender.com/frameworks/vue.md): Use Helios with Vue for reactive video animations - [Svelte integration](https://docs.heliosrender.com/frameworks/svelte.md): Use Helios with Svelte for reactive video animations - [Solid integration](https://docs.heliosrender.com/frameworks/solid.md): Use Helios with Solid for fine-grained reactive video animations - [Vanilla JavaScript](https://docs.heliosrender.com/frameworks/vanilla.md): Use Helios with vanilla JavaScript for maximum control and flexibility - [Animation helpers](https://docs.heliosrender.com/features/animation-helpers.md): Powerful animation utilities for creating smooth transitions and motion in Helios - [Sequencing](https://docs.heliosrender.com/features/sequencing.md): Timeline sequencing utilities for orchestrating complex animations in Helios - [Transitions](https://docs.heliosrender.com/features/transitions.md): Simple transition and crossfade utilities for smooth scene changes in Helios - [Audio tracks](https://docs.heliosrender.com/features/audio.md): Audio playback synchronization and multi-track audio control in Helios - [Captions](https://docs.heliosrender.com/features/captions.md): SRT and WebVTT subtitle support with automatic parsing and synchronization in Helios - [Local video rendering](https://docs.heliosrender.com/rendering/local-rendering.md): Render videos locally using the Renderer class with canvas and DOM capture modes - [Distributed rendering](https://docs.heliosrender.com/rendering/distributed-rendering.md): Scale video rendering across multiple workers using RenderOrchestrator - [Browser export with WebCodecs](https://docs.heliosrender.com/rendering/client-export.md): Export videos directly in the browser using the ClientSideExporter - [Output formats and codecs](https://docs.heliosrender.com/rendering/output-formats.md): Supported video codecs, containers, and configuration options - [Helios Studio](https://docs.heliosrender.com/tools/studio.md): Browser-based IDE for developing and previewing Helios video compositions - [Helios Player](https://docs.heliosrender.com/tools/player.md): Web component for previewing and exporting Helios compositions - [Helios CLI](https://docs.heliosrender.com/tools/cli.md): Command-line interface for scaffolding, rendering, and deploying Helios projects - [Component registry](https://docs.heliosrender.com/components/overview.md): A Shadcn-style component registry for Helios video components - [Using components](https://docs.heliosrender.com/components/using-components.md): Add and use components from the Helios registry - [Creating components](https://docs.heliosrender.com/components/creating-components.md): Build and publish your own components to a Helios registry - [Custom drivers](https://docs.heliosrender.com/advanced/custom-drivers.md): Creating custom TimeDriver implementations for specialized rendering workflows - [Canvas and WebGL rendering](https://docs.heliosrender.com/advanced/canvas-webgl.md): Optimizing canvas and WebGL compositions for high-performance video rendering - [Performance tuning](https://docs.heliosrender.com/advanced/performance.md): Optimizing Helios compositions for fast rendering and smooth previews - [Debugging compositions](https://docs.heliosrender.com/advanced/debugging.md): Tools and techniques for debugging Helios compositions and render issues - [Helios class](https://docs.heliosrender.com/api/helios.md): Core engine class for managing animation state and timeline synchronization - [Animation utilities](https://docs.heliosrender.com/api/animation.md): Interpolation, spring physics, and animation functions - [Sequencing utilities](https://docs.heliosrender.com/api/sequencing.md): Sequence timing, series, stagger, and shift functions - [Transition utilities](https://docs.heliosrender.com/api/transitions.md): Transition and crossfade functions for smooth scene changes - [Easing functions](https://docs.heliosrender.com/api/easing.md): Collection of easing functions for smooth animations - [Signals API](https://docs.heliosrender.com/api/signals.md): Reactive state management with signals, computed values, and effects - [Captions API](https://docs.heliosrender.com/api/captions.md): Caption parsing, rendering, and utilities for SRT and WebVTT formats - [Markers API](https://docs.heliosrender.com/api/markers.md): Timeline markers for navigation and annotations - [Audio tracks API](https://docs.heliosrender.com/api/audio-tracks.md): Audio track management and control - [Errors](https://docs.heliosrender.com/api/errors.md): Error handling utilities for Helios - [Random](https://docs.heliosrender.com/api/random.md): Deterministic random number generation for Helios - [Color](https://docs.heliosrender.com/api/color.md): Color parsing and interpolation utilities for Helios - [Timecode](https://docs.heliosrender.com/api/timecode.md): Timecode conversion utilities for Helios - [Schema](https://docs.heliosrender.com/api/schema.md): Schema validation utilities for component props in Helios - [AI](https://docs.heliosrender.com/api/ai.md): AI integration utilities for Helios - [Render session](https://docs.heliosrender.com/api/render-session.md): Frame iteration and rendering control for Helios - [Renderer](https://docs.heliosrender.com/api/renderer.md): Core rendering class for capturing browser animations and exporting videos - [Render orchestrator](https://docs.heliosrender.com/api/render-orchestrator.md): Distributed rendering engine for parallel video generation - [Render options](https://docs.heliosrender.com/api/render-options.md): Configuration types for Renderer and RenderOrchestrator - [Player element](https://docs.heliosrender.com/api/player-element.md): Complete API reference for the web component - [Player controllers](https://docs.heliosrender.com/api/player-controllers.md): API reference for DirectController and BridgeController classes - [Player exporter](https://docs.heliosrender.com/api/player-exporter.md): API reference for ClientSideExporter - browser-based video export - [CLI commands](https://docs.heliosrender.com/api/cli-commands.md): Complete reference for all Helios CLI commands - [helios init](https://docs.heliosrender.com/api/cli-init.md): Initialize a new Helios project configuration - [helios render](https://docs.heliosrender.com/api/cli-render.md): Render a composition to video file - [helios studio](https://docs.heliosrender.com/api/cli-studio.md): Launch the Helios Studio visual editor - [Component management](https://docs.heliosrender.com/api/cli-components.md): Commands for managing Helios components - [HeliosConfig](https://docs.heliosrender.com/api/types/helios-config.md): Configuration interface for initializing Helios compositions - [HeliosState](https://docs.heliosrender.com/api/types/helios-state.md): Runtime state interface for Helios compositions - [Render options](https://docs.heliosrender.com/api/types/render-options.md): Type definitions for rendering and session management - [Driver interfaces](https://docs.heliosrender.com/api/types/driver-interfaces.md): Time driver and ticker interfaces for Helios synchronization - [Basic animation](https://docs.heliosrender.com/examples/basic-animation.md): Learn how to create a simple DOM-based animation with Helios using CSS keyframes - [Canvas animation](https://docs.heliosrender.com/examples/canvas-animation.md): Build frame-perfect canvas animations with Helios using the HTML5 Canvas API - [CSS animations with React](https://docs.heliosrender.com/examples/css-animations.md): Use standard CSS keyframe animations with React components in Helios - [React example](https://docs.heliosrender.com/examples/react-example.md): Build Helios compositions with React hooks and JSX - [Vue example](https://docs.heliosrender.com/examples/vue-example.md): Build Helios compositions with Vue composables and reactive data - [Svelte example](https://docs.heliosrender.com/examples/svelte-example.md): Build Helios compositions with Svelte stores and reactive statements - [GSAP integration](https://docs.heliosrender.com/examples/gsap.md): Learn how to integrate GSAP animations with Helios for deterministic timeline control - [Framer Motion integration](https://docs.heliosrender.com/examples/framer-motion.md): Learn how to integrate Framer Motion animations with Helios using MotionValues and transforms - [Lottie animation integration](https://docs.heliosrender.com/examples/lottie.md): Learn how to integrate Lottie animations with Helios for deterministic playback control - [Three.js 3D rendering](https://docs.heliosrender.com/examples/threejs.md): Render 3D scenes with Three.js and Helios for video export - [Pixi.js 2D rendering](https://docs.heliosrender.com/examples/pixijs.md): Create high-performance 2D graphics with Pixi.js and Helios - [P5.js creative coding](https://docs.heliosrender.com/examples/p5js.md): Create generative art and creative coding projects with P5.js and Helios - [Audio visualization](https://docs.heliosrender.com/examples/audio-visualization.md): Create synchronized audio visualizations with real-time waveforms and frequency analysis - [Data visualization](https://docs.heliosrender.com/examples/data-visualization.md): Create animated charts and graphs using Chart.js and D3.js with frame-perfect control - [Procedural generation](https://docs.heliosrender.com/examples/procedural-generation.md): Create deterministic procedural animations using Helios random utilities and interpolation helpers - [Distributed rendering](https://docs.heliosrender.com/examples/distributed-rendering.md): Build compositions optimized for distributed rendering with stateless frame seeking This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.