cloudflare · emily-shen · Jan 29, 2026 · Jan 29, 2026 · Jan 29, 2026 · Jan 29, 2026
@@ -4,7 +4,7 @@
 	"scripts": {
 		"cf-typegen": "wrangler types --no-include-runtime",
 		"deploy": "wrangler deploy",
-		"start": "wrangler dev",
+		"start": "X_LOCAL_EXPLORER=true wrangler dev",
 		"test:ci": "vitest run",
 		"test:watch": "vitest"
 	},

diff --git a/fixtures/worker-with-resources/src/index.ts b/fixtures/worker-with-resources/src/index.ts
@@ -16,6 +16,10 @@ export default {
 				await env.KV.put(keyToSet, val);
 				return new Response("OK");
 			}
+			case "/kv/seed": {
+				await Promise.all(SEED_DATA.map(([k, v]) => env.KV.put(k, v)));
+				return new Response(`Seeded ${SEED_DATA.length} KV entries`);
+			}
 
 			// D1 database route
 			case "/d1": {
@@ -48,3 +52,147 @@ export class MyDurableObject extends DurableObject<Env> {
 		return new Response("OK");
 	}
 }
+const SEED_DATA: [string, string][] = [
+	["greeting", "Hello, World!"],
+	["counter", "42"],
+	["config:theme", "dark"],
+	["config:language", "en-US"],
+	["config:timezone", "America/New_York"],
+	["config:debug", "false"],
+	["config:max-retries", "3"],
+	["feature:dark-mode", "enabled"],
+	["feature:beta-ui", "disabled"],
+	["feature:notifications", "enabled"],
+	["api:rate-limit", "1000"],
+	["api:timeout-ms", "30000"],
+	["api:base-url", "https://api.example.com/v1"],
+	[
+		"user:1",
+		JSON.stringify({
+			id: 1,
+			name: "Alice",
+			email: "alice@example.com",
+			role: "admin",
+		}),
+	],
+	[
+		"user:2",
+		JSON.stringify({
+			id: 2,
+			name: "Bob",
+			email: "bob@example.com",
+			role: "user",
+		}),
+	],
+	[
+		"user:3",
+		JSON.stringify({
+			id: 3,
+			name: "Charlie",
+			email: "charlie@example.com",
+			role: "user",
+		}),
+	],
+	[
+		"user:4",
+		JSON.stringify({
+			id: 4,
+			name: "Diana",
+			email: "diana@example.com",
+			role: "moderator",
+		}),
+	],
+	[
+		"user:5",
+		JSON.stringify({
+			id: 5,
+			name: "Eve",
+			email: "eve@example.com",
+			role: "user",
+		}),
+	],
+	[
+		"session:abc123",
+		JSON.stringify({ userId: 1, expiresAt: "2025-12-31T23:59:59Z" }),
+	],
+	[
+		"session:def456",
+		JSON.stringify({ userId: 2, expiresAt: "2025-06-15T12:00:00Z" }),
+	],
+	[
+		"session:ghi789",
+		JSON.stringify({ userId: 3, expiresAt: "2025-03-01T08:30:00Z" }),
+	],
+	["cache:homepage", "<html><body><h1>Welcome</h1></body></html>"],
+	["cache:about", "<html><body><h1>About Us</h1></body></html>"],
+	["cache:contact", "<html><body><h1>Contact</h1></body></html>"],
+	[
+		"product:1",
+		JSON.stringify({ id: 1, name: "Widget", price: 9.99, stock: 150 }),
+	],
+	[
+		"product:2",
+		JSON.stringify({ id: 2, name: "Gadget", price: 24.99, stock: 75 }),
+	],
+	[
+		"product:3",
+		JSON.stringify({ id: 3, name: "Gizmo", price: 14.99, stock: 200 }),
+	],
+	[
+		"product:4",
+		JSON.stringify({ id: 4, name: "Thingamajig", price: 39.99, stock: 30 }),
+	],
+	[
+		"product:5",
+		JSON.stringify({ id: 5, name: "Doohickey", price: 19.99, stock: 100 }),
+	],
+	["stats:visits", "123456"],
+	["stats:unique-users", "45678"],
+	["stats:page-views", "987654"],
+	["stats:bounce-rate", "0.35"],
+	["stats:avg-session", "4m 32s"],
+	[
+		"log:error:1",
+		JSON.stringify({
+			level: "error",
+			message: "Connection timeout",
+			timestamp: "2025-01-15T10:30:00Z",
+		}),
+	],
+	[
+		"log:error:2",
+		JSON.stringify({
+			level: "error",
+			message: "Invalid token",
+			timestamp: "2025-01-15T11:45:00Z",
+		}),
+	],
+	[
+		"log:warn:1",
+		JSON.stringify({
+			level: "warn",
+			message: "Rate limit approaching",
+			timestamp: "2025-01-15T12:00:00Z",
+		}),
+	],
+	["queue:pending", "15"],
+	["queue:processing", "3"],
+	["queue:completed", "1247"],
+	["queue:failed", "12"],
+	["special/key/with/slashes", "value with slashes in key"],
+	["key with spaces", "value for spaced key"],
+	["key.with.dots", "dotted key value"],
+	["UPPERCASE_KEY", "uppercase key value"],
+	["mixedCase_Key-123", "mixed case key value"],
+	[
+		"long-value-example",
+		"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+	],
+	["emoji-key-🔑", "value with emoji in key"],
+	["empty-value", ""],
+	["boolean-true", "true"],
+	["boolean-false", "false"],
+	["number-integer", "42"],
+	["number-float", "3.14159"],
+	["number-negative", "-273.15"],
+];
@@ -0,0 +1,15 @@
+# Local explorer UI
+
+This package contains the UI for the local dev data explorer.
+The built output will be bundled into Miniflare and served by Miniflare at `/cdn-cgi/explorer`.
+
+# API
+
+This fetches data from an API running in Miniflare at`/cdn-cgi/explorer/api`.
+
+The API client is generated from the OpenAPI spec in `packages/miniflare/src/workers/local-explorer/openapi.local.json`.
+
+# Developing
+
+1. Run a worker (`fixtures/worker-with-resources`) using Wrangler or Vite, making sure it is running at `localhost:8787`.
+2. Run this package with `pnpm run dev`, which will spin up a dev server using vite.
@@ -0,0 +1,9 @@
+import sharedConfig from "@cloudflare/eslint-config-shared/react";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+	{
+		ignores: ["src/api/generated/**", "src/routeTree.gen.ts"],
+	},
+	sharedConfig,
+]);
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<title>Cloudflare Local Explorer</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
@@ -0,0 +1,14 @@
+import { defineConfig } from "@hey-api/openapi-ts";
+
+export default defineConfig({
+	input: "../miniflare/src/workers/local-explorer/openapi.local.json",
+	output: "src/api/generated",
+	plugins: [
+		"@hey-api/typescript",
+		{
+			name: "@hey-api/client-fetch",
+			runtimeConfigPath: "../client-config",
+		},
+		"@hey-api/sdk",
+	],
+});
@@ -0,0 +1,36 @@
+{
+	"name": "@cloudflare/local-explorer-ui",
+	"version": "0.0.1",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "pnpm generate:api && vite build && prettier --write src/routeTree.gen.ts",
+		"check:lint": "eslint src --max-warnings=0",
+		"check:type": "tsc --build",
+		"dev": "concurrently -n ui,worker -c blue,orange \"vite\" \"pnpm --filter @fixture/worker-with-resources start\"",
+		"dev:ui": "vite",
+		"generate:api": "openapi-ts && prettier --write src/api/generated",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@base-ui-components/react": "^1.0.0-rc.0",
+		"@hey-api/client-fetch": "^0.9.0",
+		"@tanstack/react-router": "^1.120.3",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"devDependencies": {
+		"@cloudflare/eslint-config-shared": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@hey-api/openapi-ts": "^0.90.0",
+		"@tanstack/react-router-devtools": "^1.120.3",
+		"@tanstack/router-plugin": "^1.120.3",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"@vitejs/plugin-react": "^4.4.1",
+		"concurrently": "^9.0.0",
+		"typescript": "catalog:default",
+		"vite": "catalog:default",
+		"vite-plugin-svgr": "^4.3.0"
+	}
+}
@@ -0,0 +1,6 @@
+import type { CreateClientConfig } from "./generated/client.gen";
+
+export const createClientConfig: CreateClientConfig = (config) => ({
+	...config,
+	baseUrl: "/cdn-cgi/explorer/api",
+});
@@ -0,0 +1,24 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { createClientConfig } from "../client-config";
+import { createClient, createConfig } from "./client";
+import type { ClientOptions, Config } from "./client";
+import type { ClientOptions as ClientOptions2 } from "./types.gen";
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig<T extends ClientOptions = ClientOptions2> = (
+	override?: Config<ClientOptions & T>
+) => Config<Required<ClientOptions> & T>;
+
+export const client = createClient(
+	createClientConfig(
+		createConfig<ClientOptions2>({ baseUrl: "/cdn-cgi/explorer/api" })
+	)
+);