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
I hope this article can help if you're new to Svelte or still on the way to learning it.
Learning Resources
Official Tutorial
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:
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's SvelteKit Crash Course:
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.
I also learned a lot from Geoff's articles.
Weekly Svelte by 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:
And don't forget to join the Svelte Discord channel!
Svelte Sirens
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 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
It's a collection of projects made with Svelte, from UI libraries to components.
➕ 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: A Prototype of Svelte actions for inclusion into official actions in the future.
Svelte MultiSelect: Keyboard-friendly, zero-dependency multi-select Svelte component.
svelte-tiny-virtual-list: A tiny but mighty list virtualization library, with zero dependencies 💪
Svelte notifications: Extremely simple and flexible notifications for Svelte
mdsvex: A Markdown preprocessor for Svelte. Markdown in Svelte.
Vest: Declarative validations framework inspired by unit testing libraries.
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