Home

Awesome

<h1 align="center"> <img src="site/static/awesome-sveltekit-banner.svg" alt="Awesome SvelteKit" width="500"> </h1> <h4 align="center">

Awesome Pull Requests Welcome Tests GH Pages pre-commit.ci status

</h4> <br>

Awesome examples of SvelteKit in the wild. Visit janosh.github.io/awesome-sveltekit to view this list with screenshots plus search and sort functionality (e.g. based on GH stars).

Sites

  1. Svelte.dev  [code]  <a href="https://github.com/sveltejs/svelte/stargazers"> <img src="https://img.shields.io/github/stars/sveltejs/svelte?logo=github" alt="GitHub stars" valign="middle"> </a>

    Cybernetically enhanced web apps.<br>

    uses: CodeMirror, Mapbox, Docker

  2. Immich  [code]  <a href="https://github.com/immich-app/immich/stargazers"> <img src="https://img.shields.io/github/stars/immich-app/immich?logo=github" alt="GitHub stars" valign="middle"> </a>

    Self-hosted photo and video backup solution directly from your mobile phone.<br>

    uses: NestJS, TypeScript, Tailwind, Flutter, Python

  3. Ollama Web UI  [code]  <a href="https://github.com/ollama-webui/ollama-webui/stargazers"> <img src="https://img.shields.io/github/stars/ollama-webui/ollama-webui?logo=github" alt="GitHub stars" valign="middle"> </a>

    ChatGPT-Style Web UI Client for Ollama 🦙.<br>

    uses: highlight.js, MarkedJS, KaTeX, TypeScript, Tailwind

  4. Coolify  [code]  <a href="https://github.com/coollabsio/coolify/stargazers"> <img src="https://img.shields.io/github/stars/coollabsio/coolify?logo=github" alt="GitHub stars" valign="middle"> </a>

    An open-source & self-hostable Heroku / Netlify alternative.<br>

    uses: PNPM, TypeScript, Tailwind, sveltekit-i18n, PostCSS, Husky

  5. Official SvelteKit docs  [code]  <a href="https://github.com/sveltejs/kit/stargazers"> <img src="https://img.shields.io/github/stars/sveltejs/kit?logo=github" alt="GitHub stars" valign="middle"> </a>

    The fastest way to build Svelte apps.<br>

    uses: Netlify, PNPM

  6. Gitpod  [code]  <a href="https://github.com/gitpod-io/gitpod/stargazers"> <img src="https://img.shields.io/github/stars/gitpod-io/gitpod?logo=github" alt="GitHub stars" valign="middle"> </a>

    Gitpod streamlines developer workflows by providing prebuilt, collaborative development environments in your browser - powered by VS Code.<br>

    uses: MDsveX, Tailwind, Netlify

  7. Windmill  [code]  <a href="https://github.com/windmill-labs/windmill/stargazers"> <img src="https://img.shields.io/github/stars/windmill-labs/windmill?logo=github" alt="GitHub stars" valign="middle"> </a>

    An OSS developer platform to build multi-step automations and internal apps from minimal Python and Typescript scripts.<br>

    uses: TypeScript, Tailwind, cssnano, Cypress, PostCSS, svelte-highlight, svelte-markdown

  8. Chat UI  [code]  <a href="https://github.com/huggingface/chat-ui/stargazers"> <img src="https://img.shields.io/github/stars/huggingface/chat-ui?logo=github" alt="GitHub stars" valign="middle"> </a>

    Powers the HuggingChat app. Making the community's best AI chat models available to everyone.<br>

    uses: Huggingface Inference, Huggingface Hub, Tailwind

  9. Skeleton  [code]  <a href="https://github.com/Brain-Bones/skeleton/stargazers"> <img src="https://img.shields.io/github/stars/Brain-Bones/skeleton?logo=github" alt="GitHub stars" valign="middle"> </a>

    A fully featured web UI toolkit for Svelte + Tailwind. Supports SvelteKit, Vite, and Astro.<br>

    uses: Vitest, PostCSS, highlight.js, Tailwind, Typescript, jsdom

  10. shadcn-svelte  [code]  <a href="https://github.com/huntabyte/shadcn-svelte/stargazers"> <img src="https://img.shields.io/github/stars/huntabyte/shadcn-svelte?logo=github" alt="GitHub stars" valign="middle"> </a>

    shadcn/ui, but for Svelte.<br>

    uses: TypeScript, Vercel, Tailwind, PNPM, Changesets, vitest, Prism, MarkedJS

  11. mermaid-live-editor  [code]  <a href="https://github.com/mermaid-js/mermaid-live-editor/stargazers"> <img src="https://img.shields.io/github/stars/mermaid-js/mermaid-live-editor?logo=github" alt="GitHub stars" valign="middle"> </a>

    Edit, live preview and share mermaid charts and diagrams.<br>

    uses: TypeScript, Docker, Tailwind, PostCSS, Cypress, Husky

  12. evidence  [code]  <a href="https://github.com/evidence-dev/evidence/stargazers"> <img src="https://img.shields.io/github/stars/evidence-dev/evidence?logo=github" alt="GitHub stars" valign="middle"> </a>

    Evidence enables analysts to deliver a polished business intelligence system using SQL and markdown.<br>

    uses: PNPM, Changesets, echarts, uvu

  13. Fireship  [code]  <a href="https://github.com/fireship-io/fireship.io/stargazers"> <img src="https://img.shields.io/github/stars/fireship-io/fireship.io?logo=github" alt="GitHub stars" valign="middle"> </a>

    The Fireship PRO course platform frontend built with Svelte, Tailwind CSS, Hugo (for static content management), Firebase for Auth and DB, Flamethrower for routing.<br>

    uses: Tailwind, Hugo, Firebase, Flamethrower, Sass, PostCSS, Algolia

  14. Svelte Material UI  [code]  <a href="https://github.com/hperrin/svelte-material-ui/stargazers"> <img src="https://img.shields.io/github/stars/hperrin/svelte-material-ui?logo=github" alt="GitHub stars" valign="middle"> </a>

    Svelte Material UI Components.<br>

    uses: MDsveX, TypeScript, highlight.js, remark, Sass

  15. Svelvet  [code]  <a href="https://github.com/oslabs-beta/Svelvet/stargazers"> <img src="https://img.shields.io/github/stars/oslabs-beta/Svelvet?logo=github" alt="GitHub stars" valign="middle"> </a>

    A lightweight Svelte component library for building interactive node-based flow diagrams.<br>

    uses: Playwright, D3, Testing Library, Tailwind, PostCSS, Vitest

  16. StemRoller  [code]  <a href="https://github.com/stemrollerapp/stemroller/stargazers"> <img src="https://img.shields.io/github/stars/stemrollerapp/stemroller?logo=github" alt="GitHub stars" valign="middle"> </a>

    Isolate vocals, drums, bass, and other instrumental stems from any song<br>

    uses: Electron, Tailwind, Lodash, PostCSS, ytdl-core

  17. Threlte  [code]  <a href="https://github.com/threlte/threlte/stargazers"> <img src="https://img.shields.io/github/stars/threlte/threlte?logo=github" alt="GitHub stars" valign="middle"> </a>

    Threlte is a component library for Svelte to build and render three.js scenes declaratively and state-driven in Svelte apps.<br>

    uses: TypeScript, Three.js, Tailwind, PostCSS, Algolia, Iconify

  18. svelte-realworld  [code]  <a href="https://github.com/sveltejs/realworld/stargazers"> <img src="https://img.shields.io/github/stars/sveltejs/realworld?logo=github" alt="GitHub stars" valign="middle"> </a>

    SvelteKit implementation of the RealWorld app.<br>

    uses: Netlify, MarkedJS

  19. macos-web  [code]  <a href="https://github.com/PuruVJ/macos-web/stargazers"> <img src="https://img.shields.io/github/stars/PuruVJ/macos-web?logo=github" alt="GitHub stars" valign="middle"> </a>

    Replicate some of the macOS desktop experience on the web.<br>

    uses: TypeScript, Vercel, SCSS, PNPM, Iconify

  20. Flowbite  [code]  <a href="https://github.com/themesberg/flowbite-svelte/stargazers"> <img src="https://img.shields.io/github/stars/themesberg/flowbite-svelte?logo=github" alt="GitHub stars" valign="middle"> </a>

    Official Svelte components built for Flowbite and Tailwind CSS. All interactivity handled by Svelte.<br>

    uses: PNPM, TypeScript, Tailwind, MDsveX, Prism, PostCSS, Playwright

  21. Svelte Headless UI  [code]  <a href="https://github.com/rgossiaux/svelte-headlessui/stargazers"> <img src="https://img.shields.io/github/stars/rgossiaux/svelte-headlessui?logo=github" alt="GitHub stars" valign="middle"> </a>

    Unofficial Svelte port of Headless UI components.<br>

    uses: MDsveX, TypeScript, PostCSS, Tailwind, cssnano, Jest, rehype

  22. Svelte Commerce  [code]  <a href="https://github.com/itswadesh/svelte-commerce/stargazers"> <img src="https://img.shields.io/github/stars/itswadesh/svelte-commerce?logo=github" alt="GitHub stars" valign="middle"> </a>

    Headless, Authentication, Cart & Checkout, TailwindCSS, Server Rendered, Proxy + API Integrated, Animations, Stores, Lazy Loading, Loading Indicators, Carousel, Instant Search, Faceted Filters, Typescript, Open Source, MIT license. 1 command deploy to your own server, 1 click deploy to Netlify/Vercel.<br>

    uses: Vercel, Tailwind, TypeScript, svelte-toasts, PostCSS, cssnano

  23. editable-website  [code]  <a href="https://github.com/michael/editable-website/stargazers"> <img src="https://img.shields.io/github/stars/michael/editable-website?logo=github" alt="GitHub stars" valign="middle"> </a>

    A SvelteKit template for building CMS-free editable websites.<br>

    uses: Tailwind, ProseMirror, AWS

  24. Layer Cake  [code]  <a href="https://github.com/mhkeller/layercake/stargazers"> <img src="https://img.shields.io/github/stars/mhkeller/layercake?logo=github" alt="GitHub stars" valign="middle"> </a>

    Graphics framework for Svelte with colorful demo page. Can generate responsive graphics server-side that work without JavaScript.<br>

    uses: D3, GitHub Pages, JSDoc, Mocha, Underscore

  25. Sveltestrap  [code]  <a href="https://github.com/bestguy/sveltestrap/stargazers"> <img src="https://img.shields.io/github/stars/bestguy/sveltestrap?logo=github" alt="GitHub stars" valign="middle"> </a>

    Bootstrap 4 & 5 components for Svelte.<br>

    uses: Storybook, Babel, Testing Library, Jest, PostCSS, Prism

  26. Pancake  [code]  <a href="https://github.com/Rich-Harris/pancake/stargazers"> <img src="https://img.shields.io/github/stars/Rich-Harris/pancake?logo=github" alt="GitHub stars" valign="middle"> </a>

    Experimental Svelte charting library. Visualize data with a combination of HTML, SVG and canvas/WebGL. Designed with server-side rendering in mind, so graphs potentially work without JavaScript. <a href="https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp">Blog post</a>.<br>

    uses: D3, surge.sh, TypeScript

  27. Svelte Cubed  [code]  <a href="https://github.com/Rich-Harris/svelte-cubed/stargazers"> <img src="https://img.shields.io/github/stars/Rich-Harris/svelte-cubed?logo=github" alt="GitHub stars" valign="middle"> </a>

    Three.js component library for Svelte. Abandoned. Check out <a href="https://threlte.xyz">threlte</a> instead.<br>

    uses: TypeScript, PNPM, Vercel, MDsveX

  28. inlang  [code]  <a href="https://github.com/inlang/monorepo/stargazers"> <img src="https://img.shields.io/github/stars/inlang/monorepo?logo=github" alt="GitHub stars" valign="middle"> </a>

    Translate software products 2x faster.<br>

    uses: TypeScript, Vercel, IBM Carbon, Tailwind, Supabase

  29. Beatbump  [code]  <a href="https://github.com/snuffyDev/beatbump/stargazers"> <img src="https://img.shields.io/github/stars/snuffyDev/beatbump?logo=github" alt="GitHub stars" valign="middle"> </a>

    Alternative frontend for YouTube Music.<br>

    uses: TypeScript, PostCSS, SCSS

  30. Houdini GraphQL  [code]  <a href="https://github.com/HoudiniGraphQL/houdini/stargazers"> <img src="https://img.shields.io/github/stars/HoudiniGraphQL/houdini?logo=github" alt="GitHub stars" valign="middle"> </a>

    Documentation site for Houdini.<br>

    uses: PNPM, MDsveX, Husky, highlight.js

  31. svelte-french-toast  [code]  <a href="https://github.com/kbrgl/svelte-french-toast/stargazers"> <img src="https://img.shields.io/github/stars/kbrgl/svelte-french-toast?logo=github" alt="GitHub stars" valign="middle"> </a>

    Svelte port of Timo Lins' react-hot-toast, a lightweight, customizable toast notification library.<br>

    uses: TypeScript, Prism, Tailwind, PostCSS, PNPM

  32. svelte-put  [code]  <a href="https://github.com/vnphanquang/svelte-put/stargazers"> <img src="https://img.shields.io/github/stars/vnphanquang/svelte-put?logo=github" alt="GitHub stars" valign="middle"> </a>

    Useful svelte stuff to put in your projects.<br>

    uses: Changesets, MDsveX, PostCSS, PNPM, Turbo

  33. tRPC-SvelteKit  [code]  <a href="https://github.com/icflorescu/trpc-sveltekit/stargazers"> <img src="https://img.shields.io/github/stars/icflorescu/trpc-sveltekit?logo=github" alt="GitHub stars" valign="middle"> </a>

    End-to-end type-safe APIs for your SvelteKit applications.<br>

    uses: TypeScript, tRPC

  34. Cryptgeon  [code]  <a href="https://github.com/cupcakearmy/cryptgeon/stargazers"> <img src="https://img.shields.io/github/stars/cupcakearmy/cryptgeon?logo=github" alt="GitHub stars" valign="middle"> </a>

    A secure, open source notes and file sharing service inspired by PrivNote written in Rust & Svelte.<br>

    uses: svelte-intl-precompile, sanitize-html

  35. svelte-legos  [code]  <a href="https://github.com/ankurrsinghal/svelte-legos/stargazers"> <img src="https://img.shields.io/github/stars/ankurrsinghal/svelte-legos?logo=github" alt="GitHub stars" valign="middle"> </a>

    A library of Svelte actions.<br>

    uses: TypeScript, vitest, Tailwind, PostCSS, Prism

  36. sveltekit-typescript-showcase  [code]  <a href="https://github.com/ivanhofer/sveltekit-typescript-showcase/stargazers"> <img src="https://img.shields.io/github/stars/ivanhofer/sveltekit-typescript-showcase?logo=github" alt="GitHub stars" valign="middle"> </a>

    This repository shows how Svelte and SvelteKit work together with TypeScript.<br>

    uses: TypeScript

  37. swyxkit  [code]  <a href="https://github.com/sw-yx/swyxkit/stargazers"> <img src="https://img.shields.io/github/stars/sw-yx/swyxkit?logo=github" alt="GitHub stars" valign="middle"> </a>

    An opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for 2022!<br>

    uses: Tailwind, Netlify

  38. Fluent Svelte  [code]  <a href="https://github.com/Tropix126/fluent-svelte/stargazers"> <img src="https://img.shields.io/github/stars/Tropix126/fluent-svelte?logo=github" alt="GitHub stars" valign="middle"> </a>

    A faithful implementation of Microsoft's Fluent design system in Svelte.<br>

    uses: MDsveX, SCSS, TypeScript, remark, rehype, PNPM, PostCSS, Prism

  39. Dotfyle  [code]  <a href="https://github.com/codicocodes/dotfyle/stargazers"> <img src="https://img.shields.io/github/stars/codicocodes/dotfyle?logo=github" alt="GitHub stars" valign="middle"> </a>

    Discover and share Neovim configurations and plugins.<br>

    uses: TypeScript, PNPM, tRPC-SvelteKit, Prisma, Tailwind, Octokit

  40. Urara  [code]  <a href="https://github.com/importantimport/urara/stargazers"> <img src="https://img.shields.io/github/stars/importantimport/urara?logo=github" alt="GitHub stars" valign="middle"> </a>

    Sweet & Powerful SvelteKit Blog Template.<br>

    uses: MDsveX, PostCSS, Tailwind, DaisyUI, TypeScript, PNPM

  41. Good First Issue Finder  [code]  <a href="https://github.com/EddieHubCommunity/good-first-issue-finder/stargazers"> <img src="https://img.shields.io/github/stars/EddieHubCommunity/good-first-issue-finder?logo=github" alt="GitHub stars" valign="middle"> </a>

    Good First Issue Finder helps new contributors pave their path into the world of OSS.<br>

    uses: TypeScript, Tailwind, Husky, Octokit, PostCSS

  42. learn.svelte.dev  [code]  <a href="https://github.com/sveltejs/learn.svelte.dev/stargazers"> <img src="https://img.shields.io/github/stars/sveltejs/learn.svelte.dev?logo=github" alt="GitHub stars" valign="middle"> </a>

    A soup-to-nuts interactive tutorial on how to build apps with Svelte.<br>

    uses: Vercel, PNPM, Prism, MarkedJS, CodeMirror

  43. QWER  [code]  <a href="https://github.com/kwchang0831/svelte-QWER/stargazers"> <img src="https://img.shields.io/github/stars/kwchang0831/svelte-QWER?logo=github" alt="GitHub stars" valign="middle"> </a>

    ✒︎ Simply Awesome Blog Starter built with SvelteKit and ❤<br>

    uses: UnoCSS, TypeScript, MarkedJS, PNPM, Vercel

  44. Files  [code]  <a href="https://github.com/files-community/website/stargazers"> <img src="https://img.shields.io/github/stars/files-community/website?logo=github" alt="GitHub stars" valign="middle"> </a>

    3rd Party File Manager for Windows.<br>

    uses: PNPM, TypeScript, SCSS, Vercel

  45. Joy of Code  [code]  <a href="https://github.com/mattcroat/joy-of-code/stargazers"> <img src="https://img.shields.io/github/stars/mattcroat/joy-of-code?logo=github" alt="GitHub stars" valign="middle"> </a>

    🌸 Joy of Code is a digital garden growing curious minds.<br>

    uses: GitHub API, Monaco, Playwright, Google Analytics, Supabase, Vercel, PNPM, Sass, TypeScript, remark, rehype

  46. Watch This  [code]  <a href="https://github.com/StephDietz/watch-this/stargazers"> <img src="https://img.shields.io/github/stars/StephDietz/watch-this?logo=github" alt="GitHub stars" valign="middle"> </a>

    Uses OpenAI GPT-3 API and streaming Vercel edge functions to generate cinema recommendations based on user input.<br>

    uses: TypeScript, Vercel, Tailwind

  47. SvelteKit static blog starter  [code]  <a href="https://github.com/josh-collinsworth/sveltekit-blog-starter/stargazers"> <img src="https://img.shields.io/github/stars/josh-collinsworth/sveltekit-blog-starter?logo=github" alt="GitHub stars" valign="middle"> </a>

    A pre-configured SvelteKit static blog starter, with Sass, Markdown, MDSvex, Rehype and background preloading.<br>

    uses: Netlify, MDsveX, Sass, Husky

  48. Svelte Society  [code]  <a href="https://github.com/svelte-society/sveltesociety.dev/stargazers"> <img src="https://img.shields.io/github/stars/svelte-society/sveltesociety.dev?logo=github" alt="GitHub stars" valign="middle"> </a>

    Global network of Svelte fans striving to promote Svelte and its ecosystem.<br>

    uses: TypeScript, Gitpod

  49. SvelteLab  [code]  <a href="https://github.com/sveltelab/sveltelab/stargazers"> <img src="https://img.shields.io/github/stars/sveltelab/sveltelab?logo=github" alt="GitHub stars" valign="middle"> </a>

    Supercharged REPL for Svelte (think StackBlitz specialized for Svelte)<br>

    uses: Playwright, vitest, Iconify, MarkedJS, TypeScript, PNPM, Pocketbase, Vercel, Tailwind

  50. Modern Fluid Typography Editor  [code]  <a href="https://github.com/codeAdrian/modern-fluid-typography-editor/stargazers"> <img src="https://img.shields.io/github/stars/codeAdrian/modern-fluid-typography-editor?logo=github" alt="GitHub stars" valign="middle"> </a>

    Easily create and fine-tune fluid typography values with Modern CSS <code>clamp()</code>.<br>

    uses: TypeScript, PostCSS, Chart.js, cssnano

  51. neovim craft  [code]  <a href="https://github.com/neurosnap/neovimcraft/stargazers"> <img src="https://img.shields.io/github/stars/neurosnap/neovimcraft?logo=github" alt="GitHub stars" valign="middle"> </a>

    Curated list of neovim plugins.<br>

    uses: TypeScript, Husky

  52. Matt Fantinel  [code]  <a href="https://github.com/matfantinel/matfantinel.github.io/stargazers"> <img src="https://img.shields.io/github/stars/matfantinel/matfantinel.github.io?logo=github" alt="GitHub stars" valign="middle"> </a>

    Personal website and blog of Matt Fantinel, web developer.<br>

    uses: MDsveX, SCSS, Iconoir, Plausible

  53. Svelte Intl Precompile  [code]  <a href="https://github.com/cibernox/svelte-intl-precompile/stargazers"> <img src="https://img.shields.io/github/stars/cibernox/svelte-intl-precompile?logo=github" alt="GitHub stars" valign="middle"> </a>

    I18n library for Svelte that analyzes your keys at build time for maximum performance and minimal footprint. Built as a SvelteKit plugin so good to use as a reference if you want to build one yourself.<br>

    uses: JS-Yaml, JSON5

  54. Svelte MultiSelect  [code]  <a href="https://github.com/janosh/svelte-multiselect/stargazers"> <img src="https://img.shields.io/github/stars/janosh/svelte-multiselect?logo=github" alt="GitHub stars" valign="middle"> </a>

    Keyboard-friendly, accessible and highly customizable multi-select component.<br>

    uses: Vitest, Playwright, Typescript, PNPM, pre-commit, rehype, jsdom, GitHub Pages, mdsvexamples

  55. SvelteKit on Edge  [code]  <a href="https://github.com/Rich-Harris/sveltekit-on-the-edge/stargazers"> <img src="https://img.shields.io/github/stars/Rich-Harris/sveltekit-on-the-edge?logo=github" alt="GitHub stars" valign="middle"> </a>

    SvelteKit, running on the edge. In this case, Vercel's edge network. See <a href="https://twitter.com/leeerob/status/1517627769924034565">https://twitter.com/leeerob/status/1517627769924034565</a>.<br>

    uses: PNPM, Vercel

  56. Significa.co  [code]  <a href="https://github.com/significa/significa.co/stargazers"> <img src="https://img.shields.io/github/stars/significa/significa.co?logo=github" alt="GitHub stars" valign="middle"> </a>

    Product Design and Development agency website, built with Sveltekit.<br>

    uses: TypeScript, Vercel, Tailwind, AWS, Dynamodb, Notion, Storyblock, Matter.js, Plausible

  57. Pixel Art Together  [code]  <a href="https://github.com/liveblocks/pixel-art-together/stargazers"> <img src="https://img.shields.io/github/stars/liveblocks/pixel-art-together?logo=github" alt="GitHub stars" valign="middle"> </a>

    A multiplayer pixel art editor powered by Liveblocks.<br>

    uses: TypeScript, Liveblocks, Tailwind, PostCSS, panzoom

  58. SvelteKit Embed  [code]  <a href="https://github.com/spences10/sveltekit-embed/stargazers"> <img src="https://img.shields.io/github/stars/spences10/sveltekit-embed?logo=github" alt="GitHub stars" valign="middle"> </a>

    SvelteKit embed components for YouTube, Vimeo, Twitter, Spotify, SoundCloud, StackBlitz, CodePen, AnchorFM, Simple Cast and more.<br>

    uses: TypeScript, PNPM, Vercel, MDsveX, Tailwind, PostCSS, Husky, Playwright, DaisyUI

  59. TikZ  [code]  <a href="https://github.com/janosh/tikz/stargazers"> <img src="https://img.shields.io/github/stars/janosh/tikz?logo=github" alt="GitHub stars" valign="middle"> </a>

    Random collection of MIT-licensed standalone TikZ images, mostly about physics and machine learning.<br>

    uses: TypeScript, svelte-multiselect, pre-commit, PNPM, GitHub Pages

  60. Hexapipes  [code]  <a href="https://github.com/gereleth/hexapipes/stargazers"> <img src="https://img.shields.io/github/stars/gereleth/hexapipes?logo=github" alt="GitHub stars" valign="middle"> </a>

    Browser game where the goal is to correctly line up pipes placed on hexagonal puzzle pieces.<br>

    uses: Vercel

  61. svelte-command-palette  [code]  <a href="https://github.com/rohitpotato/svelte-command-palette/stargazers"> <img src="https://img.shields.io/github/stars/rohitpotato/svelte-command-palette?logo=github" alt="GitHub stars" valign="middle"> </a>

    Dead simple command palette with fuzzy search.<br>

    uses: TypeScript, Playwright, PostCSS, Tailwind, Release It, Vercel

  62. sveltekit-mdsvex-blog  [code]  <a href="https://github.com/mvasigh/sveltekit-mdsvex-blog/stargazers"> <img src="https://img.shields.io/github/stars/mvasigh/sveltekit-mdsvex-blog?logo=github" alt="GitHub stars" valign="middle"> </a>

    A minimalist blog template built with SvelteKit and MDsveX.<br>

    uses: TypeScript, MDsveX, Rehype, Remark, PNPM, Vitest, Playwright

  63. Intl Explorer  [code]  <a href="https://github.com/jesperorb/intl-explorer/stargazers"> <img src="https://img.shields.io/github/stars/jesperorb/intl-explorer?logo=github" alt="GitHub stars" valign="middle"> </a>

    A tool for experimenting and trying out the ECMAScript Internationalization API.<br>

    uses: TypeScript, PNPM, Playwright, Vercel, svelte-highlight, Husky, commitlint

  64. Elementari  [code]  <a href="https://github.com/janosh/elementari/stargazers"> <img src="https://img.shields.io/github/stars/janosh/elementari?logo=github" alt="GitHub stars" valign="middle"> </a>

    Interactive visualizations for materials science: periodic tables, 3d crystal structures (Molecules coming soon), Bohr atoms, nuclei, heatmaps, scatter plots.<br>

    uses: TypeScript, pre-commit, D3, svelte-multiselect, Vitest, Playwright, PNPM, jsdom, GitHub Pages

  65. ASM Editor  [code]  <a href="https://github.com/Specy/asm-editor/stargazers"> <img src="https://img.shields.io/github/stars/Specy/asm-editor?logo=github" alt="GitHub stars" valign="middle"> </a>

    A modern webapp to write, run and learn M68K assembly code.<br>

    uses: TypeScript, Sass, Monaco, WASM

  66. Auth starter app  [code]  <a href="https://github.com/passlock-dev/passlock/stargazers"> <img src="https://img.shields.io/github/stars/passlock-dev/passlock?logo=github" alt="GitHub stars" valign="middle"> </a>

    SvelteKit template featuring Passkeys, Social Sign in and more.<br>

    uses: passlock, tailwind, superforms, lucia

  67. Paper Trader Game  [code]  <a href="https://github.com/davjhan/paper-trader-game/stargazers"> <img src="https://img.shields.io/github/stars/davjhan/paper-trader-game?logo=github" alt="GitHub stars" valign="middle"> </a>

    A simple web game where you are given 45 seconds and $100 to make as much money as you can trading a fake stock.<br>

    uses: Tailwind, Netlify, Chart.js, Plausible

  68. SvelteKit Experiments  [code]  <a href="https://github.com/tsukhu/sveltekit-demo/stargazers"> <img src="https://img.shields.io/github/stars/tsukhu/sveltekit-demo?logo=github" alt="GitHub stars" valign="middle"> </a>

    A set of example apps built with SvelteKit and deployed on Vercel. As an ongoing project, this will continue to be enhanced with more examples to showcase the power of SvelteKit.<br>

    uses: Tailwind, Vercel, GraphQL, Firebase, Typescript

  69. SK Incognito  [code]  <a href="https://github.com/GrygrFlzr/kit-docs/stargazers"> <img src="https://img.shields.io/github/stars/GrygrFlzr/kit-docs?logo=github" alt="GitHub stars" valign="middle"> </a>

    The unofficial SvelteKit docs.<br>

    uses: MDsveX, Tailwind, PNPM

  70. markushatvan.com

    Blog posts with code snippets, contact form with Svelte Forms Lib, RSS and sitemap.<br>

    uses: Tailwind, MDsveX, Svelte Forms Lib

  71. Svead  [code]  <a href="https://github.com/spences10/svead/stargazers"> <img src="https://img.shields.io/github/stars/spences10/svead?logo=github" alt="GitHub stars" valign="middle"> </a>

    Svead 🍺, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags, and schema.org data.<br>

    uses: TypeScript, PNPM, Cloudflare Pages, MDsveX, Tailwind, PostCSS, DaisyUI

  72. The Pudding  [code]  <a href="https://github.com/the-pudding/website/stargazers"> <img src="https://img.shields.io/github/stars/the-pudding/website?logo=github" alt="GitHub stars" valign="middle"> </a>

    Digital publication with emphasis on data viz.<br>

    uses: D3, PostCSS, Lodash, PNPM

  73. macOS-Themed Portfolio  [code]  <a href="https://github.com/ansxuman/macOS-Themed-Portfolio/stargazers"> <img src="https://img.shields.io/github/stars/ansxuman/macOS-Themed-Portfolio?logo=github" alt="GitHub stars" valign="middle"> </a>

    An interactive portfolio website inspired by the macOS interface.<br>

    uses: TypeScript, Tailwind, PM2, Cloudflare, Netlify, Nginx

  74. Guess The Year  [code]  <a href="https://github.com/davjhan/guess-the-year-game/stargazers"> <img src="https://img.shields.io/github/stars/davjhan/guess-the-year-game?logo=github" alt="GitHub stars" valign="middle"> </a>

    Round-based browser game where you guess the year in which famous event happened. Answers range between 1900-2021. You start with 100 points. The more your guess is off, the more points you loose.<br>

    uses: Tailwind, Netlify

  75. Multi-Monitor Calculator  [code]  <a href="https://github.com/KevinVandy/multi-monitor_calculator/stargazers"> <img src="https://img.shields.io/github/stars/KevinVandy/multi-monitor_calculator?logo=github" alt="GitHub stars" valign="middle"> </a>

    A tool for planning your multi-monitor setup.<br>

    uses: TypeScript, SMUI, Sass

  76. barnsworthburning  [code]  <a href="https://github.com/Aias/barnsworthburning/stargazers"> <img src="https://img.shields.io/github/stars/Aias/barnsworthburning?logo=github" alt="GitHub stars" valign="middle"> </a>

    An experimental commonplace book / digital garden with a richly interconnected set of links, notes, and ideas.<br>

    uses: TypeScript, Airtable, Radix, MarkedJS, Cloudflare Pages

  77. puruvj.dev  [code]  <a href="https://github.com/puruvj/puruvjdev3/stargazers"> <img src="https://img.shields.io/github/stars/puruvj/puruvjdev3?logo=github" alt="GitHub stars" valign="middle"> </a>

    Puru Vijay's blog site.<br>

    uses: Vercel, TypeScript, SCSS, Cloudinary

  78. ConcertMash  [code]  <a href="https://github.com/mcmxcdev/ConcertMash/stargazers"> <img src="https://img.shields.io/github/stars/mcmxcdev/ConcertMash?logo=github" alt="GitHub stars" valign="middle"> </a>

    Easily generate a playlist for your upcoming concerts based on selected artists!<br>

    uses: TypeScript, Tailwind, Spotify Web API, Filepond, PNPM, Netlify

  79. GraphCMS Starter Blog  [code]  <a href="https://github.com/spences10/sveltekit-starter-blog/stargazers"> <img src="https://img.shields.io/github/stars/spences10/sveltekit-starter-blog?logo=github" alt="GitHub stars" valign="middle"> </a>

    This blog starter shows how to use SvelteKit with GraphCMS.<br>

    uses: Vercel, Tailwind, SCSS, GraphCMS

  80. Svelte Summit Fall 2021  [code]  <a href="https://github.com/svelte-society/svelte-summit/stargazers"> <img src="https://img.shields.io/github/stars/svelte-society/svelte-summit?logo=github" alt="GitHub stars" valign="middle"> </a>

    The 4th virtual conference about Svelte<br>

    uses: Elder.js, PostCSS, Cloudflare

  81. connorrothschild.com  [code]  <a href="https://github.com/connorrothschild/.com/stargazers"> <img src="https://img.shields.io/github/stars/connorrothschild/.com?logo=github" alt="GitHub stars" valign="middle"> </a>

    Creative, content-based portfolio site of Connor Rothschild.<br>

    uses: MDsveX, GSAP, Netlify

  82. Team Health Check  [code]  <a href="https://github.com/codehub-kirans/team-health-check/stargazers"> <img src="https://img.shields.io/github/stars/codehub-kirans/team-health-check?logo=github" alt="GitHub stars" valign="middle"> </a>

    A tool to visualize historical agile scrum team performance based on behavior anchors.<br>

    uses: PicoCSS, Pocketbase, Vercel

  83. digital criticism  [code]  <a href="https://github.com/critique-digitale/critique-digitale.ch/stargazers"> <img src="https://img.shields.io/github/stars/critique-digitale/critique-digitale.ch?logo=github" alt="GitHub stars" valign="middle"> </a>

    Scholarly conference in the digital humanities.<br>

    uses: MDsveX, MVP.css, Cloudflare

  84. Flayks

    Portfolio of Félix Péault, Digital Designer and Art Director. Sanity.io [<a href="https://sanity.io/blog/felix-peault-community-interview">interview</a>], [<a href="https://sanity.io/projects/flayks-portfolio-2021">feature</a>].<br>

    uses: Sanity, anime.js, Vercel, TypeScript, SCSS, PostCSS

  85. Level Up Tutorials

    Video tutorials for web developers and designers.<br>

    uses: TypeScript, Google Tag Manager

  86. JSchallenger

    Free Javascript challenges. Learn Javascript online by solving coding exercises.<br>

    uses: Tailwind, DynamoDB, AWS

  87. cybernetic.dev

    Data-centric UI experiments<br>

    uses: Three.js, Cytoscape.js, Vercel

  88. Houses of World

    A travel, photography and design project showcasing charismatic houses around the world.<br>

    uses: Typescript, SCSS, PostCSS, Motion One, OGL, WebGL, Directus, Swell Commerce, Vercel

🎉 Suggestions Welcome

Want to add an open-source project to this list? PRs welcome! This collection is a community effort intended as a learning resource for Svelte devs. Entry requirements:

  1. open source: While a site with private code can give design and feature ideas, there's little educational value if you can't inspect how it was made.
  2. novel: Not just another blog or todo app. Ideally, some application or technology not already covered in this collection.
  3. popular: At least 50 stars on GitHub or reasonable expectation to reach that number soon.

These requirements arose over time so not all existing entries satisfy them. There can also be tradeoffs. For example, if novelty is very high, popularity can be lower. If you're unsure, please open a discussion first.

A good place to discover influential Svelte projects (not necessarily SvelteKit) is GitHub Trending. If anything on that list stands out to you but is missing here, please add it!