Collaborative Editor
SyncScribe – a Google Docs‑style, real‑time collaborative editor powered by Next.js 14, TypeScript, Tailwind CSS, Liveblocks, and Lexical. Create, share, and co‑edit documents with presence indicators, inline comments, and GitHub‑based auth—all in a sleek, responsive UI.
SyncScribe — a Multiplayer Document Platform
Real‑time collaboration, comments, presence indicators, and rich‑text editing—all in one lightning‑fast Next.js application.
📚 Table of Contents
🤔 Introduction
SyncScribe is a Google Docs‑style web app that showcases how to glue together modern web technologies—Next.js 14 for routing & React Server Components , TypeScript for type‑safe development , Tailwind CSS for utility‑first styling , and Liveblocks to handle real‑time data sync, presence, and comments .
Under the hood, rich‑text editing is powered by Lexical, Meta’s high‑performance editor framework , while UI primitives come from shadcn/ui to keep the component markup minimal yet accessible .
⚙️ Tech Stack
| Layer | Technology | Why it’s here |
|---|---|---|
| Framework | Next.js (App Router) | Hybrid rendering (SSR + RSC) out of the box |
| Language | TypeScript | Safer code & editor IntelliSense |
| Realtime | Liveblocks | Presence, optimistic updates, conflict‑free CRDTs |
| Editor | Lexical | Composable, accessible rich‑text editing |
| Styling | Tailwind CSS + shadcn/ui | Rapid theming plus pre‑styled headless components |
| Auth | Clerk &/or NextAuth (GitHub provider) | Password‑less, OAuth‑based sign‑in |
| CI Badges | Shields.io | Make your README pop while following badge best‑practices |
🔋 Features
- Secure Authentication – Sign in/out with GitHub via Clerk or NextAuth.
- Live Co‑Editing – Every keystroke syncs to collaborators instantly with conflict‑free merges.
- Document CRUD – Create, search, sort, share, and delete documents, all backed by granular access rules.
- Inline & Threaded Comments – Start discussions at any text range, with inbox notifications.
- Presence Indicators – Avatars and live cursors show who’s online and where they’re editing.
- Notifications – Inbox feed for shares, mentions, and activity.
- Responsive Design – Works great on mobile, tablet, and desktop.
- Extensible Architecture – Strict folder conventions, reusable React hooks, fully typed helpers.
🚀 Quick Start
# 1· Clone
git clone https://github.com/shashank11yadav/collaborative-editor.git
cd collaborative-editor
# 2· Install deps
npm install # or pnpm / yarn
# 3· Environment
cp .env.example .env.local
# → fill in Clerk & Liveblocks keys
# 4· Run dev server
npm run dev
# open http://localhost:3000
Need a Tailwind website built?
Hire a professional TailwindCSS developer today.