@sveltopia/regions
Named content regions for SvelteKit layouts
SvelteKit gives us one place to render page content in
a layout.
Layout Regions give us as many as we need.
One layout, unlimited regions.
┌ Sveltopia Layout Regions
│ ◆
│ ◆
│ ◆
│ ✓ 4 files created
└ Done
+layout.svelte
<LayoutRegions>
contentRefs.pageHeader
{@render children()}
"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...