Load Function + Valibot Validation

Quick Start with CLI

Generate this entire pattern automatically:

terminal

During the interactive prompts, select Load function strategy and Valibot validator, then define your fields (title, userCount, isLive).

How It Works

Most Svelte-native approach - Uses standard SvelteKit load() functions to pass data from page to layout
Server-side rendered - Data is available immediately on page load, no client-side fetching
Valibot validation - The LayoutRegion component automatically validates incoming data against your schema (~1kb bundle)
SEO-friendly - Content is in the initial HTML response for search engines
Zero layout shift - No hydration flicker or content jumping
Type-safe - Full TypeScript support with automatic type inference

Code Examples (used on this page)

1. Define your schema with Valibot:

src/lib/regions/dashboard-header/dashboardHeaderSchema.ts

2. Return region data from your load function:

src/routes/examples/load-function/valibot/+page.server.ts

3. Consume the region in your +layout.svelte file, passing the Valibot schema to LayoutRegion for automatic validation:

Note: The @const typedData = data as DashboardHeaderData line narrows the type from Record<string, unknown> to your specific schema type for full TypeScript autocomplete and type safety. Learn more about typing snippets.

src/routes/examples/load-function/valibot/+layout.svelte

4. Or, abstract the region to its own component for better organization (this is how our CLI generates regions):

src/lib/regions/dashboard-header/DashboardHeaderRegion.svelte

5. Then your +layout.svelte stays clean and organized — the region is now a self-contained component with its own schema, validation, and UI.

src/routes/examples/load-function/valibot/+layout.svelte

Load Function + Valibot Validation

System Dashboard