Visual HTML Editor

Click any text in your HTML file and just type. Your source stays clean — only the text you changed gets updated.

Language: English · 한국어 · 日本語

English

Edit .html files visually in VS Code. Click a piece of text, type your change, and the source file is updated in place — without touching your formatting, comments, attribute order, or quote style.

Why this extension

Most "WYSIWYG" tools rewrite your HTML and destroy hand-crafted formatting. This one performs surgical edits: it parses the HTML once, finds the exact byte range of the text you edited, and replaces only that range. Everything else stays byte-for-byte identical.

Usage

1. Right-click any .html file in the Explorer
2. Choose Open with Visual HTML Editor
3. Click on text and start typing
4. Save with Cmd/Ctrl + S (or let auto-save handle it — see Settings)

To delete an entire block (paragraph, heading, list item, etc.) hover over its dashed outline and click the × button that appears at the top-right corner.

To see exactly how the file will render in a real browser, right-click the file and choose Preview in Browser.

What gets preserved

• Indentation and whitespace
• HTML comments
• Attribute order and quote style (" vs ')
• Self-closing tag style (<br> vs <br/>)
• Anything you didn't explicitly edit

Settings

Why does the preview look different from a real browser?

The editor runs your HTML inside VS Code's webview sandbox with a strict Content Security Policy. By default, scripts in your HTML do not execute, so:

• JS-driven tabs, accordions, charts won't react
• Mermaid diagrams stay as raw text
• KaTeX / MathJax math doesn't render
• External fetch / WebSocket calls are blocked

You have two options:

1. Use Preview in Browser (right-click) for an accurate render.
2. Enable htmlWysiwyg.allowScripts if the file is trusted.

Current limits (Phase 1)

• Text edit + block delete only: No tag add or reorder yet
• <script>, <style>, <noscript>, <template> contents are not editable
• Very large HTML files (>1MB) may feel slow per edit
• Page CSS applies to the whole webview surface (usually fine, occasional chrome leak)
• <a href> clicks are blocked inside the editor (to protect your editing flow)

How it works (technical)

• HTML is parsed with parse5 using sourceCodeLocationInfo: true
• Every editable #text node is indexed by its child-index path (NodePath)
• Webview renders body HTML via #root.innerHTML, with editable parents marked contenteditable="plaintext-only"
• User input → 300ms debounce → diff sent as {path, newValue} per changed node
• Extension performs WorkspaceEdit.replace against each node's sourceCodeLocation.{startOffset, endOffset} only
• External file changes that don't alter structure update text nodes in place — preserving scroll, focus, and interactive state (tab radio buttons, <details> open state)

한국어

VS Code에서 .html 파일을 시각적으로 편집하세요. 텍스트를 클릭해서 바꾸기만 하면 원본 파일이 즉시 갱신되며, 포맷팅·주석·속성 순서·따옴표 스타일은 한 글자도 건드리지 않습니다.

이 확장이 필요한 이유

대부분의 WYSIWYG 도구는 HTML을 다시 써내면서 손수 다듬은 포맷을 망가뜨립니다. 이 확장은 수술적 편집(surgical edit) 방식으로, 파싱한 AST에서 사용자가 편집한 텍스트의 정확한 바이트 범위만 골라 교체합니다. 그 외 영역은 단 한 바이트도 변하지 않습니다.

사용법

1. Explorer에서 .html 파일 우클릭
2. Open with Visual HTML Editor 선택
3. 텍스트 클릭 → 수정
4. Cmd/Ctrl + S로 저장 (또는 자동 저장 — 아래 설정 참고)

블럭(문단·헤더·리스트 항목 등) 전체를 지우려면, 점선으로 강조된 블럭 위에 마우스를 올리고 우상단에 나타나는 × 버튼을 누르세요.

실제 브라우저에서 정확히 어떻게 렌더링되는지 확인하려면 파일을 우클릭한 뒤 Preview in Browser 를 선택합니다.

보존되는 것

• 들여쓰기와 공백
• HTML 주석
• 속성 순서, 따옴표 스타일 (" vs ')
• self-closing 태그 스타일 (<br> vs <br/>)
• 명시적으로 편집하지 않은 모든 것

설정

미리보기가 실제 브라우저와 다르게 보이는 이유

에디터는 VS Code webview 샌드박스 안에서 HTML을 표시하며, 강력한 Content Security Policy를 적용합니다. 기본 설정에서는 사용자 HTML 안의 스크립트가 실행되지 않으므로:

• JS 기반 탭/아코디언/차트가 작동하지 않음
• Mermaid 다이어그램이 원본 텍스트로 남음
• KaTeX / MathJax 수식이 렌더링되지 않음
• 외부 fetch / WebSocket 요청 차단

두 가지 우회 방법:

1. 우클릭 → Preview in Browser 로 실제 브라우저에서 확인
2. 신뢰할 수 있는 파일이라면 htmlWysiwyg.allowScripts 를 켜기

현재 한계 (Phase 1)

• 텍스트 편집 + 블럭 삭제만 지원: 태그 추가/순서 변경은 미지원
• <script>, <style>, <noscript>, <template> 내부 텍스트는 비편집
• 매우 큰 HTML(>1MB)에서는 편집마다 약간 느릴 수 있음
• 페이지의 CSS가 webview 본문 전체에 적용 (보통 OK, 드물게 chrome leak)
• 편집 중 실수 방지를 위해 <a href> 클릭은 차단

동작 원리

• parse5.parse(source, { sourceCodeLocationInfo: true })로 AST 생성
• 편집 가능한 모든 #text 노드를 자식 인덱스 경로(NodePath)로 색인
• Webview는 본문 HTML을 #root.innerHTML로 렌더, 편집 가능 노드의 부모에 contenteditable="plaintext-only"
• 사용자 입력 → 300ms debounce → 변경된 텍스트 노드만 {path, newValue} diff로 전송
• Extension은 각 노드의 sourceCodeLocation.{startOffset, endOffset} 범위에만 WorkspaceEdit.replace 수행
• 외부에서 구조가 같은 변경이 일어나면 텍스트 노드 값만 바꿔서 스크롤·포커스·탭 라디오 등 인터랙티브 상태를 보존

日本語

VS Code 上で .html ファイルをビジュアル編集できます。テキストをクリックして入力するだけで、ソースファイルがその場で更新されます。インデント・コメント・属性順・引用符スタイルは一文字も変わりません。

この拡張機能の特徴

多くの WYSIWYG ツールは HTML を再生成し、手書きのフォーマットを壊してしまいます。この拡張は サージカルエディット（surgical edit） 方式を採用し、パース済み AST から編集されたテキストの正確なバイト範囲のみを置換します。それ以外の部分は 1 バイトも変更されません。

使い方

1. エクスプローラーで .html ファイルを右クリック
2. Open with Visual HTML Editor を選択
3. テキストをクリックして編集
4. Cmd/Ctrl + S で保存（または自動保存 — 設定セクション参照）

段落・見出し・リスト項目などブロック全体を削除したい場合は、点線で囲まれたブロックにマウスを乗せ、右上に表示される × ボタンをクリックしてください。

実際のブラウザでの表示を確認するには、ファイルを右クリックして Preview in Browser を選びます。

保持されるもの

• インデントと空白
• HTML コメント
• 属性の順序と引用符スタイル (" vs ')
• 自己終了タグスタイル (<br> vs <br/>)
• 明示的に編集していないすべて

設定

プレビューが実際のブラウザと違って見える理由

エディタは VS Code の webview サンドボックス内でユーザーの HTML を表示し、厳密な Content Security Policy を適用します。既定では HTML 内のスクリプトが実行されません。そのため：

• JS によるタブ／アコーディオン／チャートは動作しない
• Mermaid ダイアグラムは生テキストのまま
• KaTeX / MathJax の数式は描画されない
• 外部 fetch / WebSocket 通信はブロックされる

回避策は 2 つ：

1. 右クリック → Preview in Browser で実ブラウザを開く
2. 信頼できるファイルなら htmlWysiwyg.allowScripts を有効化

現在の制限 (Phase 1)

• テキスト編集 + ブロック削除のみ対応：タグの追加や並べ替えは未対応
• <script>, <style>, <noscript>, <template> 内のテキストは編集不可
• 非常に大きな HTML（>1MB）では編集ごとに重く感じることがあります
• ページの CSS が webview 全体に適用されます（通常は問題なし、まれに chrome leak）
• 編集中の誤操作防止のため <a href> クリックはブロックされます

動作原理

• parse5.parse(source, { sourceCodeLocationInfo: true }) で AST を生成
• 編集可能なすべての #text ノードを子インデックスパス（NodePath）でインデックス化
• Webview は本文 HTML を #root.innerHTML でレンダリングし、編集可能ノードの親に contenteditable="plaintext-only" を付与
• ユーザー入力 → 300ms debounce → 変更されたテキストノードのみ {path, newValue} diff で送信
• Extension は各ノードの sourceCodeLocation.{startOffset, endOffset} 範囲のみ WorkspaceEdit.replace を実行
• 構造が同じ外部変更ではテキスト値のみを置換し、スクロール・フォーカス・タブ選択状態などを保持

License

MIT © Seajung