インストール不要。単一の HTML ファイルだけで動く WYSIWYG HTML エディタ。
ブラウザでダブルクリックして開くだけ。要素をクリックして編集し、Ctrl+S で元ファイルに直接保存できます。
ビルドもサーバーも依存パッケージも一切なし。
🚀 ライブデモ ・ ⌨️ ショートカット ・ ❓ FAQ
🇰🇷 한국어 ・ 🇯🇵 日本語 ・ 🇺🇸 English（UI 内で切替可能）
- 🗂 単一ファイル・ゼロ依存 —
index.html1 つだけ。npm installもbuildもサーバーも不要。ダブルクリックで起動。 - 🖱 WYSIWYG ビジュアル編集 — 要素を クリックで選択、ダブルクリックでテキスト編集、ドラッグで移動。
- 🔀 3 つの表示モード — 編集（ビジュアル）／分割／ソースを自由に切り替え。ソースを直接書いても即反映。
- 💾 元ファイルに直接保存 — File System Access API 対応ブラウザなら
Ctrl+Sで開いたファイルへ上書き保存（非対応環境は自動でダウンロード方式にフォールバック）。 - 🎛 インスペクター — 文字サイズ・色・背景・配置・余白・幅などのクイックスタイルと、属性（attribute）の追加／編集を GUI で。
- ➕ 豊富な挿入要素 — 見出し・段落・箇条書き／番号付きリスト・引用・コードブロック・表・画像・リンク・ボタン・コンテナ・区切り線。
- 📐 高機能なテーブル編集 — 行／列の追加・削除に加え、セルの結合・分割（colspan / rowspan 対応）。
- 🧩 複数選択の一括編集 —
Shift / Ctrl + クリックで複数要素を選び、スタイル・削除・移動をまとめて適用。 - 🖼 画像のドラッグ＆ドロップ — 画像ファイルを放り込むと Base64 で HTML に直接埋め込み。外部ファイル不要で 1 枚に完結。
- ⚡ Bake（ベイク） — スクリプトを含む動的な HTML を「一度だけ実行 → 結果を固める」ことで、静的ドキュメントとして編集可能に。
<canvas>は PNG として埋め込み。Ctrl+Zで元に戻せます。 - 📊 データパネル —
application/jsonブロック（チャートのデータ等）を 表として編集。ネストしたデータへのドリルダウンに対応し、✓ 反映 + 再描画で画面へ反映。 - ↩️ 100 段階の Undo / Redo & 検索・置換 —
Ctrl+Z / Ctrl+Y、Ctrl+Hでドキュメント全体を一括置換。 - 🌐 多言語 UI（i18n） — 韓国語・日本語・英語。選択はブラウザに保存されます。
導入方法は 3 通り。お好みでどうぞ。
index.html をダウンロードして、ブラウザでダブルクリックするだけ。以上です。
GitHub Pages にホストすればインストール不要で利用できます。
git clone https://github.com/dntjr2811/html-studio.git
cd html-studio
# index.html をブラウザで開くだけ- 上部の 「開く」（
Ctrl+O） で既存の HTML ファイルを読み込む、または 「新規」 から作成。 - キャンバス上で要素を クリックして選択 → 右側のインスペクターでスタイルや属性を編集。
- ダブルクリック でテキストを直接編集、ドラッグ で移動。
- 「保存」（
Ctrl+S） で元のファイルへ直接書き戻し。
| ショートカット | 動作 |
|---|---|
Ctrl+O / Ctrl+S / Ctrl+Shift+S |
開く / 保存 / 名前を付けて保存 |
Ctrl+Z / Ctrl+Y |
元に戻す / やり直し（100 段階） |
Ctrl+H |
検索 / 置換 |
Shift / Ctrl + クリック |
複数選択（スタイル・削除・移動を一括適用） |
Ctrl+C / V / X |
コピー / 貼り付け / 切り取り（Ctrl+Shift+V で要素の中に貼り付け） |
| 矢印キー（要素選択中） | 1px 移動 ・ Shift=10px ・ Ctrl=サイズ変更 |
Del / Ctrl+D |
選択要素の削除 / 複製 |
Alt + ↑ / ↓ |
要素を上下に移動 |
Tab（表の最終セル） |
新しい行を自動追加 |
| ダブルクリック / ドラッグ | テキスト編集 / 要素の移動 |
Esc |
選択解除 / 編集終了 |
- 推奨ブラウザ: Google Chrome / Microsoft Edge 「元ファイルへの直接保存」は File System Access API を利用しています。
- Firefox / Safari など未対応のブラウザでは、保存は自動的に ダウンロード方式 に切り替わります（編集機能はそのまま使えます）。
- すべてブラウザ内で完結するため、ファイルがサーバーに送信されることはありません。オフラインでも動作します。
- 配布が簡単 — 1 ファイルを渡すだけ。受け取った人もダブルクリックで即利用。
- 依存ゼロ・将来も壊れにくい — フレームワークやビルドツールに依存しないため、数年後でもそのまま動く。
- オフライン & プライベート — 通信なし。社内ドキュメントや機微なファイルも安心して編集可能。
- 改造しやすい — すべてが 1 ファイルに収まっているので、中身を読んで自分好みにカスタマイズしやすい。
技術スタックは Vanilla JavaScript + HTML + CSS のみ。フレームワークは使っていません。
Q. データはどこかに送信されますか？ A. いいえ。すべての処理はブラウザ内で完結し、外部送信は行いません。
Q. 「Bake（ベイク）」とは何ですか？
A. スクリプトを含む動的な HTML はキャンバス上では実行されず空白に見えることがあります。Bake はスクリプトを一度だけ実行してその結果を静的な HTML として固定し、そのまま編集できるようにする機能です。Ctrl+Z で取り消せます。
Q. 保存ボタンを押しても元ファイルが更新されません。 A. お使いのブラウザが File System Access API に未対応の可能性があります。Chrome または Edge をお試しください（未対応時はダウンロード方式で保存されます）。
バグ報告・機能提案・プルリクエスト歓迎です。Issue や PR からお気軽にどうぞ。 役に立ったら ⭐ スターをいただけると励みになります！