What is Svelte

Cybernetically enhanced web apps

Svelte

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Write less code

Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript. Learn more.

No virtual DOM

Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast. Learn more.

Truly reactive

No more complex state management libraries — Svelte brings reactivity to JavaScript itself. Learn more.

A simple component

Svelte components are built on top of HTML. Just add data. CSS is component-scoped by default — no more style collisions or specificity wars. Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.

<script>
	let name = 'world';
  let times = 0;
  function handleClick() {
    times = time + 1;
  }
</script>

<style>
	h1 {
		color: pink;
		font-size: 3rem;
	}
  p {
    color: cyan;
    font-size: 1rem;
  }
  button {
    padding: 1rem 2rem;
    background-color: gray;
    color: black;
  }
</style>

<h1>Hello there {name}!</h1>
<p>The button was clicked {times}</p>
<button on:click={handleClick}>
	Click meeeeee
</button>

Tutorials

Check out more on the official Svelte website.

Also, you can check out the official Svelte Tutorials.