UI compartida con +layout.svelte

En cualquier aplicación multipágina, muchas rutas comparten elementos estructurales: una barra de navegación, una barra lateral, un pie de página, un banner que muestra el usuario autenticado. El enfoque ingenuo es importar y renderizar estos elementos en cada archivo +page.svelte. Eso funciona hasta que necesitas cambiar algo — entonces estás tocando docenas de archivos para lo que debería ser una edición de una sola línea.

SvelteKit resuelve esto con layouts — componentes que envuelven sus rutas descendientes con UI compartida. Un layout se ejecuta una vez cuando un usuario entra en su subárbol y permanece montado mientras navega entre rutas hijo. Las páginas entran y salen dentro de él; el layout se mantiene.

Una jerarquía de layouts bien diseñada puede eliminar cientos de líneas de código duplicado y hacer que los cambios globales de UI sean triviales. Una mal diseñada obliga a soluciones incómodas. Dedica unos minutos a trazar la estructura de tus layouts antes de construir — rinde dividendos.

El Layout Raíz

El layout más importante es el layout raíz. Vive en el nivel superior de tu directorio de rutas y envuelve cada página de tu aplicación.

src/routes/
├── +layout.svelte         → Root layout (wraps everything)
├── +page.svelte           → Homepage
└── about/
    └── +page.svelte       → About page

Piensa en él como el shell de tu sitio web — la estructura que nunca cambia mientras el contenido de la página se intercambia dentro de él.

<!-- src/lib/components/Navigation.svelte -->
<nav>
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a href="/blog">Blog</a>
	<a href="/contact">Contact</a>
</nav>

<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import Navigation from '$lib/components/Navigation.svelte'

	let { children } = $props()
</script>

<div class="app">
	<header>
		<Navigation />
	</header>

	<main>
		{@render children()}
	</main>

	<footer>
		<p>&copy; 2025 My Amazing Website</p>
	</footer>
</div>

