hotedit

hotedit

ブラウザーで任意のHTMLファイルを編集できます。テキスト、スタイル、レイアウト、グラフを変更し、変更をファイルに直接保存できます。 AI アシスタントが作成したHTMLレポート向けに開発されました。

▶ ナレーション付き95秒ツアーを見る（MP4、音声あり） · または、自分で試してみましょう：npx hotedit demo

AI アシスタントは多くのHTMLを作成します。レポート、ダッシュボード、要約などです。見栄えはよいものの、誤字の修正、グラフのタイトル変更、セクションの移動には、生成されたマークアップを何千行もたどるか、もう一度AIに頼む必要があります。hoteditはページをブラウザーで開くので、表示されているものをクリックして変更できます。変更したバイトだけが書き換えられるため、ファイルはすっきり保たれ、差分を確認しやすく、あなたのもののままです。

AIの生成内容は変わりません。 AIには、いつもどおりの品質で、同じグラフ、デザイン、深さを備えたレポートをそのまま作成させてください。hoteditが追加するのは、あとから編集する機能だけです。内容を簡略化したり再生成したりすることはなく、ファイルに何も追加されません。

クイックスタート（30秒）

Node.js 18+が必要です。次に、以下を実行します。

npx hotedit report.html

ブラウザーでページが開きます。✎ Editをクリックするか、⌥E／Alt+Eを押してから、任意のテキストをクリックして入力します。 変更はreport.htmlに随時保存され、⌘Z / Ctrl+Zで元に戻せます。右上の**✓ Done**（常に同じ場所にあります）をクリックすると、未保存の変更をすべて保存して編集を終了します。 ボタンにカーソルを合わせるとショートカットを確認できます。すべて**⌥ / Alt + キー**です（⌥Eで編集、⌥AでAIに依頼、⌥Sでスタイル、⌥Iで追加、⌥Dで複製、⌥⌫で削除、⌥↑/↓で移動）。そのため通常のキー操作で誤って何かが起動することはなく、入力にも影響しません。

まず試してみたい場合は、サンプルレポート（グラフ、数式、図表）を一時的なコピーで開きます。

npx hotedit demo

ファイルが分からない場合は、ファイルを指定せずに実行し、一覧から選択します。

npx hotedit          # lists the HTML files in this folder

永続的にインストールして、hoteditと入力するだけで使えるようにするには、以下を実行します。

npm install -g hotedit
hotedit report.html

できること

	方法
テキストを編集する	クリックして入力します。クリックした位置にカーソルが置かれます。次のブロックをクリックすると保存して次に進みます。Enter で保存、Esc でキャンセル、⌘B / ⌘I で太字と斜体を設定できます。リストでは、項目の末尾で Enter を押すと新しい項目が始まります。
項目を追加する	ブロックを選択して ＋ をクリックします。段落、見出し、リストまたはリスト項目、ボックス、引用、表、コード、区切り線、画像、グラフ、Mermaid 図、または独自の HTML を追加できます。上、下、または内側を選びます。
項目を移動する	⠿ をドラッグすると、ブロックをどこへでも移動できます。リスト項目を別のリストへ移動したり、段落をボックスに移動したりできます。または ⋯ → 上へ移動 / 下へ移動（Alt+↑ / Alt+↓）を使います。
スタイル	Aa：サイズ、太さ、色、配置、フォント、間隔、背景、角、枠線を設定できます。
グラフ	Plotly、Chart.js、Vega-Lite、または Mermaid のグラフをクリックします。タイルから種類（棒、線、面、点、円、ドーナツなど）を選ぶと、すぐに再描画されます。スタイルには、タイトル、軸、凡例、系列の切り替え、メニュー、カラーピッカーがあります。データは編集可能な表で、行を追加できます。コードには仕様全体が表示されます。すべてリアルタイムでプレビューされ、適用で保存されます。
画像とリンク	🖼 で画像を置き換え、🔗 でリンクを変更します。
その他すべて	⋯：複製、非表示、削除、または選択したブロックの HTML を編集。名前チップ（例：段落 ▴）をクリックすると、その周囲のブロックが選択されます。
AI にリアルタイムで依頼する	ブロックの ✨（ページ全体の場合は ✨ AI）をクリックし、変更内容を入力すると、AI がページをその場で編集する様子を確認できます。再読み込みは不要です。先にブロックを選択すると、そのブロックだけが変更されます。変更が反映されるたびに光って表示され、AI による変更を元に戻すですべて元に戻せます。チャット形式で、下部のボックスから追加の質問をすると、どの AI とモデルが回答したかが表示されます。

