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 });
db.put({ type: "shape/circle", x: 200, y: 150, color: "#646cff", radius: 35 });
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();
});
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:
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
