feat: JSON Render dock type and Git UI example (#203)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: antfu

docs/.vitepress/config.ts

@@ -69,6 +69,7 @@ export default extendConfig(withMermaid(defineConfig({
           { text: 'RPC', link: '/kit/rpc' },
           { text: 'Shared State', link: '/kit/shared-state' },
           { text: 'Logs', link: '/kit/logs' },
+          { text: 'JSON Render', link: '/kit/json-render' },
           { text: 'Examples', link: '/kit/examples' },
         ],
       },

docs/kit/dock-system.md

@@ -8,14 +8,15 @@ Dock entries are the primary way for users to interact with your DevTools integr
 
 ## Entry Types
 
-DevTools Kit supports four types of dock entries:
+DevTools Kit supports five types of dock entries:
 
 | Type | Description | Use Case |
 |------|-------------|----------|
 | `iframe` | Displays your UI in an iframe panel | Full-featured UIs, dashboards, data visualization |
 | `action` | Button that triggers client-side scripts | Inspectors, toggles, one-time actions |
 | `custom-render` | Renders directly in the user's app DOM | When you need direct DOM access or framework integration |
 | `launcher` | Actionable setup card shown in panel | Run one-time setup tasks before showing other tools |
+| `json-render` | Renders UI from a JSON spec — no client code needed | Data panels, config viewers, simple interactive tools |
 
 ## Iframe Panels
 
@@ -71,7 +72,7 @@ interface DockEntry {
   /** Icon URL, data URI, or Iconify icon name (e.g., 'ph:house-duotone') */
   icon: string
   /** Entry type */
-  type: 'iframe' | 'action' | 'custom-render' | 'launcher'
+  type: 'iframe' | 'action' | 'custom-render' | 'launcher' | 'json-render'
   /** URL to load in the iframe (for type: 'iframe') */
   url?: string
   /** Action configuration (for type: 'action') */
@@ -86,6 +87,8 @@ interface DockEntry {
     buttonStart?: string
     buttonLoading?: string
   }
+  /** JsonRenderer handle created by ctx.createJsonRenderer() (for type: 'json-render') */
+  ui?: JsonRenderer
 }
 ```
 
@@ -296,6 +299,48 @@ ctx.docks.register({
 > [!NOTE]
 > Built-in logs panel (`~logs`) is currently reserved and hidden while log UI is under development.
 
+## JSON Render Panels
+
+JSON render panels let you describe your UI as a JSON spec on the server side — **no client code needed.** This is the simplest way to add a DevTools panel.
+
+Use `ctx.createJsonRenderer()` to create a renderer handle, then pass it as `ui` when registering a `json-render` dock entry:
+
+```ts
+const ui = ctx.createJsonRenderer({
+  root: 'root',
+  elements: {
+    root: {
+      type: 'Stack',
+      props: { direction: 'vertical', gap: 12 },
+      children: ['heading', 'info'],
+    },
+    heading: {
+      type: 'Text',
+      props: { content: 'Hello from JSON!', variant: 'heading' },
+    },
+    info: {
+      type: 'KeyValueTable',
+      props: {
+        entries: [
+          { key: 'Version', value: '1.0.0' },
+          { key: 'Status', value: 'Running' },
+        ],
+      },
+    },
+  },
+})
+
+ctx.docks.register({
+  id: 'my-panel',
+  title: 'My Panel',
+  icon: 'ph:chart-bar-duotone',
+  type: 'json-render',
+  ui,
+})
+```
+
+See the [JSON Render](/kit/json-render) page for the full component reference, dynamic updates, actions, state bindings, and examples.
+
 ## Communication with Server
 
 All client scripts (actions and custom renderers) can communicate with the server using [RPC](./rpc):

docs/kit/examples.md

@@ -32,3 +32,18 @@ A file explorer dock that lists, reads, and writes files through RPC.
 - Detecting backend mode (`websocket` vs `static`) on the client
 
 **Source:** [`examples/plugin-file-explorer`](https://github.com/vitejs/devtools/tree/main/examples/plugin-file-explorer)
+
+## Git UI
+
+An interactive Git panel built entirely with server-side JSON specs — no client code at all.
+
+**Features demonstrated:**
+
+- Using the `json-render` dock type for zero-client-code panels
+- Building a `JsonRenderSpec` from server-side data (git branch, status, log)
+- Dynamic spec updates via shared state (`sharedStateKey`)
+- Button actions bridged to RPC functions (`git-ui:refresh`, `git-ui:commit`)
+- Text input with `$bindState` two-way binding and `$state` in action params
+- Updating dock badge text reactively
+
+**Source:** [`examples/plugin-git-ui`](https://github.com/vitejs/devtools/tree/main/examples/plugin-git-ui)