Teaching Kelvin Svelte on TKYT

— 1 minute read

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 and crossfade transitions and animate: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