From fcd05937040a3fc042a88cb1b28ac8258e7d8017 Mon Sep 17 00:00:00 2001
From: Brenley Dueck <brenleydueck@gmail.com>
Date: Mon, 26 Oct 2026 16:50:03 -0500
Subject: [PATCH] feat: embed the Solid playground in the reactivity page

---
 eslint.config.ts                         |  1 +
 osmium/package.json                      |  1 +
 osmium/src/mdx-components.tsx            |  1 +
 osmium/src/ui/playground.tsx             | 52 ++++++++++++++++++++++++
 pnpm-lock.yaml                           | 12 ++++++
 src/playgrounds/line-item.tsx            | 22 ++++++++++
 src/routes/(2)concepts/(0)reactivity.mdx |  4 ++
 tsconfig.json                            |  2 +-
 8 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 osmium/src/ui/playground.tsx
 create mode 100644 src/playgrounds/line-item.tsx

diff --git a/eslint.config.ts b/eslint.config.ts
index 2a56d00b79..41c0f83543 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -18,6 +18,7 @@ export default tseslint.config(
 			".netlify/",
 			"public/",
 			"scripts/",
+			"src/playgrounds/",
 		],
 	},
 	{
diff --git a/osmium/package.json b/osmium/package.json
index d4000e5dbc..e8614da380 100644
--- a/osmium/package.json
+++ b/osmium/package.json
@@ -28,6 +28,7 @@
 	},
 	"license": "MIT",
 	"dependencies": {
+		"@amoutonbrady/lz-string": "0.2.0",
 		"@fontsource-variable/geist": "^5.3.0",
 		"@fontsource-variable/geist-mono": "^5.3.0",
 		"@kobalte/core": "^0.13.12",
diff --git a/osmium/src/mdx-components.tsx b/osmium/src/mdx-components.tsx
index 94c03caced..2e374f4603 100644
--- a/osmium/src/mdx-components.tsx
+++ b/osmium/src/mdx-components.tsx
@@ -26,6 +26,7 @@ export { Callout } from "./ui/callout";
 export { DeepDive } from "./ui/deep-dive";
 export { QuickLinks } from "./ui/quick-links";
 export { ImageLink } from "./ui/image-link";
+export { Playground } from "./ui/playground";
 
 const EraserLinkImpl = clientOnly(() => import("./ui/eraser-link"));
 
diff --git a/osmium/src/ui/playground.tsx b/osmium/src/ui/playground.tsx
new file mode 100644
index 0000000000..439d44272d
--- /dev/null
+++ b/osmium/src/ui/playground.tsx
@@ -0,0 +1,52 @@
+import { compressToURL } from "@amoutonbrady/lz-string";
+import { createMemo } from "solid-js";
+
+const PLAYGROUND_URL =
+	import.meta.env.VITE_PLAYGROUND_URL ?? "https://playground.solidjs.com/";
+const DEFAULT_SOLID_VERSION = "2.0.0-rc.18";
+
+export type PlaygroundProps = {
+	code?: string;
+	files?: Record<string, string>;
+	solidVersion?: string;
+	title?: string;
+	height?: string;
+};
+
+export const Playground = (props: PlaygroundProps) => {
+	const src = createMemo(() => {
+		const files = props.files ?? { "main.tsx": props.code ?? "" };
+		const version = props.solidVersion ?? DEFAULT_SOLID_VERSION;
+		const tabs = Object.entries(files).map(([name, source]) => ({
+			name,
+			source,
+		}));
+		// The playground runs the Solid version that import_map.json pins for solid-js.
+		tabs.push({
+			name: "import_map.json",
+			source: JSON.stringify(
+				{ imports: { "solid-js": `https://esm.sh/solid-js@${version}` } },
+				null,
+				2
+			),
+		});
+		return `${PLAYGROUND_URL}#${compressToURL(JSON.stringify(tabs))}`;
+	});
+
+	return (
+		<figure class="my-6">
+			<iframe
+				src={src()}
+				title={props.title ?? "Solid playground"}
+				loading="lazy"
+				class="w-full rounded-lg border border-slate-300 dark:border-slate-700"
+				style={{ height: props.height ?? "560px" }}
+			/>
+			<figcaption class="mt-2 text-sm">
+				<a href={src()} target="_blank" rel="noopener">
+					Open in the Solid Playground
+				</a>
+			</figcaption>
+		</figure>
+	);
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df0b1eb4fd..c3cf5a2a44 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -113,6 +113,9 @@ importers:
 
   osmium:
     dependencies:
+      "@amoutonbrady/lz-string":
+        specifier: 0.2.0
+        version: 0.2.0
       "@fontsource-variable/geist":
         specifier: ^5.3.0
         version: 5.3.0
@@ -170,6 +173,13 @@ packages:
       }
     engines: { node: ">=10" }
 
+  "@amoutonbrady/lz-string@0.2.0":
+    resolution:
+      {
+        integrity: sha512-QTulRZhJnXmo6yyknjFuWpZIxp98AStw0TbY9hwYIvPscX6N3ON55Tw46YP0NxPEMRrr8QroKPyrLUsJGj6KkA==,
+      }
+    engines: { node: ">=20" }
+
   "@antfu/install-pkg@1.1.0":
     resolution:
       {
@@ -5410,6 +5420,8 @@ packages:
 snapshots:
   "@alloc/quick-lru@5.2.0": {}
 
+  "@amoutonbrady/lz-string@0.2.0": {}
+
   "@antfu/install-pkg@1.1.0":
     dependencies:
       package-manager-detector: 1.7.0
diff --git a/src/playgrounds/line-item.tsx b/src/playgrounds/line-item.tsx
new file mode 100644
index 0000000000..bf7debce92
--- /dev/null
+++ b/src/playgrounds/line-item.tsx
@@ -0,0 +1,22 @@
+import { createSignal } from "solid-js";
+import { render } from "@solidjs/web";
+
+export function LineItem() {
+	const [quantity, setQuantity] = createSignal(1);
+	const price = 12;
+
+	return (
+		<div>
+			<button type="button" onClick={() => setQuantity(quantity() - 1)}>
+				−
+			</button>
+			<span>{quantity()}</span>
+			<button type="button" onClick={() => setQuantity(quantity() + 1)}>
+				+
+			</button>
+			<p>Subtotal: ${quantity() * price}</p>
+		</div>
+	);
+}
+
+render(() => <LineItem />, document.getElementById("app")!);
diff --git a/src/routes/(2)concepts/(0)reactivity.mdx b/src/routes/(2)concepts/(0)reactivity.mdx
index 846293b102..a7d59ef525 100644
--- a/src/routes/(2)concepts/(0)reactivity.mdx
+++ b/src/routes/(2)concepts/(0)reactivity.mdx
@@ -4,6 +4,8 @@ version: "2.0"
 description: "Signals, memos, and effects: how Solid tracks reads, why a component runs once, and how to tell when a value will update."
 ---
 
+import lineItem from "~/playgrounds/line-item.tsx?raw";
+
 In the [Quick start](/getting-started/quick-start) you saw two versions of the same counter.
 One read `count()` inside the JSX and updated on every click.
 The other read `count()` in the component body, and the button froze at zero while the console warned that the read "will not update".
@@ -344,6 +346,8 @@ Show the shipping cost, the total, and a line that reads either "Free shipping"
 
 Before you look at the solution, decide for each value whether it should be a plain function or a memo, and where each read has to happen.
 
+<Playground code={lineItem} title="LineItem starter" />
+
 :::solution[A shipping estimate]
 
 ```tsx
diff --git a/tsconfig.json b/tsconfig.json
index 26a747ca37..d9576454d7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,5 +15,5 @@
 		},
 		"types": ["vite/client"]
 	},
-	"exclude": ["node_modules"]
+	"exclude": ["node_modules", "src/playgrounds"]
 }