#443

React Quick Start examples fail at runtime: Renderer must be wrapped in JSONUIProvider

Openjitui-123opened 15d ago

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 (Renderer in a Dashboard component, 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 VisibilityProvider

Working version

import { defineRegistry, Renderer, JSONUIProvider } from "@json-render/react";

<JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
  <Renderer spec={spec} registry={registry} />
</JSONUIProvider>

Environment

  • @json-render/core 0.21.3
  • @json-render/react 0.21.3
  • @json-render/shadcn 0.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

0

No activity yet.