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 Vanilla Components:

   Choose the framework you want to use for your project.

   React

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

   Angular

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

   Lit

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

2. Import the Vanilla Components styles:

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

   React

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

   Angular

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

   Lit

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

3. Create your first dynamic form:

   Create a component that renders a form using the FormComponent.

   React

   const vanillaFieldLoaders = { ...Vanilla.vanillaFieldLoaders };
   const formDef = defineForm({
     form: [{ uid: '', kind: 'control', widget: 'textinput', path: 'username' }],
   });
   const formData = { username: 'golemui' };
   
   export function FormPage() {
     return (
      <div>
       <React.FormComponent
         formDef={formDef}
         data={formData}
         fieldLoader={vanillaFieldLoaders}
       />
      </div>
     );
   }

   Angular

   @Component({
     imports: [CommonModule, Angular.FormComponent],
     selector: 'app-dynamic-form',
     template: `<gui-form
       [formDef]="formDef"
       [data]="formData"
       [fieldLoaders]="vanillaFieldLoaders"
     >
     </gui-form>`,
   })
   export class AppFormPage {
     protected formDef = defineForm({
       form: [{ uid: '', kind: 'control', widget: 'textinput', path: 'username' }],
     });
     protected formData = { username: 'golemui' };
     protected vanillaFieldLoaders = { ...Vanilla.vanillaFieldLoaders };
   }

   Lit

   @customElement('lit-form')
   export class FormElement extends LitElement {
     formDef = defineForm({
       form: [{ uid: '', kind: 'control', widget: 'textinput', path: 'username' }],
     });
     formData = { username: 'golemui' };
     vanillaFieldLoaders = { ...Vanilla.vanillaFieldLoaders };
   
     override createRenderRoot() {
       return this;
     }
   
     render() {
       return html`
         <div>
           <gui-form
             .formDef=${this.formDef}
             .data=${this.formData}
             .fieldLoaders=${this.vanillaFieldLoaders}
           ></gui-form>
         </div>
       `;
     }
   }

4. That’s it!

   You can now see your form rendered in the browser.