Nexus NPM

A powerful visual package manager for VS Code — search, install, audit, and analyze npm packages without ever touching the terminal.

Install from Marketplace · Report a Bug · Request a Feature

What is Nexus NPM?

Nexus NPM is a VS Code extension that replaces the terminal for all your npm workflows. Instead of memorizing commands, switching windows, and parsing raw text output — you get a clean, visual interface directly in your editor sidebar.

Search the npm registry, install packages with one click, check for vulnerabilities, analyze bundle sizes, verify licenses, and get smart suggestions for lighter alternatives. Everything a professional Node.js developer needs, built into the tool they already use all day.

Features

🔍 Package Search

Search the entire npm registry instantly. Browse results with descriptions, version badges, license info, keywords, author, homepage, and a quality score. Click any package to expand its details, or jump straight to its npm page.

📦 Install with Precision

Every package can be installed as a local dependency, dev dependency, or globally — all from a single split button. Need a specific version? Click Choose version to browse every published release with dist-tags (latest, beta, next) highlighted. Switch versions on already-installed packages just as easily.

🗂 Multi-Project Support

Working in a monorepo or a workspace with multiple package.json files? Nexus NPM automatically detects all of them and lets you switch between projects from a dropdown in the header. Local package lists, outdated checks, and installs all target whichever project you have selected.

🌐 Local & Global Package Management

The Local and Global tabs list every installed package with its current version. Filter by name, refresh on demand, see which packages are outdated, and uninstall with a two-click confirm guard so you never accidentally remove something.

🛡 Security Audit

One click runs npm audit and presents the results in a readable format — severity pills for critical, high, moderate, low, and info counts, followed by each vulnerability with its title, affected package, and a direct link to the advisory. Fix-available badges tell you immediately when an automated fix exists.

📊 Bundle Size Analysis

See exactly how much each dependency adds to your bundle, powered by Bundlephobia. A proportional bar chart shows which packages dominate your total size — bars turn red for packages over 30% of the total, amber for over 15%, and green for the rest. Click any package to open its full Bundlephobia analysis.

⚖️ License Checker

Instantly scan every direct dependency's license and flag anything that might cause legal problems. MIT, ISC, Apache-2.0 and other permissive licenses are marked green. LGPL and MPL licenses get an amber review warning. GPL, AGPL, and SSPL licenses — which can require you to open-source your own code — are flagged red with a "check with legal" note.

💡 Smart Suggestions

Tap any installed package to see well-known lighter or better-maintained alternatives. For example: moment → dayjs (97% smaller), request → axios or node-fetch, uuid → nanoid. Each suggestion shows the reason to switch, bundle size, and weekly download count so you can make an informed decision.

📋 Live Terminal Log

Every install and uninstall streams real npm output into a collapsible log panel inside the extension. No need to open a separate terminal — watch progress, spot errors, and see exactly what npm did.

Screenshots

Search	Local Packages	Security Audit

Bundle Sizes	License Checker	Smart Suggestions

Installation

From the Marketplace

1. Open VS Code
2. Press Ctrl+Shift+X (or Cmd+Shift+X on Mac) to open Extensions
3. Search for Nexus NPM
4. Click Install

From the Command Line

code --install-extension dhruvsuvarna.nexus-npm

Getting Started

1. After installing, click the ⬡ icon in the Activity Bar on the left side of VS Code
2. Open a folder that contains a package.json file (or any Node.js project)
3. Nexus NPM will automatically detect your project and show it in the header dropdown
4. Use the Search tab to find and install packages, or navigate to Local / Global to manage existing ones
5. Visit the ✦ Insights tab to run a security audit, check bundle sizes, and verify licenses

Usage

Installing a package

1. Go to the Search tab
2. Type a package name — results appear as you type
3. Click Install ▾ on any result
4. Choose Local dependency, Dev dependency, or Global install
5. Watch the log panel stream the install progress

Installing a specific version

1. Click the ▾ chevron on any Install button
2. Select Choose version
3. Browse the full version list — dist-tags like latest and beta are highlighted
4. Click the version you want

Switching versions on an installed package

1. Go to the Local or Global tab
2. Click the version badge on any package
3. A version picker opens — click any version to switch to it

Running a security audit

1. Go to ✦ Insights → Security
2. Click Run npm audit
3. Results show severity counts and individual vulnerabilities with advisory links

Checking bundle sizes

1. Go to ✦ Insights → Bundle sizes
2. Click Analyze bundle sizes
3. Each package shows its minified size, gzipped size, and a proportional bar

Checking licenses

1. Go to ✦ Insights → Licenses
2. Click Check licenses
3. Each package is color-coded: green (safe), amber (review), red (risky)

Requirements

• VS Code 1.85.0 or higher
• Node.js 16.0.0 or higher
• npm installed and available in your PATH

Extension Settings

Nexus NPM works out of the box with no configuration required.

Local Development

If you want to contribute or build from source:

# Clone the repository
git clone https://github.com/Dhruv9051/nexus-npm.git
cd nexus-npm

# Install dependencies (also installs webview deps automatically)
npm install

# Build the React webview
npm run build:webview

# Compile the TypeScript extension host
npm run compile

# Press F5 in VS Code to launch the Extension Development Host

Project Structure

nexus-npm/
├── src/                    # Extension host (TypeScript, runs in Node.js)
│   ├── extension.ts        # Entry point, registers commands and view provider
│   ├── viewProvider.ts     # Sidebar webview provider
│   ├── panel.ts            # Full-screen panel (optional)
│   ├── messageHandler.ts   # Routes messages between webview and extension host
│   ├── npmOperations.ts    # All npm CLI operations (install, uninstall, list)
│   ├── registry.ts         # npm registry API (search, versions)
│   ├── insights.ts         # Security audit, bundle sizes, licenses, alternatives
│   └── messages.ts         # Shared message type definitions
├── webview/                # React UI (compiled to webview/dist/)
│   ├── src/
│   │   ├── App.tsx         # Root component, tab routing, global state
│   │   ├── vscode.ts       # VS Code API bridge
│   │   └── components/
│   │       ├── SearchTab.tsx
│   │       ├── InstalledTab.tsx
│   │       ├── InsightsTab.tsx
│   │       └── LogPanel.tsx
│   └── vite.config.ts
├── media/                  # Icons
└── package.json            # Extension manifest

Making Changes

How It Works

Nexus NPM is split into two parts that communicate via vscode.postMessage():

Extension Host runs in Node.js inside VS Code. It has full access to the file system, can spawn child processes (npm commands), and make HTTPS requests to the npm registry and Bundlephobia API.

Webview UI is a React app rendered in an iframe-like panel. It cannot run npm directly — instead it sends typed messages to the extension host and receives results back.

This architecture means the UI stays fast and reactive while all the heavy lifting (npm, file system, network) happens on the Node.js side.

Contributing

Contributions are welcome. Please open an issue first to discuss what you'd like to change.

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -m 'Add my feature'
4. Push to the branch: git push origin feature/my-feature
5. Open a Pull Request

Roadmap

• [ ] package.json script runner — run npm scripts from the UI
• [ ] Dependency graph visualization
• [ ] Export audit/license reports as PDF
• [ ] Workspace-wide outdated summary across all projects
• [ ] Dark/light theme toggle for the webview

License

MIT — see LICENSE for details.