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. Ollama Web UI  [code] 

   

   ChatGPT-Style Web UI Client for Ollama 🦙.
   

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

2. Svelte.dev  [code] 

   

   Cybernetically enhanced web apps.
   

   uses: CodeMirror, Mapbox, Docker

3. Immich  [code] 

   

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

   uses: NestJS, TypeScript, Tailwind, Flutter, Python

4. Coolify  [code] 

   

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

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

5. Official SvelteKit docs  [code] 

   

   The fastest way to build Svelte apps.
   

   uses: Netlify, PNPM

6. Gitpod  [code] 

   

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

   uses: MDsveX, Tailwind, Netlify

7. Windmill  [code] 

   

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

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

8. Chat UI  [code] 

   

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

   uses: Huggingface Inference, Huggingface Hub, Tailwind

9. shadcn-svelte  [code] 

   

   shadcn/ui, but for Svelte.
   

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

10. Skeleton  [code] 

    

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

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

11. evidence  [code] 

    

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

    uses: PNPM, Changesets, echarts, uvu

12. mermaid-live-editor  [code] 

    

    Edit, live preview and share mermaid charts and diagrams.
    

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

13. Fireship  [code] 

    

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

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

14. Svelte Material UI  [code] 

    

    Svelte Material UI Components.
    

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

15. VERT  [code] 

    

    A file converter that converts files client-side while being completely ad-free.
    

    uses: TypeScript, Tailwind, Coolify, WASM, FFmpeg, libvips, Plausible

16. Threlte  [code] 

    

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

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

17. StemRoller  [code] 

    

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

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

18. Flowbite  [code] 

    

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

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

19. macos-web  [code] 

    

    Replicate some of the macOS desktop experience on the web.
    

    uses: TypeScript, Vercel, SCSS, PNPM, Iconify

20. svelte-realworld  [code] 

    

    SvelteKit implementation of the RealWorld app.
    

    uses: Netlify, MarkedJS

21. Svelte Headless UI  [code] 

    

    Unofficial Svelte port of Headless UI components.
    

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

22. Svelte Commerce  [code] 

    

    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.
    

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

23. editable-website  [code] 

    

    A SvelteKit template for building CMS-free editable websites.
    

    uses: Tailwind, ProseMirror, AWS

24. Layer Cake  [code] 

    

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

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

25. inlang  [code] 

    

    Translate software products 2x faster.
    

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

26. Pancake  [code] 

    

    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. Blog post.
    

    uses: D3, surge.sh, TypeScript

27. Sveltestrap  [code] 

    

    Bootstrap 4 & 5 components for Svelte.
    

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

28. Svelte Cubed  [code] 

    

    Three.js component library for Svelte. Abandoned. Check out threlte instead.
    

    uses: TypeScript, PNPM, Vercel, MDsveX

29. Beatbump  [code] 

    

    Alternative frontend for YouTube Music.
    

    uses: TypeScript, PostCSS, SCSS

30. Cryptgeon  [code] 

    

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

    uses: svelte-intl-precompile, sanitize-html

31. Dotfyle  [code] 

    

    Discover and share Neovim configurations and plugins.
    

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

32. svelte-french-toast  [code] 

    

    Svelte port of react-hot-toast, a lightweight, customizable toast notification library.
    

    uses: TypeScript, Prism, Tailwind, PostCSS, PNPM

33. Houdini GraphQL  [code] 

    

    Documentation site for Houdini.
    

    uses: PNPM, MDsveX, Husky, highlight.js

34. svelte-put  [code] 

    

    Useful svelte stuff to put in your projects.
    

    uses: Changesets, MDsveX, PostCSS, PNPM, Turbo

35. tRPC-SvelteKit  [code] 

    

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

    uses: TypeScript, tRPC

36. svelte-legos  [code] 

    

    A library of Svelte actions.
    

    uses: TypeScript, vitest, Tailwind, PostCSS, Prism

37. sveltekit-typescript-showcase  [code] 

    

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

    uses: TypeScript

38. swyxkit  [code] 

    

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

    uses: Tailwind, Netlify

39. Fluent Svelte  [code] 

    

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

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

40. Urara  [code] 

    

    Sweet & Powerful SvelteKit Blog Template.
    

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

41. learn.svelte.dev  [code] 

    

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

    uses: Vercel, PNPM, Prism, MarkedJS, CodeMirror

42. QWER  [code] 

    

    ✒︎ Simply Awesome Blog Starter built with SvelteKit and ❤
    

    uses: UnoCSS, TypeScript, MarkedJS, PNPM, Vercel

43. SvelteKit static blog starter  [code] 

    

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

    uses: Netlify, MDsveX, Sass, Husky

44. Joy of Code  [code] 

    

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

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

45. Files  [code] 

    

    3rd Party File Manager for Windows.
    

    uses: PNPM, TypeScript, SCSS, Vercel

46. SvelteLab  [code] 

    

    Supercharged REPL for Svelte (think StackBlitz specialized for Svelte)
    

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

