DEV Community

Esteban Fuster Pozzi
Esteban Fuster Pozzi

Posted on • Originally published at genosdb.com

Building a P2P Collaborative Whiteboard with GenosDB in a Single HTML File

#javascript #p2p #webrtc #collaboration

Build complex real-time apps without a backend. This collaborative whiteboard runs entirely peer-to-peer, powered by the simplicity of GenosDB.

GenosBoard is a feature-rich, real-time collaborative whiteboard designed to showcase the power and simplicity of GenosDB. It's a complete demonstration of how to build sophisticated, decentralized applications without writing a single line of backend code. All communication, data synchronization, and state persistence happens directly between browsers in a peer-to-peer network.

This isn't just a simple demo; it's a blueprint for the next generation of collaborative tools. The magic lies in GenosDB's hybrid communication model, which this application leverages perfectly:

  • Persistent State (db.put, db.map): Shapes created, moved, or deleted are saved to the graph database. This state is automatically synchronized across all peers and persists through page reloads, providing a reliable, shared source of truth.
  • Ephemeral Events (db.room.channel): High-frequency data like live cursor positions and in-progress drag movements are sent through a separate, lightweight messaging channel. This data is never written to the database, ensuring peak performance and preventing unnecessary storage writes.

Core Code

The entire P2P whiteboard works with just a few lines of GenosDB:

import { gdb } from "https://cdn.jsdelivr.net/npm/genosdb@latest/dist/index.min.js";

const db = await gdb("collab-board", { rtc: true });

// Persistent state — shapes sync across all peers and survive reloads
db.put({ type: "shape/circle", x: 200, y: 150, color: "#646cff", radius: 35 });

// Reactive rendering — UI updates automatically when any peer changes data
const { unsubscribe } = await db.map({ query: { type: { $regex: "^shape" } } }, ({ id, value, action }) => {
  if (action === "added" || action === "updated") shapes.set(id, value);
  if (action === "removed") shapes.delete(id);
  render();
});

// Ephemeral channels — high-frequency data without touching the database
const cursorChannel = db.room.channel("cursor-pos");
cursorChannel.on("message", (pos, peerId) => drawRemoteCursor(peerId, pos));

const dragChannel = db.room.channel("shape-drag");
dragChannel.on("message", (data) => updateShapePosition(data));
Enter fullscreen mode Exit fullscreen mode

This hybrid model — persistent graph data combined with ephemeral real-time channels — is what makes GenosDB uniquely suited for collaborative applications. No WebSocket server, no Firebase, no backend at all.

Key Features

  • Real-Time Collaboration: Draw, drag, and delete shapes, and see changes from other users instantly.
  • Live Cursors: See where other connected users are pointing on the canvas.
  • Persistent State: Your drawings are automatically saved in the browser and will be there when you return.
  • Serverless P2P Architecture: No central server, no websockets to manage, no database hosting fees.
  • Modern & Responsive UI: A clean, beautiful interface that's a pleasure to use.
  • Zero Dependencies, Single File: The entire application runs from a single HTML file, demonstrating extreme portability and simplicity.

GenosDB Concepts Showcased

  • P2P Initialization: Setting up a room with gdb("room-name", { rtc: true }).
  • Reactive State Syncing: Using db.map() to reactively render the UI from database changes.
  • Atomic Operations: Modifying the shared state with db.put() and db.remove().
  • Ephemeral Messaging: Using db.room.channel() for high-frequency, non-persistent data.
  • Hybrid Data Strategy: The core architectural pattern of combining persistent and ephemeral communication for maximum efficiency.
  • Modern JavaScript Best Practices: Leveraging top-level await, object destructuring, and efficient event handling.

Build More with GenosDB

If this whiteboard inspires you, explore other real-time applications built with GenosDB:

Dive into the code to see just how few lines it takes to build something this powerful. Start building your own decentralized, real-time application today with GenosDB.

🔗 Try the Live Demo →

🔗 View Source Code →

This article is part of the official documentation of GenosDB (GDB).

GenosDB is a distributed, modular, peer-to-peer graph database built with a Zero-Trust Security Model, created by Esteban Fuster Pozzi (estebanrfp).

📄 Whitepaper | overview of GenosDB design and architecture

🛠 Roadmap | planned features and future updates

💡 Examples | code snippets and usage demos

📖 Documentation | full reference guide

🔍 API Reference | detailed API methods

📚 Wiki | additional notes and guides

💬 GitHub Discussions | community questions and feedback

🗂 Repository | Minified production-ready files

📦 Install via npm | quick setup instructions

🌐 Website | GitHub | LinkedIn

Top comments (0)