Installation

GolemUI is a blazing fast JavaScript library for building dynamic forms from JSON files. It provides a free set of UI widgets with support for React, Angular, Lit, Vue, and Vanilla JS.

New to GolemUI? GolemUI in five claims explains the design decisions behind it, each with working code.

This guide walks you from an empty directory to a rendered form in five steps.

Want to skip ahead?

Grab a ready-to-run starter for your framework — no scaffolding, no manual install. Starting with server-side rendering? Jump to the server-side rendering starters below.

React

npx degit golemui/golemui/templates/react my-app
cd my-app && npm install && npm start

Or open it in StackBlitz.

Angular

npx degit golemui/golemui/templates/angular my-app
cd my-app && npm install && npm start

Or open it in StackBlitz.

Lit

npx degit golemui/golemui/templates/lit my-app
cd my-app && npm install && npm start

Or open it in StackBlitz.

Vue

npx degit golemui/golemui/templates/vue my-app
cd my-app && npm install && npm start

Or open it in StackBlitz.

Vanilla JS

npx degit golemui/golemui/templates/js my-app
cd my-app && npm install && npm start

Or open it in StackBlitz.

1. Scaffold a new project

   Use Vite (or your favourite scaffolder) to create a fresh project for your framework. For example, with Vite:

   React

   npm create vite@latest my-form -- --template react-ts
   cd my-form && npm install

   Angular

   npx @angular/cli new my-form
   cd my-form

   Lit

   npm create vite@latest my-form -- --template lit-ts
   cd my-form && npm install

   Vue

   npm create vite@latest my-form -- --template vue-ts
   cd my-form && npm install

   Vanilla JS

   npm create vite@latest my-form -- --template vanilla
   cd my-form && npm install

2. Install GolemUI and the Golem Widgets

   Install @golemui/core, @golemui/gui-shared, and the .

   React

   npm i @golemui/core @golemui/gui-shared @golemui/react @golemui/gui-react @golemui/gui-components --save

   Angular

   npm i @golemui/core @golemui/gui-shared @golemui/angular @golemui/gui-angular @golemui/gui-components --save

   Lit

   npm i @golemui/core @golemui/gui-shared @golemui/lit @golemui/gui-lit @golemui/gui-components --save

   Vue

   npm i @golemui/core @golemui/gui-shared @golemui/vue @golemui/gui-vue @golemui/gui-components --save

   Vanilla JS

   npm i @golemui/core @golemui/gui-shared @golemui/lit @golemui/gui-lit @golemui/gui-components --save

   @golemui/gui-components is listed because the next step imports its stylesheet, and package managers stricter than npm (pnpm, Yarn Plug’n’Play) only resolve packages your project declares. The adapter pulls in @golemui/gui-validators as a peer dependency, and you won’t import from it directly.

3. Import the Golem Widgets styles

   Load the CSS file directly in your HTML or import it in your Sass/CSS file.

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

