DEV Community

Cover image for Fomir: A Schema-First form library

Posted on

Fomir: A Schema-First form library

What is Fomir?

Fomir is a Schema-First library for building form.

Source code in Github: Fomir.

Why create a new form library?

I have tried many form libraries, like redux-form, formik, final-form, react-hook-form... None of them suit my taste. I would expect a forms library with these features:

  • Using schema
  • Easy to update form state
  • High Performance
  • More abstract

So I create a new form library, and name it to Fomir.



Fomir create form by passing a form schema which is a json tree. the form schema is very flexible, you can create any form by the schema.


Every thing in form schema is state, you can build the form interface easily. it's useful when you create a dynamic form.

High Performance

In some case, form performance is very important. Performance of Fomir is high because of subscription-based form state management. It will not rerender the whole form when you update a single field.

Sharing and Collaborating

In fomir, the component property in form schema decide how to render the form field. Fomir will push you to create some form component like Input, Select, DatePicker... this will make it easy to share form component in you team.

Low-code friendly

Fomir builds form with schema, so fomir is very easy to use in low-code scenarios. when you want to create something like form builder, Fomir might be a good choice.

Strongly Typed

Fomir Form provides strong typing via Typescript to allow you to catch common bugs at coding time, and providing the coding intellisense.


npm install fomir fomir-react
Enter fullscreen mode Exit fullscreen mode

Basic Usage

function BasicForm() {
  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    children: [
        label: 'First Name',
        name: 'firstName',
        component: 'Input',
        value: '',
        label: 'Last Name',
        name: 'lastName',
        component: 'Input',
        value: '',
        component: 'Submit',
        text: 'submit',

  return <Form form={form} />
Enter fullscreen mode Exit fullscreen mode


For more detailed usage, please see the documentation:

Top comments (0)