<style>
	.app {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	main {
		flex: 1;
		padding: 2rem;
	}
</style>

El Snippet `children`

Si vienes de Svelte 4, podrías estar buscando <slot />. En Svelte 5, los slots fueron reemplazados por snippets.

La prop children es un snippet especial que representa el contenido "dentro" del layout — el componente de página o layout anidado que ocupa esta ruta. Lo renderizas con {@render children()}.

Esta es la regla más importante: siempre debes renderizar children(). Si lo olvidas, nunca aparecerá ningún contenido de página:

<!-- WRONG: Pages will never show -->
<script lang="ts">
  let { children } = $props()
</script>
<nav>Navigation</nav>
<footer>Footer</footer>

<!-- CORRECT: Always render children -->
<script lang="ts">
  let { children } = $props()
</script>
<nav>Navigation</nav>
<main>{@render children()}</main>
<footer>Footer</footer>

Layouts Anidados

Los layouts pueden anidarse. Un layout dentro de un subdirectorio envuelve las páginas de ese directorio, pero a su vez es envuelto por el layout padre que está por encima de él.

Ejemplo: Layout de Sección Blog

Imagina una sección de blog que necesita una barra lateral, pero la página de inicio no. Crea un +layout.svelte dentro del directorio del blog:

src/routes/
├── +layout.svelte         → Root layout (wraps everything)
├── +page.svelte           → Homepage (no sidebar)
└── blog/
    ├── +layout.svelte     → Blog layout (adds sidebar)
    ├── +page.svelte       → Blog index
    └── [slug]/
        └── +page.svelte   → Individual blog post

<!-- src/routes/blog/+layout.svelte -->
<script lang="ts">
	let { children } = $props()
</script>

<div class="blog-layout">
	<aside>
		<h3>Categories</h3>
		<ul>
			<li><a href="/blog?category=tech">Tech</a></li>
			<li><a href="/blog?category=life">Life</a></li>
			<li><a href="/blog?category=tutorials">Tutorials</a></li>
		</ul>
	</aside>

	<div class="content">
		{@render children()}
	</div>
</div>

<style>
	.blog-layout {
		display: grid;
		grid-template-columns: 250px 1fr;
		gap: 2rem;
	}
</style>

Visualizando la Jerarquía

Cuando un usuario visita /blog/my-first-post, SvelteKit construye la página como una pila de componentes anidados, de afuera hacia adentro:

Root Layout (+layout.svelte)
└── Blog Layout (blog/+layout.svelte)
    └── Blog Post Page (blog/[slug]/+page.svelte)

La estructura HTML resultante refleja exactamente este anidamiento:

<!-- From Root Layout -->
<div class="app">
	<header>...</header>
	<main>
		<!-- From Blog Layout -->
		<div class="blog-layout">
			<aside>...</aside>
			<div class="content">
				<!-- From Page -->
				<article>...</article>
			</div>
		</div>
	</main>
	<footer>...</footer>
</div>

Recibir Datos en Layouts

Los layouts pueden recibir datos de funciones load, al igual que las páginas. Los datos provienen de +layout.js o +layout.server.js en el mismo directorio y están disponibles junto con children en $props():

<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import type { LayoutProps } from './$types'

	let { data, children }: LayoutProps = $props()
</script>

<header>
	{#if data.user}
		<span>Welcome, {data.user.name}</span>
		<a href="/logout">Logout</a>
	{:else}
		<a href="/login">Login</a>
	{/if}
</header>

<main>
	{@render children()}
</main>

Cubriremos la carga de datos en layouts en los próximos artículos: +layout.js y +layout.server.js.

Grupos de Layouts

A medida que tu aplicación crece, te encontrarás con una necesidad común: diferentes secciones requieren layouts completamente distintos, pero no quieres que el nombre de la sección aparezca en la URL. Una página de inicio de marketing y un panel de usuario viven ambos en el nivel superior — / y /dashboard — pero no se parecen en nada. La página de inicio tiene una imagen hero y un gran botón CTA; el panel tiene una barra de navegación lateral.

Un solo layout raíz no puede servir a ambos sin convertirse en un caos condicional. Pero sin alguna herramienta de organización, tendrías que usar prefijos de URL como /marketing/ y /app/ solo para obtener jerarquías de layouts separadas.

La solución de SvelteKit: grupos de layouts. Envuelve el nombre de un directorio en paréntesis y crea una jerarquía de layouts separada sin agregar nada a la URL. La carpeta (marketing) existe solo para la lógica de enrutamiento de SvelteKit — los usuarios nunca la ven en su barra de direcciones.

src/routes/
├── (marketing)/
│   ├── +layout.svelte     → Marketing layout (big headers, CTAs)
│   ├── +page.svelte       → / (homepage)
│   ├── about/
│   │   └── +page.svelte   → /about
│   └── pricing/
│       └── +page.svelte   → /pricing
├── (app)/
│   ├── +layout.svelte     → App layout (sidebar, compact)
│   ├── dashboard/
│   │   └── +page.svelte   → /dashboard
│   └── settings/
│       └── +page.svelte   → /settings
└── +layout.svelte         → Root layout (wraps both groups)

Los paréntesis le indican a SvelteKit: usa esto para organización, no para enrutamiento. Un visitante ve /about, no /(marketing)/about.

Los grupos de layouts son perfectos para mantener diseños drásticamente diferentes dentro de la misma aplicación — como un sitio de marketing público y un panel privado — sin saturar las URLs. También te permiten aplicar protección de autenticación a una sección completa con un solo +layout.server.js.

Aislamiento de Errores: Un Superpoder Oculto

Un beneficio frecuentemente pasado por alto de los layouts anidados es el aislamiento de errores. Cuando algo sale mal en una ruta anidada, SvelteKit encuentra el +error.svelte más cercano y renderiza el error allí — los layouts padre permanecen activos.

<!-- src/routes/dashboard/widget/+error.svelte -->
<script lang="ts">
	import { page } from '$app/state'
</script>

<div class="error-container">
	<h2>Widget Error</h2>
	<p>Something went wrong loading this widget, but the rest of your dashboard still works!</p>
	<pre>{JSON.stringify(page.error, null, 2)}</pre>
</div>

Un widget del panel que falla no derriba la barra lateral ni la navegación. Los usuarios pueden seguir trabajando mientras tú solucionas el problema.

Salir de los Layouts

A veces una página necesita salirse de su jerarquía de layouts. El ejemplo clásico: un reporte que debe incrustarse en un iframe debería renderizarse sin ningún chrome de navegación.

Usa la sintaxis @ para reiniciar a un ancestro de layout específico:

src/routes/
├── +layout.svelte              → Root layout
├── (app)/
│   ├── +layout.svelte          → App layout
│   └── dashboard/
│       └── reports/
│           ├── +page.svelte        → Uses full app layout
│           └── [id]/
│               └── embed/
│                   └── +page@.svelte → Resets to root layout only

+page@.svelte — Se renderiza solo dentro del layout raíz (omite todos los layouts intermedios)
+page@(app).svelte — Se renderiza dentro del layout del grupo (app) (omite los layouts más profundos)

La página de incrustación muestra el contenido del reporte sin ningún chrome del panel — perfecto para iframes. Los mismos datos, un contexto de presentación completamente diferente.

Persistencia de Layouts

Una de las cosas más importantes que debes entender sobre los layouts es que no se remontan durante la navegación entre rutas hermanas. Cuando un usuario hace clic de /blog/post-a a /blog/post-b, el layout del blog permanece activo — SvelteKit solo intercambia el contenido de +page.svelte dentro de él.

Por esto el estado del layout sobrevive las transiciones de página dentro de una sección. La posición de desplazamiento de una barra lateral, un toggle abierto/cerrado, una animación en curso — todo esto persiste porque el componente layout nunca se desmonta:

<!-- src/routes/blog/+layout.svelte -->
<script lang="ts">
	let { children } = $props()

	// Persists when navigating between blog posts.
	// Resets only when leaving /blog entirely.
	let sidebarOpen = $state(true)
</script>

<div class="blog-layout">
	<button onclick={() => (sidebarOpen = !sidebarOpen)}> Toggle Sidebar </button>

	{#if sidebarOpen}
		<aside>Sidebar content</aside>
	{/if}

	<main>
		{@render children()}
	</main>
</div>

El layout se remonta solo cuando el usuario navega a una ruta fuera de su subárbol — por ejemplo, saliendo de /blog completamente y yendo a /about. Esto significa que la configuración costosa del layout (obtener categorías de navegación, inicializar librerías, establecer conexiones WebSocket) ocurre una vez por visita a la sección, no una vez por página.

Patrones Comunes

Contenido Condicional en el Layout

Usa el objeto page de $app/state para renderizar condicionalmente UI basada en la ruta actual:

<script lang="ts">
	import { page } from '$app/state'
	let { children } = $props()
</script>

<header>
	<nav>
		<a href="/">Home</a>
		{#if page.url.pathname.startsWith('/admin')}
			<a href="/admin/users">Users</a>
			<a href="/admin/settings">Settings</a>
		{/if}
	</nav>
</header>

{@render children()}

Indicador de Carga de Navegación

Muestra una barra de progreso durante la navegación. En Svelte 5, navigating proviene de $app/state y se accede directamente — sin prefijo $, no es un store:

<script lang="ts">
	import { navigating } from '$app/state'
	let { children } = $props()
</script>

{#if navigating}
	<div class="loading-bar"></div>
{/if}

{@render children()}

<style>
	.loading-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: var(--brand);
		animation: loading 1s ease-in-out infinite;
	}

	@keyframes loading {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(100%);
		}
	}
</style>

Conclusión

El archivo +layout.svelte representa la solución de SvelteKit a uno de los desafíos más persistentes del desarrollo web: compartir estructura de UI sin repetición ni complejidad. Al definir layouts como componentes anidados que envuelven a sus descendientes, SvelteKit crea una jerarquía natural donde las preocupaciones compartidas viven en los niveles apropiados — navegación global en la raíz, barras laterales específicas de sección en layouts anidados, y contenido único de página en las páginas mismas.

La sintaxis {@render children()} es el mecanismo que compone toda tu aplicación — cada ruta se renderiza dentro de la cadena de wrappers de layout que están por encima de ella, y los layouts persisten a través de la navegación dentro de su subárbol para que la configuración costosa ocurra solo una vez.

Combinado con grupos de layouts para diferentes secciones del sitio, límites de error que contienen los fallos sin derribar toda la UI, y la capacidad de reiniciar layouts cuando una página realmente necesita estar sola, este sistema provee la flexibilidad para construir desde blogs simples hasta aplicaciones complejas, manteniéndose firmemente dentro de las convenciones del framework.

Puntos Clave

+layout.svelte envuelve todas las rutas descendientes — UI compartida que persiste a través de la navegación, con layouts anidados formando una jerarquía de componentes componibles
{@render children()} es obligatorio — renderiza el componente de página o layout anidado que ocupa esta ruta; omitirlo hace que todas las páginas sean invisibles
El layout raíz envuelve todo — src/routes/+layout.svelte es la capa HTML para toda la app; los errores en su función de carga recurren a src/error.html
Los layouts reciben datos mediante $props() en Svelte 5, poblados por +layout.js o +layout.server.js — tanto data como children provienen de $props()
Los layouts persisten dentro de su subárbol — solo se remontan cuando el usuario navega fuera de su alcance de ruta, preservando el estado y evitando configuraciones redundantes
Los grupos de layouts organizan rutas sin contaminar la URL — las carpetas (authenticated) y (marketing) crean jerarquías de layout separadas; los paréntesis son invisibles en la URL final
navigating de $app/state es un valor reactivo simple (no un store) — úsalo sin el prefijo $ para mostrar indicadores de carga durante la navegación
Rompe la herencia de layout con el reinicio @ — +page@.svelte se renderiza solo bajo el layout raíz, saltando todos los layouts intermedios cuando una página necesita estar sola

Ver También

Documentación Oficial de SvelteKit - Layouts - La guía oficial de componentes de layout
Grupos de Layouts - Organización de jerarquías de rutas
page de $app/state — Estado de navegación y ruta
Snippets en Svelte 5 - Comprensión de la sintaxis {@render}
Romper Layouts - Sintaxis de reinicio @