Svelte is a

free and open-source Free and open-source software (FOSS) is a term used to refer to groups of software consisting of both free software and open-source software where anyone is freely licensed to use, copy, study, and change the software in any way, and the source ...

front end component framework or language created by Rich Harris and maintained by the Svelte core team members. Svelte is not a monolithic

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

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. Application code is also processed by the compiler, inserting calls to automatically recompute data and re-render UI elements when the data they depend on is modified. This also avoids the overhead associated with runtime intermediate representations, such as virtual DOM, unlike traditional frameworks (such as

React REACT or React may refer to: Science and technology * REACT (telescope), a telescope at Fenton Hill Observatory, New Mexico, US Computing * React (JavaScript library) , a JavaScript library for building user interfaces, from Facebook ** React Nat ...

and Vue) which carry out the bulk of their work at runtime, ''i.e'' in the browser. The compiler itself is written in

TypeScript TypeScript is a free and open source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. It is designed for the development of large appl ...

. Its

source code In computing, source code, or simply code, is any collection of code, with or without comment (computer programming), comments, written using a human-readable programming language, usually as plain text. The source code of a Computer program, p ...

is licensed under

MIT License The MIT License is a permissive free software license originating at the Massachusetts Institute of Technology (MIT) in the late 1980s. As a permissive license, it puts only very limited restriction on reuse and has, therefore, high license co ...

and hosted on

GitHub GitHub, Inc. () is an Internet hosting service for software development and version control using Git. It provides the distributed version control of Git plus access control, bug tracking, software feature requests, task management, co ...

History

The predecessor of Svelte is Ractive.js, which Rich Harris had developed earlier. Version 1 of Svelte was written in

and was released on 29 November 2016. It was basically Ractive with a compiler. The name Svelte was chosen by Rich Harris and his coworkers at

The Guardian ''The Guardian'' is a British daily newspaper A newspaper is a periodical publication containing written information about current events and is often typed in black ink with a white or gray background. Newspapers can cover a wide ...

. 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 is written in

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. Key early contributors 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. SvelteKit 1.0 was released in December 2022 after two years in development.

Syntax

Svelte applications and components are defined in files, which are

HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...

files extended with templating syntax that is based on JavaScript and is similar to JSX. Svelte repurposes JavaScript's native labeled statement syntax to mark reactive statements. Top-level variables become the component's state and exported variables become the properties that the component receives. Additionally, the syntax can be used for templating in HTML elements and components, which is shown below:

* 2 =

Associated projects

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. 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. A number of external projects such as Storybook have also created integrations with Svelte and SvelteKit.

Influence

Vue.js Vue.js (commonly referred to as Vue; pronounced "view") is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him a ...

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

Adoption

Svelte is widely praised by developers. Taking the top ranking in multiple large scale developer surveys, it was chosen as the

Stack Overflow In software, a stack overflow occurs if the call stack pointer exceeds the stack bound. The call stack may consist of a limited amount of address space, often determined at the start of the program. The size of the call stack depends on many facto ...

2021 most loved web framework and 2020 State of JS frontend framework with the most satisfied developers. Svelte has been adopted by a number of high-profile web companies including ''

The New York Times ''The New York Times'' (''the Times'', ''NYT'', or the Gray Lady) is a daily newspaper based in New York City with a worldwide readership reported in 2020 to comprise a declining 840,000 paid print subscribers, and a growing 6 million paid ...

'',

Apple An apple is an edible fruit produced by an apple tree (''Malus domestica''). Apple trees are cultivated worldwide and are the most widely grown species in the genus '' Malus''. The tree originated in Central Asia, where its wild ances ...

Spotify Spotify (; ) is a proprietary Swedish audio streaming and media services provider founded on 23 April 2006 by Daniel Ek and Martin Lorentzon. It is one of the largest music streaming service providers, with over 456 million monthly active us ...

Square In Euclidean geometry, a square is a regular quadrilateral, which means that it has four equal sides and four equal angles (90-degree angles, π/2 radian angles, or right angles). It can also be defined as a rectangle with two equal-length a ...

Yahoo Yahoo! (, styled yahoo''!'' in its logo) is an American web services provider. It is headquartered in Sunnyvale, California and operated by the namesake company Yahoo! Inc. (2017–present), Yahoo Inc., which is 90% owned by investment funds ma ...

ByteDance ByteDance Ltd. () is a Chinese internet technology company headquartered in Beijing and incorporated in the Cayman Islands. Founded by Zhang Yiming, Liang Rubo and a team of others in 2012, ByteDance developed the video-sharing social network ...

Rakuten () is a Japanese technology conglomerate based in Tokyo, founded by Hiroshi Mikitani in 1997. Centered around Rakuten Ichiba, its businesses include financial services utilizing financial technology, as well as digital content and communicat ...

Bloomberg Bloomberg may refer to: People * Daniel J. Bloomberg (1905–1984), audio engineer * Georgina Bloomberg (born 1983), professional equestrian * Michael Bloomberg (born 1942), American businessman and founder of Bloomberg L.P.; politician and ...

Reuters Reuters ( ) is a news agency owned by Thomson Reuters Corporation. It employs around 2,500 journalists and 600 photojournalists in about 200 locations worldwide. Reuters is one of the largest news agencies in the world. The agency was est ...

Ikea IKEA (; ) is a Dutch multinational conglomerate based in the Netherlands that designs and sells , kitchen appliances, decoration, home accessories, and various other goods and home services. Started in 1943 by Ingvar Kamprad, IKEA has been ...

Facebook Facebook is an online social media and social networking service owned by American company Meta Platforms. Founded in 2004 by Mark Zuckerberg with fellow Harvard College students and roommates Eduardo Saverin, Andrew McCollum, Dustin ...

, and

Brave Brave most commonly refers to: *Brave, an adjective for one who possesses courage *Braves (Native Americans), a EuroAmerican stereotype for Native American warriors Brave(s) or The Brave(s) may also refer to: Film and television * ''Brave'' (199 ...

. A community group of non-maintainers run the Svelte Summit conference, write a Svelte newsletter, host a Svelte podcast, and host a directory of Svelte tooling, components, and templates.

References

External links

Svelte
{{ECMAScript Computer-related introductions in 2016 JavaScript web frameworks Web development Software using the MIT license