Snippet + TypeScript Only

Quick Start with CLI

Generate snippet region boilerplate automatically:

terminal

During the interactive prompts, select Snippet strategy. The CLI generates a region consumer that accepts Snippets and an example layout file with snippet definitions and full state access.

Snippets are the most powerful and flexible strategy for regions. They give you full access to page state, props, and context while remaining type-safe and reactive.

The 3 Snippet Superpowers

This page demonstrates all three capabilities working together in the regions above.

1. User Interaction - Snippets can handle events and mutate page state directly, making highly interactive UIs trivial. (See Product Header - click "Next" to cycle adjectives)
2. Component Wrapping - Snippets can wrap entire components, giving them access to page state and handlers without prop drilling through your layout. (See Settings Header - full component with page state access)
3. Reactive State Access - Snippets have direct access to all page state, props, and context. When state changes, snippets automatically re-render. (See Stats Header - try clicking "Update Stats")

Why Use Snippets in Layouts?

Snippets solve a specific problem: "I need the layout to control positioning and chrome, while each page controls what content goes there" - whether that's simple varying markup or deeply interactive UI with full page state access.

Example Use Cases:

Page Actions Bar

• Layout: "Page actions always appear top-right, styled consistently"
• Page snippet: "This page needs Save + Delete, connected to my form state. Another page needs Publish + Archive."
• Alternative: Every page duplicates positioning/styling OR prop drilling hell

Contextual Sidebar

• Layout: "Sidebar appears on right, collapsible, consistent behavior"
• Page snippet: "This page's sidebar needs filters that update my data table. Another page's sidebar needs navigation links."
• Why snippet? Filter state lives on page, but sidebar position is layout concern

Dynamic Breadcrumbs

• Layout: "Breadcrumbs always at top, styled, positioned"
• Page snippet: "My breadcrumbs are interactive (click to filter), need page state"

The pattern: Layout controls the "chrome" (position, container, transitions), snippet provides the "meat" (interactive content with page state access). This separation of concerns keeps your layouts DRY while giving pages maximum flexibility.

Why TypeScript Only for Snippets?

Snippets are typed at compile-time through their signature. Runtime validation with Valibot/Zod would be redundant since the snippet signature already enforces types.

Code Examples (used on this page)

Step 1: Define all 3 snippets in your page component:

Notice the 3 patterns: Snippets can handle user interaction (example 1), wrap full components (example 2), and access reactive state (example 3). All have access to page state via closure.

src/routes/examples/snippet/full-example/+page.svelte

Step 2: Consume snippets in your layout — the layout controls positioning and styling, while the snippets provide interactive content with full page state access.

src/routes/examples/+layout.svelte