Valyrian.js guides
Learn each public capability through its purpose, main APIs and place in an application flow. Every guide points to a working example when one is available and continues into the related API reference.
Views and lifecycle
Build vnodes, mount an application and respond to lifecycle changes.
Build your first Valyrian.js application
Follow one root view from its first render through removal.
vmountunmountCreate a local TSX project
Move from the browser-only document to a local TSX project with a generated bundle.
mountinlineCompose views with directives and v-html
Build an interactive view with conditional content, a keyed list and direct HTML content.
mountv-ifv-forv-htmlkeyRun work through the view lifecycle
Observe creation, patch cleanup, update and removal as one component changes and leaves the rendered tree.
onCreateonUpdateonCleanuponRemoveControl when views update
Choose render timing for an immediate interaction and repeated input.
updatedebouncedUpdatepreventUpdateControl rendering identity and form scope
Keep list identity stable, skip unchanged work and choose the form scope for each field.
mountFormStore
Routing
Resolve routes, redirect navigation and run route hooks.
Connect views with the Valyrian.js router
Resolve the current browser location to one application view.
RoutermountRouterControl the route transition
Observe one transition from the active route through the completed destination.
redirectbeforeRouteafterRouteRouterError
Data and async work
Send requests, represent pending work and coordinate queries and mutations.
Send requests with Valyrian.js
Load one JSON profile and expose its pending, successful and failed outcomes.
requestRepresent content that is still resolving
Give one asynchronous profile screen explicit pending, successful and failed output.
SuspenseCoordinate replaceable asynchronous work
Keep overlapping searches aligned with the newest user input.
TaskCoordinate server data with QueryClient
Read and update one asynchronous todo source through shared query and mutation state.
QueryClientQueryHandleMutationHandle
State and forms
Store values, run effects and validate form data.
Share a reactive value with createPulse
Share one counter value and publish its changes to a mounted view.
createPulseOrganize reactive state and its effects
Choose createPulseStore for named reactive commits or createMutableStore when public state must also accept direct writes.
createPulseStorecreateMutableStorecreateEffectOrganize state transitions with FluxStore
Model application changes as named Flux transitions.
FluxStoreInspect Valyrian.js state with DevTools
Inspect Valyrian.js state changes in Redux DevTools.
connectPulseconnectPulseStoreconnectFluxStoreManage form values and validation
Validate and submit a profile while its form progress remains visible.
FormStoreformSchemaShieldTranslate application content
Render the same message path from the active language dictionary.
getLangsetLangsetTranslationstv-tRepresent money with the Valyrian.js utilities
Carry one amount from localized input through arithmetic to currency display.
MoneyNumberFormatterformatMoneyparseMoneyInputMoneyFormatOptionsv-moneyPersist values in native storage
Persist a theme preference with local or session lifetime.
StorageTypecreateNativeStoreNativeStorageInterfaceValidate values and access nested data
Normalize profile input before rendering allowed and nested values.
ensureIngetpickset
Network, offline and PWA
Observe connectivity, retain queued operations and manage service worker registration.
Respond to connectivity changes
Keep the interface current while the browser moves between network conditions.
NetworkManagerNetworkEventSignalLevelNetworkErrorNetworkManagerRuntimeRetain operations in an offline queue
Keep an order visible while delivery waits for connectivity.
OfflineQueueConnect the application to its service worker
Track the worker from registration through an accepted update.
SwRuntimeManagerregisterSwSwRuntimeEnvironment
SSR and server APIs
Render on the server, isolate scopes and transform server output.
Render Valyrian.js views on the server
Compile a server TSX component and serialize it to HTML in Node.
renderinlineKeep server values within their intended execution
Keep concurrent server-rendered requests from sharing request values.
ServerStorageIsolate Valyrian.js execution with scopes
Create one scope, inspect its presence, bind and temporarily replace its value, and keep concurrent server branches separate.
createContextScopeContextScopegetContexthasContextrunWithContextsetContextisServerContextActiveServerStorageTransform server output and resources
Prepare browser bundles, icons and service worker assets during the Node.js build.
inlineiconssw
Integrations
Connect Valyrian.js to bundlers, HTTP servers and domain API clients.
Verify an adopted Valyrian.js application
Verify each Valyrian.js capability the application actually uses.
RouterrequestcreatePulserendermountServerStorageOfflineQueueSwRuntimeManager