Let's see what is the difference between these two.

What is npm

npm (Node package manager) is the world's largest software registry. It is installed with Node.js which means that you have to install Node.js to get npm installed on your computer.
npm includes a CLI that can be used to download and install packages.

To start working with npm first we need to create package.json (this file holds various metadata relevant to the project. File is used to give information to npm that allows it to identify the project as well as handle the project's dependencies) file by executing this command:

npm init -y

This command will create package.json file in the current directory with default settings because we used -y flag.

To add packages from npm registry we can run this command:

npm i eslint

The command will add eslint linter to our project (it will create node_modules package and update package.json file with eslint as a dependency) - and basically, this is the main job of npm.

This is how package.json looks like after eslint installation:

{
  "name": "dev.to",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "eslint": "^6.8.0"
  }
}

Ok, so we have dependency included in our package, but how to use it? Well, this is the point where npx can jump in.

What is npx

npx is also a CLI tool whose purpose is to improve the experience of using packages from the npm registry (since npm version 5.2.0 npx is pre-bundled with npm - tnx StefanT123 for pointing this out). With npx it is easy to run any sort of Node.js based executable. Let's see examples:

To execute eslint we have two choices:

./node_module/.bin/eslint --init

Although, all node executable is located in .bin directory running the command above is not so user friendly, instead, we can use npx:

npx eslint --init

Much better!

If for some reason you do not want to use npx, you can install eslint globally:

npm install -g eslint

Now package will be installed in node_modules in user directory on your machine which means that you can run eslint globally in any directory.

Of course, there are a lot of use cases for npm and npx usage, I pointed out just basic ones.

Thank you for reading!