SvelteKit in 100 seconds

Learn the basics of the SvelteKit - a metaframework that can fetch data and render Svelte web applications on the server. Find out how it compares to other fullstack tools like Next.js for React and Nuxt for Vue.
#webdevelopment #javascript #100secondsofcode
🔥 Get the full SvelteKit Course fireship.io/courses/sveltekit/
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
💬 Chat with Me on Discord
/ discord
🔗 Resources
SvelteKit kit.svelte.dev
Svelte in 100 Seconds • Svelte in 100 Seconds
Nuxt in 100 Seconds • Nuxt in 100 Seconds
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- What is SvelteKit?
- Who created Svelte?
- Best web development frameworks
- Easiest JS frameworks to learn
- SvelteKit quickstart tutorial
- SvelteKit vs Next.js
- SvelteKit vs Nuxt

[@Fireship]

If you like getting stuff shipped, then you'll love SvelteKit. Try it out in the full course fireship.io/courses/sveltekit

[@ofallcodeandmore5502]

first

[@TheJackTheLion]

second

[@jakobnoergaard2523]

The OnlyFans link… 😂

[@universaltoons]

sus

[@SamuelHauptmannvanDam]

Looks incredible. I would love for you to show the difference between this and angular with firebase functions. I'm not sure if there would be much of a difference or how it would work, if you are already hosting of firebase, what would then happen? These functions would still have to be deployed somewhere right? Or what am I missing?

[@hunterbertoson156]

Thanks! Putting 10 years of SvelteKit experience on my Resume now.

[@Qefx]

10 years, 100 seconds... in Javascript its all the same!

[@repairstudio4940]

😂 same

[@larryd9577]

​​@@Qefxonly if you compare them with a double equals

[@CappaLimk]

Isn't it going to be hard to get a job in sveltekit because most companies use React,Angular and Vue.js

[@knorrepotje22]

@@CappaLimk seeing more and more companies starting to use Svelte tho.

[@ardinhelios5677]

I had been a hardcore react lover, then had to learn vue for work.. but lemme tell you I was mind blown when I started using svelte and svelte kit.. the components look nothing like their cluttered counter parts. For anyone sceptical about learning svelte, I highly recommend try it out once, working with react and vue will feel like rubbing stones for fire, while svelte being a very convenient lighter

[@wojciechosinski5927]

What are your thoughts of Vue compared to other two? I like the reactivity system there, but any operation on "raw" elements is a pain

[@lautarobernati2557]

you'll drop dead when you touch angular then

[@saadahmed688]

Vue with is pretty much like svelte

[@daleryanaldover6545]

@@saadahmed688 vue 3 literally took the idea from svelte, *react 13 also copied their homework from svelte. This says more about svelte itself. Edit: *Well it's Next 13, but the point still stands.

[@nullpointer1755]

@@saadahmed688 Vue still uses a virtual dom, which makes using JS libraries a pain, because you'll have to use a wrapper library (if the wrapper library exists of course, orthewise you'll have to make your own or use another library). This is not a problem with Svelte, you can integrate pretty much any JS library.

[@beganovich]

Tip: You don't need to import PageLoad type, `export let data` will be automatically typed and provide autocomplete by the extension & LSP itself.

[@deeOOgh]

True, but only in vscode afaik. You want to keep that if you or others in your team use other editors/IDEs

[@lucas.p.f]

Yes, but it's a bit messy. I get typescript errors all over the place when not typing data or form variables. It's best to type it

[@dekeijzergeorge9974]

nvchad ftw

[@shubhambhattacharjee1111]

It seems to also work on nvim actually now.

[@deeOOgh]

@@shubhambhattacharjee1111 I thought it would just be a matter of time 🙂. Glad to hear, thanks for the info!

[@SvelteSociety]

Since a while back you don't even need to include the PageData types or import from ./$types! Just omit it and it'll work out of the box as long as you're running the dev server! :)

