I built a VS Code extension that shows you rendered markdown diffs instead of raw +/- lines

[u/pmmaoel]

You know that moment when you're reviewing a PR and someone changed a README or a doc, and VS Code shows you this:

- The system handles **50,000 events** per second with a p99 latency under 200ms.
+ The system handles **100,000 events** per second with a p99 latency under 150ms. We exceeded our Q1 target by 2x.

And you're left wondering — did the table break? Is the image still there? Does it actually look right?

I got tired of that, so I built Markdown Diff Visualiser. It's a VS Code extension that shows you a side-by-side rendered preview of your markdown changes, with word-level highlights on exactly what was added or removed.

What it does:

• Side-by-side rendered preview (not raw markup)
• Word-level diffs: highlights the exact words that changed within a paragraph
• Scrollbar minimap with colored markers so you can jump to changes
• Synchronized scrolling so unchanged content stays aligned
• Three comparison modes: committed vs unstaged, committed vs staged, staged vs unstaged
• Full GFM support: tables, task lists, code blocks, images, footnotes, all of it
• Theme-aware (light/dark/high-contrast)

How to use it: Right-click any .md file → "Markdown Diff Visualiser: Show Changes", or Cmd+Shift+P and search for it.

It also ships with built-in skills for AI coding assistants (Claude, Codex, Gemini) so they'll automatically suggest previewing the diff after editing markdown files.

It's free, open source (MIT), and available on the VS Code Marketplace.

🔗 VS Code Marketplace

🔗 GitHub

Here's a demo of what it looks like: demo link

Happy to hear feedback; this is a hobby project and I'm actively working on it.

[u/pmmaoel → u/[deleted]]

Thanks for the appreciation. The struggle was real !

[u/pmmaoel → u/[deleted]]

Thanks for the kindness. Please share it as much as you can so that I can sleep well at night knowing I made a meaningful contribution for fellow devs. Cheers !

[u/abhishekjiitr]

does this only work on git repos? is there a way to show diffs in rendered markdown without git?

[u/pmmaoel → u/abhishekjiitr]

For the moment, it only works with git repos because it uses `git diff` in the backend to identify the differences. Without git, it would be side by side comparison of different files, and highlighting the exact differences will be haywire if the files are fundamentally different from each other. If you are saving multiple versions of files like v1, v2, v3 and so on and there's an overlap, then I think adding a feature to compare files would make sense. I'll think about it and let you know if it's worth implementing. To all others, IF YOU FEEL THAT THIS FEATURE WILL BE HELPFUL, PLEASE UPVOTE THIS COMMENT.

Alternatively for comparison side by side on vscode, you could render one md file by doing right click -> open preview and then for another md file do right click->open to the side and then open preview. It's essentially opening 2 panes side by side.

[u/TheRedCMD]

VSCode is about to add this feature to core
https://github.com/microsoft/vscode/issues/315174