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).
-
Cybernetically enhanced web apps.
uses: CodeMirror, Mapbox, Docker
-
Official SvelteKit docs [code]
The fastest way to build Svelte apps.
-
The unofficial SvelteKit docs.
-
Random collection of MIT-licensed standalone TikZ images, mostly about physics and machine learning.
uses: TypeScript, svelte-multiselect, pre-commit, PNPM, GitHub Pages
-
Blog posts with code snippets, contact form with Svelte Forms Lib, RSS and sitemap.
uses: Tailwind, MDsveX, Svelte Forms Lib
-
Studenten bilden Schüler [code]
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
-
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.
-
Gitpod streamlines developer workflows by providing prebuilt, collaborative development environments in your browser - powered by VS 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
-
Puru Vijay's blog site.
uses: Vercel, TypeScript, SCSS, Cloudinary
-
This blog starter shows how to use SvelteKit with GraphCMS.
-
Alternative frontend for YouTube Music.
uses: TypeScript, PostCSS, SCSS
-
A simple web game where you are given 45 seconds and $100 to make as much money as you can trading a fake stock.
-
SvelteKit-powered doc site generator. Made for humans.
-
Curated list of neovim plugins.
uses: TypeScript, Husky
-
An opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for 2022!
-
Global network of Svelte fans striving to promote Svelte and its ecosystem.
uses: TypeScript, Gitpod
-
Portfolio of Félix Péault, Digital Designer and Art Director. Sanity.io [interview], [feature].
-
Personal website and blog of Matt Fantinel, web developer.
-
Video tutorials for web developers and designers.
uses: TypeScript, Google Tag Manager
-
Free Javascript challenges. Learn Javascript online by solving coding exercises.
-
3rd Party File Manager for Windows.
uses: PNPM, TypeScript, SCSS, Vercel
-
Svelte Summit Fall 2021 [code]
The 4th virtual conference about Svelte
uses: Elder.js, PostCSS, Cloudflare
-
Data-centric UI experiments
uses: Three.js, Cytoscape.js, Vercel
-
Personal website and blog.
-
Scholarly conference in the digital humanities.
uses: MDsveX, MVP.css, Cloudflare
-
Digital publication with emphasis on data viz.
-
Landing page.
uses: Netlify, service worker
-
Sweet & Powerful SvelteKit Blog Template.
-
Creative, content-based portfolio site of Connor Rothschild.
-
Three.js component library for Svelte.
uses: TypeScript, PNPM, Vercel, MDsveX
-
Multi-Monitor Calculator [code]
A tool for planning your multi-monitor setup.
uses: TypeScript, SMUI, Sass
-
Modern Fluid Typography Editor [code]
Easily create and fine-tune fluid typography values with Modern CSS
clamp().uses: TypeScript, PostCSS, Chart.js, cssnano
-
Edit, live preview and share mermaid charts and diagrams.
-
SvelteKit implementation of the RealWorld app.
-
Replicate some of the macOS desktop experience on the web.
uses: TypeScript, Vercel, SCSS, PNPM, Iconify
-
Translate software products 2x faster.
uses: TypeScript, Vercel, IBM Carbon, Tailwind, Supabase
-
Documentation site for Houdini.
uses: PNPM, MDsveX, Husky, highlight.js
-
Easily generate a playlist for your upcoming concerts based on selected artists!
uses: TypeScript, Tailwind, Spotify Web API, Filepond, PNPM, Netlify
-
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
-
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
-
Unofficial Svelte port of Headless UI components.
uses: MDsveX, TypeScript, PostCSS, Tailwind, cssnano, Jest, rehype
-
Svelte Material UI Components.
uses: MDsveX, TypeScript, highlight.js, remark, Sass
-
A faithful implementation of Microsoft's Fluent design system in Svelte.
uses: MDsveX, SCSS, TypeScript, remark, rehype, PNPM, PostCSS, Prism
-
SvelteKit, running on the edge. In this case, Vercel's edge network. See https://twitter.com/leeerob/status/1517627769924034565.
-
Evidence enables analysts to deliver a polished business intelligence system using SQL and markdown.
uses: PNPM, Changesets, echarts, uvu
-
An open-source & self-hostable Heroku / Netlify alternative.
uses: PNPM, TypeScript, Tailwind, sveltekit-i18n, PostCSS, Husky
-
Official Svelte components built for Flowbite and Tailwind CSS. All interactivity handled by Svelte.
uses: PNPM, TypeScript, Tailwind, MDsveX, Prism, PostCSS, Playwright
-
Good First Issue Finder [code]
Good First Issue Finder helps new contributors pave their path into the world of OSS.
uses: TypeScript, Tailwind, Husky, Octokit, PostCSS
-
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
-
A multiplayer pixel art editor powered by Liveblocks.
uses: TypeScript, Liveblocks, Tailwind, PostCSS, panzoom
-
Bootstrap 4 & 5 components for Svelte.
uses: Storybook, Babel, Testing Library, Jest, PostCSS, Prism
-
A lightweight Svelte component library for building interactive node-based flow diagrams.
uses: Playwright, D3, Testing Library, Tailwind, PostCSS, Vitest
-
A secure, open source notes and file sharing service inspired by PrivNote written in Rust & Svelte.
-
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.
-
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
-
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
-
Svelte port of Timo Lins' react-hot-toast, a lightweight, customizable toast notification library.
uses: TypeScript, Prism, Tailwind, PostCSS, PNPM
-
Browser game where the goal is to correctly line up pipes placed on hexagonal puzzle pieces.
uses: Vercel
-
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
-
🌸 Joy of Code is a digital garden growing curious minds.
uses: GitHub API, Monaco, Playwright, Google Analytics, Supabase, Vercel, PNPM, Sass, TypeScript, remark, rehype
-
✒︎ Simply Awesome Blog Starter built with SvelteKit and ❤
uses: UnoCSS, TypeScript, MarkedJS, PNPM, Vercel
-
Isolate vocals, drums, bass, and other instrumental stems from any song
-
A travel, photography and design project showcasing charismatic houses around the world.
uses: Typescript, SCSS, PostCSS, Motion One, OGL, WebGL, Directus, Swell Commerce, Vercel
-
A lightweight open source block style editor built for the modern web.
uses: Sass, TypeScript
-
A fully featured web UI toolkit for Svelte + Tailwind. Supports SvelteKit, Vite, and Astro.
uses: Vitest, PostCSS, highlight.js, Tailwind, Typescript, jsdom
-
Keyboard-friendly, accessible and highly customizable multi-select component.
uses: Vitest, Playwright, Typescript, PNPM, pre-commit, rehype, jsdom, GitHub Pages, mdsvexamples
-
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
-
A tool for experimenting and trying out the ECMAScript Internationalization API.
uses: TypeScript, PNPM, Playwright, Vercel, svelte-highlight, Husky, commitlint
-
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
-
SvelteKit static blog starter [code]
A pre-configured SvelteKit static blog starter, with Sass, Markdown, MDSvex, Rehype and background preloading.
-
Useful svelte stuff to put in your projects.
uses: Changesets, MDsveX, PostCSS, PNPM, Turbo
-
A minimalist blog template built with SvelteKit and MDsveX.
uses: TypeScript, MDsveX, Rehype, Remark, PNPM, Vitest, Playwright
Want to add an open-source project to this list? PRs welcome! This collection is meant as a learning resource for Svelte devs. While a site with private code can give inspiration, there's little educational value if you can't inspect how it was made.
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!