HTML Live Editor

English · 简体中文

An Obsidian plugin that lets you edit the text inside HTML blocks directly in Live Preview — just click the text and start typing.

✨ Features

• Click to edit — click any text inside an HTML block to open an editor
• Enter to save / Esc to cancel — familiar keyboard shortcuts
• Auto-cleanup — cursor leaving the source range restores the rendered view
• DOM ↔ source mapping — DOM node indexes align to source positions, supporting nested and repeated text
• Dark theme — adapts to Obsidian's native dark mode

🎯 Use case

When you embed complex HTML layouts in Markdown (flowcharts, cards, tables, …) and frequently tweak their text:

1. Open a document containing a <div>…</div> block
2. Click the text you want to change
3. Edit it in the popover
4. Enter to save, Esc to cancel

Example

The block below is rendered by the plugin in Obsidian as a clickable card:

Paste it into a Live Preview note and click the sentence to edit it.

⚙️ How it works

The plugin offers two complementary editing paths in Live Preview:

• Native HTML embed click-editing — instead of competing with Obsidian's native .cm-html-embed.cm-embed-block widget, a ViewPlugin listens for clicks during the capture phase. caretRangeFromPoint() + view.posAtCoords() map the click back to a Markdown source position, the popover edits it, and the result is written back via view.dispatch({ changes }).
• Widget inline editing — larger HTML blocks are rendered with Decoration.replace as an interactive widget; hovering reveals a toolbar, and clicking text inside it enters inline-edit mode.

All rendered HTML passes through Obsidian's built-in sanitizeHTMLToDom (DOMPurify-backed) before being inserted.

📋 Compatibility

• Obsidian: 1.5.0+
• Platform: desktop only (isDesktopOnly). Click-to-edit relies on caretRangeFromPoint, which is unreliable on mobile WebViews.
• Modes:
  • ✅ Live Preview (recommended)
  • Reading (read-only display)

🛠️ Install

From the Community Plugin Directory (once published)

After submission to the Obsidian Plugin Directory, search for HTML Live Editor under Settings → Community Plugins.

Manual install

1. Clone and build:

   git clone https://github.com/elijahchan2019/plugin-html_live_editor.git
   cd plugin-html_live_editor
   npm install
   npm run build
   

2. Copy manifest.json, main.js, and styles.css into your vault's .obsidian/plugins/html-live-editor/ directory
3. Restart Obsidian
4. Enable HTML Live Editor under Settings → Community Plugins

🚧 Known limitations

• Named entities: > / & / < edit correctly; named entities like © / — /   may cause source-position drift.
• Large blocks: HTML blocks > 5000 characters are not heavily optimized.
• Deep nesting: very deeply nested HTML (> 10 levels) may reduce mapping accuracy.

🐛 Issues

For bugs or feature requests, please open an Issue.

📄 License

MIT License

Made by Elijah