Summary
The React examples in the README render <Renderer> without a provider, which throws at runtime. This wraps them in <JSONUIProvider> and adds a short note on why the provider is required.
Error: useVisibility must be used within a VisibilityProvider
at useVisibility (...)
at ReactiveElementRenderer (...)Refs #443.
Changed
Every snippet that renders <Renderer> for React now includes the provider import and wrapper:
- Quick Start, section 3 ("Render AI-Generated Specs")
- React (UI) renderer section
- shadcn/ui section
- React Native section — had the same gap and is fixed here too
The Solid example already wrapped correctly and is unchanged, as are the Vue and Svelte sections where <Renderer> appears only in a comment showing template usage.
Why the provider is required
Renderer calls useVisibility(), which throws unless a VisibilityProvider is above it. JSONUIProvider is what supplies that context, along with state, validation, and actions:
<StateProvider>
<VisibilityProvider>
<ValidationProvider>
<ActionProvider>
...The imported JSONUIProvider is available from both @json-render/react and @json-render/react-native.
Verification
Checked out the branch with @json-render/core, @json-render/react, and @json-render/shadcn at 0.21.3, React 19, and Zod 4:
- Before: a component returning bare
<Renderer spec registry />throwsuseVisibility must be used within a VisibilityProvider. - After: the updated snippet renders.
- Also searched the README for remaining bare
<Renderer>usages — none left outside comments.
Happy to adjust the wording or drop the React Native change if you'd rather keep this PR to the three React snippets.
@jitui-123 is attempting to deploy a commit to the Vercel Labs Team on Vercel.
A member of the Team first needs to authorize it.