GolemUI: A New Paradigm for JavaScript Forms

GolemUI is introducing a declarative approach to building forms, acting as a powerful Form Engine designed to streamline how developers handle complex user inputs across the JavaScript ecosystem.

🤖 AI-First Documentation

GolemUI is built with the modern era of development in mind, providing machine-readable documentation specifically tailored for LLMs and AI agents.

To enable AI to build forms programmatically, refer to the gui.* reference located at: https://golemui.com/llms-gui-dx.txt.

Note: The JSON DSL should only be utilized when specifically requested; the programmatic surface is the preferred default.

For a comprehensive overview, the full documentation index is available at https://golemui.com/llms.txt.

---

🛠️ Core Capabilities & Features

GolemUI isn't just a library; it's a framework-agnostic engine. Whether you are using traditional imperative methods or modern declarative patterns, GolemUI simplifies the process.

Feature Matrix

Out-of-the-Box Checklist

• Full keyboard accessibility
• ARIA attribute automation
• JSON-based form definitions
• Multi-framework compatibility

---

🌐 Ecosystem Integration

GolemUI allows you to maintain the same form logic regardless of the rendering layer.

The Logic of Form State

Mathematically, GolemUI treats form state as a function of the schema and the current input: $\text{FormState} = f(\text{Schema}, \text{UserInput}) \rightarrow \{ \text{Values}, \text{Errors}, \text{Validity} \}$

---

💻 Implementation Comparison

Below is a demonstration of a complex Signup Form featuring conditional logic (e.g., showing "Company Name" only for non-free accounts).

⚛️ React Implementation

Utilizing react-hook-form (Approx. 89 lines, 8 branches)

import { useForm, useWatch } from 'react-hook-form';

type FormData = {
  email: string;
  password: string;
  accountType: 'Free' | 'Pro' | 'Enterprise';
  companyName?: string;
  seats?: number;
  subscribe: boolean;
  frequency?: string;
  terms: boolean;
};

export function SignupForm() {
  const { register, control, handleSubmit, formState: { errors } } = useForm<FormData>({
    defaultValues: { accountType: 'Free', subscribe: false, terms: false },
  });

  const accountType = useWatch({ control, name: 'accountType' });
  const subscribe = useWatch({ control, name: 'subscribe' });

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <label>
        Email 
        <input type="email" {...register('email', { required: true, pattern: /^[^ \s@]+@[^ \s@]+\.[^ \s@]+$/ })} />
        {errors.email && <span>Valid email required</span>}
      </label>

      <label>
        Password 
        <input type="password" {...register('password', { required: true, minLength: 8 })} />
        {errors.password && <span>Min 8 characters</span>}
      </label>

      <label>
        Account type 
        <select {...register('accountType', { required: true })}>
          <option>Free</option>
          <option>Pro</option>
          <option>Enterprise</option>
        </select>
      </label>

      {accountType !== 'Free' && (
        <label>
          Company name 
          <input {...register('companyName', { required: true })} />
          {errors.companyName && <span>Required</span>}
        </label>
      )}

      {accountType === 'Enterprise' && (
        <label>
          Seats 
          <input type="number" {...register('seats', { required: true, min: 5, max: 1000, valueAsNumber: true })} />
          {errors.seats && <span>Between 5 and 1000</span>}
        </label>
      )}

      <label>
        <input type="checkbox" {...register('subscribe')} /> Subscribe to product updates
      </label>

      {subscribe && (
        <label>
          Frequency 
          <select {...register('frequency', { required: true })}>
            <option>Daily</option>
            <option>Weekly</option>
            <option>Monthly</option>
          </select>
        </label>
      )}

      <label>
        <input type="checkbox" {...register('terms', { validate: (v) => v === true || 'Required' })} /> 
        I accept the terms of service
      </label>

      <button type="submit">Sign up</button>
    </form>
  );
}

🅰️ Angular Implementation

Utilizing Signals (Approx. 52 lines, 0 branches)

import { Component, signal } from '@angular/core';
import { form, Control, schema, required, email, minLength, validate } from '@angular/forms/signals';

interface Signup {
  email: string;
  password: string;
  accountType: 'Free' | 'Pro' | 'Enterprise';
  companyName: string;
  seats: number | null;
  subscribe: boolean;
  frequency: 'Daily' | 'Weekly' | 'Monthly';
  terms: boolean;
}

const signupSchema = schema<Signup>((data) => {
  required(data.email);
  email(data.email);
  required(data.password);
  minLength(data.password, 8);
  validate(data.companyName, ({ value, valueOf }) => 
    valueOf(data.accountType) !== 'Free' && !value() ? { kind: 'required' } : null
  );
  validate(data.seats, ({ value, valueOf }) => {
    if (valueOf(data.accountType) !== 'Enterprise') return null;
    const v = value();
    return v != null && v >= 5 && v <= 1000 ? null : { kind: 'seats' };
  });
  validate(data.terms, ({ value }) => value() ? null : { kind: 'mustAccept' });
});

@Component({
  selector: 'app-signup',
  imports: [Control],
  template: `
    <form (submit)="onSubmit($event)">
      <label>Email <input [control]="f.email" type="email" /></label>
      <label>Password <input [control]="f.password" type="password" /></label>
      <label>
        Account type 
        <select [control]="f.accountType">
          <option>Free</option><option>Pro</option><option>Enterprise</option>
        </select>
      </label>
      @if (data().accountType !== 'Free') {
        <label>Company name <input [control]="f.companyName" /></label>
      }
      @if (data().accountType === 'Enterprise') {
        <label>Seats <input [control]="f.seats" type="number" min="5" max="1000" /></label>
      }
      <label><input [control]="f.subscribe" type="checkbox" /> Subscribe to product updates</label>
      @if (data().subscribe) {
        <label>
          Frequency 
          <select [control]="f.frequency">
            <option>Daily</option><option>Weekly</option><option>Monthly</option>
          </select>
        </label>
      }
      <label><input [control]="f.terms" type="checkbox" /> I accept the terms of service</label>
      <button type="submit" [disabled]="!f().valid()">Sign up</button>
    </form>
  `,
})
export class SignupForm {
  data = signal<Signup>({
    email: '', password: '', accountType: 'Free', companyName: '',
    seats: null, subscribe: false, frequency: 'Daily', terms: false,
  });
  f = form(this.data, signupSchema);
  onSubmit(event: Event) { /* handle submit */ }
}

In summary, GolemUI provides a unified way to define form logic that remains consistent regardless of the frontend framework used to render it.