@sveltopia/regions
Named content regions for SvelteKit layouts
"Front Matter" for your Pages
Declare metadata for each page, render them as custom regions in your layouts.
Three Strategies
Choose between load functions, wrapper components, or reactive snippets.
Type-Safe
Static type inference and runtime schema validation with Valibot or Zod.
Are Regions Right for Your Project?
Take our 60-second quiz
Do you need to pass content from child pages to parent layouts?
Examples: Page headers, sidebars, breadcrumbs, meta tags
Three Ways to Use Regions
Choose the strategy that fits your needs - all type-safe, all flexible.
1. Load Function (SSR)
Server-rendered with validation and type safety. Best for SEO and zero layout shift.
+page.server.ts
Loading...
2. Component Wrapper (Rendered Client-Side)
Simple wrapper components with props. Fast and intuitive.
+page.svelte
Loading...
3. Snippet (Rendered Client-Side, Maximum Flexibility)
Full access to page state. Perfect for interactive UIs.
+page.svelte
Loading...
Then consume in your layout
All strategies use the same LayoutRegion component.
+layout.svelte
Loading...