kChat is a lightweight, open-source chatroom application that runs entirely in the browser with zero build tooling required. It is written in plain HTML, CSS, and vanilla JavaScript, and uses Supabase as its backend for storing rooms, messages, and user profiles. Because there is no compilation or bundling step, you can clone the repository, drop in your Supabase credentials, and serve the files from any static web host — or even straight from your local machine — and have a working multi-room chat application running in minutes.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/korynthian/chatroom/llms.txt
Use this file to discover all available pages before exploring further.
Architecture
kChat’s architecture is deliberately minimal. Each page is a standalone.html file that loads one or more JavaScript files for its logic. Supabase provides the database and its JavaScript client library handles all reads and writes. There is no server-side code, no Node.js runtime, and no framework — only static files and Supabase API calls made directly from the browser.
- HTML pages define the structure and layout of each view.
- Vanilla JavaScript handles DOM manipulation, Supabase queries, localStorage reads and writes, and the polling loop that refreshes messages.
- Supabase stores the
rooms,messages, andprofilestables and serves them over its REST API.
kChat loads the Supabase JavaScript client directly from the jsDelivr CDN (
https://cdn.jsdelivr.net/npm/@supabase/supabase-js). No package manager or local install is required.Key Features
Real-Time Messaging
Messages are fetched from Supabase and displayed every second via a
setInterval polling loop, keeping the conversation current without requiring WebSocket configuration.Multiple Named Chat Rooms
Rooms are rows in the
rooms table. The index page lists every room and links directly to it; switching rooms is as simple as clicking a link.Persistent Username
When you first open kChat you are prompted for a username. That value is saved to
localStorage and reused automatically on every subsequent visit — no account or password needed.Dark and Light Themes
On first load, kChat detects your operating system’s colour-scheme preference and automatically applies the matching default theme (
default-dark.css or default-light.css).Custom CSS Theme Editor
The Settings page exposes a full CSS text editor. Paste any CSS you like, click Confirm, and it is saved to
localStorage and applied instantly across every page — no reload needed.No Build Step Required
There is no bundler, transpiler, or package manager involved. Open the files in any editor, change what you need, and serve them directly. The entire project is plain HTML, CSS, and JavaScript.
Page Structure
kChat is made up of several HTML pages, each with a focused responsibility:| Page | Path | Purpose |
|---|---|---|
| Room list | index.html | Fetches all rows from the rooms table and renders them as clickable links. Also links to About, Contact, and Settings. |
| Chatroom | chat.html | Displays messages for the selected room, polls for new messages every second, and handles sending new messages on Enter. |
| Settings | settings/general.html | Lets users change their username and edit or reset the custom CSS theme. |
| About | about.html | A brief description of the project with links to the source code and contact page. |
| Contact | contact.html | Contact information for the project author. |
| File | Role |
|---|---|
chat.js | Core chatroom logic: Supabase client setup, room detection, message display, and message insertion. |
indextablenames.js | Fetches room names from Supabase and populates the index page. Also contains the Supabase client setup used on the index page. |
settings.js | Handles CSS theme loading, the custom CSS editor, and username changes. Included on every page. |