Skip to main content
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: 
npm install @helios-project/core svelte

​
Implementation

​
Store for frame synchronization

Create a Svelte readable store to subscribe to Helios frame updates: 
// 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: 
<!-- 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: 
npm run dev
The composition will render with reactive frame updates. The Helios instance is exposed on window.helios for debugging and player control.