Key note categories and examples for tech issues

Learn Svelte.js

This is an example note

I took this note when I first tried to learn Svelte.js.

It's using Vite

Looks like it's similar to Astro js but for building web apps. It has a template html file.

It uses .svelte file format, which can include inline CSS. It's like styled-components.

  • What is svelte kit?
    • a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript. It's a love letter to web development.
    • SvelteKit • Web development, streamlined

You can write TypeScript directly inside script tags:

<script lang="ts">
  let message = 'hello world'


  h1 {
    font-weight: bold;
    color: red;

What is $ sign?

const displayed_count = spring()
$: displayed_count.set(count)
$: offset = modulo($displayed_count, 1)

It's called reactive values. It looks like similar to Jotai's Atoms.

What is svelte/motion? It's for animations.

It has a way of expressing logic in html:

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

It is like Haml.

It has functions for handling life cycle events like onMount:

import { onMount } from 'svelte'

onMount(async () => {

Get help

Got any questions about this page? Feel free to ask them on the user forum here.