README file from
GithubEmbed HTML
Obsidian embeds notes, images and PDFs, but an .html file in your vault is just a file you can open — you cannot show it inside a note. So a report, a chart exported from another tool, or a page you built yourself has to live outside your notes, or be flattened into a screenshot.
This plugin embeds HTML files directly in a note, with the same ![[file.html]] syntax you already use, sized how you want, styled to match your theme, and able to run its own JavaScript.
Demo vault
The documentation is an interactive demo vault. Every feature has a note that explains what it does and why you would want it, with real HTML files already in place to embed.
Start reading here — it is plain markdown, so it works on GitHub with nothing installed.
A copy of the vault ships with every release. You can access it via any of the following:
- Running the
Embed HTML: Open demo vault command. - Downloading
embed-html-demo-vault.zipfrom the Releases. It unzips into a singleembed-html-demo-vault-<version>folder. - Browsing its source in
demo-vault/in this repository.
What it does
- Embed an HTML file in a note, with
htm,html,shtml,xhtandxhtmlall supported. 01 Basic Embed · 07 File Extensions - Embed a page from the web or your local network by its address, with
or![[https://host/page.html]]— shown as an isolated page that keeps its own styles and scripts. 14 Remote HTML Pages - Size it — a width, a height, both, auto-fit to the content, or full control with CSS declarations, with defaults in the settings. 02 Custom Size
- Show only part of a page — scroll to an element by id, or extract just that element. 03 Scroll to Element · 04 Extract Element
- It stays a real page — its JavaScript runs, its links work, and its stylesheets, scripts, images and fonts load. 05 JavaScript · 06 Links · 13 External Stylesheets and Assets
- It fits your vault — follows your theme's color scheme, takes a border and background, and can open in its own tab or in your external browser. 09 Appearance · 08 Direct View · 11 Open in External Browser
- Paths work how you expect — relative to the note or from the vault root. 10 Relative and Full Path
- Table headers stay put while you scroll a long table. 12 Sticky Table Headers
Installation
The plugin is available in the official Community Plugins repository.
Beta versions
To install the latest beta release of this plugin (regardless if it is available in the official Community Plugins repository or not), follow these steps:
- Ensure you have the BRAT plugin installed and enabled.
- Click Install via BRAT.
- An Obsidian pop-up window should appear. In the window, click the
Add pluginbutton once and wait a few seconds for the plugin to install.
Debugging
By default, debug messages for this plugin are hidden.
To show them, run the following command in the DevTools Console:
window.DEBUG.enable('embed-html');
For more details, refer to the documentation.
Changelog
All notable changes to this project will be documented in the CHANGELOG.
Contributing
Contributions are welcome — see CONTRIBUTING to get set up.
Support
My other Obsidian resources
See my other Obsidian resources.