sveltekit-structure
SvelteKit routing, layouts, error handling, and SSR structure guidance.
- File-based routing with
+page.sveltefor pages,+layout.sveltefor nested wrappers,+error.sveltefor error boundaries, and+server.tsfor API endpoints - Nested layouts apply to all child routes; use route groups with
(name)folders to organize without affecting URLs - Error boundaries and pending UI patterns via
+error.svelteplacement andsvelte:boundarycomponent-level error/pending states - SSR and hydration guidance including browser-only code detection and client-side considerations
SvelteKit Structure
Quick Start
File types: +page.svelte (page) | +layout.svelte (wrapper) |
+error.svelte (error boundary) | +server.ts (API endpoint)
Routes: src/routes/about/+page.svelte → /about |
src/routes/posts/[id]/+page.svelte → /posts/123
Layouts: Apply to all child routes. +layout.svelte at any level
wraps descendants.
Example
More from spences10/svelte-skills-kit
svelte-runes
Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.
373sveltekit-remote-functions
SvelteKit remote functions guidance. Use for query(), form(), command(), and prerender() patterns in .remote.ts files.
275sveltekit-data-flow
SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().
260svelte-components
Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.
200layerchart-svelte5
LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.
131svelte-deployment
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
128