### Build Example Applications

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Installs dependencies and builds all packages, a prerequisite for starting any dev server.

```bash
pnpm install                  # Install dependencies (run from repo root)
pnpm run build                # Build all packages (required before dev servers work)
```

--------------------------------

### Run React Vanilla Examples

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Start the development server for React Vanilla examples. Navigate to the 'packages/vanilla-renderers' directory first.

```bash
cd packages/vanilla-renderers && pnpm run dev
```

--------------------------------

### Run Vue Vanilla Dev Setup

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Start the development server for Vue Vanilla examples. Navigate to the 'packages/vue-vanilla' directory first.

```bash
cd packages/vue-vanilla && pnpm run dev
```

--------------------------------

### Run Vue Vuetify Dev Setup

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Start the development server for Vue Vuetify examples. Navigate to the 'packages/vue-vuetify' directory first.

```bash
cd packages/vue-vuetify && pnpm run dev
```

--------------------------------

### Run React Material Examples

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Start the development server for React Material examples. Navigate to the 'packages/material-renderers' directory first.

```bash
cd packages/material-renderers && pnpm run dev
```

--------------------------------

### Run Angular Material Examples

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Start the development server for Angular Material examples. Navigate to the 'packages/angular-material' directory first.

```bash
cd packages/angular-material && pnpm run dev
```

--------------------------------

### Build Combined Examples App

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Builds all example bundles and aggregates them into the `dist` directory for the combined examples app. This is part of the full build process.

```bash
pnpm install                          # Install dependencies
pnpm run build                        # Build all packages (required first)
pnpm run build:examples-app           # Build all example bundles + aggregate into dist
```

--------------------------------

### Install Dependencies

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Installs all project dependencies. Run from the repository root.

```bash
pnpm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Install project dependencies using npm. Ensure you have Node.js installed.

```bash
npm ci
```

--------------------------------

### Install Node.js

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Install Node.js version 24 or higher, but less than 25. This is a prerequisite for development.

```bash
Install [node.js](https://nodejs.org/) (only Node v24+ < 25 is currently supported)
```

--------------------------------

### Serve Combined Examples App

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Serves the static files for the combined examples app using Python's built-in HTTP server. The app is located at `packages/examples-app/dist/`.

```bash
python3 -m http.server 9090 --directory packages/examples-app/dist
```

--------------------------------

### Install JSON Forms Core, React, and Material Renderers

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/README.md

Install the necessary JSON Forms packages using npm.

```bash
npm i --save @jsonforms/core @jsonforms/react @jsonforms/material-renderers
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Install all project dependencies using pnpm. The --frozen-lockfile flag ensures reproducible builds.

```bash
pnpm i --frozen-lockfile
```

--------------------------------

### Angular Module Setup for JSON Forms

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/README.md

Example of an Angular module file demonstrating the necessary imports for JSON Forms and Angular Material Renderers, including BrowserAnimationsModule.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { JsonFormsModule } from '@jsonforms/angular';
import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    JsonFormsModule,
    JsonFormsAngularMaterialModule,
  ],
  schemas: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

--------------------------------

### Install pnpm

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Install pnpm version 10.33.0 or use corepack. pnpm is the recommended package manager for this project.

```bash
Install pnpm: <https://pnpm.io/installation> (use pnpm 10.33.0+) or use [corepack](https://nodejs.org/docs/latest-v18.x/api/corepack.html) to enable the recommended version
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vuetify/README.md

Install JSON Forms Core, Vue 3, and Vue 3 Vuetify Renderers using npm.

```bash
npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vuetify
```

--------------------------------

### Install JSON Forms Core, React, and Vanilla Renderers

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers/README.md

Install the necessary JSON Forms packages using npm. This includes the core library, the React integration, and the vanilla renderers.

```bash
npm i --save @jsonforms/core @jsonforms/react @jsonforms/vanilla-renderers
```

--------------------------------

### Rebuild Specific Renderer Set and Examples

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Rebuilds a changed package, its example bundle, and re-aggregates into the combined app. Use this after code changes to a specific renderer set.

```bash
# 1. Rebuild the changed package (and any dependencies that changed)
pnpm lerna run build --scope=@jsonforms/material-renderers

