Building Angular Forms with GolemUI and Kendo UI

If you've been reading here for a while, you know that a big part of my daily work involves building and managing complex forms. And if there is one thing I've learned over the years, it's that I love writing less boilerplate code, and even more, I love saving tokens when working with AI coding assistants.

That is how I discovered GolemUI, thanks to Raúl (Elecash) who introduced me to it. I was looking for a cleaner way to handle forms without writing endless HTML templates or repetitive validation logic, and GolemUI's schema-driven approach immediately clicked. Combined with my long-time use of Kendo UI, it felt like the natural next step for my workflow.

I wanted the schema-driven efficiency of GolemUI, but with the enterprise widgets I've relied on for years in the Kendo ecosystem. So I built @danywalls/golemui-kendo.

Before diving into how the schematic works, let's briefly look at what makes GolemUI so special.

What is GolemUI?

GolemUI is a schema-driven UI engine for building dynamic forms. 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.

Instead of writing HTML templates and wiring up validators manually, you describe your form as data using a typed gui.* builder:

const formDef = [
  gui.inputs.textInput('username', {
    label: 'Username',
    validator: { type: 'string', required: true },
  }),
  gui.inputs.password('password', {
    label: 'Password',
    validator: { type: 'string', 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, schema-driven forms are about 3x smaller in code and have a cyclomatic complexity of 1. In practice, smaller schemas mean smaller prompts, lower token costs, and far fewer AI hallucinations.

While GolemUI is powerful on its own, bringing Kendo UI components into the mix requires a seamless connection. That is where @danywalls/golemui-kendo comes in.

The Bridge: @danywalls/golemui-kendo

Kendo UI for Angular is mature and battle-tested. Its components handle edge cases I don't want to think about. So I wrote an Angular CLI schematic that bridges the two ecosystems.

One command:

ng add @danywalls/golemui-kendo

That single command:

1. Installs all the dependencies (@golemui/angular, @golemui/core, @golemui/gui-angular, @progress/kendo-angular-buttons, @progress/kendo-angular-inputs, @progress/kendo-theme-default)
2. Adds the CSS styles to your angular.json
3. Generates 6 widget adapter components and a widget loaders map

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: { type: 'string', required: true, format: 'email' },
  }),
  gui.inputs.custom('kendo-passwordbox', 'password', {
    label: 'Password',
    props: { hint: 'At least 8 characters' },
    validator: { type: 'string', 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 @danywalls/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

Schema-driven forms are token-efficient by nature. 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: the schema is declarative, the engine handles the logic
• Less context for AI: a form that's 1,300 tokens instead of 3,900 fits in a single context window
• One complexity path: no branching, no switch cases, no 40-path cyclomatic mess
• 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.

Recap

I built @danywalls/golemui-kendo because I wanted the best of both ecosystems: GolemUI's schema-driven efficiency and Kendo UI's enterprise maturity. It's open source, it's on npm, and it takes one ng add to get started.

• npm: @danywalls/golemui-kendo
• GitHub: golemui-kendo-schematics
• GolemUI: golemui.com
• Kendo UI for Angular: telerik.com/kendo-angular-ui

If you're an Angular developer who loves Kendo UI for Angular and wants to try schema-driven forms, give it a shot. One command, zero configuration.

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.