# kkuchta/css-only-chat

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/kkuchta-css-only-chat).**

6,595 stars · 267 forks · Ruby · MIT

## Links

- GitHub: https://github.com/kkuchta/css-only-chat
- awesome-repositories: https://awesome-repositories.com/repository/kkuchta-css-only-chat.md

## Description

css-only-chat is a JavaScript-free web application that implements an asynchronous messaging system using only HTML and CSS. It functions as a chat interface that achieves real-time updates and user interaction entirely through server-side logic and standard browser behavior.

The project uses a CSS selector-based request trigger to send data, leveraging the browser's automatic loading of background images to initiate server requests. To deliver updates without full page reloads, it utilizes an HTTP chunked transfer streamer that keeps responses open and incrementally appends HTML fragments to the client.

The system manages application state on the backend, integrating remote key-value stores for message persistence and using a pub-sub mechanism to synchronize state across concurrent user sessions. The user interface is refreshed by replacing existing HTML elements with new versions delivered from the server.

## Tags

### Web Development

- [JavaScript-Free Messaging Systems](https://awesome-repositories.com/f/web-development/javascript-free-messaging-systems.md) — Implements a complete asynchronous chat application that functions entirely without the use of client-side JavaScript frameworks.
- [Messaging Systems](https://awesome-repositories.com/f/web-development/javascript-free-web-interfaces/messaging-systems.md) — Implements an asynchronous messaging system using only HTML and CSS to exchange data without client-side scripting. ([source](https://github.com/kkuchta/css-only-chat/blob/master/Gemfile))
- [CSS-Only Chat Interfaces](https://awesome-repositories.com/f/web-development/css-development-utilities/css-only-chat-interfaces.md) — Provides a functional messaging application that sends and receives data using only HTML and CSS.
- [HTML Streaming](https://awesome-repositories.com/f/web-development/html-streaming.md) — Streams HTML content using chunked transfer encoding to append new data and refresh the interface without page reloads. ([source](https://github.com/kkuchta/css-only-chat#readme))
- [Real-Time HTML Streams](https://awesome-repositories.com/f/web-development/html-streaming/real-time-html-streams.md) — Updates the page in real time by streaming HTML content using chunked transfer encoding to avoid full page reloads.
- [JavaScript-Free Web Interfaces](https://awesome-repositories.com/f/web-development/javascript-free-web-interfaces.md) — Builds an interactive web interface that relies entirely on backend logic and browser standards instead of client-side scripting.
- [Server-Side UI Composition](https://awesome-repositories.com/f/web-development/server-side-ui-composition.md) — Refreshes the user interface by delivering and replacing HTML fragments directly from the server. ([source](https://github.com/kkuchta/css-only-chat/blob/master/README.md))

### Data & Databases

- [Request Triggering via CSS Selectors](https://awesome-repositories.com/f/data-databases/data-processing-pipelines/data-transformation/data-parsing-extraction/field-extractors/css-selector/request-triggering-via-css-selectors.md) — Triggers server requests by leveraging browser background image loading when specific CSS selectors are activated.
- [Application State Synchronizations](https://awesome-repositories.com/f/data-databases/application-state-synchronizations.md) — Coordinates data exchange between sending and receiving threads to keep the client state in sync with the remote store. ([source](https://github.com/kkuchta/css-only-chat#readme))

### Networking & Communication

- [Chunked Transfer Encoding](https://awesome-repositories.com/f/networking-communication/chunked-transfer-encoding.md) — Implements incremental delivery of HTML fragments using the HTTP chunked transfer mechanism to update the page without reloads.
- [HTTP Request Triggers](https://awesome-repositories.com/f/networking-communication/network-infrastructure-routing/network-infrastructure-configuration/network-management/http-interaction-utilities/http-request-triggers.md) — Triggers server requests by exploiting the browser's automatic loading of background images via CSS selectors. ([source](https://github.com/kkuchta/css-only-chat#readme))
- [CSS-Based Request Triggers](https://awesome-repositories.com/f/networking-communication/network-infrastructure-routing/network-infrastructure-configuration/network-management/http-interaction-utilities/http-request-triggers/css-based-request-triggers.md) — Utilizes browser behavior for loading CSS background images to trigger server requests without using JavaScript event listeners.
- [JavaScript-Free Message Exchange](https://awesome-repositories.com/f/networking-communication/javascript-free-message-exchange.md) — Enables asynchronous sending and receiving of messages using only HTML and CSS on the frontend. ([source](https://github.com/kkuchta/css-only-chat/blob/master/INSTALL.md))
- [Pub-Sub Systems](https://awesome-repositories.com/f/networking-communication/pub-sub-systems.md) — Uses a publish-subscribe mechanism to synchronize message state and ensure data consistency across multiple concurrent user sessions.

### Software Engineering & Architecture

- [Server-Managed UI State](https://awesome-repositories.com/f/software-engineering-architecture/server-managed-ui-state.md) — Manages application state and user interactions entirely on the backend while updating the frontend through HTML replacement.

### User Interface & Experience

- [Request Triggers via](https://awesome-repositories.com/f/user-interface-experience/css-selectors/request-triggers-via.md) — Leverages browser behavior for loading background images based on active CSS selectors to initiate server requests.
- [Server-Driven Fragment Replacement](https://awesome-repositories.com/f/user-interface-experience/server-driven-fragment-replacement.md) — Refreshes the user interface by replacing existing HTML elements with new fragments delivered from the server.

### Part of an Awesome List

- [Experimental Projects](https://awesome-repositories.com/f/awesome-lists/devtools/experimental-projects.md) — Asynchronous web chat implementation using only CSS.