Vault HTML Preview
chengmiaofan1 downloadsPreview local HTML files from your vault in a dedicated view, styles and scripts included.
- Overview
- Scorecard
- Updates2
Preview local .html files inside Obsidian — styles and scripts included — without leaving the app or opening a browser.
Why
HTML files in a vault are normally treated as plain text. This plugin registers a real view for .html / .htm, so clicking a file in the file explorer renders it in place.
Features
- Renders
.html/.htmin a dedicated view - Scripts and styles run, so self-contained pages (forms, dashboards, reports) work as written
- Injects
<base href>so relative images / CSS / JS sitting next to the file keep resolving - Toolbar: reload, open in the system browser, copy path
- File context menu entry: "Open in HTML preview"
- Two safety switches (see Settings)
Usage
- Click any
.htmlfile in the file explorer. - Or use the command palette: "Open HTML preview (pick a file)".
- Or right-click a file and choose "Open in HTML preview".
Install
Community plugins
Settings -> Community plugins -> Browse -> search "HTML Preview" -> Install -> Enable.
Manually
Copy main.js, manifest.json and styles.css into <vault>/.obsidian/plugins/html-preview/, then enable it under Settings -> Community plugins -> Installed plugins.
Settings
| Setting | Default | What it does |
|---|---|---|
| Allow backdrop-filter (frosted glass) | off | Pages that use backdrop-filter: blur() stack their blur layers with Obsidian's own compositing, which makes the window smear while scrolling. Off keeps previews crisp. Turn it on to render exactly as written. |
| Let the previewed page reach Obsidian (allow-same-origin) | off | Off keeps every preview in an opaque sandbox: scripts run, but the page cannot touch your vault or the app. Turn it on if the page needs localStorage or the clipboard — for example a self-made form with autosave. |
Security
- A preview runs the page's own JavaScript. Only preview HTML you trust.
- The sandbox defaults to
allow-scripts allow-forms allow-modals allow-popups allow-downloadswithoutallow-same-origin, so a preview cannot reach into Obsidian or your vault. - Turning on
allow-same-originrelaxes that: the preview then shares Obsidian's origin. Use it for your own files only. - The plugin itself makes no network requests, has no telemetry, and reads only files inside the vault.
- A previewed page runs exactly as written, so it may reference remote resources (images, fonts, scripts). That is the page's own behaviour, not the plugin's. Preview HTML you trust.
Implementation notes
- Obsidian's
app://resource URLs can be fetched, but cannot be used as aniframesrc (the protocol does not support being framed), so the file text is written intoiframe.srcdoc. contain: painton the frame keeps repaints inside the preview pane.
Development
Plain CommonJS, no build step — main.js is the shipped file. Edit it and reload the plugin (Settings -> Community plugins -> reload, or the "Reload app" command).
License
MIT