Package.json Diff

Compare two package.json files to find dependency differences, version changes, and script modifications instantly.

About This Tool

The Package.json Diff tool is a free, browser-based utility that compares two package.json files and highlights every difference in their dependencies, devDependencies, peerDependencies, optionalDependencies, and scripts sections. Instead of reading through two large JSON files line by line, you can paste both files and instantly see a structured table showing which packages were added, removed, or changed.

The tool automatically detects semver version bump types -- major, minor, patch, prerelease, and even downgrades -- so you can quickly assess the impact of upgrading. The summary panel provides an at-a-glance count of total dependencies, additions, removals, upgrades, and downgrades. You can filter the results to focus on just the changes you care about: added only, removed only, changed only, or unchanged.

This is especially useful when reviewing pull requests that update dependencies, comparing packages across monorepo workspaces, or auditing security updates. If you need a more general structural JSON comparison, try the JSON Diff tool. For text-level comparison, the Diff Viewer provides line-by-line highlighting. To generate a new package.json from scratch, use the Package.json Generator.

All processing runs entirely in your browser. Your package.json files are never sent to any server, making this tool safe to use with private or proprietary project configurations.

How to Use

  1. Paste your first package.json content into the Package A (Before) textarea on the left.
  2. Paste your second package.json content into the Package B (After) textarea on the right.
  3. Click Compare or press Ctrl+Enter to run the diff analysis.
  4. Review the Summary panel to see total counts of added, removed, changed, upgraded, and downgraded dependencies.
  5. Use the Filter buttons to narrow results to added, removed, changed, or unchanged packages only.
  6. Check the dependency tables for each section (dependencies, devDependencies, peerDependencies) with version bump indicators (MAJOR, MINOR, PATCH, DOWN).
  7. Review the scripts table to see added, removed, or modified npm scripts.
  8. Click Copy Results or press Ctrl+Shift+C to copy the diff output as formatted text.
  9. Use the Swap button to quickly reverse the comparison direction.

Popular Package.json Diff Examples

View all package.json diff examples →

FAQ

What dependency sections are compared?

The tool compares dependencies, devDependencies, peerDependencies, and optionalDependencies. It also compares the scripts section separately. All sections are analyzed independently and displayed in their own tables.

How does version bump detection work?

The tool strips semver prefixes (^, ~, >=, etc.) and compares the major.minor.patch numbers between versions A and B. It labels changes as MAJOR (breaking), MINOR (feature), PATCH (bugfix), PRE (prerelease), or DOWN (downgrade). If the version string cannot be parsed as semver, it shows '?' as the bump type.

Can I compare package-lock.json or yarn.lock?

This tool is designed specifically for package.json files. Lock files have a different structure with nested dependency trees. For comparing lock files as raw text, try the Diff Viewer tool instead.

Does the tool detect packages that moved between sections?

Currently, each section (dependencies, devDependencies, etc.) is compared independently. A package that moves from devDependencies to dependencies will appear as 'removed' in devDependencies and 'added' in dependencies.

Can I use this for monorepo workspace comparisons?

Yes. You can paste any two package.json files regardless of where they come from. This is useful for comparing root vs workspace package.json files, or comparing packages across different workspaces in a monorepo.

Is my data safe?

Yes. All processing runs entirely in your browser using JavaScript. No package.json content, dependency names, or version numbers are ever sent to any server. You can verify this by checking the Network tab in your browser's developer tools.

What happens with version ranges like ^, ~, or *?

The tool displays the full version strings as-is in the table. For bump detection, it strips the range prefixes (^, ~, >=, etc.) and compares the underlying semver numbers. If a version is a complex range or wildcard that cannot be parsed, the bump type is shown as '?'.

Related Tools