{"parse":{"title":"Svelte","pageid":13864521,"revid":1360737170,"redirects":[],"text":"

For a definition of the term \"svelte\", see the Wiktionary entry svelte.

Svelte

Original author	Rich Harris
Developers	The Svelte maintainers, and various contributors. Includes Rich Harris, Conduitry, Tan Li Hau, Ben McCann, and Simon Holthausen
Release	26 November 2016; 9 years ago (26 November 2016)

Stable release	5.55.7^[1] $\"Edit$ \n / 14 May 2026; 4 months ago (14 May 2026)
\n
Written in	JavaScript $\"Edit$
Platform	Web platform
Type	Web framework
License	MIT License
Website	Official website $\"Edit$
Repository	github.com/sveltejs/svelte $\"Edit$ \n

Svelte is a free and open-source component-based front-end software framework^[2] and language^[3] created by Rich Harris and maintained by the Svelte core team.^[4]\n

Svelte is not a monolithic JavaScript library imported by applications: instead, Svelte compiles HTML templates to specialized code that manipulates the DOM directly, which may reduce the size of transferred files and give better client performance.^[5]^[6]^[7] Application code is also processed by the compiler, inserting calls to automatically recompute data^[2] and re-render UI elements when the data they depend on is modified.^[8] This also avoids the overhead associated with runtime intermediate representations, such as virtual DOM,^[9] unlike traditional frameworks (such as React and Vue) which carry out the bulk of their work at runtime, i.e. in the browser.^[5]^[8]^[4]^[10]^[2]^[9]\n

The compiler itself is written in JavaScript.^[11]^[10] Its source code is licensed under MIT License and hosted on GitHub.^[10] Among comparable frontend libraries, Svelte has one of the smallest bundle footprints at merely 2KB.^[12]\n

\n\n

History

The predecessor of Svelte is Ractive.js, which Rich Harris created in 2013.^[13]\n

Version 1 of Svelte was written in JavaScript and was released on 29 November 2016.^[14] The name Svelte was chosen by Rich Harris and his coworkers at The Guardian.^[14]\n

Version 2 of Svelte was released on 19 April 2018. It set out to correct what the maintainers viewed as mistakes in the earlier version such as replacing double curly braces with single curly braces.^[14]\n

Version 3 of Svelte was written in TypeScript and was released on 21 April 2019. It rethought reactivity by using the compiler to instrument assignments behind the scenes.^[2]\n

The SvelteKit web framework was announced in October 2020 and entered beta in March 2021.^[15]^[16] SvelteKit 1.0 was released in December 2022 after two years in development.^[17]\n

Version 4 of Svelte was released on 22 June 2023. It was a maintenance release, smaller and faster than version 3.^[18] A part of this release was an internal rewrite from TypeScript back to JavaScript, with JSDoc type annotations.^[11] This was met with confusion from the developer community, which was addressed by the creator of Svelte, Rich Harris.^[19]^[20]\n

Version 5 of Svelte was released on October 19, 2024 at Svelte Summit Fall 2024 with Rich Harris cutting the release live while joined by other Svelte maintainers. Svelte 5 was a ground-up rewrite of Svelte, changing core concepts such as reactivity and reusability.^[21] Its primary feature, runes, reworked how reactive state is declared and used. Runes are function-like macros that are used to declare a reactive state, or code that uses reactive states. These runes are used by the compiler to indicate values that may change and are depended on by other states or the DOM.^[22] Svelte 5 also introduces Snippets, which are reusable \"snippets\" of code that are defined once and can be reused anywhere else in the component.^[23] Svelte 5 was initially met with controversy due to its many changes, and thus deprecations caused primarily by runes. However, most of this has subsided since the initial announcement of runes, and the further refining of Svelte 5.^{[citation needed]} \n

Also at Svelte Summit Fall 2024, Ben McCann announced the Svelte CLI under the sv package name on npm.^[24]\n

In early 2025, the Svelte team announced Asynchronous Svelte, an experimental feature set centered around asynchronous reactivity in Svelte using await expressions.^[25] As of August 2025, the feature is available via an experimental compiler option.^[26] This coincided with the experimental release of remote functions, an RPC feature in SvelteKit, Svelte's metaframework.^[27] \n

Key early contributors to Svelte became involved with Conduitry joining with the release of Svelte 1, Tan Li Hau joining in 2019, and Ben McCann joining in 2020.^[14] Rich Harris and Simon Holthausen joined Vercel to work on Svelte fulltime in 2022.^[28] Dominic Gannaway joined Vercel from the React core team to work on Svelte fulltime in 2023.^[29]\n

Syntax

Svelte applications and components are defined in .svelte files, which are HTML files extended with templating syntax that is based on JavaScript and is similar to JSX.\n

\nSvelte's core features are accessed through runes, which syntactically look like functions, but are used as macros by the compiler. These runes include:

The $state rune, used for declaring a reactive state value
The $derived rune, used for declaring reactive state derived from one or more states\n
The $effect rune, used for declaring code that reruns whenever its dependencies change\n

Starting with Svelte 5, the framework introduced a significant reactivity overhaul that replaces the previous `$:` reactive declarations with new runes such as $state, $derived, and $effect.^[30] The $effect rune is now used for post-render operations without modifying state, while $derived is used for computations that depend on other reactive values. This change aims to simplify the mental model of reactivity and make component logic more explicit.^[31]\n

Additionally, the { JavaScript code } syntax can be used for templating in HTML elements and components,^[32] similar to template literals in JavaScript. This syntax can also be used in element attributes for uses such as two-way data binding, event listeners, and CSS styling. \nA Todo List example made in Svelte is below: \n

<script>\n\tlet value = $state();\n\tconst todos = $state([]);\n\tconst all = $derived(todos.length);\n\tconst done = $derived(todos.filter(todo => todo.done).length);\n\t\n\tfunction onsubmit(e) {\n\t\t\te.preventDefault();\n\t\t\ttodos.push({ text: value, done: false });\n\t\t\te.target.reset();\n\t}\n</script>\n\n<span>Todo List</span>\n<small>completed {done}/{all}</small><br />\n\n{#each todos as { text, done }, index}\n\t<input type=\"checkbox\" bind:checked={todos[index].done} id={text} />\t\n\t<label for={text} class:done>{text}</label>\n\t<button onclick={() => todos.splice(index, 1)}>Remove</button>\n\t<br />\n{/each}\n\n<form {onsubmit}>\n\t<br />\n\t<label for=\"input\">Add todo</label>\n\t<br />\n\t<input type=\"text\" name=\"input\" bind:value />\n</form>\n\n<style>\n\tspan {\n\t\tfont-size: 20px;\n\t\tfont-weight: bold;\n\t}\n\n\t.done {\n\t\ttext-decoration-line: line-through;\n\t}\n</style>\n

Associated projects

SvelteKit
Release	()

Stable release	1.15.5^[33]^[34] $\"Edit$ \n / 13 April 2023; 3 years ago (13 April 2023)
\n
Written in	JavaScript, TypeScript, Svelte $\"Edit$
Platform	Web platform
Type	full-stack web framework
License	MIT License
Website	svelte.dev/docs/kit
Repository	https://github.com/sveltejs/kit $\"Edit$

The Svelte maintainers created SvelteKit as the official way to build projects with Svelte. It is a Next.js/Nuxt-style full-stack framework that dramatically reduces the amount of code that gets sent to the browser. The maintainers had previously created Sapper, which was the predecessor of SvelteKit.^[35]\n

The Svelte maintainers also maintain a number of integrations for popular software projects under the Svelte organization including integrations for Vite, Rollup, Webpack, TypeScript, VS Code, Chrome Developer Tools, ESLint, and Prettier.^[36] A number of external projects such as Storybook have also created integrations with Svelte and SvelteKit.\n

As of June 2026, the latest version is 2.67.0 .\n

Influence

Vue.js modeled its API and single-file components after Ractive.js, the predecessor of Svelte.^[13]\n

Adoption

Svelte is widely praised by developers. Taking the top ranking in multiple large scale developer surveys, it was chosen as the Stack Overflow 2021 most loved web framework and 2020 State of JS frontend framework with the most satisfied developers.^[37]^[38]\n

Recent surveys continue to show Svelte's strong developer satisfaction, with the 2024 State of JS survey maintaining its position among the most praised frontend frameworks.^[39] The 2024 Stack Overflow Developer Survey reported that 73% of developers who used Svelte want to continue working with it, and noted that Stack Overflow's own team used Svelte for building their 2024 Developer Survey results site.^[40]\n

Svelte has been adopted by a number of high-profile web companies including The New York Times, Google, Apple, Spotify, Radio France,^[41] Square, Yahoo, ByteDance, Rakuten, Bloomberg, Reuters, Ikea, Facebook, Logitech, and Brave.^[42]^[43]^[44]\n

A community group of primarily non-maintainers, known as the Svelte Society, run the Svelte Summit conference, write a Svelte newsletter, host a Svelte podcast, and host a directory of Svelte tooling, components, and templates.^[45]\n

References

^ https://github.com/sveltejs/svelte/releases/tag/svelte%405.55.7. {{cite web}}: Missing or empty |title= (help)\n
^ ^a ^b ^c ^d Harris, Rich (2019-04-22). \"Svelte 3: Rethinking reactivity\". svelte.dev. Retrieved 2021-08-07.\n
^ Harris, Rich (2018-11-26). \"The truth about Svelte\". GitHub Gist. Retrieved 2022-12-21.\n
^ ^a ^b Krill, Paul (December 2, 2016). \"Slim, speedy Svelte framework puts JavaScript on a diet\". InfoWorld.\n
^ ^a ^b \"React vs. Svelte, the JavaScript build-time framework\". react-etc.net. November 30, 2016. Archived from the original on July 10, 2017. Retrieved December 27, 2025.\n
^ \"8 Most Interesting JavaScript Frameworks to Learn in 2019\". Retrieved December 27, 2025.\n
^ Wang, Wenhao (September 12, 2025). \"Understanding Virtual DOM and Why Svelte/SolidJS Opt Out\". Retrieved December 27, 2025.\n
^ ^a ^b \"Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris\". InfoQ.\n
^ ^a ^b Harris, Rich (2018-12-27). \"Virtual DOM is pure overhead\". svelte.dev.\n
^ ^a ^b ^c \"GitHub - sveltejs/svelte: Cybernetically enhanced web apps\". January 11, 2020 – via GitHub.\n
^ ^a ^b \"TS to JSDoc Conversion #8569\". GitHub.com.\n
^ Frontendeng.dev (2023-08-01). \"Svelte vs React: Which framework is better?\". frontendeng.dev.\n
^ ^a ^b Świstak, Tomasz (2020-11-19). \"About the Svelte JavaScript framework\". Blog. ValueLogic. Archived from the original on 2022-03-27. Retrieved 2021-06-10. By the way, Vue's syntax has been influenced by Ractive.js, a direct predecessor of Svelte.\n
^ ^a ^b ^c ^d \"Svelte Origins: A JavaScript Documentary\". YouTube. 21 June 2022. Retrieved 2022-07-09.\n
^ \"Rich Harris: Futuristic Web Development\". YouTube. 19 October 2020. Archived from the original on 2021-12-12. Retrieved 2021-08-03.\n
^ Harris, Rich (2021-03-23). \"SvelteKit is in public beta\". svelte.dev. Retrieved 2021-08-03.\n
^ \"Accouncing SvelteKit 1.0\". 2022-12-14. Retrieved 2022-12-16.\n
^ team, The Svelte (2023-06-22). \"Announcing Svelte 4\". svelte.dev. Retrieved 2023-08-08.\n
^ \"TS to JSDoc Conversion\". Hacker News (news.ycombinator.com). 2023-05-10.\n
^ \"Lordy, I did not expect an internal refactoring PR to end up #1 on Hacker News. ...\" Hacker News (news.ycombinator.com). 2023-05-10.\n
^ \"Svelte 5 is alive\". svelte.dev. 22 October 2024.\n
^ \"Introducing runes\". svelte.dev. 20 September 2023.\n
^ \"{#snippet ...}\". Docs. svelte.dev.\n
^ McCann, Ben (2024-10-24). \"Introducing the new Svelte CLI\". svelte.dev. Retrieved 2024-12-20.\n
^ Harris, Rich (2025-04-28). \"Asynchronous Svelte · sveltejs/svelte · Discussion #15845\". GitHub.\n
^ \"await • Docs • Svelte\". Retrieved 2025-08-13.\n
^ Holthausen, Simon (2025-06-17). \"Remote Functions · sveltejs/kit · Discussion #13897\". GitHub.\n
^ Harris, Rich (Nov 11, 2021). \"today is a big day for @sveltejs: i've joined @vercel to work on it full time!\". Twitter. Retrieved 2022-09-04.\n
^ \"trueadm/status/1640761270566633472\". X (formerly Twitter). Retrieved 2023-09-30.\n
^ \"Svelte 5 is Alive\". Svelte.dev. 2023-11-16. Retrieved 2025-10-20.\n
^ \"Migration to Svelte 5 — Reactivity Overhaul\". Svar.dev. 2024-04-18. Retrieved 2025-10-20.\n
^ \"Svelte tutorial page\". svelte.dev. Retrieved 2022-07-06.\n
^ \"@sveltejs/kitTypeScript icon, indicating that this package has built-in type declarations1.15.5\". npmjs. Retrieved 26 November 2024.\n
^ \"@sveltejs/kit@1.15.5\". GitHub. Retrieved 26 November 2024.\n
^ Harris, Rich (December 31, 2017). \"Sapper: Towards the ideal web app framework\". svelte.dev. Retrieved 2022-11-29.\n
^ \"Svelte\". GitHub. Retrieved 2021-08-03.\n
^ \"Stack Overflow Developer Survey 2021\". Stack Overflow. Archived from the original on 2022-06-25. Retrieved 2021-10-26.\n
^ \"State of JS 2020: Front-end Frameworks\". 2020.stateofjs.com. Retrieved 2021-10-26.\n
^ \"State of JavaScript 2024: Front-end Frameworks\". 2024.stateofjs.com. Retrieved 2025-06-28.\n
^ \"2024 Stack Overflow Developer Survey\". Stack Overflow. Retrieved 2025-06-28.\n
^ \"Radio France migrated their site to SvelteKit\". reddit.com. 2 September 2021. Retrieved 2024-06-04.\n
^ \"Svelte • Cybernetically enhanced web apps\". svelte.dev. Retrieved 2021-08-03.\n
^ \"Websites using Svelte - Wappalyzer\". www.wappalyzer.com. Retrieved 2021-08-03.\n
^ \"Your Profile, Your Home Experience\". yourhome.fb.com. Retrieved 2021-12-01.\n
^ \"Home - Svelte Society\". sveltesociety.dev. Retrieved 2021-08-03.\n

External links

Official website $\"Edit$

v t e Application frameworks
Open-source	\n Apache Cordova \n Avalonia UI \n Codename One \n .NET MAUI \n Eclipse Rich Client Platform \n Electron \n Flutter \n Griffon \n Ionic \n JavaFX \n JUCE \n Kivy \n Mozilla application framework \n NativeScript \n NetBeans Platform \n Qt \n React Native \n Tauri \n Titanium SDK \n Uno Platform \n Windows Forms \n Windows Presentation Foundation \n
Proprietary	\n Cocoa \n .NET Framework \n FireMonkey \n MacApp \n Microsoft Foundation Class Library \n Oracle Application Development Framework \n SwiftUI \n UIKit \n Visual Component Library \n

ECMAScript

Dialects

Engines

Carakan
Futhark
JavaScriptCore
JScript
KJS
Linear B
QtScript
Rhino
SpiderMonkey\n
- TraceMonkey
- JägerMonkey
Tamarin
V8
ChakraCore\n
- Chakra
JScript .NET
Nashorn

Frameworks

Client-side	\n Dojo \n Echo \n Ext JS \n Google Web Toolkit \n jQuery \n Lively Kernel \n midori \n MochiKit \n MooTools \n Prototype \n qooxdoo \n \n SproutCore \n Spry \n Wakanda Framework \n
Server-side	\n Node.js \n Deno \n Bun \n GraalJS \n Jaxer \n WakandaDB \n
Multiple	\n Cappuccino \n
Libraries	\n Backbone.js \n SWFObject \n Underscore.js \n

People

Other

$\"\"$ Lists: JavaScript libraries • Ajax frameworks • Server-side JavaScript
$\"\"$ Comparison: JavaScript web frameworks

\n\n\n\n\n\n\n

","displaytitle":"Svelte"}}