DEV Community

Cover image for Build a Realtime Chat App in 7 Lines of JavaScript Using GenosDB
Esteban Fuster Pozzi
Esteban Fuster Pozzi

Posted on • Originally published at genosdb.com

Build a Realtime Chat App in 7 Lines of JavaScript Using GenosDB

A real-time P2P chat application in 7 lines of JavaScript — no backend, no framework, no WebSocket server. Just GenosDB and a browser.

This example demonstrates the raw simplicity and power of GenosDB: a fully functional, peer-to-peer chat application built with nothing more than vanilla HTML and a few lines of JavaScript.

<!DOCTYPE html>
<ul id='list'></ul>
<form id='form'>
  <input id='who' placeholder='name'>
  <input id='what' placeholder='say'>
  <input type='submit' value='send'>
</form>
<script type=\"module\">
  import { gdb } from \"https://cdn.jsdelivr.net/npm/genosdb@latest/dist/index.min.js\";
  let db = await gdb('chat', { rtc: true });
  form.onsubmit = async e => {
    e.preventDefault();
    await db.put({ type: 'msg', who: who.value, what: what.value });
    what.value = '';
  };
  db.map({ query: { type: 'msg' } }, (id, data, action) => {
    list.innerHTML += `<li><b>${data.who}</b>: ${data.what}</li>`;
  });
</script>
Enter fullscreen mode Exit fullscreen mode

How It Works

  • GenosDB handles all P2P communication via WebRTC.
  • db.put() writes a message to the distributed graph.
  • db.map() reactively streams all messages from any peer.
  • No server. No WebSocket setup. No Firebase. Just peers.

Why This Matters

This isn't a toy demo — it's a proof of concept showing that real-time, multi-user applications can be built with GenosDB in minutes, not days.

7 lines. Zero backend. Infinite possibilities.


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)