Building Angular Forms with GolemUI and Kendo UI

No matter what kind of app you build, you need forms. Every company I have worked for needed them too, for marketing pages, onboarding flows, or just to make teams more productive when they build forms.

If you have read my blog before, you may know my post about creating dynamic forms in Angular step by step. It is one of the most read articles on my blog. Why? Because most developers rebuild the same form logic over and over. They spend time and write the same lines of code in every project.

With AI, that problem gets bigger. Every duplicated line becomes duplicated tokens. The AI repeats the same code faster, but not cheaper. And it gets even harder when you need to adapt that code to a UI library like Angular Material or Kendo UI. Or when you have some projects in Angular and others in React. Your agent repeats the same scenario in every project.

So, what if there was a library that makes forms easy? A library built with AI agents in mind, and flexible enough to work with any UI library and any framework. That library is GolemUI.

But what is GolemUI, and what makes it so special? Let's take a quick look.

What is GolemUI?

GolemUI is a declarative form engine. Instead of writing HTML templates and wiring up validators manually, you describe your form as data with a JSON DSL or with a typed gui.* builder. It works with React, Angular, Lit, Vue, and vanilla JS, multi-framework by design. But since I'm an Angular lover through and through, I'll focus on what I know best. If you want to explore the engine itself, it's open source and you can check the source on GitHub.

You know how easy it is to build a form with GolemUI? It uses the power of Zod to handle validation, so you describe the form and validation just works. Check out this example using the typed builder:

const formDef = [
  gui.inputs.textInput('username', {
    label: 'Username',
    validator: { required: true },
  }),
  gui.inputs.password('password', {
    label: 'Password',
    validator: { required: true, minLength: 8 },
  }),
  gui.actions.button({ label: 'Sign In', actionType: 'submit' }),
];

The main reason I use GolemUI for form-heavy apps is AI code generation and token efficiency. As highlighted in GolemUI's article on the age of token efficiency, GolemUI forms are about 3x smaller in code and have a cyclomatic complexity of 1. In practice, leaner form definitions mean smaller prompts, lower token costs, and far fewer AI hallucinations. And it goes further for AI workflows: GolemUI ships an MCP server that validates your form definitions and generates JSON or code on demand, so an AI assistant never hands you an invalid form.

GolemUI is more than token savings. Its features cover the hard parts of form building for you: validation with Zod, conditional fields with states, i18n, middlewares, and form events. You already saw conditional fields in the example above with include: { when: ... }. And it ships more than 28 production-ready widgets, from calendar and currency to tags and repeaters.

What I love most, though, is how easy it is to extend. GolemUI has a whole section on building your own widgets: input, layout, display, and action widgets that plug into the engine with the same pattern as the built-in ones. It also works with native elements and third-party libraries, and you can restyle everything with design tokens. Since Kendo UI is the library I use the most, I thought: why not have the best of both worlds? So let's see why golemui-kendo.

Why golemui-kendo?

I've been using Kendo UI for Angular for years, in many applications, mostly for enterprise projects like accounting software. One thing I love about it: it gives you more than 110 ready-to-use components. I don't need all of them to build forms, but the maturity and quality are hard to find anywhere else.

That is why I created golemui-kendo: a small Angular CLI schematic that makes it easy to combine Kendo's power with GolemUI's flexibility. It's open source, and you can peek at the source on GitHub.

One simple command, and we get a lot of steps in one:

ng add golemui-kendo

This command does all of this:

