Fab4m provides a simple API for defining your forms, so you can avoid repeating yourself with lots of tedious markup. Fab4m lets you define the form structure and the representation at the same time.

Check the full documentation for a complete overview of the features.

Fab4m requires you to be up and running with react or preact first. If you have a working environment with react or preact, you can install fab4m through npm:

npm install --save @fab4m/fab4m

import { createForm, textField, StatefulFormView } from "@fab4m/fab4m";

const form = createForm({
    name: textField({
        title: "Your name"
    });
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<StatefulFormView form={form} />);

You now created your first form!

We first created the form definition, and then used the StatefulFormView component to render the it. The StatefulFormView component provides the form with an internal state so that you don't have to worry about that, and it's the simplest way to get started.

Head over to our step by step guide to learn about more complex use cases.

Fab4m consists of the core package and several official extra packages:

• Date
• Password
• Router forms

All the code is licensed under the MIT License.