TypeScript React Notes Showcase Example
flagship web host with hooks as VMx adapters and React components as pure renderers
TypeScript React Notes Showcase Example
flagship web host with hooks as VMx adapters and React components as pure renderers
TypeScript React Notes Showcase Example
flagship web host with hooks as VMx adapters and React components as pure renderers
Host and adapter boundary
VMx-owned application state
Verification and modeling rule
React components
Vite app shell
pure render components
hotkey hooks
React adapter hooks
useVm / useCommand
collection + derived hooks
dialog overlay
User gestures
events become VM calls
no domain state in host
render from VM snapshots
Run surface
local example command
smoke-friendly path
documented README entry
WorkspaceVM
AggregateVM6 shell
async construct
theme sibling
Notebook + note VMs
tree projection
PagedComposition
strict NoteFormVM
Workflow services
TokenPagedComposition
NotificationVM
DiscriminatorVM
Repository + models
in-memory notes
seed notebooks
theme model
Vitest + lint
npm test
typecheck
no useState/useReducer in views
Best-fit use
Use this as the TypeScript reference for full VMx MVVM in a browser host.
Reading rule
Follow arrows top to bottom: host input becomes VMx commands; VMx state publishes renderable projections back to the host.
binds
routes
runs
owns
projects
executes
loads
children
commands
data
tests
boundary
Hook seam
Hooks adapt VMx streams to React rendering.
Components do not own domain state.
Full surface
Exercises the 19-row Notes Workspace contract.
Specialized VMs keep wrapper code small.
Parity role
Matches the C#, Python, and Swift flagship scenario.