package.json Generator
Visually build a package.json file — choose presets for Node, React, Next.js, and more, configure every field, and get live JSON output
Basic Info ▶
Lowercase, hyphens ok. Scoped: @scope/name.
Semantic versioning: MAJOR.MINOR.PATCH
Entry Points ▶
CJS entry point (require).
ESM entry point (import). Used by bundlers.
TypeScript declaration entry point.
CLI binary. Use "command-name → file" for named commands.
Scripts ▶
Runs on npm install (e.g. husky).
Format: name → command, one per line.
Dependencies ▶
Production dependencies. package@version, one per line.
Development-only dependencies. package@version, one per line.
Peer dependencies. package@version, one per line.
Metadata ▶
Comma-separated. Helps npm search discoverability.
Comma-separated. Files included when publishing.
Engines & Publishing ▶
Required Node.js version range.
Required npm version range.
Module system. "module" enables ESM with import/export.
Configure options on the left… About this tool
package.json Generator is a visual builder for npm package configuration.
Choose a preset for your framework (Node.js, React + Vite, Next.js, Express, CLI tool, or Vue),
then fill in the fields you need. The live JSON preview updates as you type, and you can
copy or download the finished package.json.
Examples:
-
Select the React (Vite) preset → get a standard config with
vitedev/build scripts, React 18 dependencies, TypeScript devDependencies, and"type": "module". -
Choose Express API → start script points to
src/index.js, dev mode uses Node's built-in--watchflag, and core Express dependencies are pre-filled.
FAQ
What is the difference between dependencies, devDependencies, and peerDependencies? ›
<code>dependencies</code> are packages your project needs at runtime (e.g. express, react). <code>devDependencies</code> are only needed during development (e.g. typescript, jest, vite). <code>peerDependencies</code> specify packages the consumer must provide — common for plugins and libraries (e.g. a React component library declares react as a peer dependency).
How does semver versioning work? ›
Semantic versioning uses <code>MAJOR.MINOR.PATCH</code> (e.g. 2.4.1). Increment MAJOR for breaking changes, MINOR for new features (backward-compatible), and PATCH for bug fixes. Prefixes like <code>^</code> allow MINOR+PATCH updates; <code>~</code> allows only PATCH updates.
When should I set "type": "module"? ›
Set <code>"type": "module"</code> when your project uses ES modules (import/export syntax). This affects how Node.js interprets <code>.js</code> files. If you use CommonJS (require/module.exports), either omit it or set <code>"type": "commonjs"</code>. Most modern frameworks (Vite, Next.js) use ESM.
What does the "files" field control? ›
The <code>files</code> array tells npm which files to include when publishing your package to the registry. Without it, npm includes everything except what is listed in <code>.npmignore</code> (or <code>.gitignore</code>). Specifying <code>["dist"]</code> means only the dist folder is published — keeping your package small.