SyntaxLab
Production-grade online code editor — write, execute, and collaborate on code in real time. 60+ languages, live pair programming, and shareable snippets.
Overview
SyntaxLab is a production-grade browser-based code editor built with Next.js 15 and the App Router. It supports 60+ programming languages, real-time pair programming, and a full snippet management system — all in a polished dark-theme UI designed around the Monaco Editor (the same engine that powers VS Code).
Features
Editor
- Monaco Editor — VS Code engine with full syntax highlighting and keybindings
- 60+ languages — Python, JavaScript, TypeScript, Go, Rust, Java, C/C++, and more
- 25+ themes — Night Owl, GitHub Dark, Dracula, Monokai, and more
- Full-screen mode and
Cmd+Enterto run,Cmd+Sto save
Code Execution
- Instant execution powered by Judge0 via a secure server-side proxy
- Custom stdin support, execution metrics (runtime + memory), and status display
- API key never exposed to the browser — all Judge0 calls happen server-side
Real-Time Collaboration
- Share a room link and code together live with Liveblocks
- Colored cursors with name labels and presence avatars
- Guest access validated server-side — random room IDs are rejected before Liveblocks authorizes them
Snippets
- Save snippets with public/private visibility
- Browse, search, and filter your snippet library
- Every public snippet gets a shareable
/s/[id]URL - Fork any snippet directly into the editor
Auth & Dashboard
- Google and GitHub OAuth via Supabase Auth
- Dashboard with profile stats, snippet manager, and account settings
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Editor | Monaco Editor |
| Styling | Tailwind CSS + Radix UI |
| Auth | Supabase Auth (Google & GitHub OAuth) |
| Database | Supabase (PostgreSQL) |
| Realtime collab | Liveblocks |
| Code execution | Judge0 via RapidAPI (server-side proxy) |
| Deployment | Vercel |
Architecture Highlights
Server-Side Execution Proxy
Code execution routes through a Next.js API route (/api/execute) — the browser never touches Judge0 directly. The server submits, polls, and returns the final result. This keeps the RapidAPI key server-only and eliminates client-side polling complexity.
Liveblocks Guest Auth
Guests joining via a collab link are scoped to only that specific room. The auth endpoint calls liveblocks.getRoom(roomId) before issuing credentials — if the room doesn't exist, the request is rejected with a 404 before Liveblocks ever sees it.
OAuth Security
The /auth/callback route validates that the next redirect param starts with / before constructing the redirect URL, preventing open redirect attacks.