If you’ve worked with Node.js for a while, you probably know the pain.
Updating dependencies usually looks like this:
- run
npm outdated - scan the terminal output
- manually update versions
- hope nothing breaks
- google changelogs just in case
It works… but it’s not exactly a great experience.
Coming from Visual Studio, I always missed how easy this was with NuGet — just open a UI, see everything, click update, done.
So I decided to build something similar for VS Code.
Meet NPM Visual Manager
It’s a VS Code extension that gives you a proper visual interface to manage your dependencies.
Instead of juggling terminal commands, you get a clean UI where everything is in one place.
What it does
📦 See everything at a glance
A table view showing:
- installed vs latest versions
- update types (major / minor / patch)
- security warnings
- dependency type (prod / dev / peer)
⚡ One-click updates
- update individual packages
- or update everything at once
No more editing package.json manually.
🔎 Search and install packages
Search directly from the npm registry and install without leaving the editor.
No more: npm install something
▶️ Run scripts easily
There’s also a scripts panel where you can run:
- dev
- build
- test
with a single click.
👁️ Ignore problematic packages
You know that one dependency that always breaks everything?
You can just ignore it and keep the rest up to date.
Why I built it
Honestly, it started as a personal tool.
Managing dependencies in Node projects always felt more manual than it should be. The tooling is powerful, but not very visual.
I wanted something that:
- feels native inside VS Code
- reduces context switching
- makes updates less risky and more transparent
Tech stack
The extension is built using:
- React + Vite (inside a Webview)
- VS Code Webview API
- TypeScript
The goal was to make it feel like a real part of the editor, not just a basic panel.
Available beyond VS Code
I also published it on Open VSX, so it works with other IDEs and editors like:
- Cursor
- Kiro
- Antigravity
- VSCodium and other compatible environments
Try it out
👉 VS Code Marketplace
https://marketplace.visualstudio.com/items?itemName=LuisClementDev.npm-visual-manager
👉 Open VSX
https://open-vsx.org/extension/LuisClementDev/npm-visual-manager
👉 GitHub (feel free to drop a ⭐ if you find it useful)
https://github.com/luisssc/npm-visual-manager
Feedback welcome
I'm actively improving the extension, so any feedback, ideas, or feature requests are more than welcome.
Top comments (0)