Web Code Editor & Live Preview

A professional, full-featured web-based code editor for HTML, CSS, and JavaScript with live preview functionality. Built with vanilla JavaScript, this editor provides a complete development environment in your browser.

✨ Features

🎨 Code Editing

• Three Separate Editors: Dedicated panels for HTML, CSS, and JavaScript
• Line Numbers: Auto-updating line numbers for all editors
• Character Count: Real-time character count for each editor
• Tab Support: Proper tab handling (2 spaces) in all editors
• Syntax Validation: Real-time validation with error reporting
• Code Formatting: Auto-format your HTML, CSS, and JS code
• Copy to Clipboard: Quick copy buttons for each editor

🖥️ Live Preview

• Instant Preview: See your changes in real-time
• Sandboxed iframe: Safe execution environment
• Fullscreen Mode: Expand preview to fullscreen
• Refresh Control: Manual refresh option
• Responsive: Preview adjusts to different screen sizes

🎯 Console Integration

• Console Capture: Captures console.log, console.error, console.warn, console.info
• Error Handling: Displays runtime JavaScript errors
• Collapsible Panel: Toggle console visibility
• Clear Console: Easy console clearing
• Syntax Highlighting: Different colors for log types

💾 Project Management

• Auto-Save: Automatic saving to localStorage
• Save Projects: Save multiple named projects
• Load Projects: Quick access to saved projects
• Delete Projects: Manage your saved projects
• Export HTML: Download complete HTML file

🎨 UI/UX Features

• Dark/Light Theme: Toggle between themes with persistent preference
• Layout Toggle: Switch between vertical and horizontal layouts
• Responsive Design: Works on desktop, tablet, and mobile
• Smooth Animations: Professional transitions and effects
• Notifications: Toast notifications for all actions
• Keyboard Shortcuts: Productivity-enhancing shortcuts
• Modal Dialogs: Clean save/load interfaces

⌨️ Keyboard Shortcuts

• Ctrl+Enter / Cmd+Enter - Run code
• Ctrl+S / Cmd+S - Save project
• Ctrl+Shift+F / Cmd+Shift+F - Format current editor
• Tab - Insert 2 spaces in editors
• Esc - Close modals (when focused)

🚀 Getting Started

Installation

1. Clone or Download this repository
2. Open index.html in your web browser
3. Start coding! No build process or dependencies required

File Structure

web-code-editor/
│
├── index.html          # Main HTML file
├── styles.css          # Complete styling
├── script.js           # All functionality
└── README.md           # Documentation

📖 How to Use

Basic Usage

1. Write Code

   • Enter HTML in the HTML editor
   • Add CSS in the CSS editor
   • Write JavaScript in the JS editor

2. Run Preview

   • Click the "Run" button or press Ctrl+Enter
   • Your code will execute in the preview panel

3. Save Your Work

   • Click "Save" button
   • Enter a project name
   • Project is saved to browser localStorage

4. Load Projects

   • Click "Load" button
   • Select from your saved projects
   • Code is loaded into editors

Advanced Features

Code Formatting

Click the magic wand icon (✨) on any editor to auto-format your code.

Theme Switching

Click the moon/sun icon to toggle between dark and light themes.

Layout Options

Click the columns icon to switch between vertical and horizontal layouts.

Export HTML

Click "Export" to download a complete, standalone HTML file with all your code.

Console Monitoring

• Console automatically captures output from your JavaScript
• View logs, errors, and warnings
• Toggle visibility with the console button

🔧 Technical Details

Validation

HTML Validation

• Checks for basic tag structure
• Validates opening and closing tags
• Identifies self-closing tags

CSS Validation

• Validates balanced braces
• Checks for basic syntax errors

JavaScript Validation

• Uses Function constructor for syntax checking
• Displays line-specific errors
• Runtime error catching

Storage

All data is stored in browser's localStorage:

• autoSave_html - Auto-saved HTML code
• autoSave_css - Auto-saved CSS code
• autoSave_js - Auto-saved JavaScript code
• savedProjects - Array of saved projects
• editorTheme - Theme preference (dark/light)
• editorLayout - Layout preference (vertical/horizontal)

Browser Compatibility

• ✅ Chrome/Edge (Recommended)
• ✅ Firefox
• ✅ Safari
• ✅ Opera
• ⚠️ Internet Explorer (Not supported)

Security

• Uses sandboxed iframe for preview
• Prevents malicious code from affecting parent page
• Safe execution environment with allow-scripts, allow-same-origin, etc.

🎨 Customization

Changing Colors

Edit the CSS variables in styles.css:

:root {
    --primary-color: #4a90e2;      /* Main accent color */
    --secondary-color: #7b68ee;    /* Secondary accent */
    --success-color: #2ecc71;      /* Success messages */
    --warning-color: #f39c12;      /* Warnings */
    --danger-color: #e74c3c;       /* Errors */
}

Modifying Themes

Light theme variables can be adjusted:

body.light-theme {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    /* Customize other colors */
}

🐛 Known Limitations

• Code formatting is basic (not a full parser)
• Validation is simplified (not as comprehensive as IDE)
• localStorage has size limits (~5-10MB)
• Some advanced JavaScript features may not work in iframe
• No real-time collaboration features

🔄 Future Enhancements

Potential features for future versions:

• Syntax highlighting with CodeMirror or Monaco Editor
• Auto-complete suggestions
• Multiple file support
• Git integration
• Export to CodePen/JSFiddle
• Custom color schemes
• Plugin system
• Collaborative editing
• Cloud storage integration

💡 Tips & Tricks

1. Use keyboard shortcuts for faster workflow
2. Format code regularly for better readability
3. Save frequently with descriptive project names
4. Check console for JavaScript errors and logs
5. Use fullscreen preview for better visualization
6. Try both layouts to find what works best for you

🤝 Contributing

Feel free to:

• Report bugs
• Suggest features
• Submit pull requests
• Share your improvements

📄 License

This project is open source and available under the MIT License.

👨‍💻 Developer Notes

Code Structure

• State Management: Global state object tracks all editor states
• Event-Driven: Uses event listeners for all interactions
• Modular Functions: Each feature is isolated in its own function
• No Dependencies: Pure vanilla JavaScript (except Font Awesome for icons)

Performance Considerations

• Debouncing not implemented (consider for large codebases)
• Auto-save triggers on every input (could be optimized)
• Line numbers recalculate on every keystroke (acceptable for small files)

📞 Support

If you encounter any issues or have questions:

1. Check this README
2. Review the console for errors
3. Clear localStorage if experiencing issues
4. Refresh the page

🎉 Acknowledgments

• Font Awesome for icons
• Inspired by CodePen, JSFiddle, and other online code editors
• Built with ❤️ for developers

---

Happy Coding! 🚀

Made with passion for web development