Intro to Svelte

Created: Basic Info for Using Svelte

Updated: 03 September 2023

Introduction to Svelte

Notes from this video

It’s a compiler.

Creating a new Project

To create a new project you can make use of degit which will allow you to create a project from a template. You can run this with npx:

npm degit sveltejs/template my-project-name

Then simply cd into your project directory and install dev-dependencies

cd my-project-name
npm i

You can then run the application with:

npm run dev

And view the application on your browser on http://localhost:5000

The project consists of the following:

  • package.json for dependencies and scripts
  • public for where any code that needs to go directly to the build output will live
  • src folder contains the primary code files

In the src/main.js file there is an import which imports the App component and it states that the App component should be rendered into document.body with the props: { name: 'world }


import App from './App.svelte'

const app = new App({
  target: document.body,
  props: {
    name: 'world',

export default app


  export let name

  h1 {
    color: purple;

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

In the above component the js and css are scoped, the {name} is used to include expressions that we want to be evaluated

Create a Component

Create a new componen by simply creating a ComponentName.svelte


<h2>Hey there</h2>

This can then be imported and used another component as follows:

  import Card from './Card.svelte`

<Card />

We can get a component to retrieve inputs using the export keyword

  export let text = 'Placeholder'


And we can pass this in from our App component with:

<Card />

<Card text="Hello Jam" />

Reactive Display

If we need to create computed property values we need to prefix that with the $: it will be automatically recalculated and updated in the template

  export let text = 'Placeholder'

  $: newText = text + '!'


If we would like to create some functionality that will enable a component to do some reactive stuff, or display based on the value of a specific component

  let user = { loggedIn: false }

  function toggle() {
    user.loggedIn = !user.loggedIn

{#if user.loggedIn}
<button on:click="{toggle}">Log In</button>
{/if} {#if !user.loggedIn}
<button on:click="{toggle}">Log Out</button>

Clicking the button will then toggle the loggedIn state due to the on:click event and the toggle handler

You can create a component that iterates over a list of items using something like the following

  let myList = [
    { id: 0, name: 'John' },
    { id: 1, name: 'Jenny' },
    { id: 2, name: 'James' },

<h1>My List</h1>

  {#each myList as {id, name}}
  <li id="{id}">{name}</li>

We can then just import and use the same as the above elements

Input Binding

We can make use of input binding using the following method:

  let name = 'John'

<input bind:value="{name}" />

<h1>Name is {name}</h1>