Esbelto

Svelte es un marco de software front-end basado en componentes, gratuito y de código abierto ^{[ 2 ]} y lenguaje ^{[ 3 ]} creado por Rich Harris y mantenido por el equipo central de Svelte. ^{[ 4 ]}

Svelte no es una biblioteca monolítica de JavaScript importada por las aplicaciones: en cambio, Svelte compila plantillas HTML a código especializado que manipula el DOM directamente, lo que puede reducir el tamaño de los archivos transferidos y ofrecer un mejor rendimiento del cliente. ^{[ 5 ] [ 6 ] [ 7 ]} El código de la aplicación también es procesado por el compilador, insertando llamadas para recalcular automáticamente los datos ^{[ 2 ]} y volver a renderizar los elementos de la interfaz de usuario cuando se modifican los datos de los que dependen. ^{[ 8 ]} Esto también evita la sobrecarga asociada con las representaciones intermedias en tiempo de ejecución, como el DOM virtual , ^{[ 9 ]} a diferencia de los frameworks tradicionales (como React y Vue ) que realizan la mayor parte de su trabajo en tiempo de ejecución, es decir, en el navegador. ^{[ 5 ] [ 8 ] [ 4 ] [ 10 ] [ 2 ] [ 9 ]}

El compilador en sí está escrito en JavaScript . ^{[ 11 ] [ 10 ]} Su código fuente tiene licencia MIT y está alojado en GitHub . ^{[ 10 ]} Entre las bibliotecas frontend comparables, Svelte tiene uno de los tamaños de paquete más pequeños, con apenas 2 KB. ^{[ 12 ]}

El predecesor de Svelte es Ractive.js, que Rich Harris creó en 2013. ^{[ 13 ]}

La versión 1 de Svelte fue escrita en JavaScript y se lanzó el 29 de noviembre de 2016. ^{[ 14 ]} El nombre Svelte fue elegido por Rich Harris y sus compañeros de trabajo en The Guardian . ^{[ 14 ]}

La versión 2 de Svelte se publicó el 19 de abril de 2018. Su objetivo era corregir lo que los mantenedores consideraban errores en la versión anterior, como la sustitución de llaves dobles por llaves simples. ^{[ 14 ]}

La versión 3 de Svelte fue escrita en TypeScript y se lanzó el 21 de abril de 2019. Replanteó la reactividad utilizando el compilador para instrumentar las asignaciones en segundo plano. ^{[ 2 ]}

El framework web SvelteKit se anunció en octubre de 2020 y entró en fase beta en marzo de 2021. ^{[ 15 ] [ 16 ]} SvelteKit 1.0 se lanzó en diciembre de 2022 después de dos años de desarrollo. ^{[ 17 ]}

La versión 4 de Svelte se publicó el 22 de junio de 2023. Fue una versión de mantenimiento, más pequeña y rápida que la versión 3. ^{[ 18 ]} Parte de esta versión fue una reescritura interna de TypeScript a JavaScript, con anotaciones de tipo JSDoc . ^{[ 11 ]} Esto generó confusión en la comunidad de desarrolladores, la cual fue abordada por el creador de Svelte, Rich Harris. ^{[ 19 ] [ 20 ]}

La versión 5 de Svelte se lanzó el 19 de octubre de 2024 en Svelte Summit Fall 2024, con Rich Harris realizando el lanzamiento en vivo junto a otros mantenedores de Svelte. Svelte 5 fue una reescritura completa de Svelte, cambiando conceptos centrales como la reactividad y la reutilización. ^{[ 21 ]} Su característica principal, las runas , reestructuró la forma en que se declara y utiliza el estado reactivo. Las runas son macros similares a funciones que se utilizan para declarar un estado reactivo, o código que utiliza estados reactivos. Estas runas son utilizadas por el compilador para indicar valores que pueden cambiar y de los que dependen otros estados o el DOM. ^{[ 22 ]} Svelte 5 también introduce los Snippets, que son "fragmentos" de código reutilizables que se definen una vez y se pueden reutilizar en cualquier otro lugar del componente. ^{[ 23 ]} Svelte 5 fue recibido inicialmente con controversia debido a sus muchos cambios y, por lo tanto, a las obsolescencias causadas principalmente por las runas. Sin embargo, la mayor parte de esto ha disminuido desde el anuncio inicial de las runas y el perfeccionamiento posterior de Svelte 5.

También en Svelte Summit Fall 2024, Ben McCann anunció la CLI de Svelte bajo el nombre de paquete sv en npm . ^{[ 24 ]}

A principios de 2025, el equipo de Svelte anunció Asynchronous Svelte, un conjunto de características experimentales centrado en la reactividad asíncrona en Svelte mediante expresiones await . ^{[ 25 ]} A partir de agosto de 2025, la característica está disponible a través de una opción de compilador experimental. ^{[ 26 ]} Esto coincidió con el lanzamiento experimental de funciones remotas, una característica RPC en SvelteKit, el metaframework de Svelte . ^{[ 27 ]}

Los principales colaboradores iniciales de Svelte se involucraron con Conduitry uniéndose con el lanzamiento de Svelte 1, Tan Li Hau uniéndose en 2019 y Ben McCann uniéndose en 2020. ^{[ 14 ]} Rich Harris y Simon Holthausen se unieron a Vercel para trabajar en Svelte a tiempo completo en 2022. ^{[ 28 ]} Dominic Gannaway se unió a Vercel desde el equipo principal de React para trabajar en Svelte a tiempo completo en 2023. ^{[ 29 ]}

