feat: Render HTML files in embeds and Canvas (#2)

* feat: Render HTML files in embeds and Canvas

* fix: Constrain HTML embed height

* docs: Update README overview

---------

Co-authored-by: Sam Collins <81678+smcllns@users.noreply.github.com>

Author: yolo-sam

README.md

@@ -3,11 +3,11 @@
 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).
 
 
-* The HTML is rendered in a sandboxed `<iframe>`.
+* HTML is rendered in a sandboxed `<iframe>`, and works across tabs, embeds (`![[doc.html]]`), and Canvas.
 * JS can run inside the HTML for interactivity but the iframe is isolated from your other notes and Obsidian's own data.
 * No other bells and whistles.
 
-The plugin is ~75 lines of code, ~100 lines of config, ~520 lines of test, and requires no external dependencies.
+The plugin is ~190 lines of code, ~660 lines of test, and requires no external dependencies.
 
 ## Demo
 
@@ -43,14 +43,14 @@ npm run build    # production bundle at `dist/html-docs/`
 
 ## Test
 
-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.
+An E2E test runner validates features, embeds, Canvas cards, and sandboxing are working correctly. Requires `obsidian-cli`, Obsidian running with a vault open, the plugin installed and enabled, and `jq` available.
 
 
 ```bash
 npm test
 ```
 
-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.
+The script builds the current plugin, copies it into the active vault's plugin folder, reloads it, copies `test/fixture.html` into the vault temporarily, opens it in Obsidian, verifies the tab view plus markdown and Canvas embeds, collects the iframe’s own self-test results via `postMessage`, then cleans up.
 
 See `test/fixture.html` for the full list of features exercised — and the inline notes for what is intentionally blocked.
 
@@ -62,10 +62,6 @@ See `test/fixture.html` for the full list of features exercised — and the inli
 
 This plugin will stay simple and do this one thing well.
 
