Code Editor

A modern web-based code editor built with React and Monaco Editor that provides a feature-rich development environment with syntax highlighting, code completion, and a user-friendly interface.

Features

• 🖥️ Real-time code editing with Monaco Editor
• 🎨 Light/Dark theme support
• 📁 File management system with multi-file support
• 🔄 Resizable panels
• 💻 Integrated terminal with command support
• 🔍 Multiple language support with syntax highlighting
• 🎯 Code execution capabilities
• 📱 Responsive and modern UI with Chakra UI

Tech Stack

• React 18
• Vite
• Monaco Editor
• Chakra UI
• Axios
• Framer Motion

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd CodeEditor

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Available Scripts

• npm run dev - Starts development server
• npm run build - Builds the app for production
• npm run lint - Runs ESLint
• npm run preview - Preview production build

Usage

Code Editing

• Use the file explorer to create, select, and delete files
• Choose from multiple programming languages
• Edit code with full Monaco Editor features

Terminal Commands

• run - Execute the current file
• clear - Clear the terminal
• help - Show available commands

Theme Switching

• Toggle between light and dark themes using the theme button