description: "Svelte 4.0, new website and a tour around the community"
description: 'Svelte 4.0, new website and a tour around the community'
author: Dani Sandoval
authorURL: https://dreamindani.com
---
@ -8,6 +8,7 @@ authorURL: https://dreamindani.com
Svelte 4 is out and folks have been building! There's a bunch of new showcases, libraries and tutorials to share. So let's get right into it...
## What's new in Svelte
The big news this month was the release of Svelte 4.0! You can read all about it in the [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4). From performance fixes and developer experience improvements to [a brand new site, docs and tutorial](https://svelte.dev/blog/svelte-dev-overhaul)... this new release sets the stage for Svelte 5 with minimal breaking changes.
If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the [migration guide](https://svelte.dev/docs/v4-migration-guide) for all the details.
@ -15,7 +16,9 @@ If you're already on Node.js 16, it's possible you won't see any breaking change
For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).
## What's new in SvelteKit
This month there were lots of awesome [bug fixes](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md), so be sure to upgrade to the latest version! There are also a few new features to mention:
- The new `event.isSubRequest` boolean indicates whether this is a same-origin fetch request to one of the app's own APIs during a server request (**1.21.0**, [Docs](https://kit.svelte.dev/docs/types#public-types-requestevent), [#10170](https://github.com/sveltejs/kit/pull/10170))
- A new config option, `config.kit.env.privatePrefix` will set a private prefix on environment variables. This defaults to `''` (**1.21.0**, [Docs](https://kit.svelte.dev/docs/configuration), [#9996](https://github.com/sveltejs/kit/pull/9996))
- `VERSION` is now exported and accessible via `@sveltejs/kit`. This can be used for feature detection or anything else that requires knowledge of the current version of SvelteKit (**1.21.0**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-version), [#9969](https://github.com/sveltejs/kit/pull/9969))
@ -27,6 +30,7 @@ For adapter-specific changes, check out the CHANGELOGs in each of [the `adapter`
## Community Showcase
**Apps & Sites built with Svelte**
- [Heerdle](https://github.com/DreaminDani/heerdle) is a remake of Spotify's now-defunct Heardle - the daily music guessing game
- [Meoweler](https://meoweler.com/) is a travel site filled with cats and helpful facts about popular destinations
- [A tech lead from IKEA](https://www.reddit.com/r/sveltejs/comments/13w4zg3/comment/jmaxial/?utm_source=share&utm_medium=web2x&context=3) gave a few more details on the way they build pages (and page template) using Svelte
@ -39,10 +43,12 @@ For adapter-specific changes, check out the CHANGELOGs in each of [the `adapter`
- [YABin](https://github.com/Yureien/YABin) is Yet Another Pastebin with some very specific features
- [svelte.dev: A complete overhaul](https://svelte.dev/blog/svelte-dev-overhaul)
_Featuring Svelte Contributors and Ambassadors_
- [Dev Vlog: June 2023](https://www.youtube.com/watch?v=AOXq89h8saI) - Svelte 4.0 with Rich Harris
- [PodRocket: Svelte 4](https://podrocket.logrocket.com/svelte-4) with Geoff
- [This Dot Media: Svelte 4 Launch Party](https://www.youtube.com/watch?v=-9gy_leMmcQ) with Simon, Ben, Geoff, and Puru
@ -60,12 +66,13 @@ _Featuring Svelte Contributors and Ambassadors_
- [Svelte Society - London June 2023](https://www.youtube.com/watch?v=EkH0aMgeIKw)
- [Using The Svelte Context API With Stores](https://www.youtube.com/watch?v=dp-7NvLDrK4), [Impossible FLIP Layout Animations With Svelte And GSAP](https://www.youtube.com/watch?v=ecP8RwpkiQw) and [Create Beautiful Presentations With Svelte](https://www.youtube.com/watch?v=67lqa5kTQkA) by Joy of Code
_To Watch_
- [Server-side filtered, paginated and sorted Table in SvelteKit](https://www.youtube.com/watch?v=VgCU0cVWgJE) by hartenfellerdev
- [Best Icon Library for Svelte and SvelteKit in 2023](https://www.youtube.com/watch?v=qJP6hC4YIhk) by SvelteRust
_To Read_
- [From Zero to Production with SvelteKit](https://www.okupter.com/events/from-zero-to-production-with-sveltekit) by Justin Ahinon
- [Thoughts on Svelte(Kit), one year and 3 billion requests later](https://claudioholanda.ch/en/blog/svelte-kit-after-3-billion-requests/) by Claudio Holanda
- [How I published a gratitude journaling app for iOS and Android using SvelteKit and Capacitor](https://khromov.se/how-i-published-a-gratitude-journaling-app-for-ios-and-android-using-sveltekit-and-capacitor/) by Stanislav Khromov
@ -77,8 +84,8 @@ _To Read_
- [Svelte Real‑time Multiplayer Game: User Presence](https://rodneylab.com/svelte-realtime-multiplayer-game/) and [SvelteKit PostCSS Tutorial: use Future CSS Today](https://rodneylab.com/sveltekit-postcss-tutorial/) by Rodney Lab
- [SvelteKit’s World of Routing: Unleash power of your app using Dynamic Routes and Parameters](https://www.inow.dev/sveltekits-world-of-routing-unleash-power-of-your-app-using-dynamic-routes-and-parameters/) by Igor Nowosad
**Libraries, Tools & Components**
- [The Vercel AI SDK](https://vercel.com/blog/introducing-the-vercel-ai-sdk) is an interoperable, streaming-enabled, edge-ready software development kit for AI apps built with React and Svelte
- [Superforms 1.0](https://superforms.rocks/) has been released. Check out the [migration guide](https://superforms.rocks/migration) and [new feature list](https://superforms.rocks/whats-new-v1) for more details
- [Panda CSS](https://panda-css.com/docs/getting-started/svelte) is CSS-in-JS with build time generated styles, RSC compatibility and multi-variant support
description: "Extending Custom Element Classes and new +server exports"
description: 'Extending Custom Element Classes and new +server exports'
author: Dani Sandoval
authorURL: https://dreamindani.com
---
@ -10,6 +10,7 @@ Some sweet new features have dropped in both Svelte and SvelteKit, this month. I
More on all that down below...
## What's new in Svelte & Language Tools
There's been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).
The **4.1.0 release** added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the [Custom Elements API docs](https://svelte.dev/docs/custom-elements-api) or the [PR](https://github.com/sveltejs/svelte/pull/8991) for more info!
@ -17,6 +18,7 @@ The **4.1.0 release** added the ability to further customize the custom element
In addition to supporting SvelteKit's new `HEAD` server method, Svelte's language tools now support Prettier v3 (**extensions-107.9.0**) and workspace trust settings are now used to support all settings in workspace (**extensions-107.8.0**).
## What's new in SvelteKit
- The `HEAD` server method is now available in API routes (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server), [#9753](https://github.com/sveltejs/kit/pull/9753))
- Responses with `Vary` headers are now cached, too (except for `Vary: *`) (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server-content-negotiation), [#9993](https://github.com/sveltejs/kit/pull/9993))
- There's now a more helpful error for preview if SvelteKit's build output doesn't exist (**1.22.2**, [#10337](https://github.com/sveltejs/kit/pull/10337))
@ -28,6 +30,7 @@ For all the patches and performance updates from this month, check out the [Svel
## Community Showcase
**Apps & Sites built with Svelte**
- [GitLight](https://github.com/ColinLienard/gitlight) brings GitHub & GitLab notifications to your desktop
- [Days](https://github.com/paprikka/days) is paprikka's life in days, inspired by Buster Benson's Life in Weeks
- [Mofi](https://mofi.loud.red/) is a content-aware fill and trim for music
@ -42,9 +45,9 @@ For all the patches and performance updates from this month, check out the [Svel
- [image-to-social-media-thumbnail](https://brody.fyi/tools/image-to-social-media-thumbnail) lets you convert any image to a social media thumbnail
- [Svelte Capacitor Store](https://github.com/sdekna/svelte-capacitor-store) is a persistent store that uses capacitor (preferences) storage on native devices, and localStorage otherwise, making it ideal for multi-platform projects
**Learning Resources**
_Featuring Svelte Contributors and Ambassadors_
- [Exploring Svelte 4 w/ Kevin AK: Performance, Compatibility, & Web Component Support | Modern Web Pod](https://www.youtube.com/watch?v=YOL0HGGVib4) by This Dot Media
- [Svelte Sirens Stream Design Systems: Lessons Learned](https://www.youtube.com/live/YHZaiIGSqsE?feature=share) featuring Eric Liu, creator of Carbon Components Svelte and the `sveld` docgen library
- This Week in Svelte:
@ -52,8 +55,8 @@ _Featuring Svelte Contributors and Ambassadors_
- [2023 July 7](https://www.youtube.com/watch?v=0tq1ph4DDFA) - Svelte 4.0.5, Kit 1.22.1, Svelte 5, local storage and markdown
- [What is The Transitional Web? with Chris Ferdinandi](https://www.smashingmagazine.com/2023/07/smashing-podcast-episode-63/?ref=dailydevbytes.com) by Smashing Podcast
- [SvelteKit in 100 seconds](https://www.youtube.com/watch?v=H1eEFfAkIik) by Fireship
- [Primo V2 Introduction](https://www.youtube.com/watch?v=ThInVXgxJ1Q) by Primo (a [visual CMS](https://primocms.org/) based on Svelte)
@ -62,8 +65,8 @@ _To Watch/Hear_
- [Markdown in SvelteKit with custom Components: mdsvex](https://www.youtube.com/watch?v=VJFkyGd0FEA) by hartenfellerdev
- [How To Add Confetti for Svelte and Sveltekit 🎉](https://www.youtube.com/watch?v=gXtWSb94704) and [Make Your SvelteKit Code 10x Faster With Rust and WebAssembly](https://www.youtube.com/watch?v=Vn2bIv_J_UE) by SvelteRust
_To Read_
- [SvelteJS: My ecosystem is bigger than yours](https://hackmd.io/@roguegpu/r1RKQMdt3) by roguegpu
- [Avoid shared state on the server in SvelteKit](https://blog.aakashgoplani.in/avoid-shared-state-on-the-server-in-sveltekit) by Aakash Goplani
- [SvelteKit Fontaine: Reduce Custom Font CLS](https://rodneylab.com/sveltekit-fontaine/) by Rodney Lab
@ -74,8 +77,8 @@ _To Read_
- [Deploying Sveltekit on IIS](https://dev.to/nnutnonn/deploying-sveltekit-on-iis--5gf6) by Nutchapon Makelai
- [Streamlined Authentication and Secrets Management](https://eman.hashnode.dev/streamlined-authentication-and-secrets-management) by Eman
**Libraries, Tools & Components**
- [Melt UI](https://github.com/melt-ui/melt-ui) is a set of headless, accessible component builders for Svelte
- [MDsveX](https://github.com/pngwn/MDsveX/releases/tag/mdsvex%400.11.0) has been updated to work with Svelte 4
- [Svelte Sonner](https://github.com/wobsoriano/svelte-sonner) is an opinionated toast component for Svelte
@ -10,9 +10,11 @@ Happy September y'all! With all the [sneak peeks at what's coming soon in Svelte
Before we jump in, a warm welcome to the new Svelte Ambassadors: [@cainux](https://github.com/cainux) and [@grischaerbe](https://github.com/grischaerbe)! Welcome to the crew ⛴️
## What's new in Svelte & Language Tools
- `svelteHTML` has moved from language-tools into Svelte core so that `svelte/element` types will now load correctly (**4.2.0** in Svelte, **107.10.0** in Language Tools)
## What's new in SvelteKit
- `URL` is now accepted in the `redirect` function (**1.23.0**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-redirect), [#10570](https://github.com/sveltejs/kit/pull/10570))
- Mistyped route filenames will now throw a warning (**1.23.0**, [#10558](https://github.com/sveltejs/kit/pull/10558))
- The new `onNavigate` lifecycle function enables view transitions - Check out the [blog post](https://svelte.dev/blog/view-transitions) for more info (**1.24.0**, [Docs](https://kit.svelte.dev/docs/modules#app-navigation-onnavigate), [#9605](https://github.com/sveltejs/kit/pull/9605))
@ -24,6 +26,7 @@ But that's just the new features! For all the patches and performance updates fr
## Community Showcase
**Apps & Sites built with Svelte**
- [Planet Of The Bugs](https://planetofthebugs.xyz/) allows developers to practice and hone their skill-sets by exposing them to an endless supply of unique, curated issues and bugs from popular open-source projects on Github
- [Minesweeper](https://github.com/ProductionPanic/minesweeper/tree/main) is an Android game built with SvelteKit, Capacitor, TailwindCSS and DaisyUI (check it out on the [Google Play Store](https://play.google.com/store/apps/details?id=com.production.panic.minesweeper&pli=1))
- [Pendor](https://www.pendor.ai/) is an AI component generator for Svelte
@ -36,10 +39,9 @@ But that's just the new features! For all the patches and performance updates fr
- [Ubuntu 22.04 in Svelte](https://github.com/manhhungpc/ubuntu2204-svelte) aims to replicate the Ubuntu 22.04 desktop experience on the web
- [My Queue](https://www.myqueue.so/) creates a playlist of written articles by turning them into audio stories
**Learning Resources**
_Featuring Svelte Contributors and Ambassadors_
- [Svelte Society - London August 2023](https://www.youtube.com/watch?v=90Psdk5rAnU)
- [Building a Blog using SvelteKit and Nostr as a CMS (Part 1](https://kevinak.se/blog/building-a-blog-using-sveltekit-and-nostr-as-a-cms-part-1-1690807337563)) by Kev
- [Mastering SvelteKit with Geoff Rich | JS Drops](https://www.youtube.com/watch?v=MaF8kRbHbi0) by This Dot Media
@ -60,15 +62,15 @@ _Featuring Svelte Contributors and Ambassadors_
- [Medusa and SvelteKit E-Commerce Stack](https://www.youtube.com/watch?v=rVVHxows9dY) with Lacey Pevey
- [Design Systems: Lessons Learned](https://www.youtube.com/watch?v=YHZaiIGSqsE) with Eric Liu
_To Watch_
- [Image optimization in SvelteKit with vite-imagetools](https://www.youtube.com/watch?v=285vSLe9LQ8) by hartenfellerdev
- [Building a Todo App with Rust and SvelteKit: Complete Tutorial](https://www.youtube.com/watch?v=w7is2bCTUg0) and [Stripe Payment In SvelteKit With Dynamic Pricing](https://www.youtube.com/watch?v=o8gvCLgz1vs) by SvelteRust
- [Leaflet maps in SvelteKit like it's 2023 (HowTo)](https://www.youtube.com/watch?v=JFctWXEzFZw)
ShipBit
_To Read_
- [Internationalization in SvelteKit (Series)](https://blog.aakashgoplani.in/series/i18n-in-sveltekit) by Aakash Goplani
- [The easiest Chatbot you will ever build](https://simon-prammer.vercel.app/blog/post/sveltekit-langchain) and [Intro to LangSmith🦜️🛠️](https://simon-prammer.vercel.app/blog/post/langsmith) by Simon Prammer
- [SvelteKit: How to make code-based router, instead of file-based router [August 2023]](https://dev.to/maxcore/sveltekit-how-to-make-code-based-router-instead-of-file-based-router-august-2023-5f9) by Max Core
@ -81,9 +83,8 @@ _To Read_
- [Type-safe User Authentication in SvelteKit with Lucia, Planetscale, and Upstash Redis](https://upstash.com/blog/lucia-sveltekit) by Chris Jayden
- [Document Svelte Projects with HTML and JSDoc Comments](https://blog.robino.dev/posts/doc-comments-svelte) by Ross Robino
**Libraries, Tools & Components**
- [Carta](https://github.com/BearToCode/carta-md) is a lightweight, fast and extensible Svelte Markdown editor and viewer, based on Marked
- [Threlte](https://threlte.xyz/), the 3D framework built from Svelte and Three.js has released version 6
- [vite-plugin-web-extension](https://vite-plugin-web-extension.aklinker1.io/guide/frontend-frameworks.html#svelte-integration) works great with Svelte to make building browser extensions easier
Svelte 5 isn't out yet (you can, however, [preview it now](https://svelte-5-preview.vercel.app/)), but that doesn't mean we don't get a sneak peek! Most notably are [Runes](https://svelte.dev/blog/runes) - a simpler way to manage reactive variables in Svelte code. There's lots of links the showcase section for deeper dives on all things Runes, but let's talk about what else been released this month...
## What's new in Svelte & Language Tools
- [Svelte 4.2.1](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md#421) was released with a bunch of fixes to HTML, CSS and sourcemap compilation
- [The latest version of the Svelte language tools](https://github.com/sveltejs/language-tools/releases/tag/extensions-107.11.0) [enhances component references](https://github.com/sveltejs/language-tools/pull/2157) in the "Find All References" command, [fixes a persistent issue with automated types going missing](https://github.com/sveltejs/language-tools/pull/2160) after restarting a project and [adds fallback handling to auto-types](https://github.com/sveltejs/language-tools/issues/2156) (like those found in SvelteKit's `+server.js` files)
## What's new in SvelteKit
- `+server.js` now has a catch-all handler that handles all unimplemented valid server requests. Just export a `fallback` function! (**1.25.0**, [Docs](https://kit.svelte.dev/docs/routing#server-fallback-method-handler), [#9755](https://github.com/sveltejs/kit/pull/9755))
That's all for the new features! If you're looking for other patches and performance updates, check out the [SvelteKit CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). You can also find adapter-specific CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages).
@ -25,6 +27,7 @@ That's all for the new features! If you're looking for other patches and perform
Threlte [is throwing a hackathon](https://threlte.xyz/hackathon) (**motion warning for the landing page** - it will respect Reduce Motion settings). The kickoff event is on Sunday, 15 October 2023 16:00 UTC.
**Apps & Sites built with Svelte**
- [game-of-life-svelte](https://github.com/StephenGunn/game-of-life-svelte) is a Conway's Game of Life implementation using SvelteKit tech
- [Limey](https://limey.io/) is an easy-to-use website builder for simple sites and landing pages
- [Appwrite's new landing page](https://appwrite.io/) is now written with SvelteKit (previously covered was their [console UI](https://github.com/appwrite/console) in Svelte)
- [Dithering](https://www.sigrist.dev/dithering) is a tool to dither photos with plenty of options
- [Rocky Mountain Slam](https://www.rockymountainslam.com/) is an interactive map to follow Jason Heyn as he attempts to complete the first ever Rocky Mountain Slam ([code](https://github.com/martyheyn/rocky-mnt-slam))
**Learning Resources**
_Featuring Svelte Contributors and Ambassadors_
- [Svelte 5: Introducing Runes... with Rich Harris](https://www.youtube.com/watch?v=RVnxF3j3N8U) and its follow-up: [Svelte 5 runes: what's the deal with getters and setters?](https://www.youtube.com/watch?v=NR8L5m73dtE)
- [Conditionally stream data in SvelteKit](https://geoffrich.net/posts/conditionally-stream-data/) by Geoff Rich
- [Svelte Runes Change How Reactivity Works In Svelte](https://www.youtube.com/watch?v=TOTUXiYZhf4), [Make A 3D GitHub Skyline With Svelte To Flex On Your Peers](https://www.youtube.com/watch?v=f9fd1L1FEts), [Simple Page Transitions Using The View Transitions API With SvelteKit](https://www.youtube.com/watch?v=q_2irZO4SS8) and [Using JavaScript Libraries With Svelte Is Easy](https://www.youtube.com/watch?v=N9OjaQ0XtKQ) by Joy of Code
@ -49,16 +52,16 @@ _Featuring Svelte Contributors and Ambassadors_
- [2023 September 15](https://www.youtube.com/watch?v=qH2FavwhU88) - SvelteKit 1.25.0, deserialize form data, magic is coming
- [2023 September 22](https://www.youtube.com/watch?v=ek7KE1EDu2w) - Svelte 5 Runes!
_To Watch_
- [RUNES - Coming in Svelte v5 | My Take](https://www.youtube.com/watch?v=iCK1coch1wA) by Coding Garden
- [Don't Sleep on Svelte 5](https://www.youtube.com/watch?v=DgNWssn2vpc) and [Level Up Your Svelte Stores](https://www.youtube.com/watch?v=-vjNAyL2JCQ) by Huntabyte
- [Introduction To Svelte Runes (Every Svelte Rune Explained)](https://www.youtube.com/watch?v=gihSBVfyFbI) by Cooper Codes
- [Svelte Runes: Awesome or Awful?](https://www.youtube.com/watch?v=JRZCqUOmFwY) by Jack Herrington
- [Let Build A Youtube Clone With SvelteKit (Svelte, Tailwind Css, RapidApi, Shadcn Svelte, Axios, etc)](https://www.youtube.com/watch?v=65yMfpsoH4o) by Lawal Adebola
_To Read_
- [Create the Perfect Sharable Rune in Svelte](https://dev.to/jdgamble555/create-the-perfect-sharable-rune-in-svelte-ij8) by Jonathan Gamble
- [You Don't Need to "Learn" Svelte](https://kaviisuri.com/you-dont-need-to-learn-svelte) by KaviiSuri
- [Build Websites with Prismic and SvelteKit](https://prismic.io/blog/sveltekit-prismic-integration) by Angelo Ashmore
@ -67,8 +70,8 @@ _To Read_
- [Integrate Storybook in Svelte: Doing it the Svelte-way](https://mainmatter.com/blog/2023/09/18/integrate-storybook-in-svelte-doing-it-the-svelte-way/) by Oscar Dominguez
- [The Sveltekit tutorial: Part 1 | What, why, and how?](https://tntman.tech/posts/sveltekit-guide-part-1) by Suyashtnt
**Libraries, Tools & Components**
- [KitForStartups](https://github.com/okupter/kitforstartups) is an Open Source SvelteKit SaaS boilerplate
- [SuperNavigation](https://github.com/0xDjole/super-navigation) is a mobile-like navigation UX for the web
- [skeleton-material-theme](https://github.com/plasmatech8/skeleton-material-theme) is a Material theme for the Skeleton UI library
description: "Svelte Summit on Nov 11 and better DevEx for all!"
description: 'Svelte Summit on Nov 11 and better DevEx for all!'
author: Dani Sandoval
authorURL: https://dreamindani.com
---
@ -12,10 +12,12 @@ Every month, maintainers within the Svelte ecosystem fix bugs, improve performan
Let's take a closer look 👀...
## What's new in Svelte & Language Tools
- Svelte 4.2.2 cleans up a few element-specific features ([Release Notes](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md#422))
- Extensions 107.12.0 improves block folding for functions, if statements and more ([Release Notes](https://github.com/sveltejs/language-tools/releases/tag/extensions-107.12.0), [PR](https://github.com/sveltejs/language-tools/pull/2169))
## What's new in SvelteKit
- Route parameter types will now be inferred from the applicable matcher's guard check (**kit@1.26.0**, [Docs](https://kit.svelte.dev/docs/advanced-routing#matching), [#10755](https://github.com/sveltejs/kit/pull/10755))
- The new `invalidateAll` boolean option lets you turn on and off the `invalidateAll()` form function within the `enhance` callback (**kit@1.27.0**, [Docs](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance), [#9476](https://github.com/sveltejs/kit/issues/9476))
- The output of the project creation wizard will now reflect which package manager you're using (**create-svelte@5.1.1**, [#10811](https://github.com/sveltejs/kit/pull/10811))
@ -27,6 +29,7 @@ For a complete list of bug fixes and performance updates, check out the [SvelteK
## Community Showcase
**Apps & Sites built with Svelte**
- [4THSEX](https://4thsex.com/) is a creative website for the producer / creative director with the same name
- [Syntax.fm](https://github.com/syntaxfm/website) has been redesigned from the ground up with SvelteKit
- [GitContext](https://gitcontext.com/) is an early-access tool to improve the process of reviewing code
@ -38,10 +41,10 @@ For a complete list of bug fixes and performance updates, check out the [SvelteK
- [Sessionic](https://github.com/navorite/sessionic) is a web extension to easily save browser sessions and manage them
- [Pilink](https://pil.ink/) is a "suckless" link shortener
**Learning Resources**
_Featuring Svelte Contributors and Ambassadors_
- [Wolfensvelte 3D and the Svelte Language Server in the Browser with Jason Bradnick](https://www.svelteradio.com/episodes/wolfensvelte-3d-and-the-svelte-language-server-in-the-browser-with-jason-bradnick) by Svelte Radio
- [This Is How You Sveltify Any JavaScript Library](https://www.youtube.com/watch?v=RuM4KHTZqD4), [Svelte Actions Make Svelte The Best JavaScript Framework](https://www.youtube.com/watch?v=LGOqg0Y7sAc) and [How Svelte Stores Make State Management Easy](https://www.youtube.com/watch?v=L3uBfL-4dDM) by Joy of Code
- Svelte Society Talks
@ -55,13 +58,14 @@ _Featuring Svelte Contributors and Ambassadors_
- [SvelteKit & TailwindCSS Tutorial – Build & Deploy a Web Portfolio](https://www.youtube.com/watch?v=-2UjwQzxvBQ) by freeCodeCamp.org
- [Why SvelteKit? [Intro to SvelteKit 1.0, part 1]](https://www.youtube.com/watch?v=FP4AylVsiT8) by Jeffrey Codes Javascript
- [Build an AI Chatbot - it's that easy?!](https://www.youtube.com/watch?v=FcDj9_590Xg) by Simon Prammer
- [Introduction to SvelteKit | FREE 5 HOUR SVELTE WORKSHOP 2023 | Lessons + Coding Exercises](https://www.youtube.com/watch?v=wWRhX_Hzyf8) by This Dot Media
_To Read_
- [What we learned from migrating our web app to SvelteKit](https://blog.datawrapper.de/migrating-our-web-app-to-sveltekit/) by Marten Sigwart
- [SvelteKit Tutorial: Build a Website From Scratch](https://prismic.io/blog/svelte-sveltekit-tutorial) by Prismic has been updated based on the latest SvelteKit features
- [Svelte by Example](https://sveltebyexample.com/) is a succinct, gentle introduction to Svelte & SvelteKit
@ -73,6 +77,7 @@ _To Read_
- [Open Neovim From Your Browser - Integrating nvim with Svelte’s Inspector](https://theosteiner.de/open-neovim-from-your-browser-integrating-nvim-with-sveltes-inspector) by Theo Steiner
**Libraries, Tools & Components**
- Work to [support SvelteKit in Deno](https://github.com/denoland/deno/issues/17248) is ongoing and [Deno now supports](https://github.com/denoland/deno/pull/21026) creating SvelteKit projects out-of-the-box!
- [Purplix](https://github.com/WardPearce/Purplix.io) is an open-source collection of tools dedicated to user privacy and creating trust with your audience
- [Obra Icons](https://github.com/Obra-Studio/obra-icons-svelte-public) is a simple, consistent set of icons, perfect for user interfaces
@ -18,6 +18,7 @@ If you're a library author, consider whether to only support Svelte 4 or if it's
## Browser conditions for bundlers
Bundlers must now specify the `browser` condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. If you're using any others, you may observe lifecycle callbacks such as `onMount` not get called and you'll need to update the module resolution configuration.
- For Rollup this is done within the `@rollup/plugin-node-resolve` plugin by setting `browser: true` in its options. See the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) documentation for more details
- For wepback this is done by adding `"browser"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details
@ -187,6 +187,7 @@ Current Svelte code will continue to work without any adjustments. Components us
The easiest way to opt in to runes mode is to just start using them in your code. Alternatively, you can force the compiler into runes or non-runes mode either on a per-component basis...
Simon Holthausen
3 years ago