Can we customize file names in SvelteKit’s folder-based routing?

[sbscan]

Svelte simplifies reactivity, Bun makes development faster than ever, and Cursor helps me like crazy. My developer experience is sky-high… except for one thing: navigating within my project.

I love SvelteKit, but folder-based routing sometimes feels a bit overwhelming when navigating within my project. Seeing +page.svelte, +layout.svelte, and +page.server.js everywhere feels repetitive, especially when switching between open tabs.

Instead of enforcing these filenames, would it be possible to name the files based on the route itself?

For example for the /dashboard route:

• +dashboard.svelte instead of +page.svelte

• +dashboard.layout.svelte instead of +layout.svelte

• +dashboard.server.ts instead of +page.server.ts

This could make project navigation easier without changing how SvelteKit handles routing.

Has anyone tried something like this? Would it be technically possible with some config adjustments, or is this something that would require a core change?

[brunnerh]

The current routing mechanism cannot be changed via a configuration and as far as I know the Svelte team has no intention to change that. Having a strict pattern like this leads to a more uniform and contribution-friendly ecosystem. Documenting and finding features becomes easier because everything can be associated with specific files.

If you use VS Code, tab names can be configured to reflect the route names, e.g.

"workbench.editor.customLabels.patterns": {
	"**/routes/{+server,+layout,+page,+error}.{svelte,ts,server.ts,js,server.js}":
		"/ (${filename}.${extname})",
	"**/routes/*/{+server,+layout,+page,+error}.{svelte,ts,server.ts,js,server.js}":
		"/${dirname} (${filename}.${extname})",
	"**/routes/*/*/{+server,+layout,+page,+error}.{svelte,ts,server.ts,js,server.js}":
		"/${dirname(1)}/${dirname} (${filename}.${extname})",
	"**/routes/*/*/*/{+server,+layout,+page,+error}.{svelte,ts,server.ts,js,server.js}":
		"/${dirname(2)}/${dirname(1)}/${dirname} (${filename}.${extname})",
	"**/routes/**/*/*/*/*/{+server,+layout,+page,+error}.{svelte,ts,server.ts,js,server.js}":
		"…/${dirname(2)}/${dirname(1)}/${dirname} (${filename}.${extname})",
},

[sbscan]

I know the trick, but not only for tabs—for example, search results. Also, this looks very primitive to me. Don’t get me wrong, I’m a big fan of Svelte and Rich. We all know simplicity is the new king; that’s why people use or want to use Svelte. And these file names are what all devs look at all day to navigate. I consider this feature mostly for newcomers. Personally, I navigate with symbols most of the time.

[brunnerh]

If you navigate by symbol, the name should matter even less, though.

[sbscan]

I come from machine coding; I can survive in any condition. I’m asking on behalf of the community. I’m sure many people have this difficulty but perhaps have just gotten used to it.