Skip to main content
pixi-svelte is the rendering layer of the Stake Engine Web SDK. It wraps PixiJS 8 display objects as declarative Svelte 5 components, so you can build a 2D game scene the same way you build a web page. It is also published as a standalone npm package at npmjs.com/package/pixi-svelte. Current version: 2.1.0

​
Key dependencies

DependencyVersion
pixi.js8.8.1
@esotericsoftware/spine-pixi-v84.2.74
@barvynkoa/particle-emitter0.0.1
svelte5.20.5
webfontloader1.6.28

​
Components

All components are exported from the package root: 
import {
  App,
  Container,
  Sprite,
  BaseSprite,
  Text,
  BitmapText,
  AnimatedSprite,
  SpriteSheet,
  Graphics,
  Circle,
  Rectangle,
  SpineProvider,
  BaseSpineProvider,
  SpineTrack,
  SpineBone,
  SpineSlot,
  SpineEventEmitterProvider,
  ParticleContainer,
  ParticleEmitter,
  Particles,
} from 'pixi-svelte';

​
Component reference

ComponentDescription
AppRoot PixiJS application container. Set resizeTo: window for full-screen games.
ContainerGroups child display objects. Maps to PIXI.Container.
SpriteRenders a texture from loadedAssets.
BaseSpriteLow-level sprite without asset loading wiring.
TextDynamic text using PIXI.Text.
BitmapTextPerformant text using pre-rendered bitmap fonts (PIXI.BitmapText).
AnimatedSpriteFrame-by-frame animation from a texture array.
SpriteSheetPlays named animations from a spritesheet atlas.
GraphicsImperative drawing API (PIXI.Graphics).
CircleConvenience wrapper to draw a circle.
RectangleConvenience wrapper to draw a rectangle.
SpineProviderLoads and owns a Spine skeleton; provides spine context to children.
BaseSpineProviderLow-level Spine provider without asset wiring.
SpineTrackSets and plays a Spine animation on a specific track index.
SpineBonePositions a container at a named Spine bone’s world position.
SpineSlotRenders content at a named Spine slot.
SpineEventEmitterProviderBridges Spine animation events to an event emitter.
ParticleContainerOptimized container for rendering large numbers of particles.
ParticleEmitterEmits particles using the @barvynkoa/particle-emitter config.
ParticlesCompanion to ParticleContainer for particle management.

​
createApp()

Creates the reactive stateApp object that drives the <App /> component and tracks asset loading. 
import { createApp } from 'pixi-svelte';

const { stateApp } = createApp({ assets });

​
stateApp fields

const stateApp = $state({
  reset,            // () => void — resets all fields to defaults
  assets,           // Assets — asset manifest passed to createApp()
  loaded: false,    // boolean — true once all assets have finished loading
  loadingProgress: 0, // number — 0–100 loading progress value
  loadedAssets: {} as LoadedAssets, // processed PIXI.Assets keyed by name
  pixiApplication: undefined as PIXI.Application | undefined,
});
loadedAssets is populated by PIXI.Assets.load and can be passed directly to <Sprite /> and other pixi-svelte components.

​
ContextApp

stateApp is shared with child components through Svelte context: 
import { setContextApp, getContextApp } from 'pixi-svelte';

// In entry component (e.g. +page.svelte or a story)
setContextApp({ stateApp });

// In any descendant component
const { stateApp } = getContextApp();
The context key is '@@pixi_svelte'.
pixi-svelte uses the built output in dist/. If you change any source file under packages/pixi-svelte/src/, rebuild before your changes take effect:
pnpm run build --filter=pixi-svelte

​
Usage example

<script lang="ts">
  import { App, Container, Sprite, SpineProvider, SpineTrack } from 'pixi-svelte';
  import { getContextApp } from 'pixi-svelte';

  const { stateApp } = getContextApp();
</script>

<App>
  {#if stateApp.loaded}
    <Container x={100} y={100}>
      <Sprite texture={stateApp.loadedAssets['background']} />
      <SpineProvider key="character" width={256}>
        <SpineTrack trackIndex={0} animationName="idle" loop />
      </SpineProvider>
    </Container>
  {/if}
</App>

Build docs developers (and LLMs) love

Get started for freeTalk to us