@soroban-dev-kit/devtools

A drop-in panel for soroban-dev-kit apps that lists every live useReadContract query in the TanStack Query cache — contract id, method, status, and the decoded result — instead of raw XDR/ScVal.

npm install @soroban-dev-kit/devtools

Usage

import { SorobanDevtoolsPanel } from "@soroban-dev-kit/devtools";

function DevPanel() {
  if (process.env.NODE_ENV !== "development") return null;
  return <SorobanDevtoolsPanel />;
}

Must be rendered inside the same QueryClientProvider as the rest of your app. Deliberately plain — no drag/resize/portal chrome like @tanstack/react-query-devtools's own panel — so it's easy to embed inline, in a sidebar, or behind your own toggle.

Want a different UI on the same data? useSorobanDevtoolsEntries() is exported separately and returns the same decoded entries as a plain array.

Full docs and the design rationale: see the soroban-dev-kit repo and its SKILL.md.