Frontend

Svelte

An interface compiler: turns components into minimal JavaScript without a heavy runtime.

Official siteRepository

What it is

Rich Harris created Svelte in 2016. Unlike React or Vue, it does most of its work at build time: the compiler generates code that updates the DOM directly, with no virtual DOM.

A component is a .svelte file with markup, logic and styles. In Svelte 5 reactivity is built on runes ($state, $derived, $effect). Styles are scoped to the component by default.

A full app is built with SvelteKit: routing, SSR, static generation and endpoints. Bundle size is usually smaller than competitors.

Use it when

  • Small bundle size and fast startup matter: widgets, landings, PWAs.
  • You want less boilerplate and simple reactive syntax.
  • Small teams that value developer experience.

Avoid it when

  • You need a huge ecosystem of ready components and a large job market: React and Vue are much bigger.
  • The team does not want to learn a new compiler-oriented approach.

Key concepts

Compiler
Svelte works at build time and emits optimized JS without a virtual DOM.
Runes
The $state, $derived and $effect markers for reactivity in Svelte 5.
Scoped styles
CSS in a component affects only that component.
Stores
Shared reactive state between components.
SvelteKit
The meta-framework: file-based routing, SSR, adapters for different platforms.

Example

A counter with the Svelte 5 $state rune.

Interview questions

  1. 1. How does Svelte differ from React?

    Svelte is a compiler: it turns components into imperative DOM update code at build time, so there is no virtual DOM or large runtime. React diffs trees in the browser.

  2. 2. What are runes?

    Special markers ($state, $derived, $effect) in Svelte 5 that declare reactivity explicitly. They work in both .svelte and .svelte.js files.

  3. 3. What does SvelteKit provide?

    File-based routing, data loading via load, SSR, static generation and adapters to deploy to many platforms.

  4. 4. How are styles scoped in Svelte?

    The compiler adds a unique class to the component's selectors, so rules do not affect other parts of the page.

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform