About this project

CipherStudio is a fully browser-based React IDE (Integrated Development Environment) that allows developers to write, edit, and preview React code without any local setup. Inspired by CodeSandbox and StackBlitz, it features a multi-file code editor with syntax highlighting, a tree-based file explorer, real-time live preview panel, and ESLint-powered error feedback. The editor supports JSX, TypeScript, and modern React patterns, with Babel transpilation running entirely in the browser via Web Workers for non-blocking performance. CipherStudio's architecture demonstrates advanced frontend engineering: module federation for isolated code execution, virtual file system management in-browser, real-time iframe preview synchronization, and a clean Monaco-like editing experience built with TypeScript and React.

Key highlights

• Full in-browser React IDE with multi-file support
• Babel transpilation in Web Workers for non-blocking execution
• Tree-based virtual file explorer with add/rename/delete
• Real-time iframe live preview with hot reload
• Syntax highlighting and JSX/TypeScript support
• ESLint error overlay for real-time feedback
• Zero-install — runs entirely in the browser
• Monaco-style editing experience built with React and TypeScript