Searching for visual builder

[zboldyga]

This is not an issue.

I am working with an enterprise team that wants to create a visual form builder that will save a JSON template into the format that you use in react-jsonschema-form. This will allow their non-technical clients to create their own forms and customize the enterprise product to meet their needs.

What I'm describing is along the same lines of the Kinto formbuilder project (https://github.com/Kinto/formbuilder), in the sense that they are able to visually drag, drop, and edit fields. That project looks like it's not currently maintained, and it isn't high-enough quality to meet our needs. I also see other projects on the web, like the Alpaca form builder, but it doesn't seem to output your same json format.

I'm wondering if you know of any other visual builders that work specifically with your jsonschema format?

If not, we will undertake the development of a visual builder. In that case, would Mozilla have an interest in joining us and/or maintaining that project? We have a team of 3 that would be working on the project part-time, with the aim of having it production ready within the next 2-3 months.

[n1k0]

I'm wondering if you know of any other visual builders that work specifically with your jsonschema format?

I didn't search but maybe others have suggestions.

would Mozilla have an interest in joining us and/or maintaining that project?

As we don't have a use case for it, we're gonna focus our efforts elsewhere.

[glasserc]

I should also add to what @n1k0 wrote that we aren't really speaking for Mozilla as a whole, just our little team. The use case of a drag-and-drop form builder doesn't really fit what we're working on these days. Good luck!

[zboldyga]

Gotcha - that's exactly the feedback I was looking for, thanks for chiming in.

We are going to go ahead and build this separate tool, but it looks like we're going to aim for the same JSON format you're using for convenience. I'll point you guys to our project when we have a production-ready version, in case others want to use it.

[obaid]

@zboldyga is that tool available anywhere? We are looking for something similar for our internal tool and it will help us if we don’t ha e reinvent the wheel

[zboldyga]

@obaid We ended up focusing on some more basic features our app needed, and that ate up most of the budget. We published a couple of extension projects that were mostly the work of my colleague @mavarazy:

https://github.com/RxNT/react-jsonschema-form-conditionals https://github.com/RxNT/react-jsonschema-form-extras

Once we started adding these extra features, building a visual form builder became much more expensive, and we likely would have had to train users on how to do the things they wanted to do in the tool, which may have defeated the purpose of building the tool. It may be that your use case is a lot simpler than ours (our users were building medical patient encounter forms), but if you're trying to do anything complicated I wouldn't recommend going this route unless you have a lot of time & money :D We found it more practical to have developers build lots of schema templates...

[tosaravanan]

Is any available for drag and drop visual form builder

[knilink]

Just in case anyone is interested. I'm currently working on a visual formbuilder. Repo, Demo It's still under construction.

[sc-starman]

@knilink You're Awesome, That exactly What I wanted... Please keep it up.

[mnlbox]

@knilink It's awesome man. Please keep it up and merge this as a core feature to this repo too.

[MedinaGitHub]

Hi there !

what is the best proyect for have a visual create form?

Thanks !

[epicfaace]

@knilink the form builder you made is pretty cool! I think that such a form builder could be a really valuable addition to the community -- making it easy to build forms is where a declarative form library such as rjsf really shines.

Are you still maintaining it / willing to help merge this as a repo that is part of rjsf-team?

If we do decide to make this a generic library (with a form builder component that others can import), some issues that we might want to address:

• Ability to switch themes, now that rjsf supports different themes
• How much customization of the form builder itself could we allow users to make? The more customization available, the more useful it will be for users -- could we allow users to specify JSON Schema(s) / uiSchemas to modify the form builder itself? Or maybe it would be enough to allow users to override default templates for things such as the navbar etc. and then provide their own callbacks for when a form is opened, saved, etc.

[MedinaGitHub]

this proyect is a good reference https://redgeoff.github.io/mson-react/

[rrjanbiah]

this proyect is a good reference https://redgeoff.github.io/mson-react/form-builder

FWIW, if anyone visits above link directly, it will leads to 404. In that case visit https://redgeoff.github.io/mson-react/ first and then above link will work.

[knilink]

Hi @epicfaace, I'm still maintaining it but unfortunately I'm refactoring it and moving away from rjsf because its flexibility doesn't satisfy my need, although it has been improved a lot since the beginning. Also refactoring rjsf doesn't seem to be a good idea considering its complexity and the large number of user base. That's the reason I created the gravel-form project. So that form builder solution is going be archived latter, but feel free to fork it.

Regarding the duplication of code that you mentioned in another issue, I just took a look at the latest rjsf code and it LGTM. I think rjsf is doing well separating the logic. So probably the duplication you mentioned was the "adapter" logic between rjsf api and ui library api, which I think is unavoidable.

Good work 👍 . rjsf do improved a lot.

[airtonix]

@obaid We ended up focusing on some more basic features our app needed, and that ate up most of the budget. We published a couple of extension projects that were mostly the work of my colleague @mavarazy:

https://github.com/RxNT/react-jsonschema-form-conditionals https://github.com/RxNT/react-jsonschema-form-extras

Once we started adding these extra features, building a visual form builder became much more expensive, and we likely would have had to train users on how to do the things they wanted to do in the tool, which may have defeated the purpose of building the tool. It may be that your use case is a lot simpler than ours (our users were building medical patient encounter forms), but if you're trying to do anything complicated I wouldn't recommend going this route unless you have a lot of time & money :D We found it more practical to have developers build lots of schema templates...

I had the same experience.

Worked for an educational company that wanted their clients to be able to create any kind of course admission form :

• needed to allow the user to create rules that affect the validation behaviour of other fields
• required lots of custom form field types (google maps address field that switched to manual input, a course dependency resolution field that let the user explore a DAG of all known courses, etc... it was massively complex)
• needed to be printable (we ended up running a headless chrome api to render the form as a pdf)
• we required lots of other predicates.
• needed to support the concept of pages
• need to support the concept of resuming

we had two parts:

• the formengine, which rendered a variant of the RJSF schema
• the formbuilder ui, which allowed the user to create our variant of the RJSF schema

sunk two years into that. who knows where it is now.

Constantly we were frustrated by the level of coding architecture in RJSF, it just wasn't designed well to begin with, no concept of the long vision or modularity. pretty disapointed that Mozilla drop the ball massively on this one.

I've never seen any other formbuilder or RJSF runtime that solved the same issues we did, which probably speaks to the reasons why RJSF is in the state its in, no-one realises they need those things until they discover it too late afte they've painted themselves into a corner and adapting just costs too much for them.

[MedinaGitHub]

@airtonix HI man. i wanna presensenting you my json form builder, https://github.com/MedinaGitHub/react-jsonschema-form-builder it is very simply, i create a json schema string, with the options of the form. thanks you for you feedback