Presentación
Svelte es un framework open source para construir interfaces Web a partir de componentes que utilizan HTML, CSS y JavaScript.
Su principal particularidad reside en su compilador. Una parte importante del trabajo se realiza durante el build: los componentes declarativos se transforman en JavaScript capaz de actualizar con precisión el DOM dentro del navegador.
Este enfoque difiere de las bibliotecas que realizan más trabajo durante la ejecución y permite a Svelte ofrecer una sintaxis relativamente concisa.
Un archivo .svelte puede agrupar lógica, markup y estilos dentro de un mismo componente. Svelte también admite TypeScript, estilos encapsulados, animaciones, transiciones y diferentes mecanismos para compartir estado.
Desde Svelte 5, el sistema moderno de reactividad se basa principalmente en las runes, especialmente $state, $derived, $effect y $props.
Para construir una aplicación completa con routing, renderizado servidor y funciones backend, el ecosistema oficial se apoya en SvelteKit, que sigue siendo independiente del propio framework Svelte.
A 3 de octubre de 2026, Svelte 5.57.1 constituye la última versión estable.
Funcionalidades
Componentes compilados
Las interfaces Svelte se organizan alrededor de componentes.
Un archivo .svelte puede contener un bloque <script>, el markup de la interfaz y un bloque <style>.
El compilador transforma después este componente en JavaScript destinado al navegador o al renderizado servidor.
Esta compilación permite a Svelte generar directamente las operaciones necesarias para actualizar la interfaz.
Runes y reactividad
Svelte 5 introduce las runes como mecanismo moderno de reactividad.
$state declara un estado reactivo, mientras que $derived representa un valor calculado a partir de otros datos reactivos.
$effect permite ejecutar una lógica cuando cambian sus dependencias, especialmente para comunicarse con una API externa, manipular un canvas o integrar una biblioteca de terceros.
Las dependencias se siguen automáticamente cuando se utilizan valores reactivos.
Props
En los componentes que utilizan la sintaxis moderna, $props() permite recuperar las propiedades transmitidas por el componente padre.
Las props pueden tiparse con TypeScript y desestructurarse como valores JavaScript clásicos.
Svelte también admite bindings cuando determinados datos deben poder modificarse entre componentes de forma controlada.
Templates
Los templates Svelte utilizan una sintaxis cercana a HTML.
Los bloques {#if}, {#each} y {#await} permiten gestionar respectivamente condiciones, colecciones y operaciones asíncronas.
Las expresiones JavaScript pueden insertarse directamente dentro del markup.
Svelte 5 también utiliza snippets y {@render} para componer y transmitir determinadas partes reutilizables de contenido entre componentes.
Eventos y bindings
Los manejadores de eventos pueden declararse directamente como propiedades, por ejemplo onclick.
La directiva bind: permite sincronizar un valor con determinados elementos de formulario o propiedades DOM.
Puede utilizarse especialmente con bind:value, bind:checked o bind:this.
Estos mecanismos cubren una gran parte de las interacciones habituales sin añadir una capa importante de código intermedio.
Estilos encapsulados
Los estilos declarados dentro de un componente .svelte están encapsulados por defecto.
El compilador adapta los selectores para limitar su alcance al componente correspondiente.
Sigue siendo posible definir deliberadamente estilos globales cuando la aplicación lo necesita.
Este enfoque facilita la creación de componentes autónomos sin imponer una biblioteca CSS concreta.
Transiciones y animaciones
Svelte proporciona herramientas integradas para gestionar transiciones y animaciones.
Funciones como fade, fly, slide o crossfade pueden acompañar la aparición y desaparición de elementos.
La directiva animate: puede gestionar determinados desplazamientos relacionados con cambios en listas.
Estas funciones permiten cubrir muchas necesidades de animación sin añadir una dependencia adicional.
Attachments y actions
Svelte permite asociar una lógica a un elemento DOM.
Las actions, utilizadas históricamente con use:, siguen estando disponibles.
Desde Svelte 5.29, los attachments ofrecen un enfoque más flexible y componible para ejecutar lógica cuando se monta un elemento o cuando cambian determinadas dependencias.
Pueden servir especialmente para conectar una biblioteca externa o una API DOM específica a un elemento.
Stores
Svelte continúa proporcionando stores con las variantes writable, readable y derived.
Ofrecen un contrato de suscripción sencillo para compartir o conectar un estado reactivo.
Con Svelte 5, las runes permiten sin embargo gestionar mucho más fácilmente estado reactivo dentro de archivos .svelte.js o .svelte.ts.
Los stores siguen siendo especialmente útiles para determinadas bibliotecas existentes, fuentes de datos asíncronas o sistemas que respetan su contrato de suscripción.
TypeScript
Svelte admite directamente TypeScript dentro de los componentes.
Un bloque <script lang="ts"> puede utilizar anotaciones de tipos, interfaces y otras funciones que no necesitan transformación TypeScript específica durante la ejecución.
Las herramientas Svelte también proporcionan análisis de componentes y comprobación de tipos.
El comando svelte-check puede utilizarse dentro de un proyecto o una cadena de integración continua para detectar diferentes problemas.
Vite y herramientas de desarrollo
Svelte se integra con Vite para los proyectos modernos.
La cadena de desarrollo proporciona compilación rápida, Hot Module Replacement y builds de producción.
El CLI oficial sv permite crear y mantener aplicaciones del ecosistema Svelte.
Para una nueva aplicación completa, sv create genera actualmente un proyecto basado en SvelteKit.
Svelte y SvelteKit
Svelte se centra principalmente en componentes e interfaz de usuario.
Por sí solo no proporciona una arquitectura completa de routing, carga de datos servidor o backend comparable a un framework full-stack.
SvelteKit amplía Svelte con routing basado en archivos, SSR, generación estática, endpoints servidor, formularios, carga de datos y despliegue mediante diferentes adapters.
SvelteKit 3 constituye desde octubre de 2026 la generación actual del framework oficial de aplicaciones.
Casos de uso
Construir una interfaz Web interactiva
Svelte resulta adecuado para interfaces compuestas por formularios, tablas, componentes dinámicos e interacciones frecuentes.
La reactividad integrada permite vincular directamente el estado con la visualización.
Añadir un componente a un proyecto existente
El compilador Svelte también puede producir componentes destinados a integrarse dentro de una arquitectura más amplia.
Por tanto, no es necesario adoptar inmediatamente SvelteKit para cada uso.
Desarrollar una SPA
Svelte puede servir como capa UI para una aplicación de una sola página.
Para una aplicación estructurada con verdadero routing y carga de datos, SvelteKit constituye generalmente la solución recomendada.
Construir una aplicación full-stack
Asociado a SvelteKit, Svelte puede servir como base para una aplicación que incluya renderizado servidor, rutas, formularios y lógica backend.
El mismo ecosistema puede cubrir así tanto componentes interactivos como la estructura completa del sitio.
Crear una biblioteca de componentes
Los componentes .svelte, sus estilos encapsulados y su soporte TypeScript resultan adecuados para crear design systems y bibliotecas de interfaz reutilizables.
Conclusión
Svelte se distingue por un enfoque donde el compilador realiza una parte importante del trabajo antes de la ejecución en el navegador.
Sus componentes agrupan de forma natural markup, lógica y estilos, mientras que las runes de Svelte 5 proporcionan un modelo de reactividad explícito que también puede funcionar fuera de los componentes.
Transiciones, bindings, TypeScript y estilos encapsulados completan el framework sin imponer una arquitectura demasiado pesada.
Sin embargo, Svelte continúa centrado principalmente en la interfaz. Para routing, renderizado servidor y funciones full-stack, SvelteKit constituye la extensión oficial.
Para crear interfaces Web modernas con una sintaxis compacta, fuerte integración del compilador y un ecosistema relativamente coherente, Svelte ofrece una alternativa diferenciada frente a frameworks frontend más tradicionales.
Puntos de atención
-
Svelte 5.57.1 es la última versión estable a 3 de octubre de 2026.
-
Svelte es gratuito y open source bajo licencia MIT, incluido para uso comercial.
-
Svelte 5 utiliza runes como sintaxis moderna de reactividad.
$state,$derived,$effecty$propssustituyen varios mecanismos implícitos utilizados en versiones anteriores. -
La antigua sintaxis de Svelte 3 y 4 sigue siendo ampliamente compatible con Svelte 5. Por tanto, una migración completa a runes no es inmediatamente necesaria para todos los componentes existentes.
-
Svelte es principalmente un framework UI. Para construir una aplicación completa, el equipo Svelte recomienda generalmente SvelteKit.
-
SvelteKit es un proyecto independiente. Su versión 3.0 se publicó el 1 de octubre de 2026 y no corresponde al número de versión del propio Svelte.
-
Los stores continúan siendo compatibles, pero las runes cubren actualmente parte de las necesidades que anteriormente requerían un store.
-
Las actions siguen siendo utilizables, aunque los attachments introducidos en Svelte 5 ofrecen actualmente una solución más flexible para nuevos usos.
-
Svelte 5 necesita un navegador moderno. Los navegadores antiguos como Internet Explorer no son compatibles.
-
TypeScript está directamente soportado, pero determinadas funciones TypeScript que necesitan transformación a JavaScript pueden requerir un preprocesador.
-
El HTML no fiable debe tratarse siempre con precaución. Como en cualquier framework Web, inyectar contenido de usuario sin sanear puede crear vulnerabilidades XSS.
-
Las dependencias Svelte deben mantenerse actualizadas. En 2026 se publicaron varios correctivos de seguridad relacionados especialmente con SSR e inyección de contenido.