Component Wrapper + Zod Validation

Quick Start with CLI

Generate this entire pattern automatically:

terminal

During the interactive prompts, select Component Wrapper strategy and Zod validator, then define your fields (galleryTitle, imageCount).

How It Works

Client-side only - No server load function required, uses simple component props
Zod validation - Runtime validation with the most popular TypeScript schema validator (~14kb bundle)
Wrapper component pattern - Create a component that calls useLayoutRegions() to set region data
Type-safe props - Full TypeScript support with automatic type inference
Simple API - Use like any other Svelte component with props

Code Examples (used on this page)

1. Define your schema with Zod:

src/lib/regions/gallery-header/galleryHeaderSchema.ts

2. Create a wrapper component that calls useLayoutRegions() to set region data:

Key concept: The wrapper component receives props and passes them to useLayoutRegions(), which validates and sets the region data for consumption elsewhere in your layout.

src/lib/regions/gallery-header/GalleryHeader.svelte

3. Consume the region in your layout (just like with load functions):

src/lib/regions/gallery-header/GalleryHeaderRegion.svelte

4. Use the wrapper component anywhere in your pages with simple props — the wrapper handles calling useLayoutRegions(), which validates the data and makes it available to the region consumer in your layout.

src/routes/examples/page-component/zod/+page.svelte

Page Component + Zod Validation

Component Wrapper + Zod Validation

Quick Start with CLI

How It Works

Code Examples (used on this page)