Advanced visual form builder for React

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.

If you’re interested, here is a demo: https://d52rv9ydy6znl.cloudfront.net/

1 Like

Hi! This is very nice work :+1:

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?

Hi Stefan,

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. :slight_smile:

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.