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

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'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:

```javascript
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));
```

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:

- [Build a Realtime Chat App in 7 Lines of JavaScript](https://genosdb.com/genosdb-realtime-chat)
- [Real-Time P2P Video Streaming](https://genosdb.com/genosdb-p2p-video-streaming)
- [Secure, Decentralized Notes App](https://genosdb.com/genosdb-decentralized-notes-app)
- [Build a Kanban Board in Minutes](https://genosdb.com/genosdb-kanban-board)

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 →**](https://estebanrfp.github.io/gdb/examples/whiteboard.html)

🔗 [**View Source Code →**](https://github.com/estebanrfp/gdb/blob/main/examples/whiteboard.html)

---

> **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](https://github.com/estebanrfp))**. 

📄 [Whitepaper](https://github.com/estebanrfp/gdb/blob/main/WHITEPAPER.md) | overview of GenosDB design and architecture 

🛠 [Roadmap](https://github.com/estebanrfp/gdb/blob/main/ROADMAP.md) | planned features and future updates

💡 [Examples](https://github.com/estebanrfp/gdb/blob/main/docs/genosdb-examples.md) | code snippets and usage demos

📖 [Documentation](https://github.com/estebanrfp/gdb/blob/main/docs/index.md) | full reference guide

🔍 [API Reference](https://github.com/estebanrfp/gdb/blob/main/docs/genosdb-api-reference.md) | detailed API methods

📚 [Wiki](https://github.com/estebanrfp/gdb/wiki) | additional notes and guides

💬 [GitHub Discussions](https://github.com/estebanrfp/gdb/discussions) | community questions and feedback

🗂 [Repository](https://github.com/estebanrfp/gdb) | Minified production-ready files

📦 [Install via npm](https://www.npmjs.com/package/genosdb) | quick setup instructions

🌐 [Website](https://estebanrfp.com/) | [GitHub](https://github.com/estebanrfp) | [LinkedIn](https://www.linkedin.com/in/estebanrfp/)