HTML-Preview
Mounib Bouchareb241 downloadsRender HTML code blocks as live, sandboxed webpages inside your notes.
- Overview
- Scorecard
- Updates1
HTML Preview is an Obsidian plugin that renders html-preview code blocks as interactive webpages directly inside notes.
Features
- Runs HTML, CSS, and JavaScript in an isolated iframe.
- Automatically follows the rendered document height.
- Supports a manual height mode with pointer-based resizing.
- Refreshes one preview from its toolbar or every open preview from the command palette.
- Opens previews in a larger modal.
- Copies the original HTML source to the clipboard.
- Works on desktop and mobile versions of Obsidian.
Usage
Create a fenced code block with the language html-preview:
```html-preview
<!doctype html>
<html>
<head>
<style>
button {
padding: 0.5rem 1rem;
}
</style>
</head>
<body>
<button onclick="this.textContent = 'Clicked'">Click me</button>
</body>
</html>
```
The preview toolbar provides refresh, fullscreen, copy, and sizing controls. In manual sizing mode, drag the handle below the preview to change its height.
Use HTML Preview: Refresh all previews from the command palette to reload every mounted preview.
Security
Preview code runs with the iframe sandbox permissions allow-scripts allow-forms. It does not receive same-origin access to Obsidian, popup permission, or direct access to the vault through this plugin.
HTML can still make external network requests through normal browser APIs. Only run code you understand, especially when opening notes from untrusted sources.
Strict isolation means previews cannot directly access Obsidian APIs, the host document, or local vault resources that require same-origin access.
Installation
Community plugins
Once listed in the Obsidian community plugin directory:
- Open Settings > Community plugins.
- Select Browse and search for HTML-Preview.
- Install and enable the plugin.
Manual installation
- Download
main.js,manifest.json, andstyles.cssfrom the latest GitHub release. - Create
<vault>/.obsidian/plugins/html-preview/. - Place the three downloaded files in that directory.
- Reload Obsidian and enable HTML Preview under Community plugins.
Development
Requirements:
- Node.js 20 or newer
- npm
Install dependencies and run the full quality gate:
npm ci
npm run check
Useful commands:
npm run dev # rebuild on source changes
npm run typecheck # TypeScript validation
npm test # regression tests
npm run build # production main.js
The production plugin consists of main.js, manifest.json, and styles.css. Source files and tests are included in this repository for review and maintenance.
Releasing
- Update the version with
npm version patch,npm version minor, ornpm version major. - Push the resulting commit and version tag.
- The release workflow verifies the project and creates a draft GitHub release containing the required plugin files.
- Review the generated draft and publish it.
Git tags must use the exact version number without a v prefix, for example 1.0.1.