A powerful real-time collaborative workspace where teams can edit documents, write code, analyze data, manage tasks, brainstorm on whiteboards, chat, and meet live in one unified platform.
VBase is an all-in-one collaborative virtual workspace that brings together document editing, code collaboration, spreadsheet work, kanban task tracking, whiteboard brainstorming, chat, and video conferencing into a seamless, real-time experience. Think of it as your team's virtual office where everyone can work together regardless of location.
Modern teams face fragmented collaboration:
- Document editing → Google Docs
- Code collaboration → VS Code Live Share
- Spreadsheets → Google Sheets / Excel
- Task tracking → Trello / Jira
- Whiteboarding → Miro/Figma
- Video calls → Zoom/Google Meet
- Team chat → Slack/Discord
The Result: Constantly switching between apps, losing context, and paying for multiple subscriptions.
VBase unifies all collaboration tools in one workspace:
| Feature | Description |
|---|---|
| 📝 Documents | Rich text collaboration with formatting, exports, and AI writing tools |
| 💻 Code Rooms | Multi-file code collaboration with execution, terminal output, and AI coding help |
| 📊 Spreadsheets | Collaborative spreadsheets with formulas, formatting, and live selection stats |
| ✅ Kanban Boards | Task boards with board/list views, drag-and-drop cards, and custom columns |
| 🎨 Whiteboards | Infinite canvas brainstorming with real-time sync and AI diagram generation |
| 📹 Meetings | Live audio/video meetings with lobby, chat, raised hands, and screen sharing |
| 💬 Team Chat | Workspace-wide and direct messaging with unread tracking and reactions |
| 👥 User Activity | Active-user presence indicators so teams can see who is currently working in a workspace |
⚙️ vbase-rce: Our own experimental RCE engine built with FastAPI and Docker for code execution in Code Room
VBase is deployed on Vercel.
For end-user documentation and feature walkthroughs, start with the user-guide hub:
- Rich Text Editing: Full formatting with Tiptap-powered editor (bold, italic, headings, lists, images, links)
- Real-Time Sync: See teammates' cursors and edits instantly via Liveblocks Yjs
- A4 Page Layout: Professional document view with rulers, margins, and page breaks
- AI Writing Tools: Summarize, elaborate, fix grammar, change tone, and generate content
- Export Options: Export documents as JSON, HTML, PDF, or text
- Connection Status: Visual indicators for sync status
- Multi-Language Support: JavaScript, Python, Java, C, C++
- Live Collaboration: Real-time cursor presence with colored user indicators
- Dual Code Execution Engines:
- Piston API - Public code execution service
- VBase RCE - Custom Azure-hosted execution engine
- File Explorer: Create files and folders with hierarchical organization
- VS Code Themes: Light and dark mode with VS Code-style syntax highlighting
- Integrated Terminal: View execution output directly in the editor
- AI Assistant: Ask for explanations or use agent-style generation directly in the editor
- Spreadsheet Room Type: Create spreadsheet rooms directly from a workspace
- Live Grid Editing: Edit cells collaboratively with shared state via Liveblocks storage
- Formula Bar: Enter values and formulas with cell-reference awareness
- Formatting Tools: Bold, italic, underline, alignment, fill, text color, and number formats
- Structure Controls: Insert and delete rows or columns relative to the active cell
- Selection Stats: Instantly view count, min, max, average, and sum for selected ranges
- Kanban Room Type: Create boards for task planning and delivery workflows
- Board And List Views: Switch between drag-and-drop board view and table-style list view
- Default Workflow Columns: Start with To do, In progress, and Done
- Task Editing: Add task titles, descriptions, and update card details later
- Custom Columns: Add, rename, and delete columns to match the team's workflow
- Drag And Drop: Move cards within or across columns to reflect progress
- Infinite Canvas: Powered by Excalidraw for free-form drawing
- Real-Time Sync: See teammates drawing in real-time
- Rich Toolset: Shapes, arrows, text, freehand drawing, and more
- Persistent Storage: Whiteboards save to database automatically
- AI Diagram Generation: Turn prompts like flows or system descriptions into live canvas diagrams
- HD Video & Audio: Crystal clear communication via LiveKit
- Meeting Lobby: Preview camera/mic before joining
- Multiple Meetings: Up to 3 concurrent meetings per conference room
- In-Call Collaboration: Open people and chat side panels while staying in the call
- Live Controls: Toggle mic, camera, screen sharing, and raised hand state during meetings
- Participant Management: See who's in the call with host identification
- Meeting Cleanup: Automatic resource cleanup on leave/disconnect
- Workspace Chat:
#generalchannel for team-wide communication - Direct Messages: Private 1:1 conversations between team members
- Message Reactions: Quick reactions for like and haha in the current workspace chat UI
- Unread Tracking: Badge notifications for unread messages
- Floating UI: Non-intrusive chat bubble accessible from anywhere
- Organization-Based: Workspaces tied to Clerk Organizations
- Member Management: Invite team members via email
- Room Types: Create Document, Code, Whiteboard, Spreadsheet, Meeting, or Kanban rooms
- User Activity Indicators: See active user avatars and presence while collaborating inside workspaces
- Access Control: Room-level permissions for team members
- Active User Avatars: Workspace surfaces show who is currently active
- Presence Awareness: Teammates can quickly see whether others are already inside a workspace or collaboration surface
- Collaboration Confidence: Presence indicators help teams know when it makes sense to start editing, chatting, or meeting live
- Join Users: When joining a workspace, users can see who is already active and choose to join them in their current activity or start something new.
VBase currently supports these room types in workspaces:
- Document: Rich-text collaboration, exports, and AI writing tools
- Code: File-based coding, execution engines, terminal output, and AI assistance
- Whiteboard: Excalidraw-based collaboration with AI diagram generation
- Spreadsheet: Grid editing, formulas, formatting, and live collaboration
- Meeting: Live audio/video sessions with chat, raised hands, and screen sharing
- Kanban: Task boards with drag-and-drop workflow management
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router |
| React 18 | UI component library |
| TypeScript | Type-safe development |
| Tailwind CSS 4 | Utility-first styling |
| Framer Motion | Smooth animations |
| Lucide React | Beautiful icons |
| Technology | Purpose |
|---|---|
| Convex | Real-time database & backend functions |
| Clerk | Authentication & organization management |
| Technology | Purpose |
|---|---|
| Liveblocks | Cursor presence, Yjs sync, real-time events |
| Yjs | CRDT-based document collaboration |
| LiveKit | WebRTC video/audio streaming |
| Technology | Purpose |
|---|---|
| vbase-rce | Our own experimental RCE engine |
| Tiptap | Rich text document editing |
| CodeMirror | Code editing with syntax highlighting |
| Excalidraw | Whiteboard drawing canvas |
| Dnd Kit | Kanban drag-and-drop interactions |
| Piston API | An advanced & secured public RCE engine API |
┌─────────────────────────────────────────────────────────────────┐
│ CLIENT (Next.js) │
├─────────────────────────────────────────────────────────────────┤
│ ClerkProvider → ConvexProvider → LiveblocksProvider │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Documents │ │ Code Editor │ │ Whiteboard │ │
│ │ (Tiptap) │ │ (CodeMirror) │ │ (Excalidraw) │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Spreadsheets │ │ Kanban │ │ Meetings │ │
│ │ (Liveblocks) │ │ (Dnd Kit) │ │ (LiveKit) │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────┐ │
│ │ Chat System │ │
│ │ (Convex) │ │
│ └──────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
┌───────────────────┼───────────────────┐
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Convex │ │ Liveblocks │ │ LiveKit │
│ (Database) │ │ (Sync) │ │ (Video) │
└─────────────┘ └─────────────┘ └─────────────┘
- Persistent Data → Convex: Users, workspaces, rooms, chat messages, documents, code-file metadata, whiteboards, spreadsheets, kanban boards, and meetings
- Ephemeral Data → Liveblocks: Cursor positions, editor state with Yjs, live presence, and spreadsheet collaboration state
- Video/Audio → LiveKit: Real-time media streaming for meeting rooms
vbase/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ ├── generate-code/ # Code AI generation
│ │ ├── generate-diagram/ # Whiteboard AI diagram generation
│ │ ├── generate-doc-ai/ # Document AI actions
│ │ ├── liveblocks-auth/ # Liveblocks authentication
│ │ ├── livekit/ # LiveKit token generation
│ │ └── leave-meeting/ # Meeting cleanup endpoint
│ ├── dashboard/ # Dashboard pages
│ │ ├── page.tsx # Workspace list
│ │ └── invitations/ # Pending invitations
│ └── workspace/[workspaceId]/ # Workspace pages
│ └── room/[roomId]/ # Room type routes
│ ├── document/ # Document editor
│ ├── code/ # Code editor
│ ├── spreadsheet/ # Spreadsheet editor
│ ├── kanban/ # Kanban board
│ ├── whiteboard/ # Whiteboard canvas
│ └── meeting/ # Video conferencing
├── components/ # React components
│ ├── chat/ # Chat system components
│ ├── code/ # Code editor components
│ ├── document/ # Document editor components
│ ├── spreadsheet/ # Spreadsheet room components
│ ├── kanban/ # Kanban board components
│ ├── meeting/ # Video meeting components
│ ├── rooms/ # Room management
│ ├── whiteboard/ # Whiteboard components
│ └── ui/ # Shared UI primitives
├── convex/ # Convex backend
│ ├── schema.ts # Database schema
│ ├── users.ts # User operations
│ ├── workspaces.ts # Workspace operations
│ ├── rooms.ts # Room operations
│ ├── documents.ts # Document operations
│ ├── codeFiles.ts # Code file operations
│ ├── whiteboards.ts # Whiteboard operations
│ ├── spreadsheets.ts # Spreadsheet operations
│ ├── kanban.ts # Kanban operations
│ ├── meetings.ts # Meeting operations
│ ├── channels.ts # Chat channels
│ └── messages.ts # Chat messages
├── lib/ # Utility functions
│ ├── piston.ts # Piston RCE integration
│ └── vbase-rce.ts # Custom RCE integration
├── providers/ # Context providers
│ ├── convex-client-provider.tsx
│ ├── liveblocks-provider.tsx
│ └── livekit-provider.tsx
└── liveblocks.config.ts # Liveblocks type definitions
- Node.js v18 or higher
- npm or yarn
- Convex account (convex.dev)
- Clerk account (clerk.com)
- Liveblocks account (liveblocks.io)
- LiveKit account (livekit.io) — for video features
git clone https://github.com/your-username/vbase.git
cd vbasenpm installCreate a .env.local file in the root directory:
# Convex
CONVEX_DEPLOYMENT=your_convex_deployment
NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxx
CLERK_SECRET_KEY=sk_test_xxxxx
# Clerk Redirect URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/dashboard
# Liveblocks
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=pk_xxxxx
LIVEBLOCKS_SECRET_KEY=sk_xxxxx
# LiveKit
NEXT_PUBLIC_LIVEKIT_URL=wss://your-project.livekit.cloud
LIVEKIT_API_KEY=APIxxxxx
LIVEKIT_API_SECRET=xxxxx
# Custom RCE (Optional)
NEXT_PUBLIC_VBASE_RCE_BASE_URL=https://your-rce-server.com
NEXT_PUBLIC_VBASE_RCE_API_SECRET=your_secret# Initialize Convex (first time only)
npx convex dev --once
# This will create the database schema and functionsIn your Clerk Dashboard:
- Go to Webhooks → Add Endpoint
- Set the endpoint URL to:
https://your-convex-url.convex.site/clerk - Subscribe to events:
user.created,user.updated,organization.created
Terminal 1 - Convex Backend:
npx convex devTerminal 2 - Next.js Frontend:
npm run dev
⚠️ Both servers must run simultaneously for the app to work properly.
Navigate to http://localhost:3000
| Resource | Limit |
|---|---|
| Workspaces per User | 5 max |
| Rooms per Workspace | 10 max |
| Meeting Rooms per Workspace | 1 max |
| Concurrent Meetings per Meeting Room | 3 max |
| Members per Workspace | 10 max |
# Development
npm run dev # Start Next.js dev server
npx convex dev # Start Convex dev server
# Production
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint- Context-Aware Chat - File-specific chat sidebars
- 2D Spatial Dashboard - Gather.town-inspired navigation
- Meeting Enhancements - Polls, richer moderation tools, and deeper in-call controls
- Spreadsheet Enhancements - More advanced formulas and polish beyond the MVP grid editor
- Role-Based Access Control - Granular room permissions
This project is licensed under the MIT License - see the LICENSE file for details.
All thanks to these amazing projects and services:
- Convex for the incredible real-time database
- Clerk for seamless authentication & organization management
- Liveblocks for collaboration infrastructure
- LiveKit for WebRTC video streaming
- Excalidraw for the whiteboard canvas
- Tiptap for the rich text editor
- CodeMirror for the code editor
- Piston for robust & secure RCE engine
Raiyan Muhtasim
|
Abdullah Al Musaddiq Rafi
|
Md. Mahbub Ur Rahman
|
Built with ❤️ for teams who believe collaboration should be seamless
"The best ideas emerge when teams can truly work together."
