Formity is a powerful React library designed to simplify the creation of complex, multi-step forms. Created to address the limitations of building these flows from scratch, it provides developers with a robust, type-safe framework that handles state management, navigation, and conditional logic out of the box. By defining the form as a programmable flow, developers can easily create onboarding processes, lead capture wizards, surveys, or job applications without getting buried in boilerplate code. Formity is designed to be library-agnostic, meaning it seamlessly integrates with popular React form solutions like React Hook Form, Formik, and TanStack Form, allowing you to use the validation logic you are already familiar with.

The library operates on a flow-based architecture where an array of elements defines the form's lifecycle. Each element corresponds to a specific action or state within the multi-step process, such as rendering a specific form step, executing conditional logic based on previous user input, or returning the final collected data. This approach enables dynamic behaviors like jumping between steps, looping through repeating fields, and maintaining cross-step variables, all while ensuring that every interaction remains fully type-safe through TypeScript. By abstracting the complexities of state tracking and navigation, Formity allows developers to focus on the UI and user experience of their forms rather than the underlying orchestration logic.

Some of the key features are:

• Programmable Flows: Define multi-step forms using an array-based structure that supports branching, looping, and navigation logic.
• Type-Safe: Provides full TypeScript coverage, ensuring inferred types across every step without needing manual casting.
• Library-Agnostic: Compatible with standard React form libraries such as React Hook Form, Formik, and TanStack Form.
• Advanced Logic: Supports conditional branching, dynamic step generation, and free navigation between steps.
• State Management: Built-in state tracking that manages values and history across the entire form lifecycle.
• Extensible: Includes advanced flow elements like conditions, switches, and modules to accommodate complex form requirements.
• Customizable: Full control over form rendering, allowing developers to implement their own UI components and styles.

To use Formity, you implement a flow constant that maps out your form's structure and behavior using the library's provided elements. You then pass this flow to the Formity component or the useFormity hook within your React application. The library manages the current step, the history of navigation, and the accumulated state, calling an onReturn callback only when the form has been fully completed. This ensures that the user's progress is managed reliably regardless of the form's complexity or depth.

Some common use cases include:

• Onboarding Flows: Creating personalized user paths that branch based on specific user responses or preferences.
• Lead Capture: Implementing multi-step surveys that adapt dynamically to keep users engaged until submission.
• Job Applications: Building structured forms with multi-step sections, including features like review steps for editing answers.
• Checkout Processes: Managing e-commerce flows where information like addresses or shipping details influence subsequent steps.
• Workspace Setup: Creating wizard-like interfaces to configure application preferences or user roles step-by-step.