Confused as to when you should use Svelte vs SvelteKit vs Sapper? Hopefully I can help you get a little more clarity with this short guide. Let's go!

Use Svelte if...

• You don't need/want SSR (Server Side Rendering)
• You want to render a component into an existing page
• You want to output things like a vanilla component, a WebComponent or a React component adapter

Use SvelteKit if...

• You're ok with Beta software and living on the bleeding edge
• You want SSR like Next.js/Nuxt.js
• You want to have a backend API as part of your project
• You want your app to work in a Serverless environment (e.g. Vercel/Netlify)
• You want super fast hot reloading in development (via Vite)

Note that SvelteKit supports static rendering with adapter-static which you can use to render a static site with built in routing in case you don't want/need any API/SSR.

Use Sapper if...

• You don't want to use Beta software and don't want to deal with the potential roadblocks of Beta software
• You want/need access directly to Express/Polka
• You're ok using a product that will no longer be maintained (SvelteKit will replace Sapper)

Scenarios

Still not sure what to use? Maybe these scenarios will help you decide:

• "I'm building a brand new web app (with backend/API)": Use SvelteKit
• "I want to build an SPA (Single Page App) and I have a pre-existing backend and don't need SSR": Use Svelte
• "I want to use Svelte in an existing web app": Use Svelte
• "I'm cautious of new things but want SSR/routing": Use Sapper
• "I'm building a rocket ship ": Use something else

Note that if you end up using Sapper, you can always migrate to SvelteKit later.

See any reasons missing from the above list? Drop them in the comments below

Follow me on Dev.to, Twitter and Github for more web dev and startup related content