The <spine-widget> tag allows you to place your Spine animations into a web page.

By default, the animation bounds are calculated using the given animation, or the setup pose if no animation is provided.
The bounds is centered and scaled to fit the parent container.
You can change the fit mode of your Spine animation using the fit attribute.

This is fit="fill". Default fit value is fit="contain".
If you want to preserve the original scale, you can use the fit="none". In combination with that, you can use the scale attribute to choose you desired scale.

Other fit modes are width, width, height, cover,and scaleDown.
If you want to manually size the Spine widget, specify the attributes width and height in pixels (without the px unit).
Mode origin center the animation world origin with the center of the HTML element.
You are responsible to scale the skeleton using this mode.

Move the origin by a percentage of the div width and height by using x-axis and y-axis respectively.
Use offset-x and offset-y to move you skeleton left or right by the pixel amount you specify.
Give an identifier to your widget to get it by using the spine.getSpineWidget function. You can easily access the Skeleton and the AnimationState of your character, and use them as if you were using spine-webgl.

If you change animation, you can ask the widget to scale the skeleton based on the new animation.
Moving the div will move the skeleton origin.
Resizing the div will resize the skeleton in inside mode, but not in origin mode.
You can view the skeleton world origin (green), the root bone position (red), and the bounds rectangle and center (blue) by setting debug to true.
A loading spinner is shown during assets loading. Click the button below to simulate a 2 seconds loading:



If you do not want to show the loading spinner, set spinner="false".
Click the button below to toggle the spinner.
It's super easy to show your different skins and animations. Just make a table and use the skin and animation attributes.
If you have many atlas pages, for example one for each skin, and you want to show only some of the skins, pass to the pages the atlas pages you want to load as a comma concatenated list of indices.
Let's do the same thing above, but programmatically! Create two arrays, one for the skin and the other for the animations, and loop over them.

spine.createSpineWidget allows you to create a spine widget.

By default, assets are loaded immeaditely. You can postpone that by setting manual-start="false". Then it's your responsibility to call start() on the widget. As usual, just wait on the loadingPromise to act on the skeleton or state.
When the widget (or the parent element) enters in the viewport, the callback onScreenFunction is invoked.

By default, the callback call the widget start the first time the widget enters the viewport. That useful in combination with manual-start="true to load assets only when they are into the viewport.
The assets of the coin below are loaded only when the widget enters the viewport.

You can overwrite that behaviour. For example, the raptor below changes animation everytime the widget enters the viewport.
If you want to load textures programmatically, you can just pass as pages to load an empty value liek this pages="".

In this way the skeleton and the atlas are loaded, but not the textures.
Then you can loads the textures whenever you want.
Widgets are not rendered while they are off screen.

The state and skeleton update, and the skeleton apply and the skeleton updateWorldTransform functions are not invoked when the widget is off screen.

If you want the update functions to be invoked in any case, set offscreen=update.
If you want all the functions to be invoked in any case, set offscreen=pose.

You can also overwrite the update function. Just assign a function to the update property of the widget. In that it's your responsibility to skip the update/apply. You can use the onScreen property for convinience.
If for some reason your skeleton bounds go outside the div, you can use the clip property to clip everything is outside the html container.

Be aware that this will break batching!
More examples for clip attribute.
As a bonus item, you can move you skeleton around just by setting the draggable property to true.