Style HTML Viewer

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:

• Workspace Agent Instructions - Primary guidelines for AI coding agents.
• Project Architecture - Deep-dive codebase structure.
• Development Workflow - Compilation guidelines and scripts.
• Testing Standards - Seam-based testing constraints and Jest setup.
• Security & Sandboxing - Content Security Policy (CSP) and iframe details.
• CI/CD Release Pipeline - Automatic GitHub release workflow instructions.