Awesome Svelte Kit
Curated resources on building sites with SvelteKit - A server-less-first answer to "the Next.js experience" by the Svelte community
Awesome SvelteKit
SvelteKit is awesome. It's "the missing CLI" and the svelte team's favoured project structure, to build full-stack server rendered and static sites, with
- File/Folder based routing
- focus on server-less with adapters
- API routes
and good baked-in conventions and constructs to support common web app needs. It's a successor to Sapper which served the aforementioned needs, with exception of adapters, which is special/unique(with no officially provided parallels in Next.js/Nuxt ecosystems yet) way to make vendor-agnostic, server-less first deployment concern a seamlessly integrated part of the framework.
✍️ Blogs
History & The Why's?
- A Short History of SvelteKit
- What's the deal with SvelteKit?
- Virtual DOM is pure overhead - A must read if you want to make sense of why FE compiler frameworks?
- Svelte Kit, the first ‘serverless-first’ framework?
- Would you use Sveltekit for production?
- My Evaluation of SvelteKit for Full-Stack Web App Development
The How To's?
- How to Create a Blog with SvelteKit and Strapi
- A Beginner’s Guide to SvelteKit
- How to Make a Website with SvelteKit
- Simple Page Transitions with SvelteKit
- Theme Switch
- DIY SvelteKit CDK adapter
- Build your next commerce store with SvelteKit
- Use Apollo Client with SvelteKit to Query a GraphQL API
- Make an RSS Feed for your SvelteKit Project
- Let's learn SvelteKit by building a static Markdown blog from scratch
- Converting from Gridsome to SvelteKit
- SvelteKit and the "Client pattern"
- Simplify data fetching in SvelteKit with page endpoints
- How to use Serverless Cloud with SvelteKit
- Building a real-time websocket app using SvelteKit
- How to use a Rust WebAssembly module in Svelte with Web Workers
- Getting Started with KitQL and GraphCMS
📹 Videos/Screencasts/Twitch
- An Update on SvelteKit - Rich Harris on SvelteKit(SvelteSummit)
- SvelteKit blog from Scratch (YouTube Playlist)
- SvelteKit Firebase Auth (YouTube Playlist)
- Svelte and SvelteKit - Why We Love It and Why You Should Try It
- Rich Harris - The Road to SvelteKit 1.0
🧶 Condensed Thought-pieces (Twitter Threads)
🗣️ Podcasts
- Rebuilding LevelUpTuts using SvelteKit (@svelteradio) - detail on the decisions and outcomes of migrating from React to Svelte
🏃 SvelteKit Starter Kits and Integrations
- SvelteKit Auth - Authentication library for use with SvelteKit featuring built-in OAuth providers and zero restriction customization(like NextAuth)
- SvelteKit Starter Kit(with Supabase.io Auth, Storage, etc.)
- SvelteKit with Magic Link(with magic.link
- SvelteKit with Stripe #1 and #2
- SvelteKit with Notion
- SvelteKit with Storybook (blog)
- SvelteKit with Firebase
- SvelteKit + Firebase Library(docs)
- SvelteKit with Passport/oAuth2
- SvelteKit with oAuth2
- SvelteKit with NetlifyCMS
- SvelteKit with Sanity
- SvelteKit with Web3
- SvelteKit with Solana
- SvelteKit with Metamask/Unlock-Protocol
- Swyxkit
- SvelteKit Starter - Starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and storybook
- SvelteKit with PostgREST - Svelte/SvelteKit + PostgREST + EveryLayout + social auth starter template
- SvelteKit on Edge(Vercel)
- SvelteKit on Edge(Cloudflare Workers)
- SvelteKit with tRPC - A sample SvelteKit application built to illustrate the usage of ✨ trpc-sveltekit
- Svelte(Kit) TypeScript Showcase
- Swyxkit - An opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for 2022!
- Urara - Sweet & Powerful SvelteKit Blog Template
- SvelteKit with Email - Develop transactional emails with SvelteKit on CloudFlare Workers
- SvelteKit with Elementary Audio - A SvelteKit template for Elementary Audio apps
Adapters
- Deno
- Firebase
- Azure SWA
- Express
- AppEngine
- Architect/Begin
- Cloudflare
- AWS Lambda
- Begin
- Nest.js
- AWS Lambda@Edge
- AWS CDK
- AWS CDK (DIY)
- Wordpress Shortcode
- Github Pages
- HTML Templating Languages
- Chrome Extension
- Bun
- uWebSocket (in development)
Meta-Meta
List of tools that simplify SvelteKit DX further
- Svemix Like Remix.run(Full-Stack addition) to SvelteKit. Write your server code inside svelte files, handle sessions, forms and SEO easily.
- Svelte Zero API
- SvelteKit Zero API
- KitDocs - KitDocs makes it easy to build a documentation site with SvelteKit. You can think of it as a VitePress alternative for the people of Svelte.
- Sveltin - The Smartest Way to Build SvelteKit powered static websites: a powerful CLI for your next SvelteKit static website
Enhancers/Extensions
- Themes - Dark Mode
- SvelteKit SVG - SvelteKit plugin that makes it possible to import SVG files as Svelte components, inline SVG code or urls
- Svelte Kit Cookie Session - Encrypted "stateless" cookie sessions for SvelteKit
- tRPC SvelteKit
- Metawrite SDK
- SvelteKit Embed Components
📦 Built With Svelte
Open-Source Projects
- evidence.dev - Business Intelligence for Modern Data Teams
- SveltePress - documentation tool built on top of SvelteKit,
- Dockit - Markdown-based document site
- Reddit Client
- Workers KV GUI - Desktop client for Cloudflare's Worker KV, built using SvelteKit and an Electron-like Rust based desktop app builder Tauri (write-up)
- MacOS Web - Replicates some of the Mac OS(Monterey, at the time of writing)'s desktop experience on web, using Svelte!
- Svelte Commerce
- Svelte Steps
- SvelteKit Snippets
- Scores(code)
- Naabu
- Coolify - An open-source & self-hostable Heroku / Netlify alternative.
- Beatbump - Alternative YouTube Music frontend built with Svelte/SvelteKit
- Webstone - Start your next full-stack application with Webstone and configure it as you go.
- SvelteFlow - 📈 Svelte library for building node-based graphs
- Flowbite - Clone of flowbite-react but for Svelte without the jank of flowbite-svelte
- Wordex - Wordex clone built with SvelteKit
- LearnAwesome - Curated learning resources with topics, formats, difficulty levels, expert reviews and metadata tags
- PocketBaseUML - A free, open-source UML diagram generator for PocketBase
- Other Awesome Svelte-kit Projects
Websites/Apps
- sveltesummit.com
- radiofrance.fr
- leveluptutorials.com
- projectwallace.com
- rykr.co
- flayks.com
- kineticsnow.com
- mortimerbaltus.com
- quickfantasystats.com
- Files(source) - 3rd Party File Manager for Windows
- Dragsters.vercel
- netimmo.ch
- bahaistudies.ca
- connorrothschild.com
- blfcreative.dev
- base.report
- ip.new(just sub-domains)
- teamtale.app
- limey.io
- stockanalysis.com
- app.calandrier.com
- kadium.kasper.space
- fusepilot.com
- prediabetes.guide
- moxiekb.com
- see.net.ph
- enka.shinshin.moe
- siva.gg
- cuddy.me
- Tiny Little Paws (code) - A marketing website for dog grooming services in Chino Hills, California.
- Bixoto.com (blog post) - A Spanish ecommerce website
