Welcome to June everyone and congrats to our SvelteHack winners (https://hack.sveltesociety.dev/winners), across all the categories! If you missed it, these winners were announced at Svelte Summit on May 6th 🎉

The entire playlist of the summit, including all the talks broken up in to separate videos, can be found on the Svelte Society YouTube channel (https://www.youtube.com/playlist?list=PL8bMgX1kyZTiODueVnrK5GR42u3hgN13X). So check it out, if you haven’t already.

Lots to cover in this month’s newsletter, including a lot of improvements to both Svelte and Kit…

What’s new in Svelte (#What’s-new-in-Svelte)Svelte 4.0.0-next.0 (https://github.com/sveltejs/svelte/releases), the first pre-release version of Svelte 4.0 is out! An explanation of the changes, improvements and goals of this release can be found in the Releases page on GitHub (https://github.com/sveltejs/svelte/releases/tag/svelte%404.0.0-next.0). Check it out to get an early sneak peek of the future of Svelte. It also includes a migration guide, for those interested in the minimal amount of breaking changes and deprecations.

Svelte 3.59.0 is also out, with a ton of new features:

• Restructuring arrays with the spread operator (…) is now handled correctly (3.59.0, #8552 (https://github.com/sveltejs/svelte/issues/8552), #8554 (https://github.com/sveltejs/svelte/issues/8554))

• The new a11y-autocomplete-valid warning will now warn if the autocomplete attribute isn’t used according to the HTML specification (3.59.0, Examples (https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/d32a27fb64f4127d31e4e76bd08e319cfaf0ba53/docs/rules/autocomplete-valid.md), #8520 (https://github.com/sveltejs/svelte/pull/8520))

• fullscreenElement and visibilityState bindings are now available for the svelte:document element (3.59.0, #8507 (https://github.com/sveltejs/svelte/pull/8507))

• The devicePixelRatio binding is now available for the svelte:window element (3.59.0, #8285 (https://github.com/sveltejs/svelte/issues/8285))

• The ResizeObserver bindings contentRect / contentBoxSize/borderBoxSize/devicePixelContentBoxSize are now usable with bind:(3.59.0, #8022 (https://github.com/sveltejs/svelte/pull/8022))

For all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG (https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).

What’s new in SvelteKit (#What’s-new-in-SvelteKit)

• Route-level entry generators allow exporting an entries function from +page, +page.server, and +server files to supply possible values for params for prerendering (1.16.0, Docs (/docs/kit/page-options#entries), #9571 (https://github.com/sveltejs/kit/pull/9571))

• URLs in tags are now crawled to make programmatic social-images much easier (1.17.0, Docs (/docs/kit/seo#Manual-setup-title-and-meta), #9900 (https://github.com/sveltejs/kit/pull/9900))

• data and form have been renamed to formData and formElement respectively in the enhance function. Using them through the old names will log a deprecation warning and they’ll be removed in a future version. (1.17.0, Docs (/docs/kit/form-actions#Progressive-enhancement-use:enhance), #9902 (https://github.com/sveltejs/kit/pull/9902))

• Link options can now be set to true and false (1.19.0, Docs (/docs/kit/link-options#Disabling-options), #10039 (https://github.com/sveltejs/kit/pull/10039))

• The new resolvePath export can be used to build relative paths from route IDs and parameters (1.19.0, #9949 (https://github.com/sveltejs/kit/pull/9949))

Community Showcase (#Community-Showcase)Apps & Sites built with Svelte (#Community-Showcase-Apps-Sites-built-with-Svelte)

• a-maze (https://github.com/nedredmond/a-maze) is a simple maze generator (using DFS) with any dimensions between 5 cells and 75 cells

• Windows 11 in Svelte (https://github.com/yashash-pugalia/win11-svelte) attempts to replicate the Windows 11 desktop experience on web

• JsonCrunch (https://github.com/aghorui/jsoncrunch) is a JSON viewing, transformation and querying tool meant for quickly manipulating small to medium size pieces of JSON data

• Typepost (https://dezain.io/typepost/) is a simple text post generator for social media

• tall.ly (https://tall.ly/) is a website for sharing bookmarks (example (https://tall.ly/zx/icons))

• bbchallenge (https://github.com/bbchallenge/bbchallenge) is a collaborative environment to prove or disprove the Busy Beaver conjecture

• Reddit Map (https://github.com/iDPI-Umass/reddit-map) is a project of computer, data, and social scientists to explore and visualize Reddit

• WeWatch (https://github.com/orosmatthew/wewatch) allows watching videos together in sync

• Wonderplan (https://wonderplan.ai/) is an AI-Powered Trip Planner tailored to your preferences and covering all aspects of your trip

• CodingView.io (https://codingview.io/) is an online coding interview tool

• MeatGPT (https://meat-gpt.sonnet.io/) is an art-site that promptly ignores your prompt

• Vim Ninja (https://www.vimninja.com/) is an interactive Vim course in the browser

• prcl (https://prcl.dev/) is a Pastebin-alternative focused on speed and simplicity

• md (https://github.com/rossrobino/md) is a web based markdown editor

Learning Resources (#Community-Showcase-Learning-Resources)Featuring Svelte Contributors and Ambassadors

• This Week in Svelte:

• 2023 April 28 (https://www.youtube.com/watch?v=LlONGghw_MA) - SK 1.15.9, colour contrast, SK reusable types, path aliases

• 2023 May 5 (https://www.youtube.com/watch?v=jo9osUzHnHY) - SvelteKit 1.16.0, reactive statement lifecycle, custom stores

• 2023 May 12 (https://www.youtube.com/watch?v=MBSYHW50xb8) - Svelte 4.0 preview, SvelteKit 1.16.3, Svelte 3.59.1

• 2023 May 19 (https://www.youtube.com/watch?v=CnvU6K12iK4) - SvelteKit 1.18.0, accessible HTML tables, CSS nesting

• 2023 May 26 (https://www.youtube.com/watch?v=oqroEq1DoKI) - SvelteKit 1.19.0, choosing a UI library, breakpoint debugging

• Svelte Radio

• Svelte Summit Hypisode (https://www.svelteradio.com/episodes/svelte-summit-hypisode) (May 4, 2023)

• A primer on AI for developers with Swyx from Latent Space (https://www.svelteradio.com/episodes/a-primer-on-ai-for-developers-with-swyx-from-latent-space) (May 11, 2023 | Video Version (https://www.youtube.com/watch?v=PzImLLdU5Wk))

To Watch

• Build a Blazing Fast SvelteKit Markdown Blog (https://www.youtube.com/watch?v=RhScu3uqGd0), Page Versus Standalone Endpoints In SvelteKit (https://www.youtube.com/watch?v=8OmsVZuuQMc) and Learn How Data Flows In Your SvelteKit App (https://www.youtube.com/watch?v=ampDDmT3TU0) by Joy of Code

• Build a ChatGPT Plugin with SvelteKit (https://www.youtube.com/watch?v=P4wZ9JIxwjs) by SuperMilkDaddy

• Svelte makes Drag And Drop API easy! (https://www.youtube.com/watch?v=lTDKhj83tec) and Simple native-like App in SvelteKit! (https://www.youtube.com/watch?v=Enl4OPQ2OAM) by Antonio Sarcevic

• Let’s Learn Svelte.js in 60 Minutes (fun speed run). (https://www.youtube.com/watch?v=0FCbd1XVYWo) by developedbyed

To Read

• Bridging Vue 2 and Svelte (https://workadventu.re/blog/post/bridging-vue2-and-svelte) by Alexis Faizeau

• Write Once, Run Anywhere (https://blog.robino.dev/posts/drizzle-svelte) by Ross Robino

• Reflections on Migrating my SaaS To SvelteKit (http://sveltekitsaas.com/articles/migrate-saas-to-sveltekit/) by SvelteKitSaaS

• Authentication system using rust (actix-web) and SvelteKit (https://dev.to/sirneij/full-stack-authentication-system-using-rust-actix-web-and-sveltekit-1cc6) by John Owolabi Idogun

• SvelteKit Forms: Grammar Check App (https://rodneylab.com/sveltekit-forms/), SvelteKit Ably: Sqvuably Real‑Time Game (https://rodneylab.com/sveltekit-ably/) and Svelte Login Form Example: Best Practices (https://rodneylab.com/svelte-login-form-example/) by Rodney Lab

• The Correct Way to Use Stores in SvelteKit (https://dev.to/jdgamble555/the-correct-way-to-use-stores-in-sveltekit-3h6i) and Rich Harris is NOT Getting Rid of TS Support in Svelte (https://dev.to/jdgamble555/rich-harris-is-not-getting-rid-of-ts-support-in-svelte-pp6) by Jonathan Gamble

• How to add a basic SEO component to SvelteKit (https://maier.tech/posts/how-to-add-a-basic-seo-component-to-sveltekit) by Thilo Maier

• SvelteKit Contact Form Example with Airtable (https://scottspence.com/posts/sveltekit-contact-form-example-with-airtable) by Scott Spence

• Performant Reactivity with Svelte-Kit (https://itnext.io/performant-reactivity-with-svelte-kit-47d11769c5f) by Erxk

• Svelte stores: the curious parts (https://blog.thoughtspile.tech/2023/04/22/svelte-stores/) by Valdimir Klepov

Libraries, Tools & Components (#Community-Showcase-Libraries-Tools-Components)

• svelte-svg-transform (https://github.com/bartektelec/svelte-svg-transform) is a tiny library that makes it easier for you to add SVGs and transform them in your Svelte project

• sirens (https://github.com/spiegelgraphics/sirens) is a visualization of active air raid sirens in Ukraine by DER SPIEGEL

• Sveltronics (https://github.com/vasucp1207/sveltronics) is a collection of Svelte utility functions for your project

• Prompta (https://github.com/iansinnott/prompta) is yet another interface for chatting with ChatGPT (or GPT-4)

• Colibri (https://github.com/thetinkerinc/colibri) is a lightweight, customizable component library for Svelte apps

• Svelte Smart Doc (https://www.sveltron.com/) is a natural language interface to search the Svelte Svelte documentation

• Tailwind Elements (https://tailwind-elements.com/docs/standard/integrations/svelte-integration/) now has a Svelte Integration

Thanks for reading! As always, feel free to let us know if we missed anything on Reddit (https://www.reddit.com/r/sveltejs/) or Discord (https://discord.gg/svelte).

Until next time 👋