Revolutionizing frontend development

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 provide 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.

1. Temporarily add https://grumptech.github.io to your backend’s CORS configuration.
2. Navigate to https://grumptech.github.io/demos/formly-designer/material/open-api-client.
3. Enter the base URL of your backend.
4. 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:

1. Navigate to Formly Designer.
2. Go to File → Import → OpenAPI 3.0 app and select a file with your OpenAPI definition.
3. Go to File → Save All.
4. Use the editor to customize labels, add descriptions, and choose different components.
5. 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.