패키지 목록hue
hueSDUI Editor
WIP
Visual Editor
JSON Schema
Server-Driven UI 비주얼 에디터. 드래그 앤 드롭으로 UI를 만들고 JSON 스키마로 내보내기.
375px
768px
Full
$pnpm dev --filter=hue
주요 기능
드래그 앤 드롭
컴포넌트를 드래그해서 캔버스에 배치
컴포넌트 트리
레이어 구조 시각화 및 관리
자동 저장
변경사항 자동 저장 (1초 디바운스)
Undo/Redo
히스토리 기반 실행 취소/다시 실행
반응형 프리뷰
Mobile, Tablet, Desktop 뷰포트
액션 시스템
네비게이션, API, 상태 관리, 토스트
컴포넌트 카테고리
Layout
BoxFlexGridStackContainerDividerTypography
TextHeadingParagraphLinkForm
InputButtonCheckboxSelectSwitchTextareaDisplay
ImageIconAvatarBadgeCardFeedback
AlertProgressSkeletonSpinner액션 시스템
컴포넌트에 이벤트 핸들러를 연결하여 인터랙션을 정의합니다. onClick, onSubmit, onChange 등의 이벤트를 지원합니다.
| Action | 설명 |
|---|---|
| navigate | 페이지 이동 (내부/외부) |
| api | API 호출 (GET, POST, PUT, DELETE) |
| setState | 컨텍스트 상태 업데이트 |
| toast | 토스트 알림 표시 |
| modal | 모달 열기/닫기 |
| analytics | 분석 이벤트 전송 |
| custom | 커스텀 핸들러 실행 |
JSON 스키마 예시
json
{
"type": "Flex",
"key": "root",
"props": {
"direction": "column",
"gap": "md",
"padding": "lg"
},
"children": [
{
"type": "Heading",
"key": "title",
"props": { "level": 1 },
"children": "Welcome to HUE"
},
{
"type": "Text",
"key": "desc",
"props": { "color": "muted" },
"children": "Server-Driven UI Editor"
},
{
"type": "Button",
"key": "cta",
"props": { "variant": "primary" },
"children": "Get Started",
"actions": {
"onClick": [{
"id": "nav-1",
"type": "navigate",
"config": { "path": "/editor" }
}]
}
}
]
}단축키
Edit ModeE
Preview ModeP
Exit PreviewEsc
UndoCtrl+Z
RedoCtrl+Shift+Z
아키텍처
bash
apps/hue/
├── app/
│ └── page.tsx # 메인 에디터 페이지
├── components/
│ ├── editor/ # Canvas, PreviewCanvas
│ ├── panels/ # ComponentPalette, PropertiesPanel, ...
│ ├── toolbar/ # EditorToolbar
│ └── properties/ # ActionEditor
├── store/
│ ├── editor-store.ts # 에디터 상태 (선택, 드래그, 뷰포트)
│ ├── project-store.ts # 프로젝트 관리 (저장, 로드)
│ ├── history-store.ts # Undo/Redo 히스토리
│ ├── context-store.ts # 런타임 컨텍스트
│ └── template-store.ts # 템플릿 관리
├── lib/
│ ├── action-engine.ts # 액션 실행 엔진
│ ├── code-generator.ts # React 코드 생성
│ └── ai-service.ts # AI 서비스 (준비중)
└── types/
└── editor.ts # 타입 정의