TanStack · harry-whorlow · Nov 1, 2025 · Nov 1, 2025 · Nov 1, 2025 · Nov 1, 2025
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/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.13",
+    "solid-js": "^1.9.9"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-vite": "0.3.11",
+    "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.tsx b/examples/solid/devtools-ui/src/index.tsx
@@ -0,0 +1,21 @@
+import { JsonTree, ThemeContextProvider } from '@tanstack/devtools-ui'
+import { render } from 'solid-js/web'
+
+function App() {
+  const JsonTreeData = {
+    name: 'date format',
+    value: { period: 'past', data: new Date() },
+  }
+
+  const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+
+  return (
+    <div>
+      <ThemeContextProvider theme={darkThemeMq.matches ? 'dark' : 'light'}>
+        <JsonTree value={JsonTreeData} config={{ dateFormat: 'DD-MM-YYYY' }} />
+      </ThemeContextProvider>
+    </div>
+  )
+}
+
+render(() => <App />, document.getElementById('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"
   },

diff --git a/packages/devtools-ui/src/components/theme.tsx b/packages/devtools-ui/src/components/theme.tsx
@@ -17,6 +17,7 @@ export const ThemeContextProvider = (props: {
   createEffect(() => {
     setTheme(props.theme)
   })
+
   return (
     <ThemeContext.Provider value={{ theme, setTheme }}>
       {props.children}

diff --git a/packages/devtools-ui/src/components/tree.tsx b/packages/devtools-ui/src/components/tree.tsx
@@ -1,14 +1,24 @@
 import { For, Match, Show, Switch, createSignal } from 'solid-js'
 import clsx from 'clsx'
+import dayjs from 'dayjs'
+
+// css
 import { css, useStyles } from '../styles/use-styles'
+
+// icons
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
+
+// utils
 import type { CollapsiblePaths } from '../utils/deep-keys'
 
 export function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
   value: TData
   copyable?: boolean
+
   defaultExpansionDepth?: number
   collapsePaths?: Array<TName>
+
+  config?: { dateFormat?: string }
 }) {
   return (
     <JsonValue
@@ -19,6 +29,7 @@ export function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
       defaultExpansionDepth={props.defaultExpansionDepth ?? 1}
       path=""
       collapsePaths={props.collapsePaths}
+      config={props.config}
     />
   )
 }
@@ -35,6 +46,8 @@ function JsonValue(props: {
 
   collapsePaths?: Array<string>
   path: string
+
+  config?: { dateFormat?: string }
 }) {
   const styles = useStyles()
 
@@ -47,6 +60,7 @@ function JsonValue(props: {
             &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
+
       {(() => {
         if (typeof props.value === 'string') {
           return (
@@ -55,29 +69,35 @@ function JsonValue(props: {
             </span>
           )
         }
+
         if (typeof props.value === 'number') {
           return <span class={styles().tree.valueNumber}>{props.value}</span>
         }
+
         if (typeof props.value === 'boolean') {
           return (
             <span class={styles().tree.valueBoolean}>
               {String(props.value)}
             </span>
           )
         }
+
         if (props.value === null) {
           return <span class={styles().tree.valueNull}>null</span>
         }
+
         if (props.value === undefined) {
           return <span class={styles().tree.valueNull}>undefined</span>
         }
+
         if (typeof props.value === 'function') {
           return (
             <span class={styles().tree.valueFunction}>
               {String(props.value)}
             </span>
           )
         }
+
         if (Array.isArray(props.value)) {
           return (
             <ArrayValue
@@ -88,9 +108,11 @@ function JsonValue(props: {
               value={props.value}
               collapsePaths={props.collapsePaths}
               path={props.path}
+              config={props.config}
             />
           )
         }
+
         if (typeof props.value === 'object') {
           return (
             <ObjectValue
@@ -101,9 +123,11 @@ function JsonValue(props: {
               value={props.value}
               collapsePaths={props.collapsePaths}
               path={props.path}
+              config={props.config}
             />
           )
         }
+
         return <span />
       })()}
       {props.copyable && (
@@ -124,6 +148,7 @@ const ArrayValue = (props: {
   depth: number
   collapsePaths?: Array<string>
   path: string
+  config?: { dateFormat?: string }
 }) => {
   const styles = useStyles()
 
@@ -182,6 +207,7 @@ const ArrayValue = (props: {
                   depth={props.depth + 1}
                   collapsePaths={props.collapsePaths}
                   path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}
+                  config={props.config}
                 />
               )
             }}
@@ -214,6 +240,7 @@ const ObjectValue = (props: {
   depth: number
   collapsePaths?: Array<string>
   path: string
+  config?: { dateFormat?: string }
 }) => {
   const styles = useStyles()
 
@@ -225,6 +252,24 @@ const ObjectValue = (props: {
   const keys = Object.keys(props.value)
   const lastKeyName = keys[keys.length - 1]
 
+  if (props.value instanceof Date) {
+    return (
+      <span class={styles().tree.expanderContainer}>
+        {props.keyName && (
+          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+            &quot;{props.keyName}&quot;:{' '}
+          </span>
+        )}
+
+        <span class={styles().tree.valueBraces}>
+          {dayjs(props.value).format(
+            props.config?.dateFormat ? props.config.dateFormat : 'DDMMMYY',
+          )}
+        </span>
+      </span>
+    )
+  }
+
   if (keys.length === 0) {
     return (
       <span class={styles().tree.expanderContainer}>
@@ -278,6 +323,7 @@ const ObjectValue = (props: {
                   depth={props.depth + 1}
                   collapsePaths={props.collapsePaths}
                   path={`${props.path}${props.path ? '.' : ''}${k}`}
+                  config={props.config}
                 />
               </>
             )}