HTML Visual Editor

approved

by suntinglu777

Edit HTML files visually in Obsidian and save directly back to the selected vault file. - This plugin has not been manually reviewed by Obsidian staff.

281 downloadsUpdated 1mo agoMIT

HTML Visual Editor

HTML Visual Editor lets you open .html and .htm files in Obsidian, edit them visually, and save changes directly back to the same vault file.

Features

  • Open HTML files from the file menu or command palette.
  • Edit page elements with the visual editor toolbar.
  • Drag, resize, select, duplicate, delete, and style elements.
  • Insert text, images, tables, page layouts, canvas elements, and chart typography blocks from the adapted editor tools.
  • Save with the Obsidian toolbar button, the in-page Save button, or Ctrl+S / Cmd+S.
  • Save directly overwrites the currently opened vault file. No system file picker or "save as" path selection is used.
  • Relative image and stylesheet links are temporarily mapped for preview and restored when saved.
  • Pasted base64 images can be saved into an assets folder next to the edited HTML file when the editor requests asset persistence.

Usage

  1. Install and enable the plugin.
  2. Right-click an .html or .htm file and choose Open in HTML Visual Editor.
  3. Edit the file in the visual editor.
  4. Click Save or press Ctrl+S / Cmd+S.

Notes

  • The plugin edits local vault files only.
  • Save operations overwrite the current file, so keep normal vault backups or version control for important documents.
  • Browser-extension popup, tab injection, and system file picker flows are intentionally removed for Obsidian.
  • Some advanced browser-only features depend on Chromium APIs, such as the EyeDropper API. Availability may vary by Obsidian platform.

Privacy

The plugin does not upload HTML content, images, or vault data. Editing happens inside the local Obsidian app, and saved content is written through Obsidian's vault API.

License

MIT. This plugin includes code adapted from 42 HTML Visual Editor, also under the MIT license.

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.