HTML6 Editor User Interface
The HTML6 Editor makes working with HTML easier by combining a visual editor with a source code editor, along with various helpful features for managing and cleaning your code. The user interface consists of a linked visual and source editor, along with a control panel below.
ℹ️ This video was recorded before the rebranding, when the editor was called HTMLg. However, the main features remain the same.
Header - Save and Load Settings »
The header contains links to the main pages of the website and useful external links. Here, you can load demo content, save and load your settings multiple ways, load default settings, toggle the Draft Editor and license information.
Visual and Source HTML Editors »
The visual editor on the left and the source editor on the right are synced, so any changes you make in one will instantly appear in the other as you type.
Draft Editor »
This secondary HTML editor features syntax highlighting and allows you to extract code or perform operations without affecting the main editor.
Tag Manager »
Perform bulk operations on predefined or user-specified HTML tags. Execute these by clicking the button or activate them checking the boxes and running all checked options together with the play button on the top right corner of the tag manager window.
HTML Cleaning Options »
Select the cleaning options you want to apply when clicking the main Clean🧹 button or execute them individually as needed.
Find and Replace »
Set up multiple find-and-replace rules, choose where to apply them, and execute changes one at a time or all at once.
Color Picker »
Click the input field to open the color palette🎨 and choose a shade. Press the play button to get more details about your selected color and save them for easy access.
Table and List to DIV Converter »
For better responsiveness, consider using structured <div> tags instead of traditional tables. Classic table-based layouts aren't as flexible for modern designs.
Tag Filter »
Extract or remove HTML tags based on their names, attributes, or content. Customize filters to fit your needs.
Tag Attribute Filter »
Remove or extract specific attributes from selected HTML tags by configuring filter rules using the dropdown options.
Lorem Ipsum Generator »
Use this tool to generate placeholder text for design and development purposes. Lorem ipsum is commonly used to preview layouts.
Click and Copy »
Store up to 8 code snippets or text snippets for easy copy-pasting into your HTML editor. These fields act as quick-access buffers.
Editor CSS »
The visual editor uses Bootstrap CSS by default, along with support for <div>-based tables and lists. You can apply your own CSS styles entering them in the syntax-highlighted editor, or from an external file.
