Dependencies

Some widgets rely on third-party libraries that GolemUI deliberately doesn’t bundle — typically because the choice of library is opinionated. The Markdown widget needs a markdown parser; you might want to add others. Dependencies are how you supply those helpers to the engine.

The dependency contract

A dependency is a key/value pair in a Dependencies object. The key identifies what kind of helper it is (the widgets know which key to read); the value is the helper implementation.

import { Dependencies } from '@golemui/gui-shared';

const dependencies: Dependencies = {
  markdown: {
    parse: (md: string) => snarkdown(md),
  },
};

Each widget that uses a dependency reads it at render time. If the widget needs a dependency you haven’t provided, it renders gracefully (e.g. the Markdown widget shows the editor but leaves the preview blank).

Wiring dependencies into your form

In the Programmatic API, dependencies go inside formConfig.dependencies.

React

import snarkdown from 'snarkdown';
import { gui } from '@golemui/gui-shared';
import { GuiForm } from '@golemui/gui-react';

const config = {
  formDef: [gui.inputs.markdown('content')],
  formConfig: {
    dependencies: { markdown: { parse: (md: string) => snarkdown(md) } },
  },
};

export function MyForm() {
  return <GuiForm config={config} />;
}

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import snarkdown from 'snarkdown';
import { gui } from '@golemui/gui-shared';
import { FormComponent } from '@golemui/gui-angular';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyForm {
  protected config = {
    formDef: [gui.inputs.markdown('content')],
    formConfig: {
      dependencies: {
        markdown: { parse: (md: string) => snarkdown(md) },
      },
    },
  };
}

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import snarkdown from 'snarkdown';
import { gui } from '@golemui/gui-shared';
import '@golemui/gui-lit';

@customElement('my-form')
export class MyForm extends LitElement {
  config = {
    formDef: [gui.inputs.markdown('content')],
    formConfig: {
      dependencies: {
        markdown: { parse: (md: string) => snarkdown(md) },
      },
    },
  };

  override createRenderRoot() { return this; }

  override render() {
    return html`<gui-form .config=${this.config}></gui-form>`;
  }
}

Vue

<script setup lang="ts">
import snarkdown from 'snarkdown';
import { gui } from '@golemui/gui-shared';
import { GuiForm } from '@golemui/gui-vue';

const config = {
  formDef: [gui.inputs.markdown('content')],
  formConfig: {
    dependencies: { markdown: { parse: (md: string) => snarkdown(md) } },
  },
};
</script>

<template>
  <GuiForm :config="config" />
</template>

Vanilla JS

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';
import snarkdown from 'snarkdown';
import { gui } from '@golemui/gui-shared';

const form = document.getElementById('app-form');
form.config = {
  formDef: [gui.inputs.markdown('content')],
  formConfig: {
    dependencies: { markdown: { parse: (md) => snarkdown(md) } },
  },
};

In the JSON path, dependencies go into the dependencies property in the config object.

{
  "form": [{ "kind": "input", "type": "markdown", "path": "content" }]
}

React

import snarkdown from 'snarkdown';
import { GuiForm } from '@golemui/gui-react';
import formDef from './my-form.json';

const config = {
  formDef,
  dependencies: { markdown: { parse: (md: string) => snarkdown(md) } },
};

export function MyForm() {
  return <GuiForm config={config} />;
}

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import snarkdown from 'snarkdown';
import { FormComponent } from '@golemui/gui-angular';
import formDef from './my-form.json';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyForm {
  protected config = {
    formDef,
    dependencies: {
      markdown: { parse: (md: string) => snarkdown(md) },
    },
  };
}

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import snarkdown from 'snarkdown';
import '@golemui/gui-lit';
import formDef from './my-form.json';

@customElement('my-form')
export class MyForm extends LitElement {
  config = {
    formDef,
    dependencies: {
      markdown: { parse: (md: string) => snarkdown(md) },
    },
  };

  override createRenderRoot() { return this; }

  override render() {
    return html`<gui-form .config=${this.config}></gui-form>`;
  }
}

Vue

<script setup lang="ts">
import snarkdown from 'snarkdown';
import { GuiForm } from '@golemui/gui-vue';
import formDef from './my-form.json';

const config = {
  formDef,
  dependencies: { markdown: { parse: (md: string) => snarkdown(md) } },
};
</script>

<template>
  <GuiForm :config="config" />
</template>

Vanilla JS

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';
import snarkdown from 'snarkdown';
import formDef from './my-form.json';

const form = document.getElementById('app-form');
form.config = {
  formDef,
  dependencies: { markdown: { parse: (md) => snarkdown(md) } },
};

Available dependency keys

Key	Used by	Shape
markdown	Markdown, Markdown Text	{ parse: (md: string) => string }

See also

• Widgets Reference / Markdown — example with snarkdown.