# JSON Forms as a standalone component with Vanilla renderers

**URL:** <https://jsonforms.discourse.group/t/json-forms-as-a-standalone-component-with-vanilla-renderers/214>\
**Category:** General\
**Created:** [November 11, 2019, 12:02pm UTC](https://jsonforms.discourse.group/t/json-forms-as-a-standalone-component-with-vanilla-renderers/214 "2019-11-11T12:02:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [November 11, 2019, 12:02pm UTC](https://jsonforms.discourse.group/t/json-forms-as-a-standalone-component-with-vanilla-renderers/214/1 "2019-11-11T12:02:08Z")

</div>

Hi guys!

I’m trying to use JSON Forms as a standalone component but with Vanilla renderers instead of Material.  
I used this page as a basis: `Create a JSON Forms App - JSON Forms`.  
I replaced `import { materialRenderers } from ‘@jsonforms/material-renderers’;` with `import { vanillaRenderers, vanillaCells} from ‘@jsonforms/vanilla-renderers’;` and used it in the template.  
The problem is that i get some warnings `No applicable cell found.` and nothing renders.  
Are the vanilla rendered usable only with Redux or am i doing something wrong?

_[[original thread](https://spectrum.chat/jsonforms/general/json-forms-as-a-standalone-component-with-vanilla-renderers~ae47cdd3-bbcc-466f-83c4-627df264d905) by urucualex]_

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 11, 2019, 3:39pm UTC](https://jsonforms.discourse.group/t/json-forms-as-a-standalone-component-with-vanilla-renderers/214/2 "2019-11-11T15:39:57Z")

</div>

Thanks for your interest in JSON Forms. We did not yet release the support for setting cell renderers via the standalone component, however it’s already part of the next stream. So you should be able to set and use the vanilla renderers (including cells) by installing the `@next` version of the packages, e.g. `@jsonforms/core@next` or `@jsonforms/core@2.3.2-alpha.0` and configuring the cells via

```auto
<JsonForms
  schema=... // uischema, data, renderers
  cells={vanillaCells}/>

```

Please let me know if that solved your problem 😉

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [November 12, 2019, 12:56pm UTC](https://jsonforms.discourse.group/t/json-forms-as-a-standalone-component-with-vanilla-renderers/214/3 "2019-11-12T12:56:48Z")

</div>

_[Ivan Saveliev]_

I’m a bit confused. I have the same warnings ‘No applicable cell found’ and form doesn’t render. However I didn’t not provide cells via props in both cases for material renderers and for vanilla ones. I’m using the **person** schema from **examples**.

All warnings are coming from `InputControl` renderer from Vanilla. To be more specific this piece of code: [jsonforms/InputControl.tsx at master · eclipsesource/jsonforms · GitHub](https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla/src/controls/InputControl.tsx#L85)

And this is source of my confusion. Because `cells` doesn’t seem to be a required as per interface for Controls, but it deliberately checks if there are none to return - `null`. Also I do not see such cell checks in MaterialInputControl - [jsonforms/MaterialInputControl.tsx at master · eclipsesource/jsonforms · GitHub](https://github.com/eclipsesource/jsonforms/blob/master/packages/material/src/controls/MaterialInputControl.tsx)

```auto
export interface StatePropsOfControl extends StatePropsOfScopedRenderer {
  cells?: { tester: RankedTester; cell: any }[];

  /**
   * The label for the rendered element.
   */
  label: string | Labels;

  /**
   * Description of input cell
   */
  description?: string;

  /**
   * Whether the rendered data is required.
   */
  required?: boolean;

  // TODO: renderers?
}

```

Or I have a wrong perception of how this works?

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [November 12, 2019, 5:58pm UTC](https://jsonforms.discourse.group/t/json-forms-as-a-standalone-component-with-vanilla-renderers/214/4 "2019-11-12T17:58:51Z")

</div>

_[urucualex]_

@sdirix Thank you! Your solution solved my problem.

@ivansvlv  
In the current released version of JSONForms (2.3.1) you can use the Vanilla renderers only with the Redux Integration ([https://jsonforms.io/docs/react](https://jsonforms.io/docs/react)). You need to install version 2.3.2-alpha.0 (or @next, ex `npm i @jsonforms/core@next --save`) to use them in the “standalone component”.

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [November 12, 2019, 6:17pm UTC](https://jsonforms.discourse.group/t/json-forms-as-a-standalone-component-with-vanilla-renderers/214/5 "2019-11-12T18:17:22Z")

</div>

_[Ivan Saveliev]_

@urucualex Ooh, got it. Thanks 👍

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 12, 2019, 7:14pm UTC](https://jsonforms.discourse.group/t/json-forms-as-a-standalone-component-with-vanilla-renderers/214/6 "2019-11-12T19:14:27Z")

</div>

@urucualex Thanks for answering!