npm vs npx

npm (Node Package Manager)

npm is the default package manager for Node.js. It handles installing, updating, and managing project dependencies defined in package.json.

Key responsibilities

• Install packages locally or globally
• Manage dependencies and their versions via package.json and package-lock.json
• Run scripts defined in the scripts section of package.json

Common commands

# Install all dependencies listed in package.json
npm install

# Add a package as a project dependency
npm install react

# Add a package as a dev dependency
npm install --save-dev jest

# Install a package globally (available system-wide)
npm install -g typescript

# Run a script defined in package.json
npm run build

npm install <package> downloads the package into the node_modules/ directory and records it in package.json.

npx (Node Package Execute)

npx is a package runner that ships with npm (version 5.2 and later). Rather than installing a package and then running it, npx executes a package directly, without a permanent installation.

Key responsibilities

• Run packages without installing them globally
• Execute one-off commands from packages that are not project dependencies
• Ensure the latest version of a tool is used each time

Common commands

# Scaffold a new React application without installing the generator globally
npx create-vite@latest my-app

# Run a pinned version of a tool whose command name differs from the package name
npx --package typescript@5 tsc --init

# Run a locally installed package binary
npx jest --watch

Key differences

Aspect	npm	npx
Purpose	Install and manage packages	Execute packages directly
Installation	Downloads packages to node_modules/ or globally	Downloads temporarily, executes, then discards
Disk usage	Packages persist on disk	No permanent storage for one-off executions
Version	Uses the installed version	Can fetch and run any specific version
Typical use case	Adding libraries to a project	Running CLI tools and project generators

Practical example: project generators

Before npx, using a project generator required two steps:

# Step 1: Install the generator globally
npm install -g create-vite

# Step 2: Use the generator
create-vite my-app

The problem with this approach is that the globally installed generator becomes outdated, so projects are scaffolded from old templates and stale dependencies — and the machine accumulates one global install per generator.

With npx it is a single step that fetches the current version each time:

npx create-vite@latest my-app

This is the mechanism behind the scaffolding commands published by most tools, including npm create vite@latest. npm create is an alias of npm init, which expands the bare name vite to the package create-vite and then runs it the same way npx would.

When to use each

• npm for a package that belongs to the project — a dependency the code imports — or for a tool that should stay installed on the machine.
• npx for a CLI tool or generator that runs once: nothing is added to the global installs, and the current version is fetched each time.

npx resolves the command name to a package of the same name. When they differ — tsc lives in the typescript package — name the package explicitly with --package (-p) and give the command after it.