Great question! There are a couple of official ways to embed and display Spine animations on the web.
Spine Web Player
The Spine Web Player is the easiest way to embed Spine animations on your website. It includes a built-in UI that allows users to:
- Pause/resume the currently playing animation
- Scrub the timeline
- Change the playback speed
- Select animations and skins from a list
- Show/hide debug renderings of regions, meshes, bones, etc.
- Drag skeleton bones (for interaction!)
The player's controls can also be disabled if you just want to display animations without user input.
Spine Web Components
The spine-webcomponents package lets you embed Spine animations directly into a web page using custom HTML elements. You can use it without writing any JavaScript — just drop the tag into your HTML:
<spine-skeleton
atlas="/files/spine-widget/assets/spineboy-pma.atlas"
skeleton="/files/spine-widget/assets/spineboy-pro.skel"
></spine-skeleton>
It exposes a wide range of attributes for fine-grained configuration directly through HTML, and it efficiently renders multiple skeletons using a shared WebGL canvas overlay to overcome browser limitations on the number of WebGL contexts.
Other Web Runtimes
If you need deeper programmatic control and interactivity, there are also runtimes for popular web frameworks:
All of these support interactive use cases and come with examples you can run locally by cloning the spine-runtimes GitHub repository.