# 2. Rebuild only that renderer set's example bundle
pnpm lerna run build:examples-app --scope=@jsonforms/material-renderers

# 3. Re-aggregate into the combined app
node packages/examples-app/prepare-examples-app.js
```

--------------------------------

### Build All Packages

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Builds all packages within the repository. This is a prerequisite for running dev servers and example applications.

```bash
pnpm run build
```

--------------------------------

### Run Seed App

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Start the React seed application. This command will launch the development server.

```bash
npm run start
```

--------------------------------

### Install JSON Forms Packages

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/README.md

Install the necessary JSON Forms packages for core functionality, Angular integration, and Angular Material renderers using npm.

```bash
npm i --save @jsonforms/core @jsonforms/angular @jsonforms/angular-material
```

--------------------------------

### Using Prepend Slot in String Control Renderer

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vuetify/README.md

Example demonstrating how to use the `prepend` slot in a `string-control-renderer` to add custom content, such as an icon, before the input field.

```vue
<template>
  <string-control-renderer v-bind="$props">
    <template #prepend>
      <v-icon>mdi-help-circle</v-icon>
    </template>
  </string-control-renderer>
</template>
```

--------------------------------

### Install JSON Forms Vue Vanilla Renderers

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vanilla/README.md

Install the necessary JSON Forms packages for Vue and Vue Vanilla renderers using npm. Ensure these packages are included in your `vue.config.js` transpile dependencies.

```bash
npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vanilla
```

--------------------------------

### Clone Seed App

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Clone the React seed app to start building forms quickly. Use this to begin a new project.

```bash
git clone https://github.com/eclipsesource/jsonforms-react-seed.git
```

--------------------------------

### Basic JSON Forms Integration with Vanilla Renderers

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers/README.md

Integrate JSON Forms into a React application using the `JsonForms` component. This example demonstrates how to provide a schema, UI schema, initial data, and the vanilla renderers and cells.

```javascript
import React, { useState } from 'react';
import { JsonForms } from '@jsonforms/react';
import { vanillaCells, vanillaRenderers } from '@jsonforms/vanilla-renderers';

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    done: {
      type: 'boolean',
    },
    due_date: {
      type: 'string',
      format: 'date',
    },
    recurrence: {
      type: 'string',
      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
    },
  },
  required: ['name', 'due_date'],
};
const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: false,
      scope: '#/properties/done',
    },
    {
      type: 'Control',
      scope: '#/properties/name',
    },
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/due_date',
        },
        {
          type: 'Control',
          scope: '#/properties/recurrence',
        },
      ],
    },
  ],
};
const initialData = {};
function App() {
  const [data, setData] = useState(initialData);
  return (
    <JsonForms
      schema={schema}
      uischema={uischema}
      data={data}
      renderers={vanillaRenderers}
      cells={vanillaCells}
      onChange={({ data, _errors }) => setData(data)}
    />
  );
}
```

--------------------------------

### Basic JSON Forms Vue Vuetify Integration

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vuetify/README.md

Integrate the JsonForms component in your Vue application, providing the data, schema, uischema, and the extended Vuetify renderers set. This example also shows how to handle form changes.

```vue
<script>
import { JsonForms } from '@jsonforms/vue';
import { extendedVuetifyRenderers } from '@jsonforms/vue-vuetify';
import { markRaw } from 'vue';

const renderers = markRaw([
  ...extendedVuetifyRenderers,
  // here you can add custom renderers
]);

export default defineComponent({
  name: 'app',
  components: {
    JsonForms,
  },
  data() {
    return {
      renderers: Object.freeze(renderers),
      data,
      schema,
      uischema,
    };
  },
  methods: {
    onChange(event) {
      this.data = event.data;
    },
  },
});
</script>

<template>
  <json-forms
    :data="data"
    :schema="schema"
    :uischema="uischema"
    :renderers="renderers"
    @change="onChange"
  />
</template>

