diff --git a/src/components/DebugInfo.tsx b/src/components/DebugInfo.tsx
new file mode 100644
index 0000000..4774ea1
--- /dev/null
+++ b/src/components/DebugInfo.tsx
@@ -0,0 +1,47 @@
+import { memo } from "react";
+import css from "./css/DebugInfo.module.css";
+import sharedStyles from "./css/shared.module.css";
+import type { World } from "../api/worlds.ts";
+
+type Snapshot = {
+  selectedWorldId: string;
+  hello: { worlds: World[] | undefined };
+};
+
+type Props = {
+  /**
+   * Snapshot data to display.
+   */
+  snapshot: Snapshot | null;
+  /**
+   * Optional title for the debug panel. Defaults to "Store snapshot".
+   */
+  title?: string;
+};
+
+export const DebugInfo = memo(({ snapshot, title }: Props) => {
+  const displayTitle = title || "Store snapshot";
+
+  const pretty =
+    snapshot != null
+      ? JSON.stringify(
+          {
+            selectedWorldId: snapshot.selectedWorldId,
+            hello: {
+              worlds: snapshot.hello.worlds?.map((world) => ({ ...world })),
+            },
+          },
+          null,
+          2,
+        )
+      : "Snapshot pending…";
+
+  return (
+    <div className={`${sharedStyles.card} ${css.snapshot}`}>
+      <div className={css.snapshotTitle}>{displayTitle}</div>
+      <pre className={css.pre}>{pretty}</pre>
+    </div>
+  );
+});
+
+DebugInfo.displayName = "DebugInfo";
diff --git a/src/examples/propDrilling/PropDrillingRenderDemo.tsx b/src/examples/propDrilling/PropDrillingRenderDemo.tsx
index 22103dd..285c0f0 100644
--- a/src/examples/propDrilling/PropDrillingRenderDemo.tsx
+++ b/src/examples/propDrilling/PropDrillingRenderDemo.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useLoaderData, useRevalidator } from "react-router-dom";
 import css from "../../components/css/DemoLayout.module.css";
 import { WorldApp } from "./exampleComponents/WorldApp.tsx";
-import { PropDrillingDebugInfo } from "./demoControls/PropDrillingDebugInfo.tsx";
+import { DebugInfo } from "../../components/DebugInfo.tsx";
 import type { World, WorldsResponse } from "../../api/worlds.ts";
 
 type Snapshot = {
@@ -32,7 +32,7 @@ export function PropDrillingRenderDemo() {
         onSnapshotChange={setSnapshot}
         revalidate={revalidator.revalidate}
       />
-      <PropDrillingDebugInfo snapshot={snapshot} />
+      <DebugInfo snapshot={snapshot} title="Top level state snapshot" />
     </div>
   );
 }
diff --git a/src/examples/propDrilling/demoControls/PropDrillingDebugInfo.tsx b/src/examples/propDrilling/demoControls/PropDrillingDebugInfo.tsx
deleted file mode 100644
index 18a5a83..0000000
--- a/src/examples/propDrilling/demoControls/PropDrillingDebugInfo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import css from "../../../components/css/DebugInfo.module.css";
-import sharedStyles from "../../../components/css/shared.module.css";
-import type { World } from "../../../api/worlds";
-
-type Props = {
-  snapshot: {
-    selectedWorldId: string;
-    hello: { worlds: World[] };
-  } | null;
-};
-
-export function PropDrillingDebugInfo({ snapshot }: Props) {
-  const pretty = snapshot
-    ? JSON.stringify(
-        {
-          selectedWorldId: snapshot.selectedWorldId,
-          hello: {
-            worlds: snapshot.hello.worlds.map((world) => ({ ...world })),
-          },
-        },
-        null,
-        2,
-      )
-    : "Snapshot pending…";
-
-  return (
-    <div className={`${sharedStyles.card} ${css.snapshot}`}>
-      <div className={css.snapshotTitle}>Top level state snapshot</div>
-      <pre className={css.pre}>{pretty}</pre>
-    </div>
-  );
-}
diff --git a/src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.tsx b/src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.tsx
index b6fb7f2..1e7ca7e 100644
--- a/src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.tsx
+++ b/src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import css from "../../components/css/DemoLayout.module.css";
 import { PropDrillingWorldApp } from "./exampleComponents/WorldApp.tsx";
-import { PropDrillingDebugInfo } from "./demoControls/PropDrillingDebugInfo.tsx";
+import { DebugInfo } from "../../components/DebugInfo.tsx";
 import { fetchWorlds, type World } from "../../api/worlds.ts";
 
 type Snapshot = {
@@ -34,7 +34,7 @@ export function PropDrillingNaiveRenderDemo() {
         setWorlds={setWorlds}
         onSnapshotChange={setSnapshot}
       />
-      <PropDrillingDebugInfo snapshot={snapshot} />
+      <DebugInfo snapshot={snapshot} title="Top level state snapshot" />
     </div>
   );
 }
