Hero Light Hero Dark

​
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

​
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.