What is $lib in SvelteKit all about?

In SvelteKit typically you place code which is shared by multiple pages in a src/lib directory. You might include Svelte components as well as utility functions here. $lib is just an alias for src/lib. In fact, in the config it is defined as an absolute path. When importing code from src/lib, instead of a relative path, you can use $lib. The advantage here is that code looks cleaner when importing from a deeply nested folder. On top it saves you having to count the number of '../' patterns in your path is correct after refactoring. In fact you can just copy a $lib import statement to any other file and have it just work!

Where is the $lib alias defined in SvelteKit config?

$lib is defined in the tsconfig.json paths object. This is included by default at .svelte-kit/tsconfig.json file. It is included in default config even if you are not using TypeScript.

How can you define your own custom import aliases like $lib in SvelteKit?

You can edit the jsconfig.json file in the root folder of your project to add your own, custom, import aliases. We have seen you need to edit tsconfig.json instead if you are working in TypeScript. Either way, just define the baseUrl as "." and then add a paths object which defines the paths your aliases reference. Once defined, VSCode will recognise these aliases.

SvelteKit $lib Import Aliases # SvelteKit $lib Import Aliases #

SvelteKit $lib Import Aliases #

Published: 3 months ago

3 minute read Gunning Fog Index: 4.7

Content by Rodney

📚 SvelteKit `$lib` #

SvelteKit code often includes the SvelteKit $lib import alias. If you are new to SvelteKit, you might have seen this and wondered what it does. In the video, you will see SvelteKit $lib is nothing more that an alias for the src/lib folder. Typically you will add a components folder in here as well as folders for other code which you want to share between pages and endpoints. You might also have asked yourself where $lib is defined within the SvelteKit config files as well as how you can create your own custom aliases. In this short video we tackle all of that as well as look at a quick example.

If that’s what you wanted to know then hit play on the video! After that, don’t forget to check links below. You will also find a handy code snippet, below, referenced in the video. Drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.

📹 SvelteKit `$lib`: Video #

SvelteKit $lib Import Aliases

🗳 Poll #

What were you most familiar with before trying SvelteKit?

🖥 SvelteKit `$lib`: Code #

Defining your own aliases in `jsconfig.json` / `tsconfig.json` #

Here we define a custom $tests alias which maps to the tests directory:

jsconfig.json or tsconfig.json

json

    1 {
2   "compilerOptions": {
3     "baseUrl": ".",
4     "paths": {
5       "$tests": [
6         "tests"
7       ],
8       "$tests/*": [
9         "tests/*"
10       ]
11     },
12   },
13   "extends": "./.svelte-kit/tsconfig.json"
14 }

🔗 SvelteKit `$lib`: Links #

10 tips for getting started with SvelteKit ,
Automated accessibility testing with Playwright in SvelteKit ,
Twitter handle: @askRodney .

🏁 SvelteKit `$lib`: Summary #

What is $lib in SvelteKit all about? #: In SvelteKit typically you place code which is shared by multiple pages in a src/lib directory. You might include Svelte components as well as utility functions here. $lib is just an alias for src/lib. In fact, in the config it is defined as an absolute path. When importing code from src/lib, instead of a relative path, you can use $lib. The advantage here is that code looks cleaner when importing from a deeply nested folder. On top it saves you having to count the number of '../' patterns in your path is correct after refactoring. In fact you can just copy a $lib import statement to any other file and have it just work!
Where is the $lib alias defined in SvelteKit config? #: $lib is defined in the tsconfig.json paths object. This is included by default at .svelte-kit/tsconfig.json file. It is included in default config even if you are not using TypeScript.
How can you define your own custom import aliases like $lib in SvelteKit? #: You can edit the jsconfig.json file in the root folder of your project to add your own, custom, import aliases. We have seen you need to edit tsconfig.json instead if you are working in TypeScript. Either way, just define the baseUrl as "." and then add a paths object which defines the paths your aliases reference. Once defined, VSCode will recognise these aliases.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee .

Just dropped a new video explaining what the

$lib import aliases in ❤️ SvelteKit are all about.

Hopefully, you'll find it useful if you are new to Svelte.

Let me know what else you struggle(d) with learning Svelte and SvelteKit 🧑🏽‍🎓https://t.co/dPZuk7XDu2
— Rodney (@askRodney) April 11, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab . I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.