Live demo → https://aschoelzhorn.github.io/spriteanvil

A browser-based tool for viewing, editing, and exporting pixel-art sprite assets for ESP32/Arduino display projects (LED panels, TFT, OLED).
No install required — use it instantly in the browser via GitHub Pages, or run it locally in Docker.

Sprites & Zoom	Animation Strip

BW Icons (1-bit)	Font Charmap & Preview

Sprite Editor

No setup needed — just open the live demo:
https://aschoelzhorn.github.io/spriteanvil

docker compose up

Then open http://localhost:8080 in your browser.

The parser handles all common Arduino/ESP32 asset patterns without modification:

// 1. RGB565 colour array — named size companion (case-insensitive)
const unsigned short BLOCK[361] = { … };
const byte BLOCK_SIZE[2] = {19, 19};

// 2. PROGMEM + empty brackets
const uint16_t MARIO_IDLE [] PROGMEM = { … };
const byte MARIO_IDLE_SIZE[2] = {13, 16};

// 3. #define width/height macros (used by TFT_eSPI, OLED libraries)
#define logo_width  240
#define logo_height 240
static const uint16_t logo_bits [] PROGMEM = { … };

// 4. Monochrome 1-bit bitmaps (XBM / u8g2 / Adafruit OLED style)
//    Bits are LSB-first, rows padded to byte boundary
#define icon_width  45
#define icon_height 45
static const unsigned char steam_bits [] PROGMEM = { 0x00, 0xf8, … };

// 5. 32-bit ARGB/ABGR/ARGB32 arrays (e.g. Piskel export, GIMP)
//    Alpha=0 is treated as transparent; ABGR (Piskel) and ARGB are auto-converted to RGB565
const uint32_t mushroom2_data[361] = {
    0xFF000000, 0xFF111111, 0x00000000, // ...
};

// 6. Named colour constants resolved automatically
const unsigned short M_RED = 0xF801;
const unsigned short TRANSPARENT = 0xFEFE;

// 7. 2-D frame animation array
const uint16_t _PACMAN_CONST [][25] PROGMEM = {
    { /* frame 0 */ … },
    { /* frame 1 */ … }
};

The parser determines width × height using the first matching strategy:

1. _SIZE byte array — const byte MY_SPRITE_SIZE[2] = {w, h};
2. #define macros — #define NAME_width W / #define NAME_height H, matched by prefix (longest first)
3. Square fallback — sqrt(pixel_count) (a ⚠️ warning is shown in the validation panel)

0xFEFE (or the symbol TRANSPARENT) is treated as transparent. For uint32_t ARGB arrays, alpha=0 is also treated as transparent. Use the BG selector to choose how transparent pixels are displayed:

• Checkerboard — grey checker pattern (Photoshop-style)
• Solid color — fill with any colour (useful for sprites that are hard to see on a checker)

Use Open Sprite Editor in the top toolbar, or click Edit on any sprite card/frame to open the editor in a new tab with sprite data preloaded.

The editor is designed for quick pixel-level touchups and header generation:

• Tool bar above canvas with Pen, Eraser, Bucket Fill, and Picker
• Checkerboard transparency background aligned with the main app rendering (one checker cell per sprite pixel at active zoom)
• Transparent paint mode to paint 0xFEFE directly
• Smart parser for pasted C arrays, including named constants, TRANSPARENT, and _SIZE[2] dimensions
• Export options: Generate/copy/download .h, plus Save PNG (zoom) and Save PNG (1x)
• Header visibility logic: generated header output stays hidden until generated and is auto-invalidated after edits

spriteanvil/
├── web/
│   ├── index.html       # UI
│   ├── app.js           # Parser, renderer, animation, export
│   ├── styles.css       # Main app styles
│   ├── editor.html      # Standalone sprite editor UI
│   ├── editor.js        # Standalone editor logic (draw, parse, export)
│   └── editor.css       # Standalone editor styles
├── Dockerfile           # nginx:alpine serving web/
├── docker-compose.yml   # Port 8080
└── examples/
    ├── mario_assets.h              # LED panel: Mario sprites (named constants, PROGMEM)
    ├── pacman_assets.h             # LED panel: Pacman animation (2-D frame array)
    ├── story_dune_assets.h         # LED panel: Dune backgrounds (64×64, lowercase _size)
    ├── fonts/
    │   ├── mario_Super_Mario_Bros__24pt7b.h   # GFX font (Super Mario Bros)
    │   └── pacman_hour_font.h                 # GFX font (Pacman hour digits)
    ├── icons/                      # OLED 1-bit monochrome icon sets
    │   ├── icon.h                  # Status bar icons (11×9, shared #define)
    │   ├── icon_big.h
    │   ├── icon_shared.h           # Multi-define: rancilio/gaggia/ecm logos
    │   ├── icon_simple.h
    │   ├── icon_smiley.h
    │   └── icon_winter.h
    └── oled/                       # Color OLED/TFT RGB565 images (TFT_eSPI style)
        ├── icon_ecm_color.h        # 240×240 RGB565, #define macros
        ├── icon_gaggia_color.h     # 216×131 RGB565
        ├── icon_generic_color.h    # 240×240 RGB565
        ├── icon_rancilio_color.h

The tool also parses Adafruit GFX-compatible font headers. These are the GFXfont structs used by the Arduino GFX / Adafruit GFX library:

const uint8_t MyFontBitmaps[] PROGMEM = { … };      // packed 1-bit glyph bitmaps

const GFXglyph MyFontGlyphs[] PROGMEM = {
    { bitmapOffset, width, height, xAdvance, xOffset, yOffset },
    …
};

const GFXfont MyFont PROGMEM = {
    (uint8_t *)MyFontBitmaps,
    (GFXglyph *)MyFontGlyphs,
    0x20, 0x7E,   // first, last codepoint
    13            // yAdvance
};

Once loaded, each font is shown in the Fonts tab with:

• A font metrics row — Leading (yAdvance), Baseline offset, and cell height
• A glyph charmap — every character baseline-aligned in uniform cells so digits and symbols sit on the same optical baseline
• A live text preview — type any string to see it rendered pixel-accurately
• A colour picker to change the glyph foreground colour
• A Subset & Export .h panel — pick characters to keep (quick-set buttons or free-type), set the C identifier name, and download a minimal .h with only the needed glyphs

SpriteAnvil is a viewer/exporter — it does not create or edit font glyphs. For that, use one of these dedicated editors:

The Subset & Export .h panel (collapsed by default under each font card) lets you trim a font down to save flash memory on the microcontroller:

1. Click a quick-set button (Digits, + colon, + date, Uppercase, Lowercase, Printable, Full font) or type any characters into the input
2. The glyph count updates live — gaps in the codepoint range are kept as zero-size spacers (fully GFX-compatible)
3. Set the C identifier name (default: FontName_sub)
4. Click ⬇ Download .h — the file contains packed Bitmaps[], Glyphs[], and the GFXfont struct, ready to #include

assets.zip
├── assets.h                    # Root include (original source files)
├── <original_filename>.h       # Original source file(s), unchanged
└── sprites/
    ├── block.h                 # Per-sprite header (preserves PROGMEM, type, SIZE)
    ├── block.png               # PNG preview at current zoom
    ├── mario_idle.h
    ├── mario_idle.png
    └── …

Split .h files preserve the original declaration style — uint16_t vs unsigned short, PROGMEM attribute, and the _SIZE companion array.

This project is licensed under the MIT License - see the LICENSE file for details.

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request