<style>
@import '@jsonforms/vue-vuetify/lib/jsonforms-vue-vuetify.css';
</style>
```

--------------------------------

### Angular Component with JSON Forms

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/README.md

Example of an Angular component that utilizes the JSON Forms component, passing data, schema, UI schema, and the Angular Material renderers.

```typescript
import { Component } from '@angular/core';
import { angularMaterialRenderers } from '@jsonforms/angular-material';

@Component({
  selector: 'app-root',
  template: `<jsonforms
    [data]="data"
    [schema]="schema"
    [uischema]="uischema"
    [renderers]="renderers"
  ></jsonforms>`,
})
export class AppComponent {
  renderers = angularMaterialRenderers;
  uischema = {
    type: 'VerticalLayout',
    elements: [
      {
        type: 'Control',
        label: false,
        scope: '#/properties/done',
      },
      {
        type: 'Control',
        scope: '#/properties/name',
      },
      {
        type: 'HorizontalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/due_date',
          },
          {
            type: 'Control',
            scope: '#/properties/recurrence',
          },
        ],
      },
    ],
  };
  schema = {
    type: 'object',
    properties: {
      name: {
        type: 'string',
        minLength: 1,
      },
      done: {
        type: 'boolean',
      },
      due_date: {
        type: 'string',
        format: 'date',
      },
      recurrence: {
        type: 'string',
        enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
      },
    },
    required: ['name', 'due_date'],
  };
  data = {};
}
```

--------------------------------

### Test All Packages

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Runs all tests across all packages in the repository. Run from the repository root.

```bash
pnpm run test
```

--------------------------------

### Build Single Package

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Builds a specific package, preferred for iterative development. Replace `@jsonforms/core` with the desired package name.

```bash
pnpm lerna run build --scope=@jsonforms/core
```

--------------------------------

### Lint All Packages

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Lints all packages to check for code style and potential issues. Run from the repository root.

```bash
pnpm run lint
```

--------------------------------

### Test Single Package

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Tests a specific package, useful for targeted development. Replace `@jsonforms/core` with the desired package name.

```bash
pnpm lerna run test --scope=@jsonforms/core
```

--------------------------------

### Migrating Redux Initialization to Standalone React

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Shows the transition from initializing JSON Forms with Redux to using the standalone `<JsonForms />` component with direct prop passing for schema, UI schema, and data.

```typescript
const store = createStore(combineReducers({ jsonforms: jsonformsReducer() }), {
  jsonforms: {
    cells: materialCells,
    renderers: materialRenderers,
  },
});
store.dispatch(Actions.init(data, schema, uischema));
return (
  <Provider store={store}>
    <JsonFormsReduxContext>
      <JsonFormsDispatch />
    </JsonFormsReduxContext>
  </Provider>
);
```

```typescript
return (
  <JsonForms
    schema={schema}
    uischema={uischema}
    data={data}
    renderers={materialRenderers}
    cells={materialCells}
  />
);
```

--------------------------------

### Lint and Auto-fix

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Lints all packages and automatically fixes any fixable code style issues. Run from the repository root.

```bash
pnpm run lint:fix
```

--------------------------------

### Provide Custom ControlWrapper Component

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vuetify/README.md

Demonstrates how to provide a custom `ControlWrapper` component using Vue's `provide`/`inject` mechanism. This allows for custom rendering of the wrapper element around each control.

```typescript
import { provide, type DefineComponent } from 'vue';
import {
  ControlWrapperSymbol,
  type ControlWrapperProps,
} from '@jsonforms/vue-vuetify';

import ControlWrapper from './components/ControlWrapper.vue';

provide(
  ControlWrapperSymbol,
  ControlWrapper as DefineComponent<ControlWrapperProps>,
);
```

--------------------------------

### Clean Build Artifacts

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Removes all generated build artifacts from the repository. Run from the repository root.

```bash
pnpm run clean
```

--------------------------------

### Configure Vuetify with Material Design Icons

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vuetify/README.md

Configure Vuetify to use Material Design Icons (mdi) by default, including aliasing JSON Forms specific mdi icons.

```javascript
import { mdi, aliases as mdiAliases } from 'vuetify/iconsets/mdi';
import { createVuetify } from 'vuetify';

import { mdiIconAliases } from '@jsonforms/vue-vuetify';
import '@mdi/font/css/materialdesignicons.css';

