Obsidian Stats logoObsidian Stats

HTML Viewer Plus

by lzq
5
4
3
2
1
New Plugin
Install Code

Description

This plugin has not been manually reviewed by Obsidian staff. 增强版 HTML 查看器：嵌入预览、全屏、缩放、暗色同步、搜索、MHTML 支持、热刷新

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
0
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

Github

HTML Viewer Plus

An Obsidian plugin for previewing and embedding HTML/MHTML files directly in your vault.

中文文档

Features

  • Embed preview — Render HTML inline with ![[file.html]]
  • Element targeting — ![[file.html#elementId]] shows only the specified element
  • Custom sizing — ![[file.html|400]] for width, ![[file.html|400x300]] for width × height
  • Fullscreen / Open externally — Fullscreen or open in system browser
  • Zoom — Ctrl + scroll to zoom, adjustable step
  • In-page search — Ctrl+F to search text within HTML, auto-switches tabs
  • Dark theme sync — Follows Obsidian dark mode with custom CSS support
  • Hot refresh — Auto-reload when HTML file changes
  • MHTML support — Open .mht/.mhtml web archives directly
  • Right-click menu — Right-click HTML to copy embed/link syntax
  • Scroll guard — Click to activate scrolling, prevents accidental scroll

Installation

Manual

  1. Download main.js, manifest.json, styles.css
  2. Create .obsidian/plugins/html-viewer-plus/ in your vault
  3. Copy the three files into that directory
  4. Restart Obsidian, go to Settings → Community plugins, enable HTML Viewer Plus

BRAT

Not yet on the community marketplace. Install via BRAT:

  1. Install the BRAT plugin
  2. BRAT Settings → Add Beta Plugin → enter kuaile1407/html-viewer-plus
  3. Enable the plugin

Usage

Embed in notes

![[demo.html]]              default width and aspect ratio
![[demo.html|600]]          width 600px
![[demo.html|600x400]]      600px × 400px
![[demo.html#chart]]         show only id="chart" element

Direct open

Click an HTML file in the file explorer to open it in a dedicated view with zoom, search, refresh, and open-externally controls.

Toolbar

Button Embed mode Direct open
⛶ Fullscreen —
＋ / － — Zoom in/out
↺ — Reset zoom
🔍 — Search
↻ — Refresh
↗ Open externally Open externally
→ Locate in file —

Right-click menu

Right-click on HTML content to see ancestor elements with IDs. Click to copy embed syntax to clipboard.

Settings

Option Default Description
Default width 100% Embed area default width
Aspect ratio 4/3 Supports 4/3, 16:9, 1.33
Show toolbar On Action buttons on embed view
Enable zoom On Zoom in direct open mode
Zoom step 0.1 Zoom increment per scroll
Enable search On Search in direct open mode
Sync dark theme On Auto-inject dark CSS
Custom dark CSS — Appended after default dark styles
Custom background Off Force HTML body background color
Hot refresh Off Auto-reload on file change
MHTML support On Support .mht/.mhtml files

Supported formats

  • HTML: .html .htm .shtml .xht .xhtml
  • MHTML: .mht .mhtml

Support the author

If this plugin helps you, consider buying me a coffee ☕

License

GPL-3.0

Sponsors