HTML Prototype Viewer
Renan Gautier142 downloadsPreview local HTML files in an isolated iframe, with device widths and live reload, and embed them in your notes.
- Overview
- Scorecard
- Updates2
Preview HTML files stored in your vault, rendered in a real browser context instead of being injected into Obsidian's DOM.
Useful if you keep design mockups, exported artifacts, or standalone HTML prototypes alongside your notes.
Why an iframe
Plugins that render local HTML by inserting it into the Obsidian document leak the
prototype's global CSS (body, :root, *, h1…) into the app's own interface, and
have to block scripts to stay safe.
This plugin loads the file into an <iframe> instead. The prototype gets its own
document, its own stylesheet scope and its own script context — nothing bleeds into
Obsidian, and JavaScript simply works.
No local web server is involved: the file is resolved through Obsidian's own resource
URL (app.vault.getResourcePath), the same mechanism used to display images from your
vault. This works on desktop and mobile alike.
Features
- Opens
.htmland.htmfiles natively. Click a file in the file explorer and it opens in a tab. - Device widths. Switch the render width between full width, desktop (1280 px), tablet (834 px) and mobile (390 px) from the tab toolbar.
- Live reload. The preview refreshes whenever the file changes on disk — handy when iterating on a prototype you edit elsewhere.
- Embed previews in notes with an
html-previewcode block. - Open in the system browser from the tab toolbar or the file context menu.
- English and French interface, following Obsidian's language setting.
Embedding in a note
```html-preview
[[My prototype.html]]
height: 700
```
The block accepts a wiki link, a vault-relative path, or explicit keys:
| Key | Meaning |
|---|---|
path: (or file:) |
The HTML file to render |
height: |
Preview height in pixels — defaults to the plugin setting |
width: |
Fixed render width in pixels — defaults to full width |
The command Insert a prototype preview in the note generates the skeleton.
Settings
| Setting | Description |
|---|---|
| Default render width | Width applied when opening an HTML file |
| Reload automatically | Refresh the preview when the file changes on disk |
| Preview height in notes | Default height for html-preview blocks |
| Strict isolation | Drops allow-same-origin from the iframe sandbox |
About strict isolation
By default the iframe keeps its origin, so prototypes can use localStorage and load
neighbouring files (images, fonts, sibling pages). This also means a prototype's scripts
run with the same origin as the app.
Enable Strict isolation for HTML you did not write yourself: the prototype then runs
in an opaque origin and cannot reach the Obsidian API — at the cost of localStorage and
relative file loading.
Compatibility note
Only one view can own the .html extension. If another HTML-rendering plugin (such as
HTML Reader) is enabled at the same time, which one wins depends on plugin load order.
Disable the other one for predictable behaviour.
Development
npm install
npm run dev # watch build
npm run build # type-check, then production bundle
To deploy the build into a vault for testing, point the repo at it — either with the
OBSIDIAN_VAULT environment variable, or by writing the vault's absolute path into a
git-ignored .vault-path file at the repo root — then:
npm run build && npm run install-local
This copies main.js, manifest.json and styles.css into
<vault>/.obsidian/plugins/html-prototype-viewer/. Reload Obsidian afterwards.
License
MIT — see LICENSE.