Extend & Deploy

Self Hosting & Collaboration

Run DevBoard on your own infrastructure or add real-time collaboration to your fork.

Self-Hosted Deployment

DevBoard is a static single-file HTML app built with Vite and React. It runs entirely in your browser with no backend required for basic usage.

Option 1: Direct Deployment (Recommended for Most Users)

The simplest way to deploy DevBoard:

  1. Build the app: npm run build
  2. Deploy dist/index.html to any static hosting:
    • Netlify: Drag and drop dist/ → Netlify.com
    • Vercel: vercel deploy
    • GitHub Pages: Push dist/ to a gh-pages branch
    • Your own server: Copy dist/index.html to any web root (Apache, Nginx, etc.)
    • Docker: Mount the file in a lightweight HTTP server
Board state is stored in localStorage — each browser/device maintains its own board. To sync across devices, use the "Share Link" feature (base64-encoded URL) or export/import JSON.

Option 2: Docker Container

FROM nginx:alpine COPY dist/index.html /usr/share/nginx/html/ EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

Build and run:

docker build -t devboard . docker run -p 8080:80 devboard

Option 3: Behind Your Domain (Reverse Proxy)

Keep the credits: Whether you deploy under your own domain or modify the app, please keep the DevBoard logo and attribution visible. It helps spread the word and supports the project.

Nginx example:

server { listen 80; server_name boards.yourcompany.com; location / { alias /var/www/devboard/; try_files $uri $uri/ /index.html; } }

Apache example:

<Directory /var/www/devboard> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^ index.html [L] </Directory>

Real-Time Collaboration (Coming Soon)

DevBoard currently supports single-user boards with URL-based sharing. Real-time collaboration is on the roadmap but not yet implemented.

Note: This section covers architecture suggestions for anyone building collaborative features or forking the project. If you're interested in adding this, see the Contributing section below.

Planned Architecture for Collaboration

To add real-time editing, DevBoard would need:

  1. WebSocket or WebRTC for live updates across users
  2. Operational Transform (OT) or CRDT for conflict-free merging of edits
  3. Persistent database to save board state across sessions
  4. User authentication to identify collaborators

Suggested Tech Stacks

🚀 Supabase (Easiest)

PostgreSQL + real-time subscriptions + auth built-in.

  • Store board JSON in Postgres
  • Use Supabase Realtime for live updates
  • Free tier covers dev/hobby projects
  • Drop-in migrations from Zustand → Supabase

Supabase Realtime Docs

🔗 WebSocket + Database

Full control; higher maintenance.

  • Backend: Node.js (Express/Fastify) + Socket.io
  • Database: PostgreSQL, MongoDB, or Firebase
  • Sync: Manual or Yjs/Automerge CRDT
  • Host on Heroku, Railway, or your own server

Socket.io Docs

⚛️ Yjs + Provider

CRDT library; works with any backend.

  • Conflict-free merging out of the box
  • Pair with WebSocket, WebRTC, or HTTP polling
  • Integrate with existing Zustand store
  • Works offline; syncs when reconnected

Yjs Docs

🔥 Firebase Realtime DB

Managed; good for rapid prototyping.

  • No backend to maintain
  • Real-time listeners built-in
  • Auth via Firebase
  • Scales easily; metered pricing

Firebase Docs

Integration Roadmap (For Contributors)

If you're forking DevBoard to add collaboration, here's a suggested approach:

  1. Keep single-user mode default — don't break existing deploys
  2. Add an optional backend flag: VITE_BACKEND_URL=https://api.example.com
  3. Create a separate branch for the backend integration (e.g., collab-supabase)
  4. Migrate board state gradually:
    • Phase 1: Load/save to backend instead of localStorage
    • Phase 2: WebSocket listener for node changes
    • Phase 3: Multi-user cursors and presence
  5. Document the fork and link it here
Interested in building collaboration? Open a discussion on GitHub or reach out on X/Twitter. I can point you to the right areas of the codebase.

Contributing to DevBoard

DevBoard is open-source. Whether you want to add features, fix bugs, or suggest ideas, here's how to get involved:

Getting Started

  1. Fork the repo: github.com/MishaWave/devboard
  2. Clone your fork:
    git clone https://github.com/YOUR-USERNAME/devboard.git cd devboard npm install npm run dev
  3. Create a feature branch: git checkout -b feature/my-awesome-feature
  4. Make your changes and test locally
  5. Push and open a PR: Describe what you built and why

Areas Looking for Help

  • Real-time collaboration: Add WebSocket/Supabase integration (see above)
  • Mobile support: Touch gestures, responsive UI tweaks
  • Export options: PDF, Markdown, LaTeX for different workflows
  • Performance: Large boards (1000+ nodes) can lag; optimizations welcome
  • Templates: Pre-made boards (design sprint, retro, architecture diagrams)
  • Plugins/extensions: API for third-party node types
  • Localization: Translations for UI and docs

Code Overview (For Contributors)

Quick reference for the most important files:

  • src/types/index.ts — All TypeScript types and interfaces
  • src/store/boardStore.ts — Zustand state (nodes, camera, clipboard)
  • src/App.tsx — Root component, keyboard shortcuts
  • src/components/Canvas.tsx — Main canvas, Konva stage, tool handling
  • src/components/Toolbar.tsx — Tool picker UI
  • src/components/nodes/ — Node implementations (StickyNote, ShapeNode, etc.)

Adding a new node type? The README.md in the repo has a checklist for this.

Project Guidelines

  • Tests: Not strictly required, but appreciated
  • Performance: Avoid large re-renders; use React.memo where appropriate
  • Browser support: Modern browsers (Safari, Chrome, Firefox, Edge)
  • Accessibility: Keyboard shortcuts, ARIA labels, high contrast in dark mode
  • Mobile: Canvas works but not optimized yet; don't break it further

Reporting Issues & Suggestions

Found a bug or have an idea? Open an issue on GitHub.

Include:

  • What you did (steps to reproduce)
  • What you expected
  • What happened instead
  • Browser, OS, DevBoard version

Connect with the Community

  • GitHub Discussions: Ideas, architecture questions, show & tell
  • GitHub Issues: Bug reports, feature requests
  • X/Twitter: @MishoWave — announcements, casual chat

FAQ

Can I use DevBoard offline?

Yes. The built dist/index.html is a fully self-contained app. Save the file and open it locally in your browser—no server needed.

Can I backup my boards?

Yes. Use the "Save JSON" button in the top bar to export your board. Keep it safe, then "Load JSON" to restore anytime.

Does DevBoard track me?

No. All data stays in your browser's localStorage. There's no analytics, tracking, or telemetry. Your boards are yours.

Can I self-host and add collaboration?

Yes—fork the repo and add a backend (see the Suggested Tech Stacks section above). Most users keep a branch for this.

How do I add a custom domain to my deployment?

If you're hosting on Netlify or Vercel, follow their docs for custom domains. For your own server, set up a reverse proxy (Nginx/Apache) to point your domain to the app.