Playground in docs

packages/docs-site/src/components/MiniPlaygroundModal.tsx

@@ -0,0 +1,21 @@
+import {
+  DialogPlayground,
+  type DialogPlaygroundProps,
+} from "@stackables/bridge-playground";
+// Import playground styles - the docs-site custom.css overrides the base layer
+// to prevent it from breaking Starlight layout
+import "@stackables/bridge-playground/style.css";
+
+/**
+ * A button that opens a modal with MiniPlayground.
+ * Used in documentation to provide interactive examples.
+ */
+export default function MiniPlaygroundModal(props: DialogPlaygroundProps) {
+  // not-content prevents Starlight's .sl-markdown-content styles (e.g. button
+  // height overrides, typography resets) from affecting the playground.
+  return (
+    <div className="not-content">
+      <DialogPlayground {...props} />
+    </div>
+  );
+}

packages/docs-site/src/components/PlaygroundWrapper.tsx

@@ -1,6 +1,6 @@
-import { Playground } from "@stackables/bridge-playground";
+import { App } from "@stackables/bridge-playground";
 import "@stackables/bridge-playground/style.css";
 
 export default function PlaygroundWrapper() {
-  return <Playground />;
+  return <App />;
 }

packages/docs-site/src/content/docs/reference/30-wiring-routing.mdx

@@ -4,6 +4,7 @@ description: How to move data from sources to targets, build nested payloads, an
 ---
 
 import { Aside } from "@astrojs/starlight/components";
+import MiniPlaygroundModal from "../../../components/MiniPlaygroundModal.tsx";
 
 Wires are the fundamental building blocks of The Bridge. They define the exact paths data takes as it flows through your graph.
 
@@ -32,6 +33,49 @@ o.country = "Germany"
 
 ```
 
+<MiniPlaygroundModal
+  client:load
+  bridge={`
+version 1.5
+
+const lorem = {
+"ipsum": "dolor sit amet",
+"consetetur": 8.9
+}
+
+bridge Query.greet {
+
+# witnout alias
+
+with const
+
+# with alias
+
+with input as inp
+with output as o
+
+# Pull value from input node
+
+o.nameFromInput <- inp.name
+
+# Constants
+
+o.constNumer = 7.7
+o.constString = "just a string"
+
+# Bridge variables also need pulling
+
+o.constFromConst <- const.lorem
+}
+`}
+
+inputJson={`{
+  "name": "Hello Bridge"
+}`}
+
+autoRun={true}
+/>
+
 ## 2. Path Scoping Blocks (Nested Objects)
 
 When you are wiring deeply nested JSON objects (like a complex REST API request body), repeating long path prefixes over and over becomes tedious and difficult to read.

packages/docs-site/src/styles/custom.css

@@ -1,3 +1,28 @@
+@layer theme, base, starlight, catppuccin, components, utilities;
+@import "tailwindcss";
+/* Source playground components for Tailwind to detect their classes */
+/* @source "../../../playground/src"; */
+@source "../components";
+
+@theme {
+  /* Monospace font stack for code editors - same as playground */
+  --font-mono:
+    "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
+
+  /* Custom accent colors from playground */
+  --color-sky-badge: #164e63;
+  --color-sky-trace: #1e3a5f;
+}
+
+/* Override Tailwind's base layer to prevent it breaking Starlight's layout */
+@layer base {
+  html,
+  body {
+    /* Reset to auto to let Starlight control layout */
+    height: auto;
+  }
+}
+
 /* Widen the default content column (Starlight default: 45rem / 720px) */
 /* :root {
   --sl-content-width: 55rem;

packages/docs-site/worker-configuration.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Generated by Wrangler by running `wrangler types` (hash: e41227086db6ad8bb19b68d77b165868)
-// Runtime types generated with workerd@1.20260305.0 2026-02-24 global_fetch_strictly_public,nodejs_compat
+// Runtime types generated with workerd@1.20260301.1 2026-02-24 global_fetch_strictly_public,nodejs_compat
 declare namespace Cloudflare {
 	interface GlobalProps {
 		mainModule: typeof import("./dist/_worker.js/index");
@@ -3328,6 +3328,12 @@ declare abstract class Performance {
     get timeOrigin(): number;
     /* [Cloudflare Docs Reference](https://developers.cloudflare.com/workers/runtime-apis/performance/#performancenow) */
     now(): number;
+    /**
+     * The **`toJSON()`** method of the Performance interface is a Serialization; it returns a JSON representation of the Performance object.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Performance/toJSON)
+     */
+    toJSON(): object;
 }
 // AI Search V2 API Error Interfaces
 interface AiSearchInternalError extends Error {

packages/playground/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "exports": {
-    ".": "./src/Playground.tsx",
+    ".": "./src/index.ts",
     "./style.css": "./src/index.css"
   },
   "scripts": {