Svelte

#Introduction

Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app declaratively out of components that combine markup, styles and behaviours.

These components are compiled into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks.

You can build your entire app with Svelte (for example, using an application framework like SvelteKit), or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere.

#Project

Create a project with Deno

deno run -A npm:sv create svelte
cd svelte                              |
deno task dev --open

Creating a project

Deno - Build a SvelteKit App

#Component

In Svelte, an application is composed of one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file.

The src/routes/+page.svelte file is a simple component.

Replace its contents with the following:

<h1>Hello world!</h1>

#Adding data

A component that just renders some static markup isn’t very interesting. Let’s add some data.

First, add a script tag to your component and declare a name variable:

<script lang="ts">
	let name = 'Svelte';
</script>

<h1>Hello world!</h1>

Then, we can refer to name in the markup:

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