svelte.md

title	Svelte

Svelte

SvelteKit on the edge is nice starter. Use Imagetools for optimizing images for use with Svelte.

Svelte Query is great for requests. Marko is a nice alternative to Svelte that's also compiler based. I personally use SolidJS for all my web apps/sites.

Example sites

• SvelteKit, running on the edge
• SvelteKit Commerce
• KitBase Starter Template - Starter template geared towards quickly spinning up projects using PocketBase and Stripe.
• SvelteKit used with Firebase
• SvelteKit Auth Example
• swyxkit - Opinionated blog starter for SvelteKit + Tailwind + Netlify.
• Svelte with Cloudflare Workers
• Elianiva (Code)
• SvelteKit RealWorld App
• Mac OS Monterey Web (Code)
• Webstone - Svelte/SvelteKit/GraphQL/Prisma.
• Kevin Pennekamp (Code)
• Speedskating - Olympia speedskating animation.
• Todo With Svelte - Demo example for integrating between Appwrite & Svelte.
• Beatbump - Alternative YouTube Music frontend built with Svelte/SvelteKit.
• Storyblok Sveltekit example - Using Sveltekit with Storyblok as a headless CMS. Queries are made using GraphQL and the kitQL library from jycouet.
• SvelteKit and Vendure Commerce example
• Turbocharger template with Svelte, Tailwind, and TurboSQL
• Svelte Encrypted SPA - Easily create private, encrypted single page applications with Svelte and PageCrypt.
• Svelte Travel Transitions - Native-like Page Transitions with SvelteKit, A Travel App. (Web)
• Coffee at Saigon
• Video Call App Built with 100ms and Svelte
• Svelte Starter - Starter template aims to quickly scaffold a SvelteKit project, designed around data-driven, visual stories at The Pudding.

Notes

• Svelte & Cloudflare Workers have been an amazing match for a very long time.
• SvelteKit supports Netlify Edge Functions. Update your packages, add edge: true and you're good to go.
• I usually create ‘components’, ‘stores’ folders under the lib folder. Then you can reference ‘$lib/components/something.svelte’ etc in your imports.

Links

