Pixi.js plugin that enables Spine support.
TypeScript JavaScript
Clone or download
Latest commit 6e9f896 Jun 27, 2018



Build Status

Spine implementation for pixi v3 and pixi v4.

For v5 please see next branch and use npm version 2.0.0-alpha


Prebuilt Files

If you are just including the built files, pixi spine adds itself to a pixi namespace:

new PIXI.spine.Spine();

Basic example

var app = new PIXI.Application();


    .add('spineCharacter', 'spine-data-1/HERO.json')
    .load(function (loader, resources) {
        var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);

        // add the animation to the scene and render...
        // run 
        var animation = new PIXI.spine.Spine(spineBoyData);
        if (animation.state.hasAnimation('run')) {
            // run forever, little boy!
            animation.state.setAnimation(0, 'run', true);
            // dont run too fast
            animation.state.timeScale = 0.1;

Want to go advanced?

Read our docs.

Using webpack or browserify?

Our library is tested for integration with webpack and browserify, check our travis config and checkpack.


There's "bin/pixi-spine.d.ts" file, you can use it.

Spine version

Pixi-spine 1.3.x works ONLY with data exported from Spine 3.5.

Please enable "beta updates" and re-export everything from the spine editor.

According to spine runtime license, you can use runtime only if you have bought the editor, so exporting latest versions of animations shouldn't be a problem for you.


You will need to have node setup on your machine.

Make sure you have yarn installed:

npm install -g yarn

Then you can install dependencies and build:

yarn build

That will output the built distributables to ./bin.