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.

  Are there any video courses?

Rich Harris, the creator of Svelte, taught a course:

There are also a couple of third-party courses:

Note that Udemy very frequently has discounts over 90%.

  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. Find them under the code section of the Svelte Community website.

  How do I test Svelte apps?

We don't have a good answer to this yet, but it is a priority. 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 Puppeteer if you need a real browser, or you can use a tool like Cypress. There is an example of this in the Sapper starter template.

  Is there a router?

You can use any router lib you want. A lot of people use page.js. There's also navaid, which is very similar.

If you prefer a declarative HTML approach, there's svelte-routing.

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

For filesystem-based routing, you can take a look at Routify.

For an official solution, there's nothing that's simply a routing library. There is, however, the official Sapper framework, a Next.js-style application framework built on Svelte, which includes its own filesystem-based routing.

  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?

Use the community plugins for rollup and webpack.