Skip to content
SveltePixi

Application

Just like PIXI.Application, it sets up the Renderer, Ticker and root Container. If you wish, you can manually render those components instead.

PIXI.Application description from PixiJS source

Convenience class to create a new PixiJS application.

The Application class is the main entry point for creating a PixiJS application. It handles the setup of all core components needed to start rendering and managing your game or interactive experience.

Key features:

  • Automatically creates and manages the renderer
  • Provides a stage (root container) for your display objects
  • Handles canvas creation and management
  • Supports plugins for extending functionality
    • {@link ResizePlugin} for automatic resizing
    • {@link TickerPlugin} for managing frame updates
    • {@link CullerPlugin} for culling off-screen objects

Type-Safety Limitation with Subclasses

Usage

<script>
  import { Application, Text } from 'svelte-pixi'
</script>


<Application width={400} height={400} antialias>
  <Text
    x={200}
    y={200}
    anchor={0.5}
    text="Hello World"
    style={{ fill: 'white' }}
  />
</Application>

Custom View

If you want to customize the element that the canvas is rendered into, you can use the view slot. The canvas will be appended as a child of the slot element.

<script>
  import { Application, Text } from 'svelte-pixi'
</script>


<Application width={400} height={400} antialias autoDensity>
  {#snippet view()}
    <div class="custom">
      <!-- canvas will be placed here -->
    </div>
  {/snippet}


  <!-- pixi components go here -->
  <Text
    x={200}
    y={200}
    anchor={0.5}
    text="Hello World"
    style={{ fill: 'white' }}
  />
</Application>


<style>
  .custom :global(canvas) {
    border: 5px solid tomato;
    border-radius: 5px;
  }
</style>

Custom Stage

PIXI.Application automatically creates a root container at app.stage. If you want to customize it you can either modify it directly or use the stage snippet to manually render it as a Container component.

<script>
  import { Application, Text, Container} from 'svelte-pixi'


  let mouse = { x: 0, y: 0 }
</script>


<Application width={400} height={400} antialias autoDensity>
  <!-- customize the app.stage instance -->
  {#snippet stage({ app, children })}
    <Container
      instance={app.stage}
      hitArea={app.screen}
      eventMode="static"
      onpointermove={(e) => mouse = e.data.global}
    >
      <!-- your pixi components go here -->
      <Text
        x={200}
        y={200}
        anchor={0.5}
        text={`Mouse: ${Math.round(mouse.x)}, ${Math.round(mouse.y)}`}
        style={{ fill: 'white' }}
      />


      <!--
       alternatively, you can do {@render children()} here
       and put your components outside of this snippet.
       they will both work the same way.
      -->
    </Container>
  {/snippet}
</Application>

Render on Demand

<script>
  import { onMount } from 'svelte'
  import { Text, Application } from 'svelte-pixi'
  import DraggableCircle from '$lib/components/DraggableCircle.svelte'
</script>


<Application
  width={400}
  height={400}
  antialias
  render="demand"
  onrender={() => console.log('render')}
>
  <DraggableCircle x={200} y={200} />
  <Text
    x={200}
    y={300}
    text="Click and drag"
    style={{ fill: 'white' }}
    anchor={0.5}
  />
</Application>

API

Props

* denotes required

NameDescription
antialias
boolean

Whether to enable anti-aliasing. This may affect performance.

autoDensity
boolean

Resizes renderer view in CSS pixels to allow for resolutions other than 1.

This is only supported for HTMLCanvasElement and will be ignored if the canvas is an OffscreenCanvas.

autoInit
boolean

If true, Application.init() is called immediately. If you want to initialize it yourself with a custom instance, set this to false.

autoStart
boolean

Controls whether the animation loop starts automatically after initialization.

[!IMPORTANT] Setting this to false does NOT stop the shared ticker even if sharedTicker is true. You must stop the shared ticker manually if needed.

background
stringnumbernumber[]Float32ArrayUint8ArrayUint8ClampedArrayPIXI.HslColorPIXI.HslaColorPIXI.HsvColorPIXI.HsvaColorPIXI.RgbColorPIXI.RgbaColorPIXI.Color

Alias for backgroundColor

backgroundAlpha
number

Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque). This value determines whether the canvas is initialized with alpha transparency support. Note: This cannot be changed after initialization. If set to 1, the canvas will remain opaque, even if a transparent background color is set later.

backgroundColor
stringnumbernumber[]Float32ArrayUint8ArrayUint8ClampedArrayPIXI.HslColorPIXI.HslaColorPIXI.HsvColorPIXI.HsvaColorPIXI.RgbColorPIXI.RgbaColorPIXI.Color

The background color used to clear the canvas. See {@link ColorSource} for accepted color values.

bezierSmoothness
number

A value from 0 to 1 that controls the smoothness of bezier curves (the higher the smoother)

canvas
PIXI.ICanvas

The canvas to use as a view, optional.

clearBeforeRender
boolean

Whether to clear the canvas before new render passes.

context
nullWebGL2RenderingContext

User-provided WebGL rendering context object.

culler
{ updateTransform?: boolean | undefined; }

Options for the culler behavior.

depth
boolean

Whether to ensure the main view has can make use of the depth buffer. Always true for WebGL renderer.

eventFeatures
Partial<PIXI.EventSystemFeatures>

Configuration for enabling/disabling specific event features. Use this to optimize performance by turning off unused functionality.

eventMode
"auto""none""passive""static""dynamic"

The type of interaction behavior for a Container. This is set via the {@link Container#eventMode} property.

failIfMajorPerformanceCaveat
boolean
forceFallbackAdapter
boolean

Force the use of the fallback adapter

gpu
PIXI.GPU

Using shared device and adaptor from other engine

height
number

The height of the screen.

hello
boolean

Whether to log the version and type information of renderer to console.

instance
T

The PIXI.Application instance. Can be manually set or bound to.

Note: if manually set any PIXI.ApplicationOptions props will not be set as they are passed into the constructor

WARNING: Type-safety limitation: If you are using a subclass of PIXI.Application, you MUST provide the instance prop with your custom instance. Due to TypeScript's limitations with generic types, if you don't provide an instance, a base PIXI.Application will be created and cast to your type, which will cause runtime errors when trying to access subclass-specific properties or methods.

Example:

class MyApp extends PIXI.Application {
  myMethod() { ... }
}
const app = new MyApp()

<!-- Correct: always provide instance for subclasses. -->
<Application instance={app} />
manageImports
boolean
multiView
boolean

Whether to enable multi-view rendering. Set to true when rendering to multiple canvases on the dom.

oninit
(ev: { application: T; }) => void

Called when PIXI.Application.init() method resolves

onpostrender
(item: unknown) => void

Event handler for the postrender PIXI.Runner

onprerender
(item: unknown) => void

Event handler for the prerender PIXI.Runner

onrender
(item: unknown) => void

Event handler for the render PIXI.Runner

onrenderstart
(item: unknown) => void

Event handler for the renderStart PIXI.Runner

powerPreference
"low-power""high-performance"

An optional hint indicating what configuration of GPU is suitable for the WebGL context, can be 'high-performance' or 'low-power'. Setting to 'high-performance' will prioritize rendering performance over power consumption, while setting to 'low-power' will prioritize power saving over rendering performance.

preference
"webgpu""webgl"

The preferred renderer type. WebGPU is recommended as its generally faster than WebGL.

preferWebGLVersion
12

The preferred WebGL version to use.

premultipliedAlpha
boolean

Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.

preserveDrawingBuffer
boolean

Whether to enable drawing buffer preservation. If enabled, the drawing buffer will preserve its value until cleared or overwritten. Enable this if you need to call toDataUrl on the WebGL context.

render
"auto""demand"
renderableGCActive
boolean

If set to true, this will enable the garbage collector on the GPU.

renderableGCFrequency
number

Frames between two garbage collections.

renderableGCMaxUnusedTime
number

The maximum idle frames before a texture is destroyed by garbage collection.

resizeTo
HTMLElementWindow

Element to automatically resize the renderer to.

resolution
number

The resolution / device pixel ratio of the renderer.

roundPixels
boolean
sharedTicker
boolean

Controls whether to use the shared global ticker or create a new instance.

The shared ticker is useful when you have multiple instances that should sync their updates. However, it has some limitations regarding update order control.

Update Order:

  1. System ticker (always runs first)
  2. Shared ticker (if enabled)
  3. App ticker (if using own ticker)
skipExtensionImports
boolean

Whether to stop PixiJS from dynamically importing default extensions for the renderer. It is false by default, and means PixiJS will load all the default extensions, based on the environment e.g browser/webworker. If you set this to true, then you will need to manually import the systems and extensions you need.

e.g.

import 'accessibility';
import 'app';
import 'events';
import 'spritesheet';
import 'graphics';
import 'mesh';
import 'text';
import 'text-bitmap';
import 'text-html';
import { autoDetectRenderer } from 'pixi.js';

const renderer = await autoDetectRenderer({
  width: 800,
  height: 600,
  skipExtensionImports: true,
});
textureGCActive
boolean

If set to true, this will enable the garbage collector on the GPU.

textureGCAMaxIdle
number
textureGCCheckCountMax
number

Frames between two garbage collections.

textureGCMaxIdle
number

The maximum idle frames before a texture is destroyed by garbage collection.

useBackBuffer
boolean

if true will use the back buffer where required

webgl
Partial<PIXI.WebGLOptions>

Optional WebGLOptions to pass only to the WebGL renderer

webgpu
Partial<PIXI.WebGPUOptions>

Optional WebGPUOptions to pass only to WebGPU renderer.

width
number

The width of the screen.

Snippets

NameType
childrenSnippet<[]>
loadingSnippet<[]>
stageSnippet<[{ app: T; children: Snippet<[]>; }]>
viewSnippet<[]>