Skip to main content

What’s new in Svelte: July 2026

SvelteKit config in vite.config, explicit env vars and new declaration tag support across the toolchain

Dani Sandoval

This month brought a real shift in how SvelteKit projects are configured. You can now define your SvelteKit config directly inside vite.config.js and skip svelte.config.js entirely. We also got the first preview of explicit environment variables, which will eventually replace $env/* modules in SvelteKit 3.

On top of that, the language tools and the sv CLI both caught up with Svelte's new {const ...} declaration tags, so the whole toolchain is now in sync.

Let's dive in!

What's new in SvelteKit

  • You can now pass your SvelteKit config directly to the Vite plugin, so a separate svelte.config.js is no longer required, as a preview of how Kit 3 will require config to live in vite.config.js (2.62.0, Docs, #15944)
  • Experimental explicit environment variables let you declare and type your env vars in one place, as a preview of how $env/* will work in SvelteKit 3 (2.63.0, Docs, #15934)
  • Remote function commands can now receive File objects directly, so you can upload files without manually wrapping them in FormData (2.64.0, Docs, #15978)
  • Remote queries can now refresh other queries, making it easier to invalidate related data after a mutation (2.65.0, Docs, #16012)
  • Prerendered .md and .mdx files are now precompressed alongside HTML, JS and CSS for faster delivery (2.66.0, Docs, #15893)
  • SvelteKit now warns when boolean fields in remote form schemas are not marked optional, which is a common cause of silent submit failures (2.66.0, Docs, #15804)
  • The new prerender.handleInvalidUrl option lets you customize how invalid URLs found during crawling are reported (2.67.0, Docs, #16088)
  • RemoteFormEnhanceInstance and RemoteFormEnhanceCallback are now exported types, so you can type your custom enhance callbacks directly (2.68.0, Docs, #15816)
  • Submitted submit fields now keep their value in the form action payload, which makes multi-button forms easier to handle on the server (2.68.0, Docs, #15979)

For all the features and bugfixes that landed this month, check out the SvelteKit / Adapter CHANGELOGs.

What's new in the Svelte CLI and Language Tools

  • The Svelte CLI demo template now uses the new {const ...} declaration tag, so newly created projects show off the latest Svelte syntax (sv@0.16.0, #1110)
  • sv create now scaffolds projects against @sveltejs/kit ^2.62.0 and moves the Svelte config into the Vite plugin by default (sv@0.16.0, #1119)
  • A new experimental add-on lets you toggle experimental flags and opt into @next versions directly from the CLI (sv@0.16.0, #1121)
  • The drizzle and better-auth add-ons now support SvelteKit's new explicit environment variables (sv@0.16.0, #1122)
  • New defineEnv and svelteConfig helpers in @sveltejs/sv-utils make it easier to read and edit a project's Svelte config from add-ons (sv-utils@0.3.0)
  • The Svelte language server, svelte-check and svelte2tsx now understand Svelte 5's {const ...} declaration tags (svelte-language-server@0.18.1/svelte-check@4.5.0/svelte2tsx@0.7.56, #3033)
  • CSS completions now work inside nested <style> tags (svelte-language-server@0.18.1, #3022)
  • The language tools can now read Svelte config straight from vite.config.js/ts, matching SvelteKit's new Vite plugin configuration (svelte-language-server@0.18.2/svelte-check@4.6.0, #3031)
  • svelte-check now accepts a --config option to point at a custom config file location (svelte-check@4.7.0, #3066)
  • Experimental tsgo (TypeScript Go) support is now available in svelte-check for faster type checking on large codebases (svelte-check@4.7.0, #3036)

Want to dive deeper? Check out the Svelte CLI and language-tools releases. For all the minor changes and bugfixes that came out in the Svelte compiler this month, you can read the full Svelte CHANGELOG.

Community Showcase

Apps & Sites built with Svelte

  • COLOR LAB is a browser-based color science instrument that explores RGB gamuts as 3D solids and builds perceptual theme ramps with WCAG checks
  • Cometline is a local desktop AI companion built with SvelteKit, Electron and a Go agent core
  • Disc is a database for users, with a built-in Svelte dashboard
  • EZResumes is a fully client-side, local-first resume builder that lets you customize layouts with Typst
  • Graphgen is a node-based generative art tool for 2D line art
  • Lunarr is an open source self-hosted media server and Plex alternative
  • Pixel Snapper is a desktop tool that snaps near-pixel-art images onto perfect grids, built with SvelteKit, Tauri and Rust by the makers of the previously featured Sprite Fusion (GitHub)
  • SuperMCP is a native macOS app that gives Claude, Cursor, Windsurf and other AI tools access to Reddit, X, LinkedIn and more via the local Chrome cookies
  • darkly is an open source art program built with Rust and Svelte

Spotted in the Wild

  • Guild Wars 3 - the official ArenaNet site for the upcoming MMORPG
  • Obama Foundation - the new site for the recently opened Obama Presidential Center
  • On a more meta note, sveltekit.fyi scans Bluesky for sites built with SvelteKit and showcases them, in the spirit of nuxt.fyi

Learning Resources

Featuring Svelte Contributors and Ambassadors

This Week in Svelte

To Read

Libraries, Tools & Components

Frameworks and Tooling

  • Mochi is a performance-focused alternative to SvelteKit from Stanislav Khromov that uses islands architecture and programmatic routing on Bun
  • pottz bundles your SvelteKit app, the Bun runtime and a webview into a single executable so you can ship it as a native desktop app
  • Svelte TV renders Svelte components to WebGL instead of the DOM for use on smart TVs and low-memory webviews
  • TabSpot is a declarative keyboard navigation engine for hierarchical and grid interfaces

UI Components and Visual Effects

  • neobrutalism-svelte is a UI library inspired by neobrutalism, balsamiq and lo-fi aesthetics
  • @winkintel/bootstrap-svelte brings Bootstrap 5's grid, utilities and components to Svelte 5 with full TypeScript support
  • Tan Compose is a lightweight library for building declarative reusable web components
  • Svaul is a zero-dependency drawer component for Svelte 5, modernizing vaul-svelte
  • Svelte Animated Icon ships close to 10,000 animated icon variants across five icon libraries using the Web Animations API (GitHub)
  • FlareCharts is a runes-native charting library for Svelte 5 with built-in CSS theming and accessibility
  • Svelte Video Editor is a host-agnostic timeline-based video editor component for Svelte 5 with multi-track clips, scrubbing and ripple edits

Developer Tools and Plugins

  • tsv is a Rust-based formatter and parser for TypeScript, Svelte and CSS, with a linter on the roadmap
  • svelte-docinfo extracts JSON documentation from TypeScript and Svelte modules using the TypeScript compiler
  • VS Code Live Theme Editor is a VSIX extension for editing every token and color in any VS Code, Cursor or TRAE theme
  • sveltekit-cloudflare-do automatically exports Durable Objects to the Cloudflare Worker bundle generated by @sveltejs/adapter-cloudflare

That's it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!