A modern, web-based drawing app for visualizing ideas with an infinite canvas, hand-drawn styling, and real-time collaboration via WebSockets.
drawflow.mp4
| Layer | Technology |
|---|---|
| Frontend | Next.js 16, React 19, Tailwind CSS 4, Radix UI, Zustand |
| Backend | Node.js WebSocket server (ws) |
| Persistence | Redis |
| Monorepo | Turborepo, pnpm workspaces |
| Language | TypeScript |
Landing Page
 |
 |
 |
 |
Canvas
 |
 |
 |
 |
 |
 |
DrawFlow/
├── apps/
│ ├── web/ # Next.js web client
│ └── websocket/ # WebSocket collaboration server
├── packages/
│ ├── ui/ # Shared UI components
│ ├── eslint-config/
│ └── typescript-config/
├── turbo.json
└── pnpm-workspace.yaml
- Node.js >= 18
- pnpm 9+
- Redis (optional — needed for collaborative persistence)
# Install dependencies
pnpm install
# Configure environment
cp sampleENV.text .env
# Edit .env as needed (defaults work for local dev)
# Start all apps
pnpm devThe web client runs on http://localhost:3000 and the WebSocket server on ws://localhost:8080.
| Variable | Default | Description |
|---|---|---|
NODE_ENV |
development |
Environment mode |
NEXT_PUBLIC_WS_URL |
ws://localhost:8080 |
WebSocket server URL |
NEXT_PUBLIC_HTTP_URL |
http://localhost:3000 |
HTTP backend URL |
REDIS_URL |
redis://localhost:6379 |
Redis connection string |
| Command | Description |
|---|---|
pnpm dev |
Run all apps in development mode |
pnpm build |
Build all apps |
pnpm lint |
Lint all apps |
pnpm check-types |
Typecheck all apps |
pnpm format |
Format code with Prettier |
pnpm --filter web dev # Web client only
pnpm --filter websocket dev # WebSocket server only- If Redis is not running, the WebSocket server will still start but collaborative shape persistence will be disabled.
- The web client expects the WebSocket server to be available at
NEXT_PUBLIC_WS_URL.