• Svelte Tutorial (Code)
• Svelte 3: Rethinking reactivity (2019)
• Rich Harris - Rethinking reactivity (2019)
• Sapper - Framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing. Code.
• Awesome Svelte resources
• Svelte Language Server
• Deploy Svelte with ZEIT Now
• Sapper: Towards the ideal web app framework (2017)
• 10-tweet Svelte crash course
• react-svelte - Use Svelte components inside a React app.
• Svelte RFCs
• Svelte Code
• The Return of 'Write Less, Do More' by Rich Harris (2019)
• Let’s Learn Svelte (with Rich Harris) — Learn With Jason (2019)
• SSG - Svelte Site Generator. why try this? because sapper has a lot of setup, and isn't great at pipelining data.
• svelvet - CLI svelte compiler & watcher that works with snowpack.
• Optimistic, Offline-First Apps with Svelte and Amplify DataStore (2020)
• Svelte Preprocess - Svelte preprocessor with baked in support for common used preprocessors.
• Lobsters: Svelte is unappealing (2020)
• Smelte - UI framework with material components built with Svelte and Tailwind CSS.
• Svelte DevTools - Extension that allows inspection of Svelte component hierarchy and state in the Firefox and Chrome developer tools.
• Svelte Compiler Handbook (HN)
• Why Svelte is our choice for a large web project in 2020
• Svelte SSR example
• Tan Li Hau: The Svelte Compiler (2020)
• svelte-grid - Responsive, draggable and resizable grid layout, for Svelte.
• MDsveX - Markdown preprocessor for Svelte. (Docs) (Playground)
• Routify - Routes for Svelte, automated by your file structure. (Web)
• Svelte Language Tools - Contains a library implementing the Language Server Protocol (LSP).
• Svelte Society Day 2020: Rich Harris: Frequently Asked Questions
• Trying out Svelte: Building My First App (2020)
• This site is now written in Svelte (2020)
• Svelte Society (Code)
• Grouper component for Svelte (2020)
• Svelte Actions for Progressive Enhancement in 100 Seconds (2020)
• Svelte Recipes
• How Svelte code is different from React (2020)
• Svelte and TypeScript (2020) (Lobsters) (HN)
• What is Svelte
• Will it Scale? - Finding Svelte's Inflection Point
• Svelte Native - Create Mobile applications using native widgets via Svelte Svelte and NativeScript.
• Optimizing Svelte Applications (2020)
• Try Svelte (2020) (HN)
• Layer Cake - Framework for mostly-reusable graphics with svelte.
• Svelte Summit - Free whole-day online event. (Code) (Video)
• What I've Learned about Svelte, Tailwind, FastAPI over the Past 10 Days (2020)
• REPLicant - Svelte Summit 2020 talk.
• Rich Harris: Futuristic Web Development (2020)
• svelte-ssr-worker - Quick demo for rendering Svelte server-side (SSR), but within a Cloudflare Worker.
• Svelte for Sites, React for Apps (2020)
• Notes on porting GraphQL client to Svelte from React (2020)
• Svelte Actions
• Why Svelte is Like Rust (2020)
• JungleJS - Jamstack static site framework for Svelte. (Web)
• Malina.js - Builds your web-application to use it without framework on frontend side. Inspired by Svelte.
• Svelte-Awesome - Awesome SVG icon component for Svelte JS, built with Font Awesome icons.
• Svelte + TailwindCSS 2.0 + RollupJS starter
• Store-based router for Svelte
• Svelte Stories - Svelte implementation of an Instagram Stories-like component.
• svelthree - Svelte powered three.js development. (Web) (Tweet)
• What's new in Svelte (Dec 2020) (HN)
• How Does Svelte Actually Work? (2019)
• svelte-loadable - Dynamically load a svelte component.
• svite - Svelte integration for vite.
• Prettier for Svelte 3 components - Format your svelte components using prettier.
• esbuild-svelte - Plugin to compile svelte components for bundling with esbuild.
• Awesome Svelte
• Svelte DND Action - Action based drag and drop container for Svelte.
• rollup-plugin-svelte - Compile Svelte components.
• Svelte Hooks - Experiment to shim the React Hooks API in Svelte.
• sveltejs/gl - Declarative WebGL scene graphs inside Svelte.
• Why are React component libraries so complicated compared to Svelte? (2021)
• Pancake - Charts for Svelte apps. (Code)
• Svelte Routing - Declarative Svelte routing library with SSR support.
• svelte-windicss-preprocess - Svelte Preprocessor to compile tailwindcss at build time.
• sveld - Generate TypeScript definitions for your Svelte components.
• Svelte Relay - Easily use GraphQL in Svelte, powered by the production-ready Relay runtime.
• Svelte SPA Router - Router for Svelte 3 applications, specifically optimized for Single Page Applications (SPA).
• Svelte NodeGUI - Lightweight Electron alternative with native UI. (HN) (Web)
• Comparing Svelte and React (2021) (HN)
• SvelteKit - Fastest way to build Svelte apps. (Web) (HN)
• SvelteKit, TypeScript and TailwindCSS Template
• Svelte + TS + Vite Template
• Felte - Form library for Svelte. (Web)
• SvelteFire - Cybernetically enhanced Firebase apps.
• Add Tailwind CSS to Svelte CLI tool
• Svelte Adders - Collection of composable commands to add functionality to Svelte.
• Dynamic, smooth animations in Svelte
• Why Typescript and Svelte are a match made in heaven (2021)
• micro-graphql-svelte - Light and simple GraphQL Svelte client with extensible, composable cache invalidation.
• Notus Svelte - Free Tailwind CSS UI Kit and Admin.
• svelte-adapter - Use Svelte components with Vue and React.
• Vue RFCs
• ESLint plugin for Svelte v3 components
• Up and running with Svelte 3 (2021)
• svelte-local-storage-store - Adds pub/sub to localStorage.
• Svelte for the Experienced React Dev (2021)
• carbon-components-svelte - Svelte implementation of the Carbon Design System. (Docs)
• Sveltekit Starter - Starter project created with Sveltekit, Typescript, Tailwindcss, Postcss, SCSS, Husky, ESLint, Prettier, Storybook, and Jest.
• Svelte + Capacitor - Build hybrid mobile apps using Svelte and CapacitorJS with live reloading on Android and iOS.
• PostgreSQL, PostgREST and Svelte are a bliss to develop with
• Svelte - Web App Development Reimagined • Mark Volkmann (2021)
• macOS Web: Why I moved from React to Svelte (2021) (Tweet)
• vite-plugin-pages - File system based routing for Svelte applications using Vite.
• Writing a Svelte Store with TypeScript (2021)
• slocation - Reactive Svelte Location Store.
• Backend-Only Authentication With Sapper & Firebase Admin (2021)
• 5 Things I Like In Svelte More Than React (2021)
• Svelte and SvelteKit - Why We Love It and Why You Should Try It (2021)
• Awesome examples of SvelteKit in the wild
• URQL Svelte Template Project
• React Hooks in Svelte
• Starter for Svelte Kit and the Ory Stack
• lihautan - YouTube - Sharing tips on Svelte, React, CSS.
• Compile Svelte in your head
• Contributing to Svelte - Implement {#key}
• WebJeda - YouTube
• Would you use Sveltekit for production? (2021)
• svelte-select - Select/autocomplete component for Svelte apps. With support for grouping, filtering, async and more.
• adapter-cloudflare - Adapter for building SvelteKit applications on Cloudflare Pages with Workers integration. (Tweet)
• Svelte Summit Spring 2021
• vite-plugin-svelte - Official Svelte plugin for Vite.
• My Svelte Code Ordering Style (2021)
• Using Apollo Client in Sapper (2020)
• SvelteKit is now fully supported in WebContainers (2021)
• Svelte Cubed - Power of Three.js in Svelte. (HN) (Code) (Tweet) (Getting Started Code) (Talk) (Tweet)
• Svelte FSM - Tiny, expressive finite state machines for svelte. (Examples)
• Svelte Summit Fall 2021
• NOVAS - Build tool that lets developers easily set up Svelte applications in a Deno runtime.
• cloudflare-workers-svelte - Example repository for running a sveltejs/sveltekit website on Cloudflare Workers.
• Introduction to Svelte Actions (2021)
• How to use a Rust WebAssembly module in Svelte with Web Workers (2021)
• Svelte's lifecycle methods can be used anywhere (2021)
• svelte-forms - Svelte forms validation made easy.
• Houdini - Disappearing GraphQL client for Sapper and SvelteKit. (Web) (Reddit)
• svelte-popperjs - Popper for Svelte with actions, no wrapper components required.
• svelte-previous - Svelte stores that remember previous values.
• Build an App with SvelteKit and Tailwind CSS (2021)
• The many meanings of $ in Svelte (2021) (Reddit)
• The Future of Svelte (Interview with Rich Harris) (2021)
• Code for Svelte official sites
• Renderless Svelte Components
• svelte-headlessui - Svelte port of Headless UI components. (Reddit)
• Svemix - Full-Stack addition to SvelteKit. Write your server code inside svelte files, handle sessions, forms and SEO easily. (Docs)
• Svelte Kit Cookie Session
• Let's learn SvelteKit by building a static Markdown blog from scratch (2021)
• Geoff Rich's 2021 Svelte Posts
• SSWR - Svelte stale while revalidate (SWR) data fetching strategy.
• Svelte MultiSelect - Keyboard-friendly, zero-dependency multi-select Svelte component.
• SWR-like data fetching in Svelte (2021)
• Svelte Query - Performant and powerful remote data synchronization for Svelte.
• My Evaluation of SvelteKit for Full-Stack Web App Development (2022) (HN)
• Svelte Animation Creator - CSS animation keyframer. (Code)
• Svelte Router - Simple and easy to use svelte router.
• Template for building basic applications with Svelte
• Svelte Vite TailwindCSS Template
• Accelerating Svelte's Development (2022)
• svelte-jester - Jest transformer for Svelte - compile your components before importing them into tests.
• О, кинчик (2022)
• TaleNote - Storybook-esque component directory, embed right into SvelteKit.
• svelte-toast - Simple elegant toast notifications.
• threlte - Three.js component library for svelte.
• svelte-wasm - Example project that how WebAssembly and Svelte could work together.
• parcel-plugin-svelte - Parcel plugin that enables svelte support.
• Implementing A Svelte Store In Rust (2022) (Code) (Reddit)
• wasm-svelte - Proof-of-concept application showing integration between rust signals and svelte stores.
• tRPC-SvelteKit - End-to-end typesafe APIs with tRPC.io in SvelteKit applications. (Example)
• Sitemap generator for Svelte - Small helper which scans your Svelte routes and generates static sitemap.xml.
• Metawrite - Appwrite SDK with ready to go components for Svelte / SvelteKit.
• Why I wouldn't recommend Svelte JS to a fellow CTO (2022)
• Custom Svelte Store: Higher Order Store (2022) (Reddit)
• SvelteKit and the "Client pattern" (2022)
• Building a real-time websocket app using SvelteKit (2022)
• Design Patterns for Building Reusable Svelte Components (2022)
• Svelte parser for ESLint
• Svelte Inview - Svelte action that monitors an element enters or leaves the viewport.
• Weekly Svelte - YouTube
• VKSUI - Библиотека адаптивных Svelte-компонентов.
• Snel - Cybernetical framework for svelte applications in Deno.
• Svelte Adapter Deno - Adapter for SvelteKit apps that generates a standalone Deno server.
• Creating a RSS feed with Sanity and Svelte Kit (2022)
• svelte-file-dropzone - Svelte component for file upload.
• Render your Svelte code blocks in MDSveX
• graph-paper - Svelte component library optimized for data visualizations and data apps.
• svelte-code-input - Simple text input that behaves like a code editor.
• svelte-tags-input - Fully customizable Svelte component to enter tags.
• svelte-tiny-virtual-list - Tiny but mighty list virtualization library for Svelte, with zero dependencies.
• Svelte Material UI (Code)
• SvelteUI - Component library for building fully functional & accessible web applications. (Web)
• Svelte Writable Derived - Two-way data-transforming stores for Svelte.
• Awesome SvelteKit
• Made with Svelte
• Carbon Icons Svelte - Carbon Design System SVG icons as Svelte components. (Code)
• Svelte Infinite Loading - Infinite scroll component for Svelte apps.
• SvelteKit Component Library
• Svelte i18next - Internationalization for svelte framework. Based on i18next ecosystem.
• SvelteKit SVG Plugin - Makes it possible to import SVG files as Svelte components, inline SVG code or urls.
• Rich Harris - The Road to SvelteKit 1.0 (2022)
• KitDocs - Documentation integration for SvelteKit. (Code)
• Thoughts on maturity of Svelte/SvelteKit (2022)
• Sveltin - Smartest Way to Build SvelteKit powered static websites. (Web)
• Svelte-Splitpanes - Create resizable view panels in Svelte 3, a radical new approach to building user interfaces.
• Simplify data fetching in SvelteKit with page endpoints (2022)
• How to use Serverless Cloud with SvelteKit (2022)
• Svelte Reveal - Svelte action that leverages the Intersection Observer API to trigger reveal on scroll transitions.
• Svelte-intl-precompile - i18n library for Svelte.js that analyzes your keys at build time for max performance and minimal footprint.
• Svelte Package template - Barebones project that provides the essentials for writing highly-optimized, reusable packages in Svelte.
• Svelte Markdown - Markdown parser that renders into Svelte Components.
• Bookit - UI component explorer designed specifically for Svelte Kit.
• Svelte IntelliJ IDE Plugin
• Svelte Persistent store - Svelte store that keep its value through pages and reloads.
• SvelteKitAuth - Authentication library for use with SvelteKit featuring built-in OAuth providers and zero restriction customization.
• Square Svelte Store - Builds upon Svelte's default store behavior to empower your app to reactively respond to asynchronous data.
• Svelte Error Boundary
• Svelte component to render markdown
• Svelte Portal - Svelte component for rendering outside the DOM of parent component.
• SvelteKit Embed components
• Svelte(Kit) TypeScript Showcase + general TypeScript tips
• Plenti - Static Site Generator with Go backend and Svelte frontend. (Web)
• Svelte Notifications - Svelte toast notifications component that can be used in any JS application.
• Svelte SortableJS
• Svelte Subscribe - Subscribe to non top-level stores in your Svelte template.
• Svelte WebSocket Store - Svelte store with a WebSocket backend.
• SvelteKit with Tailwind CSS (2021)
• Vite Svelte plugin to remove console logs in prod
• Svelte Range Slider (with pips) - Multi-Thumb, Accessible, Beautiful Range Slider with Pips.
• Svelcro - Svelte DevTool with a focus on rendering.
• Flowbite-Svelte - Official Flowbite component library for Svelte. All interactivities are handled by Svelte. (Web)
• Event Calendar - Full-sized drag & drop JavaScript event calendar with resource view in Svelte.
• Is Svelte good choice for large apps? (2022)
• svelvg - Convert SVG files into Svelte components with TypeScript definitions.
• Svelte Reactive Debugger - Easily monitor svelte reactive statements.
• Svelte Hub Docs Components
• Svelvet - Lightweight Svelte component library for building interactive node-based flow diagrams. (Web) (HN)
• Svelte Commerce - Advanced Frontend Platform for eCommerce based on Sveltekit.
• Svelte French Toast - Buttery smooth toast notifications for Svelte.
• Attractions - Pretty cool UI kit for Svelte. (Code)
• Svelte for Beginners Course (2021)
• svelte-gesture - Library that lets you bind richer mouse and touch events to any component or view.
• eslint-plugin-svelte - ESLint plugin for Svelte.
• svelte-fuse-rx - Fusing Svelte and RxJS with simple actions and pipeable stores.
• Svelte Bun Adapter
• svelte-preprocess-esbuild - Svelte Preprocessor to compile TypeScript via esbuild.
• Sveltekit Translate - i18n library designed to be easy to use.
• The Svelte Handbook
• Lucia SvelteKit - Simple authentication library for SvelteKit.
• Skeleton - Svelte/Kit component library designed for use with Tailwind. (Code)
• Svelte Bricks - Naive implementation in Svelte without column balancing. (Code)
• Svelte Headless Table - Unopinionated and extensible data tables for Svelte.
• svelte-keyed - Writable derived store for objects and arrays.
• Sveltekit New Design. A Breaking Change
• Rustle - Svelte compiler rewritten in Rust. (HN)
• SvelteKit: Semantic form actions, and easier progressive enhancement
• Svelte Component Test Recipes
• SvelteKit Basic Auth
• Sveltosis - Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framework. (Web) (Tweet)
• SvelteKit + Postgres + JWT - Auth demo uses SvelteKit form actions and postgres to authenticate user with JWT tokens as sessionID.
• Svelte Motion - Animation library for Svelte based on framer-motion.
• SvelteKit + is-land - Partial hydration in SvelteKit.
• Native Page Transitions in SvelteKit (2022)
• SvelteKit & WunderGraph demo
• Svelte-Store-Array - Collection of higher-order store functions for array-based stores.
• Svelte-Keyboard - Virtual keyboard component for Svelte.
• Svelte-Highlight - Syntax Highlighting for Svelte using highlight.js.
• Lucia (Reddit)
• Svelte-TailwindCSS UI - Opinionated yet customizable Svelte-TailwindCSS component library. (Code)
• svelte-navlink-action - Minimalist Svelte action to inject .active class in route-matched links.
• SvelteKit Cookie Manager - Easy-use Svelte package to help control the visitor's cookie consent.
• svelte-table - Minimal table component. Allows sorting and filtering based on column values, and row selection/expanding.
• SvelteKit-Search-Params - Fastest way to read and write from query search params.
• Svelte Meet - Video calling web app build with SvelteKit and SocketIO.
• svelte-i18n - Internationalization for Svelte.
• Svelte Headless-UI
• Svelte Simple Data tables - Datatable component for Svelte.
• CodeMirror Svelte Mode - CodeMirror 6 extension that adds support for Svelte.
• Migrating from Vue 2 to Svelte (2022) (HN)
• Bad practices commonly done in Svelte applications (2022)
• SvelteKit 1.0 (2022) (HN)
• Learn SvelteKit course
• Using SvelteKit 1.0 on Vercel (2022)
• SvelteKit is my mistress (2022)