✦ Preact Pixel Art Editor

Massive 10,000+ cell Pixel Art Editor built with Preact Signals to showcase extreme granular reactivity without Virtual DOM diffing overhead.

---

✨ Highlights

• 10,000+ cell interactive canvas grid optimized for rendering speed.
• Seamless drawing experience (click and drag) with zero lag.
• 100% fine-grained reactivity using @preact/signals—bypassing Virtual DOM diffing entirely for cell repaints.
• Minimalist memory footprint and high FPS even when rapidly modifying hundreds of cells per second.

🧱 Project Structure

The app is built as a set of standalone components focused on absolute rendering performance:

src/
|-- main.tsx
|-- app.tsx
|-- store.ts
|-- index.css
`-- components/
    |-- Grid.tsx
    `-- Palette.tsx

store.ts orchestrates the reactive state directly via Signals. An array of 10,000 signals is created, ensuring each cell only listens to its own specific signal.

🛠️ Tech Stack

• Preact 10 with Vite 8
• @preact/signals for all state
• TypeScript 6.0
• Tailwind CSS 4 for rapid responsive styling

🔌 Architecture

The core philosophy of this project is demonstrating the power of Preact Signals:

• Bypassing VDOM Diffing: Cell colors are updated directly as you drag your mouse without ever triggering a top-level Grid or App component re-render.
• Granular Subscriptions: Each <Cell> in the UI subscribes strictly to the signal of its specific data point.
• Memory Efficiency: Instead of deeply nested object states, flat arrays of primitives wrapped in signals keep memory overhead minimal.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🧪 Build & Checks

npm run build
npm run preview

🌐 Vercel Deployment

The repository includes vercel.json for Vite static deployment:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.