What Is Svelte?

Having worked through React, Angular, and Vue, Svelte is the genuine outlier — and the reason it's the perfect contrast piece. React, Angular, and Vue all ship a runtime to the browser: a framework library that runs alongside your code, doing reconciliation (a virtual DOM, or change detection) to figure out what to update. Svelte takes a fundamentally different path: it's a compiler. Your components are compiled at build time into small, surgical vanilla JavaScript that updates the DOM directly — and the framework itself mostly disappears, never shipped to the browser at all.

No Virtual DOM, No Runtime

When data changes in React or Vue, the framework re-runs render logic and diffs the result against the previous one to find what changed. Svelte's compiler instead analyzes your component ahead of time and generates precise code that updates exactly the right DOM node when exactly the right value changes — no diffing, no virtual DOM, no reconciliation library along for the ride. The practical results: very small bundles (no framework runtime weight) and excellent performance, with code that often looks like less than the equivalent in the other three.

The .svelte File

A Svelte component is a .svelte file with three optional parts: a <script> block for logic, the markup (written directly, not wrapped in a <template> tag), and a <style> block. This is close to Vue's Single-File Component, with one notable difference: the markup is just there at the top level of the file — no enclosing template element. {name} is interpolation, the same single-brace style as React's JSX rather than Vue/Angular's double braces.

Scoped Styles by Default

The <style> block's rules are automatically scoped to this component only — no scoped attribute needed (Vue) and no setup at all (unlike React). Two components can both style h1 differently with zero collision. Svelte achieves this by adding a unique class to the component's elements at compile time, with no runtime cost.

Creating a Project with Vite

npm create vite@latest -- --template svelte scaffolds a plain Svelte + Vite project — ideal for learning the component framework on its own (we add SvelteKit later). npm run dev starts the dev server with live reload, exactly as it did for React and Vue. To start a full SvelteKit app instead, you'd run npx sv create my-app — but the bare Vite template keeps the early chapters focused.

• src/main.js — the entry point; mounts the root App component.
• src/App.svelte — the root component, the first one you'll edit.
• index.html — the single real HTML page everything mounts into.

Mounting the Root Component

mount(App, { target }) attaches the root component to an element in index.html — the Svelte 5 equivalent of React's createRoot(...).render(), Angular's bootstrapApplication(), and Vue's createApp(App).mount(). (Older Svelte code used new App({ target }) with the new keyword — replaced by the mount function in Svelte 5.)

Coding Challenges