The Single File Component

To appreciate Svelte’s simplicity we’re going to start with a simple counter example using regular HTML and JavaScript. If you want to code along open a new Codepen project.

Example.htmlCopy

<p></p>
<button onclick="increment()">Click</button>

<script>
  let count = 0

  function increment() {
    count += 1
    updateUI()
  }

  function updateUI() {
    let counterElement = document.querySelector('p')
    counterElement.innerText = `
			Clicked ${count} ${count === 1 ? 'time' : 'times'}
		`
  }

  updateUI()
</script>

Ponder for a second how amazing it is that this is valid HTML in the first place and doesn’t break things because how browsers are so smart.

You would write similar code like this but query elements once at the top since querying counterElement each time you update the user interface is wasteful. These are easy mistakes to make and could cause severe performance issues and unexpected bugs in your software.

I love JavaScript but every time you get into updating and keeping track of your data and updates to the DOM (Document Object Model) it drains your enthusiasm and starts feeling like a chore. This is where JavaScript frameworks come in.

I encourage you to code along and open the Svelte REPL so you can start building muscle memory and type things out when learning instead of copying but I leave that choice up to you.

This is the same example in Svelte.

App.svelteCopy

<script>
  let count = 0

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

<p>Clicked {count} {count === 1 ? 'time' : 'times'}</p>
<button on:click={increment}>Click</button>

Svelte is a superset of HTML meaning it’s like actual HTML and JavaScript but with superpowers.

Svelte lets you write code in a declarative way meaning you don’t have to query elements and worry about keeping the state of your application in sync with the user interface.

Svelte treats App.svelte as a single file component. The <script> tag is where you write JavaScript. There’s a <style> tag for CSS and the rest is treated as HTML. The Svelte compiler takes this special App.svelte file and processes each part separately before compiling it into regular HTML, CSS, and JavaScript.

Inside the Svelte template you can use JavaScript expressions like {count * 2} and see the output directly. This should be familiar if you ever used a templating language or a JavaScript framework like Angular and Vue.

Let’s add some styles at the bottom of App.svelte.

App.svelteCopy

<style>
  p {
    color: teal;
  }
</style>

In Svelte styles are scoped to the component by default meaning any styles used in the component aren’t going to affect other components or parts of your site.

You never have to worry about changing CSS unless it’s global. You can make a style global inside a component by using the global modifier :global(p) and if you want to affect only nested components use .element :global(p).

If you look at the CSS output in the Svelte REPL you can see Svelte generated p.svelte-omwhvp {color: teal } so it’s impossible for your styles to clash.

If you want Sass support you can just add lang="scss" attribute in the <style> tag. You can do the same with the lang="ts" attribute in the <script> tag to enable TypeScript support. Unfortunately the Svelte REPL doesn’t support it so you’re going to have to trust me it works in a real project.