Svelte Starter Kit - Helpful Learning Resources & Packages
Tags: svelte, webdev, beginners
Published: 2022-03-12 16:14:01

Hi 👋! I'm David Peng.

In this article, I'll share some helpful Svelte learning resources & packages that I consumed and used in the past few months to migrate a legacy web app in my work.

You can check my last article about my journey here 👉 [Supercharge Web DX in Svelte way](https://davipon.hashnode.dev/supercharge-web-dx-in-svelte-way)

I hope this article can help if you're new to Svelte or still on the way to learning it.

## Learning Resources

### Official Tutorial

[Svelte Official Tutorial](https://svelte.dev/tutorial/basics)
I'd strongly recommend finishing this tutorial before watching any "How to build a To-do app in Svelte" videos.
By following this interactive tutorial, you'll have an overall concept of how Svelte works and a simple taste of reactivity in Svelte.

### Crash Course

If you've just finished the official tutorial and looking for a video one, here are my collections for Svelte & SvelteKit:

{% embed https://www.youtube.com/watch?v=zojEMeQGGHs&list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO&ab_channel=TheNetNinja %}
{% embed https://www.youtube.com/watch?v=9OlLxkaeVvw&list=PL4cUxeGkcC9hpM9ARM59Ve3jqcb54dqiP&ab_channel=TheNetNinja %}
The Net Ninja is one of my favorite YouTube channels with high-quality tutorials. These two great series can give you the confidence to build Svelte apps in real life.

I also watched and coded along with James Q Quick(@jamesqquick)'s SvelteKit Crash Course:

{% embed https://www.youtube.com/watch?v=UU7MgYIbtAk&ab_channel=JamesQQuick %}

### Advanced Svelte from the core team

I found Lihau's blog and YouTube channel are super helpful for those who like to dive deeper into Svelte, from compiler to advanced tips of using store or actions.

[Li Hau's Blog](https://lihautan.com/blogs/)

[Li Hau's YouTube channel](https://www.youtube.com/c/lihautan)

I also learned a lot from [Geoff's articles](https://twitter.com/geoffrich_/status/1475968586405404677?s=20&t=LKp7TOqShikeQ215RxR2Jg).

### Weekly Svelte by LevelUpTuts

{% embed https://www.youtube.com/watch?v=HUgZHf--qVo&list=PLLnpHn493BHF-Onm1MQgKC1psvW-rJuYi&ab_channel=LevelUpTuts %}

I discovered Svelte in an episode of Syntax.fm, and Scott (host of Syntax.fm and founder of LevelUpTuts) shared his experience of migrating from React to Svelte. Then I found his Weekly Svelte playlist. It helped me a ton in my first few weeks in the Svelte world.

## Community

### Svelte Society

> We are a volunteer global network of Svelte fans that strive to promote Svelte and its ecosystem.

A go-to community for nearly everything you would need. You can find best practices and hundreds of Svelte packages here:

[Svelte Society](https://sveltesociety.dev)

[Svelte Society YouTube channel](https://www.youtube.com/c/SvelteSociety)

And don't forget to join the [Svelte Discord channel](https://discord.gg/svelte)!

### Svelte Sirens

[Svelte Sirens](https://sveltesirens.dev/)

> A Svelte Society for women, non-binary people, & allies.

It's fantastic to see such a supportive Svelte community grow! You can find great talks on the Svelte Society YouTube channel.

### Svelte Summit

[Svelte Summit](https://www.sveltesummit.com/)

> Svelte Summit is dedicated to Svelte and everything happening in the community.

I found informative talks and valuable packages in the last Svelte Full Summit. You can also find them on 
the Svelte Society YouTube channel.

## Svelte Packages & Utilities

### Made with Svelte

[Made with Svelte](https://madewithsvelte.com/)

It's a collection of projects made with Svelte, from UI libraries to components.

### ➕ Svelte Add

[Svelte Add](https://github.com/svelte-add/svelte-add)

> This is a community project to easily add integrations and other functionality to Svelte apps. 

IMHO this is one of the most critical parts when building a Svelte app.

The SvelteKit template has already covered ESLint, Prettier, TypeScript & Playwright setup.
But what if you like to use Tailwind or Jest in your project as well? (yeah, it's me.) 
You might go down a massive rabbit hole of configuration hell.

So use svelte-add instead of reinventing the wheel!

### Packages I used in internal business apps

[Svelte Actions](https://github.com/sw-yx/svelte-actions): A Prototype of Svelte actions for inclusion into official actions in the future.

[Svelte MultiSelect](https://svelte-multiselect.netlify.app/): Keyboard-friendly, zero-dependency multi-select Svelte component.

[svelte-tiny-virtual-list](https://github.com/Skayo/svelte-tiny-virtual-list): A tiny but mighty list virtualization library, with zero dependencies 💪

[Svelte notifications](https://svelte-notifications.netlify.app/): Extremely simple and flexible notifications for Svelte

[mdsvex](https://mdsvex.pngwn.io/): A Markdown preprocessor for Svelte. Markdown in Svelte.

[Vest](https://vestjs.dev/): Declarative validations framework inspired by unit testing libraries.

[vitest-svelte-kit](https://github.com/nickbreaton/vitest-svelte-kit): Automatically configure Vitest from your SvelteKit configuration.

## Thanks for reading!

The Svelte community and ecosystem are getting stronger. We can see more and more content creators now working on their Svelte & SvelteKit tutorials, and that's a good thing!

But instead of creating tutorials, I came up with an idea to list all helpful resources that may lower the barrier to introducing Svelte to others.

That's all for this time! I hope you have an incredible journey in the Svelte world 🙌.

You can follow me on Twitter: [@davipon](https://twitter.com/davipon)