KaTeX の数式、Mermaid の出力、JavaScript で作成された表など、ページ独自のスクリプトによって生成されるものは、レンダリング済みの出力として保存されません。hotedit はそのソースを開きます。

AI エージェントと連携する

✨ 組み込み機能：依頼して、変更を確認する

✨ をクリックして、希望する内容（「もっと短くして」「棒をオレンジ色にして」「3 月の行を追加して」など）を入力し、実行を押します。AI はページを読み取り、ファイルに小さな編集を加えます。それぞれの変更は、再読み込みなしですぐにブラウザーに反映されます。⚙ から、すでに利用している AI に一度接続します。

• Claude Code：お使いの Claude プランを利用します。Claude Code をインストールし、claude を一度実行してログインします。
• Codex：お使いの ChatGPT プランを利用します。npm install -g @openai/codex を実行し、codex を一度実行してログインします。
• Anthropic API キー：キーを貼り付けます（~/.htmledit/config.json 内にコンピューター上でのみ保存されます）。または、ANTHROPIC_API_KEY を設定します。別のモデルを選択しない限り、claude-opus-5-5 を使用します。
• その他のエージェント：hotedit の MCP ツールを利用できる任意のエージェント CLI を使えます。たとえば、gemini mcp add hotedit npx -y hotedit mcp の実行後に gemini -y と入力します。リクエストは最後の引数として追加されます（または {prompt} を置いた位置に追加されます）。

変更するのは 1 つだけです。 ブロックを選択すると、パネルに 変更対象のみ：… と表示され、AI はそのブロックだけを編集できます（グラフの場合は、描画するコードも対象です）。それ以外の変更は拒否されます。別のブロックをクリックして対象を切り替えるか、ページ全体を選択して制限を解除します。変更はすべて通常の取り消し操作で元に戻せます。

独自のエージェントをリアルタイムで連携する（MCP）

MCP に対応する任意のコーディングエージェント（Claude Code、Codex、Cursor、Gemini CLI など）に hotedit のツールを提供すると、ブラウザーでレポートを開き、変更する様子を確認できます。

claude mcp add hotedit -- npx -y hotedit mcp
codex mcp add hotedit -- npx -y hotedit mcp

ツール：open（hotedit とブラウザーでファイルを開く）、outline、read、edit（保存してリアルタイムに表示）。エージェントは、hotedit ですでに開いているページも見つけます。

スキル：エージェントが作成したレポートが hotedit で自動的に開きます

一度インストールするだけです。エージェントは編集しやすいレポート（HTML 内のテキスト、インラインのチャート仕様）を作成するようになり、作成した HTML レポートはすべてブラウザーで hotedit で自動的に開き、すぐに編集できます。エージェントによるその後の編集も、ページにリアルタイムで反映されます。

Claude Code プラグインとして（スキル、自動オープンフック、MCP ツールをまとめて導入）：

/plugin marketplace add Thewhey-Brian/hotedit
/plugin install hotedit@hotedit

または、コマンドラインから：

npx hotedit skill install            # Claude Code, all projects (~/.claude)
npx hotedit skill install --project  # Claude Code, this project only (./.claude)
npx hotedit skill install --codex    # Codex (~/.codex)

これにより、スキルと、エージェントがファイルを書き込んだ後に実行される小さなフックが追加されます。HTML ではないファイル、アプリやウェブサイトに属するページ（src/、public/、node_modules/ 以下のページや、テンプレートタグを含むページなど）、すでに開いているページは対象外です。ページはバックグラウンドで配信され、しばらく閉じた状態にするとサーバーは自動的に停止します。他の設定やフックはそのまま維持されます。

• スキルのみを使い、自動オープンを無効にするには、--no-auto を追加します。1 回のセッションで一時停止するには、HOTEDIT_AUTO=0 を設定します。
• アンインストールするには、npx hotedit skill uninstall を実行します（該当する場合は --codex または --project を追加します）。
• Codex では、新しいフックを信頼するかどうかを一度確認されます。
• その他のエージェントでは、npx hotedit skill print を実行して、出力を AGENTS.md に貼り付けます。レポートは npx -y hotedit open report.html --background で開きます。このコマンドはすぐに終了します。

このスキルが調整するのは、HTML の書き方だけです。つまり、マークアップ内のテキストとインラインのチャート仕様です。編集しやすくするために内容を簡略化したり、省略したりしないようエージェントに指示します。

