Svelte

Introduction
Project
Component
Pending
Routing

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>

Inside the curly braces, we can put any TypeScript we want. Try changing name to name.toUpperCase() for a shoutier greeting.

<h1>Hello {name.toUpperCase()}!</h1>

Dynamic attributes

Just like you can use curly braces to control text, you can use them to control element attributes.

<h1>Hello {name}!</h1>
<script>
    let src = '/tutorial/image.gif';
</script>


<img />

Our image is missing a src — let’s add one:

<img src="{src}" />

Svelte Tutorial

Pending

In a SvelteKit project, you generally have two main options for where to place your Svelte components, depending on how they are used:

Reusable Components: src/lib

The recommended place for components that are shared across multiple pages or modules is the src/lib directory.

Why: SvelteKit provides a special alias $lib that points to this folder. This allows you to import components easily from anywhere in your project without dealing with complex relative paths (like ../../components/Hello.svelte).

import Hello from '$lib/components/Hello.svelte';

Feature-Specific Components: src/routes/…

If a component is only used by one specific page or layout, you can place it directly in the same folder as that route (inside src/routes).

Why: This keeps related code close together (colocation).

Note: SvelteKit ignores any file that doesn’t start with + (like +page.svelte or +layout.svelte) when generating routes, so your component won’t accidentally become a public URL.

Routing

+Page

+page.svelte

A +page.svelte component defines a page of your app. By default, pages are rendered both on the server (SSR) for the initial request and in the browser (CSR) for subsequent navigation.

Typescript - Svelte