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

Source: Dev.to

[![Esteban Fuster Pozzi](https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2934186%2F79c95f8d-8996-4696-a11f-a8bfef73dd00.jpeg)](https://dev.to/estebanrfp)

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](https://genosdb.com/building-genosdb-p2p-database). It is 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 happen 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:

```js
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: 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:

• Build a Realtime Chat App in 7 Lines of JavaScript
• Real‑Time P2P Video Streaming
• Secure, Decentralized Notes App
• Build a Kanban Board in Minutes

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

**Resources**

- **Documentation** – `db/wiki` – additional notes and guides  
- **GitHub Discussions** – 💬 [Link](https://github.com/estebanrfp/gdb/discussions) – community questions and feedback  
- **Repository** – 🗂 [GitHub repo](https://github.com/estebanrfp/gdb) – minified production‑ready files  
- **Install via npm** – 📦 [genosdb on npm](https://www.npmjs.com/package/genosdb) – quick setup instructions  
- **Online presence** – 🌐 [Website](https://estebanrfp.com/) • [GitHub](https://github.com/estebanrfp) • [LinkedIn](https://www.linkedin.com/in/estebanrfp/)