OnAir
Turn the currently open Markdown, HTML, or image file into a live local preview link: open it in a browser, or copy the link and share it with a colleague or another device. The browser content refreshes automatically as you edit — no need to manually refresh, and no need to save the file first.
The following markdown:
will be rendered like this:
Features
- Markdown, HTML & images — generate a link from the Command Palette, right-click menu, or title bar icon, then open in browser or copy the link; image files (png/jpg/gif/webp/svg/bmp/ico) open as a live preview
- PDF preview — open PDF files with continuous scroll rendering powered by pdf.js
- Stable links — the same file always gets the same address; multiple files can preview at once
- Stable port per project — the preview server binds to a port derived from the project directory (instead of a fixed 6868), so links stay valid across restarts
- Live sync — edits refresh automatically (no save needed); Markdown updates in place, HTML reloads
- Math formulas —
$..$ and $$..$$ LaTeX rendered with KaTeX; hover a formula to preview and copy its source
- Table of contents — nested navigation, scroll tracking, resizable, collapsible; shows the file's relative path; plus a Related documents list, and relative links to other docs open as previews
- File tree — project file tree with search (
*.svg), filter (.md, .gitignore, unsupported files), expand-to-current-file, and state persistence
- Content search — a "Search" tab in the Files panel runs a VS Code–style Find in Files across the whole project (ripgrep), grouped by file with line numbers; click any match to jump to that line
- Code file preview — JSON/JS/TS/CSS/TXT/LOG files open inline with JSON syntax highlighting
- Multi-theme — 16 preset themes
- Annotations & footnotes —
==highlight== with an adjacent note (^[...] or [^id]) shows as a right-margin annotation card anchored to the highlighted text; other footnotes render in a collapsible bottom block. Notes open on click (or on hover with the toggle on); both blocks are collapsible
- Assets just work — sibling files (
images/, embeds/, …) and relative references are served automatically
- Reading comfort — code highlighting with a wrap toggle, font size and scrollbar/content width controls
- Cross-references —
.md filename links to a path-proximity picker
- IEEE citations — numeric citations
[3], [2, 7], [8-10] link to the reference entries
- Diagrams — render Mermaid flowcharts and sequence diagrams from
```mermaid ``` fences (auto-themed, offline fallback)
- LAN sharing — get a localhost and a LAN IP link so others on your WiFi can open the preview
Usage
- Open a
.md, .html, or image file
- Open the Command Palette with
Cmd+Shift+P and run OnAir: Generate Live Preview Link (or click the globe icon in the top-right of the editor)
- Choose Open in Browser or Copy Link (the menu also offers (LAN) variants when a local network is detected)
- Keep editing — the browser content updates automatically
How it works / Notes
- A local HTTP + WebSocket server starts on the first free port from
6868; links look like http://127.0.0.1:<port>/preview/<id>.
- The (LAN) options swap
127.0.0.1 for your machine's LAN IP so others on the same network can open the preview. These links aren't public.
- The server runs while VS Code is open and stops when it closes, so links expire then.
- Assets are served only from within the previewed file's project (its workspace folder, or its own directory otherwise), so
../ paths inside the project resolve while nothing outside is exposed.
- Markdown link paths with spaces or non-ASCII characters must be percent-encoded (
images/%E5%9B%BE.png) or wrapped in angle brackets (), or Markdown won't parse them.
Install (from market)
- Download from Visual Studio Marketplace or
- Download from openvsx
Install (from source)
pnpm install
pnpm run compile
Then press F5 in VS Code to launch the Extension Development Host, or package with vsce package.
| |
