Next-Gen Collaborative Editor

A production-ready Google Docs clone featuring real-time multiplayer editing, live cursors, and a premium Glassmorphism UI.
Explore the docs »

View Demo · Report Bug · Request Feature

---

🌟 About The Project

This is a full-stack, real-time collaborative document editor engineered for scale and performance. By leveraging the power of Tiptap (ProseMirror) for rich text processing and Liveblocks (Yjs) for conflict-free replicated data types (CRDTs), this project delivers a seamless multiplayer typing experience similar to Google Docs.

The user interface follows the Digital Atelier ("Premium UI") design specifications: featuring Tonal Architecture, the "No-Line" rule, and smooth glassmorphism effects, ensuring a modern, distraction-free writing environment.

🚀 Built With

• — App Router & Server Components (React 19)
• — Styling and Custom Design Tokens
• — Authentication (SSR) and Database
• Liveblocks — WebSocket CRDT Synchronization & Multiplayer Infrastructure
• Tiptap (ProseMirror) — Headless Rich Text Editor Framework

---

✨ Core Features

• 🌐 Real-time Multiplayer: Sub-millisecond cursor tracking, live presence, and Y-Doc text synchronization.
• 🎨 Premium UI / UX:
  • Floating sticky formatting toolbar with Glassmorphism layer.
  • Interactive "Document Outline" (Sidebar) tracking Headings in real-time.
  • "Tonal Architecture": Layout separated purely by background surface tokens (no harsh 1px borders).
• 📝 Extended Rich Text Editing:
  • Standard blocks (Bold, Italic, Link, Lists, Blockquote).
  • Advanced blocks (3x3 Table manipulation, Superscript, Subscript, Code blocks).
  • Highlight and Text Color pickers.
• 🔐 Secure Authentication: Supabase SSR Auth with protected API routes and Middleware.
• ⚡ Performance First: Turbopack building, optimized rendering lifecycles, and debounced cloud saving.

---

🏗️ Architecture & Engineering Highlights

This codebase is structured with DDD (Domain Driven Design) principles in mind:

• app/ - Next.js 15 routing, pages, and API endpoints.
• components/documents/ - Complex, nested stateful UI for the editor workspace.
• store/ - Zustand global state management.
• lib/ - Supabase clients, Liveblocks configurations, and shared utilities.
• extensions/ - Custom Tiptap logic (e.g. fontSize parsing limits).

---

🛠 Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

• Node.js (v18+)
• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/baobao0303/docs_clone.git

2. Install dependencies

   npm install

3. Set up environment variables Duplicate .env.example (or create .env.local) and add your API keys:

   NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
   NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
   LIVEBLOCKS_SECRET_KEY=YOUR_LIVEBLOCKS_SECRET_KEY

4. Run the development server

   npm run dev

---

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📜 License

Distributed under the MIT License. See LICENSE for more information.

---

Crafted with ❤️ by baobao0303