With the introduction of Svelte 5, the Svelte team has created a CLI, sv, that unifies all the tasks that previously spread across a handful of CLIS (create, add plugins, and migrate).
This lesson will create a Svelte project using the new sv CLI and build a counter component to showcase the new $state, $derived, and $effect runes that ship with the new version.
[00:00] With the launch of Svelte 5, the Svelte team has created a unified CLI called SV. Previously if you wanted to perform different actions like migrate or add a package you would have to use different CLIs but now everything lives under the SV CLI so if I say mpx sv create we're going to create a package and I'm in egghead svelte so I'm just going to accept that. We're going to go with a svelte kit minimal template. We'll say yes to TypeScript. I will use Tailwind because that's what I prefer and we'll skip all the other ones.
[00:49] We don't need any tailwind plugins right now, so I'll just skip those. I like PNPM, so I'm going to select that, and we are all set. So I'll open my editor. Here is the project that's set up. We have a source file where we have an empty lib folder, a page that just has some HTML, and an app.html file with an app.css file that has our Tailwind CSS in it.
[01:19] Down below, we have our svelte.config, our Tailwind config, our tsconfig, and our vtconfig, which is set up to use Svelte. In our package.json, you'll see I can run the dev command. I'll open my terminal type pnpm dev and we're off to the races. To make sure things are working as expected we can hop in to our page and add a tail end class. We'll say text to excel font bold and our output changes slightly.
[01:52] This wouldn't be a get started lesson if we don't build a counter component so we'll add a script tag define a count variable will set it to state passing in zero which is a rune in Svelte 5 and up in our template we'll just render our count which you can see is zero right here. I'll render two buttons underneath, adding styles to both, and an on click handler that will be an inline function that increments count by one. The decrement button will get a similar on click and if we go to the browser you can see our count is incrementing and decrementing. Another feature that Svelte gives us is the derived rune. So if I say derived I can set derived to count times two we'll say this variable is count times two and then up in our template we can just render count times two I'll put it up by our count and when I increment you'll see our original count and our count times two The last feature I'll show is the effect rune and we'll just console log the count inside of the effect and what this is doing if we open up our console over here is every time we increment or decrement you can see the count is logged.
[03:41] This effect will run every time this state variable changes because it's referenced within the effect. The effect rune is considered a escape hatch in Svelte. It's much better to put your side effects in event handlers, but if you know you need to use an effect, it's there for you to do so.