Browser-based sprite sheet compositor for layering, tinting, and combining 2D game animation assets into unified sprite sheets.
By FATBAT Studio · Bluesky · Ko-fi
- Composer — Stack layers with per-layer HSL color shift, opacity, offsets, and per-frame position nudge. Drag to reposition on the canvas, merge layers down, undo/redo all actions. Each layer can have its own input grid layout.
- Asset Splitter — Load a reference image or import directly from a composer layer (full sheet or a specific frame). Box/lasso select regions (Shift to add, Alt to subtract), resize handles for fine-tuning, then extract as a trimmed PNG to the library or as a new layer. Name and tag assets before extracting. Hold Space to pan, middle-click to pan, scroll to zoom.
- Library — Store extracted assets with tags for organization. Filter by tag sidebar, search by name or tag, drag to reorder. Duplicate, flip H/V, import into specific frame cells, or add as a full layer. Save/load library assets as standalone .spritebat files. Undo/redo all library actions.
- Tile to Sheet — Stamp a single-frame asset across chosen directions and frames to build a full sprite sheet in one click.
- Clear Frames — Erase specific cells from a layer so you can replace them with new content.
- Animated Preview — Preview animations per direction with forward, reverse, and ping-pong playback modes. Click frame indicators to jump to any frame.
- Configurable Layouts — Set frame size, direction count (4 or 8), frames per direction, and separate input/export grid layouts. Click the sheet preview to jump to any frame.
- Export — Download the composited sheet as PNG, individual frames as ZIP, or animated GIFs per direction with forward/reverse/ping-pong support. Export the selected layer only as a sheet or single frame. Scale 1–4× for all formats.
- Projects — Save and load .spritebat project files that preserve all layers, library assets, and UI state. Keyboard shortcuts for undo (Ctrl/Cmd+Z) and redo (Ctrl/Cmd+Y). Click "Try Example" to load a bundled demo project and explore features.
- Install & Offline — Install SpriteBat as a standalone app from your browser and use it fully offline. Automatic update notifications when a new version is available.
npm install
npm run devThis starts a local dev server with hot module replacement. Open the URL shown in your terminal.
To build for production:
npm run buildOutput goes to the dist/ folder.
- React 19 + TypeScript (strict) + Vite 7
- Tailwind CSS v4 for styling
- JSZip for .spritebat project files (ZIP-based format)
- file-saver for download triggers
- gifenc for animated GIF export
- vite-plugin-pwa for offline support and installable PWA
See CHANGELOG.md for a full list of updates across all versions.
Contributions are welcome! Feel free to open issues or submit pull requests.
SpriteBat is free and open-source software licensed under the GNU General Public License v3.0.
© 2025 FATBAT Studio
If you find SpriteBat helpful, consider buying me a coffee on Ko-fi ☕