> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BintzGavin/helios/llms.txt
> Use this file to discover all available pages before exploring further.

# Svelte example

> Build Helios compositions with Svelte stores and reactive statements

This example demonstrates how to build a Helios composition using Svelte. It showcases Svelte-specific patterns including readable stores for frame synchronization and reactive template bindings.

## Setup

Install Helios core and Svelte dependencies:

```bash theme={null}
npm install @helios-project/core svelte
```

## Implementation

### Store for frame synchronization

Create a Svelte readable store to subscribe to Helios frame updates:

```javascript theme={null}
// lib/store.js
import { readable } from 'svelte/store';

export const createHeliosStore = (helios) => {
  return readable(helios.getState(), (set) => {
    set(helios.getState());
    const unsubscribe = helios.subscribe((state) => {
      set(state);
    });
    return unsubscribe;
  });
};
```

The `readable` store initializes with the current Helios state and updates whenever Helios emits new state. The cleanup function is automatically called when all subscribers unsubscribe.

### Main component

Build your composition using Svelte's template syntax and reactive store bindings:

```svelte theme={null}
<!-- App.svelte -->
<script>
  import { onMount } from 'svelte';
  import { Helios } from '@helios-project/core';
  import { createHeliosStore } from './lib/store';

  const duration = 5;
  const fps = 30;

  // Initialize Helios
  const helios = new Helios({
    duration,
    fps
  });

  helios.bindToDocumentTimeline();

  if (typeof window !== 'undefined') {
    window.helios = helios;
  }

  const heliosStore = createHeliosStore(helios);
</script>

<div class="container">
    <div
        class="box"
        style:opacity={$heliosStore.currentFrame / (duration * fps)}
        style:transform={`rotate(${$heliosStore.currentFrame * 2}deg)`}
    >
        Svelte DOM
    </div>
</div>

<style>
  :global(body) {
    margin: 0;
    overflow: hidden;
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
  }
  .box {
    width: 200px;
    height: 200px;
    background-color: royalblue;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: sans-serif;
    border-radius: 10px;
  }
</style>
```

## Key Svelte patterns

### Store-based state management

The `createHeliosStore` function wraps Helios in a Svelte readable store. Use the `$` prefix to automatically subscribe and access store values in templates.

### Style directives

Svelte's `style:property` syntax provides a clean way to apply dynamic styles. Each style property is independently reactive and updates only when its value changes.

### Direct store access in templates

The `$heliosStore` syntax automatically subscribes to the store and provides reactive access to its value. No manual subscription management is needed in the component.

### Global and scoped styles

Combine `:global()` selectors for app-level styles with component-scoped styles for encapsulated, maintainable CSS.

## Usage

Run the development server:

```bash theme={null}
npm run dev
```

The composition will render with reactive frame updates. The Helios instance is exposed on `window.helios` for debugging and player control.