Svelte vs SvelteKit: What's the Difference?

When I first heard about Svelte, I was very excited about it. I liked how easy and fast it helps to build functional web apps. Svelte takes the single file component approach to a whole new level with features like scoped styles, easy to understand loops and JavaScript statements, etc. All these make the Svelte DX really delightful.

But at some point in my journey, I wanted to do more. Things like server-side rendering, API endpoints, customizing responses, etc...; basically, all the things you would expect in a full-stack web framework.

Discovering SvelteKit and the confusions

This was the point in my research where I found about SvelteKit. But at first its whole concept was very confusing to me. The fact that it's named Svelte"Kit" made me initially think that it was a components' library for Svelte.

If you come from the world of Next.js or Nuxt.js, you'd be familiar with expressions like "meta-frameworks" which are used to describe frameworks that are built on top of other frameworks. SvelteKit is a meta-framework built on top of Svelte. But this was not mentioned anywhere on the website and the docs (and I believe it's still not).

Now that I have more experience and understand of how these two work, this post is my attempt to explain the differences between Svelte and SvelteKit.

Svelte, the language

First, Svelte is a programming language, that uses the  .svelte  extension. At its core, the Svelte language is an association of  HTML ,  CSS  and  JavaScript  . This means that in most scenarios, if you know these three languages, you will feel comfortable writing Svelte code.

Very basically, a Svelte code can look like this:

I know right! Plain old web languages.

Svelte, the component framework

In addition to being a language, Svelte can also be considered as a component framework, like React or Vue.

This gives a set of very interesting features that are useful when building web applications. Think of

Reactivity

Reactive statements

Stores

and much more...

By the way, these examples are mostly pulled from the Svelte official documentation. If you are looking into learning Svelte, it is a great place to look at; alongside with the official tutorial.

Svelte, the compiler

This is one of the most important part of this ecosystem. Unlike other frontend frameworks, Svelte apps are compiled at build time into JavaScript code. Which means that you are only shipping JavaScript code when you are using Svelte, and not the framework itself. This helps make Svelte applications lightweight and with a true sense of performance.

Compilers can be a very technical topic, but if you want to know more about how the Svelte compiler works, I'd recommend you to read this blog post that goes through the most important aspects.

Enter SvelteKit, the meta-framework

You can see SvelteKit as the steps forward in building web applications. It takes all the good things from Svelte, and on top of that, adds additional features that are needed when building a full stack application for the web.

You get things like server-side rendering, hooks, form actions, API routes or endpoints, etc...

SvelteKit allows doing something like this, for instance:

When a user navigates to  /api/random-number?min=0&max=100  , the server will respond with a random number between 0 and 100. See +server for more details about API routes.

You also get delightful form handling out of the box with forms actions:

And I'm only scratching the surface of all the cool things you can do with SvelteKit.

If you want to learn more about SvelteKit, you can follow along with my "SvelteKit Internal" series on this blog.

What to get from this blog post

The essential part to get from this post is that Svelte is a language, a compiler, and a frontend framework, while SvelteKit is the full-stack framework built on top of Svelte.