Svelte

The predecessor of Svelte is Ractive.js, which Rich Harris created in 2013.{{cite web |date=2020-11-19 |title=About the Svelte JavaScript framework |author=Świstak, Tomasz |url=https://valuelogic.one/blog/the-rise-of-the-svelte-javascript-framework/ |archive-url=https://web.archive.org/web/20220327064110/https://valuelogic.one/blog/the-rise-of-the-svelte-javascript-framework/ |archive-date=2022-03-27 |access-date=2021-06-10 |department=Blog |website=ValueLogic |language=en-US |quote=By the way, Vue’s syntax has been influenced by Ractive.js, a direct predecessor of Svelte.}}

Version 1 of Svelte was written in JavaScript and was released on 29 November 2016.{{cite web |title=Svelte Origins: A JavaScript Documentary |url=https://www.youtube.com/watch?v=kMlkCYL9qo0 |work=YouTube | date=21 June 2022 |language=en |access-date=2022-07-09}} The name Svelte was chosen by Rich Harris and his coworkers at The Guardian.

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.

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.

The SvelteKit web framework was announced in October 2020 and entered beta in March 2021.{{cite web |title=Rich Harris: Futuristic Web Development |url=https://www.youtube.com/watch?v=qSfdtmcZ4d0 |work=YouTube | date=19 October 2020 |archive-url=https://ghostarchive.org/varchive/youtube/20211212/qSfdtmcZ4d0 |archive-date=2021-12-12 |url-status=live |language=en |access-date=2021-08-03}}{{cbignore}}{{cite web |last=Harris |first=Rich |date=2021-03-23 |title=SvelteKit is in public beta |url=https://svelte.dev/blog/sveltekit-beta |access-date=2021-08-03 |website=svelte.dev |language=en-US}} SvelteKit 1.0 was released in December 2022 after two years in development.{{cite web |date=2022-12-14 |title=Accouncing SvelteKit 1.0 |url=https://svelte.dev/blog/announcing-sveltekit-1.0 |access-date=2022-12-16}}

Version 4 of Svelte was released on 22 June 2023. It was a maintenance release, smaller and faster than version 3.{{cite web |last=team |first=The Svelte |date=2023-06-22 |title=Announcing Svelte 4 |url=https://svelte.dev/blog/svelte-4 |access-date=2023-08-08 |website=svelte.dev |language=en}} A part of this release was an internal rewrite from TypeScript back to JavaScript, with JSDoc annotations. This was met with a confusion from the developer community, which was addressed by the creator of Svelte, Rich Harris.{{cite web |title=TS to JSDoc Conversion |url=https://news.ycombinator.com/item?id=35891259 |website=Hacker News (news.ycombinator.com) |date=2023-05-10}}{{cite web |title=Lordy, I did not expect an internal refactoring PR to end up #1 on Hacker News. ... |url=https://news.ycombinator.com/item?id=35892250 |website=Hacker News (news.ycombinator.com) |date=2023-05-10}}

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 the other Svelte maintainers. Svelte 5 was a ground-up rewrite of Svelte, changing core concepts such as reactivity and reusability.{{cite web |title=Svelte 5 is alive |url=https://svelte.dev/blog/svelte-5-is-alive |website=svelte.dev|date=22 October 2024 }} 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.{{cite web |title=Introducing runes |url=https://svelte.dev/blog/runes |website=svelte.dev|date=20 September 2023 }} Svelte 5 also introduces Snippets, which are reusable "snippets" of code that are defined once and can be reused anywhere else in the component.{{cite web |title={#snippet ...} |url=https://svelte.dev/docs/svelte/snippet |department=Docs |website=svelte.dev}} 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|date=April 2025}}

Also at Svelte Summit Fall 2024, Ben McCann announced the Svelte CLI under the sv package name on npm.{{Cite web |last=McCann |first=Ben |date=2024-10-24 |title=Introducing the new Svelte CLI |url=https://svelte.dev/blog/sv-the-svelte-cli |access-date=2024-12-20 |website=svelte.dev |language=en}}

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. Rich Harris and Simon Holthausen joined Vercel to work on Svelte fulltime in 2022.{{cite web |last=Harris |first=Rich |date=Nov 11, 2021 |title=today is a big day for @sveltejs: i've joined @vercel to work on it full time! |url=https://twitter.com/rich_harris/status/1458822051263823875?lang=en |access-date=2022-09-04 |website=Twitter |language=en-US}} Dominic Gannaway joined Vercel from the React core team to work on Svelte fulltime in 2023.{{cite web |title=trueadm/status/1640761270566633472 |url=https://twitter.com/trueadm/status/1640761270566633472 |access-date=2023-09-30 |website=X (formerly Twitter) |language=en}}

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

Svelte'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

• The $effect rune, used for declaring code that reruns whenever its dependencies change

Additionally, the { {{var|JavaScript code}} } syntax can be used for templating in HTML elements and components,{{cite web |title=Svelte tutorial page |url=https://svelte.dev/tutorial/adding-data |website=svelte.dev |access-date=2022-07-06}} 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.

A Todo List example made in Svelte is below:

Todo List

{done}/{all}

{#each todos as {text,done},index}

{text}

{/each}

Add todo

{{anchor|SvelteKit}}{{Infobox software

| name = SvelteKit

| title = SvelteKit

| logo =

| logo caption =

| logo_upright =

| logo_alt =

| screenshot =

| caption =

| screenshot_alt =

| collapsible =

| author =

| developer =

| released = {{start date and age|{{wikidata|property|Q106156162|P571}}}}

| latest release version = {{wikidata|property|preferred|references|edit|Q106156162|P348}}

| latest release date = {{start date and age|{{wikidata|qualifier|preferred|single|Q106156162|P348|P577}}}}

| repo = {{wikidata|properties|edit|Q106156162|P1324}}

| programming language = {{wikidata|properties|linked|edit|Q106156162|P277}}

| platform = Web platform

| genre = Web framework

| license = MIT License

| website = {{URL|https://svelte.dev/docs/kit}}

}}

The Svelte maintainers created SvelteKit as the official way to build projects with Svelte. It is a Next.js-style 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.{{cite web |last=Harris |first=Rich |date=December 31, 2017 |title=Sapper: Towards the ideal web app framework |url=https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework |access-date=2022-11-29 |website=svelte.dev |language=en-US}}

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.{{cite web |title=Svelte |url=https://github.com/sveltejs |access-date=2021-08-03 |website=GitHub |language=en-US}} A number of external projects such as Storybook have also created integrations with Svelte and SvelteKit.

Vue.js modeled its API and single-file components after Ractive.js, the predecessor of Svelte.

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.{{cite web |title=Stack Overflow Developer Survey 2021 |url=https://insights.stackoverflow.com/survey/2021/ |access-date=2021-10-26 |website=Stack Overflow |language=en-US |archive-date=2022-06-25 |archive-url=https://web.archive.org/web/20220625140601/https://insights.stackoverflow.com/survey/2021 |url-status=dead }}{{cite web |title=State of JS 2020: Front-end Frameworks |url=https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/ |access-date=2021-10-26 |website=2020.stateofjs.com |language=en}}

Svelte has been adopted by a number of high-profile web companies including The New York Times, Apple, Spotify, Radio France (French national public radio broadcaster),{{cite web |title=Radio France migrated their site to SvelteKit |url=https://www.reddit.com/r/sveltejs/comments/pgjlkr/radio_france_migrated_their_site_to_sveltekit/ |access-date=2024-06-04 |website=reddit.com |date=2 September 2021 |language=en-US}} Square, Yahoo, ByteDance, Rakuten, Bloomberg, Reuters, Ikea, Facebook, and Brave.{{cite web |title=Svelte • Cybernetically enhanced web apps |url=https://svelte.dev/ |access-date=2021-08-03 |website=svelte.dev |language=en-US}}{{cite web |title=Websites using Svelte - Wappalyzer |url=https://www.wappalyzer.com/technologies/javascript-frameworks/svelte/ |access-date=2021-08-03 |website=www.wappalyzer.com}}{{cite web |title=Your Profile, Your Home Experience |url=https://yourhome.fb.com/ |access-date=2021-12-01 |website=yourhome.fb.com |language=en-US}}

A community group of 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.{{cite web |title=Home - Svelte Society |url=https://sveltesociety.dev/ |access-date=2021-08-03 |website=sveltesociety.dev |language=en}}

{{Portal|Free and open-source software}}

• JavaScript library
• Comparison of JavaScript frameworks

{{Reflist|2}}

• {{Official website}}

{{Application frameworks}}

{{ECMAScript}}

Category:2016 software

Category:JavaScript web frameworks

Category:Web development

Category:Software using the MIT license