# vobsjs/vobs architecture

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

- Interactive diagram: https://gitdiagram.com/vobsjs/vobs
- Repository: https://github.com/vobsjs/vobs

## Overview

vobs is a signal-first TypeScript UI framework and a broad set of companion application packages. Its main workflow compiles JSX into targeted runtime bindings, creates and mounts an app through the umbrella entry, and updates DOM bindings through signals rather than component rerenders. The packages also provide routing, server rendering, data and auth services, UI composition, and developer diagnostics. Links for unsampled packages reflect README descriptions; source-level wiring is included only where shown. The playground demonstrates integration, not the framework’s production runtime.

Main entry points: [`playground/basic/src/router.ts`](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/router.ts) (Example routes), [`packages/vobs/src/app.ts`](https://github.com/vobsjs/vobs/blob/main/packages/vobs/src/app.ts) (App lifecycle), [`playground/basic/src/main.ts`](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/main.ts) (Example app startup), [`packages/router/src`](https://github.com/vobsjs/vobs/tree/main/packages/router/src) (Routing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Framework Core"]
  node_app["App lifecycle<br/>[app.ts]"]
  node_reactivity["Signals and effects"]
  node_runtime["DOM runtime ops<br/>[ops.ts]"]
  node_hmr["Hot reload<br/>[hmr.ts]"]
  node_dom["DOM renderer"]
  node_ssr["SSR and hydration"]
end

subgraph group_build["Compilation and Rendering"]
  node_compiler["JSX compiler<br/>[compile.ts]"]
  node_vite["Vite integration"]
end

subgraph group_data["App Services"]
  node_router["Routing"]
  node_resource["Async resources"]
  node_http["HTTP and streams<br/>[index.ts]"]
  node_auth["Auth and JWT<br/>[index.ts]"]
  node_storage["Storage and sync"]
  node_queue["Task queue"]
  node_payments["Payment adapters"]
  node_upload["Uploads"]
end

subgraph group_ui["UI and Diagnostics"]
  node_forms["Forms and validation"]
  node_kit["App composition kit"]
  node_widgets["UI and layout"]
  node_table["Data tables"]
  node_devtools["Debug instrumentation<br/>[index.ts]"]
  node_devpanel["Devtools panel<br/>[panel.tsx]"]
end

subgraph group_demo["Playground"]
  node_playground["Example app startup<br/>[main.ts]"]
  node_demo_router["Example routes<br/>[router.ts]"]
  node_demo_app["Example app view<br/>[App.tsx]"]
  node_demo_theme["Theme plugin<br/>[theme.ts]"]
  node_demo_storage["Storage plugin<br/>[storage.ts]"]
  node_demo_login["Login example<br/>[LoginPage.tsx]"]
  node_demo_captcha["Captcha example<br/>[CaptchaPage.tsx]"]
  node_demo_async["Async example<br/>[AsyncPage.tsx]"]
  node_demo_data["Data example<br/>[DataPage.tsx]"]
  node_demo_payment["Payment example<br/>[PaymentPage.tsx]"]
  node_demo_resource_table["Resource table example"]
end

node_developer(("App developer"))

node_developer -->|"configures build"| node_vite
node_vite -->|"transforms TSX"| node_compiler
node_compiler -->|"emits bindings"| node_runtime
node_developer -->|"creates app"| node_app
node_app -->|"creates owner"| node_reactivity
node_app -->|"creates renderer"| node_dom
node_app -->|"sets renderer and inserts"| node_runtime
node_runtime -->|"tracks owner"| node_reactivity
node_app -.->|"supports hot reload"| node_hmr
node_app -.->|"supports hydration"| node_ssr
node_developer -.->|"configures routes"| node_router
node_router -.->|"supports route data"| node_resource
node_developer -.->|"makes requests"| node_http
node_developer -.->|"manages sessions"| node_auth
node_developer -.->|"stores client state"| node_storage
node_developer -.->|"enqueues tasks"| node_queue
node_developer -.->|"integrates payments"| node_payments
node_developer -.->|"uploads files"| node_upload
node_developer -.->|"builds forms"| node_forms
node_developer -.->|"composes app UI"| node_kit
node_kit -.->|"composes components"| node_widgets
node_kit -.->|"composes tables"| node_table
node_developer -.->|"inspects runtime"| node_devtools
node_devpanel -->|"reads snapshots"| node_devtools
node_playground -->|"creates and mounts"| node_app
node_playground -->|"renders"| node_demo_app
node_playground -->|"installs router"| node_demo_router
node_demo_app -->|"renders RouterView"| node_router
node_demo_app -->|"renders widget"| node_devpanel
node_demo_router -->|"creates router"| node_router
node_demo_router -->|"registers resource router"| node_resource
node_demo_router -->|"routes to"| node_demo_login
node_demo_router -->|"routes to"| node_demo_captcha
node_demo_router -->|"routes to"| node_demo_async
node_demo_router -->|"routes to"| node_demo_data
node_demo_router -->|"routes to"| node_demo_payment
node_demo_router -->|"routes to"| node_demo_resource_table
node_playground -->|"installs plugin"| node_demo_theme
node_playground -->|"installs plugin"| node_demo_storage
node_demo_storage -->|"configures storage"| node_storage

click node_compiler "https://github.com/vobsjs/vobs/blob/main/packages/compiler/src/compile.ts"
click node_vite "https://github.com/vobsjs/vobs/tree/main/packages/vite-plugin/src"
click node_app "https://github.com/vobsjs/vobs/blob/main/packages/vobs/src/app.ts"
click node_reactivity "https://github.com/vobsjs/vobs/tree/main/packages/reactivity/src"
click node_runtime "https://github.com/vobsjs/vobs/blob/main/packages/runtime/src/ops.ts"
click node_hmr "https://github.com/vobsjs/vobs/blob/main/packages/runtime/src/hmr.ts"
click node_dom "https://github.com/vobsjs/vobs/tree/main/packages/dom/src"
click node_ssr "https://github.com/vobsjs/vobs/tree/main/packages/ssr/src"
click node_router "https://github.com/vobsjs/vobs/tree/main/packages/router/src"
click node_resource "https://github.com/vobsjs/vobs/tree/main/packages/resource/src"
click node_http "https://github.com/vobsjs/vobs/blob/main/packages/http/src/index.ts"
click node_auth "https://github.com/vobsjs/vobs/blob/main/packages/auth/src/index.ts"
click node_storage "https://github.com/vobsjs/vobs/tree/main/packages/storage/src"
click node_queue "https://github.com/vobsjs/vobs/tree/main/packages/queue/src"
click node_payments "https://github.com/vobsjs/vobs/tree/main/packages/payment/src"
click node_upload "https://github.com/vobsjs/vobs/tree/main/packages/upload/src"
click node_forms "https://github.com/vobsjs/vobs/tree/main/packages/forms/src"
click node_kit "https://github.com/vobsjs/vobs/tree/main/packages/kit/src"
click node_widgets "https://github.com/vobsjs/vobs/tree/main/packages/ui/src"
click node_table "https://github.com/vobsjs/vobs/tree/main/packages/table/src"
click node_devtools "https://github.com/vobsjs/vobs/blob/main/packages/devtools/src/index.ts"
click node_devpanel "https://github.com/vobsjs/vobs/blob/main/packages/devtools-ui/src/panel.tsx"
click node_playground "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/main.ts"
click node_demo_router "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/router.ts"
click node_demo_app "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/App.tsx"
click node_demo_theme "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/plugins/theme.ts"
click node_demo_storage "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/plugins/storage.ts"
click node_demo_login "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/auth/LoginPage.tsx"
click node_demo_captcha "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/captcha/CaptchaPage.tsx"
click node_demo_async "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/async/AsyncPage.tsx"
click node_demo_data "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/data/DataPage.tsx"
click node_demo_payment "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/payment/PaymentPage.tsx"
click node_demo_resource_table "https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/users/ResourceTablePage.tsx"

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_app,node_reactivity,node_runtime,node_hmr,node_dom,node_ssr toneBlue
class node_compiler,node_vite toneAmber
class node_router,node_resource,node_http,node_auth,node_storage,node_queue,node_payments,node_upload toneMint
class node_forms,node_kit,node_widgets,node_table,node_devtools,node_devpanel toneRose
class node_playground,node_demo_router,node_demo_app,node_demo_theme,node_demo_storage,node_demo_login,node_demo_captcha,node_demo_async,node_demo_data,node_demo_payment,node_demo_resource_table,node_developer toneIndigo
```

## Components

### Framework Core

- [App lifecycle](https://github.com/vobsjs/vobs/blob/main/packages/vobs/src/app.ts): `packages/vobs/src/app.ts`
- [Signals and effects](https://github.com/vobsjs/vobs/tree/main/packages/reactivity/src): `packages/reactivity/src`
- [DOM runtime ops](https://github.com/vobsjs/vobs/blob/main/packages/runtime/src/ops.ts): `packages/runtime/src/ops.ts`
- [Hot reload](https://github.com/vobsjs/vobs/blob/main/packages/runtime/src/hmr.ts): `packages/runtime/src/hmr.ts`
- [DOM renderer](https://github.com/vobsjs/vobs/tree/main/packages/dom/src): `packages/dom/src`
- [SSR and hydration](https://github.com/vobsjs/vobs/tree/main/packages/ssr/src): `packages/ssr/src`

### Compilation and Rendering

- [JSX compiler](https://github.com/vobsjs/vobs/blob/main/packages/compiler/src/compile.ts): `packages/compiler/src/compile.ts`
- [Vite integration](https://github.com/vobsjs/vobs/tree/main/packages/vite-plugin/src): `packages/vite-plugin/src`

### App Services

- [Routing](https://github.com/vobsjs/vobs/tree/main/packages/router/src): `packages/router/src`
- [Async resources](https://github.com/vobsjs/vobs/tree/main/packages/resource/src): `packages/resource/src`
- [HTTP and streams](https://github.com/vobsjs/vobs/blob/main/packages/http/src/index.ts): `packages/http/src/index.ts`
- [Auth and JWT](https://github.com/vobsjs/vobs/blob/main/packages/auth/src/index.ts): `packages/auth/src/index.ts`
- [Storage and sync](https://github.com/vobsjs/vobs/tree/main/packages/storage/src): `packages/storage/src`
- [Task queue](https://github.com/vobsjs/vobs/tree/main/packages/queue/src): `packages/queue/src`
- [Payment adapters](https://github.com/vobsjs/vobs/tree/main/packages/payment/src): `packages/payment/src`
- [Uploads](https://github.com/vobsjs/vobs/tree/main/packages/upload/src): `packages/upload/src`

### UI and Diagnostics

- [Forms and validation](https://github.com/vobsjs/vobs/tree/main/packages/forms/src): `packages/forms/src`
- [App composition kit](https://github.com/vobsjs/vobs/tree/main/packages/kit/src): `packages/kit/src`
- [UI and layout](https://github.com/vobsjs/vobs/tree/main/packages/ui/src): `packages/ui/src`
- [Data tables](https://github.com/vobsjs/vobs/tree/main/packages/table/src): `packages/table/src`
- [Debug instrumentation](https://github.com/vobsjs/vobs/blob/main/packages/devtools/src/index.ts): `packages/devtools/src/index.ts`
- [Devtools panel](https://github.com/vobsjs/vobs/blob/main/packages/devtools-ui/src/panel.tsx): `packages/devtools-ui/src/panel.tsx`

### Playground

- [Example app startup](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/main.ts): `playground/basic/src/main.ts`
- [Example routes](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/router.ts): `playground/basic/src/router.ts`
- [Example app view](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/App.tsx): `playground/basic/src/App.tsx`
- [Theme plugin](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/plugins/theme.ts): `playground/basic/src/plugins/theme.ts`
- [Storage plugin](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/plugins/storage.ts): `playground/basic/src/plugins/storage.ts`
- [Login example](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/auth/LoginPage.tsx): `playground/basic/src/pages/auth/LoginPage.tsx`
- [Captcha example](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/captcha/CaptchaPage.tsx): `playground/basic/src/pages/captcha/CaptchaPage.tsx`
- [Async example](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/async/AsyncPage.tsx): `playground/basic/src/pages/async/AsyncPage.tsx`
- [Data example](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/data/DataPage.tsx): `playground/basic/src/pages/data/DataPage.tsx`
- [Payment example](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/payment/PaymentPage.tsx): `playground/basic/src/pages/payment/PaymentPage.tsx`
- [Resource table example](https://github.com/vobsjs/vobs/blob/main/playground/basic/src/pages/users/ResourceTablePage.tsx): `playground/basic/src/pages/users/ResourceTablePage.tsx`

### Other components

- **App developer**

## Connections

- App developer → Vite integration: configures build
- Vite integration → JSX compiler: transforms TSX
- JSX compiler → DOM runtime ops: emits bindings
- App developer → App lifecycle: creates app
- App lifecycle → Signals and effects: creates owner (evidence: `packages/vobs/src/app.ts`)
- App lifecycle → DOM renderer: creates renderer (evidence: `packages/vobs/src/app.ts`)
- App lifecycle → DOM runtime ops: sets renderer and inserts (evidence: `packages/vobs/src/app.ts`)
- DOM runtime ops → Signals and effects: tracks owner
- App lifecycle → Hot reload: supports hot reload
- App lifecycle → SSR and hydration: supports hydration
- App developer → Routing: configures routes
- Routing → Async resources: supports route data
- App developer → HTTP and streams: makes requests
- App developer → Auth and JWT: manages sessions
- App developer → Storage and sync: stores client state
- App developer → Task queue: enqueues tasks
- App developer → Payment adapters: integrates payments
- App developer → Uploads: uploads files
- App developer → Forms and validation: builds forms
- App developer → App composition kit: composes app UI
- App composition kit → UI and layout: composes components
- App composition kit → Data tables: composes tables
- App developer → Debug instrumentation: inspects runtime
- Devtools panel → Debug instrumentation: reads snapshots (evidence: `packages/devtools-ui/src/panel.tsx`)
- Example app startup → App lifecycle: creates and mounts (evidence: `playground/basic/src/main.ts`)
- Example app startup → Example app view: renders (evidence: `playground/basic/src/main.ts`)
- Example app startup → Example routes: installs router (evidence: `playground/basic/src/main.ts`)
- Example app view → Routing: renders RouterView (evidence: `playground/basic/src/App.tsx`)
- Example app view → Devtools panel: renders widget (evidence: `playground/basic/src/App.tsx`)
- Example routes → Routing: creates router (evidence: `playground/basic/src/router.ts`)
- Example routes → Async resources: registers resource router (evidence: `playground/basic/src/router.ts`)
- Example routes → Login example: routes to (evidence: `playground/basic/src/router.ts`)
- Example routes → Captcha example: routes to (evidence: `playground/basic/src/router.ts`)
- Example routes → Async example: routes to (evidence: `playground/basic/src/router.ts`)
- Example routes → Data example: routes to (evidence: `playground/basic/src/router.ts`)
- Example routes → Payment example: routes to (evidence: `playground/basic/src/router.ts`)
- Example routes → Resource table example: routes to (evidence: `playground/basic/src/router.ts`)
- Example app startup → Theme plugin: installs plugin (evidence: `playground/basic/src/main.ts`)
- Example app startup → Storage plugin: installs plugin (evidence: `playground/basic/src/main.ts`)
- Storage plugin → Storage and sync: configures storage (evidence: `playground/basic/src/plugins/storage.ts`)