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)