Visual and Source HTML Editor

The visual editor on the left and the source editor on the right are fully synchronized, meaning changes in one are instantly reflected in the other. The most essential editing tools can be found above the WYSIWYG editor and below the syntax-highlighted code editor.

ℹ️ This video was recorded before the rebranding when the editor was called HTMLg. However, the core features remain unchanged.

Visual Editor

The WYSIWYG editor on the left works like a standard word processor, similar to Microsoft Word or Google Docs. The toolbar above the editor provides all the necessary tools for composing and formatting your content. You can also convert documents from Microsoft Word, Excel, PowerPoint, Open Office, Google Docs, PDFs, or any other text format to HTML by copying and pasting them here. Instantly preview and fine-tune the generated HTML in the source editor.

Source Editor

The source editor on the right is where you can manually edit your HTML code. Syntax highlighting makes it easy to distinguish different tags and elements. The toolbar below the editor lets you adjust font size, change character encoding, enable tree view, compress code, and more.

Source Editor Controls

Undo – Reverts the document to its previous state before the last operation or cleanup. There's only one previous state. The viusal editor has its own undo icon in its header that has unlimited undo/redo versions saved.

Fresh Page – Clears the editor and loads a blank page.

Create Backup – The barrel icon is divided into an upper and a lower part, which is revealed on mouse hover. Press the bottom part to create a backup and the upper part to populate the editor with the previously saved text. The lower part of the icon turns darker when something is saved in the backup.

Send to Draft Editor – Sends the content to the Draft Editor for backup or further modifications.

Font Size +/- – Adjusts the size of the syntax highlighted source code for better readability.

Character Encoding – Toggle encoding settings. When active it will show é in the source, when disabled: é.

Tree View – Structures the HTML by indenting block elements. Clicking it twice formats inline elements as well, adding line breaks and tabs.

Compress – Removes unnecessary spaces, comments, and line breaks to reduce file size without affecting the rendered output.

Copy – Copies the content of the HTML editor to the clipboard so you can easily paste it whenever you need.

Clean – Applies all selected (checked) cleaning options to optimize the code.

Additional Tips

• Use the visual editor for easy content formatting and let the source editor handle precise HTML adjustments.
• Tree view is especially useful for working with complex HTML structures.
• Compression can help speed up website performance by minimizing file size.
• Switching between editors helps refine both content and underlying code efficiently.

With this dual-panel editor, you get the best of both worlds: intuitive editing and full control over your HTML! Load the demo content with the header icon to experiment these features.