Obsidian Stats logoObsidian Stats

HTML Dev Viewer

by d0uub
5
4
3
2
1
Score: 50/100
Install Code

Description

Reviews

No reviews yet.

Stats

1
stars
361
downloads
0
forks
32
days
32
days
32
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
4
commits

Latest Version

1.1.0
a month ago

Changelog

See all version on GitHub

README file from

Github

HTML Dev Viewer

Open .html / .htm files directly inside Obsidian. The plugin renders your page in a live preview tab with a built-in debugger, and — key feature — no API restrictions: local development pages can call any internet API without CORS errors.

Features

  • Live preview — any .html / .htm file in your vault renders in a sandboxed iframe, exactly as it would in a browser.
  • No CORS restriction — a fetch bridge routes every HTTP(S) call from the page through Obsidian's request engine, so fetch() to any API works with no CORS errors, no proxy, no config. Cookies, headers, and methods (GET/POST/PUT/DELETE...) are forwarded.
  • In-page DevTools — toggle Eruda for console, elements, network, resources, and info panels right inside the preview.
  • Source view / edit — switch between rendered preview and a syntax-highlighted source view with adjustable font size and line-wrap for quick edits.
  • Local asset inlining — relative CSS, JS, and images are inlined automatically so the page renders standalone even when assets sit next to it in the vault.
  • Open in browser — launch the file in your default browser with one click.
  • Works fully offline-only files too, since remote assets are only fetched on demand.

Install (while not yet on the community list)

One of:

  1. BRAT — add this repo (d0uub/obsidian-html-viewer) via Add a beta plugin.
  2. Manual — download the latest release: main.js, manifest.json, styles.css → copy into <vault>/.obsidian/plugins/html-dev-viewer/ → enable under Settings → Community plugins.
  3. Turn on HTML file links — if .html files aren't opening with the viewer, enable Settings → Files & Links → Detect all file extensions.

Once accepted, it will appear in Community plugins → Browse as HTML Viewer.

Usage

  • Click any .html or .htm file in the file explorer to open it in preview.
  • Source / preview — click the pencil button in the top-right of the pane header to toggle source view; click play to render again.
  • DevTools — click the bug icon in the pane header to open/close the Eruda console, elements, and network panels inside the iframe.
  • Debug local pages that call APIs — the fetch bridge is injected into every previewed page automatically. fetch('https://any-api.example/api') from your local HTML just works.
  • Open in browser — click the external-link icon to open the file in your default browser (useful for full-screen demos).

Security notes

  • Pages render inside a sandboxed iframe (allow-scripts allow-same-origin allow-forms allow-modals allow-popups), so the page cannot touch the host Obsidian window except through the two explicit message channels: the fetch bridge and the DevTools toggle.
  • The fetch bridge forwards requests to the vault's own request engine and does not expose filesystem or vault reads to the rendered page.
  • Inline DevTools loads Eruda from cdn.jsdelivr.net; offline preview still works, only the DevTools panel needs network.

Build from source

npm install
npm run build   # writes main.js

Uses esbuild via the build script in package.json.

Compatibility

  • minAppVersion: 0.15.0
  • Desktop and mobile.

License

MIT — see LICENSE.

Sponsors