Valyrian.js recipes
Complete one focused task with a small set of public APIs. Each recipe links to the guide for the related Valyrian.js capability.
Views and lifecycle
Build vnodes, mount an application and respond to lifecycle changes.
Mount and unmount an application
Practice the complete mounted lifetime of one root view.
mountunmountObserve a component lifecycle
Run creation, patch cleanup, update and removal through one component.
mountonCleanuponCreateonRemoveonUpdateunmountGroup repeated view updates
Compare immediate, grouped and suppressed rendering from one interaction.
debouncedUpdatemountpreventUpdateupdatePreserve identity and choose form scope
Compare identity, guarded rendering and two form scopes in one interactive view.
mountFormStore
Routing
Resolve routes, redirect navigation and run route hooks.
Mount a routed application
Render one root from matching, parameterized and fallback routes.
RoutermountRouterObserve and control a route transition
Follow one navigation from the active profile to its completed destination.
mountonCreateafterRoutebeforeRoutemountRouterredirectRouter
Data and async work
Send requests, represent pending work and coordinate queries and mutations.
Load data from a view
Carry one profile screen from loading to a remote result or failure.
mountupdaterequestShow a pending content boundary
Give one profile screen a visible asynchronous lifecycle.
mountSuspenseKeep the latest asynchronous task
Keep overlapping searches aligned with the newest input.
mountTaskCoordinate a query and a mutation
Coordinate one todo read and write through shared server-data state.
mountQueryClient
State and forms
Store values, run effects and validate form data.
Validate and submit a form
Keep form values, validation and submission outcomes distinguishable.
mountFormStoreShare one reactive value
Render one shared counter after a reactive write.
mountcreatePulseCompare reactive stores and effects
Use named pulse commits, direct mutable state and a tracked reactive effect.
mountcreateEffectcreateMutableStorecreatePulseStoreModel named state transitions
Represent the counter change as one named Flux transition.
mountFluxStoreInspect state with DevTools
Observe one counter through the bridge for its current state model.
mountcreatePulseconnectPulseTranslate a view
Render one greeting from the active language dictionary.
mountsetLangsetTranslationstFormat a money value
Carry one amount from user input to localized currency output.
mountMoneyformatMoneyparseMoneyInputPersist a local value
Follow one theme preference through its browser-storage lifetime.
mountStorageTypecreateNativeStoreValidate data and read a nested path
Normalize one profile input before rendering its accepted values.
mountensureIngetisFiniteNumberpickset
Network, offline and PWA
Observe connectivity, retain queued operations and manage service worker registration.
React to connectivity changes
Keep one status current while the browser moves between network conditions.
mountonCreateupdateNetworkEventNetworkManagerSignalLevelRetry queued work after connectivity returns
Keep an order visible while delivery waits for connectivity.
mountonRemoveupdatevOfflineQueueNetworkManagerRegister and apply a service worker update
Follow one service worker release from generation to an accepted waiting update.
swSwRuntimeManager
SSR and server APIs
Render on the server, isolate scopes and transform server output.
Render and hydrate one response
Carry one application state from the server response into the browser mount.
rendermountServerStorageinlineVerify request-scoped server storage
Prove that concurrent server requests do not expose their stored values to one another.
renderServerStorageinline
Integrations
Connect Valyrian.js to bundlers, HTTP servers and domain API clients.
Integrate Valyrian.js with Vite
Adopt Valyrian.js in a Vite project with one automatic TSX runtime.
mountIntegrate Valyrian.js with Webpack or Rspack
Build the same Valyrian.js TSX entry through either Webpack or Rspack.
mountConnect SSR to Express or Fastify
Serve one isolated Valyrian.js render through the application's HTTP adapter.
renderServerStorageinlineCompose API clients by domain
Share one request configuration across auth, users and billing domains.
request