🍬 Gumdrop Studio 🍭

An easy to use pixel art creation app

Create adorable pixel art with a unique dual-layer canvas system!

Features • Getting Started • Desktop App • Usage • Export • Tech Stack

✨ Features

🎨 Dual-Layer Canvas System

The best feature of Gumdrop Studio! Draw blocky pixel art on one layer, then add fine details like whiskers, smiles, or highlights on a smooth vector overlay layer.

• Pixel Layer: Crisp, blocky RGBA pixel array (perfect for sprites)
• Overlay Layer: Anti-aliased vector paths for thin accent lines (1-6px)

🛠️ Drawing Tools

| Tool | Description | | ------------------ | ------------------------------------------------ | | ⬛ Pixel Stamp | Place a single pixel with live preview (default) | | 🖊️ Pencil | Freehand pixel drawing | | 🧽 Eraser | Remove pixels | | 📏 Line | Straight lines with Bresenham algorithm | | ▭ Rectangle | Outline or filled boxes | | ◯ Circle | Perfect circles with midpoint algorithm | | ☾ Curve | Smooth quadratic Bezier curves (3-click) | | ✨ Accent Pen | Thin vector lines for fine details |

🌈 Advanced Color System

• HSV Color Wheel: Circular picker for intuitive color selection
• Alpha Channel: Full transparency support (0.0–1.0)
• Hex Input: Direct color code entry
• Color Persistence: Colors maintained across sessions

🔧 Canvas Features

• Adjustable Zoom: 4x to 40x magnification (default 16x)
• Grid Overlay: Toggle-able pixel grid for precise alignment
• Flexible Sizes: Create canvases from 4×4 to 256×256 pixels
• Theme-Aware Grid: Grid lines automatically adjust for visibility in light and dark mode
• Softer Light Theme: Warm cream gradient replaces bright white to reduce glare
• Undo/Redo: Full history management with unlimited steps

💾 Project Management

• Save/Load: Projects stored in browser localStorage
• Auto-Save: Automatic persistence with project list
• Quick Actions: New project, duplicate, delete

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

For the desktop app (Tauri): also requires Rust. See Desktop App below.

Installation

# Clone the repository (or download)
git clone https://github.com/pinkpixel-dev/gumdrop-studio
cd gumdrop-studio

# Install dependencies
npm install

Development (Browser)

npm run dev

🎉 Opens automatically at http://localhost:1234

Build for Production

npm run build

Outputs optimized bundle to dist/ directory.

Preview Production Build

npm run preview

🖥️ Desktop App (Tauri)

Gumdrop Studio ships as a full native desktop app powered by Tauri 2. The desktop build adds:

• Native window with full app menu (File, Edit, View, Help)
• Keyboard shortcuts wired through the OS menu (Ctrl+N, Ctrl+S, Ctrl+Z, etc.)
• AppImage & .deb installers for Linux
• File system & dialog access via Tauri plugins

Desktop Prerequisites

Install Rust:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

On Linux, also install the required system libraries:

# Arch Linux
sudo pacman -S webkit2gtk-4.1 libappindicator-gtk3 librsvg

# Ubuntu / Debian
sudo apt install libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf

Run Desktop Dev Build

npm run tauri:dev

Build Desktop Installers

npm run tauri:build

Builds both an AppImage and a .deb package to:

src-tauri/target/release/bundle/
  appimage/  Gumdrop Studio_1.1.0_amd64.AppImage
  deb/       Gumdrop Studio_1.1.0_amd64.deb

• AppImage — portable, runs on any Linux without installing. Just chmod +x and run.
• .deb — install with sudo dpkg -i "Gumdrop Studio_1.1.0_amd64.deb"

🎯 Usage

1. Select a tool from the left panel (Pixel Stamp is selected by default, switch to Pencil, Line, Circle, etc. as needed)
2. Choose a color using the color wheel or hex input
3. Draw on the canvas with mouse or touch
4. Use Accent Pen for fine details like whiskers or highlights
5. Undo/Redo as needed with history buttons
6. Save your project with the Save button
7. Export in your preferred format when done!

