Snippet Strategy

Quick Start with CLI

Generate this entire pattern automatically:

terminal

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

How It Works

Maximum flexibility - Full access to page state, props, and context
Reactive - Updates automatically when page state changes
Inline definition - No separate component files needed
Type-safe - Snippet signatures provide compile-time type checking
TypeScript only - Snippets use compile-time validation (runtime validation would be redundant)

Code Example

1. Create a region consumer that accepts a Snippet type:

Note: The LayoutRegion is typed to accept a Snippet, and renders it directly with the render tag.

src/lib/regions/counter/CounterRegion.svelte

2. In your page component, define a snippet and pass it to useLayoutRegions():

Key concept: The snippet has full access to the page's reactive state (count). When count changes, the snippet automatically re-renders in the layout.

src/routes/my-page/+page.svelte

Why TypeScript Only?

Snippets are type-safe by design. Unlike data objects or component props, snippets are defined with explicit signatures that TypeScript validates at compile-time. Adding runtime validation (Valibot/Zod) would be redundant and add unnecessary bundle size.

When to Use Snippets

Highly interactive UIs - Counters, forms, real-time updates
Need full page state access - Reactive data, derived values, local state
Complex rendering logic - Conditional rendering based on page state
Maximum control and flexibility - When other strategies feel too restrictive

vs. Other Strategies

Load Function Strategy

Better for: SEO, SSR, zero layout shift, server-side data fetching

Trade-off: Less reactive, can't access page state

Component Wrapper Strategy

Better for: Simple APIs, rapid development, reusable wrappers

Trade-off: Less flexible, requires separate component files

Choose snippets when you need maximum flexibility and reactivity. Choose load functions when you need SEO and SSR. Choose component wrappers when you want simplicity and reusability.