markItDown
📱 A React app to preview and edit Markdown✍. You can also export it as HTML.
JavaScript★ 51
vscode-web-visual-editor
Edit HTML files visually.
urinTypeScript★ 679⑂ 19 forksMITupdated 1 week ago
visit the demo
git clone https://github.com/urin/vscode-web-visual-editor.giturin/vscode-web-visual-editorREADME.mdfork it — it’s yours
Web Visual Editor 
Edit HTML files visually in real-time.
✨ Features
- 🖼️ Visual Editing: Edit HTML elements visually within the WebView.
- ⏱️ Real-Time Preview: See changes reflected instantly as you edit. Edits in the source editor are reflected on every keystroke. Edits in the WebView are written back to the source instantly.
- 🧩 Integrated with Visual Studio Code: No additional processes and windows and well-integrated with VSCode theme.
- 🖱️ Element Selection: Select HTML elements with ease. Visual selections are synchronized with text selections on editor. Vice versa.
- ✂️ Copy, Cut and Paste: Copy or cut elements, paste text or HTML into selected element.
- 🗑️ Delete: Remove selected elements from the source.
- ↩️ Undo / Redo: All edits made via the WebView are undoable and redoable.
- 🔍 Zoom in and out: Zoom in and out the page.
- ↕️ Move Elements: Drag elements to rearrange their position.
- 🔗 Live resource updates: CSS, images, and other files referenced by relative path are tracked. The WebView refreshes automatically when any of them is saved.
📐 Specification
⚙️ Settings (settings.json)
webVisualEditor.enableMovingElements
Enable drag-to-move and keyboard nudge for positioned elements. Default: false.
Tip
When enableMovingElements is enabled, moving an element rewrites its tag using VSCode's HTML formatting. To avoid inconsistent indentation, format the entire document before starting visual editing (Shift+Alt+F).
webVisualEditor.allowScript
Allow <script> tags and on* event attributes to run inside the WebView. Default: false.
webVisualEditor.rootPath
Root directory for resolving root-relative paths (e.g. /styles/main.css). Specified as a path relative to the workspace root. Must be inside the workspace. Defaults to the workspace root.
Note
Absolute paths are not supported. Since both absolute paths and root-relative paths begin with / on Unix-like systems, they cannot be distinguished. Paths starting with / are always interpreted as root-relative.
webVisualEditor.globalScripts
List of scripts to inject into all HTML pages in the preview. Each entry is either a URL or a local path.
Note
globalScripts takes effect only when allowScript is true.
// settings.json
{
"webVisualEditor.allowScript": true,
"webVisualEditor.globalScripts": [
"https://cdn.tailwindcss.com", // CDN URL
"/scripts/inject.js" // root-relative path
]
}
Tip
Root-relative paths in globalScripts are resolved using rootPath.
Local script files are tracked: saving them automatically refreshes the preview.
🖱️ Multi-selection
Ctrl+Clickadds or removes an element from the current selection.- Selections made in the source editor (including multiple ranges) are also reflected in the WebView.
↕️ Movable element conditions (requires enableMovingElements)
An element is draggable when all of the following are true:
positionis notstaticorstickyleft/rightare not both set simultaneously (same fortop/bottom)- Any explicitly set position value uses
pxunits — other units (%,em,rem, etc.) make the element non-movable
✂️ Copy / Cut / Paste
- Copy / Cut: copies the source text of the selected elements to the clipboard — the same range that is highlighted in the source editor. Cut also removes the elements from the source.
- Paste: inserts clipboard content just before the closing tag of the last selected element (or
<body>if nothing is selected). If the clipboard contains valid HTML it is inserted as-is; plain text is HTML-escaped first. The inserted range is then reformatted by VSCode's HTML formatter.
🔀 Alternatives
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.
📜 License
💛 Sponsor
Empower my motivation brewing and accelerate development by buying me a coffee!
more like this