Hi guys, I’ve been working on my own visual form builder for React.
It’s an early alpha and at the moment it’s quite basic, yet good enough to draw forms and generate JSON and UI schema.
The overall idea is to be able to visually scaffold a customizable JSX which automates the complexity of form state management, dialogs and nested forms in those dialogs. It also generates JSON schema which can be tweaked and served from backend with the “default” properties to specify the initial data.
Were you are aware of our own form builder efforts, the JSON Forms editor? It can be found in a deployed version here, source code is here. However the JSON Forms editor, as it is deployed, focuses on generating the UI Schema. There is an exploration to also edit the JSON Schema, see here.
Is your form builder also open source? Did you build it for some specific use case? What are your long term plans for it?
Yes, I saw your editor and I find it useful for generating schemas. It’s sort of lower level tool. I even think there are few areas I could contribute.
I started developing mine once at my last contract I’ve noticed that even though with JSON Forms it’s like building from blocks, developers were still finding difficult to manage the form state. It was the case in more complex forms where you have a main form that opens some dialogs which then include nested forms. So, I’ve abstracted out the state management as a React context and then started building Formis around it. I wanted it to be a free tool that helps non-devs designing form flows (like business analysts), then hand it over to developers. Basically I want to simplify building form-based apps so dev teams (no matter what size) can focus on higher level problems like delivering better UX. I’m going to open the repo once I finish off readme. TBH I don’t have any specific long-term plans about the project. First of all, other developers needs to find it useful, and then there might be some who may even want help shaping it.
we want to have a specific list of predefined components in our builder : ex: firstName, lastName, Address, and hide others, but it looks like the schema in this editor builder is tide coupled to jsonform.
P.S. Here’s the more detailed description of the issue what we have
The form builder I’ve been developing isn’t based on the JSON Forms Editor so probably I’m not the best person to help. Anyway, I think I get what you’re trying to achieve. It’s like reversing the behaviour so modifying controls generates schema.
Hi, I’m also building something similar and would be interested in seeing your code. The official jsonforms builder is a bit too restrictive for what we’re doing at my company (no ability to add/edit/delete data schema elements - I’m currently working on adding that functionality to our internal fork of the official editor), but your demo looks even nicer. If you could post a link to your code when you open source it, I think it would be useful to many people.
Hey Boris, my plan is to open the source but once I convert it to Typescript. TBH I was putting it together in rush, hence plain JS which doesn’t really meet the modern open source project standards (at least in my view). Given how I managed state with context, It’s quite a challenge. Also, I’ve came to the realisation that using jsonforms, I’m quite restricted as the generated code isn’t really composable, it’s just one “black box” component. There are ways to extend custom controls but I’d rather generate code which includes MUI controls (or other UI libs) as these already provide nice DSL instead of UI schema. So, ultimately I might shift away from jsonforms. Just join my discord channel and I’m open to discuss and help. I don’t mind sharing this code but without me giving you context, it wouldn’t be very beneficial.
I see - it sounds like your code isn’t easily extendable either.
My code is in Typescript, but there will be a significant amount of changes made - if I’m able to, I’d like to open source some of that as well, since it doesn’t look like jsonforms-editor is actively maintained or a priority at the moment.
I plan to decouple a lot of the UI components to make it easier to mix and match them (I needed to move some panes around and the tight coupling between different components was extremely restrictive). Later I’ll be adding functionality to add/edit/delete controls and update the data schema.
I’ve already removed the monorepo setup (Lerna, CRA, rescripts, webpack, etc) since it was unnecessarily complicated and blocking me from integrating the code into a single-spa microfrontend architecture. CRA is also not a best practice anymore - it’s basically in maintenance mode at this point. I’ve upgraded to jsonforms-v3.0.0-alpha.2, React 17, etc.
I plan to continue working on this and maybe submit a PR with my contributions.
