Void Draw is a high-performance, real-time collaborative drawing application built with React, Convex, and Tailwind CSS.
Void Draw provides a modern canvas experience for individual work and collaborative sessions. It includes a custom rendering engine, real-time synchronization, authentication support, and export tools.
- Real-time collaboration with instant synchronization across connected clients.
- Advanced canvas tools for freehand drawing, geometric shapes, and styled elements.
- Configurable grid system with adjustable size, visibility toggle, and snap-to-grid support.
- Authentication with anonymous and OAuth sessions via Convex Auth.
- PDF export using
jspdf. - Persistent drawing preferences (for example, grid settings and styling options).
- React 19 (Vite)
- Tailwind CSS 4
- Framer Motion
- Phosphor Icons
- Convex React Hooks
- Convex
- Convex Auth
- TypeScript
- CSS
- HTML
| Workspace | Tools |
|---|---|
 |
|
- Bun (recommended) or Node.js
- Convex account
- Clone the repository:
git clone https://github.com/your-username/void-draw.git
cd void-draw- Install dependencies:
bun install- Initialize Convex:
bun x convex devThis command guides you through login and project setup, and generates .env.local.
- Start the development server:
bun devApplication URL: http://localhost:5173
Ensure .env.local includes:
CONVEX_DEPLOYMENT=your_deployment_name
VITE_CONVEX_URL=your_convex_urlFor authentication settings, see convex/auth.config.ts.
├── convex/ # Backend schema, queries, and mutations
│ ├── auth.ts
│ ├── schema.ts
│ └── drawings.ts
├── src/
│ ├── canvas/ # Canvas engine and drawing components
│ │ ├── Canvas.tsx
│ │ └── Toolbar.tsx
│ ├── lib/ # Shared utilities
│ └── App.tsx
├── public/ # Static assets
└── tailwind.config.js
Configure your production deployment in the Convex Dashboard.
- Push the repository to GitHub.
- Import the repository into Vercel.
- Set
VITE_CONVEX_URLin Vercel environment variables.
Distributed under the MIT License. See LICENSE for details.