GolemUI – Declarative Forms in React, Angular, Lit, Vue, and Vanilla JS

TL;DR

TL;DR: GolemUI lets you define forms as JSON schemas that render identically in React, Angular, Lit, Vue, and vanilla JS — with validation, conditional fields, i18n, and accessibility all driven from the schema.

Source and Accuracy Notes

⚠️ This section is MANDATORY. All links must be verified from actual source, not guessed.

• Project page: golemui.com ← visited and verified
• Source repository: github.com/golemui/golemui ← read README end-to-end
• License: MIT (verified via github.com/golemui/golemui/blob/main/LICENSE)
• HN launch thread: news.ycombinator.com/item?id=48748182 — 53 points
• Source last checked: 2026-07-11 (commit main, 90 GitHub stars)

What Is GolemUI?

Most form libraries tie your form logic to a specific UI framework. GolemUI breaks that coupling by treating form definitions as serializable JSON schemas that render across five different frontend ecosystems from a single source of truth.

The core promise, quoted verbatim from the README:

“Underneath every form is a serializable JSON definition. Author it directly as schema-validated JSON, or with the typed gui builder API.”

One JSON schema renders the same form in React, Angular, Lit, Vue, or as a web component — without any framework-specific fork of the form logic.

Setup Workflow

Install the packages

GolemUI ships as four co-versioned npm packages. Pick your framework:

# React
npm i @golemui/core @golemui/react @golemui/gui-react @golemui/gui-shared

# Angular
npm i @golemui/core @golemui/angular @golemui/gui-angular @golemui/gui-shared

# Lit
npm i @golemui/core @golemui/lit @golemui/gui-lit @golemui/gui-shared

# Vue
npm i @golemui/core @golemui/vue @golemui/gui-vue @golemui/gui-shared

# Vanilla JS (web component)
npm i @golemui/core @golemui/lit @golemui/gui-lit @golemui/gui-shared

Import component styles once in your app entry:

@import '@golemui/gui-components/index.css';

Define a form with the gui builder API

import '@golemui/gui-components/index.css';
import type { FormSubmitEvent } from '@golemui/core';
import { GuiForm } from '@golemui/gui-react';
import { gui } from '@golemui/gui-shared';

const formDef = [
  gui.inputs.textInput('email', {
    label: 'Email',
    validator: { type: 'string', required: true, format: 'email' },
  }),
  gui.inputs.password('password', {
    label: 'Password',
    validator: { type: 'string', required: true, minLength: 8 },
  }),
  gui.inputs.checkbox('newsletter', {
    label: 'Subscribe to the newsletter',
    include: { when: '!!$form.email' },
  }),
  gui.actions.button({
    label: 'Sign up',
    actionType: 'submit',
    disabled: { when: '$formIsInvalid' },
  }),
];

Render the form

<GuiForm
  definition={formDef}
  onSubmit={(e: FormSubmitEvent) => {
    console.log(e.data); // { email: string, password: string, newsletter: boolean }
  }}
/>

Because the form definition is just data, you can store it, transfer it over the wire, diff two versions, or generate it programmatically — something that is difficult to do cleanly with JSX-based form components.

Key Features

Cross-framework rendering — the same gui schema renders in React, Angular, Lit, Vue, or as a standalone web component without any changes.

Schema-driven validation — validators are declared in the schema itself, using a schema-validated JSON structure. No imperative validation logic scattered across components.

Conditional fields — use include: { when: '!!$form.email' } to show or hide fields based on other field values, expressed directly in the schema.

i18n and a11y — both are handled by the runtime based on schema metadata, not by patching individual framework components.

Plain data output — form submissions are plain objects, making it straightforward to store submissions, send them to an API, or process them in a serverless function.

Practical Evaluation Checklist

• [ ] Define a simple two-field form and render it in React and Vue from the same schema
• [ ] Add a conditional field that only appears when a checkbox is checked
• [ ] Add a string validator requiring minimum length
• [ ] Try the vanilla JS (web component) integration and confirm no framework dependency is needed
• [ ] Store a form definition in a database and restore it on page load

Security Notes

Form definitions are user-authored schemas executed in the browser. Review any user-supplied schema before rendering it server-side. Client-side, the gui builder API enforces type safety through TypeScript generics — audit the validator field if accepting schemas from untrusted sources.

FAQ

Q: Does GolemUI support custom input components? A: The schema supports conditional fields, buttons, text inputs, passwords, and checkboxes. For fully custom components, you extend the schema via the @golemui/core package — see the integration docs at golemui.com/integration/overview.

Q: How does this compare to react-jsonschema-form or Angular Reactive Forms? A: Those libraries are framework-specific. GolemUI’s differentiation is the cross-framework schema — one form definition works in all five supported frameworks without conversion. If your team uses multiple frameworks or is migrating between them, GolemUI avoids rewriting all your form logic.

Q: Is there a visual form builder? A: There is a community project called formstudio that provides a visual builder on top of the GolemUI ecosystem.

Q: What is the licensing model? A: GolemUI is MIT licensed, per the repository LICENSE file and npm registry metadata.

Conclusion

GolemUI solves the framework-lock problem for form-heavy applications. By treating form definitions as serializable JSON rather than framework-specific JSX, it lets you write form logic once and render it across React, Angular, Lit, Vue, or vanilla JS. The approach is clean for teams migrating between frameworks or maintaining multiple frontend codebases. The schema-driven validation and conditional field system keep the form logic declarative and portable.

If you want to try it, the quickest start is the React integration documented at golemui.com/getting-started/installation.