Overview

The Online Code Editor is a web-based application built with React.js and CodeMirror, providing a seamless environment for writing, editing, and previewing HTML, CSS, and JavaScript code in real time. Designed for learners, educators, and developers, this editor offers instant feedback and a user-friendly interface for rapid prototyping and experimentation.

Features

• Real-time Preview: Instantly view the output of your HTML, CSS, and JavaScript code as you type.
• Syntax Highlighting: Enhanced readability and organization with syntax highlighting for HTML, CSS, and JavaScript.
• Code Formatting: Automatic formatting for improved code structure and clarity.
• Responsive Design: Optimized for both desktop and mobile devices.
• User-Friendly Interface: Intuitive layout and controls for an easy coding experience.
• Expand/Collapse Editors: Toggle visibility of individual code panes for focused editing.
• Persistent Storage: Your code is automatically saved in local storage and restored on reload.
• Live Output Sandbox: Secure preview using an iframe with script sandboxing.
• Customizable Themes: CodeMirror’s material theme for a modern look.
• Linting Support: Inline linting for error detection and code quality.

Technologies Used

• React.js: UI library for building interactive interfaces.
• CodeMirror: Powerful code editor component for syntax highlighting and editing.
• HTML, CSS, JavaScript: Core web technologies for front-end development.
• FontAwesome: Icon library for UI controls.
• Vite: Fast development and build tool.

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm

Installation

git clone https://github.com/yourusername/online-code-editor.git
cd online-code-editor
npm install

Running Locally

npm run dev

Open http://localhost:5173 in your browser.

Building for Production

npm run build

Project Structure

├── public/
│   └── vite.svg
├── src/
│   ├── comp/
│   │   ├── App.jsx
│   │   └── Editor.jsx
│   ├── hooks/
│   │   └── useLocalStorage.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js
├── eslint.config.js
└── README.md

Usage

1. Write HTML, CSS, and JavaScript in their respective editors.
2. See the live output update instantly below the editors.
3. Expand or collapse editors for a focused view.
4. Your code is saved automatically and restored on page reload.

License

This project is licensed under the MIT License.

---

Contributions and feedback are welcome!