vercel-labs/json-render

devtools-svelte

Svelte 5 adapter for the json-render devtools inspector.

Zobacz źródło

Jak używać

  1. Skopiuj polecenie instalacji i sprawdź źródła przed instalacją we własnym środowisku agenta.
  2. W oryginale sprawdź wymagane narzędzia, dane dostępowe i obsługiwane środowiska.
  3. Opisz dane wejściowe i oczekiwany rezultat; porównaj wynik ze źródłami.
npx skills add https://github.com/vercel-labs/json-render --skill devtools-svelte

Przed rozpoczęciem

  • Instalacja nie obejmuje subskrypcji modelu, limitu API ani uprawnień do plików.
  • Gwiazdki i instalacje pokazują aktywność, a nie niezależny test jakości lub bezpieczeństwa.
Oryginalny dokument Skill

Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.

@json-render/devtools-svelte

Svelte 5 adapter for the json-render devtools panel. Read skills/devtools/SKILL.md for the shared panel capabilities, props, docking behavior, and server-side stream taps.

Install

bash
npm install @json-render/devtools @json-render/devtools-svelte

Mount the panel

Mount JsonRenderDevtools inside the existing Svelte json-render provider:

svelte
<script>
  import { JsonRenderDevtools } from "@json-render/devtools-svelte";
</script>

<JSONUIProvider {registry}>
  <Renderer {spec} {registry} />
  <JsonRenderDevtools {spec} {catalog} {messages} />
</JSONUIProvider>

The component renders nothing in production builds. The panel provides the shared devtools controls, including the Ctrl/Cmd + Shift + J shortcut. Keep server-side stream instrumentation in @json-render/devtools.

z tego samego repozytorium

Więcej Skills

Wszystkie Skills
vercel-labs
Oficjalne

core

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.

instalacje
3
GitHub Stars
18,8 tys.
Aktualizacja
24 paź
vercel-labs
Oficjalne

devtools

Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for @json-render/devtools.

instalacje
2
GitHub Stars
18,8 tys.
Aktualizacja
24 paź
vercel-labs
Oficjalne

devtools-react

React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-react in a React json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.

instalacje
2
GitHub Stars
18,8 tys.
Aktualizacja
24 paź
vercel-labs
Oficjalne

devtools-vue

Vue adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-vue in a Vue json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.

instalacje
2
GitHub Stars
18,8 tys.
Aktualizacja
24 paź