Sketchboard

Next.js 15Next.js 15
React 18React 18
TypeScriptTypeScript
Tailwind CSSTailwind CSS
shadcn/uishadcn/ui
Node.jsNode.js
PostgreSQLPostgreSQL
PrismaPrisma
DockerDocker
WebSocket
RoughJS
Zod
Turborepo
better-auth
Sketchboard

Sketchboard lets multiple users draw, sketch, and brainstorm together on a shared canvas. It uses RoughJS for a hand-drawn look, supports freehand drawing with perfect-freehand, and encrypts all drawing data client-side so the server never sees what you draw. Works standalone for local sketching or in collaborative rooms with real-time sync. The architecture features a Next.js frontend communicating over WebSockets (JWT-authenticated) with a Node.js WS server, backed by PostgreSQL via Prisma ORM. Users authenticate via better-auth (email/password, Google, GitHub OAuth), and drawing data is encrypted using a key from the URL fragment that never reaches the server.

Features

  • •Freehand drawing, shapes (rectangles, diamonds, arrows), and editable text on an HTML Canvas
  • •Hand-drawn sketch style powered by RoughJS and natural pen strokes via perfect-freehand
  • •Real-time collaboration with WebSocket-powered live sync and cursor tracking
  • •End-to-end encryption — the encryption key lives in the URL fragment and never reaches the server
  • •Room system with admin controls, auto-cleanup on empty rooms, and shareable invite links
  • •Authentication via email/password, Google, and GitHub OAuth using better-auth
  • •Eraser tool, selection/multi-select, fill styles, stroke styles, and font families
  • •Message queue with auto-retry for reliable delivery on reconnect
  • •Multi-tab awareness to prevent duplicate join/leave events
  • •Standalone offline mode and collaborative room mode
  • •Dark/light theme support
PreviousOmnixxNextSignal