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, 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

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 - the official website
• Getting started with Svelte - hosted by Mozilla
• What is Svelte - 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

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 - product page
• 👉 Svelte Admin Template - Notus Demo

Svelte Digital Agency

Open-source web app made by using Svelte and Sapper.

Features & Links

• JS Framework: Svelte, Sapper
• Design Credit: Nixalar
• MIT License
• Svelte Digital Agency - Souce Code
• Svelte Digital Agency - LIVE Demo

Build from sources

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

$ # 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

Open-source web app made by using Svelte and Sapper.

Features & Links

• JS Framework: Svelte, Sapper
• UI Kit: Bulma CSS
• Design Credit: Robert C. Soriano
• MIT License
• Svelte Coderstats - Souce Code
• Svelte Coderstats - LIVE Demo

Build from sources

$ # 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

Open-source admin dashboard made by using Svelte and Sapper, inspired from SB-Admin Dashboard.

Features & Links

• JS Framework: Svelte, Sapper
• UI Kit: SvelteStrap - Bootstrap4 components for Svelte v3
• Design Credit: SB Admin by StartBootstrap
• MIT License
• Svelte Dashboard SB Admin - Souce Code
• Svelte Dashboard SB Admin - LIVE Demo

Build from sources

$ # 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.
• Why SvelteJS may be the best framework for new web devs
• Svelte 3 Tutorial: A JS App with That Magic Framework You Heard About
• Exploring Sapper + Svelte: A quick tutorial

Links & Resources

• Svelte JS - the official website
• Svelte JS - the public repository (Github)
• What is Svelte JS - a comprehensive tutorial
• Sapper - Sapper is a framework for building web applications, based on Svelte.

Thank you! <('_')>