Formily — Unified Form Solution for React and Vue

Introduction

Formily is a form management framework by Alibaba that separates form logic (validation, state, dependencies) from the UI layer. It supports both React and Vue, works with any component library (Ant Design, Element Plus, Vant), and scales to enterprise forms with hundreds of dynamic fields without performance degradation.

What Formily Does

• Manages form state, validation, and field dependencies through a framework-agnostic core
• Renders forms from JSON Schema definitions for low-code and config-driven scenarios
• Supports dynamic field arrays, conditional visibility, and cascading field relationships
• Provides reactive field-level re-rendering that avoids full-form re-renders on every change
• Offers drag-and-drop form designers for visual form building

Architecture Overview

Formily is split into three layers. The Core (@formily/core) is a framework-agnostic reactive state engine that manages field models, validation pipelines, and lifecycle hooks. The Bridge layer (@formily/react or @formily/vue) connects core state to the view framework with fine-grained subscriptions so only changed fields re-render. The Component layer (@formily/antd-v5, @formily/element, etc.) maps core field types to actual UI components. This separation means switching from Ant Design to Element Plus requires changing only the component layer.

Self-Hosting & Configuration

• Install the core package plus your framework bridge and UI component adapter
• Define forms imperatively with createForm() or declaratively via JSON Schema
• Use the effects API to set up field-level reactions (e.g., show field B when field A equals X)
• Configure validators using built-in rules or custom async validation functions
• Deploy the Formily Designer for visual drag-and-drop form creation in admin tools

Key Features

• Reactive field-level updates ensure only the changed field re-renders, keeping large forms fast
• JSON Schema protocol for rendering forms from configuration without writing JSX
• Cross-field linkage system for dependent dropdowns, conditional sections, and computed values
• Form Designer with drag-and-drop interface for non-developer form creation
• Multi-framework support: single form logic works across React and Vue projects

Comparison with Similar Tools

• React Hook Form — lightweight hook-based form library for React; Formily adds JSON Schema rendering, field linkage, and Vue support
• Formik — established React form library; less performant with large forms since it re-renders more aggressively
• Ant Design Form — built into Ant Design; Formily provides a more powerful state engine that works across multiple UI libraries
• VeeValidate — Vue-focused validation library; Formily offers a richer form model with dynamic arrays and cross-field logic
• XState Forms — state-machine approach to forms; more formal but harder to adopt for standard CRUD forms

FAQ

Q: Does Formily work with both React and Vue? A: Yes. The core state engine is framework-agnostic. Separate bridge packages adapt it to React and Vue.

Q: Can I build forms without writing code? A: Yes. Formily includes a drag-and-drop Designer component that outputs JSON Schema you can render directly.

Q: How does Formily handle performance with hundreds of fields? A: Formily uses reactive subscriptions at the field level, so changing one field does not trigger re-renders for unrelated fields.

Q: Which component libraries does Formily support? A: Official adapters exist for Ant Design v5, Element Plus, Vant, and Fusion Design. Custom adapters can be built for any library.

Sources

• https://github.com/alibaba/formily
• https://formilyjs.org/