Obsidian Stats logoObsidian Stats

HTML Canvas

by x1han
5
4
3
2
1
New Plugin
Install Code

Description

This plugin has not been manually reviewed by Obsidian staff. Open local HTML study pages in Obsidian with native browser rendering for CSS, MathML, SVG diagrams, and visual notes.

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
0
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

Github

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.

Mode Intended use Rendering behavior
Native File Mode Trusted local visual notes Loads the vault file directly in an iframe for browser-native rendering; scripts are not allowed by default sandboxing.
Balance Mode General HTML reading Parses and sanitizes HTML, removes scripts, and applies compatibility patches.
High Restricted Mode Less trusted files Stronger sanitization and stricter content restrictions.
Text Mode Untrusted files Keeps text-oriented content and removes most visual or interactive features.
Low Restricted Mode Troubleshooting trusted files Less sanitization, but scripts are still removed.
Unrestricted Mode Last-resort troubleshooting only Leaves the document mostly untouched. Use carefully.

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.

Sponsors