Skip to content

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

Open

Description

@jitui-123

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions