Getting Started

GolemUI is a blazing fast JavaScript library for building dynamic forms from JSON files or other data sources. It provides a Free and PRO set of UI components with support for React, Angular, Vue and Lit.

Create your first dynamic form

Creating a dynamic form has never been this easy.

1. Install GolemUI and the Golem Components:

   Choose the framework you want to use for your project.

   React

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

   Angular

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

   Lit

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

2. Import the Golem Components styles:

   You can load the CSS file directly in your HTML or import it in your Sass/CSS file.

   @import '@golemui/core/styles/index.css';

3. Create your first dynamic form:

   Create a component that renders a form using the FormComponent.

   Programmatic
   React

   const formDef = golemForm().create({
     form: [{ kind: 'input', type: 'textinput', path: 'username' }],
   });
   const formData = { username: 'golemui' };
   
   export function FormPage() {
     return (
      <div>
       <React.FormComponent
         formDef={formDef}
         data={formData}
         widgetLoaders={GuiReact.widgetLoaders}
       />
      </div>
     );
   }

   Angular

   @Component({
     imports: [CommonModule, Angular.FormComponent],
     selector: 'app-dynamic-form',
     template: `<gui-form
       [formDef]="formDef"
       [data]="formData"
       [customWidgetLoaders]="widgetLoaders"
     >
     </gui-form>`,
   })
   export class AppFormPage {
     protected formDef = golemForm().create({
       form: [{ kind: 'input', type: 'textinput', path: 'username' }],
     });
     protected formData = { username: 'golemui' };
     protected widgetLoaders = GuiAngular.widgetLoaders;
   }

   Lit

   @customElement('lit-form')
   export class FormElement extends LitElement {
     formDef = golemForm().create({
       form: [{ kind: 'input', type: 'textinput', path: 'username' }],
     });
     formData = { username: 'golemui' };
   
     override createRenderRoot() {
       return this;
     }
   
     render() {
       return html`
         <div>
           <gui-form
             .formDef=${this.formDef}
             .data=${this.formData}
             .customWidgetLoaders=${GuiLit.widgetLoaders}
           ></gui-form>
         </div>
       `;
     }
   }

   JSON

   Create a JSON file with your form definition:

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

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

4. That’s it!

   You can now see your form rendered in the browser.