A Notion-style AI-powered collaborative document editor built with Next.js 15, Tiptap, and Yjs. Features real-time peer-to-peer collaboration, inline AI autocomplete, slash commands, and a conversational AI sidebar — all running in the browser with no backend database required.
- Notion-style block editor powered by Tiptap 3 / ProseMirror
- Full formatting: bold, italic, underline, strikethrough, highlight, code
- Headings (H1–H3), bullet lists, numbered lists, task lists with checkboxes
- Code blocks with syntax highlighting (Lowlight)
- Blockquotes, horizontal dividers, images, links
- Text alignment (left, center, right)
- Drag-and-drop block handles
- Inline Autocomplete — Ghost text suggestions appear as you type. Press
Tabto accept. - Slash Commands — Type
/to open a command palette with AI actions (Write, Improve, Expand, Summarize) and block insertion commands. - Selection AI Toolbar — Select text to get contextual AI actions: fix grammar, improve tone, shorten, expand, or improve clarity. Preview results before applying.
- AI Chat Sidebar — Ask questions about your document, get summaries, find grammar issues, or brainstorm ideas in a streaming chat interface.
All AI features are powered by Google Gemini 2.5 Flash via the Vercel AI SDK.
- Peer-to-peer sync via Yjs CRDTs and WebRTC — no central server needed
- Live cursor presence — see collaborators' cursors and selections in real-time with colored indicators
- Offline persistence — changes are saved to IndexedDB and sync automatically when reconnected
- Instant sharing — share the document URL; anyone with the link joins the same editing session
- Create, rename, and delete documents from the home dashboard
- Documents stored in browser localStorage (metadata) + IndexedDB (content via Yjs)
- Export to Markdown, HTML, or Plain Text
- Clean, colorful design with violet/fuchsia gradient theme
- Dark/light mode toggle
- Fully responsive — works on mobile, tablet, and desktop
- Smooth animations with Framer Motion
- Status bar with word count, character count, and connection status
- Custom scrollbar styling
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router, Turbopack) |
| UI | React 19, TypeScript 5 |
| Editor | Tiptap 3, ProseMirror, Lowlight |
| Collaboration | Yjs, y-webrtc, y-indexeddb, y-prosemirror |
| AI | Vercel AI SDK 6, Google Gemini 2.5 Flash |
| Styling | Tailwind CSS 4, Framer Motion |
| Components | shadcn/ui, Lucide Icons |
| Fonts | Geist Sans & Geist Mono |
src/
├── app/
│ ├── page.tsx # Home — document dashboard
│ ├── doc/[id]/page.tsx # Document editor page
│ ├── globals.css # Theme & editor styles
│ └── api/ai/
│ ├── chat/route.ts # Streaming document Q&A
│ ├── complete/route.ts # Inline autocomplete
│ ├── improve/route.ts # Grammar, tone, clarity, shorten
│ └── expand/route.ts # Text expansion
├── components/
│ ├── editor/
│ │ ├── editor.tsx # Main editor + layout
│ │ ├── toolbar.tsx # Formatting toolbar
│ │ ├── slash-command.tsx # "/" command palette
│ │ ├── ai-inline.tsx # Ghost text autocomplete
│ │ ├── ai-toolbar.tsx # Selection AI actions
│ │ └── block-handle.tsx # Drag handle
│ ├── sidebar/
│ │ ├── ai-chat.tsx # AI chat interface
│ │ └── outline.tsx # Document outline / TOC
│ ├── collaboration/
│ │ └── cursor-presence.tsx # Live collaborator avatars
│ └── ui/ # shadcn/ui primitives
├── lib/
│ ├── ai.ts # Gemini model configuration
│ ├── collaboration.ts # Yjs provider factory
│ ├── documents.ts # localStorage CRUD
│ ├── editor-config.ts # Tiptap extensions & config
│ └── export.ts # Markdown/HTML/Text export
└── types/
└── index.ts # TypeScript interfaces
- User creates or opens a document from the dashboard
DocumentEditorinitializes a YjsY.Docwith a pre-createdXmlFragment- A WebRTC provider connects to
wss://signaling.yjs.devfor P2P sync - An IndexedDB provider loads persisted content and enables offline support
- Tiptap editor mounts with the Yjs fragment bound via
y-prosemirrorplugins - A random user identity (name + color) is assigned for collaboration cursors
- Each document has a unique room ID (
smart-editor-{docId}) - Yjs CRDTs handle conflict-free merging of concurrent edits
- WebRTC enables direct browser-to-browser sync (no server stores content)
- Cursor awareness broadcasts each user's selection state to all peers
- IndexedDB ensures no data loss on refresh or disconnect
- Autocomplete: After 1.5s of inactivity (20+ chars context), the last 500 characters are sent to
/api/ai/complete. Ghost text appears inline; pressTabto accept. - Slash Commands: AI commands route through dedicated endpoints. The slash menu deletes the trigger text, calls the API, and inserts the result.
- Selection Toolbar: Selected text is sent to
/api/ai/improvewith a mode parameter (grammar/tone/clarity/shorten) or/api/ai/expand. Results are previewed before applying. - Chat Sidebar: Full document text is sent as context with each message. Uses Vercel AI SDK streaming for real-time responses.
- Node.js 18+
- A Google AI API key (Get one here)
git clone https://github.com/KaranChandekar/smart-collaborative-editor.git
cd smart-collaborative-editor
npm installCreate a .env.local file in the project root:
GOOGLE_GENERATIVE_AI_API_KEY=your_google_ai_api_key_herenpm run devOpen http://localhost:3000 to start editing.
npm run build
npm start- Create a document — Click "New Document" on the home page
- Start writing — The editor supports all standard formatting shortcuts (
Cmd+B,Cmd+I, etc.) - Use AI — Type
/for the command palette, select text for AI actions, or open the AI chat sidebar - Collaborate — Share the URL with others; they'll join your editing session instantly via P2P
- Export — Click the download icon to save as Markdown, HTML, or plain text
| Endpoint | Method | Purpose |
|---|---|---|
/api/ai/complete |
POST | Inline autocomplete (100 tokens max) |
/api/ai/improve |
POST | Grammar, tone, clarity, or shorten text |
/api/ai/expand |
POST | Expand text with more detail |
/api/ai/chat |
POST | Streaming document Q&A |
MIT