π 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!
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.
π License
This project is licensed under the MIT License - see the LICENSE file for details.
π€ Author & Contact
Gouranga Das Samrat
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.
---
π Show Your Support

If you find this project useful, please consider giving it a β
π¬ Feedback
Have suggestions or want to contribute? Feel free to open an issue or reach out through my social profiles.
Happy Coding! π