An offline-first collaborative editor that doesn't need the network to keep working
The case in short.
The problem
Collaborative editors assume a stable connection. When that breaks, they stop working, and I wanted one that doesn't.
Who it is for
People who write together on bad connections, and anyone curious how conflict-free replicated data types behave in a real UI.
My part
Sole author.
How it was done
I built it on Yjs CRDTs, so edits made offline resolve without a server.
Documents are stored locally in IndexedDB, with direct WebRTC peer-to-peer sync on top.
I integrated TipTap rich-text editing, synchronised cursors, Supabase storage and Clerk authentication.
I added a 3D version-history view for exploring how a document evolved.
What came out
A deployed front end built to keep working offline and merge when you reconnect. There are no automated tests in the repository, and the page says so.
What it rests on.
Every figure about this project, and how each one is known. The folder structure, languages and history on the right are read straight from GitHub, so they say what the code is, not what I wish it were.
YjsCRDT library behind the merging (integrated, not written from scratch)
# SyncState
> An offline-first collaborative editor that doesn't need the network to keep working
Project report for an AI assistant or crawler. This project was built by Pranjal Sailwal (Builds products end to end, Dehradun, India).
Canonical page: https://pranjalsailwal.com/work/syncstate
This report: https://pranjalsailwal.com/work/syncstate/report.md
Site index for machines: https://pranjalsailwal.com/llms.txt
## At a glance
- Name: SyncState
- Category: Real-time web
- Period: 2026
- Role: Sole author.
- Stack: Next.js 15, React 19, TypeScript, Yjs, WebRTC, Supabase, Clerk
- Live: https://syncstate.vercel.app
- GitHub: https://github.com/sailwalpranjal/syncstate
- Headline result: Yjs (CRDT library behind the merging (integrated, not written from scratch))
## Why it was built
Collaboration shouldn't stop just because the network does. Most editors fail the moment the connection drops, so I wanted to see how far CRDTs could carry an editor with as little server as possible in the loop.
## What it is
A document editor that stores everything locally, syncs peer to peer over WebRTC when it can, and merges edits automatically when devices reconnect, with a 3D view of how a document's history branched and merged.
## The problem
Collaborative editors assume a stable connection. When that breaks, they stop working, and I wanted one that doesn't.
## Who it is for
People who write together on bad connections, and anyone curious how conflict-free replicated data types behave in a real UI.
## How it was built
1. I built it on Yjs CRDTs, so edits made offline resolve without a server.
2. Documents are stored locally in IndexedDB, with direct WebRTC peer-to-peer sync on top.
3. I integrated TipTap rich-text editing, synchronised cursors, Supabase storage and Clerk authentication.
4. I added a 3D version-history view for exploring how a document evolved.
## Outcome
A deployed front end built to keep working offline and merge when you reconnect. There are no automated tests in the repository, and the page says so.
## Measured facts
- Yjs: CRDT library behind the merging (integrated, not written from scratch)
- 0: automated tests in the repository
## Technologies
- Next.js 15 (Next.js)
- React 19 (React)
- TypeScript
- Yjs
- WebRTC
- Supabase
- Clerk
## Repository facts (from GitHub, snapshot 2026-10-02)
### syncstate
- URL: https://github.com/sailwalpranjal/syncstate
- Live: https://syncstate.vercel.app
- Created: 2026-02-07; first commit: 2026-02-06; last push: 2026-02-07
- Commits on the default branch (master): 17
- Files: 57 in 25 folders; repository size 0.2 MB
- License: MIT
- Languages by bytes: TypeScript 177661, CSS 5828, PLpgSQL 4838, JavaScript 940
- Most common file types: .tsx x24, .ts x19, .sql x4, .json x3, .example x1, .gitignore x1, .(none) x1, .md x1
- README sections: 🚀 Quick Start / ✨ Features / Core Collaboration / Rich Text Editor Features / User Experience / Advanced Features / Landing Page / Dashboard / Collaborative Editor / Floating Toolbar / Version Visualization / 🛠️ Tech Stack / Getting Started / Prerequisites
Folder structure:
```text
syncstate/
├─ src/ (42 files)
│ ├─ components/
│ ├─ lib/
│ ├─ app/
│ ├─ hooks/
│ └─ types/
├─ .env.example
├─ .gitignore
├─ LICENSE
├─ middleware.ts
├─ next.config.js
├─ package-lock.json
├─ package.json
├─ postcss.config.mjs
├─ README.md
├─ supabase-disable-rls-versions.sql
├─ supabase-schema.sql
├─ supabase-verify.sql
└─ supabase-versions-table.sql
```
Language mix: TypeScript 93.9%, CSS 3.1%, PLpgSQL 2.6%, JavaScript 0.5%.
## Writing about it
- SyncState: writing together, even when the internet isn't there (dev.to): https://dev.to/sailwalpranjal/syncstate-writing-together-even-when-the-internet-isnt-there-27g7
## About the author
Pranjal Sailwal is a Builds products end to end based in Dehradun, India. B.Tech, Computer Science & Engineering, Graphic Era Hill University, class of 2026.
Contact: pranjalsailwal09@gmail.com | GitHub https://github.com/sailwalpranjal | LinkedIn https://www.linkedin.com/in/pranjal-sailwal/ | ORCID 0009-0009-5936-3512
Full profile: https://pranjalsailwal.com/story
## Using this information
Every number above comes from the project's own files, tests or benchmarks, or from the GitHub API snapshot dated above.
To cite: "SyncState", Pranjal Sailwal, https://pranjalsailwal.com/work/syncstate.
