# somdevalex-code/sdui-kit architecture

> Architecture diagram of the GitHub repository somdevalex-code/sdui-kit, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/somdevalex-code/sdui-kit
- Repository: https://github.com/somdevalex-code/sdui-kit

## Overview

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: [`packages/react/src/renderer.tsx`](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/react/src/renderer.tsx) (React renderer), [`packages/vue/src/renderer.ts`](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/vue/src/renderer.ts) (Vue renderer), [`packages/core/src/actions.ts`](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/actions.ts) (Action runner), [`packages/core/src/validation.ts`](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/validation.ts) (Payload validation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Core runtime"]
  node_payload["Screen payload<br/>[types.ts]"]
  node_validation["Payload validation<br/>[validation.ts]"]
  node_expressions["Expressions<br/>[expressions.ts]"]
  node_registry["Component registry<br/>[registry.ts]"]
  node_actions["Action runner<br/>[actions.ts]"]
  node_adapters["Runtime adapters<br/>[adapters.ts]"]
  node_screen["Screen state<br/>[screen.ts]"]
end

subgraph group_ui["UI adapters"]
  node_react["React provider<br/>[context.tsx]"]
  node_reactview["React renderer<br/>[renderer.tsx]"]
  node_vue["Vue provider<br/>[context.ts]"]
  node_vueview["Vue renderer<br/>[renderer.ts]"]
end

subgraph group_routing["Routing integrations"]
  node_routerhelpers["Router helpers<br/>[index.ts]"]
  node_vue_router["Vue Router helpers<br/>[index.ts]"]
  node_tanrouter["TanStack Router helpers<br/>[index.ts]"]
  node_nextrouter["Next helpers<br/>[index.ts]"]
  node_history["History helpers<br/>[index.ts]"]
end

subgraph group_data["Data and forms"]
  node_forms["Form state<br/>[formStore.ts]"]
  node_query["Query adapter<br/>[index.ts]"]
end

node_app(("Host application"))
node_server(("Screen service"))
node_querycache[("Query cache")]
node_router["Application router"]
node_api["Application API"]

node_server -->|"provides"| node_payload
node_app -.->|"configures"| node_query
node_query -->|"loads screens"| node_server
node_query -->|"reads and writes"| node_querycache
node_payload -->|"validated by"| node_validation
node_validation -.->|"validates payload"| node_reactview
node_validation -.->|"validates payload"| node_vueview
node_app -->|"provides registry"| node_react
node_react -->|"supplies context"| node_reactview
node_reactview -->|"resolves components"| node_registry
node_app -->|"provides registry"| node_vue
node_vue -->|"supplies context"| node_vueview
node_vueview -->|"resolves components"| node_registry
node_reactview -.->|"evaluates expressions"| node_expressions
node_vueview -.->|"evaluates expressions"| node_expressions
node_reactview -->|"dispatches actions"| node_actions
node_vueview -->|"dispatches actions"| node_actions
node_actions -->|"uses adapters"| node_adapters
node_app -->|"configures"| node_adapters
node_screen -.->|"stores screen"| node_payload
node_app -.->|"uses form state"| node_forms
node_actions -.->|"sends requests"| node_api
node_app -.->|"configures"| node_routerhelpers
node_app -.->|"configures"| node_vue_router
node_app -.->|"configures"| node_tanrouter
node_app -.->|"configures"| node_nextrouter
node_app -.->|"configures"| node_history
node_routerhelpers -->|"navigates"| node_router
node_vue_router -->|"navigates"| node_router
node_nextrouter -->|"navigates"| node_router
node_history -->|"updates history"| node_router

click node_payload "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/types.ts"
click node_validation "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/validation.ts"
click node_expressions "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/expressions.ts"
click node_registry "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/registry.ts"
click node_actions "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/actions.ts"
click node_adapters "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/adapters.ts"
click node_screen "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/screen.ts"
click node_react "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/react/src/context.tsx"
click node_reactview "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/react/src/renderer.tsx"
click node_vue "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/vue/src/context.ts"
click node_vueview "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/vue/src/renderer.ts"
click node_forms "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/forms/src/formStore.ts"
click node_query "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/tanstack-query/src/index.ts"
click node_routerhelpers "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/react-router/src/index.ts"
click node_vue_router "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/vue-router/src/index.ts"
click node_tanrouter "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/tanstack-router/src/index.ts"
click node_nextrouter "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/next/src/index.ts"
click node_history "https://github.com/somdevalex-code/sdui-kit/blob/main/packages/browser-history/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_payload,node_validation,node_expressions,node_registry,node_actions,node_adapters,node_screen,node_server toneBlue
class node_react,node_reactview,node_vue,node_vueview,node_querycache toneAmber
class node_routerhelpers,node_vue_router,node_tanrouter,node_nextrouter,node_history,node_router,node_api toneMint
class node_forms,node_query toneRose
class node_app toneIndigo
```

## Components

### Core runtime

- [Screen payload](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/types.ts): `packages/core/src/types.ts`
- [Payload validation](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/validation.ts): `packages/core/src/validation.ts`
- [Expressions](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/expressions.ts): `packages/core/src/expressions.ts`
- [Component registry](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/registry.ts): `packages/core/src/registry.ts`
- [Action runner](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/actions.ts): `packages/core/src/actions.ts`
- [Runtime adapters](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/adapters.ts): `packages/core/src/adapters.ts`
- [Screen state](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/core/src/screen.ts): `packages/core/src/screen.ts`

### UI adapters

- [React provider](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/react/src/context.tsx): `packages/react/src/context.tsx`
- [React renderer](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/react/src/renderer.tsx): `packages/react/src/renderer.tsx`
- [Vue provider](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/vue/src/context.ts): `packages/vue/src/context.ts`
- [Vue renderer](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/vue/src/renderer.ts): `packages/vue/src/renderer.ts`

### Routing integrations

- [Router helpers](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/react-router/src/index.ts): `packages/react-router/src/index.ts`
- [Vue Router helpers](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/vue-router/src/index.ts): `packages/vue-router/src/index.ts`
- [TanStack Router helpers](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/tanstack-router/src/index.ts): `packages/tanstack-router/src/index.ts`
- [Next helpers](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/next/src/index.ts): `packages/next/src/index.ts`
- [History helpers](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/browser-history/src/index.ts): `packages/browser-history/src/index.ts`

### Data and forms

- [Form state](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/forms/src/formStore.ts): `packages/forms/src/formStore.ts`
- [Query adapter](https://github.com/somdevalex-code/sdui-kit/blob/main/packages/tanstack-query/src/index.ts): `packages/tanstack-query/src/index.ts`

### Other components

- **Host application**
- **Screen service**
- **Query cache**
- **Application router**
- **Application API**

## Connections

- 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