|
1 | | -# HTML Docs |
| 1 | +# HTML Docs Obsidian Plugin |
| 2 | + |
| 3 | +A zero-dependency minimal plugin to enable .html docs inside Obsidian. Inspired by [Thariq's "unreasonable effectiveness of HTML"](https://x.com/trq212/status/2052809885763747935). |
2 | 4 |
|
3 | | -A zero-dependency minimal plugin to bring the [unreasonable effectiveness of HTML](https://x.com/trq212/status/2052809885763747935) to Obsidian. |
4 | 5 |
|
5 | 6 | * The HTML is rendered in a sandboxed `<iframe>`. |
6 | | -* JS can run inside the HTML for interactivity, but the iframe is isolated from Obsidian and your vault. |
7 | | -* Nothing else. The plugin is ~75 lines of code, ~100 lines of config, and ~520 lines of test. |
| 7 | +* JS can run inside the HTML for interactivity but the iframe is isolated from your other notes and Obsidian's own data. |
| 8 | +* No other bells and whistles. |
8 | 9 |
|
9 | | -Fork and extend if you want other features. |
| 10 | +The plugin is ~75 lines of code, ~100 lines of config, ~520 lines of test, and requires no external dependencies. |
10 | 11 |
|
11 | 12 | ## Demo |
12 | 13 |
|
13 | | -A minimal plugin that lets you work with .md AND .html docs inside Obsidian |
| 14 | +A demo page (`test/fixture.html`) demonstrates all the passing HTML features. |
14 | 15 |
|
15 | 16 |  |
16 | 17 |
|
17 | | -## Install |
18 | | - |
19 | | -The easy path: [install from the Obsidian Community Plugins directory](https://community.obsidian.md/plugins/html-docs), or browse to **Settings → Community plugins → Browse**, search **HTML Docs**, and click Install. |
20 | | - |
21 | | -After install, turn on **Settings → Files & Links → Detect all file extensions** so `.html` files appear in the file explorer. The plugin shows a one-time notice on load if it isn't already on. |
22 | | - |
23 | | -### Install manually |
24 | | - |
25 | | -1. Download `main.js`, `manifest.json`, and `styles.css` from the [latest release](https://github.com/smcllns/obsidian-plugin-html-docs/releases/latest) and drop them into `<vault>/.obsidian/plugins/html-docs/`. |
26 | | -2. Enable **HTML Docs** in Obsidian's Community Plugins settings. |
27 | | -3. Turn on the **Detect all file extensions** setting as above. |
| 18 | +## Installation |
28 | 19 |
|
29 | | -Releases are built and signed by GitHub Actions ([release.yml](.github/workflows/release.yml)) so the binaries carry a [build attestation](https://docs.github.com/en/actions/security-for-github-actions/using-artifact-attestations/using-artifact-attestations-to-establish-provenance-for-builds) you can verify against the source. |
| 20 | +> Note: Obsidian only shows `.md` files in your file explorer, by default. To see your `.html` files too, be sure to enable: **Settings → Files & links → Show all file types** |
30 | 21 |
|
31 | | -To build from source instead: `npm install && npm run build` produces `dist/html-docs/` ready to copy. |
| 22 | +### Install from Obsidian directly |
32 | 23 |
|
33 | | -## What works |
| 24 | +* Go to Obsidian Community Plugins: [community.obsidian.md/plugins/html-docs](https://community.obsidian.md/plugins/html-docs) |
| 25 | +* Click Install |
34 | 26 |
|
35 | | -Anything an isolated page can do without server-side help: HTML, CSS (gradients, grid, animations, custom properties), JavaScript (ES2020+, Promises, `setInterval`, DOM events), inline SVG, Canvas 2D, forms, and absolute HTTPS resources (images, fetch with CORS). |
36 | | - |
37 | | -See demo: [test/fixture.html](test/fixture.html) |
38 | | - |
39 | | -## What doesn't work (by design) |
40 | | - |
41 | | -This plugin intentionally omits `allow-same-origin`, so each HTML page gets an opaque origin — the browser treats it as isolated content. JS still runs, but it can't reach your vault, your notes, or Obsidian's own data. |
42 | | - |
43 | | -Which blocks: |
| 27 | +### Install manually |
44 | 28 |
|
45 | | -- `localStorage`, `sessionStorage`, `IndexedDB`, `document.cookie` |
46 | | -- Reading the parent (`window.parent.*`) — `postMessage` still works |
47 | | -- Vault-relative URLs like `<img src="attachments/foo.png">` — use absolute HTTPS or data URLs |
48 | | -- Service workers, geolocation, clipboard, notifications |
| 29 | +1. Download `main.js`, `manifest.json`, and `styles.css` from the [latest release](https://github.com/smcllns/obsidian-plugin-html-docs/releases/latest) |
| 30 | +2. Place those files into `<vault>/.obsidian/plugins/html-docs/`. |
| 31 | +3. Enable **HTML Docs** in Obsidian's Community Plugins settings. |
49 | 32 |
|
| 33 | +Releases are built and signed by GitHub Actions ([.github/workflows/release.yml](.github/workflows/release.yml)) so the binaries carry a [build attestation](https://docs.github.com/en/actions/security-for-github-actions/using-artifact-attestations/using-artifact-attestations-to-establish-provenance-for-builds) you can verify against the source. |
50 | 34 |
|
51 | | -## Dev |
| 35 | +### Build and install from source |
52 | 36 |
|
53 | 37 | ```bash |
| 38 | +git clone https://github.com/smcllns/obsidian-plugin-html-docs/ |
54 | 39 | npm install |
55 | 40 | npm run dev # watch + rebuild |
56 | | -npm run build # production bundle |
| 41 | +npm run build # production bundle at `dist/html-docs/` |
57 | 42 | ``` |
58 | 43 |
|
59 | | -Open any `.html` or `.htm` file in your vault — Obsidian will route it through the plugin's view. |
| 44 | +## Test |
| 45 | + |
| 46 | +An E2E test runner validates features and sandboxing are working correctly. Requires `obsidian-cli`, Obsidian running with a vault open, the plugin installed and enabled, and `jq` available. |
60 | 47 |
|
61 | | -For a tighter loop, symlink your vault's plugin folder to the build output so every rebuild is picked up without a copy: |
62 | 48 |
|
63 | 49 | ```bash |
64 | | -ln -sf "$(pwd)/dist/html-docs" "<vault>/.obsidian/plugins/html-docs" |
| 50 | +npm test |
65 | 51 | ``` |
66 | 52 |
|
67 | | -Then `obsidian-cli plugin:reload id=html-docs` (or `Cmd-P → Reload app`) loads the new build. |
| 53 | +The script copies `test/fixture.html` into the vault temporarily, opens it in Obsidian, uses `obsidian-cli eval` to inspect the plugin view and verify the iframe exists with the expected sandbox and blob URL settings, collects the iframe’s own self-test results via `postMessage`, then cleans up. |
68 | 54 |
|
69 | | -## Test |
| 55 | +See `test/fixture.html` for the full list of features exercised — and the inline notes for what is intentionally blocked. |
70 | 56 |
|
71 | | -A smoke-test suite drives a running Obsidian instance via `obsidian-cli`. |
| 57 | +## Obsidian Official Resources |
72 | 58 |
|
73 | | -```bash |
74 | | -npm test |
75 | | -``` |
| 59 | +* Developer docs: [docs.obsidian.md](https://docs.obsidian.md) |
76 | 60 |
|
77 | | -Requires Obsidian running with a vault open, the plugin installed and enabled, and `jq` available. The script copies `test/fixture.html` into the vault temporarily, opens it, verifies the iframe shape from outside Obsidian and collects the iframe's own self-test results via `postMessage`, then cleans up. |
| 61 | +## Feedback / Support |
78 | 62 |
|
79 | | -See `test/fixture.html` for the full list of features exercised — and the inline notes for what is intentionally blocked. |
| 63 | +This plugin will stay simple and do this one thing well. |
80 | 64 |
|
81 | | -## The original prompt |
| 65 | +File issues here, or message me on X (@smcllns). |
82 | 66 |
|
83 | | -```markdown |
84 | | -Research obsidian plugin best practices. Then write a minimalist obsidian plugin which lets me view html files similar to md files inside obsidian. |
85 | | -They will be single html files but they need to be able to run JavaScript. |
| 67 | +If you want more features, please fork and customize as you need. |
86 | 68 |
|
87 | | -I want to avoid complexity and aim for a simple and reliable. |
| 69 | +## Known Issues |
88 | 70 |
|
89 | | -Include a test html page which contains all the components we expect to work (include svg). |
90 | | -At the bottom include any components that are known to **not** work. |
91 | | -Include a test runner in the repo to exercise and validate so we have clear expectations of what should work and small automated test suite. |
92 | | -``` |
| 71 | +1. **Does not support Obsidian Canvas or embeds.** HTML files in Canvas, and embeds in a doc (e.g. `![[doc.html]]`) continue to show the same placeholder as before. |
0 commit comments