Svelte/SvelteKit

Wahhab Baldwin

Hi! Want to learn more about Svelte and SvelteKit? So do I! I’m Wahhab Baldwin, retired founder of Deep Web Works. I’ve decided to repurpose my website to share tutorials based on my adventures with Svelte and SvelteKit. I hope you’ll find it useful, and I welcome your feedback.

So What Are Svelte and SvelteKit?

Svelte Logo

As you likely know, Svelte is a framework for building user interfaces. JavaScript based, it is compared to React and Vue. Unlike these, however, it is a compiler, does not use a shadow DOM, or link in a run-time library, making it small and fast. It is also much easier to learn. StackOverflow’s recent survey showed Svelte as the most-loved web framework.

SvelteKit is a framework for building web applications that provides routing, client-side and/or server-side rendering, code-splitting, and more. It is comparable to Next in React or Nuxt in Vue. It makes it quick and easy to develop sites (like this one!) with a great developer experience. Version 1.0 was released in August, 2022, and although it is new, it is used in production in sites like nytimes.com. While Svelte was the fifth most-popular front-end framework from 2020 through February, 2022, I am convinced that now that SvelteKit is in production, Svelte and SvelteKit will grow rapidly and become a major force in web development. In any event, it’s fun learning and using them!

Let’s Dive In!

To use these tutorials, you should be familiar with web development and JavaScript, and have Node.js and npm installed on your computer to follow my code examples.

Svelte has a great tutorial, but let me walk you through building a calculator component that you can put anywhere on your site.

Learn to embed the Calculator component in an HTML webpage.

Learn SvelteKit basics in Getting Started with SvelteKit.

Dive deeper into SvelteKit, learning how to get data from endpoints.

Learn how to build a SvelteKit site that uses a MySQL database.

Learn some ways of hosting SvelteKit apps on the web—even free!

New! Learn how to build a blog with SvelteKit (Part 1—more to come).

Credits

This site is built using SvelteKit on the Jamstack. It is hosted (free of charge!) by Netlify.