liminfoNPM Dependency Graph
Free web tool: NPM Dependency Graph
About NPM Dependency Graph
The NPM Dependency Viewer parses any package.json file and displays all dependencies in a clean, filterable list. Paste your package.json into the text area and the tool immediately reads the "dependencies" and "devDependencies" fields, counts each group, and renders each package name alongside its version constraint. You can filter the view to show all packages, production-only (dependencies), or development-only (devDependencies) with a single click.
Frontend and backend developers use this tool when they need a quick overview of a project's dependency graph without running "npm ls" or installing the repository locally. It is also useful for code reviewers auditing pull requests, security engineers scanning for outdated or unexpected packages, and developers onboarding to a new codebase who want to understand its dependency structure at a glance. The tool displays the project name and version from the package.json root if present.
All parsing is done entirely client-side using the built-in JSON.parse() function — no data is ever sent to a server and the tool works without an internet connection once loaded. If the pasted text is not valid JSON, a parse error message is shown immediately. Color-coded badges distinguish production dependencies (green) from dev dependencies (yellow), making it easy to spot which packages ship to end users and which are build-time only.
Key Features
- Parses "dependencies" and "devDependencies" fields from any valid package.json
- Displays package name and version constraint for every dependency in a clean list
- Filter tabs to view All, prod (production), or dev (devDependencies) packages separately
- Summary badges showing total dependency count, production count, and dev count
- Shows project name and version from the package.json root metadata
- Immediate parse error feedback if the pasted JSON is invalid
- 100% client-side JSON parsing — no data leaves the browser, works offline
- Dark mode support and responsive layout for comfortable use on any device
Frequently Asked Questions
What is the difference between dependencies and devDependencies in package.json?
"dependencies" are packages required at runtime in production — they are installed when someone runs "npm install" in your project and are included in production builds. "devDependencies" are only needed during development and testing (e.g., TypeScript, ESLint, Jest) and are typically excluded from production deployments.
How do I use this tool to review a project's packages?
Copy the contents of a project's package.json file, paste it into the text area, and the tool will instantly display all packages grouped by type. Use the All / prod / dev filter buttons to focus on a specific group.
Does this tool show transitive (nested) dependencies?
No — this tool shows only the direct dependencies declared in the package.json you paste. Transitive dependencies (the packages your dependencies depend on) would require running "npm ls --all" or using a lock file parser.
Can I use this to check if a package.json is valid JSON?
Yes. If the text you paste is not valid JSON, the tool immediately shows a parse error with the specific syntax problem. This makes it a quick validator for package.json syntax before committing to version control.
What does the version constraint like "^1.2.3" or "~4.0.0" mean?
"^1.2.3" means accept any version compatible with 1.2.3 (i.e., >=1.2.3 <2.0.0). "~1.2.3" means accept patch-level updates only (>=1.2.3 <1.3.0). "4.0.0" without a prefix means exactly that version. These are npm semver range specifiers.
Can I use this tool with pnpm or yarn workspaces package.json?
Yes. The tool reads standard package.json fields. It will parse any valid package.json regardless of whether the project uses npm, pnpm, Yarn, or Bun, since the "dependencies" and "devDependencies" field format is identical across all Node.js package managers.
Why does the tool show only package names and version strings, not the full dependency graph?
A package.json's "dependencies" field describes only direct dependencies and their version ranges. Building the full dependency graph (including nested dependencies and their resolved versions) requires reading a lock file (package-lock.json, yarn.lock, pnpm-lock.yaml) or running an actual install. This tool focuses on the direct dependency overview, which is what's human-readable in a package.json.
Is this tool useful for security audits?
It provides a quick first step: you can see every direct dependency and its declared version constraint. However, for a proper security audit you should run "npm audit" or use a tool like Snyk that checks against vulnerability databases and also inspects transitive dependencies.