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 fitWidth, fitWidth, fitHeight, 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.
Set the desired skin by using the skin attribute.
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.
As a bonus item, you can move you skeleton around just by setting the draggable property to true.