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 Demos

25 single-concept demos
Routing Routing

Add 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.

Boundaries Routing

Abandon a render because something is missing or not allowed. Throw notFound / forbidden / unauthorized and the nearest boundary file catches it.

Metadata Routing

Give a page its own title, description, and social preview without writing head markup yourself.

Components Components

Make one part of the page respond to a click or hold state. A page never hydrates, so interactivity lives in a component.

Directives Components

Render a keyed list, or swap a single node when state changes, without re-rendering the component around it.

Async render Components

Get server data into the first paint. Await it in async render() rather than fetching after mount, which SSR never runs.

Server actions Data & actions

Call server code from the browser by importing the function. No fetch, no endpoint to name, and the types survive the trip.

Route handlers Data & actions

Expose JSON to a caller outside the app. A server-only route.ts, the WebJs equivalent of a Next route handler.

Forms Data & actions

Write data from a form that still works with JS off. Binding the action to the form is the whole wiring.

Optimistic UI Data & actions

Make a mutation feel instant. optimistic() applies the change immediately and rolls it back if the server refuses.

Client router Client & streaming

Navigate without a full page reload. Automatic the moment a page ships a component, with nothing to import or configure.

View transitions Client & streaming

Cross-fade a navigation instead of snapping. One opt-in meta, plus a marker for elements that must survive the swap.

Streaming actions Client & streaming

Show tokens or progress as the server produces them. An action returning an async generator, consumed with for await.

Stream updates Client & streaming

Change one element after a write, like appending a row or bumping a count, without redrawing the region around it.

Suspense boundary Client & streaming

Paint the page before a slow region is ready. The fallback flushes on the first byte and the content streams in behind it.

Frames Client & streaming

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.

WebSockets Real-time

Hold a live two-way connection instead of polling. A WS(ws, req) route export on the server, connectWS() on the client.

Broadcast Real-time

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.

Auth Auth & sessions

Add login and a route only signed-in visitors can open, without rolling password hashing and session cookies yourself.

Sessions Auth & sessions

Remember something per visitor across requests. A signed cookie applied by middleware, read and written with getSession().

Caching Built-ins

Stop re-rendering a page that is identical for every visitor. export const revalidate, with the rule for when that is safe.

Env vars Built-ins

Read config and secrets at runtime while keeping the secrets server-side. WEBJS_PUBLIC_ is the only prefix the browser sees.

Rate limiting Built-ins

Stop one caller hammering an endpoint. The rateLimit() middleware returns a 429 with Retry-After until the interval resets.

File storage Built-ins

Accept an upload and serve it back, streamed both ways, with nothing buffered in memory and nothing written into public/.

Service worker Built-ins

Keep the app usable offline. The opt-in service worker, registered from a browser-only lifecycle hook (never a page or layout).

Example Apps

Complete app demos