● Covered by 1 source · 1 reportLow impact1 neutral
Building SPAs with HTML over WebSockets for minimal JavaScript
Key points
- HTML over WebSockets sends pre-built HTML from server to client.
- Rendering logic is handled entirely on the backend.
- Reduces client-side JavaScript and eliminates API contracts.
- Phoenix LiveView is a notable implementation of this pattern.
Introduction to HTML over WebSockets
Traditional Single-page Applications (SPAs) often involve complex setups with JavaScript frameworks for views, JSON APIs, and independent codebases. An alternative approach, HTML over WebSockets, simplifies this by having the server send pre-rendered HTML directly to the client.
This pattern, also known as hypermedia or HTML over the wire, centralizes rendering logic on the backend. It removes the need for separate API contracts and allows development in a single language, streamlining the development process.
Variants of HTML Over the Wire
The method of transmitting HTML determines the communication pattern and latency. There are three main variants: over HTTP (e.g., htmx, Unicorn), over Server-Sent Events (SSE) for one-way continuous channels (e.g., Datastar), and over WebSockets for permanent, bidirectional communication (e.g., Phoenix LiveView, Django LiveView).
HTML over WebSockets is particularly suited for real-time, bidirectional applications, enabling SPA development with minimal client-side JavaScript and a unified rendering engine.
Origin and Impact
The concept gained significant traction with Chris McCord's introduction of LiveView at ElixirConf 2019. McCord, the creator of the Phoenix framework, demonstrated building a real-time Twitter clone with LiveView using no additional rendering JavaScript frameworks.
This demonstration proved the viability of backend-centric development for interactive web applications, inspiring similar implementations in other programming languages and allowing developers to leverage backend productivity without sacrificing frontend interactivity.
How it Works
While HTML over WebSockets minimizes rendering JavaScript, a small amount of client-side JavaScript is still used. Its primary function is to establish a WebSocket communication channel and correctly place the received HTML content into the DOM. This offloads complex rendering tasks from the client to the server.
✨ This summary was generated by AI from the outlets' reporting listed below. It is not independently verified and may contain errors — check the original sources. How BrevFeed works →
The daily brief
One email each morning: the day's tech stories, clustered across outlets and summarized. No account needed.
One email a day. Unsubscribe in one click, any time.
Today's brief
Spend a few minutes, get the whole day. Every topic's top stories in one hands-free rundown — listen, watch, or read the transcript.
▶ Play today's brief
New every morning, and the back catalogue is archived by date.
Primary sources
GitHub bigskysoftware/idiomorphReporting from
This article explains how to build Single-page Applications (SPAs) using HTML over WebSockets, a method that reduces the need for extensive client-side JavaScript. This approach allows rendering logic to remain on the backend, simplifying development by eliminating separate API contracts and multiple codebases.