Code Editor

A lightweight, browser-based HTML editor with syntax highlighting and live preview capabilities.

Features

• Live Code Editing - Real-time code editing with line numbers and character count
• Syntax Highlighting - Powered by Highlight.js with Dracula theme
• Live Preview - Run HTML/CSS/JavaScript code instantly in sandboxed iframe
• File Management - Open local files and save your work
• Search & Navigation - Find text and jump to specific line numbers
• Undo/Redo - Full history management (up to 50 steps)
• Fullscreen Mode - Distraction-free coding experience
• Quick Insert Tools - Common HTML/JS snippets at your fingertips

Usage

Opening Files

1. Click the 📂 Open button
2. Select an HTML file from your system
3. Edit in the editor

Running Code

1. Write or paste your HTML/CSS/JavaScript code
2. Click ▶️ Run to preview
3. Click 🛑 Stop to return to editing

Keyboard Shortcuts

• Tab - Insert 4 spaces (indentation)
• Search and jump functions via toolbar buttons

Saving Work

Click ⬇️ Save to download your code as an HTML file

Quick Insert Toolbar

Common snippets available:

• <div> blocks
• <span> tags
• <script> tags
• Style and class attributes
• Parentheses, braces, semicolons

Technical Details

• No server required - Runs entirely in the browser
• Sandbox security - Preview runs in sandboxed iframe
• Responsive design - Works on desktop and tablet
• Dark theme - Easy on the eyes with Dracula color scheme

Dependencies

• Highlight.js (syntax highlighting library)
• Dracula theme CSS

Browser Compatibility

Works in all modern browsers supporting:

• ES6 JavaScript
• CSS Grid/Flexbox
• HTML5 File API
• Fullscreen API

License

Open source - modify and use freely