Domina Svelte 5: de fundamentos a producción
Runes ($state, $derived, $effect), componentes, transiciones, stores y más. Editor Monaco con el compilador real de Svelte ejecutándose en vivo en el navegador—aprende practicando.
- Paso 1
Svelte 1: ¿Qué es Svelte? Tu primer componente
Svelte es distinto de React o Vue en un aspecto fundamental: es un COMPILADOR, no una librería que s...
Comenzar lección - Paso 2
Svelte 2: Sintaxis de plantillas e interpolación de texto
Las llaves `{expression}` son la ventana de Svelte hacia JavaScript desde dentro de tu markup — pone...
Comenzar lección - Paso 3
Svelte 3: Atributos y atributos dinámicos
Cualquier atributo HTML puede llevar un `{expression}` igual que el contenido de texto: `<img src={u...
Comenzar lección - Paso 4
Svelte 4: Manejo de eventos
Svelte 5 maneja los eventos del DOM como atributos HTML comunes que resultan contener una función: `...
Comenzar lección - Paso 5
Svelte 5: $state — Fundamentos de la reactividad
La reactividad en Svelte 5 no es automática solo porque el valor de una variable cambie — un `let co...
Comenzar lección - Paso 6
Svelte 6: Renderizado condicional
`{#if}...{:else if}...{:else}{/if}` te permite reemplazar fragmentos enteros de markup según el esta...
Comenzar lección - Paso 7
Svelte 7: Renderizado de listas
`{#each items as item, index (item.id)}...{/each}` itera sobre cualquier valor tipo array: `item` qu...
Comenzar lección - Paso 8
Svelte 8: Enlace bidireccional (two-way binding)
En la lección 4 conectaste un input a mano: `value={name}` para mostrar el estado, más `oninput` par...
Comenzar lección - Paso 9
Svelte 9: $derived — Valores computados
Ya venís escribiendo valores derivados de forma inline — `{qty * price}` dentro del markup recalcula...
Comenzar lección - Paso 10
Svelte 10: Atajos de clase y estilo
Venís construyendo clases condicionales y estilos inline a mano — `class={done ? 'task done' : 'task...
Comenzar lección - Paso 11
Svelte 11: $state a Fondo
En el Módulo A conociste `$state` para primitivos — un contador, un interruptor. Pero `$state` es mu...
Comenzar lección - Paso 12
Svelte 12: $derived.by — Derivaciones Multi-Sentencia
El `$derived(expresión)` simple es perfecto para una línea: `let doubled = $derived(count * 2);`. Pe...
Comenzar lección - Paso 13
Svelte 13: $effect — Efectos Secundarios
`$state` y `$derived` describen DATOS. Tarde o temprano necesitás salir del componente — guardar en ...
Comenzar lección - Paso 14
Svelte 14: $effect.pre y el Momento de los Efectos
El `$effect` normal corre DESPUÉS de que Svelte aplicó sus cambios al DOM — perfecto para leer medic...
Comenzar lección - Paso 15
Svelte 15: $props — Props de Componentes
Toda app real está construida a partir de componentes que se hablan entre sí, y la forma más básica ...
Comenzar lección - Paso 16
Svelte 16: $bindable — Props Vinculadas en Ambos Sentidos
A veces un componente hijo ES el lugar natural para poseer un pedazo de estado de UI — la posición d...
Comenzar lección - Paso 17
Svelte 17: Props de Callback — Comunicación del Componente al Padre
No todo mensaje de hijo a padre debería ser un binding de dos sentidos — la mayoría de las veces el ...
Comenzar lección - Paso 18
Svelte 18: Ciclo de Vida — onMount y onDestroy
Los runes manejan la mayor parte de la lógica reactiva, pero dos funciones de ciclo de vida del paqu...
Comenzar lección - Paso 19
Svelte 19: Legado vs Runes — Una Mentalidad de Migración
Si abrís un código Svelte más viejo, vas a ver un dialecto distinto: `export let prop` en vez de `$p...
Comenzar lección - Paso 20
Svelte 20: untrack y tick — Funciones Utilitarias
Dos utilidades pequeñas de `'svelte'` completan el kit de runes para los casos límite que aparecen u...
Comenzar lección - Paso 21
Svelte 21: Fundamentos de Componentes y Composición
Cada componente de Svelte es simplemente un archivo .svelte — no existe una llamada a defineComponen...
Comenzar lección - Paso 22
Svelte 22: Snippets — Fragmentos Reutilizables Locales
A veces necesitas repetir un fragmento de markup varias veces dentro del MISMO archivo, con datos di...
Comenzar lección - Paso 23
Svelte 23: Pasar Hijos mediante Snippets
En Svelte 5, cualquier markup que un padre escriba ENTRE la etiqueta de apertura y cierre de un comp...
Comenzar lección - Paso 24
Svelte 24: Props de Snippet Nombradas — Reemplazando Slots Nombrados
El snippet children por defecto cubre una sola área de contenido, pero muchos componentes necesitan ...
Comenzar lección - Paso 25
Svelte 25: Componentes Dinámicos
A veces no sabes QUÉ componente renderizar hasta el tiempo de ejecución — un selector de pestañas, u...
Comenzar lección - Paso 26
Svelte 26: API de Contexto — setContext y getContext
Las props funcionan muy bien para uno o dos niveles de anidamiento, pero forzar un valor a través de...
Comenzar lección - Paso 27
Svelte 27: Directivas class: y style: en Profundidad
Alternar una clase CSS según el estado es tan común que Svelte le da su propia directiva: class:nomb...
Comenzar lección - Paso 28
Svelte 28: Acciones — la Directiva use:
Las acciones son la vía de escape de Svelte para trabajo imperativo del DOM que no encaja en el mode...
Comenzar lección - Paso 29
Svelte 29: Elementos Especiales — <svelte:window>, <svelte:document>, <svelte:body>
Algunos eventos y propiedades pertenecen a window, document, o document.body — no a ningún nodo del ...
Comenzar lección - Paso 30
Svelte 30: Capstone de Composición de Componentes — Un Widget de Acordeón
Es hora de combinar todo lo de este módulo en un widget pulido y reutilizable: un acordeón. Accordio...
Comenzar lección - Paso 31
Svelte 31: Bindings de Formularios en Profundidad
La directiva `bind:` de Svelte no es solo para inputs de texto. Los checkboxes usan `bind:checked` (...
Comenzar lección - Paso 32
Svelte 32: bind: en Props de Componentes
`bind:` no está limitado a elementos nativos — cualquier prop declarada con `$bindable()` se vuelve ...
Comenzar lección - Paso 33
Svelte 33: Transiciones
La directiva `transition:` se reproduce automáticamente cada vez que un bloque condicional agrega o ...
Comenzar lección - Paso 34
Svelte 34: Transiciones Personalizadas y Easing
Por dentro, cada transición incluida es simplemente una función con la forma `(node, params) => ({ d...
Comenzar lección - Paso 35
Svelte 35: Animaciones — animate:flip para Reordenar Listas
`animate:` es distinto de `transition:` — no se reproduce cuando un elemento entra o sale, se reprod...
Comenzar lección - Paso 36
Svelte 36: Motion — spring y tween
`svelte/motion` te da valores con física incorporada. tween(value, opts) se desplaza de A a B una ve...
Comenzar lección - Paso 37
Svelte 37: Acciones Personalizadas en Profundidad
Una acción es una función (node, params) => { ... } que se adjunta con `use:action={params}` y obtie...
Comenzar lección - Paso 38
Svelte 38: Capstone del Módulo D: Efectos, Timing y Pulido
Es hora de combinar todo lo que vimos en este módulo en un producto pequeño y pulido: un sistema de ...
Comenzar lección - Paso 39
Svelte 39: Stores Writable (de Escritura)
Los runes como $state manejan la reactividad DENTRO de un árbol de componentes, pero ¿qué pasa con e...
Comenzar lección - Paso 40
Svelte 40: Stores Readable (de Solo Lectura)
No todo el estado compartido debería poder escribirlo cualquiera. Un store `readable` envuelve un va...
Comenzar lección - Paso 41
Svelte 41: Stores Derivados (derived)
La mayoría de los valores interesantes en una app no son estado que asignas directamente — son CALCU...
Comenzar lección - Paso 42
Svelte 42: Stores Personalizados — El Contrato de Store
A Svelte en realidad no le importa cómo se construyó un store — solo que exponga un método `.subscri...
Comenzar lección - Paso 43
Svelte 43: Auto-Suscripción — La Sintaxis $store en Profundidad
El prefijo `$` no es JavaScript real — es una transformación que aplica el COMPILADOR DE SVELTE al p...
Comenzar lección - Paso 44
Svelte 44: $state vs Stores — Cuándo Usar Cada Uno
`$state` crea estado reactivo que pertenece a UNA instancia de UN componente — cada vez que se monta...
Comenzar lección - Paso 45
Svelte 45: Combinando Context + Stores
Un store importado globalmente te da exactamente UNA instancia compartida en toda la app — genial pa...
Comenzar lección - Paso 46
Svelte 46: Un Patrón de Router Ligero en el Cliente
Un router, en su núcleo, es solo estado — 'cuál pantalla está activa ahora' — más una forma de cambi...
Comenzar lección - Paso 47
Svelte 47: Patrones de Estado Global y a Nivel de Módulo
En el momento en que CUALQUIER archivo hace `import { notifications } from './notifications.js'`, el...
Comenzar lección - Paso 48
Svelte 48: Capstone del Módulo E — Construyendo un Carrito de Compras
Un carrito de compras es el capstone perfecto porque necesita todo lo de este módulo a la vez: un st...
Comenzar lección - Paso 49
Svelte 49: TypeScript con Svelte
Los componentes de Svelte pueden usar TypeScript agregando lang="ts" a la etiqueta <script>. El comp...
Comenzar lección - Paso 50
Svelte 50: El Modelo Mental de SvelteKit
SvelteKit es el framework oficial de aplicaciones construido sobre Svelte: agrega enrutamiento basad...
Comenzar lección - Paso 51
Svelte 51: Probar Componentes
Una suite de pruebas real de Svelte (Vitest + @testing-library/svelte) monta un componente en un DOM...
Comenzar lección - Paso 52
Svelte 52: Rendimiento — Bloques {#key} y $state.raw
Dos herramientas de rendimiento para cuando los valores por defecto de Svelte no son exactamente lo ...
Comenzar lección - Paso 53
Svelte 53: Fundamentos de Accesibilidad
El marcado accesible no es una habilidad separada de Svelte — son atributos HTML normales (role, ari...
Comenzar lección - Paso 54
Svelte 54: Manejo de Errores con <svelte:boundary>
Svelte 5 incluye un elemento real de límite de errores (error boundary): <svelte:boundary>. Envuelve...
Comenzar lección - Paso 55
Svelte 55: Variables de Entorno y Configuración
Las apps de SvelteKit corren sobre Vite, así que las variables de entorno siguen la convención de Vi...
Comenzar lección - Paso 56
Svelte 56: Compilación de Producción y Despliegue
Publicar una app de Svelte significa ejecutar un comando de build que compila cada archivo .svelte a...
Comenzar lección - Paso 57
Svelte 57: Mentalidad de Migración a Svelte 5 — Runas vs. Legacy
Antes, en el Módulo B (lección 19), comparaste la reactividad legacy (export let, $:) contra las run...
Comenzar lección - Paso 58
Svelte 58: Capstone — ¡A Producción!
Pasaste de '¿qué es un compilador?' a límites de errores, accesibilidad y pipelines de despliegue. E...
Comenzar lección