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, the File Upload widgets need an upload transport, and 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 type { Dependencies, SanitizedHtml } from '@golemui/gui-shared';

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

Each widget that uses a dependency reads it at render time. If the widget needs a dependency you haven’t provided, it renders gracefully: the Markdown widget shows the editor but leaves the preview blank, and the File Upload widgets render a disabled box with an inline “not configured” message.

Wiring dependencies into your form

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

React

import snarkdown from 'snarkdown';
import { gui, type SanitizedHtml } 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) as SanitizedHtml },
    },
  },
};

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

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import snarkdown from 'snarkdown';
import { gui, type SanitizedHtml } 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) as SanitizedHtml },
      },
    },
  };
}

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import snarkdown from 'snarkdown';
import { gui, type SanitizedHtml } 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) as SanitizedHtml },
      },
    },
  };

  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, type SanitizedHtml } 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) as SanitizedHtml },
    },
  },
};
</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 type { SanitizedHtml } from '@golemui/gui-shared';
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) as SanitizedHtml },
  },
};

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

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import type { SanitizedHtml } from '@golemui/gui-shared';
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) as SanitizedHtml },
    },
  };
}

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import type { SanitizedHtml } from '@golemui/gui-shared';
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) as SanitizedHtml },
    },
  };

  override createRenderRoot() { return this; }

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

Vue

<script setup lang="ts">
import type { SanitizedHtml } from '@golemui/gui-shared';
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) as SanitizedHtml },
  },
};
</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) => SanitizedHtml }
uploadService	File Upload, Multi File Upload	{ upload(file, ctx) => Promise<unknown>; remove?(item) => Promise<void> }

See also

• Widgets Reference / Markdown — example with snarkdown.
• Widgets Reference / File Upload: the upload service contract and a fetch-based example.