ūüĒ• Join our¬†free ¬†SvelteKit Workshop on June 28 -¬†only 9 seats remaining ! ūüí®¬†Save Your Spot!

Svelte vs SvelteKit: What's the Difference?

Justin's profile pic

Justin Ahinon

Last updated on

Table of Contents

    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:

    SVELTE

    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

    SVELTE

    Reactive statements

    SVELTE

    Stores

    TYPESCRIPT

    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:

    TYPESCRIPT

    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:

    SVELTE
    TYPESCRIPT

    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.

    FAQ

    What is Svelte?

    Svelte is a programming language, a compiler, and a frontend component framework. It uses a single-file component approach with features like scoped styles, loops, and JavaScript statements. Svelte code is an association of HTML, CSS, and JavaScript.

    What is the Svelte component framework?

    In addition to being a language, Svelte is a component framework , similar to React or Vue. This gives it very interesting features like reactivity, reactive statements, and stores that are useful when building web applications.

    What is Svelte's unique feature as a compiler?

    Unlike other frontend frameworks, Svelte apps are compiled at build time into JavaScript code . This means you are only shipping JavaScript code when using Svelte, not the framework itself. This makes Svelte applications lightweight and gives them a true sense of performance.

    What is SvelteKit?

    SvelteKit is a meta-framework built on top of Svelte . It provides all the goodness of Svelte and adds features needed when building a full-stack application for the web, such as server-side rendering, load functions, hooks, form actions, and API routes or endpoints.

    How are Svelte and SvelteKit different?

    While Svelte is a language, a compiler, and a frontend framework, SvelteKit is the full-stack framework built on top of Svelte.

    So, essentially, Svelte is excellent for front-end and interactive work , while SvelteKit provides full-stack web application development tools.

    Do I need to learn Svelte before using SvelteKit?

    Yes, having a good understanding of Svelte is beneficial before diving into SvelteKit . SvelteKit is built on top of Svelte, so knowledge of Svelte will help you utilize the full power of SvelteKit.

    Does SvelteKit handle server-side rendering?

    SvelteKit provides built-in server-side rendering (SSR) . This feature enhances the performance and SEO of your applications, by rendering the initial page on the server, then sending the rendered HTML to the client.

    Can SvelteKit be used for building large-scale applications?

    Absolutely. SvelteKit is designed to scale . With its full-stack features, SvelteKit is a great choice for building large-scale applications.

    Here at Okupter, we propose a various range of SvelteKit services like MVP Development or Landing Page Development .

    What are the prerequisites for learning Svelte and SvelteKit?

    The prerequisites for learning Svelte and SvelteKit are a good understanding of JavaScript, HTML, and CSS. Familiarity with other component-based frameworks like React or Vue can also be beneficial but is not necessary.