Svelte vs Svelte Kit - What's The Difference?

The Common Confusion

Hey, what's up? This is Scott with Level Up Tutorials, and in this weekly Svelte, we're going to be talking about Svelte and SvelteKit. Now, this is a question I see pop up on Reddit, Twitter, everywhere all the time: what's the difference between Svelte and SvelteKit?

Whether or not there's confusion there or people just are new to the platform and see people building things with SvelteKit and or don't know what the difference is, this will be a quick explainer. It's not going to be anything crazy in depth. It's by all means not going to be like a full-on tutorial on using either of these projects, but it will hopefully give you an idea of when to use what and where and how to talk about these things as if they're these separate things, but used together and how they are.

So okay, let's talk about the difference between Svelte and SvelteKit.

What is Svelte? The UI Framework

Svelte is more analogous, if we're looking at front-end frameworks, it's more analogous to something like React or even Vue.js, right? It's the framework. It's the front-end framework. It's the thing that allows you to write the code, and it spits out the JavaScript that manipulates the DOM. Okay? That's Svelte.

When you use the two-way binding, when you use what other kind of features, the single file components, the .svelte files—those are all Svelte things. What about SvelteKit?

What is SvelteKit? The Application Framework

Well, SvelteKit is how you build apps, sites, static apps, static sites, packages. That's how you build things with Svelte. And in the past, you've built things with Svelte in many other ways, whether you're using Svelte's own thing that used to be called—it was Sapper was the precursor to SvelteKit—or maybe you use something like Elder.js. There's a number of these different svelte projects, but SvelteKit is essentially the way to build apps or websites with Svelte. Okay?

So Svelte is the front-end framework and SvelteKit is essentially the kit to build applications with. Now, SvelteKit has a lot of really neat features that make it stand out and be different from some of these other platforms. So if we're going to try to keep up with this analogous thing, if you're coming up from the React world, Svelte is to React as SvelteKit is to Next.js or perhaps even Gatsby. And if you're coming from the Vue land of things, Svelte is to Vue as SvelteKit is to Nuxt.js.

And if you're not coming from either of these, think about it like this: Svelte is the front-end framework, SvelteKit is what you use to build apps with Svelte. Okay? That is at the very most plain English, the best way to possibly describe it.

So if you were saying, "I want to build an application from scratch and this thing needs to be server-side rendered and needs to have an API," you'd pick up SvelteKit. You wouldn't even... you wouldn't pick up Svelte itself. You'd pick up SvelteKit to build that application. Now SvelteKit uses Svelte, so you are writing the app in Svelte, but SvelteKit again is the tools and the kit for you to build these applications.

SvelteKit Feature: Adapters

Now what does it include that makes it do these things? Well, it includes things like an adapter. Now, an adapter is how you output the site. So let's say you wanted to have a statically generated site, like a Gatsby site. It's a site that takes your Javascript and outputs it in just straight up HTML. That is going to be using an adapter in SvelteKit. Or if you want to say, "I want this to actually be a Node app where everything is generated on the server," that's also an adapter. Or maybe you want this to run in a Cloudflare worker, that's an adapter. Okay?

So an adapter is something that chooses the output of the site and it's really neat that you get to pick that. So you don't have to have your different project built on something else just to have a static output. Right? Now, what else is included in SvelteKit?

SvelteKit Features: Routing and Data Loading

Also in SvelteKit is the routing system. Now, just like Next.js or some of these other ones, it uses a file folder based routing system. As in, based on the folder structure of your application, it determines the routes of your site. Now, routers as a concept is basically when you hit a URL, when you go to a URL in your browser, where does the app go? Like what files does this thing load? What components does this render?

So, SvelteKit includes routing. Okay? It includes adapters, how the application will eventually be run. But it also includes something called loading. Now, loading is an interesting concept, and loading is basically where you define that data can be loaded on the server side before the client-side render takes place. Again, this can also be run just straight up client-side if you want it to be that way, or it can be run both.

So a loading function is basically where you fetch all your data before the component gets to be run. Okay? So this loading function is something that is only in SvelteKit, is not in Svelte. And this thing runs essentially before the component even starts to mount. So onMount, none of that stuff will be called until long after the, well maybe not long after, but after the load function has been run. And load functions can do a number of things. It can, like I said, fetch your data, prepare that data for server-side rendering, but it also can handle redirects. Let's say you want to look at something on the server, you know, based on that, maybe perhaps do a redirect.

SvelteKit Features: Layouts and Hooks

