• Stars
    star
    814
  • Rank 55,755 (Top 2 %)
  • Language Svelte
  • License
    MIT License
  • Created over 3 years ago
  • Updated 11 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Awesome examples of SvelteKit in the wild

Awesome SvelteKit

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


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]โ€‚ GitHub stars

    Cybernetically enhanced web apps.

    uses: CodeMirror, Mapbox, Docker

  2. Official SvelteKit docsโ€‚ [code]โ€‚ GitHub stars

    The fastest way to build Svelte apps.

    uses: Netlify, PNPM

  3. SK Incognitoโ€‚ [code]โ€‚ GitHub stars

    The unofficial SvelteKit docs.

    uses: MDsveX, Tailwind, PNPM

  4. TikZโ€‚ [code]โ€‚ GitHub stars

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

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

  5. markushatvan.com

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

    uses: Tailwind, MDsveX, Svelte Forms Lib

  6. Studenten bilden Schรผlerโ€‚ [code]โ€‚ GitHub stars

    Student-run nonprofit initiative with chapters located in university towns all across Germany. Mission is to contribute towards educational equality by providing free tutoring to children from underprivileged families.

    uses: Contentful, Algolia, GraphQL, Netlify, MapBox, svelte-multiselect, Playwright, Vitest

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

  8. Gitpodโ€‚ [code]โ€‚ GitHub stars

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

    uses: MDsveX, Tailwind, Netlify

  9. SvelteKit Experimentsโ€‚ [code]โ€‚ GitHub stars

    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

  10. puruvj.devโ€‚ [code]โ€‚ GitHub stars

    Puru Vijay's blog site.

    uses: Vercel, TypeScript, SCSS, Cloudinary

  11. GraphCMS Starter Blogโ€‚ [code]โ€‚ GitHub stars

    This blog starter shows how to use SvelteKit with GraphCMS.

    uses: Vercel, Tailwind, SCSS, GraphCMS

  12. Beatbumpโ€‚ [code]โ€‚ GitHub stars

    Alternative frontend for YouTube Music.

    uses: TypeScript, PostCSS, SCSS

  13. 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

  14. neovim craftโ€‚ [code]โ€‚ GitHub stars

    Curated list of neovim plugins.

    uses: TypeScript, Husky

  15. swyxkitโ€‚ [code]โ€‚ GitHub stars

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

    uses: Tailwind, Netlify

  16. Svelte Societyโ€‚ [code]โ€‚ GitHub stars

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

    uses: TypeScript, Gitpod

  17. Flayks

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

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

  18. Matt Fantinelโ€‚ [code]โ€‚ GitHub stars

    Personal website and blog of Matt Fantinel, web developer.

    uses: MDsveX, SCSS, Iconoir, Plausible

  19. Level Up Tutorials

    Video tutorials for web developers and designers.

    uses: TypeScript, Google Tag Manager

  20. JSchallenger

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

    uses: Tailwind, DynamoDB, AWS

  21. Filesโ€‚ [code]โ€‚ GitHub stars

    3rd Party File Manager for Windows.

    uses: PNPM, TypeScript, SCSS, Vercel

  22. Svelte Summit Fall 2021โ€‚ [code]โ€‚ GitHub stars

    The 4th virtual conference about Svelte

    uses: Elder.js, PostCSS, Cloudflare

  23. cybernetic.dev

    Data-centric UI experiments

    uses: Three.js, Cytoscape.js, Vercel

  24. digital criticismโ€‚ [code]โ€‚ GitHub stars

    Scholarly conference in the digital humanities.

    uses: MDsveX, MVP.css, Cloudflare

  25. The Puddingโ€‚ [code]โ€‚ GitHub stars

    Digital publication with emphasis on data viz.

    uses: D3, PostCSS, Lodash, PNPM

  26. Uraraโ€‚ [code]โ€‚ GitHub stars

    Sweet & Powerful SvelteKit Blog Template.

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

  27. connorrothschild.comโ€‚ [code]โ€‚ GitHub stars

    Creative, content-based portfolio site of Connor Rothschild.

    uses: MDsveX, GSAP, Netlify

  28. Svelte Cubedโ€‚ [code]โ€‚ GitHub stars

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

    uses: TypeScript, PNPM, Vercel, MDsveX

  29. Multi-Monitor Calculatorโ€‚ [code]โ€‚ GitHub stars

    A tool for planning your multi-monitor setup.

    uses: TypeScript, SMUI, Sass

  30. Modern Fluid Typography Editorโ€‚ [code]โ€‚ GitHub stars

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

    uses: TypeScript, PostCSS, Chart.js, cssnano

  31. mermaid-live-editorโ€‚ [code]โ€‚ GitHub stars

    Edit, live preview and share mermaid charts and diagrams.

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

  32. svelte-realworldโ€‚ [code]โ€‚ GitHub stars

    SvelteKit implementation of the RealWorld app.

    uses: Netlify, MarkedJS

  33. macos-webโ€‚ [code]โ€‚ GitHub stars

    Replicate some of the macOS desktop experience on the web.

    uses: TypeScript, Vercel, SCSS, PNPM, Iconify

  34. inlangโ€‚ [code]โ€‚ GitHub stars

    Translate software products 2x faster.

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

  35. Houdini GraphQLโ€‚ [code]โ€‚ GitHub stars

    Documentation site for Houdini.

    uses: PNPM, MDsveX, Husky, highlight.js

  36. 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

  37. 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

  38. Pancakeโ€‚ [code]โ€‚ GitHub stars

    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

  39. Svelte Headless UIโ€‚ [code]โ€‚ GitHub stars

    Unofficial Svelte port of Headless UI components.

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

  40. Svelte Material UIโ€‚ [code]โ€‚ GitHub stars

    Svelte Material UI Components.

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

  41. Fluent Svelteโ€‚ [code]โ€‚ GitHub stars

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

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

  42. 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

  43. evidenceโ€‚ [code]โ€‚ GitHub stars

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

    uses: PNPM, Changesets, echarts, uvu

  44. Coolifyโ€‚ [code]โ€‚ GitHub stars

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

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

  45. 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

  46. Good First Issue Finderโ€‚ [code]โ€‚ GitHub stars

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

    uses: TypeScript, Tailwind, Husky, Octokit, PostCSS

  47. Elementariโ€‚ [code]โ€‚ GitHub stars

    Interactive periodic table of elements written in Svelte. Supports plotting heat maps and hover data.

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

  48. Pixel Art Togetherโ€‚ [code]โ€‚ GitHub stars

    A multiplayer pixel art editor powered by Liveblocks.

    uses: TypeScript, Liveblocks, Tailwind, PostCSS, panzoom

  49. Sveltestrapโ€‚ [code]โ€‚ GitHub stars

    Bootstrap 4 & 5 components for Svelte.

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

  50. Svelvetโ€‚ [code]โ€‚ GitHub stars

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

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

  51. 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

  52. 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

  53. 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

  54. 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

  55. svelte-french-toastโ€‚ [code]โ€‚ GitHub stars

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

    uses: TypeScript, Prism, Tailwind, PostCSS, PNPM

  56. Hexapipesโ€‚ [code]โ€‚ GitHub stars

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

    uses: Vercel

  57. 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

  58. Joy of Codeโ€‚ [code]โ€‚ GitHub stars

    ๐ŸŒธ Joy of Code is a digital garden growing curious minds.

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

  59. QWERโ€‚ [code]โ€‚ GitHub stars

    โœ’๏ธŽ Simply Awesome Blog Starter built with SvelteKit and โค

    uses: UnoCSS, TypeScript, MarkedJS, PNPM, Vercel

  60. StemRollerโ€‚ [code]โ€‚ GitHub stars

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

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

  61. 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

  62. 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

  63. Svelte MultiSelectโ€‚ [code]โ€‚ GitHub stars

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

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

  64. 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

  65. 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

  66. 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

  67. 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

  68. svelte-putโ€‚ [code]โ€‚ GitHub stars

    Useful svelte stuff to put in your projects.

    uses: Changesets, MDsveX, PostCSS, PNPM, Turbo

  69. sveltekit-mdsvex-blogโ€‚ [code]โ€‚ GitHub stars

    A minimalist blog template built with SvelteKit and MDsveX.

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

  70. sveltekit-typescript-showcaseโ€‚ [code]โ€‚ GitHub stars

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

    uses: TypeScript

  71. svelte-command-paletteโ€‚ [code]โ€‚ GitHub stars

    Dead simple command palette with fuzzy search.

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

  72. svelte-legosโ€‚ [code]โ€‚ GitHub stars

    A library of Svelte actions.

    uses: TypeScript, vitest, Tailwind, PostCSS, Prism

  73. Watch Thisโ€‚ [code]โ€‚ GitHub stars

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

    uses: TypeScript, Vercel, Tailwind

  74. editable-websiteโ€‚ [code]โ€‚ GitHub stars

    A SvelteKit template for building CMS-free editable websites.

    uses: Tailwind, ProseMirror, AWS

  75. 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

  76. Team Health Checkโ€‚ [code]โ€‚ GitHub stars

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

    uses: PicoCSS, Pocketbase, Vercel

  77. SvelteLabโ€‚ [code]โ€‚ GitHub stars

    Supercharged REPL for Svelte (think StackBlitz specialized for Svelte)

    uses: Playwright, vitest, Iconify, [Marked], TypeScript, PNPM, Pocketbase, Vercel, Tailwind

  78. Significa.coโ€‚ [code]โ€‚ GitHub stars

    Product Design and Development agency website, built with Sveltekit.

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

