workspace

Local-first collaboration: share files and ideas on an infinite canvas Real-time visual collaboration for your local network Your team's shared canvas, without the internet

Comment

Inspiration

In many environments—schools, offices, homes—teams need to collaborate and share content without relying on cloud services or internet connectivity. We were inspired by the need for a privacy-first, local-network collaboration tool that works anywhere, anytime, without sending data to external servers.

What it does

Local Collaborative Workspace is a real-time collaborative canvas application for local networks. Users can:

  • 📝 Create and organize notes, files, folders, and images on an infinite canvas
  • 👥 Collaborate in real-time with multiple users on the same network
  • 🖱️ See live cursors of other participants
  • 📱 Access from any device (desktop, tablet, mobile) via browser
  • 📤 Drag-and-drop file uploads directly onto the canvas
  • 🔒 Keep all data local—no cloud, no internet required

How we built it

We used Kiro's spec-driven development approach to systematically design and implement the project:

  1. Requirements Phase: Defined user stories and acceptance criteria using EARS patterns
  2. Design Phase: Created architecture diagrams and component specifications
  3. Implementation: Built incrementally following the generated task list

Architecture

  • Frontend: React 19 + TypeScript + Vite + Zustand for state management
  • Backend: Node.js + Express + Socket.io for real-time WebSocket communication
  • Database: SQLite for local persistence
  • VS Code Extension: Integrated experience with server management and embedded canvas

Key Technical Decisions

  • WebSocket-first: All canvas operations sync in real-time via Socket.io
  • Last-write-wins: Simple conflict resolution for collaborative editing
  • Responsive design: Works on any screen size with touch support
  • Zero configuration: Auto-discovers network settings, just run and share the URL

Challenges we ran into

  1. Real-time synchronization: Ensuring smooth updates across multiple clients without conflicts
  2. Cross-platform compatibility: Making drag-and-drop work consistently on desktop and mobile
  3. Network discovery: Automatically finding the correct local IP address to share
  4. VS Code WebView integration: Embedding the full React app inside VS Code's WebView API

Accomplishments that we're proud of

  • ✅ Full real-time collaboration with live cursor tracking
  • ✅ VS Code extension that bundles the entire application
  • ✅ Clean, modern UI with dark mode support
  • ✅ Zero external dependencies for data storage
  • ✅ QR code generation for easy mobile access

What we learned

  • How to use Kiro's spec-driven workflow to break down complex features
  • Building VS Code extensions with WebView panels
  • Implementing optimistic UI updates with WebSocket synchronization
  • Managing shared state between multiple real-time clients

What's next for Local Collaborative Workspace

  • 🔐 Optional end-to-end encryption for sensitive environments
  • 📊 Canvas templates for common use cases (brainstorming, kanban, etc.)
  • 🎨 Rich text editing for notes
  • 📁 Folder hierarchy and organization features
  • 🌐 Optional cloud sync for cross-network collaboration
Share this project:

Updates