A visual editor for .html / .htm files in VS Code. Click elements on the rendered page, change them in the panel on the right, and press Ctrl+S (Cmd+S) to write the changes to the file. The extension never saves on its own.
Use
Right-click an .html / .htm file in the Explorer, in its text editor or on its tab, and choose xyxu-html-editor. The visual editor opens as the last tab of the current editor group.
Click an element to select it. Alt+↑ selects its parent, Alt+↓ a child. The breadcrumb above the page shows the path; click a crumb to select it.
Change text, typography, layout, size, background, spacing, border, shadow and image settings in the panel. Double-click an element without child elements to edit its text in place (Enter commits, Esc cancels).
In a table, add or delete rows and columns from the Table section. Tables with merged cells are not changed.
Delete element (or the Delete key on the page) removes the selected element.
Ctrl+Z undoes, Ctrl+Shift+Z / Ctrl+Y redoes.
Ctrl+S saves. Only the changed parts of the file are rewritten; formatting, comments, line endings and encoding stay as they were.
Setting
Setting
Default
Effect
xyxu-html-editor.runScripts
true
Run the page's scripts in the visual editor. Scripts are never removed from the file.
Known limitations
With runScripts on, the page's own scripts run in the same origin as the editor and could drive its controls; they can never save the file. Turn runScripts off for pages you do not trust.
While editing text in place, web fonts from other hosts may show in a fallback font until the edit ends.
A page that navigates every time it loads cannot be edited with runScripts on.
Tables with merged cells (colspan / rowspan > 1) are not changed; tables whose col / colgroup has span > 1 allow row operations but not column operations.
Platforms: tested on Linux. Windows and macOS: to be decided by the user (U-2).
Styles are written to the element's style attribute; stylesheet rules are not edited.
A file whose encoding cannot be written back byte for byte opens read-only.
The undo history is not kept across a window reload; unsaved changes are.
License
MIT. The license text is in the LICENSE file shipped with the extension.
