Frequently Asked Questions

  I'm new to Svelte. Where should I start?

We think the best way to get started is playing through the interactive Tutorial. Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.

Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.

  Where can I get support?

If your question is about certain syntax, the API page is a good place to start.

Stack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with Svelte or ask your own!

There are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. Our Discord or the Reddit channel are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit.

  Is there a tool to automatically format my .svelte files?

You can use prettier with the prettier-plugin-svelte plugin.

  How do I document my components?

In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.

<script>
  /** What should we call the user? */
  export let name = 'world';
</script>

<!--
@component
Here's some documentation for this component.
It will show up on hover.

- You can use markdown here.
- You can also use code blocks here.
- Usage:
  ```tsx
  <main name="Arethra">
  ```
-->
<main>
  <h1>
    Hello, {name}
  </h1>
</main>

Note: The @component is necessary in the HTML comment which describes your component.

  What about TypeScript support?

You need to install a preprocessor such as svelte-preprocess. You can run type checking from the command line with svelte-check.

To declare the type of a reactive variable in a Svelte template, you should use the following syntax:

let x: number;
$: x = count + 1;

To import a type or interface make sure to use TypeScript's type modifier:

import type { SomeInterface } from './SomeFile';

You must use the type modifier because svelte-preprocess doesn't know whether an import is a type or a value — it only transpiles one file at a time without knowledge of the other files and therefore can't safely erase imports which only contain types without this modifier present.

  Does Svelte scale?

There will be a blog post about this eventually, but in the meantime, check out this issue.

  Is there a UI component library?

There are several UI component libraries as well as standalone components. Find them under the components section of the Svelte Society website.

  How do I test Svelte apps?

We recommend trying to separate your view logic from your business logic. Data transformation or cross component state management is best kept outside of Svelte components. You can test those parts like you would test any JavaScript functionality that way. When it comes to testing the components, it is best to test the logic of the component and remember that the Svelte library has its own tests and you do not need to test implementation details provided by Svelte.

There are a few approaches that people take when testing, but it generally involves compiling the component and mounting it to something and then performing the tests. You essentially need to create a bundle for each component you're testing (since svelte is a compiler and not a normal library) and then mount them. You can mount to a JSDOM instance. Or you can use a real browser powered by a library like Playwright, Puppeteer, or Cypress.

Some resources for getting started with unit testing:

  Is there a router?

The official routing library is SvelteKit, which is currently in beta. SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.

However, you can use any router lib you want. A lot of people use page.js. There's also navaid, which is very similar. And universal-router, which is isomorphic with child routes, but without built-in history support.

If you prefer a declarative HTML approach, there's the isomorphic svelte-routing library and a fork of it called svelte-navigator containing some additional functionality.

If you need hash-based routing on the client side, check out svelte-spa-router or abstract-state-router.

Routify is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.

  How can I update my components written in Svelte v2?

svelte-upgrade isn't fully working for v2->v3 yet, but it's close.

  Is Svelte v2 still available?

New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.

The documentation is still available here.

  How do I do hot module reloading?

We recommend using SvelteKit, which supports HMR out of the box and is built on top of Vite and svelte-hmr. There are also community plugins for rollup and webpack.