So okay, we have page routing, we have the output, we have the loading. We also have layouts. Now layouts is a concept that kind of exists in Svelte, as in we have this concept in Svelte called slots, which is how you insert something into another component. In React, it's children, but in Svelte, you have the idea of a slot. Now, a layout in SvelteKit is a special file that has two underscores in front of it and it requires a slot, and it will essentially wrap around the file-based router files within that same folder. Okay? It's just what you would expect when you hear the word layout, if you've worked in any of these platforms.

Now, in addition to that, there's some other little things like hooks, which aren't necessarily anything you need to think about too much if we're giving a 101 here. These aren't like essential. It's not analogous to React hooks, no relation there whatsoever. This is more like what you're used to with any sort of web development hook. You know, when React started calling them hooks, it was kind of weird that they did because hooks has this other connotation where it's like you can hook into parts of the application rendering cycle, right? And that's kind of what hooks are in React in a way, but it's confusing, right?

SvelteKit's Helper Modules and Build Tools

So also, SvelteKit has a number of additional modules which are basically packages that come with SvelteKit to help you in your development flow. Things like app/env, which gives you environment information, whether or not your application's running in development mode, those types of things. We also have things like app/navigation, which allows you to interact with the router. There's a goto function to go to a URL, invalidate, prefetch, prefetchRoutes—a lot of cool stuff in here. But just basically you could think of this as the router, right? If you want to have access to the router programmatically, that's how you do it.

There's app/paths, which are some base path information. app/stores, which are some default stores, some reactive stores that come baked into SvelteKit, such as whether or not the page is currently navigating. We use this on Level Up Tutorials, that if the page is currently navigating, show a loading spinner. Some people use this for some different things, but that's what exists. We have things like the page... again, I'm not going to do a total in depth about everything here.

There's also some aliasing going on here. There's some neat stuff, but basically at the end of the day, this is the stuff that allows you to again... this is the stuff that allows you to build websites and applications with Svelte. Now, some neat stuff. Okay. SvelteKit has some really neat stuff that I would love to dive more into in this video, but like stuff like sveltekit:prefetch to prefetch routes. Again, this is all routing related. sveltekit:noscroll. What else do we have here? Some AMP mode. I don't use AMP myself, so I honestly don't know too much about AMP as it exists in SvelteKit because I just don't straight up use it.

It allows you again to choose how you're outputting your code, whether it is as a Node app and SSR, whether it's statically generated, whether it's client only, or even just server only, right? You can do all of that.

Now, there's also a command line interface that allows you to just basically run dev mode, build, preview, package. And SvelteKit is built on top of Vite. So you end up having all the Vite configuration options as well, which is awesome. And again, Vite uses Rollup plugins, so you can use Rollup plugins in SvelteKit. It all works very, very well, very super good.

The Core Distinction & Other Platforms

And and that's it. I mean, there's some configuration options, but if we're doing like, what's the difference here, I think I've made it pretty clear what the difference is. Um, there's some neat stuff about just in general what's going on here. But again, at the end of the day, you're building applications with SvelteKit, and you're most likely not building applications with Svelte, but you're using Svelte in SvelteKit to build applications. Okay?

So like, think about it this way: there's other platforms that can consume Svelte, whether that is Elder.js or Astro.build, right? Astro.build, you can use Svelte in Astro.build, but you're not using SvelteKit in Astro.build, if that makes sense, right?

So I hope this is a quick explainer again. I'm hoping not to go too, too in-depth here. I don't want to, you know, turn this into a full-on every every little thing that is about here. But what I do want to do is make it very clear in plain English what the difference is here, because I do hear this question come up all the time. I'm hearing the word Svelte, I'm hearing the word SvelteKit, I don't know the difference. That's the difference.

Conclusion and Further Learning

Thank you so much for watching. And if you'd like to learn Svelte and SvelteKit, or Svelte in SvelteKit, or Svelte with Sapper—still living for some reason, but I would recommend going to SvelteKit—if you want to learn Svelte, SvelteKit, animating Svelte, building Svelte components, any of that, head on over to leveluptutorials.com. If you sign up for the year, you can save 25%. And that's a really good deal because we come out with a new tutorial course every single month. And we have some brand new courses coming from some extremely talented content creators as well as a ton of new courses from yours truly doing all sorts of really cool stuff. In fact, this month's course is on Astro, astro.build, and we're going to be using some Svelte in Astro, you better believe it.

So thanks so much for watching, and I will see you in the next one.