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
@ -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
@ -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.
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