The big idea of SolidStart & BraidJS SDK is to provide the instrumentation for the SolidJS applications state synchronization across network using Braid-HTTP protocol middleware on top of SolidStart fullstack platform. Since SolidJS signals and memos form a DAG (directed acyclic graph, aka dependency graph), choosing BraidJS that also operates on terms of Time and Space DAGs and being local-first, seems to be the most suitable solution. One of the uniqueness of using Braid is that it uses the standard HTTP protocol instead of Websockets for the state sync.
During SolidHack 2024 competition I have got running the Braid-HTTP and Braid-Text with Simpleton client on top of SolidStart. The included example shows how a collaborative text editor as a component is working in any SolidJS app. The Braid-HTTP extension is loaded from the official npm repository without modifications. Braid-Text extension and Simpleton are modified to suit SolidStart framework.
Demo demo app is running at https://editor.krestianstvo.org
The demo app shows a simple implmentation of adding the collaborative features into the Quill text editor (WIP) (https://github.com/NikolaySuslov/solid-braid-quill)
There some issues with Vercel deployment concerning configuration of maxDuration for the api functions.
To run the demo locally:
- Clone this repo:
git clone https://github.com/NikolaySuslov/solid-braid - Start the SoliStart local server with
npm run dev - Open web browser with an url: http://localhost:3000
- Open another instance of web browser with the same url
- In the textarea enter any text and observe it's syncronization
You can create isolated collaborative text areas specifying parameter in the url, like:
http://localhost:3000/editor?k=myText
Braid is developed by an open working group creating algorithms, applications, tools, and standards for interoperable state synchronization. The goal of Braid is to be able to read & write distributed state as easily as a local variable, collaboratively across all the networked computing systems we use.
In it's implementation a "Braid" is a mathematical structure that contains the information of both a Time DAG and a Space DAG. If you ignore space, you get a Time DAG. And if you collapse time, you get a Space DAG. Interactive explanation
Concretely, a Braid is composed of three objects:
- Versions define points in time, irrespective of space
- Locations define points of space, irrespective of time
- Patches replace regions of space, across spans of time
Braid extensions provide collaborative editing, a serverless offline mode, and peer-to-peer networking for any HTTP resource.
Braid-HTTP - is an extension to HTTP that generalizes it from a state transfer to a state synchronization protocol. It adds these features to HTTP:
- Versioning to HTTP resources
- Subscriptions to GET requests
- Patches to Range Requests
- Merge-Types to specify OT or CRDT behavior
Braid-Text and json range patch support - provides a simple http route handler, along with client code, enabling fast text synchronization over a standard protocol. This extension makes it safe, easy & efficient to add collaborative text editing to every user-editable string
Together, these features enable a web resource to synchronize automatically across multiple clients, servers and proxies, and support arbitrary simultaneous edits by multiple writers, under arbitrary network delays and partitions, while guaranteeing consistency using an OT, CRDT, or other algorithm.
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openSolid apps are built with presets, which optimise your project for deployment to different environments.
By default, npm run build will generate a Node app that you can run with npm start. To use a different preset, add it to the devDependencies in package.json and specify in your app.config.js.
This project was created with the Solid CLI
MIT license