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.

Build docs developers (and LLMs) love

Get started for freeTalk to us