Embed HTML

Embed 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:

1. Running the Embed HTML: Open demo vault command.
2. Downloading embed-html-demo-vault.zip from the Releases. It unzips into a single embed-html-demo-vault-<version> folder.
3. Browsing its source in demo-vault/ in this repository.

What it does

• Embed an HTML file in a note, with htm, html, shtml, xht and xhtml all supported. 01 Basic Embed · 07 File Extensions
• 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:

1. Ensure you have the BRAT plugin installed and enabled.
2. Click Install via BRAT.
3. An Obsidian pop-up window should appear. In the window, click the Add plugin button 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.

License

© Michael Naumov