Region Strategy Examples
Explore different ways to use @sveltopia/regions. Each example demonstrates a different strategy for passing content from pages to parent layouts.
Regions Demo
All of the colored/dashed areas shown on these example pages are using actual Layout Regions. See the Quick Start guide to scaffold your own regions in 30 seconds.
Load Function Strategy
Server-side rendering with load() functions. Best for SEO and zero layout shift.
Component Wrapper Strategy
Client-side with wrapper components. Simple and straightforward.
Snippet Strategy
Maximum flexibility with inline snippets. Full access to page state.
Advanced: Region Inheritance
Learn how to use layout hierarchies to inherit, override, and extend regions.
Validator Options
Each strategy supports three validation approaches. Choose based on your needs:
| Validator | Bundle Size | When to Use |
|---|---|---|
| Valibot | ~1kb | Smallest footprint, modern API |
| Zod | ~14kb | Most popular, rich ecosystem |
| TypeScript | 0kb | Compile-time only, trusted data |
No footer data provided - showing fallback content.