diff --git a/examples/react/time-travel/.eslintrc.cjs b/examples/react/time-travel/.eslintrc.cjs
new file mode 100644
index 00000000..9ff0b9fc
--- /dev/null
+++ b/examples/react/time-travel/.eslintrc.cjs
@@ -0,0 +1,13 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+ settings: {
+ extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
+ rules: {
+ 'react/no-children-prop': 'off',
+ },
+ },
+}
+
+module.exports = config
diff --git a/examples/react/time-travel/.gitignore b/examples/react/time-travel/.gitignore
new file mode 100644
index 00000000..4673b022
--- /dev/null
+++ b/examples/react/time-travel/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/react/time-travel/README.md b/examples/react/time-travel/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/react/time-travel/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/react/time-travel/index.html b/examples/react/time-travel/index.html
new file mode 100644
index 00000000..f24fe41d
--- /dev/null
+++ b/examples/react/time-travel/index.html
@@ -0,0 +1,16 @@
+
+
+
+ Basic Example - TanStack Devtools
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
diff --git a/examples/react/time-travel/package.json b/examples/react/time-travel/package.json
new file mode 100644
index 00000000..ff855104
--- /dev/null
+++ b/examples/react/time-travel/package.json
@@ -0,0 +1,41 @@
+{
+ "name": "@tanstack/devtools-example-react-time-travel",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=3005",
+ "build": "vite build",
+ "preview": "vite preview",
+ "test:types": "tsc"
+ },
+ "dependencies": {
+ "@tanstack/devtools-event-client": "workspace:^",
+ "@tanstack/react-devtools": "^0.3.0",
+ "@tanstack/react-query": "^5.83.0",
+ "@tanstack/react-query-devtools": "^5.83.0",
+ "@tanstack/react-router": "^1.130.2",
+ "@tanstack/react-router-devtools": "^1.130.2",
+ "react": "^19.1.0",
+ "react-dom": "^19.1.0",
+ "zod": "^4.0.14",
+ "zustand": "^5.0.7"
+ },
+ "devDependencies": {
+ "@types/react": "^19.1.2",
+ "@types/react-dom": "^19.1.2",
+ "@vitejs/plugin-react": "^4.5.2",
+ "vite": "^7.0.6"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ }
+}
diff --git a/examples/react/time-travel/public/emblem-light.svg b/examples/react/time-travel/public/emblem-light.svg
new file mode 100644
index 00000000..a58e69ad
--- /dev/null
+++ b/examples/react/time-travel/public/emblem-light.svg
@@ -0,0 +1,13 @@
+
+
+
+ emblem-light
+ Created with Sketch.
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/react/time-travel/src/index.tsx b/examples/react/time-travel/src/index.tsx
new file mode 100644
index 00000000..e569c9d1
--- /dev/null
+++ b/examples/react/time-travel/src/index.tsx
@@ -0,0 +1,20 @@
+import { createRoot } from 'react-dom/client'
+import { useStore } from 'zustand'
+import Devtools from './setup'
+import { store } from './zustand-client'
+
+function App() {
+ const { count, increment, decrement } = useStore(store)
+ return (
+
+
Zustand time-travel
+ Current count: {count}
+ Increment
+ Decrement
+
+
+
+
Welcome Home!
+
+ )
+ },
+})
+function About() {
+ return (
+
+
Hello from About!
+
+ )
+}
+
+const aboutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/about',
+ component: About,
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+const router = createRouter({ routeTree })
+
+const queryClient = new QueryClient()
+
+export default function DevtoolsExample() {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/examples/react/time-travel/src/zustand-client.ts b/examples/react/time-travel/src/zustand-client.ts
new file mode 100644
index 00000000..404dfd75
--- /dev/null
+++ b/examples/react/time-travel/src/zustand-client.ts
@@ -0,0 +1,36 @@
+import { EventClient } from '@tanstack/devtools-event-client'
+import { createStore } from 'zustand'
+
+interface ZustandEventMap {
+ 'zustand:stateChange': any
+ 'zustand:revertSnapshot': any
+}
+export const eventClient = new EventClient({
+ pluginId: 'zustand',
+})
+
+export const store = createStore<{
+ count: number
+ increment: () => void
+ decrement: () => void
+}>((set) => ({
+ count: 0,
+ increment: () => {
+ return set((state) => {
+ eventClient.emit('stateChange', { count: state.count + 1 })
+ return { count: state.count + 1 }
+ })
+ },
+ decrement: () => {
+ return set((state) => {
+ eventClient.emit('stateChange', { count: state.count - 1 })
+ return { count: state.count - 1 }
+ })
+ },
+}))
+
+eventClient.on('revertSnapshot', (snapshot) => {
+ store.setState({
+ count: snapshot.payload.count,
+ })
+})
diff --git a/examples/react/time-travel/src/zustand-time-travel.tsx b/examples/react/time-travel/src/zustand-time-travel.tsx
new file mode 100644
index 00000000..04a20b9a
--- /dev/null
+++ b/examples/react/time-travel/src/zustand-time-travel.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import { eventClient } from './zustand-client'
+
+export function ZustandTimeTravel() {
+ const [snapshots, setSnapshots] = useState>([])
+
+ useEffect(() => {
+ const cleanup = eventClient.on('stateChange', (event) =>
+ setSnapshots((prev) => [...prev, event.payload]),
+ )
+ return () => {
+ cleanup()
+ }
+ }, [])
+
+ return (
+
+ {/* Snapshot slider to change the current state */}
+ Drag Me to time travel through zustand states
+