createVuetify({
    icons: {
      defaultSet: 'mdi',
      sets: {
        mdi,
      },
      aliases: { ...mdiAliases, ...mdiIconAliases };,
    },
  });
```

--------------------------------

### Correct Vue Import Order for Jest/Vitest

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

Illustrates the correct import order for `vue` and `@jsonforms/vue` when testing custom renderers in a CJS-transformed environment like Jest or Vitest.

```typescript
// Correct - import vue before @jsonforms/vue
import { defineComponent } from 'vue';
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
```

--------------------------------

### Create Custom Vue Binding

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

Demonstrates how to create a custom binding by accessing the injected raw `jsonforms` object and `dispatch` method.

```typescript
import { useJsonForms, useDispatch } from '@jsonforms/vue';

const useCustomBinding = (props) => {
  const jsonforms = useJsonForms();
  const dispatch = useDispatch();

  return {
    // use props, jsonforms and dispatch to construct own binding
  };
};
```

--------------------------------

### Configure Vuetify with Font Awesome Icons

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vuetify/README.md

Configure Vuetify to use Font Awesome (fa) icons by default, including aliasing JSON Forms specific fa icons.

```javascript
import { fa, aliases as faAliases } from 'vuetify/iconsets/fa';
import { createVuetify } from 'vuetify';

import { faIconAliases } from '@jsonforms/vue-vuetify';
import '@fortawesome/fontawesome-free/css/all.css';

createVuetify({
    icons: {
      defaultSet: 'fa',
      sets: {
        fa,
      },
      aliases: { ...faAliases, ...faIconAliases };,
    },
  });
```

--------------------------------

### Basic JSON Forms React Component Usage

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/react/README.md

Demonstrates how to use the JsonForms component with schema, UI schema, data, and renderers. The component re-renders when the data changes via the onChange callback.

```typescript
import React, { useState } from 'react';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    done: {
      type: 'boolean',
    },
    due_date: {
      type: 'string',
      format: 'date',
    },
    recurrence: {
      type: 'string',
      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
    },
  },
  required: ['name', 'due_date'],
};
const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: false,
      scope: '#/properties/done',
    },
    {
      type: 'Control',
      scope: '#/properties/name',
    },
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/due_date',
        },
        {
          type: 'Control',
          scope: '#/properties/recurrence',
        },
      ],
    },
  ],
};
const initialData = {};
function App() {
  const [data, setData] = useState(initialData);
  return (
    <JsonForms
      schema={schema}
      uischema={uischema}
      data={data}
      renderers={materialRenderers}
      cells={materialCells}
      onChange={({ data, _errors }) => setData(data)}
    />
  );
}
export default App;
```

--------------------------------

### Basic JSON Forms Material UI Integration

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/README.md

Demonstrates how to use the JsonForms component with Material UI renderers and cells. Configure the schema, UI schema, and initial data to render a form.

```typescript
import React, { useState } from 'react';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    done: {
      type: 'boolean',
    },
    due_date: {
      type: 'string',
      format: 'date',
    },
    recurrence: {
      type: 'string',
      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
    },
  },
  required: ['name', 'due_date'],
};

const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: false,
      scope: '#/properties/done',
    },
    {
      type: 'Control',
      scope: '#/properties/name',
    },
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/due_date',
        },
        {
          type: 'Control',
          scope: '#/properties/recurrence',
        },
      ],
    },
  ],
};

const initialData = {};

function App() {
  const [data, setData] = useState(initialData);
  return (
    <JsonForms
      schema={schema}
      uischema={uischema}
      data={data}
      renderers={materialRenderers}
      cells={materialCells}
      onChange={({ data, _errors }) => setData(data)}
    />
  );
}

```

--------------------------------

### Extend Default Styles with JsonFormsStyleContext

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers/Styles.md

Extend the default styles by spreading the vanillaStyles and adding custom style definitions to the JsonFormsStyleContext.Provider. This allows for incremental theme customization.

```typescript
import { JsonFormsStyleContext, vanillaStyles } from '@jsonforms/vanilla-renderers';

