What is react-declarative and what can you build

react-declarative is a TypeScript React library that turns a TypedField[] JSON schema into fully functional forms, data grids, kanban boards, wizards, and application shells — without manual state wiring. You describe what you want using a JSON schema; the library handles rendering, validation, and state management automatically on top of Material UI (MUI) components.

Why react-declarative

Most form libraries require you to write both a data schema and a UI schema separately. react-declarative merges them into a single TypedField[] array, which means less code and fewer places for data model drift to creep in.

Note: The key difference from jsonforms: you do not need a separate JSON Schema for your data model. All validations live inside the UI schema, so your backend can return partial data (PATCH-style) and the form adapts automatically.

react-declarative scales from a single embedded form to a full CRM or ERP — the same JSON schema pattern applies to every level.

Key features

Forms (One)

Render nested 12-column grid forms from a TypedField[] schema. Supports 40+ field types, inline validation, conditional visibility, and JSX injection.

Data grid (List)

Filterable, sortable, paginated data grid with built-in mobile layout. Columns, filters, actions, and row menus are all configured from JSON.

App shell (Scaffold)

Material Design app shells with navigation groups, tabs, and action menus — configured from an IScaffold2Group[] array, not hand-written JSX.

Playground

Try react-declarative in your browser without installing anything. Edit schemas live and see the output instantly.

What else you can build

Beyond forms and grids, react-declarative ships production-ready components for the full application lifecycle:

• KanbanView — drag-and-drop kanban boards with real-time column updates
• WizardView — multi-step action wizards with MUI Stepper and nested routing
• VisibilityView / FeatureView — role-based UI visibility configured from feature flags
• VirtualView / InfiniteView — virtualized and infinite-scroll lists with transparent-API virtualization
• Async hooks — useSinglerunAction, useQueuedAction, useAsyncValue, useAsyncProgress for managing async UI state without boilerplate

TypeScript IntelliSense

Every schema array is typed through TypedField<Data, Payload>. Your IDE will autocomplete field property names, flag invalid type values, and surface validation errors at authoring time — not at runtime.

import { TypedField, FieldType } from 'react-declarative';

interface IProfile {
  firstName: string;
  email: string;
  role: string;
}

const fields: TypedField<IProfile>[] = [
  {
    type: FieldType.Text,
    name: 'firstName', // autocompleted from IProfile
    title: 'First name',
  },
];
Copy

Using with AI

react-declarative schemas are structured JSON, which makes them easy for LLMs to generate. There is a documented guide in the repository for prompting GPT-4 to produce form schemas automatically — see the docs folder for details.

Next steps

Installation

Install the package and peer dependencies in two commands.

Quick start

Build your first form and data grid in under five minutes.