A real-time collaborative whiteboard with gesture controls, multiplayer cursors, and zero server infrastructure.
PeerDraw is a cutting-edge, peer-to-peer collaborative workspace that operates entirely in your browser—no servers, no databases, no backend infrastructure. Create ephemeral collaboration spaces for brainstorming, whiteboarding, or just hanging out with your team in real-time.
- 🔒 100% Private: True P2P connection via WebRTC—your data never touches a server
- ⚡ Instant Setup: Create a room in seconds, no sign-up required
- 🎨 Rich Content: Text, images, sticky notes, drawings, and more
- 👋 Hand Gesture Controls: AI-powered MediaPipe integration for hands-free interaction
- 🎮 Multiplayer Character: Navigate the space with avatar controls
- 👁️ Live Cursors: See exactly where everyone is pointing in real-time
- 🔐 Optional Passwords: Secure your rooms with password protection
- 💾 Local Persistence: Your recent rooms are saved locally via IndexedDB
- 📱 Responsive Design: Works seamlessly on desktop and mobile
- Drag-and-drop elements anywhere on an infinite canvas
- Real-time synchronization between all participants
- Support for text, images, sticky notes, and drawings
Powered by Trystero, PeerDraw establishes direct WebRTC connections between peers:
- Zero server costs
- Ultra-low latency
- Complete privacy
- Works behind most firewalls
Using MediaPipe AI vision models:
- Control elements with hand gestures
- Pinch to grab and drag
- Wave to interact
- Completely hands-free experience
- Spawn a customizable avatar
- Move around the canvas with WASD or arrow keys
- See other players' characters in real-time
- Perfect for virtual hangouts
- Glassmorphic design with smooth animations
- Dark mode optimized
- Framer Motion animations
- Radix UI components for accessibility
- Responsive across all devices
- Astro - Ultra-fast static site generator with partial hydration
- React 19 - Interactive UI components
- TypeScript - Type-safe development
- Tailwind CSS 4 - Utility-first CSS framework
- Radix UI - Accessible component primitives
- Framer Motion - Production-ready animations
- Lucide React - Beautiful icon system
- Zustand - Lightweight state management
- Dexie.js - IndexedDB wrapper for persistence
- idb-keyval - Simple key-value storage
- Bun - Fast JavaScript runtime & package manager
- Vercel - Deployment and hosting
- @vercel/analytics - Web analytics
- Canvas Confetti - Celebration effects
You need Bun installed on your machine:
# macOS/Linux
curl -fsSL https://bun.sh/install | bash
# Windows
powershell -c "irm bun.sh/install.ps1 | iex"-
Clone the repository
git clone https://github.com/yourusername/peerdraw.git cd peerdraw -
Install dependencies
bun install
-
Start the development server
bun dev
-
Open your browser
http://localhost:4321
# Build for production
bun run build
# Preview production build locally
bun run preview- Visit peerdraw.vercel.app
- Optionally set a password for privacy
- Click "Create New Space"
- Share the generated room URL with collaborators
- Get the Room ID from a collaborator
- Enter it in the "Join existing" field
- If password-protected, enter the password
- Click the join button →
| Action | Shortcut |
|---|---|
| Delete selected element | Delete / Backspace |
| Move character | WASD / Arrow Keys |
| Toggle gesture mode | Click gesture button |
| Add new element | Click + button |
When enabled, use your webcam:
- Open hand: Show your hand to activate
- Pinch: Grab and drag elements
- Closed fist: Release element
- Wave: Navigate or interact
peerdraw/
├── public/ # Static assets
│ ├── logo.svg # PeerDraw logo
│ ├── favicon.svg # Favicon
│ └── pixel_pet.png # Character sprite
├── src/
│ ├── components/ # React components
│ │ ├── board/ # Board-specific components
│ │ │ ├── Toolbar.tsx
│ │ │ ├── DraggableElement.tsx
│ │ │ ├── Cursors.tsx
│ │ │ ├── Character.tsx
│ │ │ └── ...
│ │ ├── ui/ # Reusable UI components (Radix)
│ │ ├── Board.tsx # Main board component
│ │ └── GestureController.tsx
│ ├── layouts/ # Astro layouts
│ ├── lib/ # Utilities and logic
│ │ ├── store.ts # Zustand state management
│ │ ├── p2p.ts # Trystero P2P logic
│ │ └── utils.ts # Helper functions
│ ├── pages/ # Astro pages (routes)
│ │ ├── index.astro # Landing page
│ │ └── board/ # Dynamic board routes
│ └── styles/ # Global styles
├── astro.config.mjs # Astro configuration
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies
Edit your Tailwind config or CSS variables in src/styles/global.css:
:root {
--primary: /* your color */;
--background: /* your color */;
--foreground: /* your color */;
}- Update the
ElementTypeunion insrc/lib/store.ts - Add rendering logic in
src/components/board/DraggableElement.tsx - Update the toolbar in
src/components/board/Toolbar.tsx
Contributions are what make the open-source community amazing! Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
If you find PeerDraw useful, consider supporting its development:
- Astro for the incredible framework
- Trystero for making P2P simple
- MediaPipe for AI-powered gesture recognition
- Radix UI for accessible components
- Vercel for seamless deployment
Have questions or suggestions? Feel free to open an issue or reach out!
- Live Demo: peerdraw.vercel.app
- Report Issues: GitHub Issues