Easily update and bump npm dependency versions in your package.json file. A free, browser-based tool to manage semver versions securely and efficiently.
AI Generation Prompt
Project Specification: NPM Dependency Version Bumper Utility
1. Executive Summary
A high-performance, browser-based utility designed for developers to parse, manage, and update dependencies within a package.json file. The tool allows for visual version bumping (Major/Minor/Patch) and direct editing, followed by a clean export of the modified JSON.
2. Technical Constraints
- Architecture: Single-file HTML/CSS/JS.
- Storage: No
localStorageorsessionStorage. All state is ephemeral. - Compatibility: Sandboxed iframe compatible (no popups, no external storage).
- Frameworks: Pure Vanilla JS (ES6+). Tailwind CSS via CDN for styling.
3. Core Features
- JSON Input Engine: A large, syntax-highlighted textarea to paste existing
package.jsoncontent. - Real-time Parsing: Automatically detects dependency blocks (
dependencies,devDependencies,peerDependencies,optionalDependencies). - Visual Dependency List: A table-based UI listing all dependencies with input fields for version editing.
- Semver Bumper Buttons: Clickable "Major", "Minor", "Patch" buttons next to each dependency to auto-increment versions.
- Download/Copy: One-click copy to clipboard or download as a
.jsonfile. - Error Handling: Real-time JSON validation feedback to prevent broken file exports.
4. UI/UX Specifications
- Aesthetic: Clean, "SaaS" light mode aesthetic (white backgrounds, slate-700 text, indigo-600 buttons).
- Header: Simple, descriptive h1 title and brief instructions.
- Layout:
- Left Column (or top section on mobile): Input area.
- Right Column (or bottom section): Dynamic table of identified dependencies.
- Animations: Subtle transitions when rows are added or when version numbers update (fade-in/fade-out for status updates).
5. Implementation Roadmap
- Initialization: Build the basic skeleton with a flexible layout.
- Parsing Logic: Implement a robust JSON parser that handles edge cases in
package.jsonstructure. - State Management: Use a simple JS object to hold the current dependency state, updating the UI whenever the object changes.
- Interactivity: Attach event listeners to "Bump" buttons that regex-match the semver string and increment specific segments.
- Polishing: Add Tailwind classes for responsive spacing, consistent padding, and professional border-radius settings.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is an NPM package.json dependency bumper?
A dependency bumper is a utility designed to help software developers manage and update the version strings found within their `package.json` configuration files. It specifically targets the `dependencies`, `devDependencies`, `peerDependencies`, and `optionalDependencies` sections, allowing for quick adjustments to version constraints. By providing a graphical interface for managing these values, it removes the need to manually edit raw JSON, reducing the risk of syntax errors. This is particularly useful when preparing a project for a new release or when auditing the current version constraints of a large codebase.
How does this tool handle Semantic Versioning (Semver)?
The tool implements basic Semantic Versioning (Semver) logic to help you increment version numbers safely. It allows you to target specific parts of the version string—Major, Minor, or Patch—and update them according to industry standards. This ensures that your dependency declarations remain consistent with your intended update strategy. Users can choose to bump version numbers individually or modify them directly in a dedicated input field if they require custom version strings, such as specific pre-release tags. The tool validates the resulting JSON structure to ensure compatibility with Node.js and NPM package management standards.
Is my package.json data secure when using this tool?
Your data is entirely secure because this application operates strictly client-side. The tool is designed with a single-file architecture that runs directly within your web browser, meaning that no data—including your project files or dependency information—is ever uploaded to a server or stored in a database. Because the application does not utilize persistent storage like localStorage or cookies, every session remains isolated and ephemeral. Once you close your browser tab or refresh the page, all information is cleared from memory, providing a private and safe environment for managing your sensitive configuration files.
Can I use this for production-grade projects?
Yes, this tool is designed to produce valid, standard-compliant `package.json` files that are fully compatible with production Node.js workflows. It performs real-time JSON validation to ensure that any edits or version bumps do not corrupt the syntax, ensuring that the generated file can be immediately used with npm install or other package management commands. It is an excellent tool for quick audit cycles or preparing dependency lists for CI/CD pipelines. However, as with all configuration changes, it is recommended that developers review the generated JSON output before committing it to a version control system like Git, ensuring that version ranges align with their project's requirements.
