> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Svelte

In this document, you will learn how to build a Svelte component library using Rslib. You can check out Svelte related example projects in [Examples](https://github.com/rstackjs/rstack-examples/tree/main/rslib).

## Create Svelte project

You can use `create-rslib` to create a project with Rslib + Svelte. Just execute the following command:


```sh [npm]
npm create rslib@latest
```

```sh [yarn]
yarn create rslib
```

```sh [pnpm]
pnpm create rslib@latest
```

```sh [bun]
bun create rslib@latest
```

Then select `Svelte` when prompted to "Select template".

## Use Rslib in an existing project

For developing Svelte components, you need to set the [target](/config/rsbuild/output.md#outputtarget) to `"web"` in `rslib.config.ts`. This is crucial because Rslib sets `target` to `"node"` by default, which is different from Rsbuild's default target value.

To compile Svelte (`.svelte` files), you need to register the [@rsbuild/plugin-svelte](https://rsbuild.rs/plugins/list/plugin-svelte) plugin. This plugin integrates [svelte-loader](https://github.com/sveltejs/svelte-loader) internally and will automatically add the necessary configurations for Svelte build.

For example, register in `rslib.config.ts`:

```ts title="rslib.config.ts"
import { defineConfig } from '@rslib/core';
import { pluginSvelte } from '@rsbuild/plugin-svelte'; // [!code highlight]

export default defineConfig({
  lib: [
    // ...
  ],
  // [!code highlight:4]
  output: {
    target: 'web',
  },
  plugins: [pluginSvelte(/** options here */)],
});
```

For more configuration options, refer to the [@rsbuild/plugin-svelte documentation](https://rsbuild.rs/plugins/list/plugin-svelte).

## Declaration files

::: note

Svelte declaration files are generated by [`svelte2tsx`](https://www.npmjs.com/package/svelte2tsx), so [lib.dts](/config/lib/dts.md) / [lib.redirect.dts](/config/lib/redirect.md#redirectdts) / [lib.banner.dts](/config/lib/banner.md#bannerdts) / [lib.footer.dts](/config/lib/footer.md#footerdts) are not effective in Svelte projects.

:::

Rslib provides a plugin example for generating types in Svelte projects: [svelteDtsPlugin](https://github.com/web-infra-dev/rslib/blob/main/packages/create-rslib/template-svelte-ts/scripts/rslib-plugin-svelte-dts.ts). The plugin calls the `emitDts` method provided by [svelte2tsx](https://www.npmjs.com/package/svelte2tsx) after build to generate declaration files for `.svelte` files.

If you create a Svelte TypeScript project with `create-rslib`, this plugin is already included in the template.

For an existing project, you can use it like this:

```ts title="rslib.config.ts"
import { svelteDtsPlugin } from './scripts/rslib-plugin-svelte-dts';

export default {
  plugins: [svelteDtsPlugin()],
};
```

`svelteDtsPlugin` passes the following options through to the [svelte2tsx](https://www.npmjs.com/package/svelte2tsx) [emitDts](https://github.com/sveltejs/language-tools/blob/master/packages/svelte2tsx/src/emitDts.ts) config:

- `declarationDir`: The output directory for declaration files. Defaults to `./dist`.
- `libRoot`: The source directory to emit declaration files for. Defaults to `./src`.
- `tsconfig`: The tsconfig path used for declaration generation. Defaults to [source.tsconfigPath](/config/rsbuild/source.md#sourcetsconfigpath).
- `svelteShimsPath`: The path to the svelte2tsx shims type file. Defaults to `svelte2tsx/svelte-shims-v4.d.ts`.

If you need type checking, install the [svelte-check](https://www.npmjs.com/package/svelte-check) npm package and add a `check` command to `package.json`:

```json title="package.json"
{
  "scripts": {
    "check": "svelte-check"
  },
  "devDependencies": {
    "svelte-check": "^4.7.6"
  }
}
```