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.

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:

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 --save

   Angular

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

   Lit

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

   Vue

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

   Vanilla JS

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

   The adapter still pulls in @golemui/gui-components and @golemui/gui-validators as peer dependencies — you won’t import from those 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.

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.