Show HN: Multiplayer PixiJS pixel canvas with WebRTC and WebSocket sync

A web app where anyone can draw pixels on a shared canvas in real-time. Other people see your pixels appear instantly, you can see their cursors moving around, and there's a chat to talk while drawing. No signup required—just visit and start drawing.

🚀 Live Demo | Built with Nautex AI by Ivan Makarov

It's like a shared whiteboard but with pixels. You can:

• Draw pixels one at a time (click to place)
• See other people drawing at the same time
• Watch their cursors move around
• Chat with everyone currently online
• Zoom and pan around a 5000x5000 pixel canvas
• Join anonymously - you get a random username

Built to explore real-time web tech (WebRTC for cursors/chat, WebSockets for pixel updates) and test if AI can build complex apps from specifications alone.

Frontend

• React + TypeScript - Component-based UI architecture
• PixiJS - High-performance WebGL canvas rendering
• Vite - Fast development and build tooling
• Tailwind CSS - Utility-first styling with dark/light themes

Backend

• Node.js + Express - RESTful API and WebSocket server
• MongoDB - Document database with append-only pixel history
• WebSocket (ws) - Real-time pixel broadcast with rate limiting
• Mongoose - MongoDB object modeling

Infrastructure

• Docker + docker-compose - Containerized service orchestration
• Caddy - Reverse proxy with automatic HTTPS
• WebRTC - Peer-to-peer data channels for cursors and chat
• Sentry - Error tracking and monitoring

This app was built by AI from start to finish. Here's how it worked:

1. Talked to Nautex AI chatbot about what I wanted to build

   • It asked questions and gathered requirements
   • Result: Initial specs for the app

2. Refined the specifications in the Nautex app

   • Fixed gaps and added missing details
   • Result: Complete PRD and TRD documents

3. Planned the file structure before any coding

   • Mapped every file to specific requirements
   • Result: Complete codebase blueprint

4. Created coding tasks broken into small chunks

   • Each task linked to specific files and requirements
   • Result: Step-by-step implementation plan

5. Exported everything and connected to Claude Code

   • Used Nautex MCP for real-time sync
   • Delivered to Claude:
     • PRD.md - What to build
     • TRD.md - How to build it
     • FILE.md - Where to put code
     • Live task updates

6. Claude Code wrote all the code

   • Followed the specifications exactly
   • No architectural decisions needed - everything was pre-planned
   • Result: Working app that matches the specs

What this approach gave us:

• App built exactly as specified - no surprises
• Tests included from the start
• Clean monorepo structure with shared types
• Smooth 60 FPS rendering with WebGL optimization

Two-channel approach: WebSockets for pixels (needs to be reliable), WebRTC for cursors/chat (needs to be fast)

Append-only pixels: Never delete pixel history, just track the latest one for each position

GPU rendering: PixiJS handles thousands of pixels smoothly, grid detail changes based on zoom level

No signup: Cookie-based sessions with random usernames - zero friction to start drawing

The application will be available at http://localhost:3000

• 5000x5000 pixel canvas with smooth zoom/pan
• See other people's pixels appear in <200ms
• Peer-to-peer chat (not stored on server)
• Live cursors showing where others are pointing
• Particle effects when pixels are placed
• Auto-reconnect if connection drops
• Works on mobile
• Dark/light theme toggle
• Debug panel for tweaking animations (dev mode)