Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Sutil-Web/awesome-sutil

List of awesome Sutil resources
https://github.com/Sutil-Web/awesome-sutil

List: awesome-sutil

fsharp sutil

Last synced: 16 days ago
JSON representation

List of awesome Sutil resources

Awesome Lists containing this project

README 

        
# List of awesome Sutil resources



Sutil is lightweight front-end framework for F# / Fable.  

Inspired by Svelte.  

No dependencies.  



## Starter Projects



* [Sutil Template for Hello World](https://github.com/davedawkins/sutil-template-helloworld), by Dave Dawkins

* [Sutil Template for Elmish](https://github.com/davedawkins/sutil-template-elmish), by Dave Dawkins

* [Sutil Template for Full App](https://github.com/davedawkins/sutil-template-app), by Dave Dawkins



## Learning



* [Sutil REPL](https://sutil.dev/repl/), by Dave Dawkins

* [Documentation](https://sutil.dev/#documentation-about-sutil)

* [Code Examples](https://sutil.dev/#examples-hello-world)



## Articles



* [Using Sutil to develop a real world application](https://hashset.dev/article/16_using_sutil_to_develop_a_real_world_application), by Kai Ito

* [Serene Sitting with Sutil](https://elm.finde-ich-super.de/2021.html#serene-sitting-with-sutil), by Martin Grotz

* [Writing an Appwrite Web App in F#, by Dave Dawkins](https://github.com/davedawkins/doodletoy#readme)

* [Dependency Trees With Fable and Sutil](https://queil.net/2021/12/dependency-trees-with-fable-and-sutil/)

* [Exploring the F# Frontend Landscape](https://blog.tunaxor.me/blog/2022-05-23-exploring-the-fsharp-frontend-landscape.html), by Angel Munoz



## Sample Apps



* [Oxide](https://github.com/davedawkins/sutil-oxide) - A toolkit for building IDE-style web applications, by Dave Dawkins

* [sutil-template-react](https://github.com/davedawkins/sutil-template-react) - How to host React (and other frameworks) inside a Sutil app, by Dave Dawkins

* [sutil-template-chromex](https://github.com/davedawkins/sutil-template-chromex) - Creating a Chrome Extension in F# Using Sutil, by Dave Dawkins

* [sutil-template-tailwind](https://github.com/davedawkins/sutil-template-tailwind) - Sutil Template for Tailwind, by Dave Dawkins

* [aspect-ratio](https://github.com/NoseCone/aspect-ratio), by NoseCone

* [SubtleConduit](https://github.com/kaeedo/SubtleConduit) - Recreating a Real World app, called Conduit, using Sutil - by kaeedo

* [spooktober-2021 game](https://github.com/AngelMunoz/spooktober-2021), by Angel Munoz



## Templates



* [Sutil-Template](https://github.com/Jlll1/Sutil-Template), by Jill1

* [Fable.Sutil.Templates](https://github.com/AngelMunoz/Fable.Sutil.Templates), by Angel Munoz



## Infrastructure



* [Perla + Sutil](https://github.com/AngelMunoz/perla-templates/tree/main/fable-sutil) - Perla template for Sutil

* [SutilComponent](https://github.com/Sutil-Web/SutilComponent) - Fable plugin to automatically bind Sutil observables in functions decorated with `SutilComponent`

* [Sutil.Generator](https://sutil-shoelace.web.app/) - project that aims to bring the goodness of [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) to F# thanks to Sutil



## Components



* [Sutil.Toastr](https://github.com/davedawkins/Sutil.Toastr) - A Sutil port of Elmish.Toastr



## Video Tutorials



### Jill1 : Real World F# Web App - Brisk



https://github.com/Jlll1/Brisk  

* [#01 - Setting up Sutil and routing](https://youtu.be/EC5smZp4DDc)

* [#02 - Building a Card component with Sutil](https://youtu.be/yrK-iTORgU8)

* [#03 - Pagination Component](https://youtu.be/lgbKSQNIvrU)

* [#04 - Ensuring valid state with smart types](https://youtu.be/Bs5zTkmMmas)

* [#05 - Communication between components](https://youtu.be/NuAzX_6flsI)



### Ben Gobeil : Building a Stock Market Monitoring System with F# - StonkWatch



https://github.com/bengobeil/StonkWatch

* [#07 - Why Sutil Can Change The Front-End Development Game](https://youtu.be/D5LwGKNa6dk?list=PLWtGeD5k0ryhV0Fq-_n9OADe1mud_ZTlT)

* [#08 - How To Write Type-Safe HTML/CSS In F# With Sutil and Bulma](https://youtu.be/IcSvaWPcBls?list=PLWtGeD5k0ryhV0Fq-_n9OADe1mud_ZTlT)

* [#09 - Writing MVU-Style Reactive Web In F# Using Sutil](https://youtu.be/9j2ucq2xsD4?list=PLWtGeD5k0ryhV0Fq-_n9OADe1mud_ZTlT)

* [#10 - Domain Modeling With F# Types | Live Walkthrough](https://youtu.be/8ab-0B2KlR8?list=PLWtGeD5k0ryhV0Fq-_n9OADe1mud_ZTlT)

* [#11 - Using F# Strong Types In Sutil/Bulma Web UI](https://youtu.be/iKf9PhdQNRo?list=PLWtGeD5k0ryhV0Fq-_n9OADe1mud_ZTlT)

* [#12 - Writing Our First Unit Test + Doing Math With Units of Measure](https://youtu.be/K057g57reY0?list=PLWtGeD5k0ryhV0Fq-_n9OADe1mud_ZTlT)

* [#14 - How To Use Elmish Commands For Dynamic F# MVU Web Front-Ends](https://youtu.be/_i0hwcjXk8I?list=PLWtGeD5k0ryhV0Fq-_n9OADe1mud_ZTlT)

* [#15 - Refactoring Sutil Code With Custom Operators](https://youtu.be/m6TmrvaEcHw?list=PLWtGeD5k0ryhV0Fq-_n9OADe1mud_ZTlT)