Reactive Updates

Type a name and press Save — the breadcrumb updates via optimistic update.

Try changing the name and make a hard reload of the page.

Breadcrumb reads from a remote query

The breadcrumb calls getNickname() — a server-side query faking a database read.

<script module lang="ts">
	import { getNickname } from '$lib/demo/greeting.remote.js';
	
	export const breadcrumb: BreadcrumbMeta = async () => ({
	  label: await getNickname()
	});
</script>

Optimistic update via command

On save, a command writes to the server while .withOverride() updates the breadcrumb instantly — no round-trip.

<script module lang="ts">
	function save() {
	  setNickname(input).updates(getNickname().withOverride(() => input || 'Visitor'));
	}
</script>