Learn Svelte in under 3 minutes

Mark Thomas Miller /

The majority of people in The State of JavaScript 2019 said that they didn’t know Svelte but wanted to learn it. That’s why I’m going to teach you its basics in under three minutes.

What is Svelte?

Svelte is an alternative to frontend frameworks like React and Vue. Per its homepage, it doesn’t have boilerplate, and it lets you use vanilla HTML, CSS, and JavaScript to write your components. It compiles your code into tiny, framework-less vanilla JavaScript, and it doesn’t require state management libraries.

The core concepts

To create a Svelte component, just give a file the .svelte extension and shape it like this:

<script>
</script>

<style>
</style>

<div>
</div>

Svelte will automatically scope the JavaScript and CSS to the component. For instance, the CSS inside the style tags won’t affect other parts of your application. You can use curly brackets to reference variables in your HTML:

<script>
let name = 'Mark'
</script>

<style>
h1 { color: red; }
</style>

<h1>Hello {name}!</h1>

You can pass props from parents to children:

<!-- Parent.svelte -->
<script>
import Child from './Child.svelte'
</script>

<Child name="Mark" />
<!-- Child.svelte -->
<script>
export let name
</script>

<div>I am {name}!</div>

You can also use conditional blocks:

<script>
let user = true
</script>

{#if user}
<div>Hello user!</div>
{:else}
<div>You are not signed in.</div>
{/if}

And you can loop through arrays with each:

<script>
let personalLinks = [
{ name: 'Makoto', site: 'https://example.com' },
{ name: 'Futaba', site: 'https://example.com' },
{ name: 'Sojiro', site: 'https://example.com' }
]
</script>

<ul>
{#each personalLinks as link}
<li>
<a href={link.site}>Go to {link.name}'s site</a>
</li>
{/each}
</ul>

Svelte can also handle state:

<script>
let enabled = false

function toggle() {
enabled = !enabled
}
</script>

<button on:click={toggle}>
...
</button>

In my opinion, those are the concepts you’ll find yourself using every day. Of course, Svelte has more features, but this tutorial simply covers the basics. Now let’s talk about its benefits compared to a framework like React.

Svelte compared to React

Svelte’s benefits are best understood by comparison:

Here’s a side-by-side comparison of their performance:

Another good comparison is to look at the code you must write to create the same component. In React, this is how you would create a button that (1) accepts a prop, and (2) counts upward when you click it:

// Counter.jsx
import React, { Component } from 'react'
import styles from './Counter.module.css'

class Counter extends Component {
state = {
count: 0
}

increment = () => {
this.setState({
count: this.state.count + 1
})
}

render() {
const { count } = this.state
const { text } = this.props
return (
<button onClick={this.increment} className={styles.button}>
{count} {text}
</button>
)
}
}

export default Counter
/* Counter.module.css */
.button { background: red; }

And with React Hooks:

// Counter.jsx
import React, { useState } from 'react'
import styles from './Counter.module.scss'

function Counter({ text }) {
const [count, setCount] = useState(0)

function increment() {
setCount(count + 1)
}

return (
<button onClick={increment} className={styles.button}>
{count} {text}
</button>
)
}
/* Counter.module.css */
.button { background: red; }

This is how to write the same component in Svelte:

<!-- Counter.svelte -->
<script>
export let text;
let count = 0

function increment() {
count++
}
</script>

<style>
button { background: red; }
</style>

<button on:click={increment}>
{count} {text}
</button>

Conclusion

Svelte is minimal, and I like that. While I don’t know how it performs at scale, I’m pleased by what I’ve seen so far: it’s incredibly performant and has an easy learning curve. If you want to try a project of your own, you can use Svelte’s quickstart guide. And to learn more, check out its documentation or tutorial.