HTML Canvas

HTML Canvas is an Obsidian plugin for opening local .html and .htm files as visual notes inside your vault.

It is designed for study pages, exported notes, formula-heavy documents, and diagram-rich HTML. The default mode loads trusted vault HTML through Obsidian's native browser iframe path instead of rewriting the document into srcdoc, so browser-native features such as CSS layout, MathML formulas, inline SVG diagrams, anchors, and responsive pages keep their original behavior more reliably.

Why use HTML Canvas?

• Opens .html and .htm files directly from the Obsidian file explorer.
• Uses native browser rendering by default for trusted local HTML notes.
• Preserves complex CSS, MathML, SVG diagrams, and responsive educational pages better than sanitizer-heavy rendering modes.
• Keeps the HTML page isolated inside an iframe so page styles do not leak into Obsidian.
• Disables script execution in the default native mode by using an iframe sandbox without allow-scripts.
• Includes search and zoom controls for reading long visual documents.
• Keeps restricted fallback modes for less trusted HTML.

Best Fit

HTML Canvas is especially useful when you generate HTML from Markdown, notebooks, papers, or learning notes and want to read the result inside Obsidian without losing visual fidelity.

Examples:

• study diaries with equations and concept diagrams
• machine learning or biology notes exported to HTML
• single-file visual explainers
• documentation snapshots
• HTML reports generated by local scripts

Installation

From Obsidian Community Plugins

After the plugin is accepted into the community directory:

1. Open Obsidian Settings.
2. Go to Community plugins and turn off Restricted mode if needed.
3. Search for HTML Canvas.
4. Install and enable the plugin.

Manual Installation

1. Download main.js, manifest.json, and versions.json from the latest GitHub release.
2. Create this folder in your vault: .obsidian/plugins/html-canvas/.
3. Put the downloaded files in that folder.
4. Restart Obsidian and enable HTML Canvas in Community plugins.

Usage

1. Put an .html or .htm file anywhere in your vault.
2. Click it in the Obsidian file explorer.
3. The file opens in an HTML Canvas tab.

The default operating mode is Native File Mode, which is intended for HTML files you trust and created or saved locally.

Operating Modes

HTML Canvas keeps several operating modes so you can choose between fidelity and restriction.

Native Rendering Advantage

Many HTML reading plugins transform the document before showing it. That is useful for security, but it can break complex learning pages: SVG can be clipped, MathML can be degraded, CSS layout can change, and anchor behavior can differ from a normal browser.

HTML Canvas's default Native File Mode avoids that rewrite path. It points the iframe at the actual vault resource URL, so Chromium's built-in HTML, CSS, SVG, and MathML engines do the rendering directly. This is the key reason it works well for generated educational pages and visual notes.

Security Notes

HTML Canvas is meant for local files you understand. The default Native File Mode uses iframe sandboxing without allow-scripts, so scripts in the opened HTML are not allowed to execute by default. For files from unknown sources, switch to Text Mode or High Restricted Mode.

Do not use Unrestricted Mode for arbitrary downloaded HTML.

Development

Install dependencies:

npm install

Build production main.js:

npm run build

Run the current TypeScript audit:

npm run typecheck

The inherited codebase still has loose DOM and third-party module types, so typecheck is currently an audit command rather than a release gate.

Release Files

A GitHub release should include:

• manifest.json
• main.js
• versions.json

The release tag should match the version in manifest.json.

Acknowledgements

HTML Canvas is derived from the MIT-licensed Obsidian HTML Reader plugin by Nuthrash. This version has been renamed and adapted around native local HTML rendering for visual learning notes.