An animator sends you a zip of Spine files. Before you wire them into Unity, Godot or Phaser you want to check a few things: do the animations play, do the skins swap cleanly, and do the events fire on the right frames? The obvious way is to open the project in the Spine editor, but the editor needs a license and not everyone on the team has one.
You don't need the editor just to look at an export. This guide shows how to preview a Spine 4.2 animation in your browser, read what each file in the export does, fix the usual loading errors, and turn the animation into a GIF or video.
Quick answer: open the free Spine Viewer, drop in the skeleton (.json or .skel), the .atlas and every .png texture page together, then click an animation to play it. It runs the official Spine 4.2 runtime locally, so nothing is uploaded.
What's Inside a Spine Export?
When you export from Spine you get three kinds of file. The viewer (and any game engine) needs all of them:
| File | What it holds | Notes |
|---|---|---|
hero.json or hero.skel | Skeleton data: bones, slots, skins, animations, events, constraints | Same data, two formats. Binary .skel is smaller and faster to load. |
hero.atlas | Text file listing each texture page and where every image sits inside it | Unity exports often rename it to hero.atlas.txt. |
hero.png, hero_2.png… | The packed texture pages | Large rigs can have several pages. Every page named in the atlas must be present. |
If you're new to atlases, What Is a Texture Atlas? explains why images are packed this way.
Step 1: Export From Spine (or Ask Your Animator To)
- In Spine, open Export (
Ctrl+E/⌘E). - Choose JSON or Binary. Either works.
- Tick Texture atlas → Pack so you get the
.atlasand.pngpages. - Note whether Premultiply alpha is on in the pack settings. You'll need it in step 3.
Step 2: Open the Files in Your Browser
- Go to the Spine Viewer.
- Drag all the export files onto the preview at once, or click Open folder and pick the export folder. No files to hand? Click Try a demo.
- The animation list appears on the right. Click any animation to play it.
- Drag the canvas to pan, scroll to zoom, and press
Fto fit the skeleton to the view.
The version chip in the top-left corner shows which Spine version the file was exported from. The viewer defaults to the 4.2 runtime (physics constraints included) and switches to the 4.1 or 4.0 runtime automatically when the file needs it.
Step 3: Check the Things That Usually Break
Skins
Click each skin to swap it. If the character uses mix-and-match skins (outfit + hair + weapon), tick Combine and select several at once. Missing attachments show up straight away.
Animation timing and mixing
Use the timeline scrubber to step through frame by frame. The Speed slider slows fast actions down. The Mix slider sets the crossfade time when you switch animations, which is the same value you'll set on AnimationStateData in your engine.
Events
The Events panel logs every event as the animation fires it, with its int, float and string values. This is the fastest way to confirm that the footstep or hit event lands on the frame your sound and VFX code expects.
Rigging (debug overlays)
Turn on overlays for bones, mesh triangles, mesh hulls, bounding boxes, paths and clipping. Bounding boxes are worth a look if your game uses them for hit detection. A box that doesn't follow the attack swing is easier to spot here than in a playtest.
Fixing Common Loading Errors
"Missing texture" or a blank skeleton
The atlas lists texture pages by file name, and every one must be loaded. Select every .png from the export, or use Open folder so nothing is left out. If someone renamed the PNGs after export, rename them back to match the names inside the .atlas file (it's plain text, so open it in any editor and check).
Dark fringes or halos around images
This is a premultiplied-alpha mismatch. Toggle PMA in the Display section so it matches the Premultiply alpha setting used when the atlas was packed. Spine 4.x atlases that declare pma: true switch it on for you. The same fix applies in your engine: the shader or material must match the atlas setting.
Spine 3.x files: the data format changed in Spine 4.0, and no 4.x runtime can read 3.8 or older exports. The fix is to open the project in Spine 4.x and export it again. You also need to do this before upgrading your game's runtime.
Unity file names
Unity projects store Spine files as hero.skel.bytes and hero.atlas.txt. The viewer recognises those names, so you can drag files straight out of your Assets folder without renaming them.
Export a Spine Animation as GIF, Video or PNG Frames
Sometimes you need the animation outside the game: a Steam or itch.io page, a Discord post, a pitch deck, or a review for a client who doesn't own Spine. Pick the animation and skin, choose a background (Transparent keeps alpha), set the FPS and maximum width, then export one of these:
- GIF: plays anywhere, including chat apps and READMEs.
- Video (WebM): smaller and smoother than a GIF for long loops.
- PNG frames (ZIP): transparent frames you can pack into a sprite sheet with the Texture Packer for engines without a Spine runtime.
- Snapshot: a single PNG of the current frame, useful for thumbnails and bug reports.
Browser Viewer vs the Official Skeleton Viewer
Esoteric Software, the makers of Spine, also offer a free desktop Skeleton Viewer. It's a solid tool, but it's a Java app you have to download and run. A browser viewer suits these cases:
- You're on a machine where you can't install software, or on a Chromebook.
- You want to send a teammate a link instead of an installer.
- You need a GIF, video or PNG sequence out of the animation quickly.
For deep rig editing, nothing replaces the Spine editor itself. For checking an export, a browser tab is quicker.
Preview Your Spine Animation Now
Spine 4.2 runtime, JSON and .skel, debug overlays, GIF and video export. Free, and nothing is uploaded.
Open Spine ViewerFAQ
Can I view a Spine animation without the Spine editor?
Yes. Spine exports are plain files (.json or .skel, .atlas and .png), so any Spine runtime can play them. The EazyStudio Spine Viewer runs the official Spine WebGL runtime in your browser, so you can preview an export without installing Spine or Java.
Does the viewer support Spine 4.2 physics?
Yes. It uses the Spine 4.2 runtime, which includes physics constraints. Files exported from Spine 4.1 or 4.0 are detected from their version string and played with the matching runtime automatically.
Why won't my Spine 3.8 file open?
The 3.x data format changed in Spine 4.0, and 4.x runtimes cannot read it. Open the project in Spine 4.x and export it again, or ask the animator for a 4.x export.
Are my Spine files uploaded anywhere?
No. The skeleton, atlas and textures are read with the browser File API and rendered locally with WebGL. Nothing is sent to a server, which matters when you are reviewing unreleased game art.
How do I turn a Spine animation into a GIF?
Load the export in the Spine Viewer, pick the animation and skin, set the FPS and width, then click GIF. You can also export a WebM video, a ZIP of transparent PNG frames, or a single PNG snapshot.
What is the difference between .json and .skel?
Both hold the same skeleton data. JSON is human-readable and easy to diff in git; binary .skel is smaller and loads faster, so it is usually the one you ship in a game. The viewer opens both.
Spine is a trademark of Esoteric Software. EazyStudio is not affiliated with Esoteric Software.