DWHTML

视觉化 HTML 编辑器 — 直接在 VS Code 中编辑 HTML，所见即所得。

使用方法

1. 在 VS Code 中打开 .html 或 .htm 文件
2. 右键 → DWHTML: Edit HTML visually
3. 点击页面中的任意元素即可选中
4. 在右侧面板中调整样式：
   • 修改文本内容
   • 调整字号、字重、颜色、对齐
   • 切换布局：block / flex / inline / none
   • 设置宽度、高度、透明度
   • 修改背景色、边距、内边距、圆角
   • 添加边框（宽度 / 颜色 / 样式）
   • 添加阴影（柔和 / 中等）
   • 图片元素的尺寸、裁切方式、圆角
   • 行高、字间距
5. 按 Cmd+S 保存，修改写回文件
6. 用 ⬆ ⬇ 按钮在父级和子级元素间导航

特性

• 纯手动保存 — 不会自动改你的源码，按需保存
• 直接数字输入 — 所有数值用键盘输入，无需加减按钮
• 暗色面板 — 可左右吸附、可拖拽
• 双语言 — 自动匹配系统语言（中文 / English）
• 零依赖 — 仅 3 个文件，不影响项目
• 撤销 / 重做 — Cmd+Z

DWHTML

Visual HTML editor — edit HTML directly in VS Code, WYSIWYG.

Usage

1. Open a .html or .htm file in VS Code
2. Right-click → DWHTML: Edit HTML visually
3. Click any element on the page to select it
4. Adjust styles in the right panel:
   • Edit text content
   • Adjust font size, weight, color, alignment
   • Switch layout: block / flex / inline / none
   • Set width, height, opacity
   • Modify background color, margin, padding, border radius
   • Add borders (width / color / style)
   • Add shadow (soft / medium)
   • Image size, object-fit, border radius
   • Line height, letter spacing
5. Press Cmd+S to save changes back to the file
6. Use ⬆ ⬇ buttons to navigate between parent and child elements

Features

• Manual save only — never auto-modifies your source code
• Direct number input — all numeric values typed directly, no +/- buttons
• Dark panel — dockable left/right, draggable
• Bilingual — auto-matches system language (中文 / English)
• Zero dependencies — only 3 files, no impact on your project
• Undo / Redo — Cmd+Z