-File issues here, or message me on X (@smcllns).
+File issues here, or message me on X: [@smcllns](https://x.com/smcllns).
 
 If you want more features, please fork and customize as you need.
-
-## Known Issues
-
-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.

main.ts

@@ -1,10 +1,79 @@
-import { FileView, Notice, Plugin, TFile, WorkspaceLeaf } from "obsidian";
+import { Component, FileView, Notice, Plugin, TFile, WorkspaceLeaf } from "obsidian";
 
 const VIEW_TYPE_HTML = "html-docs";
 
+interface EmbedContext {
+	containerEl: HTMLElement;
+}
+
+interface EmbedRegistry {
+	registerExtension(
+		extension: string,
+		embedCreator: (context: EmbedContext, file: TFile) => Component,
+	): void;
+	unregisterExtension(extension: string): void;
+}
+
+interface AppWithEmbedRegistry {
+	embedRegistry?: EmbedRegistry;
+}
+
+interface RenderOptions {
+	mode: "view" | "embed";
+	widthPx?: number | null;
+	heightPx?: number | null;
+}
+
+function parseDimension(value: string | null): number | null {
+	if (!value) return null;
+	const parsed = Number.parseInt(value, 10);
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+
+function renderSandboxedHtml(contentEl: HTMLElement, html: string, options: RenderOptions): () => void {
+	const previousWidth = contentEl.style.width;
+	const previousHeight = contentEl.style.height;
+
+	contentEl.empty();
+	contentEl.addClass("html-docs-container");
+	contentEl.addClass(options.mode === "view" ? "html-docs-view" : "html-docs-embed");
+	if (options.widthPx) contentEl.style.width = `${options.widthPx}px`;
+	if (options.heightPx) contentEl.style.height = `${options.heightPx}px`;
+
+	// Load the document via a Blob URL rather than srcdoc so anchor
+	// links (#section) and the History API navigate correctly inside
+	// the page. The sandbox attribute still gives the document an
+	// opaque origin regardless of URL scheme, so isolation from
+	// Obsidian and the vault is preserved.
+	const blobUrl = URL.createObjectURL(new Blob([html], { type: "text/html" }));
+
+	// Build the iframe fully detached so the browser never observes it
+	// without the sandbox attribute. Inserting first, then setting
+	// sandbox, leaves a window where the initial about:blank document
+	// is created with the parent's origin — some Chromium versions
+	// don't fully re-apply the sandbox on the subsequent navigation,
+	// leaking same-origin privileges into user HTML.
+	const iframe = contentEl.ownerDocument.createElement("iframe");
+	iframe.className = "html-docs-iframe";
+	// allow-scripts lets the page's JS run; omitting allow-same-origin
+	// keeps it isolated from Obsidian and the user's vault.
+	iframe.setAttribute("sandbox", "allow-scripts allow-popups allow-forms");
+	iframe.src = blobUrl;
+	contentEl.appendChild(iframe);
+
+	return () => {
+		URL.revokeObjectURL(blobUrl);
+		contentEl.empty();
+		contentEl.removeClass("html-docs-container");
+		contentEl.removeClass("html-docs-view");
+		contentEl.removeClass("html-docs-embed");
+		contentEl.style.width = previousWidth;
+		contentEl.style.height = previousHeight;
+	};
+}
+
 class HtmlView extends FileView {
-	private iframe: HTMLIFrameElement | null = null;
-	private blobUrl: string | null = null;
+	private cleanupHtml: (() => void) | null = null;
 
 	getViewType(): string {
 		return VIEW_TYPE_HTML;
@@ -15,7 +84,7 @@ class HtmlView extends FileView {
 	}
 
 	canAcceptExtension(extension: string): boolean {
-		return extension === "html" || extension === "htm";
+		return extension === "html";
 	}
 
 	async onLoadFile(file: TFile): Promise<void> {
@@ -24,45 +93,40 @@ class HtmlView extends FileView {
 	}
 
 	async onUnloadFile(_file: TFile): Promise<void> {
-		this.revokeBlob();
-		this.contentEl.empty();
-		this.iframe = null;
+		this.cleanupHtml?.();
+		this.cleanupHtml = null;
 	}
 
-	private revokeBlob(): void {
-		if (this.blobUrl) {
-			URL.revokeObjectURL(this.blobUrl);
-			this.blobUrl = null;
-		}
+	private render(html: string): void {
+		this.cleanupHtml?.();
+		this.cleanupHtml = renderSandboxedHtml(this.contentEl, html, { mode: "view" });
 	}
+}
 
-	private render(html: string): void {
-		this.contentEl.empty();
-		this.contentEl.addClass("html-docs-container");
-		this.revokeBlob();
-
-		// Load the document via a Blob URL rather than srcdoc so anchor
-		// links (#section) and the History API navigate correctly inside
-		// the page. The sandbox attribute still gives the document an
-		// opaque origin regardless of URL scheme, so isolation from
-		// Obsidian and the vault is preserved.
-		const blob = new Blob([html], { type: "text/html" });
-		this.blobUrl = URL.createObjectURL(blob);
-
-		// Build the iframe fully detached so the browser never observes it
-		// without the sandbox attribute. Inserting first, then setting
-		// sandbox, leaves a window where the initial about:blank document
-		// is created with the parent's origin — some Chromium versions
-		// don't fully re-apply the sandbox on the subsequent navigation,
-		// leaking same-origin privileges into user HTML.
-		const iframe = activeDocument.createElement("iframe");
-		iframe.className = "html-docs-iframe";
-		// allow-scripts lets the page's JS run; omitting allow-same-origin
-		// keeps it isolated from Obsidian and the user's vault.
-		iframe.setAttribute("sandbox", "allow-scripts allow-popups allow-forms");
-		iframe.src = this.blobUrl;
-		this.contentEl.appendChild(iframe);
-		this.iframe = iframe;
+class HtmlEmbed extends Component {
+	private cleanupHtml: (() => void) | null = null;
+
+	constructor(
+		private contentEl: HTMLElement,
+		private plugin: HtmlDocsPlugin,
+		private file: TFile,
+	) {
+		super();
+	}
+
+	async loadFile(): Promise<void> {
+		const content = await this.plugin.app.vault.cachedRead(this.file);
+		this.cleanupHtml?.();
+		this.cleanupHtml = renderSandboxedHtml(this.contentEl, content, {
+			mode: "embed",
+			widthPx: parseDimension(this.contentEl.getAttribute("width")),
+			heightPx: parseDimension(this.contentEl.getAttribute("height")),
+		});
+	}
+
+	onunload(): void {
+		this.cleanupHtml?.();
+		this.cleanupHtml = null;
 	}
 }
 
@@ -72,7 +136,14 @@ export default class HtmlDocsPlugin extends Plugin {
 			VIEW_TYPE_HTML,
 			(leaf: WorkspaceLeaf) => new HtmlView(leaf),
 		);
-		this.registerExtensions(["html", "htm"], VIEW_TYPE_HTML);
+		this.registerExtensions(["html"], VIEW_TYPE_HTML);
+
+		const embedRegistry = (this.app as unknown as AppWithEmbedRegistry).embedRegistry;
+		if (!embedRegistry) {
+			throw new Error("HTML Docs: app.embedRegistry is unavailable; cannot register HTML embeds.");
+		}
+		embedRegistry.registerExtension("html", (context, file) => new HtmlEmbed(context.containerEl, this, file));
+		this.register(() => embedRegistry.unregisterExtension("html"));
 
 		// Obsidian hides files with unrecognized extensions in the file
 		// explorer unless "Show all file types" is on; registering the

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "html-docs",
 	"name": "HTML Docs",
-	"version": "1.0.4",
+	"version": "1.1.0",
 	"minAppVersion": "1.4.0",
 	"description": "A zero-dependency minimal plugin to enable .html docs inside Obsidian. Inspired by Anthropic's 'unreasonable effectiveness of HTML'",
 	"author": "smcllns",

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "html-docs",
-	"version": "1.0.4",
+	"version": "1.1.0",
 	"description": "A zero-dependency minimal plugin to enable .html docs inside Obsidian. Inspired by Anthropic's 'unreasonable effectiveness of HTML'",
 	"main": "main.js",
 	"scripts": {

package.json

@@ -1,9 +1,24 @@
 .html-docs-container {
 	padding: 0;
-	height: 100%;
 	width: 100%;
 }
 
+.html-docs-view,
+.canvas-node-content.html-docs-embed {
+	height: 100%;
+}
+
+.html-docs-embed {
+	max-width: 100%;
+}
+
+.markdown-rendered .html-docs-embed,
+.markdown-source-view .html-docs-embed {
+	height: var(--html-docs-embed-height, 600px);
+	max-height: var(--embed-max-height);
+	overflow: hidden;
+}
+
 .html-docs-iframe {
 	width: 100%;
 	height: 100%;