make-html-editable

Drop-in in-browser inline editing for any HTML page. Paste one self-contained snippet before </body> and your page gains: click-to-edit text, automatic local save, and one-click export to a clean HTML file. No build step, no dependencies, works offline.

It began as a Claude Code skill for turning generated HTML — slide decks, reports, artifacts — into pages you can tweak yourself, without going back to the model for every wording change.

Features

• Click to edit — toggle edit mode, then click any text element and type.
• Autosave — edits persist to localStorage; refresh without losing them.
• Export — download the current content as a standalone .html (still editable).
• Reset — clear local edits, restore the original.
• Zero dependencies — one <style> + <script>, ~4 KB, no network, no framework.
• Deck-safe — works with keyboard-navigated slide decks: while editing, arrow / space keys move the cursor instead of flipping slides (capture-phase key shielding).
• Print-clean — the toolbar hides itself when printing or exporting to PDF.

Quick start

Paste the entire contents of assets/editable-layer.html just before </body> in your page. That is the whole install. Make sure the page has <meta charset="utf-8">.

Open demo.html in a browser to try it immediately.

Use as a Claude Code skill

git clone https://github.com/odafeng/make-html-editable ~/.claude/skills/make-html-editable

Then tell Claude Code "make this HTML editable" (or 「讓這個 HTML 可編輯」) and it will inject the layer into your page.

What you see

A small floating toolbar, bottom-right:

• ✏️ 編輯 (Edit) — toggle edit mode; editable elements get a dashed outline, click to type.
• 💾 匯出 (Export) — download <title>.edited.html. The export keeps the layer, so the file opens as your latest content and can still be edited.
• ↺ 重設 (Reset) — clear local edits and restore the original.

Toolbar labels are Traditional Chinese; change the strings in the snippet for another language.

Editable scope

By default these elements are editable: h1–h6, p, li, td, th, blockquote, figcaption, dt, dd, plus anything carrying a data-editable attribute.

• Make one more element editable → add data-editable to it.
• Change the set globally → edit the SEL string in the script.

This version edits text content only — it does not add, remove, or restyle blocks, which keeps layouts intact.

How it works

• Marks matching elements contenteditable and stamps each with a stable id.
• Saves each element's innerHTML by id to localStorage on input; restores on load.
• Export clones the document, strips contenteditable and the toolbar, and downloads it.
• Key shielding: a capture-phase keydown / keyup / keypress listener calls stopPropagation() when the event target is contenteditable, so a host page's global shortcuts (for example a slide deck's arrow-key navigation) do not steal keystrokes while you type.

Limitations

• The storage key is path + title; moving the file or changing the title starts a fresh key.
• If the underlying HTML is regenerated with a very different structure, old localStorage edits may not line up — press Reset.
• The exported file includes the small editor layer. If you want a stripped, non-editable final file, remove that one <style> + <script> block.

License

MIT — see LICENSE.

---

繁體中文

把任意 HTML 變成「瀏覽器內就地編輯」的頁面:把 assets/editable-layer.html 整段貼到目標頁的 </body> 前即可,無需 build、零相依、離線可用。

點右下角 ✏️ 編輯 進編輯模式 → 點文字直接改 → 自動存到 localStorage(重整不遺失)→ 💾 匯出 下載成品 → ↺ 重設 還原。

預設可編輯:h1–h6, p, li, td, th, blockquote, figcaption, dt, dd 以及任何帶 data-editable 的元素;要更多就加 data-editable,或改 script 裡的 SEL。

對鍵盤翻頁的簡報 deck 也安全:編輯時方向鍵/空白鍵移動游標、打字,不會翻頁(capture 階段攔截,打進 contenteditable 的按鍵一律 stopPropagation)。

直接開 demo.html 就能試。