Building out forms ranks as one of the highest priorities in web development. It facilitates user interaction for the broader application. It is your gateway to providing the rest of your application clean data.
It can also be very tedious.
Over the weekend, I began playing with the idea about how I could build forms without needing to write any JSX. I wanted to take a format (like JSON) that could be produced by anyone and use that to generate out the form with validation.
What are the benefits of doing this?
- Re-useability: The ability to take from one project to another and reproduce the form output.
- Compose-ability: It enables configurations to be combined with ease ie multiple config files being merged for more complex forms.
- Upgradeability: It centralizes the point where I can make adjustments in the future.
- Flexibility: It is easy to provide JSON format. The endgame is to be very meta and build a form that itself builds forms.
As a fair warning, this project uses my personal (but currently private) design system to create the files.
While the output itself will be custom components, the approach to doing so is translatable to anything thing you want. This includes using the general HTML tags of form, input, etc.
This tutorial is a lot more rough-around-the-edges and scrappy than my others. There is much I could do to clean this up, but I hope that this will show you how I begin projects by being scrappy and validating my goals. I have made adjustments to the code since.
#deno #react #json #javascript #developer