Online Code Editor

An interactive Online Code Editor built using HTML, CSS, and JavaScript. This project allows users to write and run HTML, CSS, and JavaScript code directly in the browser, providing instant live output — similar to platforms like CodePen or JSFiddle.

Features

1. Real-time Preview: Instantly displays the output as you type your HTML, CSS, or JavaScript code.
2. Separate Code Panels: Organized sections for HTML, CSS, and JS for better readability and usability.
3. Responsive Design: Works smoothly across desktop and mobile devices.
4. User-friendly Interface: Clean layout with easily distinguishable editor and output areas.
5. Auto Update: Output updates automatically without needing to refresh the page.

Tech Stack

1. HTML: For structure and layout of editor panels.
2. CSS: For styling and responsive interface design.
3. JavaScript: For code execution, real-time preview, and DOM manipulation.

Future Enhancements

1. Save Code Feature: Allow users to download or save their code locally.
2. Dark/Light Theme: Add theme switcher for a better coding experience.
3. Syntax Highlighting: Integrate libraries like CodeMirror or Monaco Editor for professional editor features.
4. Resizable Panels: Enable drag-to-resize functionality for editor sections.
5. Shareable Links: Generate sharable links to let users share their code snippets.

How to Use

1. Enter your HTML, CSS, and JavaScript code in their respective panels.
2. The output will automatically appear in the preview section below.
3. Modify the code and see live updates instantly.

Live Demo

Live Project Link : https://code-editor-rouge-iota.vercel.app/