Welcome to the LiveResponse & LinkedQL Playground!
This directory contains series of interactive examples that demonstrate the core capabilities of LiveResponse and LinkedQL—both independently and together.
💡 Hack around! Don't hesitate to open the files in these directories, tweak the code, and observe the behaviors. This playground is designed for you to get your hands dirty!
These recipes demonstrate the live response model independently. They build on the core concept of LiveResponse—an extension of traditional HTTP responses that allows for stateful, updatable, and deeply interactive real-time connections using a single primitive.
Demonstrates LiveResponse's most fundamental feature: sending a mutable object as the response body. Server-side mutations made to this object automatically update the client-side copy in real-time.
Demonstrates LiveResponse's multi-response model where responses are swapped with newer ones over a single HTTP request.
Demonstrates LiveResponse's messaging model: exchanging messages between the client and server through an exposed communication port natively provided by the live response channel.
These recipes demonstrate LinkedQL's live queries and sync capabilities.
All three examples in this section build the exact same Todo List application – but each implements it using a different architectural pattern, based on LinkedQL Integration Patterns. You can observe how the application is architected differently under the hood across three distinct paradigms.
Prerequisite: The LinkedQL examples assume you have a PostgreSQL database running on your local machine using the default parameters (e.g.,
localhost:5432) and no password. They also assume that PostgreSQL's logical replication is enabled on the database.The examples will automatically connect and set up the necessary table(s) for the TODO app. Tables are automatically dropped when the process ends.
🌟 Best Experience: Since these examples heavily emphasize multi-client reactivity and real-time sync, they are best experienced with at least two tabs of the page open side-by-side. You'll be able to see database updates and offline edits sync seamlessly across clients the moment they happen.
Architecture: Direct Live Queries
Demonstrates live queries over PostgreSQL where the live result is projected across the wire and obtained on the client side by reference. The server runs the query against PostgreSQL and sends the result to the client as a live response.
Architecture: Remote Querying
Demonstrates remote querying using a dedicated EdgeWorker. Here, the EdgeWorker exposes a PostgreSQL database on the server, and the client application directly queries it using an EdgeClient. Live queries still work seamlessly across the protocol.
Architecture: Local-First Synchronization
Showcases full offline-capable, local-first database synchronization. Instead of just querying remote data, the client maintains a synchronized local copy of the database tables.
⤷ clone → install → run
git clone https://github.com/webqit/playground.git
cd playground
npm install
The runnable examples live in the src dir. Each example consists of at least a basic server.js file and a small index.html file. The examples in LinkedQL Recipes also have a screencast video of the demo itself. Playing the screencast before running the code in each case is recommended.
To run any example:
-
Open your terminal in the root of the repository.
-
Run the
server.jsscript of the desired example using Node.js:node src/1_live_state/server.js
-
Open http://localhost:3000 in your browser to interact with the live demo.
Note: For some examples, you will also notice an
update.jsscript in the directory. You can run this script in a separate terminal window to programmatically trigger database updates and watch the live results stream to your open browser tabs.
- Stop an example and have its resources automatically cleaned up by press
Ctrl+Cin your server terminal.