47. Svelte Society  [code] 

    

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

    uses: TypeScript, Gitpod

48. Watch This  [code] 

    

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

    uses: TypeScript, Vercel, Tailwind

49. Modern Fluid Typography Editor  [code] 

    

    Easily create and fine-tune fluid typography values with Modern CSS clamp().
    

    uses: TypeScript, PostCSS, Chart.js, cssnano

50. neovim craft  [code] 

    

    Curated list of neovim plugins.
    

    uses: TypeScript, Husky

51. Matt Fantinel  [code] 

    

    Personal website and blog of Matt Fantinel, web developer.
    

    uses: MDsveX, SCSS, Iconoir, Plausible

52. Svelte MultiSelect  [code] 

    

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

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

53. Scientific Diagrams  [code] 

    

    100+ MIT-licensed scientific diagrams created with CeTZ (Typst) and/or TikZ (LaTeX). Mostly about physics, chemistry, and machine learning.
    

    uses: TypeScript, svelte-multiselect, pre-commit, PNPM, svelte-enhanced-img

54. Svelte Intl Precompile  [code] 

    

    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.
    

    uses: JS-Yaml, JSON5

55. Significa.co  [code] 

    

    Product Design and Development agency website, built with Sveltekit.
    

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

56. SvelteKit on Edge  [code] 

    

    SvelteKit, running on the edge. In this case, Vercel's edge network. See https://twitter.com/leeerob/status/1517627769924034565.
    

    uses: PNPM, Vercel

57. SvelteKit Embed  [code] 

    

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

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

58. Pixel Art Together  [code] 

    

    A multiplayer pixel art editor powered by Liveblocks.
    

    uses: TypeScript, Liveblocks, Tailwind, PostCSS, panzoom

59. Hexapipes  [code] 

    

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

    uses: Vercel

60. svelte-command-palette  [code] 

    

    Dead simple command palette with fuzzy search.
    

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

61. Auth starter app  [code] 

    

    SvelteKit template featuring Passkeys, Social Sign in and more.
    

    uses: passlock, tailwind, superforms, lucia

62. ASM Editor  [code] 

    

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

    uses: TypeScript, Sass, Monaco, WASM

63. sveltekit-mdsvex-blog  [code] 

    

    A minimalist blog template built with SvelteKit and MDsveX.
    

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

64. Elementari  [code] 

    

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

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

65. Intl Explorer  [code] 

    

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

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

66. Paper Trader Game  [code] 

    

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

    uses: Tailwind, Netlify, Chart.js, Plausible

67. SvelteKit Experiments  [code] 

    

    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.
    

    uses: Tailwind, Vercel, GraphQL, Firebase, Typescript

68. SK Incognito  [code] 

    

    The unofficial SvelteKit docs.
    

    uses: MDsveX, Tailwind, PNPM

69. Svead  [code] 

    

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

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

70. markushatvan.com

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

    uses: Tailwind, MDsveX, Svelte Forms Lib

71. connorrothschild.com  [code] 

    

    Creative, content-based portfolio site of Connor Rothschild.
    

    uses: MDsveX, GSAP, Netlify

72. The Pudding  [code] 

    

    Digital publication with emphasis on data viz.
    

    uses: D3, PostCSS, Lodash, PNPM

73. macOS-Themed Portfolio  [code] 

    

    An interactive portfolio website inspired by the macOS interface.
    

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

74. Guess The Year  [code] 

    

    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.
    

    uses: Tailwind, Netlify

75. Multi-Monitor Calculator  [code] 

    

    A tool for planning your multi-monitor setup.
    

    uses: TypeScript, SMUI, Sass

76. barnsworthburning  [code] 

    

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

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

77. puruvj.dev  [code] 

    

    Puru Vijay's blog site.
    

    uses: Vercel, TypeScript, SCSS, Cloudinary

78. ConcertMash  [code] 

    

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

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

79. GraphCMS Starter Blog  [code] 

    

    This blog starter shows how to use SvelteKit with GraphCMS.
    

    uses: Vercel, Tailwind, SCSS, GraphCMS

80. Svelte Summit Fall 2021  [code] 

    

    The 4th virtual conference about Svelte
    

    uses: Elder.js, PostCSS, Cloudflare

81. Team Health Check  [code] 

    

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

    uses: PicoCSS, Pocketbase, Vercel

82. digital criticism  [code] 

    

    Scholarly conference in the digital humanities.
    

    uses: MDsveX, MVP.css, Cloudflare

83. Svelvet  [code] 

    

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

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

84. Flayks

    Portfolio of Félix Péault, Digital Designer and Art Director. Sanity.io [interview], [feature].
    

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

85. Level Up Tutorials

    Video tutorials for web developers and designers.
    

    uses: TypeScript, Google Tag Manager

86. JSchallenger

    Free Javascript challenges. Learn Javascript online by solving coding exercises.
    

    uses: Tailwind, DynamoDB, AWS

87. cybernetic.dev

    Data-centric UI experiments
    

    uses: Three.js, Cytoscape.js, Vercel

88. Houses of World

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

    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!