4. Define a form and render it

   The easiest way to define a form is through the Programmatic API, using an array of gui.* shortcuts. Alternatively, the same form can be defined using the JSON API if you prefer.

   Tip

   Toggle the top-right dropdown to switch between JSON and Programmatic API examples.
   React

   import { gui } from '@golemui/gui-shared';
   import { GuiForm } from '@golemui/gui-react';
   
   const formDef = [gui.inputs.textInput('username')];
   const formData = { username: 'golemui' };
   const config = { formDef, data: formData };
   
   export function FormPage() {
     return (
       <div>
         <GuiForm config={config} />
       </div>
     );
   }

   Angular

   import { Component } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { gui } from '@golemui/gui-shared';
   import { FormComponent } from '@golemui/gui-angular';
   
   @Component({
     imports: [CommonModule, FormComponent],
     selector: 'app-dynamic-form',
     template: `<gui-form [config]="config"></gui-form>`,
   })
   export class AppFormPage {
     protected config = {
       formDef: [gui.inputs.textInput('username')],
       data: { username: 'golemui' },
     };
   }

   Lit

   import { LitElement, html } from 'lit';
   import { customElement } from 'lit/decorators.js';
   import { gui } from '@golemui/gui-shared';
   import '@golemui/gui-lit';
   
   @customElement('lit-form')
   export class FormElement extends LitElement {
     config = {
       formDef: [gui.inputs.textInput('username')],
       data: { username: 'golemui' },
     };
   
     override createRenderRoot() {
       return this;
     }
   
     render() {
       return html`<gui-form .config=${this.config}></gui-form>`;
     }
   }

   Vue

   <script setup lang="ts">
   import { gui } from '@golemui/gui-shared';
   import { GuiForm } from '@golemui/gui-vue';
   
   const formDef = [gui.inputs.textInput('username')];
   const formData = { username: 'golemui' };
   const config = { formDef, data: formData };
   </script>
   
   <template>
     <div>
       <GuiForm :config="config" />
     </div>
   </template>

   Vanilla JS

   index.html

   <gui-form id="app-form"></gui-form>
   <script type="module" src="/src/main.js"></script>

   src/main.js

   import '@golemui/gui-components/index.css';
   import '@golemui/gui-lit';
   import { gui } from '@golemui/gui-shared';
   
   const formDef = [gui.inputs.textInput('username')];
   const formData = { username: 'golemui' };
   
   const form = document.getElementById('app-form');
   form.config = { formDef, data: formData };

   Create a JSON file with your form definition and pass it to the form component:

   {
     "form": [
       { "kind": "input", "type": "textinput", "path": "username" }
     ]
   }

   Then load and render it in your framework. See the Integration section for framework-specific setup.

5. That’s it

   Run your dev server and you’ll see your form rendered in the browser.

Server-side rendering starters

Want the form in the HTML before any JavaScript runs? GolemUI ships a starter for each meta-framework it was verified with: Next.js for React, Analog for Angular, Astro for Lit, and Nuxt for Vue. Each one renders the same five-field signup form on the server, with conditional fields, cascading options and a custom item renderer.

React

npx degit golemui/golemui/templates/nextjs my-app
cd my-app && npm install && npm start

Next.js 15 with the App Router, React 19. Node.js 18.18 or newer. Or open it in StackBlitz.

Angular

npx degit golemui/golemui/templates/analog my-app
cd my-app && npm install && npm start

Analog 2, Angular 21, zoneless. Node.js 22.12 or newer. Or open it in StackBlitz.

Lit

npx degit golemui/golemui/templates/astro my-app
cd my-app && npm install && npm start

Astro 7, Lit 3. The only starter that renders the widget internals on the server. Node.js 22.12 or newer. Or open it in StackBlitz.

Vue

npx degit golemui/golemui/templates/nuxt my-app
cd my-app && npm install && npm start

Nuxt 4, Vue 3.5. Node.js 22.12 or newer. Or open it in StackBlitz.

Vanilla JS

npx degit golemui/golemui/templates/astro my-app
cd my-app && npm install && npm start

A page with no framework renders through the Lit widget set, so the Astro starter is the one to take: Astro 7, Lit 3, Node.js 22.12 or newer. Or open it in StackBlitz.

View the page source once the app runs: the form markup arrives without JavaScript. Then read the Server-Side Rendering Overview for the rules every host shares (preloading the widgets, formName, what the server sends) and the guide for your host: Next.js, Analog, Astro or Nuxt. Server-side rendering requires GolemUI 1.5.0 or newer.

Next steps

Ready for something more substantial? Walk through the Rent a Car form tutorial, where you’ll build a real, multi-field form with conditional logic, custom item renderers, async data loading, and form submission.

For framework-specific configuration (React, Angular, Lit, Vue), see the Integration section. For server-side rendering (Next.js, Analog, Astro, Nuxt, or your own Node server), see Server-Side Rendering.