React Form Architect is a solution for creating and rendering forms in React. Its main focus is to provide users with a tool to define, render and share a form in a browser.

All in a way that can be done by a non-programming being in a plug and play way without an extensive configuration.

Motivation

RFA was created for scientists to define the data types of their findings using a form. Other researchers can then add defined findings by filling out the form. All done in a browser without the need of any additional programming work. Check out UniCatDB for real-life usage. There is the Tree form field added especially for scientists for working with tree-structured data.

Due to the dynamic nature of the solution, RFA will also find much wider use in any environment where form needs to be created and/or rendered.

RFA works pretty well with NoSql databases for creating dynamic data types.

Why to use RFA

  • User testing preceded the development - RFA was built for users with UX in mind.
  • Offers the extensive palette of form fields - includes all the essential form arsenal.
  • For simple and complex forms - fields can be grouped together and ordered as desired.
  • Validations included - schema validation is dynamically created upon form creation.
  • Themeable - fits to your environment.
  • Extendable - new form fields can be defined for your specific need.
  • Transferable - form scheme can be exported and imported at will using JSON.
  • Full package - define form using Form Architect and render form using Form Renderer.
  • Decoupled functionality - create form in one place and render it elsewhere (even in different project, computer, planet).
  • Serverless - all magic is happening on the frontend.
  • Science ready - added functionality especially for scientists for working with tree-structured data (Tree).
  • Built using modern stack - React with hooks, Typescript, React Hook Form, Yup, Material-UI
  • Made with love

Create Form

Use Form Architect to create form, edit, group and order form fields and set validations. Upon completion generate form schema.

Render Form

Use form schema to render a form for your users using Form Renderer. Define what to do with fill out data. That’s it. No other actions needed.

Try it out!

open example in a new window to overcome limitations of this example iframe (drag and drop doesn’t work)

Make your First Steps with RFA