Author animations for pixi-spine — free, in the browser

PixiJS has first-class Spine runtimes, but every tutorial assumes you already own an editor that produces Spine files. Keyframe.it closes that gap: rig and animate your character in a browser tab, then export a Spine-compatible bundle (.json or binary .skel + .atlas + packed .png) that loads directly in spine-pixi-v8 (PixiJS v8) or pixi-spine (PixiJS v7). Free, no install, no signup.

See a finished rig in the editor

The workflow, end to end

1. Bring in art — drop in images, import a PSD (layers become parts), or slice a sprite sheet with the built-in slicer (boxes, lasso, magic wand).
2. Rig — draw bones over the art, attach parts, add IK where you need planted feet or aimed hands. Auto-mesh + auto-weights make parts bend at joints.
3. Animate — keyframe on a dope sheet with a curve editor; add spring physics for hair/tails/cloth (baked to keys on export); image-swap tracks handle blinks and expressions.
4. Export — choose Spine 4.2 (for spine-pixi-v8) or Spine 3.8 (for older pipelines). The bundle ships with a ready-to-open test.html so you can verify it before integrating.

Load it in PixiJS v8

import { Application, Assets } from 'pixi.js'
import { Spine } from '@esotericsoftware/spine-pixi-v8'

const app = new Application()
await app.init({ width: 800, height: 600 })
document.body.appendChild(app.canvas)

Assets.add({ alias: 'skel',  src: 'character.json' })   // from the Keyframe.it export
Assets.add({ alias: 'atlas', src: 'character.atlas' })
await Assets.load(['skel', 'atlas'])

const character = Spine.from({ skeleton: 'skel', atlas: 'atlas' })
character.position.set(400, 500)
app.stage.addChild(character)
character.state.setAnimation(0, 'idle', true)

Every export also includes a standalone test.html preview wired to the same runtime, so “does it load in Pixi?” is answered before you write a line of integration code. The editor’s canvas and its exports are kept 1:1 by an automated parity suite that compares every frame against the official Spine runtime.

For AI-driven workflows

Keyframe.it exposes a scripting API (window.keyframe, 150+ methods) that coding agents like Claude Code can drive — slice, rig, animate and export without touching the UI. Docs live at keyframe.it.com/llms.txt.

Start animating