Skip to content

GourangaDasSamrat/Live-Code-Editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

21 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€ 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!


DeepWiki Docs

For detailed documentation, guides, and configuration notes β€” visit the DeepWiki page above.



Netlify Status License PRs Welcome GitHub Stars Last Commit Website Code Size

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

HTML5 CSS3 JavaScript CodeMirror


πŸš€ Getting Started

πŸ“‹ Prerequisites
β€’ Any modern web browser
β€’ Basic understanding of HTML, CSS, and JavaScript
βš™οΈ Installation
  1. Clone the repository:
    git clone https://github.com/GourangaDasSamrat/Live-Code-Editor.git
  2. Navigate to project directory:
    cd Live-Code-Editor
  3. Open index.html in your browser

Or simply try the Live Demo


πŸ‘₯ Contributing

PRs Welcome Contributors Issues

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

MIT License

This project is licensed under the MIT License - see the LICENSE file for details.


πŸ‘€ Author & Contact

Gouranga Das Samrat

Gouranga Das Samrat
Frontend Developer | JavaScript & React Expert | Open Source Enthusiast

Facebook X Bluesky LinkedIn YouTube CodePen LeetCode HackerRank Medium Dev.to Blogger Discord Email

Let's connect! I'm always open to collaboration, frontend projects, or just a friendly chat about JavaScript and React.


🌟 Show Your Support

Star this repo

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! πŸš€