Load Function + Zod Validation

Quick Start with CLI

Generate this entire pattern automatically:

terminal

During the interactive prompts, select Load function strategy and Zod validator, then define your fields (productName, price, inStock).

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
Zod validation - The LayoutRegion component automatically validates incoming data against your schema (~14kb 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 Zod:

src/lib/regions/product-header/productHeaderSchema.ts

2. Return region data from your load function:

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

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

Note: The @const typedData = data as ProductHeaderData 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/zod/+layout.svelte

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

src/lib/regions/product-header/ProductHeaderRegion.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/zod/+layout.svelte

Load Function + Zod Validation

Premium Wireless Headphones