Finally, a visual form builder for Formly

If you've worked with Formly, you know how powerful configuration-driven forms can be. Instead of writing repetitive HTML templates, you define your fields in JSON or TypeScript, and Formly takes care of rendering, data binding, and validation.

But one thing has been missing: a visual form builder.

Meet Formly Designer, a visual editor that lets you create and configure Formly forms without manually writing every field configuration.

Build Forms Visually

With Formly Designer, you can:

• Add and arrange form fields visually.
• Configure field properties and component behavior.
• Import form definitions from JSON, JSON Schema or OpenAPI.
• Preview and test your forms.

The designer generates Formly field configurations that your Angular application can use to render forms, reducing repetitive setup, accelerating development, and making it easier to build dynamic forms.

Getting Started

Install the package

Run the following command:

npm i @grumptech/ngx-formly-designer

Configure Formly Designer

First, register the Formly types for your application and the designer:

provideFormlyCore(
  withFormlyMaterial(),
  withFormlyEditorTypes(),
);

Next, register Formly Designer and its supported importers:

provideFormlyDesigner({
  storage: 'local',
  importers: [
    JsonImporter,
    ExtendedJsonSchemaImporter,
    ExtendedOpenApiImporter,
    ExtendedOpenApiAppImporter,
  ],
  editor: {
    formRenderConfig: {
      editFormFieldConverter: (
        field: FormlyFieldConfig,
      ) => {
        delete field.hide;
        delete field.expressions;
      },
      testFormFieldConverter: (
        field: FormlyFieldConfig,
      ) => {},
    },
  },
});

The storage option configures local storage, while importers registers the supported import formats.

The formRenderConfig option lets you customize field configurations for edit and test modes. In this example, the edit converter removes hide and expressions properties.

Add a route

Finally, add the designer to your Angular application's routes:

{
  path: 'designer',
  loadComponent: () =>
    import('@grumptech/ngx-formly-designer').then(
      (m) => m.FormlyDesigner,
    ),
}

Once configured, the designer will be available at /designer.

Ready to Give It a Try?

Install @grumptech/ngx-formly-designer and explore a new way to build Formly forms.

Have ideas or feedback? Share your thoughts!