Starlight Previewer (VSCode extension)
One-click preview for .mdx / .md files in an Astro Starlight docs site. Opens the rendered page inside VSCode (Simple Browser tab) so writers don't need to leave the editor or remember URLs.
What it does
- Maps the active
.mdx / .md file path → URL slug on the local Astro dev server.
src/content/docs/rbac/api.mdx → http://localhost:4321/rbac/api/src/content/docs/howto/index.mdx → http://localhost:4321/howto/
- Pings the dev server. If it isn't running, starts
npm run dev in a hidden terminal and waits up to 30s.
- Calls VSCode's built-in
simpleBrowser.show to open the URL in a side tab.
Install
From a published .vsix
Releases are published to the GitLab Package Registry of this project. Install
straight from the URL:
code --install-extension <package-registry-url>/starlight-previewer-<version>.vsix
Or download the .vsix from the project's Packages page and:
code --install-extension starlight-previewer-<version>.vsix
From source
git clone <repo-url>
cd vscode-starlight-previewer
npm install
npm run package # produces starlight-previewer-<version>.vsix
code --install-extension starlight-previewer-<version>.vsix
Usage
Open any .mdx / .md under your Starlight content collection, then either:
- Ctrl+K V (Cmd+K V on macOS) — bound by default.
- Click the eye icon in the editor title bar.
Cmd+Shift+P → Starlight: Preview MDX in side panel.
The Simple Browser opens to the right with the matching page. Saves trigger Astro hot-reload — preview updates without re-invoking the command.
Settings
| Setting |
Default |
Effect |
starlightPreviewer.devServerUrl |
http://localhost:4321 |
Base URL of the running dev server. |
starlightPreviewer.docsRoot |
docs-site/src/content/docs |
Path of the Starlight content collection. |
starlightPreviewer.devServerCwd |
docs-site |
Where npm run dev runs. |
starlightPreviewer.autoStartDevServer |
true |
Auto-spawn the dev server if it's not reachable. |
License
MIT. Copyright © Kapernikov. See the LICENSE file in the repository.
