Drop real HTML, CSS, and JavaScript into any Obsidian note. It renders as a live, interactive mini-webpage — sandboxed, isolated, and part of your document.
No compromises. Full browser capabilities inside your notes, completely isolated from Obsidian.
Event listeners, DOM manipulation, timers, fetch API, Web Workers — everything works inside the sandbox.
Draw graphics, create charts, animate vectors. The 2D canvas and SVG elements work exactly as expected.
Flexbox, Grid, responsive breakpoints, animations, transitions — complete CSS3 support with media queries.
Each preview runs in an isolated iframe. No CSS or JS leaks into Obsidian or other previews.
Preview height adjusts automatically to content using ResizeObserver. No manual height guessing.
Expand any preview to fill the screen for complex layouts or presentations. One click to toggle.
Click the tabs to see different previews — all live, all interactive.
From zero to live HTML in your notes.
Copy main.js, manifest.json, and styles.css into your vault's .obsidian/plugins/html-preview/ folder.
In any note, open a html-preview code block and write standard HTML, CSS, and JavaScript.
Switch to Reading Mode. Your code renders as an interactive, sandboxed webpage inside the note.
Once approved by the Obsidian team, you'll be able to install directly from the Community Plugins browser — no manual setup needed.
Currently under review. You can still install manually from GitHub in the meantime.
Follow progress on GitHubClone the repo, build, and copy three files into your vault. Or download the latest release directly from GitHub.
Download Releasegit clone https://github.com/sunshinelife83/obsidian-html-preview.gitcd obsidian-html-previewnpm install && npm run buildcp main.js manifest.json styles.css ~/.obsidian/plugins/html-preview/