DEV Community

loading...
Cover image for Svelte JS - Open-Source Starters

Svelte JS - Open-Source Starters

sm0ke profile image Sm0ke Updated on ・5 min read

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.
The automated workflow used to generate the apps was presented before here on Dev, in a series of articles:


Thank you! Content provided by AppSeed - App Generator.


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 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, open-source admin dashboard coded in Tailwind and Svelte.


Svelte Digital Agency

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

Features & Links

Svelte Digital Agency - Open-Source Web App coded in Svelte.

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
Enter fullscreen mode Exit fullscreen mode

Svelte Coderstats

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

Features & Links

Svelte Coderstats - Open-Source Web App coded in Svelte.

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
Enter fullscreen mode Exit fullscreen mode

Svelte Dashboard SB Admin

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

Features & Links

Svelte Dashboard SB Admin - Open-Source Admin Dashboard coded in Svelte.

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
Enter fullscreen mode Exit fullscreen mode

Blog Articles


Links & Resources


Thank you! <('_')>

Discussion (3)

pic
Editor guide
Collapse
trakode profile image
Trakode

It is very instructive, I see that slender is not too far from the others. It seems a little better besides I speak about it in the top 4 of the best frontend JavaScript frameworks.

Collapse
coldestheart profile image
Ilia (COLD) • Edited

Its a misconception, svelte have not a good documentaion, and there is not fully stable uikits and plugins.Yes, svelte have few inspirational ideas, but for real and serious projects its so far from ok, maybe after few years but not in 2020...

For example you can look at github.com/CalvinWalzel/awesome-sv...
And compare it with vue or react awesome

Collapse
sm0ke profile image
Sm0ke Author

Yep, Svelte is a super young .. but promising tech. The article gives credit from this perspective.
Let's hope, Svelte will get more traction and reach soon the production level .
P.S. Thanks for reading the article!