Empower your VS Code Activity Bar with real-time rendering, scroll-sync, and zoom controls. Supports a wide range of formats covering Markdown, LaTeX, Mermaid, JSON, YAML, and TOML.
Why do you need it?
In the age of AI-driven development, documentation is now a first-class citizen, processed locally and versioned directly in-repo. With the secondary sidebar becoming a mainstream hub for AI workflows, conventional previewing feels cramped and clunky. Enter Sidebar Previewer: it delivers real-time rendering in your sidebar, allowing you to fluidly switch between coding and previewing, with an added presentation mode to cover your entire workflow.
Supported Files
Type
Extensions
Markdown
.md, .markdown
LaTeX
.tex
Mermaid
.mmd, .mermaid
JSON
.json
YAML
.yaml, .yml
TOML
.toml
Feature Overview
Markdown
Front matter table
GitHub alert block rendering
Task list checkbox toggle-writeback
Code highlighting and copy button
KaTeX and Mermaid block rendering
Follow-scroll and locate between editor and preview
LaTeX
KaTeX rendering for inline formulas and common math environments
Follow-scroll and locate between editor and preview
Zoom support
Mermaid
Diagram rendering for .mmd and .mermaid
Basic syntax precheck with clear error feedback
Drag-to-pan interaction when zoomed
JSON / YAML / TOML
Collapsible tree view
Expand all / collapse all
Click key to jump to source line
Installation
Install from VSIX
Open VS Code
Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
Run Extensions: Install from VSIX
Select the provided .vsix package
Usage
Open any supported file (.md, .markdown, .tex, .mmd, .mermaid, .json, .yaml, .yml, .toml)
Click the Sidebar Previewer icon in the Activity Bar
The preview panel automatically renders the current file
Use toolbar buttons or Cmd/Ctrl + mouse wheel to zoom
In Mermaid preview, drag the diagram to pan
In JSON/YAML/TOML preview, click keys to locate source lines
Screenshots
Type
Screenshot
Markdown
LaTeX
Mermaid
JSON / YAML / TOML
Acknowledgements
marked: parses Markdown into HTML for preview rendering.
mermaid: renders Mermaid diagram blocks in Markdown and .mmd/.mermaid files.
katex: renders math formulas for Markdown and LaTeX preview.
highlight.js: provides syntax highlighting for code blocks.
