svelte/documentation/blog/2023-06-01-whats-new-in-sve...

---
title: "What's new in Svelte: June 2023"
description: 'SvelteHack winners, lots of new bindings, Svelte 4.0.0-next.0, and a bunch of new features in SvelteKit'
author: Dani Sandoval
authorURL: https://dreamindani.com
---

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

[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

- 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](https://kit.svelte.dev/docs/page-options#entries), [#9571](https://github.com/sveltejs/kit/pull/9571))
- URLs in `<meta>` tags are now crawled to make programmatic social-images much easier (**1.17.0**, [Docs](https://kit.svelte.dev/docs/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](https://kit.svelte.dev/docs/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](https://kit.svelte.dev/docs/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**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-resolvepath), [#9949](https://github.com/sveltejs/kit/pull/9949))

---

## 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**

_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**

- [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 👋
-												chore(site-2): What's new in Svelte June 2023 (#8705)


											
										
										
											1 year ago
+								---
 								title: "What's new in Svelte: June 2023"
 								description: 'SvelteHack winners, lots of new bindings, Svelte 4.0.0-next.0, and a bunch of new features in SvelteKit'
 								author: Dani Sandoval
 								authorURL: https://dreamindani.com
 								---
 								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
 								[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
 								- 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](https://kit.svelte.dev/docs/page-options#entries), [#9571](https://github.com/sveltejs/kit/pull/9571))
 								- URLs in `<meta>` tags are now crawled to make programmatic social-images much easier (**1.17.0**, [Docs](https://kit.svelte.dev/docs/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](https://kit.svelte.dev/docs/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](https://kit.svelte.dev/docs/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**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-resolvepath), [#9949](https://github.com/sveltejs/kit/pull/9949))
 								---
 								## 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**
 								_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**
 								- [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 👋