@ -53,7 +53,7 @@ Want to learn more about how to get started, what's different compared to Sapper
- [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte.
- [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte.
- [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) is a Sapper project that can run on a Netlify function.
- [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) is a Sapper project that can run on a Netlify function.
**Looking for a particular starter?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates/)
**Looking for a particular starter?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates)
@ -68,7 +68,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
- [Kahi UI](https://github.com/novacbn/kahi-ui) is a Svelte-first UI kit with Dark Mode built-in.
- [Kahi UI](https://github.com/novacbn/kahi-ui) is a Svelte-first UI kit with Dark Mode built-in.
- [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.
- [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates) for more templates, adders and adapters from across the Svelte ecosystem.
@ -77,7 +77,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
- [svelte-ionic-starter](https://github.com/Zettexe/svelte-ionic-starter) a project template for Svelte + Ionic + CapacitorJS apps with live reload and iOS/Android build targets
- [svelte-ionic-starter](https://github.com/Zettexe/svelte-ionic-starter) a project template for Svelte + Ionic + CapacitorJS apps with live reload and iOS/Android build targets
- [demo-sveltekit-sanity](https://github.com/stephane-vanraes/demo-sveltekit-sanity/) is a starter kit for SvelteKit and Sanity, an open source React CMS
- [demo-sveltekit-sanity](https://github.com/stephane-vanraes/demo-sveltekit-sanity/) is a starter kit for SvelteKit and Sanity, an open source React CMS
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates) for more templates, adders and adapters from across the Svelte ecosystem.
@ -89,7 +89,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
- [focus-svelte](https://github.com/chanced/focus-svelte) is a focus trap for Svelte with zero dependencies
- [focus-svelte](https://github.com/chanced/focus-svelte) is a focus trap for Svelte with zero dependencies
- [filedrop-svelte](https://github.com/chanced/filedrop-svelte) is a file dropzone action & component for Svelte
- [filedrop-svelte](https://github.com/chanced/filedrop-svelte) is a file dropzone action & component for Svelte
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates) for more templates, adders and adapters from across the Svelte ecosystem.
@ -83,6 +83,6 @@ To see all updates to Svelte and SvelteKit, check out the [Svelte](https://githu
- [@svelte-drama/suspense](https://www.npmjs.com/package/@svelte-drama/suspense) is a Svelte component that implements the core idea of React's `<Suspense>`. Also check out [SWR for Svelte](https://www.npmjs.com/package/@svelte-drama/swr) to make refetching even easier.
- [@svelte-drama/suspense](https://www.npmjs.com/package/@svelte-drama/suspense) is a Svelte component that implements the core idea of React's `<Suspense>`. Also check out [SWR for Svelte](https://www.npmjs.com/package/@svelte-drama/swr) to make refetching even easier.
- [sveltekit-adapter-browser-extension](https://github.com/antony/sveltekit-adapter-browser-extension) is an adapter for SvelteKit which turns your app into a cross-platform browser extension
- [sveltekit-adapter-browser-extension](https://github.com/antony/sveltekit-adapter-browser-extension) is an adapter for SvelteKit which turns your app into a cross-platform browser extension
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more tools, templates, adders and adapters from across the Svelte ecosystem.
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates) for more tools, templates, adders and adapters from across the Svelte ecosystem.
Looking for more Svelte goodness? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
Looking for more Svelte goodness? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
@ -35,7 +35,7 @@ Svelte began accepting donations via [OpenCollective](https://opencollective.com
## Partnerships
## Partnerships
Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated](https://github.com/dependents/node-precinct/pull/88) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/packages#svelte-kit-adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.
Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated](https://github.com/dependents/node-precinct/pull/88) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/packages?category=sveltekit-adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.
We’ve also been working closely with the [Vite](https://vitejs.dev) team to iron out SSR issues uncovered by SvelteKit users. Vite is the build tool that makes the SvelteKit developer experience possible, and thanks to hard work from a contributor base that includes representatives of multiple frameworks, recent releases have solved almost all the issues we’ve been tracking as SvelteKit 1.0 release blockers.
We’ve also been working closely with the [Vite](https://vitejs.dev) team to iron out SSR issues uncovered by SvelteKit users. Vite is the build tool that makes the SvelteKit developer experience possible, and thanks to hard work from a contributor base that includes representatives of multiple frameworks, recent releases have solved almost all the issues we’ve been tracking as SvelteKit 1.0 release blockers.
@ -34,7 +34,7 @@ Today is the one year anniversary of SvelteKit’s launch and we’re excited to
In the past year, we’ve seen a number of open source projects like [Storybook](https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md), [Tailwind](https://tailwindcss.com/docs/guides/sveltekit), and [Playwright](https://playwright.dev/docs/test-components) officially support SvelteKit as well as a number of commercial entities like [Prismic](https://prismic.io/blog/svelte-sveltekit-tutorial), [Sentry](https://docs.sentry.io/platforms/javascript/guides/sveltekit/), and [InLang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs).
In the past year, we’ve seen a number of open source projects like [Storybook](https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md), [Tailwind](https://tailwindcss.com/docs/guides/sveltekit), and [Playwright](https://playwright.dev/docs/test-components) officially support SvelteKit as well as a number of commercial entities like [Prismic](https://prismic.io/blog/svelte-sveltekit-tutorial), [Sentry](https://docs.sentry.io/platforms/javascript/guides/sveltekit/), and [InLang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs).
SvelteKit continues to benefit from the Svelte community, which has developed numerous great UI libraries like [Skeleton](https://www.skeleton.dev/), [shadcn-svelte](https://www.shadcn-svelte.com/), [Melt UI](https://melt-ui.com/), [Flowbite Svelte](https://flowbite-svelte.com/), [daisyUI](https://daisyui.com/), and [many more](https://sveltesociety.dev/packages#design-system). And [our first ever hackathon](https://hack.sveltesociety.dev/) saw winners from amazing Svelte projects like [Superforms](https://superforms.rocks/), [Threlte](https://threlte.xyz/), and [SvelteLab](https://www.sveltelab.dev/).
SvelteKit continues to benefit from the Svelte community, which has developed numerous great UI libraries like [Skeleton](https://www.skeleton.dev/), [shadcn-svelte](https://www.shadcn-svelte.com/), [Melt UI](https://melt-ui.com/), [Flowbite Svelte](https://flowbite-svelte.com/), [daisyUI](https://daisyui.com/), and [many more](https://sveltesociety.dev/packages?category=design-system). And [our first ever hackathon](https://hack.sveltesociety.dev/) saw winners from amazing Svelte projects like [Superforms](https://superforms.rocks/), [Threlte](https://threlte.xyz/), and [SvelteLab](https://www.sveltelab.dev/).
Finally, we’ve also launched major supporting projects like a new Svelte DevTools ([chrome web store](https://chromewebstore.google.com/detail/svelte-devtools/kfidecgcdjjfpeckbblhmfkhmlgecoff), [GitHub](https://github.com/sveltejs/svelte-devtools), [talk](https://www.sveltesummit.com/2023/fall/exploring-svelte-devtools)), Svelte Inspector ([docs](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/inspector.md), [talk](https://www.sveltesummit.com/2023/spring/svelte-inspector-update)), and experimental image optimization support ([docs](https://kit.svelte.dev/docs/images), [talk](https://www.sveltesummit.com/2023/fall/enhanced-img)).
Finally, we’ve also launched major supporting projects like a new Svelte DevTools ([chrome web store](https://chromewebstore.google.com/detail/svelte-devtools/kfidecgcdjjfpeckbblhmfkhmlgecoff), [GitHub](https://github.com/sveltejs/svelte-devtools), [talk](https://www.sveltesummit.com/2023/fall/exploring-svelte-devtools)), Svelte Inspector ([docs](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/inspector.md), [talk](https://www.sveltesummit.com/2023/spring/svelte-inspector-update)), and experimental image optimization support ([docs](https://kit.svelte.dev/docs/images), [talk](https://www.sveltesummit.com/2023/fall/enhanced-img)).
If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/faq#is-there-a-router) as well.
If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/faq#is-there-a-router) as well.
Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/packages#bundler-plugins) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR.
Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/packages?category=bundler-plugins) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR.
Typically, you won't interact with the Svelte compiler directly, but will instead integrate it into your build system using a bundler plugin. The bundler plugin that the Svelte team most recommends and invests in is [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). The [SvelteKit](https://kit.svelte.dev/) framework provides a setup leveraging `vite-plugin-svelte` to build applications as well as a [tool for packaging Svelte component libraries](https://kit.svelte.dev/docs/packaging). Svelte Society maintains a list of [other bundler plugins](https://sveltesociety.dev/packages#bundler-plugins) for additional tools like Rollup and Webpack.
Typically, you won't interact with the Svelte compiler directly, but will instead integrate it into your build system using a bundler plugin. The bundler plugin that the Svelte team most recommends and invests in is [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). The [SvelteKit](https://kit.svelte.dev/) framework provides a setup leveraging `vite-plugin-svelte` to build applications as well as a [tool for packaging Svelte component libraries](https://kit.svelte.dev/docs/packaging). Svelte Society maintains a list of [other bundler plugins](https://sveltesociety.dev/packages?category=bundler-plugins) for additional tools like Rollup and Webpack.
Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you.
Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you.
A number of [official and community-maintained preprocessing plugins](https://sveltesociety.dev/packages#preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
A number of [official and community-maintained preprocessing plugins](https://sveltesociety.dev/packages?category=preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
You can write your own preprocessor using the `svelte.preprocess` API.
You can write your own preprocessor using the `svelte.preprocess` API.
@ -65,7 +65,7 @@ There will be a blog post about this eventually, but in the meantime, check out
## Is there a UI component library?
## Is there a UI component library?
There are several UI component libraries as well as standalone components. Find them under the [design systems section of the components page](https://sveltesociety.dev/packages#design-system) on the Svelte Society website.
There are several UI component libraries as well as standalone components. Find them under the [design systems section of the components page](https://sveltesociety.dev/packages?category=design-system) on the Svelte Society website.
## How do I test Svelte apps?
## How do I test Svelte apps?
@ -100,7 +100,7 @@ If you need hash-based routing on the client side, check out [svelte-spa-router]
[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/packages#routers).
You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/packages?category=routers).
## Can I tell Svelte not to remove my unused styles?
## Can I tell Svelte not to remove my unused styles?
@ -10,7 +10,7 @@ First, you'll need to integrate Svelte with a build tool. We recommend using [Sv
npm create svelte@latest myapp
npm create svelte@latest myapp
```
```
There are also a number of [community-maintained integrations](https://sveltesociety.dev/packages#bundler-plugins).
There are also a number of [community-maintained integrations](https://sveltesociety.dev/packages?category=bundler-plugins).
Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process.
Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process.