TanStack · AlemTuzlak · Mar 4, 2026 · Mar 4, 2026 · Mar 4, 2026
diff --git a/.changeset/dry-animals-dig.md b/.changeset/dry-animals-dig.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-ui': minor
+---
+
+Updates devtools-ui JsonTree to display dates, as well as provide configuration for custom date format.
diff --git a/examples/react/bundling-repro/package.json b/examples/react/bundling-repro/package.json
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@biomejs/biome": "2.2.4",
     "@tanstack/devtools-event-client": "latest",
-    "@tanstack/devtools-vite": "latest",
+    "@tanstack/devtools-vite": "0.5.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/node": "^22.15.2",

diff --git a/examples/solid/devtools-ui/.eslintrc.cjs b/examples/solid/devtools-ui/.eslintrc.cjs
@@ -0,0 +1,11 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  settings: {
+    extends: [],
+    rules: {},
+  },
+}
+
+module.exports = config
diff --git a/examples/solid/devtools-ui/.gitignore b/examples/solid/devtools-ui/.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/solid/devtools-ui/README.md b/examples/solid/devtools-ui/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/solid/devtools-ui/index.html b/examples/solid/devtools-ui/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/emblem-light.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>TanStack Devtools Example</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/solid/devtools-ui/package.json b/examples/solid/devtools-ui/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@tanstack/devtools-example-devtools-ui",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3005",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "tsc"
+  },
+  "dependencies": {
+    "@tanstack/devtools-ui": "0.4.4",
+    "@tanstack/solid-devtools": "^0.7.28",
+    "solid-js": "^1.9.9"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-vite": "0.5.3",
+    "vite": "^7.1.7",
+    "vite-plugin-inspect": "11.3.3",
+    "vite-plugin-solid": "^2.11.8"
+  },
+  "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/solid/devtools-ui/public/emblem-light.svg b/examples/solid/devtools-ui/public/emblem-light.svg
diff --git a/examples/solid/devtools-ui/src/index.css b/examples/solid/devtools-ui/src/index.css
@@ -0,0 +1,99 @@
+:root {
+  --app-background-color: #f9fafb;
+  --app-heading-color: #101828;
+  --app-button-bg: #f2f4f7;
+  --app-button-border: #d0d5dd;
+  --app-button-text: #101828;
+  --app-button-hover: #eaecf0;
+  --app-card-bg: #f9fafb;
+  --app-card-border: #d0d5dd;
+}
+
+[data-theme='light'] {
+  --app-background-color: #f9fafb;
+  --app-heading-color: #101828;
+  --app-button-bg: #f2f4f7;
+  --app-button-border: #d0d5dd;
+  --app-button-text: #101828;
+  --app-button-hover: #eaecf0;
+  --app-card-bg: #f9fafb;
+  --app-card-border: #d0d5dd;
+}
+
+[data-theme='dark'] {
+  --app-background-color: #191c24;
+  --app-heading-color: #f2f4f7;
+  --app-button-bg: #212530;
+  --app-button-border: #292e3d;
+  --app-button-text: #f2f4f7;
+  --app-button-hover: #292e3d;
+  --app-card-bg: #212530;
+  --app-card-border: #292e3d;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --app-background-color: #191c24;
+    --app-heading-color: #f2f4f7;
+    --app-button-bg: #212530;
+    --app-button-border: #292e3d;
+    --app-button-text: #f2f4f7;
+    --app-button-hover: #292e3d;
+    --app-card-bg: #212530;
+    --app-card-border: #292e3d;
+  }
+}
+
+body {
+  background-color: var(--app-background-color);
+}
+
+.app-shell {
+  padding: 16px;
+}
+
+.theme-toggle {
+  border: 1px solid var(--app-button-border);
+  background-color: var(--app-button-bg);
+  color: var(--app-button-text);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    transform 0.1s ease;
+}
+
+.theme-toggle:hover {
+  background-color: var(--app-button-hover);
+}
+
+.theme-toggle:active {
+  transform: translateY(1px);
+}
+
+.theme-toggle:focus-visible {
+  outline: 2px solid #1570ef;
+  outline-offset: 2px;
+}
+
+.json-tree-container {
+  margin-top: 16px;
+  padding: 16px;
+  border: 1px solid var(--app-card-border);
+  border-radius: 10px;
+  background-color: var(--app-card-bg);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: Arial;
+  color: var(--app-heading-color);
+}
diff --git a/examples/solid/devtools-ui/src/index.tsx b/examples/solid/devtools-ui/src/index.tsx
@@ -0,0 +1,62 @@
+import { createEffect, createSignal } from 'solid-js'
+import { render } from 'solid-js/web'
+
+import { JsonTree, ThemeContextProvider } from '@tanstack/devtools-ui'
+
+import './index.css'
+
+const JsonTreeDate = {
+  name: 'date format',
+  value: { period: 'past', data: new Date() },
+  isoValue: new Date().toISOString(),
+}
+
+const JsonTreePath = {
+  name: 'path collapse',
+  foo: { bar: 'foo' },
+  test: [[], [['hi']]],
+}
+
+const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+
+function App() {
+  const [theme, setTheme] = createSignal<'light' | 'dark'>(
+    darkThemeMq.matches ? 'dark' : 'light',
+  )
+
+  createEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme())
+  })
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))
+  }
+
+  return (
+    <div class="app-shell">
+      <button type="button" class="theme-toggle" onClick={toggleTheme}>
+        Toggle theme ({theme()})
+      </button>
+
+      <ThemeContextProvider theme={theme()}>
+        <h1>Json tree - dates</h1>
+
+        <div class="json-tree-container">
+          <JsonTree
+            value={JsonTreeDate}
+            config={{ dateFormat: 'DD-MM-YYYY' }}
+          />
+        </div>
+
+        <h1>Json tree - paths</h1>
+
+        <div class="json-tree-container">
+          <JsonTree value={JsonTreePath} collapsePaths={['foo']} />
+        </div>
+      </ThemeContextProvider>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+if (root) render(() => <App />, root)
diff --git a/examples/solid/devtools-ui/tsconfig.json b/examples/solid/devtools-ui/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/solid/devtools-ui/vite.config.ts b/examples/solid/devtools-ui/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { devtools } from '@tanstack/devtools-vite'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [devtools(), solid({})],
+})
diff --git a/packages/devtools-ui/package.json b/packages/devtools-ui/package.json
@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
     "goober": "^2.1.16",
     "solid-js": "^1.9.9"
   },