# 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](https://github.com/liriliri/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](https://github.com/TfTHacker/obsidian42-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](https://esbuild.github.io/) via the `build` script in `package.json`.

## Compatibility

- `minAppVersion: 0.15.0`
- Desktop and mobile.

## License

MIT — see [LICENSE](LICENSE).