> For the complete documentation index, see [llms.txt](https://dnotifier.gitbook.io/product-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dnotifier.gitbook.io/product-docs/getting-started/installation/javascript-typescript.md).

# JavaScript / TypeScript

The DNotifier JavaScript SDK works in **Node.js** and **browsers**. It ships as an npm package with ESM and CommonJS entry points and TypeScript declarations.

## Requirements

* **Node.js** 18+ (for server-side use), or a modern browser with WebSocket support
* npm, yarn, or pnpm
* DNotifier **appId** and **secret** from the [dashboard](https://app.dnotifier.com) — see [**Create an app**](/product-docs/getting-started/create-app.md)

## Install the package

```bash
npm install @dnotifier-realtime/dnotifier
```

Using yarn or pnpm:

```bash
yarn add @dnotifier-realtime/dnotifier
pnpm add @dnotifier-realtime/dnotifier
```

Package on npm: [@dnotifier-realtime/dnotifier](https://www.npmjs.com/package/@dnotifier-realtime/dnotifier)

## ESM (recommended)

The package is `"type": "module"`. Use native `import` in Node.js and bundlers (Vite, webpack, esbuild):

```js
import { DNotifier } from "@dnotifier-realtime/dnotifier";
```

TypeScript projects resolve types from `dist/dnotifier.d.ts` automatically.

## CommonJS

For legacy Node.js `require()`:

```js
const { DNotifier } = require("@dnotifier-realtime/dnotifier");
```

The package exposes a dedicated CJS build via the `require` export condition.

## Node.js — WebSocket implementation

Browsers provide `WebSocket` globally. **Node.js does not.** When using `transport: "ws"`, pass a WebSocket class:

```bash
npm install ws
```

```js
import WebSocket from "ws";
import { DNotifier } from "@dnotifier-realtime/dnotifier";

const notifier = new DNotifier({
  appId: process.env.DNOTIFIER_APP_ID,
  secret: process.env.DNOTIFIER_SECRET,
  transport: "ws",
  userId: "user-123",
  WebSocketImpl: WebSocket,
  onConnected: () => {},
  onMessage: () => {},
  onDisconnected: () => {},
});
```

For `transport: "http"`, no WebSocket package is required.

## Browser

In the browser, omit `WebSocketImpl` — the SDK uses the native `WebSocket` API:

```js
import { DNotifier } from "@dnotifier-realtime/dnotifier";

const notifier = new DNotifier({
  appId: import.meta.env.VITE_DNOTIFIER_APP_ID,
  secret: import.meta.env.VITE_DNOTIFIER_SECRET,
  transport: "ws",
  userId: "user-123",
  onConnected: () => console.log("Connected"),
  onMessage: (msg) => console.log(msg.payload.toJSON()),
  onDisconnected: () => {},
});
```

{% hint style="warning" %}
Avoid embedding your app **secret** in public frontend bundles in production. Prefer a backend proxy or short-lived tokens. See [**Credentials & environment**](/product-docs/getting-started/credentials.md).
{% endhint %}

## TypeScript

Types are included. No separate `@types` package is needed:

```ts
import { DNotifier } from "@dnotifier-realtime/dnotifier";

const notifier = new DNotifier({
  appId: process.env.DNOTIFIER_APP_ID!,
  secret: process.env.DNOTIFIER_SECRET!,
  transport: "ws",
  userId: "user-123",
  onConnected: (): void => {},
  onMessage: (msg): void => {
    const body = msg.payload.toJSON();
    console.log(msg.metadata.sender, body);
  },
  onDisconnected: (): void => {},
});
```

## Verify installation

Create a small script:

```js
import { DNotifier } from "@dnotifier-realtime/dnotifier";

console.log(typeof DNotifier); // "function"
```

If the import succeeds, installation is complete.

## Next steps

* [**Your first connection — JavaScript / TypeScript**](/product-docs/getting-started/first-connection/javascript-typescript.md)
* [**Your first message — JavaScript / TypeScript**](/product-docs/getting-started/first-message/javascript-typescript.md)
* [**Choose your transport**](/product-docs/getting-started/choose-transport.md)