Real-time collaborative notepad. Share a room code and anyone can edit the same document simultaneously. All data exists only in memory and vanishes when everyone leaves.
| Area | Technology |
|---|---|
| Framework | SvelteKit (Svelte 5) |
| Real-time sync | Yjs + WebRTC (P2P) |
| Editor | Tiptap (WYSIWYG block editor) |
| Styling | Tailwind CSS v4 |
| Signaling | Hono + WebSocket (Node.js) |
| Deployment | Vercel (frontend) + Render (signaling) |
| Testing | Vitest + Playwright |
Guest(random) or user-defined, persisted in localStorageBrowser A ──┐ ┌── Browser B
│ WebRTC P2P (Yjs) │
└────────────────────┘
│
signaling only
│
┌────────────────┐
│ Signaling Server│ ← Hono + WebSocket
│ (Render.com) │ y-webrtc protocol
└────────────────┘
The signaling server only brokers initial WebRTC connections. All document data flows directly between browsers via P2P.
# Install dependencies
bun install
# Install signaling server dependencies
cd signaling && bun install && cd ..
You need two terminals — the signaling server and the SvelteKit dev server:
# Terminal 1: Signaling server (ws://localhost:4444)
bun run signaling
# Terminal 2: SvelteKit dev server (http://localhost:5173)
bun run dev
Open http://localhost:5173, create a room, and open the same URL in another tab to test real-time sync.
bun run test # Unit tests (Vitest)
bun run test:e2e # E2E tests (Playwright)
bun run build # SvelteKit production build
| Service | Platform | Config |
|---|---|---|
| Frontend (SvelteKit) | Vercel | Auto-deployed on push |
| Signaling (Hono) | Render | render.yaml |
See signaling/README.md for signaling server details.