Teaching Kelvin Svelte on TKYT
I was on Teach Kelvin Your Thing to teach Kelvin Svelte! I had a great time — thanks again to Kelvin for having me on.
We created a Star Wars watch order app. You can check out the live demo or view the source code on GitHub. We covered:
- What Svelte is
- Svelte component basics — script, template, style
- Reactivity in Svelte
- Svelte’s accessibility warnings
- Using
bind:value
to get the value of an input - Reactively sorting and filtering a list
- Toggling classes on an element with
class:
- Using
<slot>
- Adding polish with the built-in
fade
andcrossfade
transitions andanimate:flip
If you're new to Svelte, I recommend checking out the Svelte tutorial. Be sure to stop by the Svelte Discord server if you need help!
Want to find out when I post a new article? Follow me on Mastodon or Bluesky or subscribe to my RSS feed. I also have an email newsletter that I'll send out when I post something new, along with anything else I find interesting.
Previous Blog Post: Page Transitions in SvelteKit with the View Transitions API
Next Blog Post: 4 things I miss from Svelte after working in React