diff --git a/web/vtadmin/package-lock.json b/web/vtadmin/package-lock.json
index 8ad7c67a5b4..5439928837c 100644
--- a/web/vtadmin/package-lock.json
+++ b/web/vtadmin/package-lock.json
@@ -28,6 +28,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-flow-renderer": "^10.3.17",
+        "react-json-tree": "^0.19.0",
         "react-query": "^3.5.9",
         "react-router-dom": "^5.3.4",
         "react-tiny-popover": "^6.0.5",
@@ -4828,8 +4829,7 @@
     "node_modules/@types/lodash": {
       "version": "4.17.0",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
-      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
-      "dev": true
+      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA=="
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.12",
@@ -6633,6 +6633,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6649,6 +6662,16 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -15231,6 +15254,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-base16-styling": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.10.0.tgz",
+      "integrity": "sha512-H1k2eFB6M45OaiRru3PBXkuCcn2qNmx+gzLb4a9IPMR7tMH8oBRXU5jGbPDYG1Hz+82d88ED0vjR8BmqU3pQdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "^4.17.0",
+        "color": "^4.2.3",
+        "csstype": "^3.1.3",
+        "lodash-es": "^4.17.21"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -15288,6 +15323,20 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-json-tree": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.19.0.tgz",
+      "integrity": "sha512-PqT1WRVcWP+RROsZPQfNEKIC1iM/ZMfY4g5jN6oDnXp5593PPRAYgoHcgYCDjflAHQMtxl8XGdlTwIBdEGUXvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "^4.17.0",
+        "react-base16-styling": "^0.10.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-query": {
       "version": "3.39.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
@@ -16161,6 +16210,21 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT"
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
diff --git a/web/vtadmin/package.json b/web/vtadmin/package.json
index 5d4d5dc787a..3d850fd1cc9 100644
--- a/web/vtadmin/package.json
+++ b/web/vtadmin/package.json
@@ -27,6 +27,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-flow-renderer": "^10.3.17",
+    "react-json-tree": "^0.19.0",
     "react-query": "^3.5.9",
     "react-router-dom": "^5.3.4",
     "react-tiny-popover": "^6.0.5",
diff --git a/web/vtadmin/src/components/jsonViewTree/JSONViewTree.tsx b/web/vtadmin/src/components/jsonViewTree/JSONViewTree.tsx
new file mode 100644
index 00000000000..af4e71db38a
--- /dev/null
+++ b/web/vtadmin/src/components/jsonViewTree/JSONViewTree.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright 2025 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { JSONTree } from 'react-json-tree';
+
+const vtAdminTheme = {
+    scheme: 'vtadmin',
+    author: 'custom',
+    base00: '#ffffff',
+    base01: '#f6f8fa',
+    base02: '#e6e8eb',
+    base03: '#8c8c8c',
+    base04: '#3c3c3c',
+    base05: '#2c2c2c',
+    base06: '#0057b8',
+    base07: '#000000',
+    base08: '#00875a',
+    base09: '#2c2c2c',
+    base0A: '#e44d26',
+    base0B: '#2c2c2c',
+    base0C: '#1a73e8',
+    base0D: '#3d5afe',
+    base0E: '#3cba54',
+    base0F: '#ff6f61',
+};
+
+interface JSONViewTreeProps {
+    data: any;
+}
+
+const JSONViewTree: React.FC<JSONViewTreeProps> = ({ data }) => {
+    const [expandAll, setExpandAll] = useState(false);
+    const [treeKey, setTreeKey] = useState(0);
+
+    const handleExpand = () => {
+        setExpandAll(true);
+        setTreeKey((prev) => prev + 1);
+    };
+
+    const handleCollapse = () => {
+        setExpandAll(false);
+        setTreeKey((prev) => prev + 1);
+    };
+
+    const getItemString = (type: string, data: any) => {
+        if (Array.isArray(data)) {
+            return `${type}[${data.length}]`;
+        }
+        return type;
+    };
+
+    if (!data) return null;
+    return (
+        <div className="p-1">
+            <div className="flex mt-2 gap-2">
+                <button onClick={handleExpand} className="btn btn-secondary btn-sm">
+                    Expand All
+                </button>
+                <button onClick={handleCollapse} className="btn btn-danger bg-transparent text-red-500 btn-sm">
+                    Collapse All
+                </button>
+            </div>
+            <JSONTree
+                key={treeKey}
+                data={data}
+                theme={{
+                    extend: vtAdminTheme,
+                    nestedNodeItemString: {
+                        color: vtAdminTheme.base0C,
+                    },
+                }}
+                invertTheme={false}
+                hideRoot={true}
+                getItemString={getItemString}
+                shouldExpandNodeInitially={() => expandAll}
+            />
+        </div>
+    );
+};
+
+export default JSONViewTree;
diff --git a/web/vtadmin/src/components/routes/keyspace/Keyspace.tsx b/web/vtadmin/src/components/routes/keyspace/Keyspace.tsx
index 61bf52bb189..068f9cea2cd 100644
--- a/web/vtadmin/src/components/routes/keyspace/Keyspace.tsx
+++ b/web/vtadmin/src/components/routes/keyspace/Keyspace.tsx
@@ -19,7 +19,6 @@ import { Link, Redirect, Route } from 'react-router-dom';
 import { useKeyspace } from '../../../hooks/api';
 import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
 import { isReadOnlyMode } from '../../../util/env';
-import { Code } from '../../Code';
 import { ContentContainer } from '../../layout/ContentContainer';
 import { NavCrumbs } from '../../layout/NavCrumbs';
 import { WorkspaceHeader } from '../../layout/WorkspaceHeader';
@@ -32,6 +31,8 @@ import { Advanced } from './Advanced';
 import style from './Keyspace.module.scss';
 import { KeyspaceShards } from './KeyspaceShards';
 import { KeyspaceVSchema } from './KeyspaceVSchema';
+import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { Code } from '../../Code';
 
 interface RouteParams {
     clusterID: string;
@@ -94,6 +95,7 @@ export const Keyspace = () => {
                     <Tab text="Shards" to={`${url}/shards`} />
                     <Tab text="VSchema" to={`${url}/vschema`} />
                     <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
 
                     <ReadOnlyGate>
                         <Tab text="Advanced" to={`${url}/advanced`} />
@@ -114,6 +116,11 @@ export const Keyspace = () => {
                         <Code code={JSON.stringify(keyspace, null, 2)} />
                     </Route>
 
+                    <Route path={`${path}/json_tree`}>
+                        <QueryLoadingPlaceholder query={kq} />
+                        <JSONViewTree data={keyspace} />
+                    </Route>
+
                     {!isReadOnlyMode() && (
                         <Route path={`${path}/advanced`}>
                             <Advanced clusterID={clusterID} name={name} />
diff --git a/web/vtadmin/src/components/routes/shard/Shard.tsx b/web/vtadmin/src/components/routes/shard/Shard.tsx
index 686dc089d8f..8f713be9b13 100644
--- a/web/vtadmin/src/components/routes/shard/Shard.tsx
+++ b/web/vtadmin/src/components/routes/shard/Shard.tsx
@@ -24,12 +24,13 @@ import { WorkspaceTitle } from '../../layout/WorkspaceTitle';
 import { ContentContainer } from '../../layout/ContentContainer';
 import { Tab } from '../../tabs/Tab';
 import { TabContainer } from '../../tabs/TabContainer';
-import { Code } from '../../Code';
 import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
 import { KeyspaceLink } from '../../links/KeyspaceLink';
 import { useKeyspace } from '../../../hooks/api';
 import { ShardTablets } from './ShardTablets';
 import Advanced from './Advanced';
+import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { Code } from '../../Code';
 
 interface RouteParams {
     clusterID: string;
@@ -114,6 +115,7 @@ export const Shard = () => {
                 <TabContainer>
                     <Tab text="Tablets" to={`${url}/tablets`} />
                     <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
                     <Tab text="Advanced" to={`${url}/advanced`} />
                 </TabContainer>
 
@@ -123,6 +125,7 @@ export const Shard = () => {
                     </Route>
 
                     <Route path={`${path}/json`}>{shard && <Code code={JSON.stringify(shard, null, 2)} />}</Route>
+                    <Route path={`${path}/json_tree`}>{shard && <JSONViewTree data={shard} />}</Route>
                     <Route path={`${path}/advanced`}>
                         <Advanced />
                     </Route>
diff --git a/web/vtadmin/src/components/routes/stream/Stream.tsx b/web/vtadmin/src/components/routes/stream/Stream.tsx
index 45e9846315a..6143ac3e302 100644
--- a/web/vtadmin/src/components/routes/stream/Stream.tsx
+++ b/web/vtadmin/src/components/routes/stream/Stream.tsx
@@ -13,17 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Link, useParams } from 'react-router-dom';
+import { Link, Redirect, Route, Switch, useParams, useRouteMatch } from 'react-router-dom';
 
 import { useWorkflow } from '../../../hooks/api';
 import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
 import { formatStreamKey, getStream } from '../../../util/workflows';
-import { Code } from '../../Code';
 import { ContentContainer } from '../../layout/ContentContainer';
 import { NavCrumbs } from '../../layout/NavCrumbs';
 import { WorkspaceHeader } from '../../layout/WorkspaceHeader';
 import { WorkspaceTitle } from '../../layout/WorkspaceTitle';
 import style from './Stream.module.scss';
+import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { TabContainer } from '../../tabs/TabContainer';
+import { Tab } from '../../tabs/Tab';
+import { Code } from '../../Code';
 
 interface RouteParams {
     clusterID: string;
@@ -36,6 +39,7 @@ interface RouteParams {
 
 export const Stream = () => {
     const params = useParams<RouteParams>();
+    const { path, url } = useRouteMatch();
     const { data: workflow } = useWorkflow({
         clusterID: params.clusterID,
         keyspace: params.keyspace,
@@ -72,7 +76,17 @@ export const Stream = () => {
                 </div>
             </WorkspaceHeader>
             <ContentContainer>
-                <Code code={JSON.stringify(stream, null, 2)} />
+                <TabContainer>
+                    <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
+                </TabContainer>
+
+                <Switch>
+                    <Route path={`${path}/json`}>{stream && <Code code={JSON.stringify(stream, null, 2)} />}</Route>
+                    <Route path={`${path}/json_tree`}>{stream && <JSONViewTree data={stream} />}</Route>
+
+                    <Redirect exact from={path} to={`${path}/json`} />
+                </Switch>
             </ContentContainer>
         </div>
     );
diff --git a/web/vtadmin/src/components/routes/tablet/Tablet.tsx b/web/vtadmin/src/components/routes/tablet/Tablet.tsx
index b0181251fd0..f4a9ca20248 100644
--- a/web/vtadmin/src/components/routes/tablet/Tablet.tsx
+++ b/web/vtadmin/src/components/routes/tablet/Tablet.tsx
@@ -19,7 +19,6 @@ import { useExperimentalTabletDebugVars, useTablet } from '../../../hooks/api';
 import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
 import { isReadOnlyMode } from '../../../util/env';
 import { formatDisplayType, formatState } from '../../../util/tablets';
-import { Code } from '../../Code';
 import { ContentContainer } from '../../layout/ContentContainer';
 import { NavCrumbs } from '../../layout/NavCrumbs';
 import { WorkspaceHeader } from '../../layout/WorkspaceHeader';
@@ -34,6 +33,8 @@ import style from './Tablet.module.scss';
 import { TabletCharts } from './TabletCharts';
 import { env } from '../../../util/env';
 import FullStatus from './FullStatus';
+import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { Code } from '../../Code';
 
 interface RouteParams {
     alias: string;
@@ -108,6 +109,7 @@ export const Tablet = () => {
                     <Tab text="QPS" to={`${url}/qps`} />
                     <Tab text="Full Status" to={`${url}/full-status`} />
                     <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
                     <ReadOnlyGate>
                         <Tab text="Advanced" to={`${url}/advanced`} />
                     </ReadOnlyGate>
@@ -128,6 +130,14 @@ export const Tablet = () => {
                         </div>
                     </Route>
 
+                    <Route path={`${path}/json_tree`}>
+                        <div>
+                            <JSONViewTree data={tablet} />
+
+                            {env().VITE_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS && <JSONViewTree data={debugVars} />}
+                        </div>
+                    </Route>
+
                     <Route path={`${url}/full-status`}>{tablet && <FullStatus tablet={tablet} />}</Route>
 
                     {!isReadOnlyMode() && (
diff --git a/web/vtadmin/src/components/routes/workflow/Workflow.tsx b/web/vtadmin/src/components/routes/workflow/Workflow.tsx
index 939d1c6d386..7b3f0df32a5 100644
--- a/web/vtadmin/src/components/routes/workflow/Workflow.tsx
+++ b/web/vtadmin/src/components/routes/workflow/Workflow.tsx
@@ -30,11 +30,12 @@ import { ContentContainer } from '../../layout/ContentContainer';
 import { TabContainer } from '../../tabs/TabContainer';
 import { Tab } from '../../tabs/Tab';
 import { getStreams } from '../../../util/workflows';
-import { Code } from '../../Code';
 import { ShardLink } from '../../links/ShardLink';
 import { WorkflowVDiff } from './WorkflowVDiff';
 import { Select } from '../../inputs/Select';
 import { formatDateTimeShort } from '../../../util/time';
+import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { Code } from '../../Code';
 
 interface RouteParams {
     clusterID: string;
@@ -168,6 +169,7 @@ export const Workflow = () => {
                     <Tab text="Details" to={`${url}/details`} />
                     <Tab text="VDiff" to={`${url}/vdiff`} />
                     <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
                 </TabContainer>
 
                 <Switch>
@@ -192,6 +194,10 @@ export const Workflow = () => {
                         <Code code={JSON.stringify(data, null, 2)} />
                     </Route>
 
+                    <Route path={`${path}/json_tree`}>
+                        <JSONViewTree data={data} />
+                    </Route>
+
                     <Redirect exact from={path} to={`${path}/streams`} />
                 </Switch>
             </ContentContainer>