const styleContextValue = {
  styles: [
    ...vanillaStyles,
    {
      name: 'control.input',
      classNames: ['custom-input']
    },
    {
      name: 'array.button',
      classNames: ['custom-array-button']
    }
  ]
};

<JsonFormsStyleContext.Provider value={styleContextValue}>
  <JsonForms
    data={data}
    schema={schema}
    uischema={uischema}
    ...
  />
</JsonFormsStyleContext.Provider>
```

--------------------------------

### Tester and RankedTester Interfaces (Pre-3.0)

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Shows the previous interfaces for testers before the introduction of TesterContext.

```typescript
type Tester = (uischema: UISchemaElement, schema: JsonSchema) => boolean;
type RankedTester = (uischema: UISchemaElement, schema: JsonSchema) => number;
```

--------------------------------

### Angular JsonForms Component Usage

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Demonstrates how to use the new JsonForms Component in Angular, providing data, schema, renderers, and handling data changes via databinding.

```typescript
import { Component } from '@angular/core';
import { angularMaterialRenderers } from '../../src/index';
export const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
    },
  },
  required: ['name'],
};
export const data = { name: 'Send email to Adrian' };

@Component({
  selector: 'app-root',
  template: `
    <div>Data: {{ data | json }}</div>
    <jsonforms
      [data]="data"
      [schema]="schema"
      [renderers]="renderers"
      (dataChange)="onDataChange($event)"
    ></jsonforms>
  `,
})
export class AppComponent {
  readonly renderers = angularMaterialRenderers;
  data: any;
  onDataChange(data: any) {
    this.data = data;
  }
}
```

--------------------------------

### Listening to Data and Errors in Standalone React

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Demonstrates how to use the `onChange` prop of the `<JsonForms />` component in React to listen for changes in data and errors, updating the component's state accordingly.

```typescript
const MyApp = () => {
  const [data, setData] = useState();
  return (
    <JsonForms
      data={data}
      // other necessary declarations go here...
      onChange={({ data, errors }) => setData(data)}
    />
  );
};
```

--------------------------------

### Clean Repository

Source: https://github.com/eclipsesource/jsonforms/blob/master/README.md

Clean the repository by removing all untracked files. Use with caution as it deletes uncommitted changes.

```bash
git clean -dfx
```

--------------------------------

### Inline Styling via UI Schema Options

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vanilla/README.md

Specify custom CSS classes for individual form elements directly within the UI schema using the `options.styles` property. These classes override any globally provided styles or default styles.

```json
{
  "type": "Control",
  "scope": "#/properties/name",
  "options": {
    "styles": {
      "control": {
        "root": "my-control-root"
      }
    }
  }
}
```

--------------------------------

### Custom Styling with mergeStyles and provide

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vanilla/README.md

Customize form element styles by merging default styles with your own using `mergeStyles`. Provide the merged styles to the `JsonForms` component via the `styles` injection. This allows for easy integration with any CSS framework.

```vue
<script>
import { JsonForms } from '@jsonforms/vue';
import {
  defaultStyles,
  mergeStyles,
  vanillaRenderers,
} from '@jsonforms/vue-vanilla';
import { defineComponent } from 'vue';

// mergeStyles combines all classes from both styles definitions
const myStyles = mergeStyles(defaultStyles, {
  control: { root: 'my-control' },
});

export default defineComponent({
  name: 'app',
  components: {
    JsonForms,
  },
  data() {
    return {
      renderers: Object.freeze(vanillaRenderers),
      data: {
        number: 5,
      },
      schema: {
        properties: {
          number: {
            type: 'number',
          },
        },
      },
      uischema: {
        type: 'VerticalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/number',
          },
        ],
      },
    };
  },
  methods: {
    onChange(event) {
      this.data = event.data;
    },
  },
  provide() {
    return {
      styles: myStyles,
    };
  },
});
</script>
<template>
  <json-forms
    :data="data"
    :schema="schema"
    :uischema="uischema"
    :renderers="renderers"
    @change="onChange"
  />
