About HTMLEditor
HTMLEditor is a web-based, drag-and-drop HTML editor designed for creating and prototyping web layouts with ease. It features a real-time preview, code editing, and dark mode support. Built with HTML, CSS, and JavaScript, it leverages libraries like Interact.js for drag-and-drop functionality and Highlight.js for syntax highlighting.
Perfect for developers, designers, and learners, HTMLEditor simplifies web development with an intuitive interface and powerful features.
Features
- Drag-and-Drop Interface: Add and position elements like divs, text, images, buttons, forms, flexbox, grids, and cards.
- Real-Time Preview: See changes instantly in an iframe preview.
- Code Editors: Edit HTML, CSS, and JavaScript with syntax highlighting.
- Properties Panel: Adjust element properties like position, size, colors, and content.
- Snapping: Align elements with snap guides for precise layouts.
- Undo/Redo: Revert or redo changes with history support (Ctrl+Z, Ctrl+Y).
- Dark Mode: Toggle between light and dark themes (Ctrl+D).
- Project Management: Save, load, and export projects as HTML, CSS, and JS files.
- Keyboard Shortcuts: Streamline workflow with shortcuts (e.g., Ctrl+S to save).
- Responsive Design: Adapts to smaller screens for mobile use.
- Auto-Save: Automatically saves your project every 30 seconds.
Gallery
Getting Started
Option 1: Use Online
1. Visit the Live Demo.
2. Drag elements from the tools panel to the canvas.
3. Edit code in the HTML, CSS, or JavaScript tabs.
4. Save or export your project using the toolbar.
Option 2: Run Locally
1. Download HTMLEditor-v1.0.0.html from the Releases page.
2. Open the file in a modern browser (Chrome, Firefox, Edge).
3. Start using the editor.
Option 3: Clone and Customize
1. Clone the repository:
git clone https://github.com/HTMLToolkit/HTMLEditor.gitindex.html in a browser or serve it locally (e.g., npx serve).3. Modify the code to customize the editor.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl + Z | Undo |
| Ctrl + Y | Redo |
| Delete | Delete selected element |
| Ctrl + S | Save project |
| Ctrl + E | Export project |
| Ctrl + D | Toggle dark mode |
| Ctrl + P | Toggle properties panel |
| Ctrl + Arrow Keys | Fine-tune element position |
| Shift + Arrow Keys | Resize selected element |
| ? | Show shortcuts panel |
Dependencies
Interact.js - Drag-and-drop and resizing functionality
Highlight.js - Syntax highlighting for code editors
No server-side dependencies; runs entirely in the browser.
Contributing
Contributions are welcome! To contribute:
1. Fork the repository.
2. Create a feature branch (git checkout -b feature/new-feature).
3. Commit your changes (git commit -m "Add new feature").
4. Push to the branch (git push origin feature/new-feature).
5. Open a Pull Request.
Report bugs or request features via the Issues page.
License
HTMLEditor is licensed under the GNU General Public License v3.0. See the LICENSE file for details.
Acknowledgements
Built by NellowTCS.
Powered by Interact.js and Highlight.js.
Inspired by modern web design tools.