SvelteKit config in vite.config, explicit env vars and new declaration tag support across the toolchain
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 invite.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 inFormData
(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
andRemoteFormEnhanceCallback
are now exported types, so you can type your customenhance
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
andbetter-auth
add-ons now support SvelteKit’s new explicit environment variables (sv@0.16.0, #1122) - New
defineEnv
andsvelteConfig
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
andsvelte2tsx
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
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 insvelte-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
- Agentic Engineering with Svelte by Paolo Ricciuti is a new YouTube series from Mainmatter that documents building a real production Svelte app with AI agents (8 episodes so far, with an AMA on July 15th)
- My Favorite Framework Just Got Better by Joy of Code walks through realtime data in SvelteKit using remote functions, live queries and generators
This Week in Svelte
To Read
- Picking Svelte in 2026: the honest tradeoff nobody tells you by Dmitrii Bormotov
- Wuchale: One Year of Compile-Time i18n by Kidus Adugna
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 👋🏼!
Facts Only
* SvelteKit configuration can now be passed directly to the Vite plugin, removing the need for a separate svelte.config.js.
* Explicit environment variables are previewed, aiming to replace $env/* in SvelteKit 3.
* Remote function commands can receive File objects directly, allowing file uploads without manual FormData wrapping.
* Remote queries can refresh other queries after a mutation.
* Prerendered .md and .mdx files are precompressed alongside HTML, JS, and CSS for faster delivery.
* SvelteKit warns when boolean fields in remote form schemas are not marked optional, preventing silent submit failures.
* A new prerender.handleInvalidUrl option allows customization of how invalid URLs found during crawling are reported.
* Submitted submit fields retain their value in the form action payload for easier multi-button handling on the server.
* The Svelte CLI demo template uses the new {const ...} declaration tag.
* Add-ons like drizzle and better-auth support explicit environment variables.
* The Svelte language server now understands Svelte 5's {const ...} declaration tags, allowing config reading directly from vite.config.js/ts.
Executive Summary
SvelteKit updates in July 2026 focus on streamlining configuration and improving the developer tooling ecosystem. A significant change allows users to define SvelteKit configuration directly within vite.config.js, eliminating the need for a separate svelte.config.js file. Additionally, explicit environment variables are previewed, setting the stage for future improvements in environment variable management. The language tools and the Svelte CLI have been synchronized with Svelte's new `{const ...}` declaration tags, ensuring the entire toolchain remains consistent.
New features include remote function commands that can receive File objects directly and support for precompressed `.md` and `.mdx` files for faster delivery. Other updates involve warnings for missing optional boolean fields in remote form schemas, customization options for URL handling during crawling, and improvements to how submitted form fields handle values on the server. The ecosystem also sees new tools like Mochi, pottz, and Svelte TV, alongside significant language server upgrades that understand new syntax.
Full Take
The evolution described reflects a systemic drive toward tighter integration and increased compile-time safety across the entire Svelte development stack. The move to consolidate configuration into vite.config.js signals an intent to reduce configuration drift, which is a common source of brittle project setups. Furthermore, the introduction of explicit environment variable handling, though experimental, points toward a desire for more type-safe and predictable build environments, addressing a long-standing pain point in JavaScript tooling where environmental setup is often implicit or relies on string interpolation that can lead to runtime errors.
The synchronization between the Svelte compiler's new syntax (`{const ...}`) and the language tools demonstrates a commitment to making novel features immediately consumable by developers, establishing a cohesive state for the entire ecosystem rather than patching disparate parts of the toolchain. This pattern—where internal language shifts cascade across compilers, CLI tools, and language servers—suggests a shift from incremental feature additions to holistic architectural alignment. The focus on precompression for assets also indicates a prioritization of runtime performance through build-time optimization.
The implication here is that complexity management is being pushed upstream into the build and compilation phases. When configuration and environment handling are unified and validated across the toolchain, the cognitive load shifts from managing disparate configuration files to focusing on application logic, which enhances developer agency. The remaining questions concern the velocity at which this consolidation can be reliably adopted by the wider community without creating new synchronization bottlenecks in the transition phase, and how effectively these advanced features mitigate the risks associated with complex state management in modern web applications.
Sentinel — Human
This analysis reads like a summary of a technical development newsletter, characterized by structured updates and cited external references, suggesting a human author synthesizing developer announcements.