</template>
```

--------------------------------

### Importing Redux Fallback Components in React

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Shows the updated import paths for using the Redux fallback variant of JSON Forms in React applications, specifically for `jsonformsReducer` and `JsonFormsReduxProvider`.

```typescript
import {
  jsonformsReducer,
  JsonFormsReduxProvider,
} from '@jsonforms/react/lib/redux';
```

--------------------------------

### Vue Layout Renderer Template

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

An HTML template for the layout renderer, iterating over UI schema elements and rendering them using `DispatchRenderer`.

```html
<div>
  <div
    v-for="(element, index) in layout.uischema.elements"
    v-bind:key="`${layout.path}-${index}`"
  >
    <dispatch-renderer
      v-bind:schema="layout.schema"
      v-bind:uischema="element"
      v-bind:path="layout.path"
      v-bind:enabled="layout.enabled"
      v-bind:renderers="layout.renderers"
      v-bind:cells="layout.cells"
    />
  </div>
</div>
```

--------------------------------

### Registering a Custom Renderer in Standalone React

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Illustrates how to register a custom renderer in the standalone JSON Forms React variant by providing an array of renderers, including the custom one, to the `<JsonForms />` component.

```typescript
store.dispatch(Actions.registerRenderer(customControlTester, CustomControl));
```

```typescript
const renderers = [
  ...materialRenderers,
  // register custom renderer
  { tester: customControlTester, renderer: CustomControl },
];

const MyApp = () => (
  <JsonForms
    // other necessary declarations go here...
    renderers={renderers}
  />
);
```

--------------------------------

### Configure Transpile Dependencies in vue.config.js

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vanilla/README.md

Add the JSON Forms packages to the `transpileDependencies` array in your `vue.config.js` file to ensure they are correctly processed.

```javascript
module.exports = {
  transpileDependencies: [
    '@jsonforms/core',
    '@jsonforms/vue',
    '@jsonforms/vue-vanilla',
  ],
};
```

--------------------------------

### Lint Single Package

Source: https://github.com/eclipsesource/jsonforms/blob/master/CLAUDE.md

Lints a specific package, useful for targeted development. Replace `@jsonforms/core` with the desired package name.

```bash
pnpm lerna run lint --scope=@jsonforms/core
```

--------------------------------

### Vue Control Renderer Registry Entry

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

Creates a registry entry for the control renderer, specifying its component and a tester function to determine when it should be used.

```typescript
import {
  isControl,
  JsonFormsRendererRegistryEntry,
  rankWith,
} from '@jsonforms/core';
export const entry: JsonFormsRendererRegistryEntry = {
  renderer: controlRenderer,
  tester: rankWith(1, isControl),
};
```

--------------------------------

### Replace Default Styles with JsonFormsStyleContext

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers/Styles.md

Completely replace default styles by providing a new styles array to the JsonFormsStyleContext.Provider. This is useful for a full theme override.

```typescript
import { JsonFormsStyleContext } from '@jsonforms/vanilla-renderers';

const styleContextValue = {
  styles: [
    {
      name: 'control.input',
      classNames: ['custom-input']
    },
    {
      name: 'array.button',
      classNames: ['custom-array-button']
    }
  ]
};

<JsonFormsStyleContext.Provider value={styleContextValue}>
  <JsonForms
    data={data}
    schema={schema}
    uischema={uischema}
    ...
  />
</JsonFormsStyleContext.Provider>
```

--------------------------------

### Incorrect Vue Import Order for Jest/Vitest

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

Highlights the incorrect import order that may lead to errors when testing custom renderers in a CJS-transformed environment.

```typescript
// May produce errors such as:
//   "Property '<name>' was accessed during render but is not defined on instance"
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
import { defineComponent } from 'vue';
```

--------------------------------

### Configure Vite for Vuetify

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vuetify/README.md

Add the JSON Forms Vue Vuetify packages to the transpile dependencies in your vite.config.js file to avoid issues with Vite's development server.

```javascript
import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    // Exclude vuetify since it has an issue with vite dev - TypeError: makeVExpansionPanelTextProps is not a function - the makeVExpansionPanelTextProps is used before it is defined
    exclude: ['vuetify'],
  },

  // more config....
});
```

--------------------------------

### Injecting jsonforms and dispatch in Vue Component

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

Shows how to directly inject `jsonforms` and `dispatch` into Vue components for custom binding development.

```typescript
const myComponent = defineComponent({
  inject: ['jsonforms', 'dispatch'],
});
```

--------------------------------

### Tester and RankedTester Interfaces (3.0+)

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Defines the new TesterContext parameter for testers, allowing access to the root schema and configuration.

```typescript
interface TesterContext {
  rootSchema: JsonSchema;
  config: any;
}