[@Davidlavieri]

If it's not dev server then what 😂

[@SoloElROY]

@@Davidlavieri If it's not dev server you won't need types (?

[@SoloElROY]

@@Davidlavieri I'm guessing just the linting won't update if the dev server is not running

[@icarojose6316]

It does t lwork in my pc

[@abtix]

I’m so glad you’re making videos about svelekit. I also loved the sveltekit course on your website

[@dision9470]

I'm all for sveliket videos.

[@tens0r884]

@@dision9470 for sure, definitely prefer sovelkut over verbose things like react

[@thenewdesign]

What's the link to the course?

[@zuma206]

@@dision9470 same man, can't wait for more svalbard content

[@perorbem]

Fireship somehow always manages to make a video about the exact subject I'm learning about

[@marlo-ji]

Why am I here?

[@smolley]

I literally started looking into SvelteKit 2 hours ago. This is kinda creepy, ngl.

[@elpupper_]

he lives in ur walls

[@gigiopincio5006]

he cheats by making videos about every possible subject

[@maxwellkjr]

He is an AI after all. Constantly learning and reading our minds

[@SirDamatoIII]

Dang this was awesome Jeff, it’s a concise 100sec version of the course! Saw things noted that I missed when going through the course - which was excellent btw!

[@natouche68]

I swear this guy has superpowers, I just started a new project with Svelte kit last week ! Svelte and svelte kit are so nice, it's juste a perfect stack !

[@jackdavenport5011]

I’ve recently been trying out svelte kit and it’s honestly made web dev fun for me again. I’m honestly kind of dreading having to go back to React for my work because Svelte is just so much cleaner.

[@galaxiapixel]

A few days ago I inherited a huge project in React. It was slow, its code very dirty and with many rendering errors to correct. In a week I reimplemented almost the entire system in svelte kit, and the system is different, the users were really amazed by how fast the system was and how scalable it was.

[@user-re8lt2gy3g]

Wait until you want a specific functionality, u will need to implement it ur self

[@sxlbrads]

I'm starting out in web development and Svelte has made things so much easier for me. Currently using it for my first serious project :)

[@ajohndaeal-asad6731]

I highly recommend it

[@Dipj01]

that's great. Unfortunately, you'll still have to learn React or Angular since most of the jobs use those. Hopefully Svelte will continue to get more adoption

[@elhaambasheerch7058]

Jeff never stop making these videos, they're awesome! Also would love to see these: Zustand in 100 seconds SWR in 100 seconds Jotai in 100 seconds tRPC in 100 seconds Drizzle in 100 seconds

[@BrUSomania]

I just recently started using frameworks and I gotta say Svelte made it much easier getting into than the others (especially compared to React).

[@cre8ive65]

I've had SvelteKit in production for coming up on 2 years now (Yes we shipped using the beta lmao) and looking back I would GLADLY do it again, even with the beta growing pains.

[@Algoinde]

"Shipped on beta" checking in, 1.5 years, 100k users, zero regrets. And the RC migration was an excuse to rewrite tech debt anyway :)

[@jakobsturm2438]

Same

[@younlok1081]

how will you manage if you have also a mobile app that will request data with api routes

[@ko-Daegu]

@@younlok1081 I really wonder how to use full stack web frameworks when you have IoT/mobile/Desktop apps

[@Algoinde]

@@younlok1081 you create api routes with js files and use those in both. Sveltekit is smart enough to handle this for SSR too.

[@bryamalfaro]

Thank you for that video, it's amazing. I've just started studying about Svelte and I already love it.

[@HONjramiroz98]

As a Sveltekit developer I loved this video And most importanty I’m glad to understand it !!🎉

[@seyyedkhandon]

Wowwwwww, I've never thought sveltekit is this beautiful, I've always just heard of it... thanks mann😍😍

[@MarthinusBosman]

Perfect! I realised there was a bunch of stuff I wasn't aware of in sveltekit and was looking for this

