> Canonical URL: https://codingcat.dev/post/make-pathing-easier-with-aliases-in-sveltekit

# Make Pathing Easier with Aliases in SvelteKit

✏️ Blog PostNovember 5, 2021[![](/logos/tags/svelte-symbol-light.svg)![](/logos/tags/svelte-symbol-dark.svg)Svelte](/topic/svelte)[![](/logos/tags/sveltekit-symbol-light.svg)![](/logos/tags/sveltekit-symbol-dark.svg)SvelteKit](/topic/sveltekit)[![](/logos/tags/vite-symbol-light.svg)![](/logos/tags/vite-symbol-dark.svg)Vite](/topic/vite)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai)

# Make Pathing Easier with Aliases in SvelteKit

![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/519a1c72b7a3bee30d02a44395e4dec6aa3f5dd2-1920x1080.png?w=1920&q=82&fit=max&auto=format)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)

If you haven't heard about SvelteKit yet, go checkout the beautiful site over at [kit.svelte.dev](https://svelte.dev/docs/kit). SvelteKit is a component framework similar to React and Vue with one key difference, there is no virtual DOM. Svelte is a compiler that builds itself away into a sleek and fast end user experience. If you haven't tried Svelte or SvelteKit before, you can check out my quick intro [tutorial](https://www.youtube.com/watch?v=fOD_3iSiwTQ) where we build a blog in 30 minutes 🤯

Links:

TLDR: To setup an alias add the following lines to the `svelte.config.js`. For the code editor you are using to understand the alias, we also need to add to the `jsconfig.json` paths with the aliases you want to create.

Copied! 🐾

```
//svelte.config.js
import path from 'path';
const config = {
	kit: {
		target: '#svelte',
		// add from here, plus the import path from 'path'
		vite: {
			resolve: {
				alias: {
					// these are the aliases and paths to them
					'@components': path.resolve('./src/lib/components'),
					'@lib': path.resolve('./src/lib'),
					'@utils': path.resolve('./src/lib/utils')
				}
			}
		}
	}
};
export default config;
```

Copied! 🐾

```
// jsconfig.json
{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			// name and path to aliases
			"@components": ["src/lib/components"],
			"@lib": ["src/lib"],
			"@utils": ["src/lib/utils"]
		}
	},
	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}
```

## Default Starter

To start a new SvelteKit project run `npm init svelte@next app-name` into the terminal where you want the folder to live. Change directory into your new app, `cd app-name` and run `npm i` to install the dependencies. Out of the box SvelteKit provides a `$lib` alias setup for the `src/lib` folder and a number of modules are available from `$app` and `$service-worker`. Outside of those, it is up to us to set up our own aliases and preferences on how to use them. These all use the `$` syntax to use it, however, we are able to change the lib folder to `@` or other symbol if preferred.

## Change default alias

To update the default `$lib` alias to `@lib`, we need to tell vite that we want to use it by updating the `svelte.config.js` and the alias will work in our application. For the code editor to understand the alias, we need to edit the `jsconfig.json` file. Inside the `svelte.config.js` by default we see this setup.

Copied! 🐾

```
/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// hydrate the  element in src/app.html
		target: '#svelte'
	}
};

export default config;
```

Inside of the kit property, we need to add a vite config for the aliases we are setting up. I prefer the `@` symbol and will show how to setup the `@lib`, `@components`, and `@utils` aliases. We need to import the included path module from node at the top and add the vite property under the kit property. The new `svelte.config.js` will look like this.

Copied! 🐾

```
//svelte.config.js
import path from 'path';
const config = {
	kit: {
		target: '#svelte',
		// add from here, plus the import path from 'path'
		vite: {
			resolve: {
				alias: {
					// these are the aliases and paths to them
					'@components': path.resolve('./src/lib/components'),
					'@lib': path.resolve('./src/lib'),
					'@utils': path.resolve('./src/lib/utils')
				}
			}
		}
	}
};
export default config;
```

Next, we also need to set them up inside the `jsconfig.json` file. By default that looks like this.

Copied! 🐾

```
{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			// here is the default $lib setup by SvelteKit
			"$lib/*": ["src/lib/*"]
		}
	},
	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}
```

As you can see, the default `$lib` is added to this config already. We need to update that and add the paths for our other two aliases. The updated file will look like this.

Copied! 🐾

```
{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@components": ["src/lib/components"],
			"@lib": ["src/lib"],
			"@utils": ["src/lib/utils"]
		}
	},
	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}
```

Under paths we have added the `@components`, updated the `$lib` to `@lib`, and added `@utils` with the corresponding paths.

## Using the aliases

Now we need to use the aliases inside of a file. The skeleton starter doesn't come with any folders outside of the routes folder for the routes of the application. If you chose this option, you can simply add the `lib` folder inside of the `src` folder to use the `@lib` alias. The other paths and aliases we setup are nested inside the lib folder. Add a `components` folder and `utils` folder inside of the lib folder. The folder structure should look like this.

Copied! 🐾

```
src
  - lib
    - components
    - utils
  - routes
```

Now any files created inside of `lib`, `components`, or `utils` can be imported using the alias rather than having to type out the absolute path, like so.

And that's it 🥳 now you can use all of the aliases we created or create more of your own. I'm [@brittneypostma](https://twitter.com/BrittneyPostma) on Twitter if you have more questions or just want to chat about Svelte 😃 Cheers!

## Resources, Links & Official Documentation

- [**Svelte & SvelteKit Documentation:**](https://svelte.dev/docs) Runes, compiler internals, and full-stack SvelteKit routing

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Integrating Storybook with SvelteKit**](/post/integrating-storybook-with-sveltekit): Brittney walks through how to get Storybook working in a new SvelteKit project.
- [**Simplyfing SvelteKit View Transitions with Paolo Ricciuti**](/podcast/cwcc-1-3-svelte-view-transitions): sveltekit-view-transitions offers a straightforward approach for implementing these transitions without complexity, aiming to enhance the user interface with sm...
- [**Slicing Up SvelteKit with Prismic’s New Slice Machine**](/podcast/3-21-slicing-up-sveltekit-with-prismic-slice-machine): Sam joins the podcast to talk about his journey to Prismic and to give an in depth look at Slice Machine.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Make Pathing Easier with Aliases in SvelteKit?

Pathing can be a pain, make it easier by using aliases!. Make Pathing Easier with Aliases in SvelteKit explores practical patterns for Svelte in modern software engineering. Throughout this post, Brittney Postma breaks down real-world implementation details for Svelte so developers can apply these patterns directly in production.

### How do you implement Svelte best practices in production?

When adopting Svelte in a production stack, start by validating your configuration against the [**Svelte & SvelteKit Documentation**](https://svelte.dev/docs) (Runes, compiler internals, and full-stack SvelteKit routing). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Make Pathing Easier with Aliases in SvelteKit walkthrough and find related code resources?

You can explore the complete write-up and code examples right here on CodingCat.dev, and subscribe to the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly video tutorials. For a deeper dive into Svelte, check out our related guide: [**Integrating Storybook with SvelteKit**](/post/integrating-storybook-with-sveltekit).

✏️ Visual Architecture Diagram

## how this post connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Make Pathing Easier with Aliases in SvelteKit✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Make Pathing Easier with Aliases in SvelteKit: start with Make Pathing Easier wi, implement Hands-On Implementation, and ship to production.AAA Contrast Verified▶ Watch on @CodingCatDev YouTubeRelated Course & Video

## Watch the Related Video Deep Dive: Cloudflare Agents, Durable Objects & Stateful Workflows in TypeScript

Build stateful, long-running AI agents and resilient multi-step workflows using the Cloudflare Agents SDK, Durable Objects with embedded SQLite, WebSockets hibernation, and Workflows.

[View Full Page →](/course/cloudflare-agents-durable-workflows-typescript)![](https://cdn.sanity.io/images/hfh83o0w/production/093f286587d2720f2a0908e4149bbfcb29cf409f-1376x768.png?rect=6,0,1365,768&w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=0GrZo2jxbUo&list=PLR0ZSOt97grA)

## related deep dives.

[All Blog Posts→](/blog)[![Impeccable: Automated Design Review & Polish for AI UI and Motion](https://cdn.sanity.io/images/hfh83o0w/production/d398e67f5c5ec25fb4da89237f46b9ea7755ec01-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/impeccable-automated-design-critique)November 4, 2026[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai)[![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design](/topic/design)

### [Impeccable: Automated Design Review & Polish for AI UI and Motion](/course/impeccable-automated-design-critique)

Stop shipping generic AI slop. Integrate Paul Bakaus's Impeccable design review rules to enforce W3C tokens, typographic hierarchy, and tactile chalkboard aesthetics.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection](https://cdn.sanity.io/images/hfh83o0w/production/b144a4ce077ac03d081ed66396a7cffebbcdb24f-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/chrome-devtools-mcp-visual-agent-loops)November 4, 2026[![](/logos/tags/react-native-symbol-light.svg)![](/logos/tags/react-native-symbol-dark.svg)React Native](/topic/react-native)[![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js](/topic/threejs)

### [Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection](/course/chrome-devtools-mcp-visual-agent-loops)

Give your AI agent eyes inside the browser. Use Chrome DevTools MCP so your agent inspects its own rendered video frames, WebGL canvases, and DOM layouts before exporting.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)