@alphinex/layout-builder

Embeddable, no-code configurator over @alphinex/layouts' <Shell> — toggle which slots are present, tune sidebar behavior, live-preview the composition, export as JSX or a serializable ShellConfig JSON.

Usage

import { LayoutBuilder } from "@alphinex/layout-builder";

function LayoutSettingsPage() {
  return (
    <LayoutBuilder
      onExport={(format, value) => {
        if (format === "json") {
          void saveLayoutConfig(JSON.parse(value));
        } else {
          void navigator.clipboard.writeText(value);
        }
      }}
    />
  );
}

useLayoutBuilder is the headless layer underneath, if you want a custom editing UI.

Scope: slot presence, not slot order

<Shell>'s geometry is fixed by design (header always top, rail/sidebar always the leading edge, footer always bottom — see packages/layouts/src/Shell/Shell.tsx). This builder toggles which slots exist and configures sidebar width/default-open behavior; it does not offer a drag-reorder axis, because <Shell> has no reorderable slot order to expose. A future <Shell> redesign that made slot position genuinely configurable would be the trigger to revisit this package's scope, not something to fake here with a builder UI implying a capability the underlying primitive doesn't have.

Known limitation: the preview reflects the real viewport, not the panel

<Shell>'s inline-sidebar-vs-drawer behavior is driven by useMediaQuery against the actual browser viewport width, not the preview panel's container width. On a wide browser window, the embedded preview may show the desktop (inline sidebar) layout even though the panel itself is narrow — the preview is accurate to what <Shell> will really do at that viewport width, not a resizable canvas.