1. Installs all the dependencies: the @golemui/* packages, the @progress/kendo-angular-* components, and the Kendo theme
2. Sets up localization automatically: it installs @angular/localize matching your @angular/core version and registers @angular/localize/init in the polyfills of your angular.json
3. Adds the CSS styles to your angular.json
4. Generates the Kendo widget adapters (kendo-textbox, kendo-button, kendo-checkbox, and more) plus the kendoWidgetLoaders map
5. Generates a sample form you can run right away (skip it with --skipExample)

Note: Kendo UI for Angular is commercial software, so it needs a license for production. No stress though: when you run ng add golemui-kendo, it just asks if you have an active subscription. If you do, it installs @progress/kendo-licensing and tries to activate it for you (it opens a browser to log in; if it can't run, it just prints the commands). If you don't, it gently reminds you about the license, but you can keep building. You can also pass the flag directly: ng add golemui-kendo --kendoLicense.

The result? You use Kendo UI widgets naturally inside GolemUI forms:

import { kendoWidgetLoaders } from './kendo-widgets/kendo-widget-loaders';
 
const loginFormDef = [
  gui.inputs.custom('kendo-textbox', 'email', {
    label: 'Email Address',
    props: { placeholder: 'user@example.com', clearButton: true },
    validator: { required: true, format: 'email' },
  }),
  gui.inputs.custom('kendo-passwordbox', 'password', {
    label: 'Password',
    props: { hint: 'At least 8 characters' },
    validator: { required: true, minLength: 8 },
  }),
  gui.inputs.custom('kendo-checkbox', 'rememberMe', {
    label: 'Remember Me',
  }),
  gui.actions.custom('kendo-button', {
    label: 'Sign In',
    actionType: 'submit',
    disabled: { when: '$formIsInvalid' },
  }),
];
 
@Component({
  template: `<gui-form [config]="config"></gui-form>`,
})
export class LoginFormComponent {
  protected config: GuiFormInitConfig = {
    formDef: loginFormDef,
    formConfig: { widgetLoaders: kendoWidgetLoaders },
  };
}

Every Kendo widget adapter is lazy-loaded. The kendoWidgetLoaders map uses dynamic import(), so you only ship what you use. Now that we know how to set up the package, let's explore which widgets are available out of the box.

The Widgets

Right now golemui-kendo ships adapters for the most common form inputs from the Kendo UI for Angular library: TextBox, TextArea, NumericTextBox, Checkbox, Switch, and Button. It also includes a password variant built on top of the TextBox component.

Each adapter uses InputWidgetAdapter or ActionWidgetAdapter from @golemui/angular, which is the same pattern GolemUI's own widgets use. If you've ever written a custom widget for GolemUI, the code will look familiar. Understanding the available widgets is great, but why should you combine GolemUI and Kendo UI in your day-to-day workflow?

Why This Combo Wins

Declarative forms are inherently more token-efficient than imperative ones. A GolemUI form is a third of the code a conventional form needs. When you pair that with Kendo UI's enterprise-grade components, you get:

• Less code to write: GolemUI's API is compact, but powerful
• Easier to maintain: composing builder functions beats maintaining the HTML, CSS, and TypeScript wiring for every form, and lets you reuse form logic
• Less context for AI: the same form in ~1,300 tokens instead of ~3,900
• One complexity path: no branching, no switch cases, no 40-path cyclomatic mess
• JSON ready and portable: the JSON DSL and the typed API produce the same result, so you can load forms from a server, or move them between frameworks without a rewrite
• Enterprise components: Kendo's theming, accessibility, and edge case handling

The build-time generation cost is almost identical to standard components. The real saving is what you live with after, because every future edit reads less, breaks less, and costs less. And with Kendo UI's battle-tested widgets on top, you get that efficiency without giving up the enterprise features your forms need.

So, is this combo worth it? For me, yes. Let's do a quick recap of everything we covered.

Recap

I built golemui-kendo because I wanted the best of both worlds: GolemUI's efficiency and Kendo UI's enterprise maturity. It's open source, it's on npm, and it takes one ng add to get started. Give it a try, or peek at the source on GitHub. And if you want forms that are easy to build and kind to your AI token budget, give GolemUI a shot, or explore its source on GitHub.

Big thanks to Raúl (Elecash) and the GolemUI team for the overview and code review. It always helps to have another pair of eyes.