Svelte JS - Open-Source Starters
Tags: svelte, opensource, appseed
Published: 2020-03-23 12:47:05

---
title: Svelte JS - Open-Source Starters
published: true
description: A curated list with resources (starters, blog articles) related to Svelte JS Framework.
cover_image: https://raw.githubusercontent.com/app-generator/static/master/products/svelte-digital-agency-screen.png
tags: svelte, opensource, appseed
---
Hello Coders,

This article presents a curated list with resources (starters, blog articles ..) related to the new wonderboy Javascript Framework - **Svelte JS**. 
I must say from the beginning that I'm not a JavaScript guru and I'm using the starters as a knowledge base for **[AppSeed](https://appseed.us)**, a platform that uses flat/lifeless HTML to generate stable UI-ready Web Apps in different patterns and programming languages.*Thanks for reading!* 

---

## [What is Svelte JS](https://docs.appseed.us/content/what-is/svelte-js/)

**Svelte** is a JS Framework that provides a new approach to code user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Svelte provides a different approach to building web apps than some of the other frameworks covered in this module. While frameworks like React and Vue do the bulk of their work in the user's browser while the app is running, Svelte shifts that work into a compile step that happens only when you build your app, producing highly-optimized vanilla JavaScript.

I will not insist on Svelte being super documented in many places. Some Svelte-related links that might help you get started: 

- [Svelte JS](https://svelte.dev/) - the official website
- [Getting started with Svelte](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started) - hosted by Mozilla
- [What is Svelte](https://docs.appseed.us/content/what-is/svelte-js) - a short introduction provided by AppSeed

---

## Svelte JS Starters

Being such a young technology is quite hard at this moment to find usable starters to play with or to accelerate your learning curve. The list will be updated periodically with new items discovered by me or suggested in the comments by the Dev community. 

--- 

## [Svelte Notus Admin Template](https://www.creative-tim.com/product/notus-svelte?AFFILIATE=128200)

Notus Admin Template is an open-source product provided by Creative-Tim on top of Svelte and Tailwind CSS. It features multiple HTML and Svelte elements and it comes with dynamic components for Svelte. It is based on Tailwind Starter Kit by Creative Tim, and it is built with both presentation pages, and pages for an admin dashboard.

- 👉 [Svelte Admin Template - Notus](https://www.creative-tim.com/product/notus-svelte?AFFILIATE=128200) - product page
- 👉 [Svelte Admin Template - Notus Demo](https://demos.creative-tim.com/notus-svelte/?AFFILIATE=128200)

![Svelte Admin Template - Notus, open-source admin dashboard coded in Tailwind and Svelte.](https://raw.githubusercontent.com/ui-themes/svelte-admin-template-notus/master/media/svelte-admin-template-notus-screen-product.jpg)

---

## [Svelte Digital Agency](https://svelte-digital-agency.appseed.us/)

Open-source web app made by using [Svelte](https://svelte.dev/) and [Sapper](https://sapper.svelte.dev/).

### Features & Links

- JS Framework: [Svelte](https://svelte.dev/), [Sapper](https://sapper.svelte.dev/)
- Design Credit: **Nixalar**
- **MIT License**
- [Svelte Digital Agency](https://github.com/app-generator/svelte-digital-agency) - Souce Code
- [Svelte Digital Agency](https://svelte-digital-agency.appseed.us/) - LIVE Demo

<br />

![Svelte Digital Agency - Open-Source Web App coded in Svelte.](https://raw.githubusercontent.com/app-generator/static/master/products/svelte-digital-agency-screen-1.png)

---

> Build from sources

To see the app running locally, we need a stable Node.js environment and GIT command tool.   

```bash
$ # Clone the source code
$ git clone https://github.com/app-generator/svelte-digital-agency.git
$ cd svelte-digital-agency
$ 
$ # Install modules
$ yarn 
$
$ # Start the app in development mode
$ yarn dev
$
$ # Production build
$ yarn build
```

---

## [Svelte Coderstats](https://svelte-coderstats.appseed.us/)

Open-source web app made by using [Svelte](https://svelte.dev/) and [Sapper](https://sapper.svelte.dev/).

### Features & Links

- JS Framework: [Svelte](https://svelte.dev/), [Sapper](https://sapper.svelte.dev/)
- UI Kit: [Bulma CSS](https://bulma.io/)
- Design Credit: **Robert C. Soriano**
- **MIT License**
- [Svelte Coderstats](https://github.com/app-generator/svelte-coderstats) - Souce Code
- [Svelte Coderstats](https://svelte-coderstats.appseed.us/) - LIVE Demo

<br />

![Svelte Coderstats - Open-Source Web App coded in Svelte.](https://raw.githubusercontent.com/app-generator/static/master/products/svelte-coderstats-intro.gif)

<br />

> Build from sources

```bash
$ # Clone the source code
$ git clone https://github.com/app-generator/svelte-coderstats.git
$ cd svelte-coderstats
$ 
$ # Install modules
$ yarn 
$
$ # Start the app in development mode
$ yarn dev
$
$ # Production build
$ yarn build
```

---

## [Svelte Dashboard SB Admin](https://svelte-dashboard-sb-admin.appseed.us/)

Open-source admin dashboard made by using [Svelte](https://svelte.dev/) and [Sapper](https://sapper.svelte.dev/), inspired from **SB-Admin Dashboard**.

### Features & Links

- JS Framework: [Svelte](https://svelte.dev/), [Sapper](https://sapper.svelte.dev/)
- UI Kit: [SvelteStrap](https://github.com/bestguy/sveltestrap) - Bootstrap4 components for Svelte v3
- Design Credit: [SB Admin](https://startbootstrap.com/templates/sb-admin/) by **StartBootstrap**
- **MIT License**
- [Svelte Dashboard SB Admin](https://github.com/app-generator/svelte-dashboard-sb-admin) - Souce Code
- [Svelte Dashboard SB Admin](https://svelte-dashboard-sb-admin.appseed.us/) - LIVE Demo

<br />

![Svelte Dashboard SB Admin - Open-Source Admin Dashboard coded in Svelte.](https://raw.githubusercontent.com/app-generator/static/master/products/svelte-dashboard-sb-admin-screen.png)

<br />

> Build from sources

```bash
$ # Clone the source code
$ git clone https://github.com/app-generator/svelte-dashboard-sb-admin.git
$ cd svelte-dashboard-sb-admin
$ 
$ # Install modules
$ yarn 
$
$ # Start the app in development mode
$ yarn dev
$
$ # Production build
$ yarn build
```

---

## Blog Articles

- [I created the exact same app in React and Svelte. Here are the differences.](https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-svelte-here-are-the-differences-c0bd2cc9b3f8)
- [Why SvelteJS may be the best framework for new web devs](https://dev.to/bholmesdev/why-sveltejs-may-be-the-best-framework-for-new-web-devs-205i)
- [Svelte 3 Tutorial: A JS App with That Magic Framework You Heard About](https://snipcart.com/blog/svelte-js-framework-tutorial)
- [Exploring Sapper + Svelte: A quick tutorial](https://blog.logrocket.com/exploring-sapper-svelte-a-quick-tutorial/)

---

### Links & Resources

- [Svelte JS](https://svelte.dev/) - the official website
- [Svelte JS](https://github.com/sveltejs/svelte) - the public repository (Github)
- [What is Svelte JS](https://docs.appseed.us/what-is/svelte-js/) - a comprehensive tutorial
- [Sapper](https://sapper.svelte.dev/) - Sapper is a framework for building web applications, based on Svelte.

--- 

> Thank you! [<('_')>](https://twitter.com/Sm0keDev)