HTML Visual Editor Injector

Problem

Single-file HTML reports, proposals, and research pages often need repeated edits to client names, wording, fonts, and colors. Asking non-technical users to modify markup directly is brittle and can easily break layout or styling. This skill injects a lightweight visual editor into the static page so changes can be made directly in the browser.

How It Works

• Injection: place editable-inject.js in the same directory as the HTML file and add one script reference.
• Editing: uses contenteditable for click-to-edit text, Cmd/Ctrl+E to enter or exit edit mode, Cmd/Ctrl+S to save to localStorage, Esc to discard changes, and up to 10 undo/redo steps.
• Formatting: includes find/global replace, separate Latin and CJK font controls, selected-range color picking, style reset, initial-state restore, and export of a clean final HTML file without editor code.
• Persistence: restores drafts by data-edit fields rather than replacing the entire body.

Boundaries

Use it for customer-facing single-file proposals, reports, and research pages. Avoid engineering products that use package.json, frameworks, routing, or state management. Known limitations include unreliable font styling across multiple contenteditable blocks, so format paragraph by paragraph; keep data-edit values unique and preserve the intended save, exit, and cancel semantics.