---
outline: deep
---

# DF0038: Invalid JSON-Render Element Props

## Message

> JSON-render view "`{id}`" received invalid props on element "`{key}`": `{issues}`

## Cause

`@devframes/json-render` validates every element's props against the base catalog's per-component Zod schema at spec ingress (`createJsonRenderView` / `view.update`). Upstream `@json-render/core` only checks component *names*, so this per-component prop check is the one validation Devframes adds. An element whose props don't match its component's schema is rejected here rather than failing silently at render.

## Example

```ts
// ✗ Bad — `variant` is not one of the Button variants
createJsonRenderView(ctx, {
  id: 'toolbar',
  spec: { root: 'a', elements: { a: { type: 'Button', props: { variant: 'nope' }, children: [] } } },
})

// ✓ Good
createJsonRenderView(ctx, {
  id: 'toolbar',
  spec: { root: 'a', elements: { a: { type: 'Button', props: { variant: 'primary', label: 'Save' }, children: [] } } },
})
```

## Fix

Match the element props to the base catalog's prop schema for that component. Dynamic `$state` / `$bindState` expressions are accepted wherever a scalar prop is expected, so a valid binding never triggers this.

## Source

- [`packages/json-render/src/node/create-view.ts`](https://github.com/devframes/devframe/blob/main/packages/json-render/src/node/create-view.ts) — `validateElementProps()` throws this at ingress and on `update`.
