# @tanstack/devtools-event-client

> TanStack Event Client is a lightweight event client for TanStack Devtools event bus.

Latest version **0.5.0** (published 2026-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tanstack/devtools-event-client
pnpm add @tanstack/devtools-event-client
yarn add @tanstack/devtools-event-client
bun add @tanstack/devtools-event-client
```

Provides the command `intent`.

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2026-06-24 |
| First published | 2025-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 109.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 500 |
| Author | Tanner Linsley |
| Maintainers | tannerlinsley, alemtuzlak |
| Keywords | devtools |

## Links

- npm: https://www.npmjs.com/package/@tanstack/devtools-event-client
- Repository: https://github.com/TanStack/devtools
- Homepage: https://tanstack.com/devtools
- Issues: https://github.com/TanStack/devtools/issues
- Funding: https://github.com/sponsors/tannerlinsley
- npm.io page: https://npm.io/package/@tanstack/devtools-event-client

## Recent versions

- 0.5.0 (latest) — 2026-06-24
- 0.4.4 — 2026-06-19
- 0.4.3 — 2026-03-11
- 0.4.2 — 2026-03-11
- 0.4.1 — 2026-03-04
- 0.4.0 — 2025-12-08
- 0.3.5 — 2025-11-12
- 0.3.4 — 2025-10-28
- 0.3.3 — 2025-10-10
- 0.3.2 — 2025-09-25
- 0.3.1 — 2025-09-24
- 0.3.0 — 2025-09-19
- 0.2.5 — 2025-09-18
- 0.2.4 — 2025-09-08
- 0.2.3 — 2025-08-29
- … 3 more at https://npm.io/package/@tanstack/devtools-event-client/versions

## README

# @tanstack/devtools-event-client

This package is still under active development and might have breaking changes in the future. Please use it with caution.

## General Usage

```tsx
import { EventClient } from '@tanstack/devtools-event-client'

interface EventMap {
  'query-devtools:a': { foo: string }
  'query-devtools:b': { foo: number }
}

class QueryDevtoolsPlugin extends EventClient<EventMap> {
  constructor() {
    super({
      pluginId: 'query-devtools',
    })
  }
}

export const queryPlugin = new QueryDevtoolsPlugin()

// I'm fully typed here
plugin.emit('a', {
  foo: 'bar',
})
plugin.on('b', (e) => {
  // I'm fully typed here
  e.payload.foo
})
```

## Understanding the implementation

The `EventClient` class is a base class for creating plugins that can subscribe to events in the TanStack Devtools event bus. It allows you to define a set of events and their corresponding data schemas using a standard-schema based schemas.

It will work on both the client/server side and all you have to worry about is emitting/listening to events.

## Production builds

By default the **root import** of `@tanstack/devtools-event-client` no-ops
outside development. When your bundler sets `process.env.NODE_ENV` to anything
other than `'development'`, the real client is replaced by a no-op and
tree-shaken out of your production bundle:

```ts
// dev: real client — production: no-op (tree-shaken away)
import { EventClient } from '@tanstack/devtools-event-client'
```

If you are an open-source author who deliberately wants devtools events in
production, import the real client from the `/production` subpath instead. It is
never stripped:

```ts
// always the real client, in every environment
import { EventClient } from '@tanstack/devtools-event-client/production'
```

The public API is identical between the two imports — only the production
runtime behavior differs.

"Outside development" includes when `NODE_ENV` is unset — common in plain Node scripts, some SSR dev servers, and test runners — so the root import resolves to the no-op there too. Set `NODE_ENV=development`, or use the `/production` subpath, to get the real client in those contexts.

---
_Source: https://npm.io/package/@tanstack/devtools-event-client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._