Skip to content
Open
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
108 changes: 106 additions & 2 deletions documentation/docs/01-introduction/02-getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
title: Getting started
---

We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:
We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/).

Create a new project with your preferred package manager:

**npm:**

```sh
npx sv create myapp
Expand All @@ -11,6 +15,35 @@ npm install
npm run dev
```

**yarn:**

```sh
yarn dlx sv create myapp
cd myapp
yarn install
yarn dev
```

**pnpm:**

```sh
pnpm dlx sv create myapp
cd myapp
pnpm install
pnpm dev
```

**bun:**

```sh
bunx sv create myapp
cd myapp
bun install
bun dev
```

See the [CLI docs](../cli) for more information about the `sv` command line tool.

Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.

## Alternatives to SvelteKit
Expand All @@ -21,12 +54,83 @@ You can also use Svelte directly with Vite by running `npm create vite@latest` a

There are also [plugins for other bundlers](/packages#bundler-plugins), but we recommend Vite.

## Installing Svelte in an existing project

If you have an existing project for example via [Inertia](https://inertiajs.com/) and want to add Svelte to it, you can install Svelte and [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) manually.

First, install Svelte and the Vite plugin:

**npm:**

```sh
npm install --save-dev --save-exact svelte @sveltejs/vite-plugin-svelte
```

**yarn:**

```sh
yarn add --dev --exact svelte @sveltejs/vite-plugin-svelte
```

**pnpm:**

```sh
pnpm add --save-dev --save-exact svelte @sveltejs/vite-plugin-svelte
```

**bun:**

```sh
bun add --dev --exact svelte @sveltejs/vite-plugin-svelte
```

Then, add the Svelte plugin to your `vite.config.js`:

```js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
plugins: [
svelte({
/* plugin options */
})
]
});
```

## Editor tooling

The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/collection/editor-support-c85c080efc292a34) and tools as well.

You can also check your code from the command line using [`sv check`](https://github.com/sveltejs/cli).
You can also check your code from the command line using [`sv check`](https://github.com/sveltejs/cli) to check for Unused CSS
Svelte A11y hints, JavaScript/TypeScript compiler errors.

Alternatively, you can install `svelte-check` (powers `sv check`) directly:

**npm:**

```sh
npm install --save-dev --save-exact svelte-check
```

**yarn:**

```sh
yarn add --dev --exact svelte-check
```

**pnpm:**

```sh
pnpm add --save-dev --save-exact svelte-check
```

**bun:**

```sh
bun add --dev --exact svelte-check
```

## Getting help

Expand Down