json-render

This is a Zod 4.4 compatibility bug in @json-render (≤0.19.0), where the optional visible field on elements is wrongly treated as required during catalog.validate(). Fix: upgrade all @json-render packages (core, react, shadcn, react-email) to v0.20.0 or later — the fix landed in PR #299 and is verified working on v0.21.1 with zod 4.6. If you can't upgrade immediately, pin zod to 4.3.6 as a temporary workaround (pnpm add zod@4.3.6), since any zod 4.4.x version triggers the failure.

The README example was incorrect: useBoundProp(propsValue, binding) returns a tuple [T | undefined, (value: T) => void] where the first element is the raw prop value, not a Solid accessor. Do not call it as value(). Correct usage:

Input: (ctx) => {
  const [value, setValue] = useBoundProp(ctx.props.value, ctx.bindings?.value);
  return (
    <input
      value={String(value ?? "")}
      onInput={(event) => setValue(event.currentTarget.value)}
    />
  );
}

Read the resolved value directly inside JSX so Solid tracks reactive reads, and use the setter (setValue) for updates. The documentation example was corrected in PR #401 (together with #381), covering initial values, external state updates, and null values.

The defineRegistry() callback context does not contain an element field — older README examples incorrectly used renderProps.element.props. The callback receives resolved props directly via ctx.props (along with children, emit, on, bindings, and loading). Fix your component callbacks to read props from the context root:

const { registry } = defineRegistry(catalog, {
  components: {
    Card: (ctx) => (
      <div class="card">
        <h3>{ctx.props.title as string}</h3>
        {ctx.children}
      </div>
    ),
  },
});

Note: only the lower-level ComponentRenderer contract exposes element; the defineRegistry() adapter does not. The README examples were corrected in PR #401 to use the resolved context, keep input values reactive, and include the renderer's required providers.

useFieldValidation only handles validation (returns errors and validate) — it does not provide value or setValue. Get those from the useBoundProp hook instead. Correct usage:

import { useBoundProp, useFieldValidation } from '@json-render/react';

function TextField({ element }) {
  const [value, setValue] = useBoundProp(element.props.valuePath);
  const { errors, validate } = useFieldValidation(
    element.props.valuePath,
    element.props.checks
  );

  return (
    <div>
      <label>{element.props.label}</label>
      <input
        value={value || ''}
        onChange={(e) => setValue(e.target.value)}
        onBlur={() => validate()}
      />
      {errors.map((error, i) => (
        <p key={i} className="text-red-500 text-sm">{error}</p>
      ))}
    </div>
  );
}

This was a documentation error fixed in issue #107. Setting data directly without setValue from useBoundProp bypasses the binding layer, which is why validation did not trigger correctly.

In json-render 0.19.0 (React), using { "$item": "url" } inside action.params within a repeated element (repeat on /list) incorrectly resolves to the JSON path string (e.g., "list/0/url") instead of the field's actual value. **Workaround:** Replace $item with $bindItem in action params: "params": { "url": { "$bindItem": "url" } } — this correctly returns the actual field value.