--- name: example-svelte description: Patterns for using Helios with Svelte. Use when building compositions in a Svelte environment, utilizing Svelte stores for reactive frame updates. --- # Svelte Composition Patterns Integrate Helios into Svelte components using Svelte Stores to manage frame state reactivity efficiently. ## Quick Start ### 1. Create Helios Store Wrap the Helios instance in a readable store to make state reactive. ```javascript // lib/store.js import { readable } from 'svelte/store'; export const createHeliosStore = (helios) => { return readable(helios.getState(), (set) => { // Set initial value set(helios.getState()); // Subscribe to updates const unsubscribe = helios.subscribe((state) => { set(state); }); return unsubscribe; }); }; ``` ### 2. Create Composition Component ```svelte

``` ## Svelte 5 (Runes) For Svelte 5, use the `$state` rune to create a reactive state class. ### 1. Create Helios State Class ```javascript // lib/helios.svelte.ts import { Helios } from '@helios-project/core'; export class HeliosState { currentFrame = $state(0); fps = $state(0); duration = $state(0); isPlaying = $state(false); constructor(helios) { this.fps = helios.fps; this.duration = helios.duration; this.isPlaying = helios.isPlaying; helios.subscribe((state) => { this.currentFrame = state.currentFrame; this.isPlaying = state.isPlaying; }); } } ``` ### 2. Use in Component ```svelte

Frame: {state.currentFrame}

``` ## Key Concepts - **Store Pattern:** Svelte's `readable` store is the perfect primitive for wrapping the `helios.subscribe` callback. - **Reactive Statements (`$:`):** Use reactive statements to trigger redraws whenever `$heliosStore` updates. - **Singleton Helios:** Initialize `Helios` outside the component script or in a separate module to ensure it persists if the component remounts (though for a root App component, inside ` ``` ## Source Files - Example: `examples/svelte-canvas-animation/` - Example: `examples/svelte-runes-animation/` - Example: `examples/svelte-audio-visualization/`

example-svelte

Scan your own AI components