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: 3 months ago
JSON representation

List of awesome Sutil resources

• Host: GitHub
• URL: https://github.com/Sutil-Web/awesome-sutil
• Owner: Sutil-Web
• License: unlicense
• Created: 2022-10-28T12:53:46.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-14T16:14:35.000Z (over 1 year ago)
• Last Synced: 2024-04-11T22:06:08.626Z (7 months ago)
• Topics: fsharp, sutil
• Homepage:
• Size: 50.8 KB
• Stars: 14
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• ultimate-awesome - awesome-sutil - List of awesome Sutil resources. (Other Lists / PowerShell Lists)

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)