Favicon of svelte

svelte

Svelte is an open-source JavaScript compiler that converts components into efficient DOM-updating code, with no virtual DOM runtime shipped to the browser.

Svelte is a compiler-based approach to building user interfaces on the web. Instead of shipping a framework runtime that interprets your components in the browser, Svelte does the work at build time: it compiles your .svelte components into small, standalone JavaScript that updates the DOM directly when state changes. It's aimed at developers who want the ergonomics of a component framework (React, Vue-style) without the bundle size and runtime overhead that usually comes with it.

The project is maintained by the Svelte core team and a large volunteer community, and it's MIT licensed. It's a good fit for front-end developers, teams building performance-sensitive sites, and anyone who wants to write UI code that reads close to plain HTML, CSS, and JavaScript.

Key features

  • Compile-time reactivity: component logic and state updates are converted into imperative DOM operations at build time, not resolved through a virtual DOM diff at runtime.
  • No runtime framework overhead: compiled output is plain JavaScript, so shipped bundles tend to be smaller than equivalent apps built with runtime-heavy frameworks.
  • Component-based syntax: .svelte files combine markup, styles, and script in a single file with a syntax close to standard HTML/CSS/JS.
  • Scoped styling: CSS written inside a component is scoped to that component by default, with no extra tooling required.
  • Declarative components: you write what the UI should look like for a given state, and the compiler figures out how to update the DOM efficiently when that state changes.

Ideal use cases

Svelte works well for content-heavy sites, marketing pages, dashboards, and interactive widgets where load time and runtime performance matter. It also suits teams that want a gentler learning curve for people coming from plain HTML/CSS/JS, since Svelte's syntax stays close to those fundamentals rather than introducing a large API surface.

It's a reasonable choice for embedding small interactive components into an otherwise static or server-rendered site, since compiled Svelte components don't require pulling in a full framework runtime.

It's less of a fit if your team is deeply invested in a large existing React or Vue codebase and needs to interoperate closely with that ecosystem's specific libraries, since some tooling and third-party components in those ecosystems don't have direct Svelte equivalents. Teams that need a very large, mature plugin/library ecosystem for very specific runtime behaviors should evaluate whether Svelte's smaller (though growing) ecosystem covers their needs before committing.

Installation

The svelte package on this repository is the compiler and core library used by tooling and frameworks (such as SvelteKit) to build Svelte apps. To start a new project, the standard approach is to scaffold it with the official tooling:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

If you want to add the svelte package directly to an existing JavaScript project (for example, to use with a custom build setup):

npm install svelte

For working on this repository itself, clone it and use the svelte package under packages/svelte, following the contributing guide included in the repo for build and test commands.

For full documentation, guides, and interactive examples, see the official site at svelte.dev. The project also runs a Discord server (linked from svelte.dev/chat) for community support and discussion.

Categories:

Frequently asked questions

Share:

Stars
87.5K
Forks
5K
Last commit
3 hours ago
Repository age
10 years
License
MIT
Self-hosted
No
Activity score
88/100
View Repository
Built with:

Similar to svelte

Favicon

 

  
  
Favicon

 

  
  
Favicon