A professional, fullscreen browser-based IDE for writing, compiling, and running code in 8 programming languages — instantly, with no local setup required.
🌍 Live Demo: https://online-compiler-fawn.vercel.app/
- 🎨 Animated LineSidebar — Proximity-aware language selector with smooth hover animations
- 🖊️ Advanced Monaco Editor — Auto-close brackets
{}, auto-complete, error squiggles, bracket pair colorization, JetBrains Mono font - 📊 Performance Metrics — Runtime (ms), Memory (KB), Exit Code, Status after every execution
- 🗂️ Tabbed Output Panel — Separate tabs for Output, Errors, and Metrics
- ⌨️ Stdin Support — Provide standard input for interactive programs
- 💜 Glassmorphism Dark UI — Purple-accented, fullscreen, responsive design
- ⚡ Keyboard Shortcut —
Ctrl+Enterto run code - 🌙 Light/Dark Theme Toggle
- 📋 Status Bar — VS Code-style with cursor position, encoding, language
- 🛑 Stop Execution — Cancel long-running or infinite-loop programs
- 📋 Copy Output — One-click copy to clipboard
| Language | Extension | Runtime |
|---|---|---|
| 🐍 Python | .py |
CPython 3 |
| 🔵 C | .c |
GCC |
| ⚙️ C++ | .cpp |
G++ |
| ☕ Java | .java |
OpenJDK |
| 🟨 JavaScript | .js |
Node.js |
| 🔷 TypeScript | .ts |
TypeScript |
| 🦀 Rust | .rs |
rustc |
| 🐹 Go | .go |
Go |
| Layer | Technology |
|---|---|
| Frontend Framework | React 19 |
| Build Tool | Vite 7 |
| Code Editor | @monaco-editor/react |
| Language Sidebar | LineSidebar (react-bits, custom integrated) |
| Execution API | Judge0 CE |
| HTTP Client | Axios |
| Hosting | Vercel |
- Node.js v18+ and
npm
# 1. Clone the repository
git clone https://github.com/Adhi1029/online-compiler.git
cd online-compiler
# 2. Install dependencies
npm install
# 3. Start the dev server
npm run devOpen http://localhost:5173 in your browser.
npm run buildOutput will be in the dist/ folder, ready to deploy anywhere.
This project is pre-configured for Vercel via vercel.json:
- Go to vercel.com/new
- Import
Adhi1029/online-compilerfrom GitHub - Vercel auto-detects Vite — just click Deploy
src/
├── components/
│ ├── LineSidebar.jsx # Animated language selector sidebar
│ ├── LineSidebar.css # LineSidebar styles
│ ├── EditorPanel.jsx # Monaco editor with advanced config
│ ├── OutputPanel.jsx # Tabbed output / errors / metrics
│ ├── Topbar.jsx # Header with run button & theme toggle
│ └── StatusBar.jsx # VS Code-style bottom status bar
├── App.jsx # Main app — state, execution logic
├── index.css # Global design system (CSS variables)
└── main.jsx # Entry point
vercel.json # Vercel deployment config
Code execution is sandboxed by Judge0 CE, a battle-tested open-source online judge. All code runs in isolated containers with CPU time limits, memory caps, and network restrictions.
MIT © Adhi1029