🎨 Pro Tips

• Curve Tool: Click 3 times (start → control point → end)
• Fill Toggle: Enable for filled rectangles
• Grid Overlay: Helpful for precise pixel placement
• Accent Pen: Use 1-2px width for whiskers, 3-4px for thicker accents
• Zoom: Increase for fine detail work, decrease for overview

📤 Export Options

| Format | Description | Use Case | | ----------- | ------------------------------------ | ---------------------------- | | PNG 🖼️ | Transparent or opaque background | Web graphics, game sprites | | JPG 📷 | Opaque background, smaller file size | Backgrounds, photos | | SVG 🎨 | Vector format (scalable) | Logos, scalable graphics | | JSON 📦 | Complete state data | Backup, sharing, re-editing | | HTML 🌐 | Self-contained renderer | Embeddable demos, portfolios |

🏗️ Project Structure

gumdrop-studio/
├── public/
│   ├── favicon.png         # 🧁 Favicon
│   ├── logo.png            # Brand logo
│   ├── _redirects          # Cloudflare Pages SPA routing
│   └── _routes.json        # Cloudflare routing config
├── src/
│   ├── components/
│   │   ├── Canvas.jsx      # Dual-canvas rendering
│   │   ├── ColorWheel.jsx  # HSV color picker
│   │   ├── Footer.jsx      # Footer component
│   │   ├── Header.jsx      # Header with theme toggle
│   │   ├── ProjectPanel.jsx # Save/load/export UI
│   │   └── ToolPanel.jsx   # Tool selection + controls
│   ├── utils/
│   │   ├── canvas.js       # Canvas rendering helpers
│   │   ├── colors.js       # Color conversions
│   │   ├── desktop.js      # Tauri menu event listeners
│   │   ├── helpers.js      # Generic utilities
│   │   ├── rasterizers.js  # Shape algorithms
│   │   └── storage.js      # Project persistence (localStorage + Tauri store)
│   ├── App.jsx             # Main app logic
│   ├── index.css           # Global styles
│   └── main.jsx            # React entry
├── src-tauri/
│   ├── src/main.rs         # Tauri app + native menu
│   ├── Cargo.toml          # Rust dependencies
│   ├── tauri.conf.json     # Tauri window + bundle config
│   └── icons/              # App icons (PNG, ICO, ICNS)
├── OVERVIEW.md             # Comprehensive docs
├── CHANGELOG.md            # Version history
├── SETUP.md                # Quick setup guide
├── LICENSE                 # Apache 2.0
├── wrangler.toml           # Cloudflare Pages config
└── package.json

🛠️ Tech Stack

• React 19.2.4 - Modern UI framework with latest features
• Vite 7.3.1 - Lightning-fast build tool and dev server
• Tailwind CSS 4.1.18 - Utility-first styling with latest improvements
• Tauri 2.x - Native desktop app framework (Rust-powered)
• Canvas API - Native HTML5 rendering (pixel-perfect + anti-aliased)
• Wrangler 4.65.0 - Cloudflare Pages deployment tool

All dependencies are latest stable versions as of March 2026.

📚 Documentation

• OVERVIEW.md - Comprehensive technical documentation
• SETUP.md - Quick setup guide
• CHANGELOG.md - Version history and updates
• README.md (this file) - Quick start guide

🤝 Contributing

Contributions are welcome! Feel free to:

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

Please ensure code follows existing patterns and conventions.

📄 License

Apache License 2.0 - See LICENSE for details.

Copyright © 2026 Pink Pixel

💗 Credits

Created by Pink Pixel

• 🌐 Website: pinkpixel.dev
• 💻 GitHub: @pinkpixel-dev
• ☕ Support: Buy me a coffee
• 📧 Contact: [email protected]

✨ Dream it, Pixel it ✨

Made with 💗 by Pink Pixel

Now go draw some pixelated kittens! 🐱