Las aplicaciones y componentes de Svelte se definen en .sveltearchivos, que son archivos HTML extendidos con una sintaxis de plantillas basada en JavaScript y similar a JSX .

Las características principales de Svelte se acceden a través de runas, que sintácticamente se parecen a funciones, pero el compilador las utiliza como macros . Estas runas incluyen:

• La $stateruna, utilizada para declarar un valor de estado reactivo
• La $derivedruna, utilizada para declarar un estado reactivo derivado de uno o más estados
• La $effectruna, utilizada para declarar código que se vuelve a ejecutar cada vez que cambian sus dependencias.

A partir de Svelte 5 , el framework introdujo una revisión significativa de la reactividad que reemplaza las declaraciones reactivas `$:` anteriores con nuevas runas como $state, $derived, y $effect. ^{[ 30 ]} La $effectruna ahora se usa para operaciones posteriores al renderizado sin modificar el estado, mientras que $derivedse usa para cálculos que dependen de otros valores reactivos. Este cambio tiene como objetivo simplificar el modelo mental de la reactividad y hacer que la lógica del componente sea más explícita. ^{[ 31 ]}

Además, la sintaxis se puede usar para la creación de plantillas en elementos y componentes HTML, ^{[ 32 ]} de forma similar a las plantillas literales en JavaScript. Esta sintaxis también se puede usar en atributos de elementos para usos como el enlace de datos bidireccional , los detectores de eventos y el estilo CSS . A continuación se muestra un ejemplo de lista de tareas pendientes creado con Svelte:{ JavaScript code }

<script> let value = $ state ( ) ; const todos = $ state ( [ ] ) ; const all = $derived ( todos.length ); const done = $ derived ( todos.filter ( todo = > todo.done ) .length ) ; function onsubmit ( e ) { e.preventDefault ( ) ; todos.push ( { text : value , done : false } ) ; e.target.reset ( ) ; } </script>< span > Lista de tareas </ span > < small > completadas {done}/{all} </ small >< br /> {#each todos as { texto, hecho }, índice} < input type = "checkbox" bind:checked = "{todos[index].done}" id = "{text} " /> < label for =" { text}" class:done > { text} </label> < button onclick = " { () = > todos.splice (index, 1)} " >Eliminar </button> <br /> {/cada} < form { onsubmit } > <br /> < label for = "input" > Agregar tarea </label> <br /> < input type = " text " name = " input " bind : value / > </form><style> span { font - size : 20px ; font - weight : bold ; }. hecho { text-decoration-line : line-through ; } </ style >

Los responsables del mantenimiento de Svelte crearon SvelteKit como la forma oficial de construir proyectos con Svelte. Se trata de un framework full-stack al estilo Next.js / Nuxt que reduce drásticamente la cantidad de código que se envía al navegador. Anteriormente, los responsables habían creado Sapper, que fue el predecesor de SvelteKit. ^{[ 35 ]}

Los responsables de Svelte también mantienen varias integraciones para proyectos de software populares de la organización Svelte, incluidas integraciones para Vite , Rollup, Webpack , TypeScript, VS Code , Chrome Developer Tools, ESLint y Prettier. ^{[ 36 ]} Varios proyectos externos, como Storybook, también han creado integraciones con Svelte y SvelteKit.

A fecha de junio de 2026, la última versión es la 2.67.0 .

Vue.js modeló su API y sus componentes de archivo único a partir de Ractive.js, el predecesor de Svelte. ^{[ 13 ]}

Svelte es ampliamente elogiado por los desarrolladores. Obtuvo el primer puesto en varias encuestas a gran escala realizadas a desarrolladores, y fue elegido como el framework web más querido de Stack Overflow en 2021 y como el framework frontend de JavaScript más satisfecho de 2020. ^{[ 37 ] [ 38 ]}

Las encuestas recientes siguen mostrando la alta satisfacción de los desarrolladores con Svelte, y la encuesta State of JS de 2024 mantiene su posición entre los frameworks frontend más elogiados. ^{[ 39 ]} La encuesta para desarrolladores de Stack Overflow de 2024 informó que el 73 % de los desarrolladores que usaron Svelte quieren seguir trabajando con él, y señaló que el propio equipo de Stack Overflow usó Svelte para construir su sitio de resultados de la encuesta para desarrolladores de 2024. ^{[ 40 ]}

Svelte ha sido adoptado por varias empresas web de alto perfil, entre ellas The New York Times , Google , Apple , Spotify , Radio France , ^{[ 41 ]} Square , Yahoo , ByteDance , Rakuten , Bloomberg , Reuters , Ikea , Facebook , Logitech y Brave . ^{[ 42 ] [ 43 ] [ 44 ]}

Un grupo comunitario formado principalmente por personas que no se dedican al mantenimiento, conocido como la Svelte Society, organiza la conferencia Svelte Summit, publica un boletín informativo sobre Svelte, presenta un podcast sobre Svelte y mantiene un directorio de herramientas, componentes y plantillas de Svelte. ^{[ 45 ]}

• Biblioteca JavaScript
• Comparación de frameworks web basados ​​en JavaScript

• Sitio web oficial