HTML Embed
the-pieza96 downloadsEmbed standalone interactive HTML files (with working JavaScript) inline in your notes via a simple html-embed code block.
- Overview
- Scorecard
- Updates1
Embed standalone interactive HTML files — with working JavaScript — directly inside your Obsidian notes.
Drop a small code block in any note and a sandboxed iframe is rendered in its place, served through Obsidian's own resource path so that scripts, styles, and local assets all load correctly. Perfect for living documents: algorithm visualizations beside your CS notes, interactive chemistry diagrams beside your study guide, or custom dashboards beside your project plan.
Why this plugin exists
Obsidian's reading view sanitizes raw <iframe> tags and strips <script> blocks, which makes it surprisingly difficult to embed your own self-contained interactive HTML. HTML Embed registers a tiny custom code block (html-embed) that resolves a vault-relative HTML file through the supported app:// resource protocol — so JavaScript runs, styles apply, and the embed feels native.
Usage
```html-embed
file: visualizations/binary-search-tree.html
height: 600
```
Options:
| Key | Default | Description |
|---|---|---|
file |
required | Path to the HTML file. Vault-relative or absolute (e.g. C:/path/to/file.html). |
height |
600 |
Iframe height in pixels. |
width |
100% |
Iframe width. |
A small "Open in browser" link is added under each embed as a fallback.
Example use cases
- Algorithm step-throughs (BFS, A*, sorting)
- Cipher / cryptography playgrounds
- Interactive math demos (function plotters, geometry, probability)
- Live data dashboards (load a local CSV and render with vanilla JS)
- Custom flashcard widgets, timers, or study tools
Installation
From Community Plugins (after release approval)
- Open Obsidian → Settings → Community plugins
- Disable Restricted mode if it's on
- Browse → search "HTML Embed" → Install → Enable
Manual installation
- Download
main.jsandmanifest.jsonfrom the latest release - Copy them into
<your-vault>/.obsidian/plugins/html-embed/ - Reload Obsidian and enable HTML Embed in Settings → Community plugins
Security
Each embed is rendered inside a sandboxed iframe with allow-scripts allow-same-origin allow-forms allow-popups. Only files from your own vault can be loaded. As with any plugin that runs JavaScript, only embed HTML files you trust.
About
This plugin is published by The Pieza, a community building tools and experiences for makers, students, and educators. The Pieza ships small, sharp, well-crafted utilities that respect the user's time and attention.
In partnership with Mr. Dewey — an all-in-one academic buddy and educational reformer working to centralize the student academic workspace. HTML Embed is part of Mr. Dewey's larger mission to help students keep their notes, references, study aids, and interactive learning materials together in one place.
Contributing
Issues and PRs welcome at https://github.com/the-pieza/obsidian-html-embed. Please keep the plugin focused — small surface area is a feature, not a limitation.
License
MIT © The Pieza