๐ŸŽ‰ 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!

More Repositories

1

awesome-normalizing-flows

Awesome resources on normalizing flows.
Python
1,378
star
2

svelte-multiselect

Keyboard-friendly, accessible and highly customizable multi-select component
TypeScript
240
star
3

tikz

Random collection of standalone TikZ images
TeX
165
star
4

pymatviz

A toolkit for visualizations in materials informatics.
Python
152
star
5

blog

My blog.
Svelte
119
star
6

elementari

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

svelte-toc

Sticky responsive table of contents component
Svelte
89
star
8

matbench-discovery

An evaluation framework for machine learning models simulating high-throughput materials discovery.
Python
86
star
9

svelte-bricks

Naive Svelte Masonry component without column balancing (ragged columns at the bottom)
Svelte
75
star
10

tensorboard-reducer

Reduce multiple PyTorch TensorBoard runs to new event (or CSV) files.
Python
58
star
11

svelte-algolia

Svelte plugin for keeping Algolia indices in sync with custom data fetching functions.
TypeScript
33
star
12

pdf-compressor

CLI + Python API for batch compressing PDFs
Python
27
star
13

torch-mnf

Multiplicative Normalizing Flows in PyTorch.
Python
19
star
14

svicons

35 SVG Icon Packs as Svelte Components
Svelte
13
star
15

