Best Practices

Storing reusable modules, and content

src/lib is conventionally used to store components, utilities, images, and other reusable modules.

The $lib alias is a shorthand to easily reference this directory in your imports, which helps keep your code clean and organized.

$lib Alias: SvelteKit provides the $lib alias to reference the src/lib directory easily. Instead of using relative paths like ../../../lib, you can simply use $lib.

import MyComponent from '$lib/components/MyComponent.svelte';
import { utilityFunction } from '$lib/utils';

Directory Structure:

src/
├── lib/
│   ├── components/
│   │   └── MyComponent.svelte
│   └── utils/
│       └── helper.js
├── routes/
│   └── index.svelte
└── app.html