This example shows how to build a fully interactive DevTools panel using @vitejs/devtools-kit's json-render dock type — with zero client-side code.

It registers a json-render dock that displays the current git state: branch, staged/unstaged files, recent commits, and a commit form.

The entire UI is described as a JSON spec on the server side. The DevTools client renders it using built-in components powered by @json-render/vue.

1. Node plugin (src/node/plugin.ts)

   • collects git state by running git commands (git branch, git log, git status)
   • builds a JsonRenderSpec describing the UI layout (Stack, Card, DataTable, TextInput, Button, etc.)
   • stores the spec in a shared state key and registers a json-render dock entry
   • registers two RPC functions:
     • git-ui:refresh — re-reads git state and updates the spec
     • git-ui:commit — runs git commit -m "..." with the message from the text input

2. Client rendering (automatic)

   • ViewJsonRender.vue subscribes to the shared state key
   • renders the spec using the built-in devtools component registry
   • bridges button clicks → RPC calls via the json-render action system
   • text input uses $bindState for two-way binding; the commit action reads the message via $state

Key point: there is no client-side code in this plugin. No Vue components, no Nuxt app, no iframe. The plugin only writes TypeScript on the server side.

From the examples/plugin-git-ui directory (cd examples/plugin-git-ui):

pnpm play:dev

Then open the app URL, open Vite DevTools, and click the Git dock entry.

You can also test it from the core playground:

pnpm -C packages/core run play