Summary
The React Quick Start in the root README.md and the @json-render/react usage examples render <Renderer> without any provider. Copying these snippets verbatim crashes at runtime:
Error: useVisibility must be used within a VisibilityProvider
at useVisibility (...)
at ReactiveElementRenderer (...)Where
Root README.md:
- Line 119 — React Quick Start (
Rendererin aDashboardcomponent, no provider) - Line 188 — React renderer section, "That's it" example
- Line 280 — shadcn/ui section
The Solid section (line 231–247) is the only renderer example that wraps <JSONUIProvider> correctly, which suggests this was known but never backported to the React examples.
Why it fails
Renderer calls useVisibility(), which throws unless a VisibilityProvider is above it:
throw new Error("useVisibility must be used within a VisibilityProvider");JSONUIProvider is what supplies it. Its implementation nests the required providers:
<StateProvider>
<VisibilityProvider>
<ValidationProvider>
<ActionProvider>
<FunctionsContext.Provider>
<DirectivesContext.Provider>
{children}
<ConfirmationDialogManager />So the provider is not optional for React — only for renderers whose README already shows it.
Reproduction
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { defineRegistry, Renderer } from "@json-render/react";
const catalog = defineCatalog(schema, { components: { /* ... */ }, actions: {} });
const { registry } = defineRegistry(catalog, { components: { /* ... */ } });
const spec = { root: "a", elements: { a: { type: "Card", props: {}, children: [] } } };
// Exactly as documented
<Renderer spec={spec} registry={registry} />;
// -> Error: useVisibility must be used within a VisibilityProviderWorking version
import { defineRegistry, Renderer, JSONUIProvider } from "@json-render/react";
<JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
<Renderer spec={spec} registry={registry} />
</JSONUIProvider>Environment
@json-render/core0.21.3@json-render/react0.21.3@json-render/shadcn0.21.3- react / react-dom 19
- zod 4
- Vite 8, Node 26
Suggested fix
Update the three README snippets to include <JSONUIProvider>, or add a one-line note in the Quick Start that Renderer must be wrapped in a provider. A provider-missing error that names the required component (e.g. "wrap <Renderer> in <JSONUIProvider>") would also save a lot of time for newcomers.
This is not a bug report — the provider design is reasonable. The issue is that the primary React examples in the README don't work as written.
Activity
0No activity yet.