Explore the gallery
Each demo isolates a single WebJs capability in real, runnable code. Read the ones you need, then build your app on the same patterns.
Feature Demos
25 single-concept demosAdd a URL to the app, static or with a dynamic [id] segment. The file is the route, so there is no table to register it in.
Abandon a render because something is missing or not allowed. Throw notFound / forbidden / unauthorized and the nearest boundary file catches it.
Give a page its own title, description, and social preview without writing head markup yourself.
Make one part of the page respond to a click or hold state. A page never hydrates, so interactivity lives in a component.
Render a keyed list, or swap a single node when state changes, without re-rendering the component around it.
Get server data into the first paint. Await it in async render() rather than fetching after mount, which SSR never runs.
Call server code from the browser by importing the function. No fetch, no endpoint to name, and the types survive the trip.
Expose JSON to a caller outside the app. A server-only route.ts, the WebJs equivalent of a Next route handler.
Write data from a form that still works with JS off. Binding the action to the form is the whole wiring.
Make a mutation feel instant. optimistic() applies the change immediately and rolls it back if the server refuses.
Navigate without a full page reload. Automatic the moment a page ships a component, with nothing to import or configure.
Cross-fade a navigation instead of snapping. One opt-in meta, plus a marker for elements that must survive the swap.
Show tokens or progress as the server produces them. An action returning an async generator, consumed with for await.
Change one element after a write, like appending a row or bumping a count, without redrawing the region around it.
Paint the page before a slow region is ready. The fallback flushes on the first byte and the content streams in behind it.
Refresh one region on its own with no navigation, like a filtered list or a tab panel. Zero component JS, full-nav fallback with JS off.
Hold a live two-way connection instead of polling. A WS(ws, req) route export on the server, connectWS() on the client.
Push one update to every client connected on a WebSocket path, so a change made in one of them shows up in the rest. Optionally excluding the sender.
Add login and a route only signed-in visitors can open, without rolling password hashing and session cookies yourself.
Remember something per visitor across requests. A signed cookie applied by middleware, read and written with getSession().
Stop re-rendering a page that is identical for every visitor. export const revalidate, with the rule for when that is safe.
Read config and secrets at runtime while keeping the secrets server-side. WEBJS_PUBLIC_ is the only prefix the browser sees.
Stop one caller hammering an endpoint. The rateLimit() middleware returns a 429 with Retry-After until the interval resets.
Accept an upload and serve it back, streamed both ways, with nothing buffered in memory and nothing written into public/.
Keep the app usable offline. The opt-in service worker, registered from a browser-only lifecycle hook (never a page or layout).