How somdevalex-code/sdui-kit works
SDUI Kit turns server-defined screen payloads into framework-native UI, with optional routing, query/cache, and form integrations. The primary workflow is: an application obtains a screen response, the core validates/interprets its schema, and a React or Vue adapter renders nodes through an application-provided component registry. User actions can then dispatch requests, navigation, or UI effects through configured adapters. The graph includes README-documented forms and routing capabilities even where implementation excerpts were unavailable; those links are omitted when wiring is not evidenced.
Main entry points: renderer.tsx React renderer · renderer.ts Vue renderer · actions.ts Action runner · validation.ts Payload validation
Components 23
Core runtime
- Screen payload
packages/core/src/types.ts - Payload validation
packages/core/src/validation.ts - Expressions
packages/core/src/expressions.ts - Component registry
packages/core/src/registry.ts - Action runner
packages/core/src/actions.ts - Runtime adapters
packages/core/src/adapters.ts - Screen state
packages/core/src/screen.ts
UI adapters
- React provider
packages/react/src/context.tsx - React renderer
packages/react/src/renderer.tsx - Vue provider
packages/vue/src/context.ts - Vue renderer
packages/vue/src/renderer.ts
Routing integrations
- Router helpers
packages/react-router/src/index.ts - Vue Router helpers
packages/vue-router/src/index.ts - TanStack Router helpers
packages/tanstack-router/src/index.ts - Next helpers
packages/next/src/index.ts - History helpers
packages/browser-history/src/index.ts
Data and forms
- Form state
packages/forms/src/formStore.ts - Query adapter
packages/tanstack-query/src/index.ts
Other components
- Host application
- Screen service
- Query cache
- Application router
- Application API
Connections 31
- Screen service → Screen payload: provides
- Host application → Query adapter: configures
- Query adapter → Screen service: loads screens
- Query adapter → Query cache: reads and writes
- Screen payload → Payload validation: validated by
- Payload validation → React renderer: validates payload
- Payload validation → Vue renderer: validates payload
- Host application → React provider: provides registry
- React provider → React renderer: supplies context
- React renderer → Component registry: resolves components
- Host application → Vue provider: provides registry
- Vue provider → Vue renderer: supplies context
- Vue renderer → Component registry: resolves components
- React renderer → Expressions: evaluates expressions
- Vue renderer → Expressions: evaluates expressions
- React renderer → Action runner: dispatches actions
- Vue renderer → Action runner: dispatches actions
- Action runner → Runtime adapters: uses adapters
- Host application → Runtime adapters: configures
- Screen state → Screen payload: stores screen
- Host application → Form state: uses form state
- Action runner → Application API: sends requests
- Host application → Router helpers: configures
- Host application → Vue Router helpers: configures
- Host application → TanStack Router helpers: configures
- Host application → Next helpers: configures
- Host application → History helpers: configures
- Router helpers → Application router: navigates
- Vue Router helpers → Application router: navigates
- Next helpers → Application router: navigates
- History helpers → Application router: updates history