Style HTML Viewer

approved

by Robin Tan

Renders HTML documents natively in Obsidian workspace tabs with local CSS, image, and script asset resolution, CSP security, and link interception. - This plugin has not been manually reviewed by Obsidian staff.

★ 1 stars↓ 188 downloadsUpdated 1mo agoMIT
Install in ObsidianView on GitHub

Style HTML Viewer

An Obsidian plugin that enables rendering of .html files directly within Obsidian workspace tabs.

Features

  • Workspace View Integration: Open HTML files inside a dedicated custom view tab.
  • Preview & Source Editor: Toggle between a sandboxed rendered preview and raw HTML source code.
  • DOM Relative Asset Resolution: Automatically parses HTML and converts relative resources (js, images, audio, video) to valid local Obsidian vault URIs.
  • Local Stylesheet Inlining: To circumvent browser/Obsidian iframe CSP boundary limitations that prevent loading external app:// stylesheets, the plugin automatically reads local CSS files, resolves nested asset url() values to absolute resource URIs, and injects them directly as inline <style> blocks.
  • IPC Link Interception: Intercepts links to local .md or .html files and opens them in native Obsidian workspace tabs. External web links (http(s)) are opened in the default browser.
  • Security Sandboxing & CSP: Executes pages inside an <iframe> with strict sandbox flags and enforces a strict, local-only Content Security Policy (CSP).
  • Live Reloading: Automatically re-renders the preview when the HTML file or any of its CSS/JS dependencies in the vault are modified.

Development

Setup and Commands

  1. Install dependencies:

    npm install

  2. Development compiler (with source mapping and file watching):

    npm run dev

  3. Production build:

    npm run build

  4. Run test suite:

    npm test

Developer Playbooks & References

For agent instructions, rules, and detailed technical specifications, see:

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.