Quick Start
Generate complete region boilerplate with one command. The fastest way to add regions to your project.
Installation
Install the package using your preferred package manager:
Requirements
- SvelteKit 2+
- Svelte 5+ (uses runes)
One-Time Setup
Before creating your first region, you need to wrap your root layout with LayoutRegions. This is a one-time setup that enables the region system throughout your app.
LayoutRegions wrapper somewhere above them in the layout hierarchy. The easiest approach is to add it to your root src/routes/+layout.svelte file—this covers all regions throughout your
entire app.The Command
Replace page-header with your desired region name (e.g., dashboard-stats, userProfile, product-details). Both kebab-case and camelCase work.
This single command generates everything you need: schema, wrapper component, region consumer, and type definitions.
Interactive Prompts
The CLI guides you through configuration with friendly prompts:
- Strategy selection - Choose Load function (SSR), Component wrapper, or Snippet
- Field definitions - Define your data fields as comma-separated list
- Field types - For each field, choose string/number/boolean and required/optional
- Validator choice - Pick Valibot, Zod, or TypeScript-only
- Load location - Server-only (+page.server.ts) or universal (+page.ts)
- Example path - Where to generate the example load function or layout file
What Gets Generated
1. Schema Definition
Type-safe schema with your chosen validation library (or TypeScript only).
2. Region Consumer
Layout component that renders the region content with validation. Wrap your data in whatever UI/HTML you'd like.
3. Example Load Function
Example +page.server.ts showing how to use the region in your pages.
+page.server.ts and +layout.server.ts files. See Advanced Patterns for layout-level regions and inheritance.Next Steps
After generation, the CLI provides clear instructions for integrating the region:
Validation Options
Valibot (Recommended)
- • Smallest bundle size (~1kb)
- • Modern, type-safe API
- • Perfect for most use cases
Zod
- • Popular, feature-rich
- • Great if already using Zod
- • Larger bundle (~14kb)
TypeScript Only
- • Zero runtime validation
- • Smallest possible bundle
- • Compile-time safety only
Benefits
- Saves time - 30 seconds vs 5+ minutes of manual setup
- Zero errors - Generated code is correct by default
- Consistent patterns - All regions follow the same structure
- Type-safe - Full TypeScript support out of the box
- Best practices - Uses recommended patterns and validation