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 Cards
25 single-concept demosA static route plus a dynamic [id] segment that reads params. The file-based router in miniature.
The control-flow throws (forbidden / unauthorized / notFound) and the nearest boundary file that catches each.
Static metadata plus generateMetadata(ctx), which reads the request to compute the title and Open Graph tags.
The WebComponent factory, reactive props, instance signals, and slot projection in light DOM.
The lit-html directive set: repeat for keyed lists, watch(signal) for a fine-grained node swap.
A component that awaits server data in async render(), so the resolved value is in the first paint.
A use-server RPC action next to a server-only .server.ts utility, plus the HTTP-verb config exports that make a read a cached GET.
A server-only route.ts HTTP endpoint returning JSON, the WebJs equivalent of a Next route handler.
A no-JS progressive-enhancement form bound to a server action, with server-side validation errors.
The imperative optimistic(signal, value, action) flip: instant update, automatic rollback on failure.
Automatic soft navigation: fragment-only fetches, hover prefetch, scroll restore, and graceful no-JS fallback.
The opt-in view-transition meta cross-fades a soft navigation, with a data-webjs-permanent element persisted across the swap.
A use-server action that returns an async generator, streamed to the call site token by token with for await.
The <webjs-stream> element: renderStream() applies surgical append / replace / remove DOM updates by target id, no region redraw.
The <webjs-suspense> element: a first-paint fallback for a SLOW component, with the resolved content streamed in.
A webjs-frame region that swaps a filtered sub-list in place from a link, shipping zero component JS, with a no-JS full-nav fallback.
A WS(ws, req) route endpoint plus the connectWS() client, echoing messages over a live socket.
Fan a message out to every connected client on a WebSocket path, so all open tabs stay in sync.
Password login on createAuth, a signed session cookie, and a real protected route that redirects anonymous visitors to login.
A signed-cookie session applied by a segment middleware, read and written per visitor with getSession() in a route.
export const revalidate caches the page HTML per URL, with the safety rule for when a shared cache is allowed.
The server-only vs WEBJS_PUBLIC_ boundary, read during SSR so secrets never reach the browser.
The rateLimit() middleware scoped to one endpoint, returning a 429 with Retry-After once the interval resets.
A no-JS multipart upload streamed into the FileStore, then served back through a streaming route.
The opt-in offline enhancement, registered from a browser-only lifecycle hook (never a page or layout).