Svelte 5 on Bun 1.2: Getting started

Summary

The latest Svelte 5 update brings runes, a fresh approach to reactivity which replaced $:. Although some non-trivial tasks are required for Svelte 4 projects to migrate to 5, developers now have greater flexibility and performance benefits thanks to the runes system. Their transition aims to make apps more efficient and maintainable.

This post shows how to start to develop a Svelte 5 project with Bun.

Environment

• App: Svelte 5.19.9 + SvelteKit, "a framework for rapidly developing robust, performant web applications using Svelte"
• JavaScript runtime: Bun 1.2.2
• OS: CathyOS (Linux distribution)

Tutorial

To be short, there are few steps. Run command-lines and you are there soon.

1. Create a project

$ bunx sv create sveltekit-example

Some questions will be asked by the installer. There is an example set of my replies below:

┌  Welcome to the Svelte CLI! (v0.6.20)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  prettier, eslint
│
◆  Successfully setup add-ons
│
◇  Which package manager do you want to install dependencies with?
│  bun
│
◆  Successfully installed dependencies
│
◇  Successfully formatted modified files
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd sveltekit-example                                                 │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: bun run dev --open                                                   │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

The project was created and is ready. Let's come in:

$ cd sveltekit-example

Besides, the default set of directories and files (with selected options) are as below:

$ ls -a1F
./
../
.svelte-kit/
node_modules/
src/
static/
.gitignore
.npmrc
.prettierignore
.prettierrc
bun.lock
eslint.config.js
package.json
README.md
svelte.config.js
tsconfig.json
vite.config.ts

$ find src/
src/
src/app.html
src/app.d.ts
src/lib
src/lib/index.ts
src/routes
src/routes/+page.svelte

2. Run demo app

Run the demo of its minimal app template:

$ bun run dev --open

You will see:

Note that the process watches files by default. When some change is detected, it will update the rendered page on browser.

3. Customize

Now you are ready to make your own app. For example, modify src/routes/+page.svelte like below:

<script lang="ts">
    let counter: number = $state(0)
    const incrementCounter = () => counter++
</script>

<div class="container">
    <div class="output">{counter}</div>
    <button onclick={incrementCounter}>Increment</button>
</div>

<style>
    .container {
        padding: 0.8rem 0.2rem;
        display: flex;
        justify-content: center;
        border: 0.5em solid #fdfa72;
        border-radius: 1.4rem;
    }

    .output {
        width: 2.5em;
        margin-right: 0.8rem;
        color: #4f68dc;
        text-align: right;
        font-size: 1.2rem;
        font-weight: bold;
    }
</style>

It will show:

You can add another Svelte component such as +layout.svelte, and also create your own components, layouts, styles and types.

Conclusion

Svelte 5 refines its core on reactivity with runes, replacing the $:. It makes component updates clearer and more efficient. It also sets the stage for better scalability in larger projects.

Enjoy the latest sophisticated App development with Svelte 5 :)