Skip to main content
The Vanilla renderer set provides a lightweight, framework-agnostic set of renderers for React applications. These renderers use plain HTML elements and can be styled with CSS, making them ideal for custom designs or lightweight applications.

​
Installation

npm install @jsonforms/vanilla-renderers

​
Peer Dependencies

The Vanilla renderer set requires the following peer dependencies: 
npm install @jsonforms/core @jsonforms/react react

​
Usage

Import and register the Vanilla renderers and cells with JSON Forms: 
import { JsonForms } from '@jsonforms/react';
import { vanillaRenderers, vanillaCells } from '@jsonforms/vanilla-renderers';

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

​
Available Renderers

​
Control Renderers

Control renderers handle individual form inputs:
  • InputControl - General input control for text, numbers, dates, etc.
  • RadioGroupControl - Radio button group for enum values
  • OneOfRadioGroupControl - Radio group for oneOf schemas

​
Layout Renderers

Layout renderers organize form structure:
  • VerticalLayout - Arranges elements vertically (default)
  • HorizontalLayout - Arranges elements horizontally
  • GroupLayout - Groups elements with optional label

​
Complex Renderers

Complex renderers handle advanced features:
  • ArrayControl - Array input with add/remove functionality
  • TableArrayControl - Array displayed as a table
  • Categorization - Tab-based or accordion categorization
  • LabelRenderer - Displays label elements

​
Available Cells

Cells are used within table or array layouts:
  • BooleanCell - Checkbox for boolean values
  • DateCell - Date input cell
  • DateTimeCell - Date and time input cell
  • EnumCell - Select dropdown cell for enum values
  • IntegerCell - Integer number input cell
  • NumberCell - Decimal number input cell
  • OneOfEnumCell - Select cell for oneOf with enum
  • SliderCell - Slider input cell
  • TextAreaCell - Multi-line text input cell
  • TextCell - Single-line text input cell
  • TimeCell - Time input cell

​
Styling

The Vanilla renderers use CSS classes that you can style according to your needs. Each renderer applies semantic class names:

​
Example CSS Classes

/* Control styling */
.control {
  margin-bottom: 1rem;
}

.control-label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Layout styling */
.vertical-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.horizontal-layout {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.group {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 4px;
}

/* Validation styling */
.validation-error {
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

​
Custom Styling with CSS Frameworks

The Vanilla renderers work well with CSS frameworks like Tailwind CSS, Bootstrap, or custom CSS:

​
Example with Tailwind CSS

import { JsonForms } from '@jsonforms/react';
import { vanillaRenderers, vanillaCells } from '@jsonforms/vanilla-renderers';
import './tailwind-overrides.css';

function App() {
  return (
    <div className="max-w-2xl mx-auto p-4">
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={data}
        renderers={vanillaRenderers}
        cells={vanillaCells}
      />
    </div>
  );
}

​
Advantages

The Vanilla renderer set offers several advantages:
  • Lightweight - Minimal dependencies, smaller bundle size
  • Flexible Styling - Complete control over appearance with CSS
  • Framework Agnostic - Works with any CSS framework or custom styles
  • Simple - Straightforward HTML structure, easy to understand and debug
  • Accessible - Uses semantic HTML elements

​
Customization

You can customize Vanilla renderers by:
  1. CSS Styling - Apply custom CSS to override default styles
  2. Custom Renderers - Create custom renderers that extend the Vanilla renderers
  3. Custom Testers - Override default testers to change when renderers are applied

​
Example: Custom Renderer

import { rankWith, isStringControl } from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';

const MyCustomTextControl = (props) => {
  return (
    <div className="custom-text-control">
      <label>{props.label}</label>
      <input
        type="text"
        value={props.data || ''}
        onChange={(e) => props.handleChange(props.path, e.target.value)}
        className="custom-input"
      />
    </div>
  );
};

export default withJsonFormsControlProps(MyCustomTextControl);

const myCustomTextControlTester = rankWith(
  5, // higher rank than default
  isStringControl
);

// Register with JSON Forms
const renderers = [
  ...vanillaRenderers,
  { tester: myCustomTextControlTester, renderer: MyCustomTextControl }
];

​
TypeScript Support

The Vanilla renderer set is written in TypeScript and includes full type definitions.

​
Learn More

Build docs developers (and LLMs) love

Get started for freeTalk to us