thermo

Data-driven risk-conscious thermoelectric materials discovery
Python
11
star
16

geometric-bayes

Interactive geometric illustration of Bayes theorem
Svelte
11
star
17

ffonons

Phonons from ML force fields
Python
11
star
18

gatsby-source-google-scholar

Gatsby source plugin that pulls metadata for scientific publications from Google Scholar
JavaScript
10
star
19

numeric-simulations

Exercise solutions for Prof. Springel's lecture "Fundamentals of Simulation Methods" (fall 2015, Heidelberg University)
C
7
star
20

dielectrics

Pushing the Pareto front of band gap and permittivity with ML-guided dielectric materials discovery incl. experimental synthesis and characterization.
HTML
6
star
21

tutorific-frontend

React + Redux frontend for 6-day Codeworks solo project 'Tutorific'.
JavaScript
6
star
22

svelte-zoo

Random assortment of docs-related Svelte components
Svelte
3
star
23

ocean-artup

Homepage of the ERC Advanced Grant research project Ocean artUp
Svelte
3
star
24

dark-mode-minimal

SSR compatible, flicker-free dark mode MVP in Gatsby
JavaScript
2
star
25

afara

Homepage of the German student-run non-profit Afara e.V. built Svelte and Contentful.
Svelte
2
star
26

tf-mnf

Multiplicative normalizing flow: variational Bayesian neural networks with increased posterior flexibility thanks to normalizing flows
Python
2
star
27

joggle-atoms-as-data-aug

Experiments with CGCNN + Atom Joggling for data augmentation
Python
1
star
28

macos-setup

Ain't no place like ~. Scripts and config files to setup macOS from scratch.
Shell
1
star