npx vs npm: What's the Difference?

If you've worked with Node.js, you've used npm. But npx trips people up — it looks similar, it ships with npm, yet it does something fundamentally different. This post explains the distinction clearly with practical examples.

npm — Node Package Manager

npm manages packages: installing, updating, removing, and tracking dependencies in your project.

npm install lodash          # install as a project dependency
npm install -g typescript   # install globally on your machine
npm uninstall lodash        # remove a package
npm update                  # update all packages
npm list                    # show installed packages and versions

When you run npm install, npm downloads packages into node_modules and records them in package.json. Those packages stay on your machine until you explicitly remove them.

npx — Node Package Executor

npx runs a package without installing it permanently. It temporarily fetches the package, executes it, then discards it.

npx create-react-app my-app

This runs create-react-app without you ever having to install it globally. Perfect for CLI tools you use occasionally.

Side-by-Side Comparison

Practical Examples

Creating a React app

# With npx — no global install needed
npx create-react-app my-app

# With npm — requires a prior global install
npm install -g create-react-app
create-react-app my-app

The npx approach is cleaner and always runs the latest version of the tool.

Running a one-off script

# Run a linter without installing it in your project
npx eslint src/

# Generate types from an OpenAPI spec
npx openapi-typescript schema.yaml -o types.ts

Running a specific version

npx node@18 --version   # run a command with a specific Node version

When to Use Which

Use npm install when:

• You're adding a library your code will import (express, lodash, react)
• You're adding a dev tool that runs frequently (eslint, jest, typescript)

Use npx when:

• You're using a scaffolding tool once (create-react-app, create-next-app)
• You want to run the latest version without worrying about a stale global install
• You're trying a package without committing to it

How npx Resolves Packages

npx doesn't blindly download from the internet every time. It follows a resolution order:

1. Local node_modules/.bin — if the package is already installed in your project, npx runs it directly without downloading anything
2. Global install — if the package is globally installed, npx uses that
3. npm registry — only if neither of the above is found does npx download the package temporarily

This means npx jest in a project that has Jest installed will run your project's version of Jest — no download needed. npx isn't just a remote runner; it's a smart executor that prefers local installs.

npm Scripts as an Alternative

Your package.json can define custom scripts that run locally installed binaries directly, without needing npx:

// package.json
{
  "scripts": {
    "lint": "eslint src/",
    "format": "prettier --write .",
    "type-check": "tsc --noEmit"
  }
}

Run them with:

npm run lint
npm run format
npm run type-check

This is the preferred approach for tools that run frequently in a project (linters, formatters, test runners). The binaries live in node_modules/.bin, and npm knows to look there when executing scripts. You don't need to install ESLint globally or use npx for a project-local tool you run daily.

Keeping Global Installs Clean

Before npx, the common advice was to install project scaffolding tools globally:

npm install -g create-react-app
npm install -g @angular/cli
npm install -g vue-cli

This leads to several problems: global installs can go stale (you're running an old version), they pollute your system, and they can conflict between projects. npx solves all three — you always run the latest version, nothing persists, and there's no global state to manage.

As a rule: install globally only tools you genuinely use across all projects (like serve, http-server) and let npx handle everything else.

pnpm and pnpx

If you use pnpm as your package manager, the equivalent executor is pnpm dlx (formerly pnpx):

pnpm dlx create-react-app my-app    # equivalent to npx create-react-app
pnpm exec eslint src/               # run a locally installed package

The distinction between "run local" (exec) and "download and run" (dlx) is more explicit with pnpm than with npx, which handles both cases automatically.

Summary

npm and npx complement each other. npm is for managing the packages your project depends on long-term. npx is for running packages on the fly without the overhead of a global install. For tools you run repeatedly in a project, define them as npm run scripts instead — it's more explicit, version-pinned, and doesn't require npx at all.