@dinesh-kumar-sridharan/ui-renderer-react

React adapter for the schema-driven Universal UI Renderer.
Pass ONE JSON schema — get a complete, production-ready React component.

Install

npm install @dinesh-kumar-sridharan/ui-renderer-react
# peer deps
npm install react react-dom

Usage

import { UIRenderer } from '@dinesh-kumar-sridharan/ui-renderer-react'

<UIRenderer
  schema={schema}
  onSubmit={(values) => console.log(values)}
/>

Props

| Prop | Type | Description | |------|------|-------------| | schema | UISchema | Parsed schema object (use parseSchema() for raw JSON) | | data | Record<string, unknown>[] | Row data for table/list schemas | | initialValues | Record<string, unknown> | Pre-fill form / detail values | | onSubmit | (values) => void \| Promise<void> | Form/wizard submit handler | | onChange | (values) => void | Called on every field change | | onSelectionChange | (keys: string[]) => void | Table row selection |

Schema types

// Form
<UIRenderer schema={{ type: 'form', fields: [...] }} onSubmit={fn} />

// Table
<UIRenderer schema={{ type: 'table', columns: [...] }} data={rows} />

// Dashboard
<UIRenderer schema={{ type: 'dashboard', widgets: [...] }} />

// Wizard
<UIRenderer schema={{ type: 'wizard', steps: [...] }} onSubmit={fn} />

// Detail (read-only)
<UIRenderer schema={{ type: 'detail', sections: [...] }} initialValues={record} />

// List
<UIRenderer schema={{ type: 'list', filters: [...] }} data={items} />

Parse raw JSON

import { parseSchema } from '@dinesh-kumar-sridharan/ui-renderer-react'

const schema = parseSchema(JSON.parse(jsonString))

Plugin registration

import { UIRenderer } from '@dinesh-kumar-sridharan/ui-renderer-react'

// Register once at app startup
UIRenderer.register('signature-pad', SignaturePadComponent)
UIRenderer.register('rich-text-editor', TiptapEditor)

// Use in schema
// { "id": "sig", "type": "custom", "plugin": "signature-pad" }

Custom components receive these props:

interface PluginFieldProps {
  field:    FieldSchema
  value:    unknown
  onChange: (value: unknown) => void
  onBlur:   () => void
  hasError: boolean
}

AI integration

import {
  AISchemaRenderer,
  AISchemaPlayground,
  useAISchema,
} from '@dinesh-kumar-sridharan/ui-renderer-react'

// Safe renderer for raw LLM output
<AISchemaRenderer json={rawJsonFromLLM} onSubmit={fn} />

// Interactive playground — JSON editor + live preview
<AISchemaPlayground />

// Hook — validate + parse pipeline
const { schema, errors, warnings, status } = useAISchema(rawJson)

Validate AI-generated schemas

import { validateAIGeneratedSchema } from '@dinesh-kumar-sridharan/ui-renderer-react'

const result = validateAIGeneratedSchema(rawJson)
// result.valid    → boolean
// result.errors   → { path, code, message }[]
// result.warnings → { path, code, message }[]

Links

• Full documentation
• Schema specification
• AI prompt templates
• Angular adapter
• Blazor adapter
• GitHub

License

MIT © Dinesh Kumar Sridharan