Valyrian.js guides
Explore each Valyrian.js capability through its purpose, main APIs, and a working example. Each guide leads to the corresponding 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
Turn a browser example into a local TSX project and generate its 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
Follow how a view is created, prepares each update, and leaves the rendered tree through lifecycle hooks.
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 a JSON profile and render its loading, success, and error states.
requestRepresent content that is still resolving
Define what an asynchronous screen shows while loading, when it completes, and when an error occurs.
SuspenseCoordinate replaceable asynchronous work
Keep overlapping searches aligned with the newest user input.
TaskCoordinate server data with QueryClient
Read and update asynchronous data through the shared state of a query and a mutation.
QueryClientQueryHandleMutationHandle
State and forms
Store values, run effects and validate form data.
Share a reactive value with createPulse
Create a reactive value, update it, and notify the mounted view that reads it.
createPulseOrganize reactive state and its effects
Use createPulseStore to coordinate state and named reactive operations, 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
Work with monetary values using the Valyrian.js utilities.
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
Update the interface when browser connectivity changes.
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
Browser and Node.js
Render on the server, isolate scopes and transform server output.
Run the browser application in Node.js
Import the application already used by the browser and render it to HTML in Node.js.
mountrenderisNodeJsinlineIsolate values for each server request.
Prevent concurrent requests from sharing state during server rendering.
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