Component Wrapper + TypeScript Only

Quick Start with CLI

Generate this entire pattern automatically:

terminal

During the interactive prompts, select Component Wrapper strategy and TypeScript only validator, then define your fields (username, bio).

How It Works

Client-side only - No server load function required, uses simple component props
TypeScript only - Compile-time type checking with no runtime validation overhead (0kb validator bundle)
Wrapper component pattern - Create a component that calls useLayoutRegions() to set region data
Type-safe props - Full TypeScript support with interface definitions
Simple API - Use like any other Svelte component with props

Code Examples (used on this page)

1. Define your type with a TypeScript interface:

src/lib/regions/profile-header/ProfileHeaderData.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 sets the region data for consumption elsewhere in your layout (no runtime validation).

src/lib/regions/profile-header/ProfileHeader.svelte

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

src/lib/regions/profile-header/ProfileHeaderRegion.svelte

4. Use the wrapper component anywhere in your pages with simple props — the wrapper handles calling useLayoutRegions(), which makes the data available to the region consumer in your layout (with compile-time type checking only).

src/routes/examples/page-component/typescript-only/+page.svelte

Page Component + TypeScript Only

Component Wrapper + TypeScript Only

Quick Start with CLI

How It Works

Code Examples (used on this page)