Explore our main features

Build The Most Powerful Forms, Without The Hassle

Formity is a powerful React library for creating dynamic multi-step forms using JSON. It lets you build interactive forms where each step adapts based on user responses.

Get startedTemplate
website.com

Tell us about yourself

We would want to know a little bit more about you

Powerful logic

Make Them Dynamic

The advanced capabilities that Formity provides is what makes it stand out among the rest. The forms are defined using JSON syntax in a way in which we can define conditions, loops, variables and operators.

Are you working for a company?

We would like to know if you are working for a company

YesNo
const schema: Schema = [
  {
    form: {
      defaultValues: {
        working: [true, []],
      },
      resolver: {},
      render: {
        form: {
          step: "$step",
          defaultValues: "$defaultValues",
          resolver: "$resolver",
          onNext: "$onNext",
          children: {
            formLayout: {
              heading: "Are you working for a company?",
              description: "We would like to know if you are working for a company",
              fields: [
                {
                  yesNo: {
                    name: "working",
                    label: "Working",
                  },
                },
              ],
              button: {
                next: { text: "Next" },
              },
            },
          },
        },
      },
    },
  },
  {
    cond: {
      if: { $eq: ["$working", true] },
      then: [
        {
          form: {
            defaultValues: {
              company: ["", []],
            },
            resolver: {
              company: [
                [{ "#$ne": ["#$company", ""] }, "Required"],
                [{ "#$lt": [{ "#$strLen": "#$company" }, 20] }, "No more than 20 chars"],
              ],
            },
            render: {
              form: {
                step: "$step",
                defaultValues: "$defaultValues",
                resolver: "$resolver",
                onNext: "$onNext",
                children: {
                  formLayout: {
                    heading: "What is the name of the company you are working for?",
                    description: "We would like to know the name of the company",
                    fields: [
                      {
                        textField: {
                          name: "company",
                          label: "Company",
                        },
                      },
                    ],
                    button: {
                      next: { text: "Next" },
                    },
                    back: {
                      back: { onBack: "$onBack" },
                    },
                  },
                },
              },
            },
          },
        },
        {
          return: {
            working: "$working",
            company: "$company",
          },
        },
      ],
      else: [
        {
          form: {
            defaultValues: {
              searching: [false, []],
            },
            resolver: {},
            render: {
              form: {
                step: "$step",
                defaultValues: "$defaultValues",
                resolver: "$resolver",
                onNext: "$onNext",
                children: {
                  formLayout: {
                    heading: "Are you looking for a job?",
                    description: "If you are looking for a job, we would like to know",
                    fields: [
                      {
                        yesNo: {
                          name: "searching",
                          label: "Searching",
                        },
                      },
                    ],
                    button: {
                      next: { text: "Next" },
                    },
                    back: {
                      back: { onBack: "$onBack" },
                    },
                  },
                },
              },
            },
          },
        },
        {
          return: {
            working: "$working",
            searching: "$searching",
          },
        },
      ],
    },
  },
];
Storage

Store Them Anywhere

Since these forms are defined using JSON syntax we can store them anywhere we want, including files and databases. Having this capability allow us to have these forms in the backend and send them through the network.

Fetch form from the backend

Click at the following button to fetch the form

export default function App() {
  const [schema, setSchema] = useState<Schema | null>(null);
  const [status, setStatus] = useState<"idle" | "fetching">("idle");


  const handleClick = useCallback(async () => {
    setStatus("fetching");
    const schema = await fetchForm();
    setSchema(schema);
    setStatus("idle");
  }, []);


  let component: ReactElement;


  if (schema) {
    component = (
      <motion.div
        key="app"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.5 }}
        className="h-full"
      >
        <Main schema={schema} onStart={() => setSchema(null)} />
      </motion.div>
    );
  } else {
    component = (
      <motion.div
        key="start"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.5 }}
        className="h-full"
      >
        <Start
          heading="Fetch form from the backend"
          description="Click at the following button to fetch the form"
          button="Fetch form"
          onClick={handleClick}
          fetching={status === "fetching"}
        />
      </motion.div>
    );
  }


  return (
    <AnimatePresence mode="wait" initial={false}>
      {component}
    </AnimatePresence>
  );
}
Customizability

Use Your Components

The forms that can be created with this package are completely customizable and there are no constraints when it comes to what components you want to use. You just have to provide them and use them in any way you want.

How often do you travel?

We would want to know how often you travel

const components: Components<Parameters> = {
  form: ({ step, defaultValues, resolver, onNext, children }, render) => (
    <Form step={step} defaultValues={defaultValues} resolver={resolver} onNext={onNext}>
      {render(children)}
    </Form>
  ),
  formLayout: ({ heading, description, fields, button, back }, render) => (
    <FormLayout
      heading={heading}
      description={description}
      fields={fields.map((field, index) => (
        <Fragment key={index}>{render(field)}</Fragment>
      ))}
      button={render(button)}
      back={back ? render(back) : undefined}
    />
  ),
  next: ({ text }) => <Next>{text}</Next>,
  back: ({ onBack }) => <Back onBack={onBack} />,
  row: ({ items }, render) => (
    <Row
      items={items.map((item, index) => (
        <Fragment key={index}>{render(item)}</Fragment>
      ))}
    />
  ),
  textField: ({ name, label }) => <TextField name={name} label={label} />,
  numberField: ({ name, label }) => <NumberField name={name} label={label} />,
  listbox: ({ name, label, options }) => <Listbox name={name} label={label} options={options} />,
  yesNo: ({ name, label }) => <YesNo name={name} label={label} />,
  select: ({ name, label, options, direction }) => (
    <Select name={name} label={label} options={options} direction={direction} />
  ),
  multiSelect: ({ name, label, options, direction }) => (
    <MultiSelect name={name} label={label} options={options} direction={direction} />
  ),
};
Ready made components

Move even faster with Formity UI

Formity UI is a form template with a lot of different components really well designed so that you don't have to bother to create the components on your own. If you need an application that requires you to use complex forms this is the way to go.

Explore template