Skip to content

Sync cli docs #1323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 25, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: drizzle
---

[Drizzle ORM](https://orm.drizzle.team/) is a TypeScript ORM offering both relational and SQL-like query APIs, and which is serverless-ready by design.

## Usage

```bash
npx sv add drizzle
```

## What you get

- a setup that keeps your database access in SvelteKit's server files
- an `.env` file to store your credentials
- compatibility with the Lucia auth add-on
- an optional Docker configuration to help with running a local database

## Options

### database

Which database variant to use:

- `postgresql` — the most popular open source database
- `mysql` — another popular open source database
- `sqlite` — file-based database not requiring a database server

```bash
npx sv add --drizzle=postgresql
```

### client

The SQL client to use, depends on `database`:

- For `postgresql`: `postgres.js`, `neon`,
- For `mysql`: `mysql2`, `planetscale`
- For `sqlite`: `better-sqlite3`, `libsql`, `turso`

```bash
npx sv add --drizzle=postgresql,postgres.js
```

Drizzle is compatible with well over a dozen database drivers. We just offer a few of the most common ones here for simplicity, but if you'd like to use another one you can choose one as a placeholder and swap it out for another after setup by choosing from [Drizzle's full list of compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps).

### docker

Whether to add Docker Compose configuration. Only available for [`database`](#Options-database) `postgresql` or `mysql`

- `docker` - generates `docker-compose.yml`
- `no-docker` - does not generate docker config

```bash
npx sv add --drizzle=postgresql,postgres.js,docker
```
19 changes: 19 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/10-eslint.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: eslint
---

[ESLint](https://eslint.org/) finds and fixes problems in your code.

## Usage

```bash
npx sv add eslint
```

## What you get

- the relevant packages installed including `eslint-plugin-svelte`
- an `eslint.config.js` file
- updated `.vscode/settings.json`
- configured to work with TypeScript and `prettier` if you're using those packages
27 changes: 27 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: lucia
---

An auth setup following [the Lucia auth guide](https://lucia-auth.com/).

## Usage

```bash
npx sv add lucia
```

## What you get

- an auth setup for SvelteKit and Drizzle following the best practices from the Lucia auth guide
- optional demo registration and login pages

## Options

### demo

Whether to include demo registration and login pages.

```bash
npx sv add --lucia=demo
```
16 changes: 16 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/20-mdsvex.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: mdsvex
---

[mdsvex](https://mdsvex.pngwn.io) is a markdown preprocessor for Svelte components - basically MDX for Svelte. It allows you to use Svelte components in your markdown, or markdown in your Svelte components.

## Usage

```bash
npx sv add mdsvex
```

## What you get

- mdsvex installed and configured in your `svelte.config.js`
39 changes: 39 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: paraglide
---

[Paraglide from Inlang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) is a compiler-based i18n library that emits tree-shakable message functions with small bundle sizes, no async waterfalls, full type-safety, and more.

## Usage

```bash
npx sv add paraglide
```

## What you get

- Inlang project settings
- paraglide Vite plugin
- SvelteKit `reroute` and `handle` hooks
- `text-direction` and `lang` attributes in `app.html`
- updated `.gitignore`
- an optional demo page showing how to use paraglide

## Options

### availableLanguageTags

The languages you'd like to support specified as IETF BCP 47 language tags.

```bash
npx sv add --paraglide=en,es
```

### demo

Whether to generate an optional demo page showing how to use paraglide.

```bash
npx sv add --paraglide=demo
```
19 changes: 19 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/30-playwright.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: playwright
---

[Playwright](https://playwright.dev) browser testing.

## Usage

```bash
npx sv add playwright
```

## What you get

- scripts added in your `package.json`
- a Playwright config file
- an updated `.gitignore`
- a demo test
18 changes: 18 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/35-prettier.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: prettier
---

[Prettier](https://prettier.io) is an opinionated code formatter.

## Usage

```bash
npx sv add prettier
```

## What you get

- scripts in your `package.json`
- `.prettierignore` and `.prettierrc` files
- updates to your eslint config if you're using that package
17 changes: 17 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/40-storybook.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: storybook
---

[Storybook](https://storybook.js.org/) is a frontend component workshop.

## Usage

```bash
npx sv add storybook
```

## What you get

- `npx storybook init` run for you from the same convenient `sv` CLI used for all other add-ons
- [Storybook for SvelteKit](https://storybook.js.org/docs/get-started/frameworks/sveltekit) or [Storybook for Svelte & Vite](https://storybook.js.org/docs/get-started/frameworks/svelte-vite) with default config provided, easy mocking of many SvelteKit modules, automatic link handling, and more.
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: sveltekit-adapter
---

[SvelteKit adapters](/docs/kit/adapters) allow you to deploy your site to numerous platforms. This add-on allows you to configure officially provided SvelteKit adapters, but a number of [community-provided adapters](https://www.sveltesociety.dev/packages?category=sveltekit-adapters) are also available.

## Usage

```bash
npx sv add sveltekit-adapter
```

## What you get

- the chosen SvelteKit adapter installed and configured in your `svelte.config.js`

## Options

### adapter

Which SvelteKit adapter to use:

- `auto` — [`@sveltejs/adapter-auto`](/docs/kit/adapter-auto) automatically chooses the proper adapter to use, but is less configurable
- `node` — [`@sveltejs/adapter-node`](/docs/kit/adapter-node) generates a standalone Node server
- `static` — [`@sveltejs/adapter-static`](/docs/kit/adapter-static) allows you to use SvelteKit as a static site generator (SSG)
- `vercel` — [`@sveltejs/adapter-vercel`](/docs/kit/adapter-vercel) allows you to deploy to Vercel
- `cloudflare` — [`@sveltejs/adapter-cloudflare`](/docs/kit/adapter-cloudflare) allows you to deploy to Cloudflare
- `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) allows you to deploy to Netlify

```bash
npx sv add --sveltekit-adapter=node
```
32 changes: 32 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: tailwindcss
---

[Tailwind CSS](https://tailwindcss.com/) allows you to rapidly build modern websites without ever leaving your HTML.

## Usage

```bash
npx sv add tailwindcss
```

## What you get

- Tailwind setup following the [Tailwind for SvelteKit guide](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)
- Tailwind Vite plugin
- updated `app.css` and `+layout.svelte` (for SvelteKit) or `App.svelte` (for non-SvelteKit Vite apps)
- integration with `prettier` if using that package

## Options

### plugins

Which plugin to use:

- `typography` — [`@tailwindcss/typography`](https://github.com/tailwindlabs/tailwindcss-typography)
- `forms` — [`@tailwindcss/forms`](https://github.com/tailwindlabs/tailwindcss-forms)

```bash
npx sv add --tailwindcss=typography
```
18 changes: 18 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/55-vitest.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: vitest
---

[Vitest](https://vitest.dev/) is a Vite-native testing framework.

## Usage

```bash
npx sv add vitest
```

## What you get

- the relevant packages installed and scripts added to your `package.json`
- client/server-aware testing setup for Svelte in your Vite config file
- demo tests
4 changes: 4 additions & 0 deletions apps/svelte.dev/content/docs/cli/30-add-ons/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
title: Add-ons
---