> For the complete documentation index, see [llms.txt](https://jsf.gitbook.io/jsf/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jsf.gitbook.io/jsf/setup-1.md).

# Setup

## Install JSF packages

{% tabs %}
{% tab title="NPM" %}

```bash
$ npm i @kalmia/jsf-app \
        @kalmia/jsf-common-es2015 \
        @kalmia/cdk \
        @kalmia/material
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
If you don't need support for ES5 you can also use \``@kalmia/jsf-common`\` package transpiled into ES6.
{% endhint %}

### Add peer dependencies

{% tabs %}
{% tab title="NPM" %}

```bash
$ npm i angulartics2 \
        ngx-monaco-editor \
        bowser \
        angular-gridster2 \
        overlayscrollbars \
        overlayscrollbars-ngx \
        @juggle/resize-observer \
        @swimlane/dragula \
        @swimlane/ngx-dnd \
        @types/dragula \
        @angular/material-moment-adapter
```

{% endtab %}
{% endtabs %}

### Example

{% tabs %}
{% tab title="component.html" %}

```markup
  <jsf-kal-jsf-doc
    [doc]="jsfDoc"
    [enableThemeRender]="true"
    [onError]="jsfError"
    [onFormBuilderCreated]="formBuilderCreated"
  ></jsf-kal-jsf-doc>
  
  <h2>JSON output</h2>
  <code><pre>{{ value | json }}</pre></code>
```

{% endtab %}

{% tab title="component.ts" %}

```typescript
import { Bind, JsfBuilder, JsfDefinition } from '@kalmia/jsf-common-es2015';
import { demoJsfDoc }    from './demo.jsf';

export class Component {

  jsfDoc: JsfDefinition = demoJsfDoc;

  builder: JsfBuilder;

  get value() {
    return this.builder?.getJsonValue();
  }

  @Bind()
  public formBuilderCreated(builder: JsfBuilder) {
    this.builder = builder;
  }

  @Bind()
  public jsfError(e: any) {
    console.error(e);
  }
}

```

{% endtab %}

{% tab title="demo.jsf.ts" %}

```typescript
import { JsfDefinition } from '@kalmia/jsf-common-es2015';

export const demoJsfDoc: JsfDefinition = {
  schema: {
    type      : 'object',
    properties: {
      username: {
        type     : 'string',
        title    : 'Username',
        maxLength: 8,
        required : true,
        handler: {
          type  : 'common/dropdown',
          values: [
            { value: 'value1', label: 'Value 1' },
            { value: 'value2', label: 'Value 2' },
            { value: 'value3', label: 'Value 3' },
            { value: 'value4', label: 'Value 4' },
            { value: 'value5', label: 'Value 5' }
          ]
        }
      },
      age     : {
        type   : 'integer',
        title  : 'Age',
        minimum: 0
      }
    }
  },
  layout: {
    type : 'div',
    items: [
      { type: 'heading', level: 2, title: 'Hello world!' },
      { type: 'hr' },
      {
        type : 'row',
        items: [
          { type: 'col', sm: 6, items: [{ key: 'username' }] },
          { type: 'col', sm: 6, items: [{ key: 'age' }] },
        ]
      },
      {
        type   : 'button',
        title  : 'Say hi',
        onClick: [
          {
            $eval: `
               if ($val.username) {
                  alert("Hello " + $val.username)
               }  else {
                  alert("Please enter username!")
               }`
          } as any
        ]
      }
    ]
  }
};

```

{% endtab %}

{% tab title="app.module.ts" %}

```typescript
@NgModule({
  declarations: [ ... ],
  imports     : [
     ...,
     JsfModule
  ],
  providers   : [
    {
      provide : JSF_APP_CONFIG,
      useValue: <JsfAppConfig>{
        themePath             : 'src/jsf-themes/',
        handlersPath          : 'src/jsf-handlers/',
        alwaysRenderCdkOverlay: true
      }
    },
    {
      provide : JSF_RUNTIME_CONTEXT,
      useValue: <JsfRuntimeContext>{
        application: {
          language: 'en'
        }
      }
    },
    {
      provide    : JSF_API_SERVICE,
      useExisting: ApiService
    },
    {
      provide    : JSF_APP_ROUTER,
      useExisting: AppRouterService
    },
    {
      provide    : JSF_APP_PAGE_DATA,
      useExisting: AppPageDataService
    },
    {
      provide : JSF_DEVELOPMENT_MODE,
      useValue: false
    }
  ],
  bootstrap   : [ ... ]
})
export class AppModule {}
```

{% endtab %}
{% endtabs %}