Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.– front end developers in 2018We’re shipping too much code to our users. Like a lot of front end developers, I’ve been in denial about that fact, thinking that it was fine to serve 100kb of JavaScript on page load – just use one less .jpg! – and that what really mattered was performance once your app was already interactive.But I was wrong. 100kb of .js isn’t equivalent to 100kb of .jpg. It’s not just the network time that’ll kill your app’s startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.If you’re not convinced that this is a problem, follow Alex Russell on Twitter. Alex hasn’t been making many friends in the framework community lately, but he’s not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – Polymer – hasn’t yet gained traction in the fron

It’s fashionable to dislike CSS. There are lots of reasons why that’s the case, but it boils down to this: CSS is unpredictable. If you’ve never had the experience of tweaking a style rule and accidentally breaking some layout that you thought was completely unrelated — usually when you’re trying to ship — then you’re either new at this or you’re a much better programmer than the rest of us.So the JavaScript community rolled up its sleeves and got to work. Over the last couple of years, there’s been a Cambrian explosion of libraries aimed at making CSS behave, collectively referred to as CSS-in-JS.What you might not realise is that the biggest problems with CSS can be solved without CSS-in-JS. Without those problems, writing CSS isn’t just tolerable — it’s enjoyable. And you don’t have to find solutions to the additional problems that CSS-in-JS introduces.This article isn’t in any way intended as criticism of the hard work the CSS-in-JS community has done. It’s one of the most active c

Quickstart for the impatient: the Sapper docs, and the starter templateIf you had to list the characteristics of the perfect Node.js web application framework, you’d probably come up with something like this:It should do server-side rendering, for fast initial loads and no caveats around SEOAs a corollary, your app’s codebase should be universal — write once for server and clientThe client-side app should hydrate the server-rendered HTML, attaching event listeners (and so on) to existing elements rather than re-rendering themNavigating to subsequent pages should be instantaneousOffline, and other Progressive Web App characteristics, must be supported out of the boxOnly the JavaScript and CSS required for the first page should load initially. That means the framework should do automatic code-splitting at the route level, and support dynamic import(...) for more granular manual controlNo compromise on performanceFirst-rate developer experience, with hot module reloading and all the trimm

Our motto is 'move slowly and break things'. No, wait, that came out wrong...Almost a year after we first started talking about version 2 on the Svelte issue tracker, it’s finally time to make some breaking changes. This blog post will explain what changed, why it changed, and what you need to do to bring your apps up to date.tl;drEach of these items is described in more depth below. If you get stuck, ask for help in our friendly Discord chatroom.Install Svelte v2 from npmUpgrade your templates with svelte-upgradeRemove calls to component.observe, or add the observe method from svelte-extrasRewrite calls to component.get('foo') as component.get().fooReturn destroy from your custom event handlers, rather than teardownMake sure you’re not passing numeric string props to componentsNew template syntaxThe most visible change: we’ve made some improvements to the template syntax.A common piece of feedback we heard was ‘ewww, Mustache’ or ‘ewww, Handlebars’. A lot of people who used string-bas