type Tester = (
  uischema: UISchemaElement,
  schema: JsonSchema,
  context: TesterContext
) => boolean;
type RankedTester = (
  uischema: UISchemaElement,
  schema: JsonSchema,
  context: TesterContext
) => number;
```

--------------------------------

### Vue Control Renderer Template

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

A simple HTML template for the control renderer, binding input value to control data and displaying errors.

```html
<div>
  <input v-bind:value="control.data" @change="onChange" />
  <div class="error" v-if="control.errors">{{ control.errors }}</div>
</div>
```

--------------------------------

### Update UI Schema Control Scope

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

The 'scope' object within a UI schema Control has been simplified. Use a direct string reference instead of a nested '$ref' object.

```typescript
const uischema = {
  type: 'Control',
  scope: {
    $ref: '#/properties/name',
  },
};
```

```typescript
const uischema = {
  type: 'Control',
  scope: '#/properties/name',
};
```

--------------------------------

### Resolving External JSON Schema References in React

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Demonstrates how to manually resolve external JSON Schema references using $RefParser or JsonRefs before passing the schema to JsonForms.

```typescript
import React, { useState } from 'react';
import { JsonForms } from '@jsonforms/react';
import {
  materialCells,
  materialRenderers,
} from '@jsonforms/material-renderers';
import $RefParser from '@apidevtools/json-schema-ref-parser';
import JsonRefs from 'json-refs';

import mySchemaWithReferences from 'myschema.json';

const refParserOptions = {
  dereference: {
    circular: false,
  },
};

function App() {
  const [data, setData] = useState(initialData);
  const [resolvedSchema, setSchema] = useState();

  useEffect(() => {
    $RefParser
      .dereference(mySchemaWithReferences)
      .then((res) => setSchema(res.$schema));
    // or
    JsonRefs.resolveRefs(mySchemaWithReferences).then((res) =>
      setSchema(res.resolved)
    );
  }, []);

  if (resolvedSchema === undefined) {
    return <div> Loading... </div>;
  }

  return (
    <JsonForms
      schema={resolvedSchema}
      uischema={uischema}
      data={data}
      renderers={materialRenderers}
      cells={materialCells}
      onChange={({ data, _errors }) => setData(data)}
    />
  );
}
```

--------------------------------

### Angular Renderer Constructor Injection Change

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Custom Angular renderers should now use `inject()` for dependencies like `MyService` and rely on base classes for `JsonFormsAngularService` and `ChangeDetectorRef`.

```typescript
// Before:
@Component({ ... })
export class MyCustomRenderer extends JsonFormsControl {
  constructor(
    private myService: MyService,
    jsonFormsService: JsonFormsAngularService
  ) {
    super(jsonFormsService);
  }
}

// After:
@Component({ ... })
export class MyCustomRenderer extends JsonFormsControl {
  private myService = inject(MyService);
}
```

--------------------------------

### Render a JSON Form in Vue

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

Use the `json-forms` component to render forms. Pass your data, schema, UI schema, and renderers. The `@change` event emits data and errors.

```html
<json-forms
  :data="data"
  :renderers="renderers"
  :schema="schema"
  :uischema="uischema"
  @change="onChange"
/>
```

```typescript
export default defineComponent({
  components: {
    JsonForms,
  },
  data() {
    return {
      // freeze renderers for performance gains
      renderers: Object.freeze(renderers),
      data: {
        number: 5,
      },
      schema: {
        properties: {
          number: {
            type: 'number',
          },
        },
      },
      uischema: {
        type: 'VerticalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/number',
          },
        ],
      },
    };
  },
  methods: {
    onChange(event: JsonFormsChangeEvent) {
      this.data = event.data;
    },
  },
});
```

--------------------------------

### Vue Layout Renderer Component

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

Defines a basic Vue component for a layout renderer. It utilizes the `DispatchRenderer` to render child elements based on the UI schema.

```typescript
import {
  isLayout,
  JsonFormsRendererRegistryEntry,
  Layout,
  rankWith,
} from '@jsonforms/core';
import { defineComponent } from 'vue';
import {
  DispatchRenderer,
  rendererProps,
  useJsonFormsLayout,
} from '@jsonforms/vue';