[@ShiloBuff]

I love SvelteKit and glad you have a video on it to spread awareness of it.

[@zb2747]

I’m happy with how much growth svelte has made in the last 2 years

[@shane3744]

The server features of SvelteKit are super nice and intuitive. I'd love a video about your take on React Server Components and the latest version of Next using them.

[@AWIRE_onpc]

Always wanted you to make a video about sveltkit.

[@bparlan]

just love your existing and love of humanity man.

[@gokudomatic]

To be exactly, Sveltekit is your most beloved web framework in the world. Still worth checking it out, thanks to your quick introduction.

[@misakpoghosyan1263]

THE TIMING ON THIS!!! I was looking into your old videos about React, Next.js/Svelte, SvelteKit comparison to decide which stack to use on my next project, and this drops...

[@arytiwa4351]

I use it on day to day basis and LOVED it 😍

[@johnnycatsville5486]

I'm with Svelte for years, best framework ever, just no jobs positions lol

[@febryanap]

Sveltekit is the second javascript framework I've been use. Coming from React and surprised because how they handle things very simple.

[@zelesim]

this looks tidy, organized and easy to understand

[@tomascz]

I love SvelteKit, for me best JS framework. Great video 👍

[@XDarkGreyX]

I recently started building my first medium-sized app with it. I am not that deep into it yet, but damn am I excited.

[@TheJackTheLion]

YES! I have dreamed about this moment that Fireship does SvelteKit

[@jeffbenson3222]

I didn't see where the video compared SvelteKit to Next.js and Nuxt - would like to learn more about that!

[@user-lq7xz1th4x]

Svelte always deserves more recognition than it gets.

[@svampius2448]

I'm really hopeful to see a video on Blazor United, the .NET 8 version of Blazor that can switch between server-rendering and WASM at the component level! This is a game-changer and I believe it's set to give other frameworks a serious run for their money. Keep up the fantastic content, Fireship!

[@ahammadalipk]

Will be front runner sure , but the caveat is , it is not open source right?

[@erickmoya1401]

.Net? Dafuk?

[@svampius2448]

@@ahammadalipk It's open-source, like the rest of .NET since it became .NET Core back in 2014!

[@aykuncetinkaya6201]

As a freelance dev can't imagine web development without Sveltekit and chatgpt. My life is way easier now.

[@bjbegui]

I'm currently working with a SevlteJS/Quarkus application and loving it.. hopefully i can do more.

[@Killtec]

i am already using sveltekit and i fucking love it. I am coming from a C# background, tried Angular but really fell in love with sveltekit, this is a great overview!

[@tycooperaow]

Yeah when I was using React and Angular it gave me backpains

[@kaleabmelkie]

One I've been waiting for... Note: You no longer need to manually type `PageData`, `PageLoad`, etc. types... it automatically just knows what `export let data` and load functions are

[@ikechukwucharles2314]

Finally, been waiting to learn more about sveltekit.

[@ziondotson6157]

Svelte and SvelteKit really made my life easier. Unlike React, React can only make things worse and as complicated as possible.

[@AHN1444]

I learned React and Next lately, like a couple of months from now, it was a big paradigm change in comparison with PHP for backend and jQuery in frontend. React really made interactivity much simpler, but it has some really bizarre things and too much boilerplate code for simple things. Now on the other hand, Svelte? It's all the good from React and Next but without all the nonsense. I am loving Svelte, it's great! =)

[@juannicolai8771]

Amazing tool! The best js framework ever

[@roldyclark]

literally just started a fresh sveltekit project at work, like installed sveletkit at the same moment you uploaded...

[@aladeadeseun5288]

Thanks bro. Looking into svelte now.😊

[@brett84c]

I desperately want Svelte to start getting mainstream adoption. I'm so tired of React and Angular is just pure pain (though necessary if you want more job opportunities to choose from). Used Svelte for several projects this past year and it is such an incredible developer experience.