CSS is a core part of any web app. By extension, a UI framework that doesn’t have a built-in way to add styles to your components is unfinished.That’s why Svelte allows you to add CSS in a component’s <style> tag. Co-locating your CSS with your markup means we can solve the biggest problems developers face when writing CSS without introducing new ones, all while providing a rather nice development experience.But Svelte’s style handling does have some limitations. It’s too difficult to share styles between components, or apply app-level optimisations. These are areas we plan to address in future versions, but in the meantime if you need those things you can use any framework-agnostic CSS-in-JS library.For exampleHere, we’re using Emotion to generate scoped class names that can be used across multiple components:It’s important to note that most CSS-in-JS libraries have a runtime library, and many don’t support statically extracting styles out into a separate .css file at build time (whic

If you’ve used JavaScript frameworks in the last few years, you’ve probably heard the phrase ‘the virtual DOM is fast’, often said to mean that it’s faster than the real DOM. It’s a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn’t use a virtual DOM.It’s time to take a closer look.What is the virtual DOM?In many frameworks, you build an app by creating render() functions, like this simple React component:function function HelloMessage(props: any): divHelloMessage(props: anyprops) {return <type div = /*unresolved*/ anydiv className="greeting">Hello {props: anyprops.name}</div>;}You can do the same thing without JSX...function function HelloMessage(props: any): anyHelloMessage(props: anyprops) {return React.createElement('div', { className: stringclassName: 'greeting' }, 'Hello ', props: anyprops.name);}...but the result is the same — an object representing how the page should now look. That object is the virtual DOM. Every time your app’s

Earlier this month, I had the privilege of appearing on The Changelog, a podcast about software development. We had a fun (for me) and wide-ranging conversation:life as a coder inside a newsroomthe big compilers-as-frameworks trendscalabilitythe Great Divide...and, most importantly, Svelte 3.Unless you hang out in our Discord server or follow @sveltejs on Twitter, you might not know that Svelte 3 is just around the corner, and it’s going to be a huge release. We’ve rethought the developer experience from the ground up, and while it will be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you’re going to love it.On the podcast Adam, Jerod and I talk about some of the changes and why we’re making them. You can listen here or on the podcast page.The Changelog 332: A UI framework without the framework – Listen on Changelog.com

This short guide is designed to help you — someone who has looked at the tutorial and wants to start creating Svelte apps, but doesn’t have a ton of experience using JavaScript build tooling — get up and running.If there are things that don’t make sense, or that we’re glossing over, feel free to raise an issue or suggest edits to this page that will help us help more people.If you get stuck at any point following this guide, the best place to ask for help is in the chatroom.First things firstYou’ll be using the command line, also known as the terminal. On Windows, you can access it by running Command Prompt from the Start menu; on a Mac, hit Cmd and Space together to bring up Spotlight, then start typing Terminal.app. On most Linux systems, Ctrl-Alt-T brings up the command line.The command line is a way to interact with your computer (or another computer! but that’s a topic for another time) with more power and control than the GUI (graphical user interface) that most people use day-to

All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be.Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop.In fact it’s widely acknowledged that project development time and bug count grow quadratically, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments — activities that almost always result in more code. It’s a vicious cycle.Yet while we obsess — rightly! — over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we’re writing.Readability is importantI’m

After several months of being just days away, we are over the moon to announce the stable release of Svelte 3. This is a huge release representing hundreds of hours of work by many people in the Svelte community, including invaluable feedback from beta testers who have helped shape the design every step of the way.We think you’re going to love it.What is Svelte?Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write declarative state-driven code, but there’s a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like virtual DOM diffing that eat into your frame budget and tax the garbage collector.Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you’re able to write ambitious applications with excellent performance characteristics.The first version of S

It’s been by far the most requested feature for a while, and it’s finally here: Svelte officially supports TypeScript.We think it’ll give you a much nicer development experience — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or JavaScript.Image of TypeScript + Svelte in VS Code (theme is Kary Pro.)Try it nowYou can start a new Svelte TypeScript project using Svelte’s official scaffolding CLI by running npm create svelte@latest and following the prompts. This sets up a new SvelteKit project for you.Alternatively you can run npm create vite@latest myapp -- --template svelte-ts to scaffold a Vite project using Svelte and TypeScript.If you’re a VS Code user, make sure you’re using the (new) official extension, which replaces the popular extension by James Birtles.Later in this blog post, we’ll detail the individual steps involved in using TypeScript in an existing Svelte project.What does it mean to support TypeScript in Svelte?Typ

Welcome to the first edition of our “What’s new in Svelte” series! We’ll try to make this a monthly blog post in which you’ll find out about new features, bug fixes, and a showcase of Svelte projects from around the community.New featuresuse:obj.method allows functions defined within objects to be used within actions (Example, 3.26.0, warning removed in 3.27.0)_ is now supported as a “numerical separator”, similar to a . or , (Example, 3.26.0)import.meta now works in template expressions (Example, 3.26.0)CSS Selectors with ~ and + combinators are now supported (Example, 3.27.0, with a compiler fix in 3.29.0)The {#key} block is now available to key arbitrary content on an expression. Whenever the expression changes, the contents inside the {#key} block will be destroyed and recreated. For an in-depth explanation and to find out how it’s implemented, check out the new blog post of Svelte Team member Tan Li Hau. (More info, 3.29.0)Slots can now be forwarded through child components! This

Welcome back to the “What’s new in Svelte” series! This month, we’re covering new features & bug fixes, last month’s Svelte Summit and some stand-out sites and libraries...New features & impactful bug fixesDestructuring Promises now works as expected by using the {#await} syntax(3.29.3, Example)Slot forwarding (released in 3.29.0) should no longer hang during compilation (3.29.3, Example)Better typings for the get function in svelte/store and on lifecycle hooks (3.29.1)What’s going on in Sapper?Sapper got some new types in its preload function, which will make typing easier if you are using TypeScript. See the Sapper docs on how to use them. There also were fixes to preload links in exported sites. Route layouts got a few fixes too - including ensuring CSS is applied to nested route layouts. You can also better organize your files now that extensions with multiple dots are supported. (0.28.10)For all the features and bugfixes see the CHANGELOGs for Svelte and Sapper.Svelte Summit was S

If you didn't attend Svelte Summit, you can catch up on the Svelte Society YouTube pageIf you attended Svelte Summit last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0?The answer: never.This was slightly tongue-in-cheek — as the talk explains, it’s really more of a rewrite of Sapper coupled with a rebrand — but it raised a lot of new questions from the community, and it’s time we offered a bit more clarity on what you can expect from Sapper’s successor, SvelteKit.'Futuristic Web Development' from Svelte SummitWhat’s Sapper?Sapper is an app framework (or ‘metaframework’) built on top of Svelte (which is a component framework). Its job is to make it easy to build Svelte apps with all the modern best practices like server-side rendering (SSR) and code-splitting, and to provide a project structure that makes development productive and fun. It uses filesystem

It’s the last “What’s new in Svelte” of the year and there’s lots to celebrate! This month’s coverage includes updates from rollup-plugin-svelte, Sapper and SvelteKit and a bunch of showcases from the Svelte community!New features & impactful bug fixes$$props, $$restProps, and $$slots are all now supported in custom web components (3.29.5, Example) and slot components now support spread props: <slot {...foo} /> (3.30.0)A new hasContext lifecycle function makes it easy to check whether a key has been set in the context of a parent component (3.30.0 & 3.30.1, Docs)There is now a new SvelteComponentTyped class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {} (3.31.0, RFC)Transitions within {:else} blocks should now complete successfully (3.29.5, Example)Svelte now

Happy new year from Svelte! In the last month we made progress on Sapper’s upcoming release, fine-tuned our SvelteComponent typings, and have seen some amazing apps, sites, and libraries coming out in the showcase.What’s changed in Svelte?A new minor release replaces the SvelteComponent class with a SvelteComponentTyped class. This renaming should help with backwards compatibility. We’ve updated last month’s blog post to avoid any confusion with the name change.If you’re using SvelteComponent or the new SvelteComponentTyped in your project or library, let us know what you’re using it for and we’ll add it to the showcase!What’s going on in Sapper?More quality of life features are landing in the upcoming release every day. 0.29.0 will include new TypeScript definitions, fixes to scroll tracking and prefetching behavior, and improvements to the runtime router to support encoded query parameters.If you’re upgrading from 0.28.x, check out the migration guide for steps on updating to Sapper

With the shortest month of the year coming up, Svelte maintainers and community members alike have been busy this last month – from big changes in svelte-loader, prettier-plugin-svelte, rollup-plugin-svelte, and language-tools to steady progress in Sapper and svelte-preprocess. Meanwhile, lots of folks have been busy integrating Svelte with other popular frameworks.New compiler featuresAria roles from the WAI-ARIA Graphics Module are now recognized as valid aria roles in Svelte components (3.31.1)Compiler warnings for the common React attributes, className and htmlFor, now make it easier to port React components to Svelte (3.31.1)Have a suggestion for a compiler feature or want to help implement new features/bug fixes? Check out the “triage: good first issue” tag for SvelteNew bits in language-toolsUser disabled auto import suggestions no longer show in VS Code (103.0.0)Renaming a variable is now safer with smart additions of a prefix/suffix to renamed variables (104.0.0)Semantic (toke

Lots to cover this month with releases from across the Svelte ecosystem. Most importantly, Svelte Summit Spring 2021 has an Open Call for Speakers. The deadline is March 14 so if you have an idea for a talk, submit it now!Let’s dive into the news 🐬What’s new in sveltejs/svelteSSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (3.31.2, see custom stores and Server-side component API )Multiple instances of the same action are now allowed on an element (3.32.0, example)The new foreign namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (3.32.0, more info)Support for inline comment sourcemaps in code from preprocessors (3.32.0)Destructured defaults are now allowed to refer to other variables (3.33.0, example)Custom elements will now call onMount functions when connecting and clean up when disconnecting (3.3...

Previously: What's the deal with SvelteKit?It’s time. After five months and hundreds of commits, you’re finally invited to try out the SvelteKit beta. It’s not finished — there are a few known bugs and several missing features — but we’re really happy with how it’s shaping up and can’t wait for you to try it.Starting a new project is easy:# create the projectmkdir my-appcd my-appnpm init svelte@next# install dependenciesnpm install# start dev server and open a browser tabnpm run dev -- --openYou’ll find documentation at svelte.dev/docs/kit. If you have a Sapper app that you’d like to migrate to SvelteKit, you’ll find instructions at svelte.dev/docs/kit/migrating.The source code is available at github.com/sveltejs/kit. Issues and pull requests are disabled while we finish getting our house in order, but we’ll be making it fully open in the near future.Wait, what is SvelteKit?Think of it as Next for Svelte. It’s a framework for building apps with Svelte, complete with server-side renderi

Two projects that have been months (even years) in the making have made their way out into the world. SvelteKit is now in public beta and slotted components are now available in Svelte!What’s up with SvelteKit?SvelteKit - Svelte’s versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the latest blog post. Want to know when 1.0 is close? Check out the milestone on github.Want to learn more about how to get started, what’s different compared to Sapper, new features and migration paths? Check out this week’s episode of Svelte Radio for a deep dive with Antony, Kev and Swyx.New in Svelte & Language ToolsSlotted components, including <svelte:fragment slot="..."> lets component consumers target specific slots with rich content (Svelte 3.35.0, Language Tools 104.5.0)Linked editing now works for HTML in Svelte files (Language Tools, 104.6.0)Type definitions svelte.d.ts are now resolved in order, allowing libr

Last week, Svelte Summit blew us away with a mountain of content! Check out the full recording or an audio-only (p)review on Svelte Radio. Now let’s get into this month’s news...New features in the Svelte Compiler:global() is now supported as part of compound CSS selectors (3.38.0, Example)CSS custom properties can now be passed to components for use cases such as theming (3.38.0, Docs coming soon)New in SvelteKitkit.svelte.dev has a fresh new look and the SvelteKit Demo Site got a fresh set of paint. Check it out by running npm init svelte@nextYou can now use @sveltejs/adapter-static to create a single-page app or SPA by specifying a fallback page (PR, Docs)Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis (PR)Error messages thrown during pre-rendering are now much more informative and readable (PR, Docs)Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation (PR, Docs)fe

This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features, most notably deeper integration with Svelte files within JavaScript or TypeScript files. Let’s jump into the updates...New in SvelteKitsvelte.config.js config files are now loaded in ESM format (.js instead of .cjs).AMP pages will now use the rendered CSS, rather than emitted CSSsvelte-check has been added to the TypeScript template (sveltejs/kit#1556)Support for https keypair sveltejs/kit#1456Now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your package.json if it’s thereEtags for binary responses sveltejs/kit#1382Renamed $layout to __layout and $error to __errorRemoved getContext in favor of request.localsRenamed .svelte output directory to .svelte-kit. Update your .gitignore accordinglytrailingSlash: 'never' | 'always' | 'ignore' is now available in the config. This should make it easier to build sites that work with static hosting provid

As the northern hemisphere heats up, Svelte has stayed cool with lots of performance and bug fixes, better TypeScript support, and lots of new components & tools from around the ecosystem. Let’s take a peek 👀New in SvelteKitadapter-node now precompresses assets using gzip & brotli (#1693)Support for TypeScript transpilation has been added to the svelte-kit package tooling (#1633)Improved caching defaults in adapter-node (#1416)Allow configuring Rollup output options (#1572)Fixed usage of SSL with HMR (#1517)Features & bug fixes from around svelte/*Svelte 3.38.3 (released June 22) includes a bunch of performance and bug fixes - including hydration optimizations, this preservation in bubbled events, and more!The latest language tools releases added support for prop renaming from outside of a component, PostCSS syntax grammar, and a .d.ts output target in svelte2tsx which can be used to create type definitions from Svelte files.Also in language tools, some long-awaited experimental featu...

From The Changelog (JS Party Ep. 182) to Svelte Radio (Episodes 29 and 30), it seems that folks couldn’t help but talk about Svelte, this month! Also, shadow DOM support and new export and await functionality are new in Svelte.New in SvelteJuly was the most active month for the Svelte core repo since late 2019 as we really worked to reduce the number of outstanding PRs and saw the release of Svelte 3.39.0, 3.40.0, and 3.41.0. Tons of bug fixes were added as well as the following new features:The |trusted event modifier allows you to check if an event is trusted before it’s called (#6137)The new svelte/ssr package to support work on improving SvelteKit SSR (#6416)A new errorMode compiler option to support improved preprocessing of TypeScript files (#6194)You can now specify a ShadowRoot as the target when creating a component - making it possible to render Svelte components inside the shadow DOM (#5869)The export { ... } from (#2214), export let { ... } = (#5612) and {#await ... then/ca

This month, Svelte was voted StackOverflow’s most loved web framework, Tan Li Hau talked to Svelte Radio about his Svelte-filled YouTube channel, and SvelteKit made even more progress towards its 1.0 release!New in Svelteuse:actions can now be used on <svelte:body> (3.42.0)HTMLElement, SVGElement (3.42.2) and BigInt (3.42.3) are now known globalsThere is less code in Svelte’s output thanks to the following improvements in 3.42.2:Whitespace is now collapsed in class and style attributesHydrated components have been updated to only rely upon helpers for creating the types of elements present in the componentScaling is now accounted for in flip animations (3.42.2)All <option>s in a <select> are now deselected when the bound value doesn’t match any of them (3.42.2)For a full list of features and bug fixes, check out the Svelte changelog.SvelteKit UpdatesSvelte maintainers are looking for help getting SvelteKit to 1.0. We’ve knocked out over 100 issues that were on the 1.0 milestone. There’

Hey y’all 👋 It’s been 1 year since “What’s new in Svelte” started being cross-posted to the Svelte blog. I wanted to take this moment at the top to thank all of you for reading and for all the contributors every month. From the maintainers to everyone who posts their work in the Discord and Reddit, it’s amazing to witness all the effort that goes into making the Svelte community great.Keep up the good work, everyone! Now, let’s dive into this month’s news...New around SvelteNew additions to Svelte’s export map now expose no-op versions of lifecycle functions for SSR (Svelte 3.43.0)Custom components with a src attribute no longer break svelte-native builds (Svelte 3.42.4)Svelte plugin users without the TypeScript plugin enabled will now be prompted to enable it. It enhances TypeScript and JavaScript files with additional intellisense to interact with Svelte files. Please leave feedback if you are using it (Svelte extensions 105.4.0)Event modifiers have been added to intellisense as aut...

With SvelteKit crossing the 80% complete mark, over 5000 stars on GitHub, and now having more usage than Sapper, there’s never been a better time to try it out! Many in the community have, making for quite a large showcase this month...Also, don’t miss out on Svelte Summit on November 20th - featuring speakers from around the world. Keep an eye out for a watch party in your area 👀Now onto what’s new!New in Svelte and SvelteKitsvelte.dev now runs on SvelteKit alongside sveltesociety.dev. svelte.dev is a relatively complicated site with live code editing, authentication, and a markdown-based blog - making it a great way for us to really test out SvelteKitA new compiler option, enableSourcemap, provides more control over the compiler output for JS and CSS sourcemaps (3.44.0). With this new feature, SvelteKit and the Vite Svelte plugin can now properly handle environment variables in .svelte templates (See sveltejs/kit#720 and sveltejs/vite-plugin-svelte#201)The Svelte Language Tools now ...

With SvelteKit getting more and more stable each day, there’s not much to cover in terms of code changes other than bug fixes... So, in this month’s newsletter, we’ll be covering Svelte Summit Fall 2021!If you want to dive deep into the last month’s worth of bug fixes, check out the Svelte and SvelteKit changelogs, respectively.What happened at Svelte Summit?If you missed Svelte Summit, you can watch the entire live stream on YouTube and catch a recap in the #svelte-summit channel on Discord.Here are the highlights:Rich Harris took us through a tour of Svelte’s history and announced his move to Vercel - where he will be helping maintain Svelte full-time! (20:00)Steph Dietz explained how Svelte’s simple abstractions makes it easy for beginners and experts alike to learn and use JavaScript - without the boilerplate (29:00)Kevin Bridges dove deep into Svelte’s reactivity logic by visualizing it through ReflectiveCounter and showing how to “fine tune” it, as needed. A full “syllabus” for t

Happy new year, Svelte Community! Lots to share this month across Svelte, SvelteKit, Language Tools and the Showcase. Thanks to everyone who made 2021 a great year to use Svelte. Looking forward to the next one 🚀What’s new in SvelteKit@sveltejs/adapter-static for SvelteKit now has a precompress option to make brotli compression of assets and pages easier to do out of the box (#3079)Concurrency mode in SvelteKit will now prerender pages in parallel (#3120). It is enabled by default in 1.0.0-next.205 and laterCSS is now automatically included before JS for improved page performance (d13efe)A new config option adds the ability to disable service worker registration to do your own custom registration (#2988)SSR route-splitting is here - breaking monolithic builds into smaller pieces for improved startup and routing performance (#2931)request.origin/path/query is now request.url - simplifying the config and page load functions (#3126)After the update to Vite 2.7, SvelteKit users are report...

Svelte is a frontend framework for building fast reactive web apps with less code. If you’re new here, check out the tutorial or examples to get a feel for it.Svelte was launched 5 years ago and has come a long way in the time since. In 2021, as usage more than doubled, it was voted the most loved framework with the most satisfied developers in a pair of surveys. Alongside high-profile companies like The New York Times, Apple, Spotify, Square, Rakuten, Bloomberg, Reuters, Ikea, Brave, and countless others, Svelte is used to power everything from hobby projects to embedded systems interfaces.To help developers build fully-featured applications with Svelte without worrying about the hard parts, we’ve been developing the SvelteKit application framework. We’re moving quickly towards a stable 1.0 release with the help of early adopters who have already downloaded SvelteKit almost one million times.Scaling the teamRich Harris, Svelte’s creator, has joined Vercel to work on Svelte full-time.

Happy February, everyone! Over the last month or so, we’ve seen Svelte and SvelteKit develop at rapid speed, new community rules across the Reddit, GitHub and Discord, and quite a few amazing apps, tutorials and libraries.Let’s take a look...Highlights from the Svelte changelog3.45.0 brought a new a11y warning a11y-no-redundant-roles, destructuring and caching fixes3.46.0 added the much requested {@const} tag and style: directiveCheck out 3.46.1 - 3.46.3 for fixes to the {@const} tag and style: directive, along with a number of fixes to animationsAST output is now available in the Svelte REPLWhat’s new in SvelteKitinlineStyleThreshold allows you to specify where inline stylesheets are inserted into the page (Docs, #2620)beforeNavigate / afterNavigate lifecycle functions lets you add functionality before or after a page navigation (Docs, #3293)Platform context can now be passed from adapters (Docs, #3429)Hooks now have an ssr parameter in resolve to make it easier to skip SSR, when need

Just announced: Svelte Summit Spring will be taking place on April 30, 2022. The 5th Virtual Svelte Conference is looking for speakers and sponsors... so it’s time to dust off those proposals!Also, some long-requested features were added to SvelteKit this month... including page endpoints! This change in how the load function works makes it easier to fetch data required for basic pages, redirect from POST responses and handle 404s and other errors.More on that and other new features and fixes below!What’s new in SvelteKitThe docs are now searchable and multipage with type definitions and hoverable code examples - Check them out at svelte.dev/docs/kitPage endpoints significantly decrease the boilerplate needed when loading a page (Issue, PR, Docs)Application versioning and update detection support lets you determine what to do when a route fails to load after an app update (Issue, PR, Docs)A new option in npm init svelte@next will now set up Playwright automatically for testing (PR)Brea

This month, we felt a shift in the way SvelteKit handles page properties. The last holdout of the use-cases that required fallthrough routes, validating parameter properties, has been replaced by a more specific solution.More on that, and what else is new in Svelte, as we dive in...What’s new in SvelteKitParam matchers allow you to check if a url parameter matches before rendering a page - replacing the need for fallthrough routes for this purpose (Docs, #4334)Explicit redirects can now be handled directly from endpoints (#4260)svelte-kit sync (#4182), TypeScript 4.6 (#4190) and Vite 2.9 were released - adding non-blocking dependency optimization and experimental CSS source maps in dev mode as well as a number of bug fixes contributed by the SvelteKit team (#4468)New Config OptionsoutDir fixes path issues in monorepos and other situations where the desired output directory is outside the project directory (Docs, #4176)endpointExtensions prevents files other than .js and .ts files from

With yesterday’s Svelte Summit behind us, we’ve got a lot of news to share! Check out all of the recordings on the Svelte Society YouTube Channel and the rest of this month’s updates below...What’s new in SvelteThe <svelte:element> element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the docs or the tutorial for more info (3.47.0)!Language Tools updatessvelte:element and sveltekit:reload are now supportedInvalid Svelte import paths will now be automatically detected - see PR for getting back the old behavior (#1448)source.sortImports lets you sort imports without deleting unused imports (#1338)Hovering over HTML attributes will now show HTML hover info instead of the TS hover info - resulting in much more useful information (#1447)In VS Code, you can now wrap existing blocks of code in control flow tags using the Insert Snippet command (#1373)What’s new in SvelteKitFiles and directories c

With last month’s Svelte Summit behind us, we’re ready to apply everything we learned in this new month of June! Also new this month are some quality-of-life changes to createEventDispatcher, @const declarations and tons of progress toward SvelteKit 1.0.Let’s dive in!What’s new in SvelteCustom events can now be cancelled in the createEventDispatcher function (3.48.0, Docs, PR)The {@const} tag can now be used in {#if} blocks to conditionally define variables (3.48.0, Docs, PR)Lots of bug fixes across <svelte:element>, animations and various DOM elements. Check out the CHANGELOG for a deeper dive!What’s new in SvelteKitVite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever (Vite 3.0 Milestone)config.kit.alias lets you more easily declare a custom alias to replace values in import statements (Docs, PR)Pages marked for prerendering will now fai

From faster SSR to support for Vitest and Storybook in SvelteKit, there’s a lot to cover in this month’s newsletter...So let’s dive in!OpenCollective funding drives Svelte forwardSvelte supporters have donated approximately $80,000 to the project on OpenCollective. We’re happy to share that the funds are being drawn on to move Svelte forward in a meaningful way. @gtm-nayan has begun triaging and fixing SvelteKit issues this past month as a paid contributor to the project to help us get SvelteKit to a 1.0 level of stability! @gtm-nayan has been an active member of the Svelte community for quite some time and is well known for writing the bot that helps keep our Discord server running. We’re happy that this funding has allowed Svelte to get much more of his time.We will also be utilizing OpenCollective funds to allow Svelte core maintainers to attend Svelte Summit in person this fall. Thanks to everyone who has donated so far!What’s new in Svelte & Language ToolsThe tutorial is a new way

There’s a lot to cover this month... big changes are coming to SvelteKit’s design before 1.0 can be completed. If you haven’t already, check out Rich’s Discussion, Fixing load, and tightening up SvelteKit’s design before 1.0 #5748.Also, @dummdidumm (Simon H) has joined Vercel to work on Svelte full-time and @tcc-sejohnson has joined the group of SvelteKit maintainers! We’re super excited to have additional maintainers now dedicated to working on Svelte and SvelteKit and have already been noticing their impact. July was the third largest month for SvelteKit changes since its inception!Now onto the rest of the updates...What’s new in SvelteKitDynamically imported styles are now included during SSR (#5138)Improvements to routes and prop updates to prevent unnecessary rerendering (#5654, #5671)Lots of improvements to error handling (#4665, #5622, #5619, #5616)Custom Vite modes are now respected in SSR builds (#5602)Custom Vite config locations are now supported (#5705)Private environment v

Still looking for something to do this month? It’s your last chance to get tickets to Svelte Summit, Stockholm! Join us on Sept 8-9th 🎉With the redesign of SvelteKit’s filesystem-based router merging early last month, there’s lots to cover this month - from the migration script to a number of new blog posts, videos and tutorials.But the new routing isn’t the only new feature in SvelteKit...What’s new in SvelteKitLink is now supported as an HTTP header and works out of the box with Cloudflare’s Automatic Early Hints (1.0.0-next.405, PR)$env/static/* are now virtual to prevent writing sensitive values to disk (1.0.0-next.413, PR)$app/stores can now be used from anywhere on the browser (1.0.0-next.428, PR)config.kit.env.dir is a new config that sets the directory to search for .env files (1.0.0-next.430, PR)Breaking changes:The filesystem-based router and load API improves the way routes are managed. Before installing version @sveltejs/[email protected] or later, follow this migration g...

There’s a bunch of updates this month... from new features in Svelte and SvelteKit to a whole 2-day summit! Plus, the Svelte extension gets some helpful new tools, new accessibility (a11y) warnings, and Tan Li Hau teaches us how to build our own Svelte and a Svelte spreadsheet 😎What happened at Svelte Summit?A lot! Below you can find all the talks, by timestamp, from each livestream. Bite-size videos of the event will be coming soon to the Svelte Society channel, so be sure to Subscribe, if you haven’t already!Day One12:31 - How to get Svelte adopted at work33:21 - Animating Data Visualization in Svelte2:20:36 - Red flags & code smells2:53:42 - Enhance your DX4:42:41 - Svelte in UBS’ knowledge graph5:06:42 - How to migrate react libraries to svelte5:45:27 - DX magic in the world of Svelte7:25:39 - Data visualizations powered by Svelte7:59:38 - Partial Hydration in Svelte for Increased Performance8:20:49 - Building the future, fasterDay Two24:09 - Scrollytell me why: Ain’t nothing but ...

It’s been a busy October for the Svelte community. use:enhance and Advanced Routes got some great improvements in SvelteKit while the Svelte compiler released a minor version to improve the day-to-day dev experience.There’s also a huge showcase to cover... so let’s jump in!What’s new in SvelteKitThe new update method for use:enhance lets you easily get back the default form behavior while augmenting it with your own logic (docs, #7083 and #7326)[[optional]] parameters are now available for routing (docs, #7051)goto now has invalidateAll to (re-)run all load functions belonging to the new active page (docs, #7407)config.kit.paths.base is now used in adapters looking for static assets - fixing 404 issues across adapter-netlify, adapter-vercel, adapter-cloudflare, and adapter-cloudflare-workers (#4448)Breaking changes:Errors will now be thrown when routes conflict (#7051)The global fetch override has been removed when prerendering (#7318)Route IDs have been prefixed with / (#7338)Svelte c

SvelteKit 1.0 is just around the corner! With 99% of the milestone issues completed, there’s a lot of new changes from the last month to cover...Let’s get to it!What’s new in SvelteKitUse the willUnload property to find out if the navigation will result the app being unloaded (full page reload/closing/leaving to another page). (#6813)__data.json requests now allows for caching while ensuring we cache matching responses for all invalidation scenarios (#7532)Linking to <a name="hash"> tags is now supported (#7596)Throwing redirects in the handle hook is now supported (#7612)A fallback component will now be added automatically for layouts without one (#7619)The new preload function within the resolve hook determines what files should be added to the tag to preload it (Docs, #4963, #7704)version is now available via $app/environment (#7689, #7694)handleError can now return a promise (#7780)Breaking changes:routeId is now route.id (#7450)‘load’ has been renamed to ‘enter’ and ‘unload’ to ‘l

After two years in development, SvelteKit has finally reached 1.0. As of today, it’s the recommended way to build Svelte apps of all shapes and sizes.We’re so excited to share this release with you. It’s the culmination of thousands of hours of work, both from the Svelte core team and the wider community, and we think it’s the most enjoyable way to build production-grade websites, whether you’re a solo developer working on a small project or part of a large team.To get started, run npm create svelte@latest, and visit the docs and (experimental!) interactive tutorial.Svelte Radio Live: the Christmas specialWhat is SvelteKit?SvelteKit is a framework for building web applications on top of Svelte, a UI component framework that developers love for its performance and ease of use.If you’ve used component frameworks like Svelte, you’ll know that they make it much easier to build user interfaces than working with the DOM directly. But they leave a lot of questions unanswered:How do I structur

It’s been just two weeks since the release of SvelteKit 1.0! If you haven’t yet, check out the livestream, new website and tutorial to learn all the features of SvelteKit step-by-step.Let’s dive into the details...What’s new in SvelteKit@sveltejs/kit 1.0 is out! All future releases will follow semver and changes will be listed as major/minor/patch in the CHANGELOG.Improved support for Storybook and Histoire (#7990). Work is ongoing to fully support those tools (storybook#20239).vitePreprocess is now the default preprocessor. Please see the docs for differences between vitePreprocess and svelte-preprocess (#8036).Breaking changes:Unknown exports (except when starting with an underscore) are no longer allowed from +(layout|page)(.server)?.js and +server.js files (#7878)__data.json is now stripped from URL (#7979)sveltekit() will now return a promise for an array of Vite plugins (#7994)A new embedded option, turned off by default, helps with link clicks when embedding SvelteKit (docs, #79

Since last month, we’ve seen a couple of minor versions across Svelte and SvelteKit, a bunch of educational content to support the 1.0 release, as well as the State of JS survey results...Svelte, once again, increased in satisfaction and interest, so thanks to everyone who voted!Let’s dive into the updates...What’s new in SvelteKitWork in the Svelte ecosystem this month has been focused on SvelteKit bug fixes and addressing feedback from the 1.0 launch. One of the more awaited bug fixes to SvelteKit’s base path support landed, which means that you can now create SvelteKit projects on remote development environments. There have been several new releases with these fixes as well as a handful of new features such as:The submitter’s value will now be included automatically when progressively enhancing (1.0.3, #8273)Added an error in dev mode if global fetch is used with relative URL (1.0.8, #8370)A warning will now indicated that hydration may break if comments are removed from HTML (1.0.1

The Svelte team has been hard at work since the release of SvelteKit 1.0. Let’s talk about some of the major new features that have shipped since launch: streaming non-essential data, snapshots, and route-level config.Stream non-essential data in load functionsSvelteKit uses load functions to retrieve data for a given route. When navigating between pages, it first fetches the data, and then renders the page with the result. This could be a problem if some of the data for the page takes longer to load than others, especially if the data isn’t essential – the user won’t see any part of the new page until all the data is ready.There were ways to work around this. In particular, you could fetch the slow data in the component itself, so it first renders with the data from load and then starts fetching the slow data. But this was not ideal: the data is even more delayed since you don’t start fetching until the client renders, and you’re also having to break SvelteKit’s load convention.Now, i

March is coming in hot with a number of essential features having been added to SvelteKit following its 1.0 launch. Check out last week’s blog post for more details.Svelte Society also launched SvelteHack last month with over $12,000 in prizes - calling all Svelte developers, new and old, to make something awesome before the April 17th deadline!And, if you haven’t heard already, there’s going to be another Svelte Summit! Head over to SvelteSummit.com and sign up for the newsletter to get updates about the next event 📬Now let’s jump into this month’s changes...What’s new in SvelteKit$app/paths can now be used without an app - making things like component testing with Vitest, using Storybook, etc. easier (1.4.0, #8838)Adapters can now be configured at the route level (1.5.0, Docs, #8740)The new snapshot mechanism preserves ephemeral DOM state even after navigation and page reloads (1.5.0,Docs, #8710)OPTIONS are now available within the server method (1.6.0, Docs, #8731)Richer error mess...

By sprinkling type annotations into your SvelteKit apps, you can get full type safety across the network — the data in your page has a type that’s inferred from the return values of the load functions that generated that data, without you having to explicitly declare anything. It’s one of those things that you come to wonder how you ever lived without.But what if we didn’t even need the annotations? Since load and data are part of the framework, can’t the framework type them for us? This is, after all, what computers are for — doing the boring bits so we can focus on the creative stuff.As of today, yes: it can.If you’re using VSCode, just upgrade the Svelte extension to the latest version, and you’ll never have to annotate your load functions or data props again. Extensions for other editors can also use this feature, as long as they support the Language Server Protocol and TypeScript plugins. It even works with the latest version of our CLI diagnostics tool svelte-check!Before we dive

Happy April, everyone! This month, we’re covering all the new features in the Svelte compiler, some quality-of-life improvements in SvelteKit and a huge showcase (like always).In core team news, Dominic Gannaway has joined Vercel to work on Svelte full-time! Dominic is a world-class expert on wringing performance out of javascript engines, on the DOM, on reactivity, on accessibility, and more! You might know him as the creator of the Inferno UI framework or Lexical, Meta’s WYSIWYG editor. It’ll be great to see his talents at work across the Svelte ecosystem 🌱Don’t forget! Svelte Summit Spring, Svelte’s 6th virtual conference, will be happening on May 6th. Also, there’s just two weeks left until the end of SvelteHack... It’s a great opportunity to share your creations with the community and maybe even earn a prize!Now let’s jump into this month’s changes...What’s new in SvelteA bunch of new features are now available as of 3.56.0!Add |stopImmediatePropagation event modifier for on:even...

Before we dive into the updates, there’s a few announcements worth mentioning at the top:New Svelte AmbassadorsRegular features of this newsletter and all-around great content creators for Svelte JoyOfCode and HuntaByte have been appointed as Svelte Ambassadors. Ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement!SvelteHack winners will be announced May 6thIn a just a few days, we’ll find out who won SvelteHack - the Svelte Hackathon that took place between February 17th and April 17th. Tune in to Svelte Summit on May 6th to see if your favorite project was chosen 👀Lots of submissions to the hackathon are featured in this month’s showcase... but first, let’s see what’s new!What’s new in Sveltestyle blocks now support CSS @container queries (3.58.0)bind:innerText is now available for contenteditable elements (3.58.0)A new accessability ...

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 SvelteSvelte 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 ne...

After months in the making, we’re excited to announce the stable release of Svelte 4.Time flies - Svelte 3 was released more than four years ago! In JavaScript-framework-time, that’s eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and today we’re updating Svelte to take advantage of some of these improvements. Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas. It sets the stage for the next generation of Svelte to be released as Svelte 5 - we think you’ll love it.If you haven’t tried Svelte yet, take it for a spin in our interactive tutorial, on StackBlitz, or locally with npm create svelte@latest. Svelte lets you easily put together web UIs leveraging the power of HTML, CSS, JS, and the Svelte compiler. Watch Svelte Radio Live to learn more about this release.What’s newPerformanceThis release results in smaller and faster hydration code. To see the

When the initial version of Svelte v3 was released four years ago, it included the single-page documentation that folks have been familiar with. That documentation structure had stayed the same as Svelte’s API surface increased steadily and more details were added. As a result, the single page got larger and larger to the point where it was becoming difficult to find things. The community had been asking for a revamp, and now it’s here!Meet the new svelte.dev — a complete overhaul of the old website.Multi-page docsThe table of contents had grown to be quite large and you had to scroll across half a dozen screens to see the whole thing. We heard you! The docs are all split up into multiple pages now and all pages list their sections in the righthand sidebar.All modules exposed by Svelte are also listed in the sidebar under the Runtime section:sveltesvelte/storesvelte/motionsvelte/transitionsvelte/animatesvelte/easingsvelte/actionsvelte/compiler is under Compiler and API sectionWe’ve als

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 SvelteThe big news this month was the release of Svelte 4.0! You can read all about it in the Announcing Svelte 4 post. From performance fixes and developer experience improvements to a brand new site, docs and tutorial... 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 for all the details.For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.What’s new in SvelteKitThis month there were lots of awesome bug fixes, 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 ow

Some sweet new features have dropped in both Svelte and SvelteKit, this month. It’s also great to see how many products and side projects have launched using Svelte as their core technology!More on all that down below...What’s new in Svelte & Language ToolsThere’s been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the CHANGELOG.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 or the PR for more info!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 SvelteKitThe HEAD server method is now available in API routes (1.22.0, Docs, #9753)Responses with Vary headers are now cached, too (except for Vary: *) (1.22.0, Docs, #9993)There’s now a more helpful error

The view transitions API has been sweeping the web development world lately, and for good reason. It streamlines the process of animating between two page states, which is especially useful for page transitions.However, until now, you couldn’t easily use this API in a SvelteKit app, since it was difficult to slot into the right place in the navigation lifecycle. SvelteKit 1.24 brought a new onNavigate lifecycle hook to make view transitions integration much easier – let’s dive in.How view transitions workYou can trigger a view transition by calling document.startViewTransition and passing a callback that updates the DOM somehow. For our purposes today, SvelteKit will update the DOM as the user navigates. Once the callback finishes, the browser will transition to the new page state — by default, it does a crossfade between the old and the new states.var document: DocumentMDN Referencedocument.startViewTransition(async () => {await const domUpdate: () => Promise<void>domUpdate(); // mock

Happy September y’all! With all the sneak peeks at what’s coming soon in Svelte 5, we thought it’d be best to look back at the last month to see what’s shipped and what the community is building with Svelte.Before we jump in, a warm welcome to the new Svelte Ambassadors: @cainux and @grischaerbe! Welcome to the crew ⛴️What’s new in Svelte & Language ToolssvelteHTML 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 SvelteKitURL is now accepted in the redirect function (1.23.0, Docs, #10570)Mistyped route filenames will now throw a warning (1.23.0, #10558)The new onNavigate lifecycle function enables view transitions - Check out the blog post for more info (1.24.0, Docs, #9605)But that’s just the new features! For all the patches and performance updates from this month, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter director

In 2019, Svelte 3 turned JavaScript into a reactive language. Svelte is a web UI framework that uses a compiler to turn declarative component code like this...App<script>let count = 0;function increment() {count += 1;}</script><button on:click={increment}>clicks: {count}</button><script lang="ts">let count = 0;function increment() {count += 1;}</script><button on:click={increment}>clicks: {count}</button>...into tightly optimized JavaScript that updates the document when state like count changes. Because the compiler can ‘see’ where count is referenced, the generated code is highly efficient, and because we’re hijacking syntax like let and = instead of using cumbersome APIs, you can write less code.A common piece of feedback we get is ‘I wish I could write all my JavaScript like this’. When you’re used to things inside components magically updating, going back to boring old procedural code feels like going from colour to black-and-white.Svelte 5 changes all that with runes, which unloc

Sveltekit 🧡 HacktoberfestWe’re excited to announce SvelteKit’s participation in this year’s Hacktoberfest! Hacktoberfest is a global event that takes place every October, during which developers are encouraged to contribute to open-source projects like SvelteKit. The goal is to foster a vibrant open-source community, celebrate shared knowledge, and make the world of coding more accessible to all. You can find other participating repositories by searching the hacktoberfest topic on github.Getting StartedThe first step is to register for Hacktoberfest. Once you’ve registered, any PRs submitted to Sveltekit will count towards your participation in the event!ContributingIf you need inspiration when looking for an issue to fix, check out the low hanging fruit, contributions-welcome, ready to implement, or documentation tags.It’s a good idea to communicate clearly and often about what you’re trying to solve or take on. You can do this by commenting on the issues you intend to take on. This ...

Svelte 5 isn’t out yet (you can, however, preview it now), but that doesn’t mean we don’t get a sneak peek! Most notably are 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 ToolsSvelte 4.2.1 was released with a bunch of fixes to HTML, CSS and sourcemap compilationThe latest version of the Svelte language tools enhances component references in the “Find All References” command, fixes a persistent issue with automated types going missing after restarting a project and adds fallback handling to auto-types (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, #9755)That’s all for the new features! If you’re looking for other patches and performan

Mark your calendars! Svelte Summit Fall is on November 11th. Join us on YouTube and in the Discord for hours of Svelte-focused fun 🎥Every month, maintainers within the Svelte ecosystem fix bugs, improve performance and bring new features to Svelte, SvelteKit and the tooling around them. This month’s releases brings an improved developer experience with better block folding, inferred types and configuration for use:enhance.Let’s take a closer look 👀...What’s new in Svelte & Language ToolsSvelte 4.2.2 cleans up a few element-specific features (Release Notes)Extensions 107.12.0 improves block folding for functions, if statements and more (Release Notes, PR)What’s new in SvelteKitRoute parameter types will now be inferred from the applicable matcher’s guard check ([email protected], Docs, #10755)The new invalidateAll boolean option lets you turn on and off the invalidateAll() form function within the enhance callback ([email protected], Docs, #9476)The output of the project creation wizard will now re...

Svelte Summit Fall 2023 was epic! Featuring talks from across the ecosystem and the launches from the core team of new Svelte Dev Tools, image optimization, and a preview version of Svelte 5.0! The whole talk can be found here (timestamps below):0:00 Hype music!18:20 Exploring Svelte DevTools - Ignatius B (4 minutes)25:27 How does SvelteKit fare as a SPA Framework - Henry Lie (25 minutes)53:00 enhanced:img - Ben McCann (6 minutes)1:03:44 inlang-paraglide JS for SvelteKit i18n - Samuel Stroschein (10 minutes)1:17:32 How Svelte & GraphQL plays well together - Jean-Yves Couet (31 minutes)1:53:10 svelte-ecosystem-ci - Dominik G (10 minutes)2:23:06 Svelte for Creative Development - Steven Stavrakis (10 minutes)2:35:33 Translating the docs - Romain I’Ourson (11 minutes)2:49:48 ENHANCE! - Paolo Ricciuti (25 minutes)3:18:25 Accessibility tips with Svelte solutions - Enrico Sacchetti (25 minutes)3:49:11 svelte@next - Rich Harris (18 minutes)Today is also the first day of Advent of Svelte: A Sve

Version 2.0 of SvelteKit, the official framework for building apps with Svelte, is now available. It is an incremental release that adds support for the newly-released Vite 5 along with a bevy of small improvements and one much-requested feature.If you’ve been paying close attention to Svelte in recent months, you’ll know that we’ve been hard at work on Svelte 5, which is possibly the most anticipated release in the project’s history. Upgrading to SvelteKit 2 will smooth the path for Svelte 5 when it is released in 2024, and we encourage all users to upgrade when you get a chance.We recommend updating to the most recent 1.x release first, along with Svelte 4, in order to address any deprecation warnings. Then, upgrade to SvelteKit 2 by running the automated migration tool:npx svelte-migrate sveltekit-2The migration guide has more details about what’s new.Shallow routingWay back in the mists of time — May, to be precise — we teased a new feature that allows you to associate state with a

Happy New Year! It’s been a busy month for the Svelte maintainers - with tons of new features dropping in the Svelte 5 preview and the release of SvelteKit 2!You can find all the new features in both projects below, along with a bunch of resources and sites built with Svelte in the Community Showcase.Let’s jump in...What’s new in SvelteKit (2.0 and more!)With its 2.0 release, SvelteKit is now more capable than ever. Be sure to check out the docs links in each update for more info on how to use each feature as well as the new Performance page - which explains how SvelteKit works to make your applications as performant as possible.resolvePath has been replaced by resolveRoute in $app/paths. Use it to populate a route ID with params to resolve a pathname (1.29.0, Docs, #11261)response.arrayBuffer() will now be inlined during SSR (1.30.0, Docs, #10535)SvelteKit 2.0.0 adds:untrack to load to opt-out of invalidation (Docs, #11311)shallow routing to create history entries without navigating (

Since SvelteKit 2.0 released late last year, there’s been a bunch of new features to make the Kit dev experience even better! Meanwhile the Svelte team has been hard at work making Svelte 5 a reality.In case you missed it, Rich also posted Tenets, “an attempt to articulate the Svelte philosophy — our bedrock principles, that guide our design decisions.”So let’s dive in to check out what’s new and see what the rest of the community has been up to...What’s new in SvelteKitThe client router is now tree shakeable (2.1.0, #11340)$env/static/public is now exposed in service workers (2.2.0, Docs, #10994)style-src-elem is now supported in environments with a Content Security Policy (2.2.1, Docs, #11562)The new reroute hook allows you to change how URLs are translated into routes (2.3.0, Docs, #11537)The read function is now available in the $app/server module - allowing you to read assets from the filesystem (2.4.0, Docs, #11649)Adapters can now emulate the prod environment for dev and preview

This month, the Svelte maintainers made a ton of progress on Svelte 5 and Rich Harris talked to Prismic about how the team is working on making the framework even better.Lots to showcase too... so let’s dive in!What’s new in SvelteAs you may already have heard, Svelte 5 is in preview. In the meantime, Svelte 4 (@latest) has had one bugfix. The Svelte 5 changelog has quite a few updates, though:breaking: $derived.call is now $derived.by (5.0.0-next.54, Docs, #10445)Destructuring derived object properties will now keep fine-grain reactivity (5.0.0-next.55, Docs, #10488)The new hydrate method makes hydration-related code treeshakeable (5.0.0-next.56, Docs, #10497)Nested CSS is now supported, along with better support for :is(...) and :where(...) (5.0.0-next.57, #10490)breaking: The client-side API has been simplified by removing createRoot, adjusting the mount / hydrate APIs and introducing unmount (5.0.0-next.58, Issue#9827, #10516)For all the bug fixes, chores and underlying work requir

Spring is just around the corner (for half the globe at least), which means Svelte Summit Spring is coming soon! The event will be streamed on the Svelte Society YouTube channel on April 27.Also, this month, a ton of new features have been merged into Svelte 5 to make it the best version of Svelte yet. We’ll get into them all below, so let’s jump right in!What’s new in SvelteSvelte 5 is in preview and gets closer to release every day. Below, you’ll find some highlights from its changelog:The new Map, Date and Set classes can now be imported from svelte/reactivity and used just like their native counterparts to fit into Svelte’s reactivity model (5.0.0-next.79, Docs, #10803, #10622, #10781)state/derived/props can be explicitly exported from components again (5.0.0-next.62, #10523)bind:value now allows for a dynamic type attribute - fixing issues with common input bindings (5.0.0-next.66, #10608)SSR HTML mismatch validation has been improved and provides clearer error messages (5.0.0-nex

Svelte 5 is now in the Release Candidate phase. This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped.It doesn’t mean that it’s ready for production, or that nothing will change between now and 5.0. But if you’ve held off on dabbling with Svelte 5 during the public beta phase, now is a great time to try it out. You can select the ‘Try the Svelte 5 preview’ option when starting a new SvelteKit project...npm create [email protected] you can add Svelte 5 to an existing project...npm install --save-dev [email protected] you can tinker in the Svelte 5 Preview website.I’m out of the loop. What’s Svelte 5?For the last several months, we’ve been hard at work rewriting Svelte from the ground up to be faster, easier to use and more robust, applying the lessons we’ve collectively learned from several years of building apps with Svelte.You can learn more about the n

Svelte Summit was last week - featuring a number of fantastic talks from across the community. In the final talk, What You Can Do For Your Framework, Rich Harris (with a little help from PuruVJ’s neoconfetti library) announced that Svelte 5 is now in the “Release Candidate”.Lots of pre-release changes to cover in this post and a host of community showcase items... so let’s dive in!Highlights from Svelte Summit Spring 2024Below, you’ll find links to all the talks in the livestream version of Svelte Summit.Simple and Sustainable web development in academic libraries with SvelteBuilding a SaaS module for SvelteKitIntro To LayerChartSpatial Programming with Threlte StudioConvex (Sponsored talk)Kitbook: Easily Build, Document, Inspect & Test Svelte ComponentsFullstack TestingWhat You Can Do For Your Framework - also covers a ton of the new features listed belowThese will all get broken up into more sharable (and rewatchable) videos over time, so make sure you subscribe to the Svelte Society

The maintainers have been hard at work getting the Svelte 5 Release Candidate ready for release. In this month’s newsletter, you’ll find highlights from the pre-release CHANGELOG and a host of items from our community showcase.Let’s dive in!What’s new in Sveltebind: is now disallowed on component exports in runes mode and has much better types to tell if a prop is $bindable (5.0.0-next.113, 114 and 125, Docs, #11238, #11225 and #11498)Tons of work on the migrate tool to make migrating to Svelte 5 syntax easier (5.0.0-next.116, 136 and 137, Docs, #11334, #11659, #11704)MathML is now supported (5.0.0-next.120, Docs, #11387)The Svelte Inspector is now supported (5.0.0-next.125, Docs, #11514)The $state.is rune lets you compare values or check if an object exists within a deeply reactive object/array (5.0.0-next.134, Docs, #11613)The rootDir compiler option makes filenames relative to simplify development in monorepos or complex folder structures (5.0.0-next.135, #11627)Community ShowcaseAp

This month, we got a bunch of new features in the Svelte 5 release candidate, Rich Harris explained to Prismic’s CEO how Svelte optimizes for vibes and Geoff Rich shared even more about this philosophy at CascadiaJS 2024.Let’s jump in!What’s new in SvelteBelow, you’ll find the highlights from the Svelte 5 release notes (now in Release Candidate):You can now declare props in runes mode more succinctly using let props = $props() (5.0.0-next.167, #12201)The new on import from svelte/events allows you to preserve the order in which event handlers are called in more situations (5.0.0-next.152, Docs, #11912)The Component type now represents the new shape of Svelte components (5.0.0-next.143, #11775)<svelte:document> has new activeElement and pointerLockElement bindings (5.0.0-next.150, #11879)<svelte:element>, CSS custom property wrappers and string normalization have all been simplified and made more performant (5.0.0-next.152, #11773, #11948, #11954, #11792, #11949)render, mount and hydrat

The ramp up to the Svelte 5 release has led to a bunch of huge improvements to both performance and customizability. Also in this month’s round-up: some minor SvelteKit updates and a return of the Svelte Dev Vlog.Let’s dive in!What’s new in SvelteBelow, you’ll find the highlights from the Svelte 5 release notes (currently in Release Candidate):Breaking: The names of the svelte/reactivity helpers have been updated to include a Svelte prefix (5.0.0-next.169, Docs #12248)Branch effects now have better DOM boundaries - reducing bugs in {#each} blocks and during DOM manipulation (5.0.0-next.171 and 5.0.0-next.182, #12215, #12258, #12383)Single-pass hydration has reduced DOM size and significantly improved hydration speed (5.0.0-next.179, #12335, #12339)Breaking: Transitions now play on mount by default (5.0.0-next.177, #12351)CSS can now be included in the <head> when the css: 'injected' compiler option is enabled. This makes it trivial to include styles when rendering things like emails an

A bunch of updates to Svelte dropped in the last few weeks, plus a few quality of life improvements in the Svelte language tools.Let’s take a look...What’s new in Svelte and Language Tools$state.frozen has been replaced with $state.raw (5.0.0-next.218, Docs, #12808)$state.is has been removed. RIP, little guy (#12916)svelte:options now lets you set the css: "inject" compiler option on a per-component basis (5.0.0-next.209, #12660)<svelte:component> is now unnecessary in runes mode and therefore is deprecated (5.0.0-next.203/217, #12646 and #12694):global is now allowed in more places - making it easier to use in <style> tags and fixing issues with Tailwind’s @apply (5.0.0-next.199, Docs, #12560)Svelte’s typescript definition generator that comes with @sveltejs/package will now warn when its diagnostics detect that a d.ts file was not generated ([email protected], #2428)You can now specify a tsconfig in emitDts - helpful when working in a monorepo ([email protected], #2454)Not covered in

It’s October! Which can only mean one thing... Svelte Summit Fall is only 19 days away! Stay up to date with the latest Svelte Summit news by subscribing to its official newsletter or follow along during the stream on the Discord.Thanks to the number of folks who have been trying the Svelte 5 release candidates, the maintainers have been hard at work in addressing bugs and implementing performance improvements for the upcoming release. This month, we’ll cover the most notable changes along with the many apps, resources and libraries that the community has created over the last few weeks.What’s new in SvelteHave you been wanting to migrate your project to Svelte 5? Want to test out the migration tool and give the team feedback? Then you should give the svelte-migrate tool a try! npx svelte-migrate svelte-5 is all you need to get started. If you run into any problems, please file an issue.Here’s what else is new...Legacy components can now be manually instantiated asynchronously with the

Launching Svelte 5 and the brand new sv CLI wasn’t enough: we’ve also released a brand new website. You’re looking at it.Up until now, we’ve maintained multiple different sites under the svelte.dev domain — the main site, for Svelte itself, along with kit.svelte.dev and learn.svelte.dev. This had some minor benefits, but was mostly a nuisance:inability to search across sitessubtly different navigationpotential for broken links (at build time, SvelteKit automatically validates that every internal link is correct, but links to other sites are a different matter)preferences such as dark mode are not shared between sitesnavigating between (for example) documentation and the tutorial involves a full page reloadFrom an implementation perspective, keeping multiple sites in sync proved to be a headache.Having everything under a single roof means you’ll have an easier time finding the information you need. Right now, the site includes documentation for Svelte and SvelteKit; soon, it will also c

After almost 18 months of development, comprising thousands of commits from dozens of contributors, Svelte 5 is finally stable.It’s the most significant release in the project’s history. Svelte 5 is a ground-up rewrite: your apps will be faster, smaller and more reliable. You’ll be able to write more consistent and idiomatic code. For newcomers to the framework, there’s less stuff to learn.Despite all that, Svelte is almost completely backwards-compatible with Svelte 4 — for the majority of users, the initial upgrade will be completely seamless:{"devDependencies": {"@sveltejs/vite-plugin-svelte": "^3.0.0","svelte": "^4","@sveltejs/vite-plugin-svelte": "^4.0.0","svelte": "^5",// …}}What is Svelte?Svelte is a framework for building user interfaces on the web. It uses a compiler to convert declarative component code, based on HTML, CSS and JavaScript, into tightly optimised JavaScript.Because the compiler shifts a lot of the work out of the browser and into npm run build, Svelte apps are

We’ve just released sv, a new Command Line Interface (CLI) for creating, enhancing, and upgrading Svelte projects.One of the most common question we hear is “how do I set up Tailwind on my new project?”. Tailwind has SvelteKit documentation, but it lists eight steps. While the community-led svelte-add project could automate the process, few knew about it.Introducing sv at Svelte Summit Fall 2024Now, we’re offering that functionality via our own CLI, directly within the project creation screen. And not just for Tailwind — we have built-in add-ons for formatting, linting, testing, setting up databases and auth and i18n and more. Just run npx sv create and follow the prompts:$ npx sv create┌ Welcome to the Svelte CLI! (v0.5.8)│◇ Where would you like your project to be created?│ my-new-app│◇ Which template would you like?│ SvelteKit minimal│◇ Add type checking with Typescript?│ Yes, using Typescript syntax│◆ Project created│◆ What would you like to add to your project? (use arrow keys / sp

In case you missed the announcement post, the brand new omnisite or the maintainers shipping it LIVE during Svelte Summit... Svelte 5 is out!Also announced at Svelte Summit was SvelteHack 2024: A Svelte Hackathon (with not-so-svelte prizes). The submission period ends January 9 and only projects started after October 18th are eligible. So get those $s ready and start hacking!Since the release of Svelte 5, there’s already been one minor version to introduce a couple of helpful features. We’ll dive into those - along with a number of updates across the CLI, SvelteKit and more - in this month’s roundup...What’s new in SvelteIf you’ve only recently migrated to Svelte 5, check out the last few months of updates for all the features that have gone into this release. For this month, you’ll see some marked -next.XXX. These changes were in the 5.0 release.Snippets can now be used to fill slots (5.0.0-next.262, #13427)hidden until-found and beforematch are now available on DOM elements (5.0.0-ne

Last December, Svelte Society presented an advent calendar’s worth of festive Svelte-themed code challenges.This year, we’re turning it around: you get to relax while we take on a challenge. We’ve set ourselves a goal of releasing one thing a day from here until Christmas, whether it’s a new feature in Svelte or SvelteKit or an improvement to the website.Follow @svelte.dev and @sveltesociety.dev and check back every day to see what we’ve been cooking up.Day 1: error boundariesThis is a long-awaited and much-requested feature, that allows you to isolate and recover from errors that occur during rendering.docstutorialDay 2: each without asIf you just want to render something in an {#each ...} block n times, and don’t care about the value, you can now omit the as part.docsdemoDay 3: exported snippetsYou can now export snippets from a component’s <script module>, for use in other components, as long as those snippets don’t reference anything belonging to the component instance.docsdemoDay

I can’t believe it’s already the last newsletter of the year! So much has happened in the Svelte community - from two great Svelte Summits to the release Svelte 5 🎉As we look forward to the next year and watch the Svelte team do 24 features in 24 days, let’s dive into what’s new in the past month...What’s new in SvelteThe bugfix versions in 5.1.x and 5.2.x addressed a bunch of issues reported by the community. So if you’re noticing anything weird, make sure you upgrade to the latest version and, as always, check out the CHANGELOG for all the bug fixes.The features since last month can be found below:ContentVisibilityAutoStateChangeEvent has been added to element definitions (5.2.5, MDN Docs, #14373)What’s new in SvelteKit, Svelte CLI and Language ToolsisActionFailure is a new helper method to check if a variable is an instanceof ActionFailure - helpful for debugging parsing of user input (2.8.0, #12878)const load = ... declarations will now be typed automatically (svelte2tsx-0.7.23, #...