DEV Community: GrumpTech

Finally, a visual form builder for Formly

GrumpTech — Sun, 11 Oct 2026 09:26:19 +0000

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!

Revolutionizing frontend development

GrumpTech — Fri, 25 Sep 2026 07:11:35 +0000

Have you ever felt that a large part of frontend development is repetitive work? Building forms, creating tables, connecting fields to API endpoints, adding validation, and handling loading and error states. Creating detail pages, list views, filters, navigation, and all the other pieces needed to turn an API into a usable application. And then doing it all over again for the next project.

What if we could change that?

Imagine building a set of reusable frontend components once: forms, tables, dashboards, navigation, search, filtering, validation, and more. Instead of manually building the frontend for every new application, you simply generate it from an OpenAPI definition that describes your backend. In this article, we explore a solution built on top of Formly that can transform an OpenAPI definition into a customizable frontend application.

The idea is simple: build the components once, define your API, and generate the frontend application automatically.

Do you think it’s possible? You can try it now.

Temporarily add https://grumptech.github.io to your backend’s CORS configuration.
Navigate to https://grumptech.github.io/demos/formly-designer/material/open-api-client.
Enter the base URL of your backend.
Enter the URL of your OpenAPI definition.

Save the settings and see what happens. You will see how an OpenAPI specification is transformed into a functional frontend without manually building every form, field, and API interaction. Of course, a production-ready application will require some customization. Labels may need to be refined, descriptions added, and the client might request custom components for specific use cases.

You can customize the generated application using the Formly Designer:

Navigate to Formly Designer.
Go to File → Import → OpenAPI 3.0 app and select a file with your OpenAPI definition.
Go to File → Save All.
Use the editor to customize labels, add descriptions, and choose different components.
Navigate to the newly created app.

This gives you a functional frontend as a starting point while retaining the flexibility to tailor it to the specific needs of each application.

For a sample application and a practical guide to creating your own custom components, check out the Formly Designer sample.

What do you think?

Give it a try and let me know what you think. What worked well? What was missing? Whether you have a feature request, a use case, or simply an idea for where this could go, I’d love to hear your feedback.

The false choice between low-code and pro code

GrumpTech — Wed, 16 Sep 2026 19:00:01 +0000

For years, low-code has been positioned as the future of software development, with predictions that it would eventually replace traditional coding. The reality has proven different: low-code has partially changed how we build software, but it has not eliminated the need for professional developers.

Traditional software development involves a great deal of repetitive work. Developers frequently spend much time building standard CRUD functionality, forms, workflows, and integrations instead of focusing on the complex business problems that create real value.

Low-code platforms often lack the flexibility required for complex business logic. While they attempt to provide that flexibility through visual programming languages, these languages still impose constraints compared to traditional software development. As a result, professional developers often spend significant time implementing business requirements within the constraints of a rigid low-code platform.

The real opportunity is not choosing between low-code and pro code, but combining the strengths of both. Low-code can accelerate the development of standard application components, while professional code provides the flexibility and control needed for complex requirements.

An ideal approach should offer:

A clear version history and source control.
Flexibility to easily adjust and extend applications with pro code.
No vendor lock-in through open standards and full access to the underlying code.
Accelerated development of standard functionality, such as CRUD functionality, forms, workflows and integrations.

Try Formly Designer