Skip to main content
Hero Light

​
What is WSX?

WSX is a modern, framework-agnostic WebSocket library that brings the simplicity and power of HTMX to real-time web applications. It enables developers to build reactive, real-time applications using familiar hypermedia patterns with WebSocket communication.

Real-time Hypermedia

Apply HTMX-style patterns to WebSocket communications for intuitive real-time updates

Framework Agnostic

Works with Express, Hono, and other frameworks through a clean adapter system

Advanced Triggers

Rich trigger system with throttling, debouncing, delays, and conditional execution

Out-of-Band Updates

Update multiple DOM elements from a single WebSocket response

​
Key Features

WSX brings the familiar HTMX patterns to WebSocket communication, making real-time applications as simple as traditional hypermedia.
Update multiple DOM elements from a single WebSocket response, enabling complex UI updates with minimal code.
Rich trigger system supporting throttling, debouncing, delays, conditions, and more for sophisticated user interactions.
Works with Express, Hono, and other frameworks through a clean adapter system. Easy to integrate with existing applications.
Send updates to all connected clients or specific connections with simple API calls.
Control timing, positioning, and animation of DOM updates with powerful swap specifications.

​
Why Choose WSX?

​
Simple Yet Powerful

WSX combines the simplicity of HTMX with the power of WebSockets, allowing you to build complex real-time applications with minimal JavaScript.

​
Familiar Patterns

If you know HTMX, you already know WSX. The same declarative approach, the same swap patterns, just over WebSockets.

​
Production Ready

Built with TypeScript, comprehensive error handling, and battle-tested WebSocket patterns.

​
Quick Example

Here’s a simple example of a real-time counter: 
<!-- Client -->
<div wx-config='{"url": "ws://localhost:3000/ws"}'>
  <div id="counter">Count: 0</div>
  <button wx-send="increment" wx-target="#counter">Increment</button>
</div>

// Server
wsx.on("increment", async (request, connection) => {
  const newCount = getCount() + 1;

  // Update all connected clients
  wsx.broadcast("#counter", `Count: ${newCount}`);

  return {
    id: request.id,
    target: request.target,
    html: `Count: ${newCount}`,
  };
});

​
Getting Started

Ready to dive in? Let’s get you up and running with WSX:

Quick Start

Get WSX running in under 5 minutes with our quick start guide

Installation

Install WSX in your project with npm or yarn

​
Community & Support

Join our growing community of developers building real-time applications with WSX:

​
Contributing

WSX is open source and contributions are welcome! Check out our contributing guide to get started.