OpenSource Notion: Building a Collaborative Knowledge Base

Why Another Notion Clone?

Notion is powerful but closed-source and expensive for teams. OpenSource Notion gives you the same power with full control over your data.

Tech Stack

Next.js 14: App Router, Server Components
TypeScript: Type-safe development
Convex: Real-time database
Clerk: Authentication
EdgeStore: File storage
Tailwind CSS: Styling

Key Features

1. Rich Text Editor

Built with BlockNote (similar to Notion's editor):

Drag-and-drop blocks
Slash commands
Markdown shortcuts
Code blocks with syntax highlighting

2. Real-Time Collaboration

Multiple users can edit simultaneously:

typescript
// Using Convex for real-time sync
const documents = useQuery(api.documents.get);

// Automatic updates when others edit
useEffect(() => {
  // Updates pushed to all clients
}, [documents]);

3. Hierarchical Pages

Nested pages (unlimited depth)
Sidebar navigation
Breadcrumb trails
Quick search across all pages

4. File Uploads

Images, PDFs, videos
Stored in EdgeStore
Automatic optimization
CDN delivery

5. Publishing

Turn private pages into public websites:

Custom domains
SEO optimization
Analytics integration
Password protection optional

Architecture

OpenSource Notion:
├── Frontend (Next.js 14)
│   ├── App Router pages
│   ├── Server Components
│   └── Client Components
├── Backend (Convex)
│   ├── Mutations (write operations)
│   ├── Queries (read operations)
│   └── Subscriptions (real-time updates)
├── Auth (Clerk)
├── Storage (EdgeStore)
└── Deployment (Vercel)

Real-Time Collaboration Implementation

typescript
// Convex mutation for document updates
export const update = mutation({
  args: {
    id: v.id("documents"),
    content: v.optional(v.string()),
    title: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
    const { id, ...rest } = args;
    
    // Update document
    await ctx.db.patch(id, rest);
    
    // All subscribers automatically get update
  },
});

Editor Features

Block Types

Heading 1, 2, 3
Paragraph
Bulleted list
Numbered list
Todo checkbox
Code block
Quote
Divider
Image
Video embed

Slash Commands

Type / to see all block types:

/heading1
/code
/image
/table

Keyboard Shortcuts

Ctrl/Cmd + B: Bold
Ctrl/Cmd + I: Italic
Ctrl/Cmd + K: Add link
Ctrl/Cmd + /: Command menu

Performance Optimizations

1. Server Components

Most components render on the server:

Faster initial load
Better SEO
Reduced JavaScript bundle

2. Incremental Static Regeneration

Public pages are cached:

typescript
export const revalidate = 60; // Revalidate every 60 seconds

3. Image Optimization

Next.js Image component:

Automatic webp conversion
Lazy loading
Responsive sizes

Deployment

Deployed on Vercel with:

Edge functions for fast global access
Automatic CI/CD from GitHub
Preview deployments for PRs
Analytics dashboard

Live Demo: opensource-notion.vercel.app

Database Schema

typescript
documents: {
  _id: Id,
  title: string,
  userId: string,
  isArchived: boolean,
  parentDocument?: Id,
  content?: string,
  coverImage?: string,
  icon?: string,
  isPublished: boolean,
}

Challenges Overcome

Challenge 1: Real-Time Sync

Problem: Conflicts when multiple users edit simultaneously Solution: Operational transformation with Convex's built-in CRDT

Challenge 2: Large Documents

Problem: Slow rendering with 1000+ blocks Solution: Virtual scrolling with tanstack/virtual

Challenge 3: Search Performance

Problem: Slow search across thousands of documents Solution: Full-text search with Convex indexes

Future Roadmap

Self-Hosting

Want to run it yourself?

bash
git clone https://github.com/NotShubham1112/OPENsourceNotion
cd OPENsourceNotion
npm install
npm run dev

Set up your own:

Convex backend
Clerk auth
EdgeStore bucket

Contributing

Open-source means community-driven:

Report bugs
Suggest features
Submit PRs
Improve docs

Repository: github.com/NotShubham1112/OPENsourceNotion