A Form Builder for a dynamic form render in SolidJS

This article is the second part of Porting my old dynamic form render from React to SolidJS. Having defined a structure in JSON (a template) to implement dynamic forms, now the next step is to build a tool to dynamically create this JSON template and continue learning SolidJS.

This tool will reuse some components from the previous implementation, and it will support the following elements:

Each one of these elements will be included in a toolbar:

After adding an element to the form, it will support two modes:

• The read-only mode.

• The edit mode

Both modes support re-ordering through drag and drop, and Solid DnD is the library used to accomplish this feature.

It’s Worth a mention that Radio and Simple Select have the following edit design:

Each option also can be reordered and removed at any time.

The complete code can be found here