A collaborative whiteboard application built with Next.js. Draw, sketch, and collaborate in real-time with others, similar to Excalidraw but with our own unique features and approach.
- 🖊️ Real-time Drawing - Smooth drawing experience with perfect-freehand
- 👥 Live Collaboration - Multiple users can draw simultaneously
- 🔗 Document Sharing - Share your whiteboard with others via unique links
- 📱 Responsive Design - Works on desktop, tablet, and mobile
- 🎨 Rich Drawing Tools - Various brushes, shapes, and styling options
- 💾 Auto-save - Your work is automatically saved as you draw
- 🎯 Rough.js Integration - Hand-drawn style shapes and elements
Create a .env.local file in the root of the project:
cp .env.example .env.localConfigure your environment variables (WebSocket server URL, etc.).
Make sure you're in the project directory and run:
npm installStart the development server:
npm run devOpen http://localhost:3000 in your browser to see the application.
To create a production build:
npm run build
npm start- Framework: Next.js 15.2.1 with React 19
- Styling: Tailwind CSS 4.0
- Drawing Engine: Perfect-freehand for smooth strokes
- Shapes: Rough.js for hand-drawn style elements
- State Management: Jotai for reactive state
- Real-time: WebSocket connection to backend
- Storage: IndexedDB (via idb) for offline persistence
- Animations: GSAP for smooth interactions
- Icons: React Icons
- HTTP Client: Axios for API calls
- next: React framework with SSR/SSG
- perfect-freehand: Smooth drawing stroke generation
- roughjs: Hand-drawn style shapes and sketches
- jotai: Primitive and flexible state management
- gsap: High-performance animations
- idb: IndexedDB wrapper for offline storage
- unique-names-generator: Generate unique room/document names
npm run dev: Start development server with hot reloadnpm run build: Create optimized production buildnpm run start: Start production servernpm run lint: Run ESLint for code quality
x-draw-frontend/
├── app/ # Next.js App Router
│ ├── globals.css # Global styles and Tailwind imports
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Home page
├── components/ # Reusable React components
│ ├── Canvas/ # Drawing canvas components
│ ├── Toolbar/ # Drawing tools and controls
│ ├── Sidebar/ # Document management
│ └── UI/ # Common UI components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and configurations
├── store/ # Jotai atoms and state management
├── types/ # TypeScript type definitions
├── public/ # Static assets
└── styles/ # Additional CSS files
The app connects to the x-draw-backend WebSocket server for real-time collaboration. Make sure your backend server is running and properly configured.
NEXT_PUBLIC_WS_URL=ws://localhost:8080
NEXT_PUBLIC_API_URL=http://localhost:8080- Multiple users can join the same whiteboard
- See other users' cursors and drawings in real-time
- Conflict resolution for simultaneous edits
- Freehand drawing with pressure sensitivity
- Geometric shapes (rectangles, circles, arrows)
- Text annotations
- Color picker and brush size controls
- Eraser tool
- Create new whiteboards
- Save and load documents
- Share via unique URLs
- Export drawings as images
- Voice/video chat integration
- Advanced shape tools
- Layer management
- Template library
- Performance optimizations
- Mobile app (React Native)
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- This is a learning project inspired by Excalidraw
- Performance optimizations are ongoing
- Some features may be experimental
MIT License - feel free to use this project for learning and development!