Skip to main content

What’s new in Svelte: June 2023

SvelteHack winners, lots of new bindings, Svelte 4.0.0-next.0, and a bunch of new features in SvelteKit

Dani Sandoval

Welcome to June everyone and congrats to our SvelteHack 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. 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, 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. 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, #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, #8520)
  • fullscreenElement and visibilityState bindings are now available for the <svelte:document> element (3.59.0, #8507)
  • The devicePixelRatio binding is now available for the <svelte:window> element (3.59.0, #8285)
  • The ResizeObserver bindings contentRect / contentBoxSize/borderBoxSize/devicePixelContentBoxSize are now usable with bind:(3.59.0, #8022)

For all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.

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, #9571)
  • URLs in <meta> tags are now crawled to make programmatic social-images much easier (1.17.0, Docs, #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, #9902)
  • Link options can now be set to true and false (1.19.0, Docs, #10039)
  • The new resolvePath export can be used to build relative paths from route IDs and parameters (1.19.0, #9949)

Community Showcase

Apps & Sites built with Svelte

  • a-maze is a simple maze generator (using DFS) with any dimensions between 5 cells and 75 cells
  • Windows 11 in Svelte attempts to replicate the Windows 11 desktop experience on web
  • JsonCrunch is a JSON viewing, transformation and querying tool meant for quickly manipulating small to medium size pieces of JSON data
  • Typepost is a simple text post generator for social media
  • tall.ly is a website for sharing bookmarks (example)
  • bbchallenge is a collaborative environment to prove or disprove the Busy Beaver conjecture
  • Reddit Map is a project of computer, data, and social scientists to explore and visualize Reddit
  • WeWatch allows watching videos together in sync
  • Wonderplan is an AI-Powered Trip Planner tailored to your preferences and covering all aspects of your trip
  • CodingView.io is an online coding interview tool
  • MeatGPT is an art-site that promptly ignores your prompt
  • Vim Ninja is an interactive Vim course in the browser
  • prcl is a Pastebin-alternative focused on speed and simplicity
  • md is a web based markdown editor

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch

To Read

Libraries, Tools & Components

  • svelte-svg-transform is a tiny library that makes it easier for you to add SVGs and transform them in your Svelte project
  • sirens is a visualization of active air raid sirens in Ukraine by DER SPIEGEL
  • Sveltronics is a collection of Svelte utility functions for your project
  • Prompta is yet another interface for chatting with ChatGPT (or GPT-4)
  • Colibri is a lightweight, customizable component library for Svelte apps
  • Svelte Smart Doc is a natural language interface to search the Svelte Svelte documentation
  • Tailwind Elements now has a Svelte Integration

Thanks for reading! As always, feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