Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to create our first app with Svelte.

Creating the Project

To write our first app, we can create our Svelte project by downloading thw svelte-app.zip from https://svelte.dev/blog/the-easiest-way-to-get-started.

Then we extract it and run npm install to install the packages.

Alternatively, we can run:

npx degit sveltejs/template my-svelte-project  
cd my-svelte-project  
npm install  
npm run dev

to create our Svelte project. We can substitute my-svelte-project with the name of our choice.

Then we go to http://localhost:5000/.

In index.js , we should have:

import App from "./App.svelte";const app = new App({  
  target: document.body  
});export default app;

as the entry point for our app.

It’ll display our app’s content in the body tag of our app.

Writing our First App

Now that we have our app running, we can start writing some code. For instance,

We can write the following:

App.svelte :

<script>  
  let name = "Jane";  
</script><main>  
  Hello {name}  
</main>

to create our first app. It has a name variable, which is set to 'Jane' , and we referenced it in our template.

Therefore, we should get Hello Jane displayed on the screen.

The code in the script tag is referenced in the main markup.

We can add styling to the style tag. For instance, we can write:

App.svelte :

<script>  
  let name = "Jane";  
</script><style>  
  p {  
    font-weight: bold;  
  }  
</style><main>  
  <p>Hello {name}</p>  
</main>

Then we make our text bold.

We can also call JavaScript inside the curly braces.

For instance, we can write:

App.svelte :

<script>  
  let name = "Jane";  
</script><main>  
  <p>Hello {name.toUpperCase()}</p>  
</main>

Then we see Hello JANE displayed on the screen.

Dynamic Attributes

We can add dynamic HTML attribute values to our app.

For instance, we can write the following to add an image with the URL set as a value of a variable:

App.svelte :

<script>  
  let src =  
    "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF\_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=755&q=80";  
</script><main>  
  <img src={src} alt='' >  
</main>

In the code above, we set our image’s URL as the value of variable src .

Then we pass src as the value of src .

Shorthand

If we have something like src={src} , we can shrink it down to {src} .

We can rewrite the example above as follows:

<script>  
  let src =  
    "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF\_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=755&q=80";  
</script><main>  
  <img {src} alt='' >  
</main>

Adding Components

We can add components to our app to divide our app’s code into smaller pieces.

To do that, we import the component and then referencing it in the markup as follows:

Button.svelte :

<script>  
</script><button>  
  Button  
</button>

App.svelte ;

<script>  
  import Button from "./Button.svelte";  
</script><main>  
  <Button />  
</main>

Then we get a button on the screen via the Button.svelte component.

Displaying Raw HTML

We can display Raw HTML in a component by writing the following code:

App.svelte :

<script>  
  let string = "<b>hello</b>";  
</script>

<main>  
  <p>{@html string}</p>  
</main>

The @html tag indicates that we want to display the content as raw HTML. Therefore, we’ll see a bold hello on the screen.

Handling Events

To make our app useful, it has to be able to handle user events.

For instance, we can use the on:click attribute to handle click events of a button as follows:

App.svelte :

<script>  
  let count = 0;  
  const handleClick = () => {  
    count += 1;  
  };  
</script>

<main>  
  <button on:click={handleClick}>  
    Increment  
  </button>  
  <p>{count}</p>  
</main>

In the code above, we have the on:click attribute set to the handleClick function we have in the script tag.

Then when we click the button, it’ll be called, count will be incremented. Then the latest value of count is displayed.

The DOM is automatically updated with the values in script are updated so we don’t have to worry about that.

We can also add variables that are derived from other ones in our code.

For instance, we can add a new variable that has the value which is double the count as follows:

<script>  
  let count = 0;  
  $: doubleCount = count * 2; 
  const handleClick = () => {  
    count += 1;  
  };  
</script>

<main>  
  <button on:click={handleClick}>  
    Increment  
  </button>  
  <p>{count} {doubleCount}</p>  
</main>

The code above has:

$: doubleCount = count * 2;

which is a variable computed from count . It tells Svelte to return the code whenever the referenced value change.

Conclusion

Getting started with Svelte is simple. It uses the same component-based architecture as other major frameworks like React, Angular, and Vue.

Each component has a logic part and a markup part. Events can be handled by setting event handlers on elements.

We can have variables that are derived from others by adding labels to them with the $ .