TanStack · AlemTuzlak · Mar 4, 2026 · Mar 4, 2026 · Mar 4, 2026 · Mar 4, 2026
diff --git a/.changeset/simplify-event-client-types.md b/.changeset/simplify-event-client-types.md
@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-event-client': patch
+'@tanstack/devtools-client': patch
+---
+
+Simplify EventClient types to accept unprefixed event maps
diff --git a/examples/preact/basic/src/plugin.ts b/examples/preact/basic/src/plugin.ts
@@ -1,15 +1,15 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 interface EventMap {
-  'query-devtools:test': {
+  test: {
     title: string
     description: string
   }
-  'query-devtools:init': {
+  init: {
     title: string
     description: string
   }
-  'query-devtools:query': {
+  query: {
     title: string
     description: string
   }

diff --git a/examples/preact/custom-devtools/src/eventClient.ts b/examples/preact/custom-devtools/src/eventClient.ts
@@ -1,15 +1,12 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 type EventMap = {
-  // The key of the event map is a combination of {pluginId}:{eventSuffix}
-  // The value is the expected type of the event payload
-  'custom-devtools:counter-state': { count: number; history: Array<number> }
+  'counter-state': { count: number; history: Array<number> }
 }
 
 class CustomEventClient extends EventClient<EventMap> {
   constructor() {
     super({
-      // The pluginId must match that of the event map key
       pluginId: 'custom-devtools',
       debug: true,
     })

diff --git a/examples/react/basic/src/plugin.ts b/examples/react/basic/src/plugin.ts
@@ -1,15 +1,15 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 interface EventMap {
-  'query-devtools:test': {
+  test: {
     title: string
     description: string
   }
-  'query-devtools:init': {
+  init: {
     title: string
     description: string
   }
-  'query-devtools:query': {
+  query: {
     title: string
     description: string
   }

diff --git a/examples/react/custom-devtools/src/eventClient.ts b/examples/react/custom-devtools/src/eventClient.ts
@@ -1,15 +1,12 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 type EventMap = {
-  // The key of the event map is a combination of {pluginId}:{eventSuffix}
-  // The value is the expected type of the event payload
-  'custom-devtools:counter-state': { count: number; history: Array<number> }
+  'counter-state': { count: number; history: Array<number> }
 }
 
 class CustomEventClient extends EventClient<EventMap> {
   constructor() {
     super({
-      // The pluginId must match that of the event map key
       pluginId: 'custom-devtools',
       debug: true,
     })

diff --git a/examples/react/https/src/plugin.ts b/examples/react/https/src/plugin.ts
@@ -1,15 +1,15 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 interface EventMap {
-  'query-devtools:test': {
+  test: {
     title: string
     description: string
   }
-  'query-devtools:init': {
+  init: {
     title: string
     description: string
   }
-  'query-devtools:query': {
+  query: {
     title: string
     description: string
   }

diff --git a/examples/react/start/src/devtools/route-navigation-event-client.ts b/examples/react/start/src/devtools/route-navigation-event-client.ts
@@ -9,14 +9,11 @@ export interface RouteNavigationEvent {
 }
 
 type RouteNavigationEventMap = {
-  'route-navigation:navigate': RouteNavigationEvent
-  'route-navigation:clear': undefined
+  navigate: RouteNavigationEvent
+  clear: undefined
 }
 
-class RouteNavigationEventClient extends EventClient<
-  RouteNavigationEventMap,
-  'route-navigation'
-> {
+class RouteNavigationEventClient extends EventClient<RouteNavigationEventMap> {
   constructor() {
     super({
       pluginId: 'route-navigation',

diff --git a/examples/react/time-travel/src/zustand-client.ts b/examples/react/time-travel/src/zustand-client.ts
@@ -2,8 +2,8 @@ import { EventClient } from '@tanstack/devtools-event-client'
 import { createStore } from 'zustand'
 
 interface ZustandEventMap {
-  'zustand:stateChange': any
-  'zustand:revertSnapshot': any
+  stateChange: any
+  revertSnapshot: any
 }
 export const eventClient = new EventClient<ZustandEventMap>({
   pluginId: 'zustand',

diff --git a/packages/devtools-client/src/index.ts b/packages/devtools-client/src/index.ts
@@ -53,37 +53,37 @@ export interface PluginInjection {
 }
 
 interface EventMap {
-  'tanstack-devtools-core:ready': {
+  ready: {
     packageJson: PackageJson | null
     outdatedDeps: OutdatedDeps | null
   }
-  'tanstack-devtools-core:outdated-deps-read': {
+  'outdated-deps-read': {
     outdatedDeps: OutdatedDeps | null
   }
-  'tanstack-devtools-core:package-json-read': {
+  'package-json-read': {
     packageJson: PackageJson | null
   }
-  'tanstack-devtools-core:mounted': void
-  'tanstack-devtools-core:install-devtools': PluginInjection
-  'tanstack-devtools-core:devtools-installed': {
+  mounted: void
+  'install-devtools': PluginInjection
+  'devtools-installed': {
     packageName: string
     success: boolean
     error?: string
   }
-  'tanstack-devtools-core:add-plugin-to-devtools': PluginInjection
-  'tanstack-devtools-core:plugin-added': {
+  'add-plugin-to-devtools': PluginInjection
+  'plugin-added': {
     packageName: string
     success: boolean
     error?: string
   }
-  'tanstack-devtools-core:bump-package-version': PluginInjection & {
+  'bump-package-version': PluginInjection & {
     devtoolsPackage: string
     minVersion?: string
   }
-  'tanstack-devtools-core:package-json-updated': {
+  'package-json-updated': {
     packageJson: PackageJson | null
   }
-  'tanstack-devtools-core:trigger-toggled': {
+  'trigger-toggled': {
     isOpen: boolean
   }
 }

diff --git a/packages/event-bus-client/src/plugin.ts b/packages/event-bus-client/src/plugin.ts
@@ -8,19 +8,12 @@ declare global {
 }
 
 type AllDevtoolsEvents<TEventMap extends Record<string, any>> = {
-  [Key in keyof TEventMap]: TanStackDevtoolsEvent<Key & string, TEventMap[Key]>
-}[keyof TEventMap]
+  [Key in keyof TEventMap & string]: TanStackDevtoolsEvent<Key, TEventMap[Key]>
+}[keyof TEventMap & string]
 
-export class EventClient<
-  TEventMap extends Record<string, any>,
-  TPluginId extends string = TEventMap extends Record<infer P, any>
-    ? P extends `${infer Id}:${string}`
-      ? Id
-      : never
-    : never,
-> {
+export class EventClient<TEventMap extends Record<string, any>> {
   #enabled = true
-  #pluginId: TPluginId
+  #pluginId: string
   #eventTarget: () => EventTarget
   #debug: boolean
   #queuedEvents: Array<TanStackDevtoolsEvent<string, any>>
@@ -80,7 +73,7 @@ export class EventClient<
     enabled = true,
     reconnectEveryMs = 300,
   }: {
-    pluginId: TPluginId
+    pluginId: string
     debug?: boolean
     reconnectEveryMs?: number
     enabled?: boolean
@@ -194,33 +187,19 @@ export class EventClient<
     this.dispatchCustomEvent('tanstack-dispatch-event', event)
   }
 
-  createEventPayload<
-    TSuffix extends Extract<
-      keyof TEventMap,
-      `${TPluginId & string}:${string}`
-    > extends `${TPluginId & string}:${infer S}`
-      ? S
-      : never,
-  >(
-    eventSuffix: TSuffix,
-    payload: TEventMap[`${TPluginId & string}:${TSuffix}`],
+  createEventPayload<TEvent extends keyof TEventMap & string>(
+    eventSuffix: TEvent,
+    payload: TEventMap[TEvent],
   ) {
     return {
       type: `${this.#pluginId}:${eventSuffix}`,
       payload,
       pluginId: this.#pluginId,
     }
   }
-  emit<
-    TSuffix extends Extract<
-      keyof TEventMap,
-      `${TPluginId & string}:${string}`
-    > extends `${TPluginId & string}:${infer S}`
-      ? S
-      : never,
-  >(
-    eventSuffix: TSuffix,
-    payload: TEventMap[`${TPluginId & string}:${TSuffix}`],
+  emit<TEvent extends keyof TEventMap & string>(
+    eventSuffix: TEvent,
+    payload: TEventMap[TEvent],
   ) {
     if (!this.#enabled) {
       this.debugLog(
@@ -262,21 +241,9 @@ export class EventClient<
     return this.emitEventToBus(this.createEventPayload(eventSuffix, payload))
   }
 
-  on<
-    TSuffix extends Extract<
-      keyof TEventMap,
-      `${TPluginId & string}:${string}`
-    > extends `${TPluginId & string}:${infer S}`
-      ? S
-      : never,
-  >(
-    eventSuffix: TSuffix,
-    cb: (
-      event: TanStackDevtoolsEvent<
-        `${TPluginId & string}:${TSuffix}`,
-        TEventMap[`${TPluginId & string}:${TSuffix}`]
-      >,
-    ) => void,
+  on<TEvent extends keyof TEventMap & string>(
+    eventSuffix: TEvent,
+    cb: (event: TanStackDevtoolsEvent<TEvent, TEventMap[TEvent]>) => void,
     options?: {
       withEventTarget?: boolean
     },

diff --git a/packages/event-bus-client/tests/index.test.ts b/packages/event-bus-client/tests/index.test.ts
@@ -66,9 +66,9 @@ describe('EventClient', () => {
       const targetEmitSpy = vi.spyOn(target, 'dispatchEvent')
       const targetListenSpy = vi.spyOn(target, 'addEventListener')
       const targetRemoveSpy = vi.spyOn(target, 'removeEventListener')
-      const cleanup = client.on('test:event', () => {})
+      const cleanup = client.on('event', () => {})
       cleanup()
-      client.emit('test:event', { foo: 'bar' })
+      client.emit('event', { foo: 'bar' })
       expect(targetEmitSpy).toHaveBeenCalledWith(expect.any(Event))
       expect(targetListenSpy).toHaveBeenCalledWith(
         expect.any(String),
@@ -90,9 +90,9 @@ describe('EventClient', () => {
       const targetEmitSpy = vi.spyOn(target, 'dispatchEvent')
       const targetListenSpy = vi.spyOn(target, 'addEventListener')
       const targetRemoveSpy = vi.spyOn(target, 'removeEventListener')
-      const cleanup = client.on('test:event', () => {})
+      const cleanup = client.on('event', () => {})
       cleanup()
-      client.emit('test:event', { foo: 'bar' })
+      client.emit('event', { foo: 'bar' })
       expect(targetEmitSpy).toHaveBeenCalledWith(expect.any(Event))
       expect(targetListenSpy).toHaveBeenCalledWith(
         expect.any(String),