WebJs Gallery

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 demos
Routing Routing

A static route plus a dynamic [id] segment that reads params. The file-based router in miniature.

Boundaries Routing

The control-flow throws (forbidden / unauthorized / notFound) and the nearest boundary file that catches each.

Metadata Routing

Static metadata plus generateMetadata(ctx), which reads the request to compute the title and Open Graph tags.

Components Components

The WebComponent factory, reactive props, instance signals, and slot projection in light DOM.

Directives Components

The lit-html directive set: repeat for keyed lists, watch(signal) for a fine-grained node swap.

Async render Components

A component that awaits server data in async render(), so the resolved value is in the first paint.

Server actions Data & actions

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.

Route handlers Data & actions

A server-only route.ts HTTP endpoint returning JSON, the WebJs equivalent of a Next route handler.

Forms Data & actions

A no-JS progressive-enhancement form bound to a server action, with server-side validation errors.

Optimistic UI Data & actions

The imperative optimistic(signal, value, action) flip: instant update, automatic rollback on failure.

Client router Client & streaming

Automatic soft navigation: fragment-only fetches, hover prefetch, scroll restore, and graceful no-JS fallback.

View transitions Client & streaming

The opt-in view-transition meta cross-fades a soft navigation, with a data-webjs-permanent element persisted across the swap.

Streaming actions Client & streaming

A use-server action that returns an async generator, streamed to the call site token by token with for await.

Stream updates Client & streaming

The <webjs-stream> element: renderStream() applies surgical append / replace / remove DOM updates by target id, no region redraw.

Suspense boundary Client & streaming

The <webjs-suspense> element: a first-paint fallback for a SLOW component, with the resolved content streamed in.

Frames Client & streaming

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.

WebSockets Real-time

A WS(ws, req) route endpoint plus the connectWS() client, echoing messages over a live socket.

Broadcast Real-time

Fan a message out to every connected client on a WebSocket path, so all open tabs stay in sync.

Auth Auth & sessions

Password login on createAuth, a signed session cookie, and a real protected route that redirects anonymous visitors to login.

Sessions Auth & sessions

A signed-cookie session applied by a segment middleware, read and written per visitor with getSession() in a route.

Caching Built-ins

export const revalidate caches the page HTML per URL, with the safety rule for when a shared cache is allowed.

Env vars Built-ins

The server-only vs WEBJS_PUBLIC_ boundary, read during SSR so secrets never reach the browser.

Rate limiting Built-ins

The rateLimit() middleware scoped to one endpoint, returning a 429 with Retry-After once the interval resets.

File storage Built-ins

A no-JS multipart upload streamed into the FileStore, then served back through a streaming route.

Service worker Built-ins

The opt-in offline enhancement, registered from a browser-only lifecycle hook (never a page or layout).

Example Apps

Complete app demos