0
core modes: `SETUP` and `ANIMATE`
Desktop editor for fast, focused 2D rigging
Lightweight, fast, and simple 2D rigging.
SpineBones is a 2D skeleton editor for building bone hierarchies, attaching images through slots, managing active skins, animating on a keyframe timeline, and exporting the result as project JSON, a sprite sheet, or WebM video.
Hero preview
SpineBones animation
0
export paths: JSON, sprite sheet, WebM
0
core technologies in the stack
What you feel immediately
A top toolbar, side panels, center canvas, bottom timeline, and status bar give the app the feel of a real editor instead of a placeholder demo.
What you can ship
Save and load projects, export sprite sheets, or render animation as WebM without leaving the main workflow.
Key features
Built for 2D rigging, animation, and export.
The core experience focuses on simple 2D rigging, slot and skin management, keyframe animation, and export options that work well for both desktop and web workflows.
Rigging starts directly on the canvas
Create new bones directly in the workspace, inherit parent-child links by clicking over existing bones, then adjust name, length, rotation, position, and scale from the properties panel.
Slots, attachments, and active skins
Add slots to the selected bone, upload image attachments, switch the active attachment, and change skins without breaking the main rigging flow.
Timeline controls for keyframe editing
Scrub the timeline, play the animation, insert and delete keyframes, mirror loops, jump between keys, and edit FPS and duration from the bottom panel.
A familiar editor layout
The top toolbar, bones panel, slots panel, main canvas, properties panel, timeline, and status bar make the interface easy to understand without a long onboarding flow.
Export options for the next step
Save project JSON, export a sprite sheet, or render animation as WebM for previews, reviews, or quick presentation-ready output.
Desktop menu and shortcut hints
Desktop menu actions, undo and redo, tool shortcuts, play and pause, setup and animate toggles, and status hints keep the workflow fast and productive.
Workflow
From a blank rig to exported animation, the flow stays clear.
1
Create bones on canvas
Start with the `Bone` tool, build the hierarchy, and edit core properties like name, length, rotation, scale, and parent.
2
Attach images through slots
Add slots to the active bone, upload image attachments, switch the active attachment, and manage skins for pose or visual variations.
3
Animate with keyframes
Switch to `ANIMATE`, scrub the timeline, record keyframes, copy the first frame, build loops, and preview playback directly in the editor.
4
Save, export, repeat
Use save and load for project JSON, export a sprite sheet for game-ready assets, or render WebM for fast demos and reviews.
Real editor views
Actual screenshots from the app
Interface overview
Six areas that work together
Top Toolbar
Pose, Bone, Move, Rotate, Scale, undo and redo, keyframe controls, background tools, save and load, and export actions.
Left Sidebar
Bones, Slots, and Skins for selection, reordering, attachment management, and switching the active skin.
Center Canvas
The main area for creating bones, posing, rotating, scaling, dragging attachments, and using camera pan and zoom with a background reference.
Right Sidebar
A properties panel for the selected bone and active attachment, including helper messaging when nothing is selected.
Bottom Timeline
Frame scrubbing, playback, FPS, duration, timeline row selection, and keyframe deletion through click or shortcut.
Status Bar
The app name, current project file, open file support in desktop mode, and shortcut hints that improve orientation.
Tutorial
Watch the editor flow in one quick walkthrough.
This short video shows how the workspace feels in practice, from building the rig and attaching images to animating poses and exporting the final result.
Walkthrough video
Quick SpineBones tutorial
Build the base rig
Create bones directly on the canvas, connect parent-child relationships, and adjust transform properties without leaving the main editor.
Attach visuals and animate
Assign images through slots, switch active skins, scrub the timeline, and add keyframes to quickly block out loops or short animated actions.
Refine motion with keyframe editing
Scrub the timeline, add and remove keyframes, adjust timing, and shape smoother motion directly from the animation panel.
SpineBones
A 2D skeleton editor for rigging, attachments, animation, and export.
SpineBones helps you build bone hierarchies, attach images through slots, manage active skins, and animate with a keyframe timeline in one workspace that stays lightweight, fast, and focused.
What you can do
Rigging + Export
Create bones directly on the canvas, build a parent-child hierarchy, then fine-tune position, length, rotation, and scale from the properties panel.
Add slots to the selected bone, upload image attachments, switch the active attachment, and manage skins to match your rig setup.
Scrub the timeline, add keyframes, loop animation, then save the project to JSON or export as a sprite sheet and WebM.