RequireJS (AMD) — Strelit UI Kit

📜 Archival Guide & Modern Standard

RequireJS and AMD modules represent legacy asynchronous module loading patterns. For modern web applications, we strongly recommend using native ES Modules (ESM) with standard bundlers like Vite, Webpack 5, or Rollup. See our

Vite & TypeScript Starter Tutorial

For legacy enterprise codebases that still employ AMD / RequireJS or UMD bundles, Strelit Layout can be loaded as an AMD module.

Dependency Setup

Unlike legacy GoldenLayout v1, modern Strelit UI Kit has zero jQuery dependency. Configure RequireJS paths to point to your UMD or AMD bundle:

requirejs.config({
  baseUrl: '../js',
  paths: {
    strelit: 'lib/strelit',
  },
});

Layout Instantiation

Require Strelit Layout and instantiate your workspace using the modern 2-step instantiation pattern:

require(['strelit'], function (strelitModule) {
  var StrelitLayout = strelitModule.StrelitLayout || strelitModule;
  var containerElement = document.getElementById('layoutContainer');

  // 1. Instantiate with DOM container
  var layout = new StrelitLayout(containerElement);

  // 2. Register component factory function
  layout.registerComponentFactoryFunction('testComponent', function (container, state) {
    container.element.innerHTML = '<div class="p-4"><h3>' + (state.title || 'Item') + '</h3></div>';
  });

  // 3. Load modern LayoutConfig with root item
  layout.loadLayout({
    root: {
      type: 'row',
      content: [
        {
          type: 'component',
          componentType: 'testComponent',
          componentState: { title: 'First Item' },
        },
        {
          type: 'component',
          componentType: 'testComponent',
          componentState: { title: 'Second Item' },
        },
      ],
    },
  });
});