仕組み

report.html ──parse (keeps source positions)──► served copy with element ids + editor overlay
     ▲                                                              │
     └──────── small byte patch ◄── map your edit back to source ◄──┘

• ファイルが「書き換え」られることはありません。 エディターと要素 ID が存在するのは、ローカルサーバーがブラウザーに送信するコピー内だけです。編集内容はそれぞれ、元のバイト列に対する最小限のパッチになります。· などのエンティティ、引用符のスタイル、インデント、他の箇所のコメントはそのまま保持されます。
• チャートはソース内で編集されます。 ページの <script> にあるチャート仕様のリテラルを値ごとにパッチし、引用符やキーのスタイルも維持します。
• デフォルトで安全です。
  • セッション開始時にバックアップが作成されます（~/.htmledit/backups/）。
  • すべての変更について、元に戻す操作とやり直す操作を利用できます。
  • エージェントが編集するなどしてディスク上のファイルに変更があると、ページがその場で更新されます。
  • UTF-8 以外のファイルは、破損を防ぐため編集できません。
  • サーバーは 127.0.0.1 でのみ待ち受け、セッションごとのトークンを検証します。

FAQ

どの HTML ファイルでも使えますか？ はい。手書き、AI 生成、Jupyter、plotly.py、R Markdown、Quarto からエクスポートしたものなど、ローカルの .html ファイルならどれでも使えます。KaTeX、Mermaid、インライン SVG チャート、JavaScript で構築されたダッシュボード、base64 画像、意図的に風変わりなマークアップを含むページでもテスト済みです。

ファイルが壊れることはありませんか？ 壊れないように設計されています。すべてのテストページを開き、編集可能な要素はすべて変更せずに保存し、ファイルのバイト列が完全に一致することを確認しています。実際に編集した場合は、期待どおりの差分のみが発生します。

インターネット接続が必要ですか？ いいえ。hotedit はローカルで動作します。多くの AI レポートが KaTeX や Plotly を読み込むように、ページが CDN から独自のライブラリを読み込む場合はあります。

どのブラウザーに対応していますか？ 最新のブラウザーであればどれでも使えます。自動テストは Chromium で実行されます。

スクリプトが生成するコンテンツも編集できますか？ スクリプトブロックの ⋯ → Edit HTML を使うか、✨ を使って AI に依頼してください。

制限事項

• 一度に扱える HTML ファイルは 1 つです。外部の .css ファイルと .js ファイルは編集されず、スタイルはインラインの style 属性として記述されます。
• チャート仕様は、インラインの <script> 内にリテラルとして記述されている必要があります（直接記述するか、const spec = {...} の形式で記述します）。実行時に計算される仕様や別ファイルから読み込まれる仕様は、ソースとして開きます。
• 元に戻す操作の履歴はセッション中のみ保持されます。バックアップは保持されます。

開発

git clone https://github.com/Thewhey-Brian/hotedit && cd hotedit
npm install
npx playwright install chromium   # browser for the end-to-end tests
npm test                          # unit, CLI and real-browser tests (~3 min)
node demo/audio.mjs               # tour narration, sound effects, music (ElevenLabs key)
node demo/record.js               # re-record the tour video + GIF (needs ffmpeg)

CONTRIBUTING.md と docs/ARCHITECTURE.md を参照してください。

参加する

hotedit はまだ生まれたばかりで、貢献を歓迎しています。取り組みやすいものをいくつかご紹介します。

• AI で生成したレポートで試し、編集できないものがあれば issue を作成してください。サンプルファイルがあると特に助かります。
• 初めての方におすすめの issueに取り組んでみてください。
• ディスカッションでアイデアを共有したり、作成したものを紹介したりしてください。

ロードマップ： 対応するチャートライブラリの拡充（ECharts、Observable Plot、Bokeh）、外部 CSS の編集、 VS Code 拡張機能、さらに多くのエージェント（Gemini CLI、Cursor、OpenCode）向けのガイドの追加。

関連ツール

• html-visual-editorには使いやすい微調整用 UI がありますが、新しいファイルをダウンロードする仕様で、チャート編集には対応していません。
• Lavishには優れたエージェントのフィードバックループがありますが、自分でページを編集することはできません。
• GrapesJS、VvvebJs、Pinegrow は、ドキュメントを再シリアライズするフル機能のページビルダーです。
• document.designModeは、スクリプトによってレンダリングされた内容をそのまま保存します。

ライセンス

MIT