🎨 Numbit

Create Pixel Art in Your Browser

A modern, simple 8-bit pixel art creator built with React

Try it now →

---

✨ Features

🖌️ Powerful Drawing Tools

• Pen - Draw individual pixels with precision
• Eraser - Remove pixels cleanly
• Bucket Fill - Fill connected areas instantly
• Shapes - Drag-to-draw rectangles, circles, and lines
• Mirror Mode - Create symmetrical designs effortlessly
• Spray Paint - Add texture and randomness
• Dither - Create classic checkerboard patterns
• Shading - Darken colors for depth
• Move Tool - Reposition your entire artwork
• Pipette - Sample colors from your canvas

🎨 Advanced Color Management

• Preset Palette - Curated selection of vibrant colors
• Custom Colors - Pick any hex color with the color picker
• Custom Palette - Save your favorite colors for quick access
• Background Control - Transparent or solid color backgrounds
• Clear Palette - Reset your custom colors anytime

📐 Flexible Canvas

• Resizable Grid - Adjust from 4×4 up to 64×64 pixels
• Grid Toggle - Show/hide grid lines for cleaner previews
• Responsive Design - Perfect scaling on any screen size
• Mobile Support - Full touch support for drawing on mobile devices

💾 Export & Persistence

• Auto-Save - Your work is automatically saved to local storage
• Multiple Export Formats - Download as PNG, JPG, or PDF
• Undo/Redo - Full history support (up to 50 steps)
• Double-Click Erase - Quick pixel removal

🎯 User Experience

• Dark Mode Interface - Easy on the eyes
• Keyboard Shortcuts - Undo (Cmd/Ctrl+Z), Redo (Cmd/Ctrl+Shift+Z)
• Collapsible Sidebar - More space for your canvas
• No Installation Required - Works entirely in your browser

---

🚀 Getting Started

Try It Online

Visit numbit.dev to start creating immediately!

Run Locally

1. Clone the repository

   git clone https://github.com/eddyalder/numbit.git
   cd numbit

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Build for production

   npm run build

---

🛠️ Tech Stack

• Framework: React 18 - Modern UI library
• Build Tool: Vite - Lightning-fast builds
• Styling: CSS Variables with custom dark theme
• Icons: Lucide React - Beautiful, consistent icons
• Export: html2canvas + jsPDF
• Analytics: Vercel Analytics

---

📖 How to Use

1. Select a Tool - Choose from pen, shapes, fill, and more
2. Pick a Color - Use the preset palette or create custom colors
3. Start Drawing - Click or drag on the canvas to create
4. Adjust Canvas - Resize the grid or toggle grid lines
5. Export - Download your masterpiece as PNG, JPG, or PDF

Pro Tips

• Use Mirror Mode for symmetrical sprites
• Double-click any pixel to quickly erase it
• The Move Tool lets you reposition your entire artwork
• Your work auto-saves—come back anytime to continue

---

🎯 Use Cases

• 🎮 Game Development - Create sprites and assets for retro games
• 🖼️ NFT Art - Design unique pixel art for digital collectibles
• 📱 App Icons - Make custom icons and favicons
• 🎨 Digital Art - Express yourself with nostalgic pixel aesthetics
• 📚 Education - Learn digital art fundamentals
• 🎁 Fun Projects - Create pixel art gifts, avatars, and more

---

🤝 Contributing

Contributions are welcome! Feel free to:

• 🐛 Report bugs
• 💡 Suggest new features
• 🔧 Submit pull requests
• 📖 Improve documentation

---

👨‍💻 Author

Edward Alder

• Website: edwardalder.dev
• GitHub: @eddyalder

---

🌟 Show Your Support

If you find Numbit useful, please consider:

• ⭐ Starring the repository
• 🐦 Sharing it on social media
• 🔗 Linking to numbit.dev

---

Made with ❤️ by Edward Alder

Website • Report Bug • Request Feature