API Reference
Complete reference for all exports, types, and interfaces in @sveltopia/regions.
Import Paths
All exports are available from a single import path:
import {
LayoutRegions, // Root provider component
LayoutRegion, // Consumer component
useLayoutRegions, // Composable function
type RegionSchema // TypeScript interface
} from '@sveltopia/regions';Core Components
LayoutRegions
Root provider component that manages region context. Wrap your root layout with this.
Usage:
Props:
- •
children- Required snippet
Notes:
- • Place in root +layout.svelte
- • Only one instance needed
LayoutRegion
Consumer component that renders region content. Place wherever you want region data to appear.
Basic Usage:
With Fallback:
The fallback snippet renders when no region data is provided.
Props:
- •
name- string (required) - •
schema- RegionSchema (optional) - •
children- Snippet (optional) - •
fallback- Snippet (optional)
Notes:
- • Schema validates data objects only
- • Data: Validates, then passes to children
- • Snippet: Renders directly, bypasses schema
- • Fallback renders when no region data
- • Renders nothing if no children/fallback
Composable Functions
useLayoutRegions
Set region data from within +page.svelte files. Call with an object mapping region names to data objects or snippets.
Usage:
Parameters:
- •
regions- Record<string, unknown | Snippet>
Returns:
- •
void
Notes:
- • Call during component initialization
- • Can set multiple regions at once
- • Accepts data objects or snippets
TypeScript Types
RegionSchema<T>
Interface for validation schemas. Compatible with Valibot, Zod, or custom validators. The
type parameter T represents the validated output type that your
schema produces.
Examples:
Interface:
interface RegionSchema<T> {
parse: (data: unknown) => T;
}parse method. Valibot and Zod schemas satisfy this interface directly.Load Function Convention
Return region data under the regions key in your load function:
Requirements
- • Use the exact key
regions - • Return an object mapping region names to data
- • Data must be serializable (no functions)
- • Works in both +page.server.ts and +layout.server.ts
Learn more: See Advanced Patterns for using +layout.server.ts with region inheritance and override
patterns.
Validation Libraries
Package Exports
| Export | Type | Description |
|---|---|---|
LayoutRegions | Component | Root provider component |
LayoutRegion | Component | Region consumer component |
useLayoutRegions | Function | Set region data |
RegionSchema<T> | Type | Validation schema interface |
CLI Commands
npx @sveltopia/regions add <name>
Generate complete region boilerplate with interactive prompts.
Learn more →Error Handling
Validation Errors
If validation fails, LayoutRegion logs an error and renders nothing. Check your browser console for validation error details.
[Regions] Validation error for region "header":
Expected string for title, received number
Missing Region Data
If no data is provided for a region, LayoutRegion renders nothing. This is expected behavior for optional regions.
Type Mismatches
TypeScript will catch type mismatches at compile-time. Runtime validation (Valibot/Zod) provides an additional safety layer.