Install Strophe.js: npm, CDN, and UMD Setup Guide

Strophe.js is published to npm as strophe.js and ships a single package with multiple distribution formats — an ES module bundle, a CommonJS bundle, a Node.js-specific ESM build, and a UMD browser bundle. You can install it with any Node.js package manager, load it from a CDN for quick prototyping, or drop the UMD file directly into a <script> tag. The sections below walk through each path.

Install via Package Manager

Install the package

Run the install command for your preferred package manager:

npm install strophe.js

Install peer dependencies (Node.js only)

When running in Node.js, the browser-native WebSocket and DOM APIs are not available. Strophe.js declares jsdom and ws as optional peer dependencies to fill this gap:

npm install jsdom ws

ws — a WebSocket client/server implementation for Node.js, used by the Websocket and WorkerWebsocket transports.
jsdom — a full DOM implementation for Node.js, used for XML parsing and stanza construction.

Both packages are optional: if you only target browsers you can skip this step entirely.

Import the library

Add the import to your source file. All public exports are available from the top-level strophe.js specifier:

import { Strophe, $build, $msg, $iq, $pres, stx } from 'strophe.js';

See the Import Examples section below for the full list of named exports and the equivalent CommonJS require syntax.

Package Entry Points

The package.json defines separate entry points so bundlers and runtimes automatically receive the right format:

Field	File	Used by
`module`	`dist/strophe.esm.js`	Browser ESM bundlers (Vite, Rollup, webpack)
`browser` (require)	`dist/strophe.umd.cjs`	Browser CJS bundlers
`main` (node)	`dist/strophe.cjs`	Node.js `require()`
`node` (import)	`dist/strophe.node.esm.js`	Node.js `import`
`unpkg` / CDN	`dist/strophe.umd.min.js`	`<script>` tags, CDN
`types`	`dist/types/index.d.ts`	TypeScript compiler

You never need to reference these paths directly — the exports map in package.json routes import/require calls to the correct file based on the environment automatically.

Import Examples

Browser (ESM)
Node.js (ESM)
Node.js (CJS)
Browser (CDN / UMD)

Modern bundlers targeting browsers resolve the module entry point. Import the named exports you need:

import { Strophe, $build, $msg, $iq, $pres, stx } from 'strophe.js';

const conn = new Strophe.Connection('wss://chat.example.com/websocket');

All of $build, $msg, $iq, $pres, Strophe, and stx are also registered on globalThis by the library, so they are available as globals in browser environments without an explicit import.

Node.js ESM imports resolve the node > import export condition, which picks the dist/strophe.node.esm.js build. Make sure the peer dependencies are installed first.

import { Strophe, $msg, $pres } from 'strophe.js';

const conn = new Strophe.Connection('wss://chat.example.com/websocket');
conn.connect('user@example.com', 'password', (status) => {
  if (status === Strophe.Status.CONNECTED) {
    console.log('Connected as', conn.jid);
  }
});

CommonJS require in Node.js resolves the node > require export condition, pointing to dist/strophe.cjs:

const { Strophe, $msg, $iq, $pres, $build, stx } = require('strophe.js');

const conn = new Strophe.Connection('https://chat.example.com/http-bind');

For quick prototypes or pages that don’t use a bundler, load the minified UMD bundle from unpkg:

<script src="https://unpkg.com/strophe.js/dist/strophe.umd.min.js"></script>
<script>
  // Strophe, $build, $msg, $iq, $pres, and stx are now globals
  const conn = new Strophe.Connection('wss://chat.example.com/websocket');
</script>

The UMD bundle exposes Strophe as a global on window (and globalThis) along with the stanza builder helpers $build, $msg, $iq, $pres, and stx.

TypeScript Support

TypeScript type declarations are generated from the source and placed at dist/types/index.d.ts. The types field in package.json points there, so no @types/strophe.js package is needed — types are resolved automatically when you add strophe.js to your project.

import { Strophe, $iq } from 'strophe.js';

const conn = new Strophe.Connection('wss://chat.example.com/websocket', {
  mechanisms: [Strophe.SASLSHA256, Strophe.SASLPlain],
  keepalive: true,
});

Strophe.js v4.1 will complete the migration to full TypeScript source. Type definitions were first introduced in v2.0 via JSDoc annotations and generated type declaration files. If you are on an older version and see missing types, upgrade to v2.0 or later.

Getting Started

Core Concepts

Guides

Install Strophe.js: npm, CDN, and UMD Setup Guide

Install via Package Manager

Package Entry Points

Import Examples

TypeScript Support

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Guides

Documentation Index

​Install via Package Manager

​Package Entry Points

​Import Examples

​TypeScript Support

Build docs developers (and LLMs) love

Install via Package Manager

Package Entry Points

Import Examples

TypeScript Support