Skip to content

Latest commit

 

History

243 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Awesome SvelteKit

Awesome Pull Requests Welcome CI


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

Sites

  1. Open WebUI  [code]  GitHub stars

    User-friendly AI Interface (Supports Ollama, OpenAI API, ...)

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

  2. Immich  [code]  GitHub stars

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

    uses: NestJS, TypeScript, Tailwind, Flutter, Python

  3. Official SvelteKit docs  [code]  GitHub stars

    The fastest way to build Svelte apps.

    uses: Netlify, PNPM

  4. Windmill  [code]  GitHub stars

    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

  5. VERT  [code]  GitHub stars

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

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

  6. Chat UI  [code]  GitHub stars

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

    uses: Huggingface Inference, Huggingface Hub, Tailwind

  7. shadcn-svelte  [code]  GitHub stars

    shadcn/ui, but for Svelte.

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

  8. evidence  [code]  GitHub stars

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

    uses: PNPM, Changesets, echarts, uvu

  9. mermaid-live-editor  [code]  GitHub stars

    Edit, live preview and share mermaid charts and diagrams.

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

  10. Skeleton  [code]  GitHub stars

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

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

  11. Fireship  [code]  GitHub stars

    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

  12. Svelte Material UI  [code]  GitHub stars

    Svelte Material UI Components.

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

  13. Threlte  [code]  GitHub stars

    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

  14. StemRoller  [code]  GitHub stars

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

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

  15. Flowbite  [code]  GitHub stars

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

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

  16. macos-web  [code]  GitHub stars

    Replicate some of the macOS desktop experience on the web.

    uses: TypeScript, Vercel, SCSS, PNPM, Iconify

  17. svelte-realworld  [code]  GitHub stars

    SvelteKit implementation of the RealWorld app.

    uses: Vercel, MarkedJS, TypeScript, PNPM, sanitize-html

  18. Svelte Commerce  [code]  GitHub stars

    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

  19. Svelte Headless UI  [code]  GitHub stars

    Unofficial Svelte port of Headless UI components.

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

  20. Layer Cake  [code]  GitHub stars

    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

  21. editable-website  [code]  GitHub stars

    A SvelteKit template for building CMS-free editable websites.

    uses: Tailwind, AWS, SQLite, TypeScript, PNPM

  22. Cryptgeon  [code]  GitHub stars

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

    uses: svelte-intl-precompile, sanitize-html

  23. Dotfyle  [code]  GitHub stars

    Discover and share Neovim configurations and plugins.

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

  24. svelte-french-toast  [code]  GitHub stars

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

    uses: TypeScript, Prism, Tailwind, PostCSS, PNPM

  25. svelte-put  [code]  GitHub stars

    Useful svelte stuff to put in your projects.

    uses: Changesets, MDsveX, PostCSS, PNPM, Turbo

  26. Houdini GraphQL  [code]  GitHub stars

    Documentation site for Houdini.

    uses: Astro, PNPM, TypeScript, Tailwind

  27. tRPC-SvelteKit  [code]  GitHub stars

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

    uses: TypeScript, tRPC

  28. Scientific Diagrams  [code]  GitHub stars

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

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

  29. Urara  [code]  GitHub stars

    Sweet & Powerful SvelteKit Blog Template.

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

  30. Saga Reader  [code]  GitHub stars

    Blazing-fast and extremely lightweight AI-powered internet reader. Your AI-driven think tank assistant built with Rust, Tauri and Svelte.

    uses: Skeleton, Rust, Tauri, Netlify

  31. Joy of Code  [code]  GitHub stars

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

    uses: Playwright, Vercel, PNPM, TypeScript, remark, rehype

  32. SvelteKit static blog starter  [code]  GitHub stars

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

    uses: Netlify, MDsveX, Sass, Husky

  33. QWER  [code]  GitHub stars

    ✒︎ Simply Awesome Blog Starter built with SvelteKit and ❤

    uses: UnoCSS, TypeScript, MarkedJS, PNPM, Vercel

  34. Files  [code]  GitHub stars

    3rd Party File Manager for Windows.

    uses: PNPM, TypeScript, SCSS, Vercel

  35. Svelte Society  [code]  GitHub stars

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

    uses: TypeScript, Gitpod

  36. SvelteLab  [code]  GitHub stars

    Supercharged REPL for Svelte (think StackBlitz specialized for Svelte)

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

  37. Svelte Widgets  [code]  GitHub stars

    Keyboard-friendly, accessible Svelte components — MultiSelect, Toc, Masonry, CommandMenu, and more.

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

  38. neovim craft  [code]  GitHub stars

    Curated list of neovim plugins.

    uses: TypeScript, Husky

  39. MatterViz  [code]  GitHub stars

    Interactive visualizations for materials science: periodic tables, 3d crystal structures, molecules, Bohr atoms, nuclei, heatmaps, scatter plots.

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

  40. Matt Fantinel  [code]  GitHub stars

    Personal website and blog of Matt Fantinel, web developer.

    uses: Astro, SCSS, Vercel, TypeScript, Storybook

  41. Svelte.dev  [code]  GitHub stars

    Cybernetically enhanced web apps.

    uses: CodeMirror, Mapbox, Docker

  42. ASM Editor  [code]  GitHub stars

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

    uses: TypeScript, Sass, Monaco, WASM

  43. Significa.co  [code]  GitHub stars

    Product Design and Development agency website, built with SvelteKit.

    uses: TypeScript, Vercel, Tailwind, AWS, DynamoDB, Notion, Storyblok, Matter.js, Plausible

  44. Svelte Intl Precompile  [code]  GitHub stars

    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

  45. SVAR Svelte Core  [code]  GitHub stars

    A UI library of 30+ form controls, popups, date pickers & navigation components. Part of the broader SVAR Svelte component suite.

    uses: TypeScript

  46. SvelteKit Embed  [code]  GitHub stars

    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

  47. SvelteKit on Edge  [code]  GitHub stars

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

    uses: PNPM, Vercel

  48. Hexapipes  [code]  GitHub stars

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

    uses: Vercel

  49. svelte-command-palette  [code]  GitHub stars

    Dead simple command palette with fuzzy search.

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

  50. Pixel Art Together  [code]  GitHub stars

    A multiplayer pixel art editor powered by Liveblocks.

    uses: TypeScript, Liveblocks, Tailwind, PostCSS, panzoom

  51. Auth starter app  [code]  GitHub stars

    SvelteKit template featuring Passkeys, Social Sign in and more.

    uses: passlock, Tailwind, superforms, lucia

  52. sveltekit-mdsvex-blog  [code]  GitHub stars

    A minimalist blog template built with SvelteKit and MDsveX.

    uses: TypeScript, MDsveX, rehype, remark, PNPM, Vitest, Playwright

  53. Statue  [code]  GitHub stars

    A Svelte-based static site generator with built in component library.

    uses: GitHub Pages, Cloudflare Pages, Netlify

  54. Intl Explorer  [code]  GitHub stars

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

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

  55. Svead  [code]  GitHub stars

    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

  56. Paper Trader Game  [code]  GitHub stars

    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

  57. The Pudding  [code]  GitHub stars

    Digital publication with emphasis on data viz.

    uses: D3, PostCSS, Lodash, PNPM

  58. macOS-Themed Portfolio  [code]  GitHub stars

    An interactive portfolio website inspired by the macOS interface.

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

  59. markushatvan.com

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

    uses: Tailwind, MDsveX, Svelte Forms Lib

  60. connorrothschild.com  [code]  GitHub stars

    Creative, content-based portfolio site of Connor Rothschild.

    uses: MDsveX, GSAP, Netlify

  61. Guess The Year  [code]  GitHub stars

    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

  62. Multi-Monitor Calculator  [code]  GitHub stars

    A tool for planning your multi-monitor setup.

    uses: TypeScript, SMUI, Sass

  63. barnsworthburning  [code]  GitHub stars

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

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

  64. Product Plate  [code]  GitHub stars

    SvelteKit and Convex starter for building SaaS products, with auth, billing, realtime data, AI, tests, deployment setup, and a kickstart prompt for coding agents.

    uses: SvelteKit, Convex, Better Auth, Autumn, Tailwind, shadcn-svelte, Cloudflare

  65. OpenPost  [code]  GitHub stars

    Self-hosted social media scheduler with an MCP server, CLI, and API.

    uses: SvelteKit, Go, TypeScript, Tailwind, PNPM, Docker, SQLite, PostgreSQL, Playwright

  66. ConcertMash  [code]  GitHub stars

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

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

  67. Team Health Check  [code]  GitHub stars

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

    uses: PicoCSS, Pocketbase, Vercel

  68. Svelvet  [code]  GitHub stars

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

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

  69. Flayks

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

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

  70. Level Up Tutorials

    Video tutorials for web developers and designers.

    uses: TypeScript, Google Tag Manager

  71. JSchallenger

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

    uses: Tailwind, DynamoDB, AWS

  72. cybernetic.dev

    Data-centric UI experiments

    uses: Three.js, Cytoscape.js, Vercel

  73. 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!

About

Awesome examples of SvelteKit in the wild

Topics

Resources

Stars

1.3k stars

Watchers

25 watching

Forks

Used by

Contributors

Languages