Sprite Sheet Viewer Online — Play Atlas JSON and XML Frames
An atlas PNG on its own is a jumble of packed frames. Drop it together with its data file and the Studio lists every named frame, rebuilds the animations from the tags or the frame names, puts trimmed frames back on their full canvas and plays them — then you can convert the whole thing to another engine.
- Phaser 3 / 4Verified· Phaser 3.90 + 4.2
- PixiJS 8Verified· PixiJS 8.21
- Godot 4Verified· Godot 4.7.2
- Unity 6Verified· Unity 6000.5.3f1
- Aseprite JSONVerified· Phaser load.aseprite · PixiJS 8.21
- .asepriteVerified· Aseprite 1.3.18
- Spine / libGDXVerified· spine-canvas 4.2
- Starling / Sparrow XMLVerified· Phaser 4.2
- LÖVEVerified· LÖVE 11.5
- DefoldBuilt· Defold bob.jar 1.13.1
- GameMakerUNVERIFIED
- CSS spritesVerified· Chromium
- GIF / APNGDecoded· Pillow
What it does
- Reads the data file next to the sheet: Aseprite JSON (hash or array), TexturePacker JSON (hash or array), Starling / Sparrow XML, or the JSON the classic Sprite Lab writes.
- Animations come from frameTags when the file has them; otherwise frame names are grouped: walk_01, walk_02 → "walk", and the Friday Night Funkin' style "BF idle dance0000" → "BF idle dance", in natural order (2 before 10).
- Trimmed frames are restored to their source size with their offset, so a played animation stands still instead of wobbling, and every original frame name is kept.
- The import panel says what it found: how many frames, whether the timing came from the file, and which frames lie outside the image and were left out.
How to do it
- Select the PNG and its .json or .xml together and drop both on this page.
- Read the import panel: frame count, where the animations came from, anything skipped.
- Pick an animation on the timeline and press Enter; toggle the Sheet/Frame view with ` to see each region on the atlas.
- If you want the frames in another format, open Pack & Export and export for Phaser, PixiJS, Godot 4 or Unity 6.
What each atlas file gives the viewer
| File you drop with the PNG | What is read | Where the animations come from |
|---|---|---|
| Aseprite JSON (hash or array) | Frame rects, the duration of every frame, trimmed size and offset | meta.frameTags, with direction and repeat |
| TexturePacker JSON (hash or array) | Frame rects, spriteSourceSize / sourceSize for trimmed frames, the pivot when present, the rotated flag | Frame names: walk_01, walk_02 → "walk" |
| Starling / Sparrow XML | SubTexture x, y, width, height; frameX / frameY / frameWidth / frameHeight; pivotX / pivotY | SubTexture name prefixes: "BF idle dance0000" → "BF idle dance" |
| Classic Sprite Lab JSON | The frames and animations the Lab exported | Its own animation list |
| No data file (PNG only) | A grid measured from the pixels, or islands cut at transparent gaps | One animation per row, as a proposal |
Engine exports and how each was checked
"Verified" means the exported files were loaded by the real engine or tool on real CC0 assets and the result was compared with the source. Anything that was not loaded is labelled as such.
| Target | Files | Check |
|---|---|---|
| Godot 4 | .tres SpriteFrames · .tscn AnimatedSprite2D · .png.import | Verified Godot 4.7.2Loaded by Godot; every animation frame drawn and compared with the source file. The scene uses Nearest filtering; rotation is never used. |
| Unity 6 | .unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip | Verified Unity 6000.5.3f1Batch mode: sprite rects, pivots, pixels, clip keys and durations checked. |
| Phaser 3 / 4 | atlas JSON (multiatlas) · .anims.json | Verified Phaser 3.90 + 4.2Frames and animations drawn by both versions. |
| PixiJS 8 | spritesheet JSON · animations · anchor · meta.scale | Verified PixiJS 8.21Rotated and multi-page atlases included. |
| Aseprite JSON | hash / array · frameTags · slices | Verified Phaser load.aseprite · PixiJS 8.21Tags keep their direction and repeat count. |
| .aseprite | layers · tags · durations · slices | Verified Aseprite 1.3.18Opened and rendered by the Aseprite command line. |
| Spine / libGDX | .atlas | Verified spine-canvas 4.2Every region drawn by the Spine runtime, rotated and trimmed; libGDX itself was not run. |
| Starling / Sparrow XML | XML per page | Verified Phaser 4.2Phaser 3.90 draws trimmed XML frames wrongly (its own bug); the "Sparrow XML (Phaser 3)" preset turns trim off and passes in 3.90 and 4.2. |
| LÖVE | Lua quads · nerulio_atlas.lua · main.lua | Verified LÖVE 11.5Every frame drawn and every animation stepped through the shipped helper. |
| Defold | .atlas · .tilesource | Built Defold bob.jar 1.13.1Built by Defold's command-line builder; the built texture's UVs were read back. |
| GameMaker | spr_<name>_stripN.png · gamemaker.json | UNVERIFIEDNot loaded in GameMaker (no headless GameMaker). The strips are cut the way its strip importer cuts them. |
| CSS sprites | .css · preview .html | Verified ChromiumEvery class drawn from the shipped stylesheet. |
| GIF / APNG | one file per animation | Decoded PillowEvery frame and delay decoded again after export; APNG is exact. |
Evidence
GIF decoder: 408 of 408 frames identical to Pillow on 29 real GIFs; APNG 132 of 132 on 16 files. .aseprite: 231 corpus files imported, re-written and reopened in Aseprite 1.3.18 with the same tags, durations and pixels (231/231). Exports: 49 runs in the real engines on real CC0 assets, 47 pass — the 2 failures are Phaser 3.90's trimmed-XML bug, which the Phaser 3 preset avoids.
Limits
- A grid or island guess is a preview with a confidence; nothing is cut until you press Apply, and every choice has one-click alternatives.
- .aseprite files whose layers do not compose exactly (e.g. group opacity) are imported flattened, and the Import panel says why.
- Rotated frames in an imported atlas stay rotated; their export is UNVERIFIED.
- Images up to 32,768 px per side (268 million pixels), subject to your browser's memory.
Questions
The animation plays at the wrong speed. Why?
TexturePacker JSON and Sparrow XML carry no timing, so their frames start at 100 ms each. Select the frames and set the duration in bulk. Aseprite JSON has a duration per frame and keeps it.
Can it open a Spine .atlas or a rotated atlas?
Spine .atlas files are not read. Rotated frames of a TexturePacker or XML atlas are imported, but they stay rotated in the sheet and their export is UNVERIFIED — repack without rotation if you convert them.
What if I only have the PNG, no data file?
Then it is a plain sheet: the Studio measures the grid (cell size, margin, spacing) or cuts by transparent gaps, and proposes one animation per row for you to accept.
Is it free, and do I need an account?
Everything on these pages is free and works without an account. There is no watermark and no export that is held back.
Are my sprites uploaded?
No. The Studio decodes, packs and exports in this browser tab. Projects are autosaved in the browser (IndexedDB) and can be saved as a .nerulio file.
Does it need Aseprite or an engine plugin installed?
No. .aseprite files are read and written in the browser, and each engine bundle carries what that engine needs (for Godot, the import settings and scene; for Unity and the Godot TileSet, a small editor script).