# Skipping ui-schema for Custom Renderers in JSON Forms

**URL:** <https://jsonforms.discourse.group/t/skipping-ui-schema-for-custom-renderers-in-json-forms/2282>\
**Category:** General\
**Created:** [August 14, 2024, 9:32am UTC](https://jsonforms.discourse.group/t/skipping-ui-schema-for-custom-renderers-in-json-forms/2282 "2024-08-14T09:32:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![niloy06](https://avatars.discourse-cdn.com/v4/letter/n/f0a364/32.png) [@niloy06](https://jsonforms.discourse.group/u/niloy06)\
**Post date:** [August 14, 2024, 9:32am UTC](https://jsonforms.discourse.group/t/skipping-ui-schema-for-custom-renderers-in-json-forms/2282/1 "2024-08-14T09:32:47Z")

</div>

Hi everyone,

I’m looking to skip using the `ui-schema` and instead handle UI rendering directly through custom renderers. My goal is to have the form fields adjust dynamically based on the screen size, such as displaying them in 2, 3, or 4 columns depending on the available screen width.

For example, I have a schema with 7 fields, including input fields, dropdowns, and checkboxes. I want these fields to be displayed in a column layout that adapts to the screen size, providing an optimized view for various devices.

Is there any React package that supports such dynamic layouts? Additionally, any suggestions on the best way to implement this would be greatly appreciated!

Thanks in advance!

---

<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:** [August 16, 2024, 10:05am UTC](https://jsonforms.discourse.group/t/skipping-ui-schema-for-custom-renderers-in-json-forms/2282/2 "2024-08-16T10:05:21Z")

</div>

Hi @niloy06,

In case you are using Material UI, then this should be rather straightforward. You can implement a custom layout renderer. That one then arranges the grid for the dispatched to children based on the screen size. See [here for the docs](https://mui.com/material-ui/react-grid/).