# How to I render custom components with JSON Forms?

**URL:** <https://jsonforms.discourse.group/t/how-to-i-render-custom-components-with-json-forms/53>\
**Category:** General\
**Created:** [October 9, 2019, 2:26pm UTC](https://jsonforms.discourse.group/t/how-to-i-render-custom-components-with-json-forms/53 "2019-10-09T14:26:27Z")\
**Posts on this page:** 4\
**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:** [October 9, 2019, 2:26pm UTC](https://jsonforms.discourse.group/t/how-to-i-render-custom-components-with-json-forms/53/1 "2019-10-09T14:26:27Z")

</div>

I have my own custom HTML Components (Textbox, Dropdown, Checkbox etc.) with styling and I want to reuse them. Is there a way to do that with JSON Forms? Also, the rating eg in the docs is tied with rating property is there a way with JSON Forms where I mention the type of control to be rendered and my custom component is rendered

_[[original thread](https://spectrum.chat/jsonforms/general/how-to-i-render-custom-components-with-json-forms~cd2a86b8-6dd6-422f-90c6-a5564f4bd668) by abhikapuria]_

---

<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:** [October 9, 2019, 2:57pm UTC](https://jsonforms.discourse.group/t/how-to-i-render-custom-components-with-json-forms/53/2 "2019-10-09T14:57:48Z")

</div>

Hi @abhikapuria, thanks for your interest in JSON Forms. The rating control is an example for overwriting the default integer control with a more specialized one. In the same way you can overwrite the default boolean control with your checkbox, the default text with your textbox and the default enum with your dropdown. I would like to suggest to start with the [react-seed](https://github.com/eclipsesource/jsonforms-react-seed), copy the `RatingControl` and adapt it to overwrite something different, for example the default boolean control with your own checkbox. You will then need to register your new renderer in the `index.tsx`, similar to the `RatingControl`.

---

<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:** [October 9, 2019, 3:00pm UTC](https://jsonforms.discourse.group/t/how-to-i-render-custom-components-with-json-forms/53/3 "2019-10-09T15:00:14Z")

</div>

Note that if you only want to change the look of the generated material inputs you can use the [material ui theme support](https://material-ui.com/customization/theming/).

---

<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:** [October 24, 2019, 1:17pm UTC](https://jsonforms.discourse.group/t/how-to-i-render-custom-components-with-json-forms/53/4 "2019-10-24T13:17:38Z")

</div>

_[abhikapuria]_

Thanks for the response will try with the input you provided.