Obsidian HTML Preview

English | 简体中文

A live HTML preview plugin for Obsidian, inspired by VSCode's Live Preview. It starts a local HTTP server, serves your HTML files with auto-reload on save, and provides an embedded preview panel inside Obsidian — plus the ability to open in your system browser.

Features

• Local HTTP Server — Serves .html files from their parent directory, so relative paths, CSS, JS, fonts, and images all work correctly.
• Auto-Reload on Change — Uses WebSocket to push reload signals to the browser. Edit your HTML (or linked CSS/JS), and the preview refreshes automatically within ~300ms.
• Embedded Preview Panel — A dedicated Obsidian pane (right sidebar or any split) renders your HTML in an iframe pointed at the local server.
• Source / Preview Toggle — Switch between the rendered preview and the raw HTML source with one click via the view header button. The source view stays in sync as you edit.
• Open in Browser — One command to open the current preview in your system's default browser.
• Path Traversal Protection — The server only serves files within the chosen directory. Requests attempting directory escape are rejected.
• Port Auto-Increment — If the configured port is busy, the server automatically tries the next available port.

Installation

Obsidian Community Plugins

Search "HTML Preview" in Settings → Community plugins → Browse, then install and enable.

Manual

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Place the files into <vault>/.obsidian/plugins/live-preview/.
3. Reload Obsidian (Cmd/Ctrl + R).
4. Go to Settings → Community plugins → Installed plugins and enable HTML Preview.

BRAT

1. Install the BRAT plugin.
2. In BRAT settings, add this repository: HxWGuang/obsidian-live-preview.
3. Enable the plugin in Community plugins.

Usage

1. Open any .html or .htm file in your vault — the preview starts automatically in the right sidebar.
2. Edit the file. The preview refreshes automatically.
3. Use the command palette (Cmd/Ctrl + P):
   • Start HTML Preview — Manually start the preview for the active HTML file.
   • Stop HTML Preview — Shut down the local server.
   • Open Preview in Browser — Open the current preview page in your system browser.
4. Click the code / eye icon in the preview pane's header to toggle between the rendered preview and the HTML source.

Settings

Setting	Default	Description
Port	5500	Starting port for the local HTTP server. Auto-increments if busy.
Debounce delay	300 ms	Delay after a file change before the preview refreshes.

Security

• The HTTP server binds to 127.0.0.1 (localhost only) — no external network access.
• Only whitelisted static file extensions are served (.html, .css, .js, images, fonts, etc.).
• Path traversal attempts (e.g., ../../../) are blocked at the server level.
• The embedded preview uses an iframe with sandbox attributes for isolation.

Development

# Clone the repository
git clone https://github.com/HxWGuang/obsidian-live-preview.git
cd obsidian-live-preview

# Install dependencies
npm install

# Build
npm run build

# Copy to your vault for testing
cp main.js manifest.json styles.css /path/to/vault/.obsidian/plugins/obsidian-live-preview/

Tech Stack

• Language: TypeScript
• Bundler: esbuild
• WebSocket: ws
• Platform: Obsidian Plugin API, Node.js http module
• Minimum Obsidian Version: 1.1.0
• Desktop Only (uses Node.js built-in modules for the HTTP server)

License

MIT