Skip to content
Get packs

Guide · Open source

How to use Formily: install, build forms and JSON Schema basics

Updated · written with AI from the project's own documentation and checked against our catalogue data

Formily is an open-source TypeScript form library for building forms in React, React Native, Vue 2 and Vue 3. It is aimed at developers who build data-heavy forms with many linked fields, or who want forms generated from JSON Schema sent by a back end. This guide explains what Formily does, how to install the core package, and when it is the right choice.

Formilyalibaba/formily · ★ 12.6k · MIT

Quick start

  1. 1Check prerequisites. Make sure Node.js and npm or yarn are installed on your machine.
  2. 2Install the core package. Run npm install @formily/core in your project folder.
  3. 3Read the official docs. Open formilyjs.org to find the guide for your framework and the bindings you need.
  4. 4Decide between hand-written and JSON Schema forms. Use field-by-field code for custom layouts, or JSON Schema if a back end will describe the form.
  5. 5Try the Form Builder. Open the Designable Form Builder if you want to design forms visually before coding.

What Formily is good for

Formily manages the state of each form field separately. The project says this avoids re-rendering the whole form tree, which is a common slowdown in React controlled forms when many fields are linked to each other.

Formily also integrates the JSON Schema protocol, so a form can be described as data. A back end can send that description and the front end renders the form from it. The README notes that the two paradigms, JSON Schema for the back end and JSchema for the front end, can be converted to each other.

  • Supports React, React Native, Vue 2 and Vue 3
  • Fields are managed independently for better performance on large forms
  • JSON Schema support for back-end driven form rendering
  • Works out of the box with Ant Design and Alibaba Fusion components, according to the README
  • Designable, a form builder, is available alongside the library

Install Formily with npm

Formily is distributed as packages through a package manager. The README lists Node.js and npm or yarn as the prerequisites. Install the core package with the command below.

The core package is @formily/core. Other packages are needed for framework bindings, which the README does not detail in the truncated text, so check the official documentation at the homepage for those.

  • Prerequisites: Node.js, npm or yarn
npm install @formily/core

Choose the right Formily setup for your project

Formily fits best when your form has many linked fields, when you want forms defined by a JSON Schema from a back end, or when your project already uses Ant Design or Alibaba Fusion components.

For a simple form with a few inputs, the README suggests a lighter library is enough. Formily is also a developer library, so it is not a no-code tool for non-developers.

  • Good fit: data-heavy forms with many linked fields
  • Good fit: forms generated from JSON Schema by a back end
  • Good fit: projects already using Ant Design or Alibaba Fusion
  • Poor fit: simple forms with a few inputs
  • Poor fit: projects not using React or Vue

Use the Form Builder for visual form design

The README describes Designable as a Form Builder that lets you develop forms quickly at low cost. It is linked from the project and presented as an option alongside the library.

The README does not describe how Designable connects to your code, so read its own documentation before adopting it.

Learn the documentation and community resources

The official website is formilyjs.org, and the README links a version 1.0 site for older projects. The project also links the related repositories formilyjs, designable and icejs on GitHub.

To contribute, the README points to a contribution guide on the official site.

  • Official site: https://formilyjs.org
  • Community repositories: formilyjs, designable, icejs

What people use it for

  • Building a data-heavy form where changing one field updates several linked fields
  • Rendering forms from a JSON Schema sent by a back end
  • Adding forms to an Ant Design or Alibaba Fusion based React app
  • Designing forms visually with the Designable Form Builder

Frequently asked questions

How do I install Formily?

Install the core package with npm install @formily/core. The README lists Node.js and npm or yarn as prerequisites. Check formilyjs.org for framework-specific setup.

Is Formily free to use?

Formily is open source under the MIT licence, according to the README. The licence file is linked from the project page.

Does Formily work with Vue?

Yes. The README lists Vue 2 and Vue 3 as supported, alongside React and React Native.

Is Formily a no-code form builder?

No. The README describes Formily as a developer library. The separate Designable Form Builder offers visual design, but Formily itself requires coding.

What are alternatives to Formily?

Projects that are commonly compared to Formily include React Hook Form, Formik, VeeValidate and JSON Schema Form (react-jsonschema-form). Choose based on your framework and whether you need JSON Schema.

When should I not use Formily?

For simple forms with a few inputs, a lighter library is enough. If your project does not use React or Vue, Formily is not listed as supported.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Formily suits frontend developers building large forms with many linked fields, or teams that want forms generated from JSON Schema, especially in React or Vue projects. If you have a simple form, use a lighter library, and if you need a no-code tool, look elsewhere.

Install options & downloads