# alibaba/formily

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/alibaba-formily).**

12,551 stars · 1,596 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/alibaba/formily
- Homepage: https://formilyjs.org/
- awesome-repositories: https://awesome-repositories.com/repository/alibaba-formily.md

## Topics

`ant-design` `designable` `form` `form-builder` `fusion` `json-schema` `json-schema-form` `low-code` `no-code` `observable` `react` `react-form` `react-native` `reactive` `schema-form` `validator` `vue` `vue-form` `vue3`

## Description

Formily is a schema-driven framework designed for building complex web forms by decoupling business logic and validation rules from the underlying user interface. It utilizes a declarative JSON schema to define form structures, allowing developers to manage data collection and field interactions independently of specific component libraries or frontend frameworks.

The system is built upon a reactive observable state engine that synchronizes form data, validation status, and field interactions in real time. By employing a recursive tree traversal and a centralized event bus, the engine manages granular updates across the form structure, ensuring high performance even in complex, nested layouts.

Beyond its core engine, the project provides a visual builder interface that enables the construction of sophisticated form layouts through drag-and-drop configuration. This approach allows for the standardization of data collection processes and the creation of reusable form definitions across large-scale applications.

## Tags

### User Interface & Experience

- [Schema-Based Generators](https://awesome-repositories.com/f/user-interface-experience/forms/dynamic-form-generation/schema-based-generators.md) — Enables building complex web forms by defining structures in JSON schemas to decouple data logic from the user interface.
- [Reactive Form Builders](https://awesome-repositories.com/f/user-interface-experience/form-state-management/reactive-form-builders.md) — Provides a reactive engine for tracking and synchronizing form data, validation, and field interactions in real time.
- [Reactive State Management Libraries](https://awesome-repositories.com/f/user-interface-experience/reactive-state-management-libraries.md) — Ships an observable state engine that synchronizes form data and validation status with the user interface in real time.
- [Form and Input Management](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management.md) — Manages complex form logic and validation consistently across different frontend frameworks and component libraries. ([source](https://formilyjs.org/))
- [Form Builders](https://awesome-repositories.com/f/user-interface-experience/form-builders.md) — Includes a drag-and-drop interface for designing complex form layouts and configurations without manual code.
- [Form State Management](https://awesome-repositories.com/f/user-interface-experience/form-state-management.md) — Synchronizes form data and validation status across complex, nested component structures using an observable engine. ([source](https://formilyjs.org/))
- [Block-Based Form Builders](https://awesome-repositories.com/f/user-interface-experience/forms/block-based-form-builders.md) — Integrates drag-and-drop interfaces for designing sophisticated form layouts without manual coding.
- [Framework-Agnostic Rendering](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/framework-agnostic-rendering.md) — Decouples core form logic from specific UI component libraries by delegating rendering to external adapters.
- [Forms](https://awesome-repositories.com/f/user-interface-experience/forms.md) — Standardizes data collection processes across large applications through reusable form schemas and centralized validation.

### Web Development

- [Declarative Form Schemas](https://awesome-repositories.com/f/web-development/form-handling/declarative-form-schemas.md) — Provides a framework for building complex web forms using declarative JSON schemas to decouple field definitions from rendering.

### Software Engineering & Architecture

- [Configuration-Driven Schemas](https://awesome-repositories.com/f/software-engineering-architecture/configuration-driven-schemas.md) — Uses declarative JSON schemas to define form structures and validation rules at runtime.
- [Schema-Driven Generators](https://awesome-repositories.com/f/software-engineering-architecture/schema-driven-generators.md) — Generates dynamic form interfaces and validation logic from standardized JSON schema definitions. ([source](https://formilyjs.org/))
- [UI Data Observers](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/reactive-subscription-systems/observer-patterns/ui-data-observers.md) — Tracks field values and validation status using a reactive observer pattern to trigger granular UI updates.
- [Headless Logic Decoupling](https://awesome-repositories.com/f/software-engineering-architecture/headless-logic-decoupling.md) — Separates business logic and state management from visual rendering layers to ensure framework-agnostic form definitions.

### Data & Databases

- [Tree Traversal Engines](https://awesome-repositories.com/f/data-databases/tree-traversal-engines.md) — Navigates and processes hierarchical form structures recursively to inject state-bound properties into nested components.