DogSprite

What is DogSprite?

DogSprite is a 100% free, offline pixel art sprite editor that runs entirely in your browser. No servers, no subscriptions, no data collection. Your art stays on your machine.

Privacy note: The hosted version at dogsprite.org includes Vercel Analytics for anonymous page view counts (no cookies, no personal data). All drawing, saving, and exporting happens 100% locally — no art data ever leaves your browser.

Built for pixel artists, indie game developers, and anyone who wants a fast, focused tool without the bloat.

Features

• Multi-tab workspace — work on multiple sprites like browser tabs
• Full drawing toolkit — brush, eraser, fill, line, rect, color picker
• Pixel-perfect mode — clean corners, no staircase artifacts
• Stroke stabilizer — smooth freehand lines with adjustable smoothing
• Symmetry painting — horizontal, vertical, or both axes with draggable guides
• Ghost frames (onion skin) — see past/future frames while animating
• Pressure-sensitive — full support for drawing tablets (Wacom, iPad, etc.)
• Layer system — add, duplicate, merge, reorder, opacity, visibility
• Animation timeline — frame management, linked cels, adjustable durations
• Multi-format export — PNG, GIF, spritesheets with Aseprite-compatible JSON
• Session recovery — automatic snapshots, never lose your work
• Import/Export — .dogsprite projects, Aseprite/LibreSprite spritesheet import
• 3,500+ sprite templates — built-in library with live color customization
• Dark & light themes
• Keyboard shortcuts — full shortcut system with in-app reference
• Multi-language — English, Spanish, Japanese

Quick Start

Use it online (recommended)

Go to dogsprite.org — no install needed.

Run locally

git clone https://github.com/systemcrash92/DogSprite.git
cd DogSprite
npm install
npm run dev

Open http://localhost:3000.

Tech Stack

Zero external APIs. Everything runs in your browser.

Project Structure

src/
├── app/              # Next.js app router
├── components/       # React components (canvas, editor, tools, palette, layers, timeline)
├── stores/           # Zustand stores (project, canvas, tool, layer, timeline, palette, history, UI)
├── lib/              # Core logic (canvas engine, drawing tools, export, AI mock)
├── hooks/            # Custom hooks (shortcuts, animation, autosave)
├── types/            # TypeScript interfaces
└── constants/        # Configuration constants

mcp-server/           # MCP pixel art server (template generation pipeline)
.claude/              # Claude Code agent architecture (agents, skills, rules)

MCP Pixel Art Server

DogSprite includes a built-in MCP (Model Context Protocol) server — an AI-powered pixel art toolkit with 3,900+ hand-crafted sprite templates and 46 drawing tools.

What is MCP?

MCP is an open protocol that lets AI assistants (like Claude, Cursor, Windsurf, etc.) use external tools. DogSprite's MCP server gives any MCP-compatible AI the ability to:

• Draw pixel art — create sprites, set pixels, draw lines/rects/ellipses, fill areas
• Use 3,900+ templates — pre-made sprites in DB16 palette (characters, items, UI, environments, effects, vehicles, and more)
• Layer management — add/merge/reorder layers, set opacity
• Auto-shading — material-aware shadows and highlights
• Export — PNG output of finished sprites

Quick Start

1. Install dependencies:

   cd mcp-server
   npm install
   npm run build
   

2. Configure your AI tool — add this to your MCP config (e.g. .mcp.json, Claude Desktop settings, or Cursor config):

   {
     "mcpServers": {
       "dogsprite-pixel-art": {
         "command": "node",
         "args": ["mcp-server/dist/index.js"]
       }
     }
   }
   

3. Ask your AI to draw — example prompts:

   • "Draw a fire sword template" → renders fire_sword_16 instantly
   • "List all food templates" → shows 140+ food/consumable sprites
   • "Create a 16x16 health potion with custom colors"
   • "Create a 32x32 dungeon torch with shading"

Template Categories

All templates use the DB16 palette (16 colors) with professional colored selout outlines and material-aware shading.

MCP Tools (46 commands)

The server exposes 46 tools grouped by category:

Creating Your Own Templates

The template generator converts ASCII grids or DSL draw commands into TypeScript template files:

cd mcp-server
npx tsx scripts/templateGenerator.ts scripts/batches/my_batch.ts 2>/dev/null > src/templates/myTemplates.ts

See memory/template-quality-guide.md for the full quality guide and .claude/README.md for the AI agent architecture.

Contributing

Contributions are welcome! Whether it's bug fixes, new features, translations, or template designs.

1. Fork the repo
2. Create your branch (git checkout -b feature/my-feature)
3. Commit your changes
4. Push and open a Pull Request

Please keep it friendly, keep it local-first.

Support the Project

DogSprite is free and open source. If it helps your workflow, consider supporting development:

Credits

Created by SETO

• Website: setodev.com
• Editor: dogsprite.org

License

MIT License — free for personal and commercial use.