Project Overview
An online sandbox for web developers. It runs code on-the-fly inside isolated iframes, providing console feedback and preview screens. Web Workers compile code templates, ensuring that infinite loops won't crash the editor.
Key Features & Scope
Monaco Editor integration supporting autocompletion and error highlights
Secure iframe sandbox preventing code scripts from accessing parent documents
Multi-file project tabs with mock node-modules imports
One-click code sharing generating copyable configuration links
System Architecture
Vite React application utilizing Monaco Editor instances. Compilation of files and ES modules resolution are executed in the browser via dedicated Web Workers.
Client InterfaceNext.js / React
──────▶
Backend CoreNode.js / Express
──────▶
Database NodeLocalStorage & URL State
Database: LocalStorage & URL State
Deployment: Vercel & Netlify
Performance & Vitals
98
95
99
100
Verified Production Metrics
Technologies Used
ReactMonaco EditorTailwind CSSViteWeb WorkersTypeScript