#445

docs: wrap Renderer in JSONUIProvider in README examples

Openjitui-123wants to merge intofrom

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 /> throws useVisibility 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.

Activity

3
vercel[bot]15d ago

@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.

vercel[bot]reviewed15d ago