Formly (@explita/formly) is a lightweight, fully type-safe form management toolkit engineered specifically for React 19+ and modern frontend architectures. Designed to solve the performance bottlenecks of traditional form libraries, Formly operates on a high-performance pub-sub event bus architecture. Targeted input state updates bypass full-form component re-renders entirely, keeping complex forms with hundreds of nested fields hyper-responsive and fluid.
Formly pairs declarative primitives (<Form />, <Field />, <FormSpy />) with the useForm and useField hooks, alongside an ergonomic pre-bound form.Field component that eliminates the overhead of React context lookups. It provides first-class, seamless Zod schema validation, custom synchronous check callbacks, custom error formatters, and version-safe debounced async validation (asyncValidate) with request tracking to completely eliminate network race conditions during remote availability checks.
Dynamic data structures are first-class citizens. Formly's Auto-Keyed Dynamic Arrays (form.array()) track items through persistent unique keys, eliminating React reconciliation bugs, input focus state loss, and animation glitches caused by naive index keys, with support for batch operations (push, pop, batch remove, move, swap). For reactive data flows, Dynamic Computed Fields derive values from internal field paths or external React props/state, while Cascading Dropdowns automatically watch parent dependencies and dynamically load child options with built-in loading and error state management.
Formly provides robust primitives for enterprise workflows: Native Multi-Step Wizards (steps) with per-step validation tracking; Declarative Input Normalization (normalize) for real-time input formatting; Zero-Config Draft Persistence (persistKey) with local storage restoration; and Page Unload Prevention (preventUnload) to block accidental navigation when forms are dirty. During submission, the handler receives a rich Handler Context (ctx) exposing ctx.getChanges() to extract exact PATCH payload deltas, ctx.setErrors() for server-side mapping, and native FormData access. Development is accelerated by a built-in, floating Interactive DevTools Inspector with live value trees, delta diff inspection, and container boundary confinement.