Google-Docs-style real-time Markdown editor built from scratch with CRDTs & full-stack TypeScript.
CollabPad is a modern, real-time collaborative Markdown editor that enables multiple users to edit documents simultaneously with conflict-free merging. Built with technologies like Yjs CRDTs and WebSockets, it provides a seamless Google Docs-like experience for Markdown editing with features like multi-cursor presence, offline support, and instant synchronization.
| Category | |
|---|---|
| Auth | GitHub OAuth via NextAuth.js |
| Real-time Editing | Yjs CRDT over WebSocket, multi-cursor presence, offline conflict-free merges |
| Type Safety | End-to-end tRPC API with Zod validation |
| Database | PostgreSQL + Prisma ORM |
| UI | TipTap 3 editor, Tailwind CSS theme |
| DX / CI | ESLint, Prettier, Vitest, GitHub Actions matrix (Node 18 & 20) |
| Dev Env | docker-compose up -d spins Postgres + Redis + y-websocket relay |
┌───────────────────────────────────────────┐
│ Browser │
│┌───────────────┐ ┌─────────────────────┐│
││ TipTap Editor │──▶│ Yjs Doc (CRDT) ││
│└───────────────┘ └─────────────────────┘│
│ ▲ │ WebSocket │
└───────────────┼───────────┼────────────────┘
│ ▼
┌───────────────┴───────────────────────────┐
│ y-websocket Relay (Docker) │
└───────────────┬───────────────────────────┘
│ tRPC (HTTP) PostgreSQL
┌───────────────┴──────────────────────┐ ┌──────────┐
│ Next.js 14 API Routes │─────▶│ Prisma │
│ (tRPC routers, NextAuth callbacks) │ └──────────┘
└──────────────────────────────────────┘
| Layer | Tech |
|---|---|
| Frontend | Next.js 14, React 18, TypeScript |
| Backend | tRPC, NextAuth.js, Prisma |
| Database | PostgreSQL |
| Realtime | Yjs + y-websocket |
| Styling | Tailwind CSS |
| Testing | Vitest |
| Dev Ops | Docker, GitHub Actions |
- Node 18+ & pnpm
- Docker & Docker Compose
- GitHub account (for OAuth)
git clone https://github.com/ferecci/collabpad.git
cd collabpad
pnpm install
# Spin up Postgres, Redis & y-websocket
docker-compose up -d
# Copy env vars & fill in GitHub creds
cp env.example .env.localCreate a GitHub OAuth App (Developer Settings → OAuth Apps)
- Homepage URL:
http://localhost:3000 - Authorization callback URL:
http://localhost:3000/api/auth/callback/github
Paste the GITHUB_ID and GITHUB_SECRET into .env.local and generate a NEXTAUTH_SECRET:
openssl rand -base64 32Run migrations and start the dev server:
pnpm db:migrate # creates tables & generates Prisma client
pnpm dev # http://localhost:3000collabpad/
├─ src/
│ ├─ app/ # Next.js app-router pages & layouts
│ ├─ components/ # Reusable React components
│ ├─ lib/ # Helpers & utilities
│ ├─ server/ # tRPC routers & NextAuth config
│ └─ types/ # Shared type definitions
├─ prisma/ # Schema & migrations
├─ docker-compose.yml # Postgres, Redis, y-websocket
└─ vitest.config.ts
| Command | Purpose |
|---|---|
pnpm dev |
Start dev server with hot-reload |
pnpm build |
Production build |
pnpm start |
Start prod server |
pnpm lint |
Run ESLint + Prettier |
pnpm format |
Auto-format code |
pnpm test |
Run Vitest unit tests |
pnpm type-check |
Run tsc --noEmit |
pnpm db:migrate |
Prisma migrate & generate client |
pnpm db:studio |
Launch Prisma Studio GUI |
# Spin everything up (detached)
docker-compose up -d
# Tail logs
docker-compose logs -f
# Shut it all down
docker-compose downContributions are welcome! Feel free to open an issue or pull request.
MIT © 2025 ferecci (Felipe Tancredo)