[@thekinoreview1515]

Svelte + Kit is the best framework I've ever used

[@jondoe79]

Svelte, Vue are prime examples of one man vs tech giant

[@unknown-user001]

One thing is clear is tech giants love to make things complicated and its size enormous

[@HorsiMusic]

Exactly. And both Vue and Svelte whoop reacts butt.

[@user-re8lt2gy3g]

Svelte and vue vs react and angular

[@marusdod3685]

@@HorsiMusic both vue and svelte produce bigger bundles than react. that is because they wrap components in a lot of boilerplate code while react just lets the engine do all the heavywork. they are not really any faster

[@liquidsnakex]

​@@marusdod3685 Get lost, react fangirl. That kind of BS doesn't work when anyone can see the benchmarks for themselves lol

[@damnnn.]

I've started to learn Svelte/Sveltekit with Fireship videos and i love it. Sveltekit is faster than Nuxt,Next,Astro, Express etc. Directly to the point and no boilerplate codes. Thanks to Rich Harris, Svelte team and Fireship.

[@jh-devv]

I was just making a sveltekit site, nice :)

[@thavrisco1632]

Nice to see a more modern video on this.

[@boredSoloDev]

FINALLY, I was waiting for the hype train so I can flex learning it

[@errorcodezero_]

how is it that the second i open a new svelte kit project this video gets made wow

[@LexicalNoScope]

Waiting on a Proompt-Kit video. I know nothing about the extremely low level JavaScript frameworks used under the hood but after completing my proompt boot camp, I have now built a fully functional web app that displays all manner of abstract art.

[@JetJockey87]

Routes can be defined by any svelte file, which was super weird until they changed the syntax to require prepending the files with the "+" modifier.

[@kokizzu]

svelte (without kit) is the best :3 3 other popular (and their server side counterpart) give me such productivity

[@xxXAsuraXxx]

Keeping an eye on svelte community. When the job opportunities and community libraries are flourishing for svelte then I ll instantly change to it

[@alfredaddo651]

I always say they couldn’t have chosen a better name. The Svelte is so svelte.

[@h8moss766]

Been waiting for this!!

[@basione]

SvelteKit is the GOAT! Hope it gets more recognition and adoption.

[@i-cannot-clutch8459]

I made my portfolio using svelte and confirmed that if someone were to start web development using svelte, other frameworks won't ever be the same for them.

[@axelacosta1674]

Cool, I always saw svelte as a not so good framework, but it looks good, even more with svelte kit

[@hnazmul]

[@47818]

Not so good? What made you think that?

[@sven-o]

Svelte has been so much fun for me so far, amazing framework!

[@Terr590]

SvelteKit is amazing!

[@LetrixAR]

I love the magic behind the automatically generated types

[@asatorftw]

SvelteKit literally saved my passion for development.

[@Joshua-sp1kd]

I’m guessing this is now Jeff’s favorite In 100 Seconds video

[@peppi69]

cool but already outdated. You don't need the "./$types" anymore and also you can know writ a load function a normal function instead of an an anonymous function which i think is more readable

[@HeisenbergFam]

Pretty dope tool tutorial to fetch useful data, cheers for the free guide

[@ha5anmukhlis]

sveltekit is the best framework out there

[@Samuftie]

Best framework ever.❤

[@mopholo]

Using Svelte/kit for a major product, a few issues but nothing we couldn't figure out, the pace of change has no become manageable with kit, but it's now slowed to the point that we can catch up and do some refactoring, early adopter problems.

[@necrolycoris]

Ah yes, sveltekit. The framework that i actually understand compared to react or next.js. Cant wait to see more from this underappreciated framework 😊

[@marusdod3685]

if you dont understand react or next it's really your own fault. svelte seems a little closer to vanilla js (it's not), but what it offers in simplicity it robs you in flexibility. react gives you the tools to build anything from scratch and once you understand it all these other frameworks start feeling a little too opinionated

