Installation

Below you will learn how to add form-builder to your project. Which packages you need depends on your framework.

TypeScript

If you use TypeScript, enable strict mode in your tsconfig.json, so that every type is computed correctly.

{
  "compilerOptions": {
    "strict": true,
    // ...
  },
}

Vue

The Vue adapter renders definitions with Formisch and your own components. Install it with the schema package, Formisch for Vue and Valibot:

npm

npm install @whatsaaaa/form-builder-vue @whatsaaaa/form-builder-schema @formisch/vue valibot

pnpm

pnpm add @whatsaaaa/form-builder-vue @whatsaaaa/form-builder-schema @formisch/vue valibot

yarn

yarn add @whatsaaaa/form-builder-vue @whatsaaaa/form-builder-schema @formisch/vue valibot

bun

bun add @whatsaaaa/form-builder-vue @whatsaaaa/form-builder-schema @formisch/vue valibot

The Vue page lists the versions it requires.

React

The React adapter does the same for React:

npm

npm install @whatsaaaa/form-builder-react @whatsaaaa/form-builder-schema @formisch/react valibot

pnpm

pnpm add @whatsaaaa/form-builder-react @whatsaaaa/form-builder-schema @formisch/react valibot

yarn

yarn add @whatsaaaa/form-builder-react @whatsaaaa/form-builder-schema @formisch/react valibot

bun

bun add @whatsaaaa/form-builder-react @whatsaaaa/form-builder-schema @formisch/react valibot

The React page lists the versions it requires.

Other frameworks

Preact, Solid, Svelte, Qwik and Angular need no adapter. Install the schema package with Formisch's own package for your framework, here for Solid:

npm

npm install @whatsaaaa/form-builder-schema @formisch/solid valibot

pnpm

pnpm add @whatsaaaa/form-builder-schema @formisch/solid valibot

yarn

yarn add @whatsaaaa/form-builder-schema @formisch/solid valibot

bun

bun add @whatsaaaa/form-builder-schema @formisch/solid valibot

The schema package needs Valibot 1.3 or later on its own, and every Formisch package needs 1.4.1 or later. Supported versions lists every range. The Formisch bindings have a tested renderer for each framework to start from.

Conditions

To show and hide fields by the values of other fields, also add the affects package:

npm

npm install @whatsaaaa/form-builder-affects

pnpm

pnpm add @whatsaaaa/form-builder-affects

yarn

yarn add @whatsaaaa/form-builder-affects

bun

bun add @whatsaaaa/form-builder-affects

JSON Schema

To make a JSON Schema for your own field types and rules, also add @valibot/to-json-schema 1.6 or later. You don't need it for the built-in ones: the schema package ships their JSON Schema. See JSON Schema.

Next steps

Continue to getting started to write your first definition and render it.