A modern, feature-rich pixel art editor with AI enhancement and real-time P2P collaboration
- Pencil - Precision pixel drawing with adjustable brush size (1-5px)
- Eraser - Clean up mistakes with variable size
- Bucket Fill - Flood fill algorithm for quick coloring
- Color Picker - Sample colors directly from canvas
- AI Enhance - Transform your pixel art with AI image generation
- AI Critic - Get fun, encouraging feedback on your artwork
- AI Palette Generator - Generate color palettes from themes (e.g., "Sunset", "Cyberpunk")
- Peer-to-Peer Connection - Direct WebRTC connection, no server required
- End-to-End Encryption - AES-256-GCM encryption on all data
- Live Sync - See collaborator's strokes in real-time
- Late-Joiner Support - New peers receive full canvas state
- 🎤 Voice Chat - E2EE audio with echo/noise cancellation
- 32x32 Pixel Grid - Classic pixel art resolution
- Grid Toggle - Show/hide grid lines
- Undo Support - Up to 50 history states
- Export Options - Download at 32x32 or upscaled to 512x512
- Modern web browser (Chrome, Firefox, Edge, Safari 15+)
- Python 3.x (for local server) or any HTTP server
# Clone the repository
git clone https://github.com/samaed-samee/pixel-pop.git
# Navigate to project directory
cd pixel-pop
# Start local server
python -m http.server 8000
# Open in browser
# http://localhost:8000# Install cloudflared (optional, for tunneling)
# https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/
# Create tunnel
cloudflared tunnel --url http://localhost:8000- Select a tool from the left toolbar
- Pick a color from the palette or use the color picker
- Adjust brush size (1-5 pixels)
- Draw on the canvas!
| Feature | How to Use |
|---|---|
| Generate Palette | Enter a theme → Click arrow button |
| AI Enhance | Click "Enhance 🎨" → Enter prompt (optional) → Generate |
| AI Critic | Click "Critic" → Get feedback on your art |
- Click ✨ Create Room in the Collaborate panel
- Copy the room code and share with your collaborator
- Collaborator clicks 🔑 Join Room and pastes the code
- Collaborator copies their response code and sends it back
- Paste response and click 🔗 Connect
- Start drawing together!
┌─────────────┐ ┌─────────────┐
│ Peer A │ │ Peer B │
├─────────────┤ ├─────────────┤
│ Room Code │──────────────────────────────│ Room Code │
│ ↓ │ │ ↓ │
│ PBKDF2 │ │ PBKDF2 │
│ (100k iter) │ │ (100k iter) │
│ ↓ │ │ ↓ │
│ AES-256 Key │ │ AES-256 Key │
│ ↓ │ │ ↓ │
│ Encrypt │─── WebRTC DataChannel ───────│ Decrypt │
│ (AES-GCM) │ (Encrypted Data) │ (AES-GCM) │
└─────────────┘ └─────────────┘
| Layer | Protection |
|---|---|
| Transport | WebRTC DTLS (automatic) |
| Application | AES-256-GCM encryption |
| Key Derivation | PBKDF2 (100,000 iterations) |
| Authentication | GCM auth tag (tamper-proof) |
🔒 Zero-Knowledge: No server ever sees your drawing data. Only peers with the room code can decrypt content.
| Technology | Purpose |
|---|---|
| HTML5 Canvas | Pixel rendering engine |
| Vanilla JavaScript | Core application logic |
| TailwindCSS | Styling (via CDN) |
| WebRTC | Peer-to-peer connections |
| Web Crypto API | E2EE implementation |
| Gemini AI | Image enhancement & generation |
| Lucide Icons | UI iconography |
pixel-pop/
├── index.html # Complete single-file application
└── README.md # This file
💡 The entire app is contained in a single HTML file for easy deployment and portability.
| Browser | Version | Status |
|---|---|---|
| Chrome | 80+ | ✅ Full Support |
| Firefox | 75+ | ✅ Full Support |
| Edge | 80+ | ✅ Full Support |
| Safari | 15+ | ✅ Full Support |
| Safari iOS | 15+ | ✅ Touch Support |
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
samaed-samee
- GitHub: @samaed-samee
Made with ❤️ and pixels
⭐ Star this repo if you find it useful!