About Live Code Editor

A responsive live web based code editor using codemirror library.

Published by

clubgamma

Visit View Profile

Live Code Editor

View on GitHub

🚀 Live-Code-Editor 💻✨

A beautiful, fast, and mobile-friendly live code editor for HTML, CSS, and JavaScript.
Instantly preview your code as you type, just like CodePen!

✨ View Live Demo »

For detailed documentation, guides, and configuration notes — visit the DeepWiki page above.

Screencast from 2025-06-06 11-49-37.webm

✨ Features

💡 Real-time Preview	See your code changes instantly
📝 Separate Editors	Dedicated panels for HTML, CSS, and JavaScript
🎨 CodeMirror Integration	Syntax highlighting, autocompletion, and more
📱 Mobile Responsive	Works beautifully on any device
⚡ Fast & Lightweight	Minimal load time, smooth experience

🏗️ Project Structure

Live-Code-Editor/
├── 📂 codemirror/          # CodeMirror library & addons
│   ├── 📂 addon/           # CodeMirror addons
│   ├── 📂 lib/            # Core library files
│   ├── 📂 mode/           # Language modes
│   └── 📂 theme/          # Editor themes
├── 📄 index.html          # Main HTML file
├── 📄 style.css          # App styles
├── 📄 index.js           # App logic
├── 🎨 favicon.png        # App icon
└── 📝 README.md          # Documentation

📈 Performance & Lighthouse

Metric	Score
⚡ Performance
♿ Accessibility
✅ Best Practices
🔍 SEO

🛠️ Technologies Used

🚀 Getting Started

📋 Prerequisites

• Any modern web browser
• Basic understanding of HTML, CSS, and JavaScript

⚙️ Installation

Clone the repository:

git clone https://github.com/GourangaDasSamrat/Live-Code-Editor.git

Navigate to project directory:
```
cd Live-Code-Editor
```
Open index.html in your browser

Or simply try the Live Demo

👥 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.