Web Visual Editor is a brand-new VSCode extension for live visual editing of HTML.

urin/vscode-web-visual-editor earned 400+ stars in several days.

In modern web applications, it's rare to directly handle HTML files on the frontend, and it's uncommon to use absolute or relative positioning for major elements, so the use cases for this extension are limited at present.

However, it could be somewhat useful in fields where web technologies have not yet fully penetrated (such as industrial equipment) when adopting web technologies in a simplified way. In cases like creating a component with Vue.js, the real-time preview might come in handy. It could also be useful for creating simple, non-application-based content like landing pages.

This extension is similar to microsoft/vscode-livepreview and it differs in the following points:

• The ability to synchronize code selection with visual selection in the preview.
• Since Web Visual Editor has minimal functionality, the codebase is very small, making future expansions easy.
• It is designed to reflect changes made in the preview back to the code, so enhancing the editing capabilities within the preview may be beneficial in the future. For example, you can copy, cut, paste and delete elements within preview at this moment.

There are several other similar extensions, but many of them often require processes outside of VSCode.