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

src/routes/ ├── +layout.svelte # Root layout (all pages) ├── +page.svelte # Homepage / ├── about/+page.svelte # /about └── dashboard/ ├── +layout.svelte # Dashboard layout (dashboard pages only) ├── +page.svelte # /dashboard └── settings/+page.svelte # /dashboard/settings

<!-- +layout.svelte --> <script> let { children } = $props(); </script>

<nav><!-- Navigation --></nav> <main>{@render children()}</main> <footer><!-- Footer --></footer>

Reference Files

• file-naming.md - File naming conventions

• layout-patterns.md - Nested layouts

• error-handling.md - +error.svelte placement

• svelte-boundary.md - Component-level error/pending

• ssr-hydration.md - SSR and browser-only code

Notes

• Layouts: {@render children()} | Errors: +error.svelte above failing route

• Groups: (name) folders don't affect URL | Client-only: check browser

• Last verified: 2025-01-11