Draw. Vote. Win.
100% Free & Open Source · No Account Required · One Command to Host
Play · Game Modes · Features · Quick Start · For Developers · Contributing
SpriteBox is a browser-based multiplayer pixel art game where creativity meets competition. Draw 8×8 pixel masterpieces, vote on others' creations, and climb the ranks with our chess-inspired Elo rating system.
Think Gartic Phone meets Pixel Art with a competitive twist.
╔═══════════════════════════════════════════════════════════════╗
║ ║
║ Prompt: "sleepy robot eating pizza" ║
║ ║
║ ┌────────────────┐ ║
║ │ ▓▓▓▓▓▓▓▓▓▓▓▓ │ You have 30 seconds ║
║ │ ▓░░░░░░░░░░▓ │ to draw this! ║
║ │ ▓░██░░░░██░▓ │ ║
║ │ ▓░░░░░░░░░░▓ │ 8×8 pixels ║
║ │ ▓░░░████░░░▓ │ 16 colors ║
║ │ ▓░░░░░░░░░░▓ │ Unlimited creativity ║
║ │ ▓▓▓▓▓▓▓▓▓▓▓▓ │ ║
║ └────────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════════╝
| 100% Free & Open Source | No ads, no paywalls, no tracking, MIT licensed |
| No Account Required | Just open the link and play instantly |
| Works Everywhere | Desktop, mobile, tablet — any modern browser |
| Multilingual | Full English and German support |
| Self-Hostable | One command to run your own server |
| Privacy First | No persistent user data stored |
- Go to spritebox.de
- Choose a game mode (see below)
- Draw when prompted — you have 30 seconds!
- Vote on other players' creations
- Win and show off your pixel art skills
SpriteBox offers 4 unique game modes for every type of player:
|
The Classic Experience
Perfect for: Party games, streams, large groups |
1v1 Memory Duel
Perfect for: Quick duels, testing your memory |
|
Pictionary-Style Fun
Perfect for: Friends, family game nights |
Single-Player Roguelike
Perfect for: Solo practice, roguelike fans |
- 8×8 Pixel Canvas — Simple constraints spark maximum creativity
- 16-Color Palette — Classic pixel art aesthetic
- 2.5M+ Unique Prompts — "angry robot underwater", "tiny pizza on fire"
- Elo Rating System — Fair, chess-inspired ranking for every artwork
- Real-time Multiplayer — See players join, draw, and vote live
- No Registration — Jump in instantly
- Mobile-Optimized — Touch-friendly drawing on any device
- Dark Theme — Easy on the eyes, pixel-perfect aesthetics
- Sound Effects — Satisfying audio feedback
- Idle Detection — Warnings before disconnect
- Reconnection Support — 15-second grace period if disconnected
- Spectator Mode — Watch full games without participating
┌─────────────────────────────────────────────────────────────────┐
│ 🔒 Zero Configuration No database, no API keys, no secrets │
│ 🛡️ Server-Authoritative All game logic runs on the server │
│ 🔐 Privacy First No persistent user data stored │
│ 📦 Fully Open Source Inspect, modify, self-host freely │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ LOBBY COUNTDOWN DRAWING VOTING │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ │ 5 sec │ │ 30 sec │ │ 5s×N │ │ │
│ │ 5+ │ ──────► │ GET │ ───────► │DRAW!│ ──────► │A vs │ │
│ │ │ │READY│ │ │ │ B │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │ │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ ▼ │ ▼ │
│ │ RESULTS FINALE ◄───┘ │
│ │ ┌─────┐ ┌─────┐ │
│ │ 15 sec │ │ 15 sec │TOP │ │
│ └──────── │ 🏆 │ ◄────── │10% │ │
│ │ │ │ │ │
│ └─────┘ └─────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Instead of simple upvotes, SpriteBox uses chess-style Elo ratings:
| Concept | How It Works |
|---|---|
| Starting Rating | Every artwork begins at 1000 Elo |
| 1v1 Matchups | Each vote is a head-to-head comparison |
| Dynamic Gains | Beating a higher-rated artwork = more points |
| Fair Exposure | Algorithm ensures every submission is seen equally |
| Adaptive Rounds | More players = more voting rounds (2–7) |
| Phase | Duration | Description |
|---|---|---|
| Lobby | Until 5+ players | Waiting room |
| Countdown | 5 seconds | Prompt revealed |
| Drawing | 30 seconds | Create your masterpiece |
| Voting | 5s × 2–7 rounds | Pick your favorites |
| Finale | 15 seconds | Top 10% face off |
| Results | 15 seconds | Winners announced |
Just visit spritebox.de — no installation needed!
Want to run your own SpriteBox server? It's simple:
git clone https://github.com/ibimspumo/SpriteBox.git
cd SpriteBox
pnpm install
pnpm devOpen http://localhost:5173 — done!
pnpm build
pnpm startServer runs on port 3000, serving both API and frontend.
No environment variables. No secrets. No database.
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | Svelte 5 + Vite | Reactive UI with runes ($state, $derived) |
| Backend | Node.js + Express | HTTP server + static file serving |
| Real-time | Socket.io | WebSocket communication |
| Validation | Zod | Runtime type safety |
| Compression | LZ-String | Efficient large gallery transfer |
| Package Manager | pnpm | Fast monorepo management |
| i18n | Custom stores | English & German support |
SpriteBox/
├── apps/
│ ├── server/ # Node.js Backend
│ │ ├── src/
│ │ │ ├── index.ts # Entry + Express setup
│ │ │ ├── socket.ts # WebSocket handlers
│ │ │ ├── gameModes/ # Mode-specific logic
│ │ │ │ ├── modes/
│ │ │ │ │ ├── pixelBattle.ts
│ │ │ │ │ ├── copyCat.ts
│ │ │ │ │ ├── pixelGuesser.ts
│ │ │ │ │ └── pixelSurvivor.ts
│ │ │ │ └── registry.ts # Mode registration
│ │ │ ├── voting/ # Elo algorithm
│ │ │ ├── validation.ts # Zod schemas
│ │ │ └── rateLimit.ts # DoS protection
│ │ └── data/
│ │ ├── prompts.json # English prompts
│ │ └── prompts_de.json # German prompts
│ │
│ ├── web/ # Svelte 5 Frontend
│ │ ├── src/
│ │ │ ├── lib/
│ │ │ │ ├── components/ # Atomic Design (50 components)
│ │ │ │ │ ├── atoms/ # Button, Input, Badge
│ │ │ │ │ ├── molecules/ # PromptDisplay, ModeCard
│ │ │ │ │ ├── organisms/ # Modal, Card, GalleryGrid
│ │ │ │ │ ├── features/ # Lobby, Drawing, Voting, Results
│ │ │ │ │ │ ├── CopyCat/
│ │ │ │ │ │ ├── PixelGuesser/
│ │ │ │ │ │ └── PixelSurvivor/
│ │ │ │ │ └── utility/ # PixelCanvas, Timer
│ │ │ │ ├── i18n/ # Translation system
│ │ │ │ ├── stores.ts # Svelte stores
│ │ │ │ └── styles/
│ │ │ │ └── tokens.css # Design system
│ │ │ └── routes/
│ │ │ └── play/[mode]/ # Dynamic game routes
│ │ └── static/
│ │ ├── fonts/ # Pixelify Sans
│ │ └── audio/ # Sound effects
│ │
│ └── docs/ # Astro/Starlight documentation
│
├── package.json # Workspace scripts
├── pnpm-workspace.yaml # Monorepo config
└── CLAUDE.md # AI assistant context
Server-Authoritative
All game logic runs on the server. Clients send inputs, receive state updates. This prevents cheating and ensures consistent gameplay.
In-Memory State
No database. All game data lives in JavaScript Map objects. Games are intentionally ephemeral — when the server restarts, everything resets. This means:
- Zero configuration
- No data breaches possible
- Lightning-fast operations
Atomic Design
Frontend follows strict component hierarchy:
- Atoms: Basic UI elements (Button, Input, Badge)
- Molecules: Combinations of atoms (PasswordInput, ModeCard)
- Organisms: Complex sections (Modal, GalleryGrid)
- Features: Game phases (Lobby, Drawing, Voting)
Type Safety
- TypeScript everywhere
- Zod schemas validate all client inputs
- Socket.io events are fully typed
- Shared types between client and server
pnpm install # Install all dependencies
pnpm dev # Start both servers with hot reload
pnpm build # Production build
pnpm start # Start production server
pnpm lint # Run ESLint
pnpm typecheck # Run TypeScript checks| Protection | Limit |
|---|---|
| Global requests | 50/second |
| Drawing submissions | 5/minute |
| Votes | 3/second |
| Room creation | 3/minute |
| Connections per IP | 5 simultaneous |
| Max payload size | 1KB |
- Connect your GitHub repository
- Create new Web Service
- Set build command:
pnpm install && pnpm build - Set start command:
pnpm start - Deploy
No environment variables. No secrets. No database.
| Players | RAM |
|---|---|
| 1,000 | ~100 MB |
| 5,000 | ~250 MB |
| 10,000 | ~500 MB |
GET /health
{
"status": "ok",
"memory": { "heapUsedMB": 45, "status": "ok" },
"players": { "current": 847, "max": 10000 },
"instances": { "active": 12, "public": 9, "private": 3 }
}We welcome contributions! See CONTRIBUTING.md for detailed guidelines.
git clone https://github.com/ibimspumo/SpriteBox.git
cd SpriteBox
pnpm install
pnpm dev- UI/UX improvements
- Accessibility (a11y)
- Performance optimization
- Mobile touch gestures
- New game modes
- Bug fixes
- Translations
- Follow existing code style (ESLint + TypeScript strict)
- Write descriptive commit messages
- Test locally before submitting
- Keep PRs focused on a single feature/fix
Full documentation available at spritebox.de/docs
- Getting Started
- Architecture Deep-Dive
- Socket.io Event Reference
- Data Formats & Validation
- Contributing Guide
- Achievement system
- Custom color palettes
- Drawing replay/timelapse
- Tournament mode
- PWA offline support
- Docker container
- More languages
Do I need to create an account?
No! Just open the website and play. Your session is temporary and private.
Can I play on mobile?
Yes! The game is fully optimized for touch devices.
How many players can play together?
5 to 100 players per game (depending on mode).
What happens if I disconnect?
You have 15 seconds to rejoin and keep your progress.
Why no database?
Simplicity. No setup, no maintenance, no data breaches. Games are ephemeral by design.
Can I self-host this?
Yes! Clone the repo and run pnpm install && pnpm build && pnpm start.
Is this production-ready?
Yes! It's designed with rate limiting, input validation, and DoS protection.
SpriteBox follows security best practices:
- Server-Authoritative — All game logic on server
- Input Validation — Zod schemas validate everything
- Rate Limiting — Protection against spam and DoS
- XSS Prevention — All user input is sanitized
- Timing-Safe Auth — Password verification is timing-safe
- No Secrets — Nothing to leak
Report vulnerabilities to: security@spritebox.de
MIT License — Do whatever you want with it.
See LICENSE for details.
- Inspired by Gartic Phone, Skribbl.io, and classic pixel art tools
- Built with Svelte, Socket.io, and Vite
- Uses Pixelify Sans font
Play Now · Documentation · Report Bug · Request Feature
Made with pixels and ❤️
⭐ Star this repo if you like SpriteBox!