JavaScript API

Control FG UI when your application needs it.

Most FG UI behaviour initialises automatically through fgui.js. Use the public API when your application injects dynamic content or needs direct control of supported stateful components.

1.2 Stable API

Two additive namespaces.

The existing 1.1 top-level API remains supported. 1.2 adds namespaced capabilities rather than replacing those methods.

1.2.0 Stable

FGUI.theme

register(theme), apply(name, options), clear(options), preview(name), clearPreview(), list(), get(root).

FGUI.reader

setTextSize(target, size, options), getTextSize(target), and the read-only sizes list.

Reader size values: small, normal, medium, large and xlarge.

Built with FG UI itself.

This page is built entirely with FG UI using the same components, layout primitives, icons and interactions available in the kit. No Bootstrap, Tailwind or external UI framework is required.

FGUI.init(root)

Initialise dynamic content

Initialise or normalise FG UI behaviour inside a document or newly injected root. Repeated calls are designed to be safe.

FGUI.init(document.querySelector('#ajax-content'));
FGUI.open(target)

Open stateful UI

Open supported overlays, modals, drawers, lightboxes, custom selects and applicable picker components.

FGUI.open('#settings-modal');
FGUI.close(target)

Close stateful UI

Close a supported FG UI stateful component.

FGUI.close('#settings-modal');
FGUI.toggle(target)

Toggle state

Toggle a supported component between open and closed states.

FGUI.toggle('#account-drawer');
FGUI.toast(message, options)

Create feedback

Create a temporary FG UI notification with optional detail, icon and duration.

FGUI.toast('Upload complete', {
  detail: 'Your file is ready.',
  icon: 'success-circle',
  duration: 4000
});
FGUI.icon(name, options)

Create an icon

Create an SVG element using the local FG UI icon sprite.

const icon = FGUI.icon('search');
Configuration & localisation

Configure strings without editing the runtime.

FGUI.configure(options)

Set runtime locale and generated UI strings.

FGUI.configure({
  locale: 'fr-FR',
  strings: {
    chooseDate: 'Choisir une date',
    noMatchingOptions: 'Aucune option correspondante'
  }
});

Read runtime state

FGUI.getLocale() returns the active runtime locale. FGUI.t(key, replacements, fallback) returns a configured generated-UI string.

FGUI.t('selectedCount', { count: 3 });
Core behaviour hooks

Markup and JavaScript stay aligned.

Interactive components use explicit data-fgui-* hooks. Use normal FG UI markup first, then call the API when application code needs to initialise or control dynamic content.

Common hooks

  • Gallery: data-fgui-gallery, stage and thumbnail hooks
  • Accordion: data-fgui-accordion-trigger
  • Reorder list: data-fgui-sortable
  • Repeatable field: data-fgui-repeatable
  • Hotspot: data-fgui-popover-target

Advanced form controls

  • Combobox hooks for root, input, panel and options
  • Dual range low and high input hooks
  • Character counter field and count hooks
  • Tree select trigger, panel and label hooks
Stable 1.2.0 contract

FG UI 1.2.0 preserves all 393 published 1.1 component-family roots and the existing nine public top-level JavaScript methods, while adding the theme and reader namespaces plus 64 backwards-compatible component families.