Git Product home page Git Product logo

awesome-sveltekit's Introduction

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. Coolify  [code]  GitHub stars

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

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

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

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

  7. Svelte Material UI  [code]  GitHub stars

    Svelte Material UI Components.

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

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

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

    Edit, live preview and share mermaid charts and diagrams.

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

  10. Svelvet  [code]  GitHub stars

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

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

  11. StemRoller  [code]  GitHub stars

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

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

  12. svelte-realworld  [code]  GitHub stars

    SvelteKit implementation of the RealWorld app.

    uses: Netlify, MarkedJS

  13. evidence  [code]  GitHub stars

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

    uses: PNPM, Changesets, echarts, uvu

  14. macos-web  [code]  GitHub stars

    Replicate some of the macOS desktop experience on the web.

    uses: TypeScript, Vercel, SCSS, PNPM, Iconify

  15. Svelte Headless UI  [code]  GitHub stars

    Unofficial Svelte port of Headless UI components.

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

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

  17. Sveltestrap  [code]  GitHub stars

    Bootstrap 4 & 5 components for Svelte.

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

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

  19. shadcn-svelte  [code]  GitHub stars

    shadcn/ui, but for Svelte.

    uses: TypeScript, Vercel, Tailwind, PNPM, Changesets, vitest, Prism, [Marked]

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

  21. Svelte Cubed  [code]  GitHub stars

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

    uses: TypeScript, PNPM, Vercel, MDsveX

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

  23. editable-website  [code]  GitHub stars

    A SvelteKit template for building CMS-free editable websites.

    uses: Tailwind, ProseMirror, AWS

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

  25. Beatbump  [code]  GitHub stars

    Alternative frontend for YouTube Music.

    uses: TypeScript, PostCSS, SCSS

  26. Houdini GraphQL  [code]  GitHub stars

    Documentation site for Houdini.

    uses: PNPM, MDsveX, Husky, highlight.js

  27. sveltekit-typescript-showcase  [code]  GitHub stars

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

    uses: TypeScript

  28. inlang  [code]  GitHub stars

    Translate software products 2x faster.

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

  29. tRPC-SvelteKit  [code]  GitHub stars

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

    uses: TypeScript, [tRPC]

  30. swyxkit  [code]  GitHub stars

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

    uses: Tailwind, Netlify

  31. svelte-legos  [code]  GitHub stars

    A library of Svelte actions.

    uses: TypeScript, vitest, Tailwind, PostCSS, Prism

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

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

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

  35. Urara  [code]  GitHub stars

    Sweet & Powerful SvelteKit Blog Template.

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

  36. svelte-put  [code]  GitHub stars

    Useful svelte stuff to put in your projects.

    uses: Changesets, MDsveX, PostCSS, PNPM, Turbo

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

  38. QWER  [code]  GitHub stars

    ✒︎ Simply Awesome Blog Starter built with SvelteKit and ❤

    uses: UnoCSS, TypeScript, MarkedJS, PNPM, Vercel

  39. Files  [code]  GitHub stars

    3rd Party File Manager for Windows.

    uses: PNPM, TypeScript, SCSS, Vercel

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

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

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

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

  44. learn.svelte.dev  [code]  GitHub stars

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

    uses: Vercel, PNPM, Prism, [Marked], CodeMirror

  45. neovim craft  [code]  GitHub stars

    Curated list of neovim plugins.

    uses: TypeScript, Husky

  46. Svelte Society  [code]  GitHub stars

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

    uses: TypeScript, Gitpod

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

  48. Matt Fantinel  [code]  GitHub stars

    Personal website and blog of Matt Fantinel, web developer.

    uses: MDsveX, SCSS, Iconoir, Plausible

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

  50. Dotfyle  [code]  GitHub stars

    Discover and share Neovim configurations and plugins.

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

  51. SvelteLab  [code]  GitHub stars

    Supercharged REPL for Svelte (think StackBlitz specialized for Svelte)

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

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

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

  54. Pixel Art Together  [code]  GitHub stars

    A multiplayer pixel art editor powered by Liveblocks.

    uses: TypeScript, Liveblocks, Tailwind, PostCSS, panzoom

  55. Hexapipes  [code]  GitHub stars

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

    uses: Vercel

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

    Dead simple command palette with fuzzy search.

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

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

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

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

    A minimalist blog template built with SvelteKit and MDsveX.

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

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

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

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

  63. SK Incognito  [code]  GitHub stars

    The unofficial SvelteKit docs.

    uses: MDsveX, Tailwind, PNPM

  64. ASM Editor  [code]  GitHub stars

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

    uses: TypeScript, Sass, Monaco, WASM

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

  66. markushatvan.com

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

    uses: Tailwind, MDsveX, Svelte Forms Lib

  67. Elementari  [code]  GitHub stars

    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

  68. connorrothschild.com  [code]  GitHub stars

    Creative, content-based portfolio site of Connor Rothschild.

    uses: MDsveX, GSAP, Netlify

  69. The Pudding  [code]  GitHub stars

    Digital publication with emphasis on data viz.

    uses: D3, PostCSS, Lodash, PNPM

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

  71. Multi-Monitor Calculator  [code]  GitHub stars

    A tool for planning your multi-monitor setup.

    uses: TypeScript, SMUI, Sass

  72. puruvj.dev  [code]  GitHub stars

    Puru Vijay's blog site.

    uses: Vercel, TypeScript, SCSS, Cloudinary

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

  74. GraphCMS Starter Blog  [code]  GitHub stars

    This blog starter shows how to use SvelteKit with GraphCMS.

    uses: Vercel, Tailwind, SCSS, GraphCMS

  75. Svelte Summit Fall 2021  [code]  GitHub stars

    The 4th virtual conference about Svelte

    uses: Elder.js, PostCSS, Cloudflare

  76. digital criticism  [code]  GitHub stars

    Scholarly conference in the digital humanities.

    uses: MDsveX, MVP.css, Cloudflare

  77. Team Health Check  [code]  GitHub stars

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

    uses: PicoCSS, Pocketbase, Vercel

  78. Flayks

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

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

  79. Level Up Tutorials

    Video tutorials for web developers and designers.

    uses: TypeScript, Google Tag Manager

  80. JSchallenger

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

    uses: Tailwind, DynamoDB, AWS

  81. cybernetic.dev

    Data-centric UI experiments

    uses: Three.js, Cytoscape.js, Vercel

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

awesome-sveltekit's People

Contributors

ashalfarhan avatar brittneypostma avatar codehub-kirans avatar codicocodes avatar connorrothschild avatar davjhan avatar eduayme avatar endymion1818 avatar estebanborai avatar flayks avatar icflorescu avatar itswadesh avatar janosh avatar kevinvandy avatar kueckelheim avatar kwaa avatar kwchang0831 avatar lubiah avatar maehr avatar matfantinel avatar mcmxcdev avatar pre-commit-ci[bot] avatar puruvj avatar samuelstroschein avatar sharu725 avatar swyxio avatar theo-steiner avatar tofran avatar trasherdk avatar tsukhu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.