const layoutRenderer = defineComponent({
  name: 'layout-renderer',
  components: {
    DispatchRenderer,
  },
  props: {
    ...rendererProps<Layout>(),
  },
  setup(props) {
    return useJsonFormsLayout(props);
  },
});

export default layoutRenderer;

export const entry: JsonFormsRendererRegistryEntry = {
  renderer: layoutRenderer,
  tester: rankWith(1, isLayout),
};
```

--------------------------------

### Set Material UI Input Variant to Standard in React

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Use Material UI's ThemeProvider to set the default input variant to 'standard' for components like FormControl, TextField, and Select when using JSON Forms with React.

```typescript
import { JsonForms } from '@jsonforms/react';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiFormControl: {
      defaultProps: {
        variant: 'standard',
      },
    },
    MuiTextField: {
      defaultProps: {
        variant: 'standard',
      },
    },
    MuiSelect: {
      defaultProps: {
        variant: 'standard',
      },
    },
  },
});

...

<ThemeProvider theme={theme}>
  <JsonForms {...props} />
</ThemeProvider>;
```

--------------------------------

### Basic JSON Forms Vue Component Usage

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vanilla/README.md

Integrate the `json-forms` component into your Vue application. Provide the `data`, `schema`, `uischema`, and `renderers` props to render a form dynamically. The `@change` event handler updates the component's data.

```vue
<script>
import { JsonForms } from '@jsonforms/vue';
import { vanillaRenderers } from '@jsonforms/vue-vanilla';
import { defineComponent } from 'vue';

const renderers = [
  ...vanillaRenderers,
  // here you can add custom renderers
];

export default defineComponent({
  components: {
    JsonForms,
  },
  data() {
    return {
      renderers: Object.freeze(renderers),

      data: {
        number: 5,
      },
      schema: {
        properties: {
          number: {
            type: 'number',
          },
        },
      },
      uischema: {
        type: 'VerticalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/number',
          },
        ],
      },
    };
  },
  methods: {
    onChange(event) {
      this.data = event.data;
    },
  },
});
</script>
<template>
  <json-forms
    :data="data"
    :schema="schema"
    :uischema="uischema"
    :renderers="renderers"
    @change="onChange"
  />
</template>
```

--------------------------------

### Migrating Translator Type in TypeScript

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

Use the `createTranslator` helper for assigning functions to the `Translator` type, especially when TypeScript's strict compiler options are enabled.

```typescript
// No longer compiles
const t: Translator = (id, defaultMessage) => defaultMessage ?? id;
```

```typescript
import { createTranslator } from '@jsonforms/core';

const t = createTranslator((id, defaultMessage) => defaultMessage ?? id);
```

--------------------------------

### Vue Control Renderer Component

Source: https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md

Defines a basic Vue component for a control renderer. It uses `useJsonFormsControl` hook to manage control-specific logic and provides an `onChange` method for data updates.

```typescript
import { ControlElement } from '@jsonforms/core';
import { defineComponent } from 'vue';
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';

const controlRenderer = defineComponent({
  name: 'control-renderer',
  props: {
    ...rendererProps<ControlElement>(),
  },
  setup(props) {
    return useJsonFormsControl(props);
  },
  methods: {
    onChange(event: Event) {
      this.handleChange(
        this.control.path,
        (event.target as HTMLInputElement).value
      );
    },
  },
});
export default controlRenderer;
```

--------------------------------

### Ensuring String Return Type for Translator in Vue Options API

Source: https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md

When using the Translator in Vue's Options API, explicitly cast the return type to `string` if a default message is always provided to ensure type narrowing.

```typescript
// Before (may now return string | undefined)
return this.t(label, label);

// After
return this.t(label, label) as string;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.