Skip to content
API Reference

@hua-labs/ui/sdui

v1.0.0

Server-Driven UI 렌더링 시스템. JSON으로 UI 정의, 컴포넌트 레지스트리로 렌더링.

Main Exports

import {
  // Renderer
  SDUIRenderer,          // Main SDUI renderer component

  // Registry
  defaultRegistry,       // Built-in component registry
  extendRegistry,        // Extend with custom components

  // Types
  type SDUINode,         // Single node definition
  type SDUIPageSchema,   // Full page schema
  type SDUICondition,    // Conditional rendering
  type SDUIEventHandler, // Event handler definition
  type ComponentRegistry,
} from '@hua-labs/ui/sdui';

SDUIRenderer

import { SDUIRenderer, defaultRegistry } from '@hua-labs/ui/sdui';

function Page({ schema }: { schema: SDUIPageSchema }) {
  return (
    <SDUIRenderer
      schema={schema}
      registry={defaultRegistry}
      data={{ user: currentUser }}
      onAction={handleAction}
    />
  );
}

SDUINode Type

interface SDUINode {
  type: string;                     // Component type
  props?: Record<string, unknown>;  // Component props
  children?: SDUINode[] | string;   // Children nodes or text
  key?: string;                     // Unique key for lists
  when?: SDUICondition;             // Conditional rendering
  on?: SDUIEventHandlers;           // Event handlers
}

Extend Registry

import { defaultRegistry, extendRegistry } from '@hua-labs/ui/sdui';

const customRegistry = extendRegistry({
  // Add custom components
  CustomCard: ({ title, children }) => (
    <div className="custom-card">
      <h3>{title}</h3>
      {children}
    </div>
  ),

  // Override existing
  Button: MyCustomButton,
});

<SDUIRenderer schema={schema} registry={customRegistry} />

Built-in Components

defaultRegistry에 포함된 컴포넌트

BoxFlexGridContainerSectionSpacerDividerTextH1H2H3H4LinkButtonBadgeAvatarSkeletonProgressInputTextareaLabelCheckboxSwitchCardCardHeaderCardTitleCardContentCardFooterAlertAccordionTabsHeroSectionHeaderImageIcon

Event Actions

// Supported action types
type ActionType =
  | "navigate"    // Navigate to page
  | "api"         // API call
  | "setState"    // Update context state
  | "openModal"   // Open modal
  | "closeModal"  // Close modal
  | "custom";     // Custom handler

// Example
{
  "type": "Button",
  "props": { "children": "Submit" },
  "on": {
    "click": {
      "type": "api",
      "payload": { "method": "POST", "endpoint": "/api/submit" }
    }
  }
}

Hue Editor

비주얼 SDUI 에디터 Hue가 개발 중이에요. 드래그앤드롭으로 UI를 만들고 JSON으로 내보낼 수 있어요.