A beautiful, fast, and mobile-friendly live code editor for HTML, CSS, and JavaScript.
Instantly preview your code as you type, just like CodePen!
For detailed documentation, guides, and configuration notes — visit the DeepWiki page above.
Screencast.from.2025-06-06.11-49-37.webm
| 💡 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 |
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
| Metric | Score |
|---|---|
| ⚡ Performance |  |
| ♿ Accessibility | |
| ✅ Best Practices | |
| 🔍 SEO | |
📋 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.htmlin your browser
Or simply try the Live Demo
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
This project is licensed under the MIT License - see the LICENSE file for details.
Full Stack Developer • MERN Stack • Technical Writer
Passionate about building scalable web apps & contributing to open source
Open to collaboration, frontend & full-stack projects, or meaningful discussions around JavaScript, React & web architecture.
---
Have suggestions or want to contribute? Feel free to open an issue or reach out through my social profiles.