[@svoloSlovakia]

Hi, is it possible with Svelte (or do I also need a SvelteKit? or what else do I need?) to create single page app, which will be using separate API (written in PHP, which is also serves the mobile apps)? Currently we have veery outdated static frontend with very old React components, I want to upgrade and re-do the whole web app.

[@tristen_grant]

Yes.

[@niagalves]

Svelte is the future ❤️

[@MarvinPowell1]

Me on the right side of the screen at 2:43.

[@niagalves]

@@MarvinPowell1😂😂😂

[@Jake-bh1hm]

Please made a svelte 5 runes edition course on your website. I really enjoyed your svelte course on your site. I loved how you used a real life example building the link tree like app… now with svelte 5 being almost stable, I would love to have a full real life example project made from scratch again. Thanks 🙏

[@aperture147]

using bootstrap and svelte kit is a bless for a backend dev like me

[@paulsimpressions]

Fireship, thoughts on Astro vs SvelteKit? You mentioned in a different video you were using Astro for your own site. Just curious why that over SvelteKit or others.

[@festusyuma1901]

Alright, I will learn it

[@brianevans4]

I love svelte, but I'm not sold on the idea of tightly coupling it with an API. I've previously used fastify+svelte. Would be interested to try svelte kit sometime

[@ShafterPlay]

1:32 You don't need to type the data variable anymore, it infers the type automatically! Same goes for the load function and endpoints!

[@daedalus5070]

Heres hoping Svelte takes over! I am sick of React already and am relatively to React 😅

[@coolmanabc1231]

I have no idea what your saying but your fancy words are soothing

[@CodingWithTaaxo]

Hey Fireship, would you please share with us which tool did you use to create the intro Svelte Logo

[@vrajshah8075]

I want to know too

[@iMidnight_]

im going to comment here just incase you guys find out

[@intheburrows]

jQuery

[@CodingWithTaaxo]

This guy is here just for the money, he does not care for the others

[@NootNooter]

Adobe After Effects, he mentions this in the "This video was made with code"

[@readyplayer2197]

I just love svelte.

[@PhRecovry]

I'm thinking which I'm going to learn Svelte or Next 13. I know intermediate of React/Next.js 12.5 so i don't know what to learn next🤔

[@AlcantaraMC]

I have been learning svelte, and it almost feels like a hack. props to the contributors of this project.

[@zedshockblade7157]

The only reason I'm staying with react is because of the job opportunities, but the moment companies adopt Svelte, im ready to go

[@unknown-user001]

True. Staying with react is only for react junky companies

[@ridass.7137]

you better dont miss out then

[@s1nistr433]

Our jobs are gonna be replaced by AI soon, so coding for jobs isn't that important anymore

[@sven-o]

@@s1nistr433 lmao

[@marusdod3685]

there's no better framework than React

[@stuvius]

Svelte is a blessing

[@zedmagdy]

talk about Inertiajs with laravel or RoR it's the best stack right now I think

[@jamesrbrindle]

Legit question - why do I need yet another JS framework? I’ve had to learn Vue recently for a project which I heavily question why someone made the decision to use it on top of a Laravel project. Its supposed to be SSR but seems to be a lot of JS of our code in the browser. I seem to be writing things three times - front end calls to Laravel, Laravel then calls our API, API fulfills data.

[@deekuman]

I love nextjs!! wow :)

[@asdqwe4427]

Feeling the FOMO of Svelte for sure

[@rhumbertgz]

Which UI library for svelte do you recommend?

[@PaulPlay]

0:42 what kind of application are you building here exactly? Variable names seem a bit sus🤔

[@anazi]

Expo SDK49 deserves a 100 seconds video !

[@altaccount648]

Very cool.

[@guzidev]

❤🎉 I love svelte and sveltekit

[@mixxxer]

What is the standard for deploying something like this with server files?

[@DrShmuck]

how do you guys handle async stores?