diff --git a/src/examples/propDrillingNaive/demoControls/PropDrillingDebugInfo.tsx b/src/examples/propDrillingNaive/demoControls/PropDrillingDebugInfo.tsx
deleted file mode 100644
index 18a5a83..0000000
--- a/src/examples/propDrillingNaive/demoControls/PropDrillingDebugInfo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import css from "../../../components/css/DebugInfo.module.css";
-import sharedStyles from "../../../components/css/shared.module.css";
-import type { World } from "../../../api/worlds";
-
-type Props = {
-  snapshot: {
-    selectedWorldId: string;
-    hello: { worlds: World[] };
-  } | null;
-};
-
-export function PropDrillingDebugInfo({ snapshot }: Props) {
-  const pretty = snapshot
-    ? JSON.stringify(
-        {
-          selectedWorldId: snapshot.selectedWorldId,
-          hello: {
-            worlds: snapshot.hello.worlds.map((world) => ({ ...world })),
-          },
-        },
-        null,
-        2,
-      )
-    : "Snapshot pending…";
-
-  return (
-    <div className={`${sharedStyles.card} ${css.snapshot}`}>
-      <div className={css.snapshotTitle}>Top level state snapshot</div>
-      <pre className={css.pre}>{pretty}</pre>
-    </div>
-  );
-}
diff --git a/src/examples/zustand-query/ZustandQuery.tsx b/src/examples/zustand-query/ZustandQuery.tsx
index 51e60c7..0c86087 100644
--- a/src/examples/zustand-query/ZustandQuery.tsx
+++ b/src/examples/zustand-query/ZustandQuery.tsx
@@ -1,9 +1,22 @@
 import { QueryClientProvider } from "@tanstack/react-query";
 import css from "../../components/css/DemoLayout.module.css";
-import { DebugInfo } from "./demoControls/DebugInfo";
+import { DebugInfo } from "../../components/DebugInfo.tsx";
 import { WorldApp } from "./components/WorldApp";
 import { memo } from "react";
 import { queryClient } from "./data/WorldData.ts";
+import { useGetWorlds } from "./data/WorldData.ts";
+import { useWorldStore } from "../zustand/data/WorldStore.tsx";
+
+function ZustandQueryDebugInfo() {
+  const selectedWorldId = useWorldStore((s) => s.selectedWorldId);
+  const { data } = useGetWorlds();
+
+  return (
+    <DebugInfo
+      snapshot={{ selectedWorldId, hello: { worlds: data?.worlds } }}
+    />
+  );
+}
 
 export const ZustandQuery = memo(() => (
   <QueryClientProvider client={queryClient}>
@@ -15,7 +28,7 @@ export const ZustandQuery = memo(() => (
         more fully featured for handling data specific needs.
       </p>
       <WorldApp />
-      <DebugInfo />
+      <ZustandQueryDebugInfo />
     </div>
   </QueryClientProvider>
 ));
diff --git a/src/examples/zustand-query/demoControls/DebugInfo.tsx b/src/examples/zustand-query/demoControls/DebugInfo.tsx
deleted file mode 100644
index aca91ab..0000000
--- a/src/examples/zustand-query/demoControls/DebugInfo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { memo } from "react";
-import css from "../../../components/css/DebugInfo.module.css";
-import sharedStyles from "../../../components/css/shared.module.css";
-import { useGetWorlds } from "../data/WorldData.ts";
-import { useWorldStore } from "../../zustand/data/WorldStore.tsx";
-
-export const DebugInfo = memo(() => {
-  const selectedWorldId = useWorldStore((s) => s.selectedWorldId);
-  const { data } = useGetWorlds();
-
-  const snapshot = { selectedWorldId, hello: { worlds: data?.worlds } };
-
-  return (
-    <div className={`${sharedStyles.card} ${css.snapshot}`}>
-      <div className={css.snapshotTitle}>Store snapshot</div>
-      <pre className={css.pre}>{JSON.stringify(snapshot, null, 2)}</pre>
-    </div>
-  );
-});
-
-DebugInfo.displayName = "DebugInfo";
diff --git a/src/examples/zustand/ZustandRenderDemo.tsx b/src/examples/zustand/ZustandRenderDemo.tsx
index 9044e4a..cf7ac7a 100644
--- a/src/examples/zustand/ZustandRenderDemo.tsx
+++ b/src/examples/zustand/ZustandRenderDemo.tsx
@@ -1,11 +1,18 @@
 import { useEffect } from "react";
 import { useLoaderData, useRevalidator } from "react-router-dom";
 import css from "../../components/css/DemoLayout.module.css";
-import { DebugInfo } from "./demoControls/DebugInfo.tsx";
+import { DebugInfo } from "../../components/DebugInfo.tsx";
 import { WorldApp } from "./exampleComponents/WorldApp.tsx";
 import { useWorldStore } from "./data/WorldStore.tsx";
 import type { WorldsResponse } from "../../api/worlds.ts";
 
+function ZustandDebugInfo() {
+  const selectedWorldId = useWorldStore((s) => s.selectedWorldId);
+  const worlds = useWorldStore((s) => s.hello.worlds);
+
+  return <DebugInfo snapshot={{ selectedWorldId, hello: { worlds } }} />;
+}
+
 export function ZustandRenderDemo() {
   const data = useLoaderData() as WorldsResponse;
   const revalidator = useRevalidator();
@@ -28,7 +35,7 @@ export function ZustandRenderDemo() {
       </p>
 
       <WorldApp revalidate={revalidator.revalidate} />
-      <DebugInfo />
+      <ZustandDebugInfo />
     </div>
   );
 }
diff --git a/src/examples/zustand/demoControls/DebugInfo.tsx b/src/examples/zustand/demoControls/DebugInfo.tsx
deleted file mode 100644
index 20fd87d..0000000
--- a/src/examples/zustand/demoControls/DebugInfo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import css from "../../../components/css/DebugInfo.module.css";
-import sharedStyles from "../../../components/css/shared.module.css";
-import { useWorldStore } from "../data/WorldStore.tsx";
-
-export function DebugInfo() {
-  const selectedWorldId = useWorldStore((s) => s.selectedWorldId);
-  const worlds = useWorldStore((s) => s.hello.worlds);
-
-  const snapshot = { selectedWorldId, hello: { worlds } };
-
-  return (
-    <div className={`${sharedStyles.card} ${css.snapshot}`}>
-      <div className={css.snapshotTitle}>Store snapshot</div>
-      <pre className={css.pre}>{JSON.stringify(snapshot, null, 2)}</pre>
-    </div>
-  );
-}