Creates a PIXI.Container

A Container is the base component for all components that render to the screen. It can be used on its own, but components such as Sprite or Graphics will be composed of Containers (and will provide context for getContainer)

When child components are rendered inside, their coordinates become local to the parent Container.


  import { onMount } from 'svelte'
  import { Container, Text, onTick } from 'svelte-pixi'

  let instance
  let x = 200
  let y = 150
  let direction = -1

  // move container back and forth
  onTick((delta) =>{
    if (x <= 0) {
      direction = 1
    } else if (x >= 340) {
      direction = -1

    x += 2 * direction * delta


<Container bind:instance {x} {y}>
  <Text text="Hello" style={{ fill: 'white' }} />
  <Text text="World" y={60} style={{ fill: 'white' }} />

Component API


Name Type Default Description
accessible boolean false Flag for if the object is accessible.
If true AccessibilityManager will overlay a shadow div with attributes set
accessibleChildren boolean true Setting to false will prevent any children inside this container to be accessible.
accessibleHint string Sets the aria-label attribute of the shadow div
accessiblePointerEvents string 'auto' Specify the pointer-events the accessible div will use Defaults to auto.
accessibleTitle string Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint
has not been this will default to 'displayObject [tabIndex]'
accessibleType string 'button' Specify the type of div the accessible layer is.
Screen readers treat the element differently depending on this type.
alpha number The opacity of the object.
angle number The angle of the object in degrees.
'rotation' and 'angle' have the same effect on a display object;
rotation is in radians, angle is in degrees.
buttonMode boolean If enabled, the mouse cursor use the pointer behavior when hovered over the displayObject
if it is interactive Setting this changes the 'cursor' property to 'pointer'.
cacheAsBitmap boolean Set this to true if you want this display object to be cached as a bitmap.
This basically takes a snap shot of the display object as it is at that moment.
It can provide a performance benefit for complex static displayObjects.
To remove simply set this property to false

IMPORTANT GOTCHA - Make sure that all your textures are preloaded BEFORE
setting this property to true as it will take a snapshot of what is currently there.
If the textures have not loaded then they will not appear.
cacheAsBitmapMultisample PIXI.MSAA_QUALITY The number of samples to use for cacheAsBitmap. If set to null, the renderer's sample count is used.
If cacheAsBitmap is set to true, this will re-render with the new number of samples.
cacheAsBitmapResolution number The resolution to use for cacheAsBitmap.
By default this will use the renderer's resolution but can be overriden for performance.
Lower values will reduce memory usage at the expense of render quality.
A falsey value of null or 0 will default to the renderer's resolution.
If cacheAsBitmap is set to true, this will re-render with the new resolution.
cullable boolean Should this object be rendered if the bounds of this object are out of frame?

Culling has no effect on whether updateTransform is called.
cullArea PIXI.Rectangle If set, this shape is used for culling instead of the bounds of this object.
It can improve the culling performance of objects with many children.
The culling area is defined in local space.
cursor string This defines what cursor mode is used when the mouse cursor is hovered over the displayObject.
filterArea PIXI.Rectangle The area the filter is applied to.
This is used as more of an optimization rather than figuring out the dimensions of
the displayObject each frame you can set this rectangle.

Also works as an interaction mask.
filters PIXI.Filter[] null Sets the filters for the displayObject.

IMPORTANT: This is a WebGL only feature and will be ignored by the canvas renderer. To remove filters simply set this property to 'null'.
height number The height of the Container, setting this will actually modify the scale to achieve the value set.
hitArea PIXI.IHitArea Interaction shape. Children will be hit first, then this shape will be checked.
Setting this will cause this shape to be checked in hit tests rather than the displayObject's bounds.
instance PIXI.Container The PIXI.Container instance. Can be set or bound to.
interactive boolean false Enable interaction events for the DisplayObject.
Touch, pointer and mouse events will not be emitted unless interactive is set to true.
interactiveChildren boolean true Determines if the children to the displayObject can be clicked/touched.
Setting this to false allows PixiJS to bypass a recursive hitTest function
isMask boolean Does any other displayObject use this object as a mask?
isSprite boolean Used to fast check if a sprite is.. a sprite!
mask PIXI.Container PIXI.MaskData null Sets a mask for the displayObject.
A mask is an object that limits the visibility of an object to the shape
of the mask applied to it. In PixiJS a regular mask must be a
PIXI.Graphics or a PIXI.Sprite object.
This allows for much faster masking in canvas as it utilities shape clipping.
To remove a mask, set this property to null.

For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.

At the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask.
name string The instance name of the object.
pivot PointLike The center of rotation, scaling, and skewing for this display object in its local space.
The position is the projection of pivot in the parent's local space.

By default, the pivot is the origin (0, 0).
position PointLike The coordinate of the object relative to the local coordinates of the parent.
renderable boolean Can this object be rendered, if false the object will not be drawn but
the updateTransform methods will still be called.

Only affects recursive calls from parent. You can ask for bounds manually
rotation number The rotation of the object in radians. 'rotation' and 'angle' have the
same effect on a display object; rotation is in radians, angle is in degrees.
scale PointLike The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).
skew PointLiek The skew factor for the object in radians.
sortableChildren boolean If set to true, the container will sort its children by zIndex value when
updateTransform() is called, or manually if sortChildren() is called.

This actually changes the order of elements in the array, so should be
treated as a basic solution that is not performant compared to other solutions, such as @link

Also be aware of that this may not work nicely with the addChildAt() function,
as the zIndex sorting may cause the child to automatically sorted to another position.
transform PIXI.Transform World transform and local transform of this object. This will become read-only later,
please do not assign anything there unless you know what are you doing.
visible boolean The visibility of the object. If false the object will not be drawn,
and the updateTransform function will not be called.

Only affects recursive calls from parent. You can ask for bounds
or call updateTransform manually.
width number The width of the Container, setting this will actually modify the scale to achieve the value set.
x number The position of the displayObject on the x axis relative to the
local coordinates of the parent. An alias to position.x
y number The position of the displayObject on the y axis relative
to the local coordinates of the parent. An alias to position.y
zIndex number The zIndex of the displayObject.

If a container has the sortableChildren property set to true,
children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other display objects within the same container.


Name Props Fallback


Name Type Detail
added dispatched
click dispatched
create dispatched
mousedown dispatched
mousemove dispatched
mouseout dispatched
mouseover dispatched
mouseup dispatched
mouseupoutside dispatched
pointercancel dispatched
pointerdown dispatched
pointermove dispatched
pointerout dispatched
pointerover dispatched
pointertap dispatched
pointerup dispatched
pointerupoutside dispatched
removed dispatched
removedFrom dispatched
rightclick dispatched
rightdown dispatched
rightup dispatched
rightupoutside dispatched
tap dispatched
touchcancel dispatched
touchend dispatched
touchendoutside dispatched
touchmove dispatched
touchstart dispatched