Examples and sandbox

A curated index of runnable Web Layer examples built on @netscript/fresh. Start here when you want to see the meta-framework end to end rather than one capability at a time. Each entry below points to a tutorial or how-to that composes the documented Web Layer surface — page builders, routing, data loading, forms, and streaming UI — into something you can run.

Where to start

The flagship example is the live dashboard tutorial. It walks through the full page model: defining a page with the builder, loading data through the query cache, wiring a server-validated form, and streaming deferred regions into the response. It is the most complete demonstration of how the Web Layer fits together.

• Live dashboard tutorial — the end-to-end Web Layer example.

From there, the Web Layer how-to guides isolate each capability so you can lift a single pattern into your own project.

The package surface

@netscript/fresh keeps its capabilities on explicit subpaths. The package root exposes only the cross-cutting page-loader cache helpers; everything else lives behind a dedicated import. Reading the root module is the fastest way to see how the pieces are organised before opening any one guide.

The documented subpaths are ./builders, ./route, ./form, ./defer, ./query, ./server, ./streams, ./interactive, ./vite, ./error, and ./testing.

The root entry itself centres on cache projection — composing a derived cache entry from a cached list response so a detail view can reuse a list query's data without a second round trip:

import {
  hasAllCacheEntries,
  minCachedAt,
  projectCachedItemFromList,
} from "@netscript/fresh";

// `listEntry` is a cached list response loaded by a page query.
const itemEntry = projectCachedItemFromList(
  listEntry,
  (item) => item.id === selectedId,
);

// Gate rendering on every required cache entry being present.
const ready = hasAllCacheEntries([listEntry, itemEntry]);

// Oldest timestamp across the entries, for staleness display.
const oldest = minCachedAt([listEntry, itemEntry]);

projectCachedItemFromList preserves the list entry's cachedAt timestamp on the projected item, so the detail view stays consistent with the list it was derived from.

API summary

CacheEntryLike<T> carries a readonly data payload and a readonly cachedAt Unix-epoch timestamp in milliseconds. CachedListEntryLike<TItem> is the same shape over a { items: TItem[] } payload.

Related

Return to the Web Layer hub for the full pillar overview.