Svelte Web component framework


Svelte is a low level Web component framework that is truly reactive, fast, compact, and helps accessibility.

Svelte is a compiler so you write 40% less code (more declarative) and only ship features you use.



You can create a client side web app using Svelte as is, bundled with rollup (written by Svelte’s creator), webpack, or webify etc., or you can use it within Sapper.

Sapper adds routing to the capabilities of Svelte. It runs server side but works with SAFE because you can export to a static site if you follow certain practices and don’t need to use different routes for different users (which should be fine with SAFE). It works well in SAFE Browser with hot reloading and the debugger.

Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

Unlike single-page apps, Sapper doesn’t compromise on SEO, progressive enhancement or the initial load experience — but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel. - Sapper website

SAFE Svelte Demo

I’ve created svelte project based on the SAFE Web App Tutorial, with UI taken from the 7gui’s CRUD example.

Download the app and see how to implement Svelte with the SAFE API.



Learning Svelte is a pleasure because it seems very suitable for my uses (client side web apps on SAFE), very logical and straightforward, capable, and has excellent documentation, tutorial and examples. The community is fantastic: responsive, helpful and knowledgeable. All of this adds up to a very promising tool to learn.


Aye, I saw this. Looks interesting!


Svelte has a very nice syntax! Intuitive and looks clean :thinking:

1 Like

Really wanted to look into this and see its fitness for a SAFE website.

First thing I did was looking at how larger applications would be structured and how routing could be done. At first sight it seemed like Svelte does not feature routing, as Svelte is not a fully-featured framework. But, on second look there is Sapper:

It includes routing, Server-side Rendering, Service Workers, state management and (important for SAFE) static exporting. The exporting is important, because I first thought it was made to be used as a Node.js/Express server. It also does hot-reloading for development and comes with a great starter template (either Webpack or Rollup).

Can’t get quite familiar with it as quickly as with Vue. Svelte syntax is cool and understandable, but Sapper as a whole is a bit more difficult to navigate. Vue’s ecosystem (routing and state management) seemed more comprehensive and intuitive.

Really curious to know if others have given Svelte/Sapper a try!


Just added to the OP, a five minute intro to Svelte 3:


Do you have anything on safe:// that uses svelte yet?

I’m playing about with it myself but seeing a worked example on the SAFE network would be good.


No sorry. I’m itching to have a go with it as I see lots of positive reports on twitter, but haven’t yet.


How have you got on with Svelte Willie?

I haven’t had chance to try myself yet, so just interested to hear from anyone who has. I keep reading good reports about it on twitter.

Last week, Rich Harris put up a 3D demo showing his integration of OpenGL. Really neat.

UPDATE: Hey, @southside I’ve started a svelte project. So far there is no SAFE specific code in it, but it might help get you started with something running in SAFE Browser. See:

UPDATE2: I’ve added the code from the SAFE Web App Tutorial and it works, although you can only see this using the debugger as there is no UI yet.

1 Like

@happybeing you may want to have also look at the imba language, if you are checking out new frameworks.

I find their precompiling approach very compelling. Has a tidy and short syntax.

There are some impressive projects, like:

I never used it yet, but like to get started with it.

1 Like

Thanks @swiesend, I’ve not heard of imba. Maybe this deserves a new topic? Suggest you post it again and it can have its own discussion.

imba - web apps

sure @happybeing , here

1 Like

I like it, I like it a lot :slight_smile:


SAFE Svelte Demo

I’ve created a svelte project based on the SAFE Web App Tutorial, with UI taken from the 7gui’s CRUD svelte example.

Clone the repo to see how to create an all using Svelte and the SAFE API: