CodeLite · Live Editor

A lightweight, browser-based code editor that replicates the core experience of CodePen.io. Write HTML, CSS, and JavaScript in separate panels and see your changes update in real-time. No dependencies, no setup — just open the HTML file and start coding.

CodeLite Screenshot

Features

• Three Editor Panels – Separate areas for HTML, CSS, and JavaScript with syntax-highlighting style and monospace fonts.
• Live Preview – See your code execute instantly in the built-in preview iframe.
• Manual Run – Click the "run" button or press Cmd/Ctrl+Enter to refresh the preview.
• Clear All – Reset all editors to empty with one click.
• Responsive Layout – Adapts to different screen sizes, from desktop to mobile.
• Self-Contained – Single HTML file with no external dependencies or CDN links.

Getting Started

Option 1: Download the file

1. Download index.html from this repository.
2. Open it in your browser (Chrome, Firefox, Safari, Edge).
3. Start writing code in the three panels.

Option 2: Clone the repository

git clone https://github.com/yourusername/codelite-live-editor.git
cd codelite-live-editor
open index.html