React-jsonschema-form: Searching for visual builder

Created on 24 May 2017  路  14Comments  路  Source: rjsf-team/react-jsonschema-form

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.

Most helpful comment

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

screenshot from 2018-06-16 23-52-03

All 14 comments

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.

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!

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.

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

@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...

Is any available for drag and drop visual form builder

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

screenshot from 2018-06-16 23-52-03

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

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

Hi there !

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

Thanks !

@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.

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

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.

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Eric24 picture Eric24  路  3Comments

j-zimnowoda picture j-zimnowoda  路  3Comments

marinav picture marinav  路  3Comments

MedinaGitHub picture MedinaGitHub  路  3Comments

sstarrAtmeta picture sstarrAtmeta  路  3Comments