Vide for Fable

Vide offers a unique approach for writing state-aware functions and composing them in a convenient and easy way. It is used for UI libraries targeting various platforms and technologies

One of the libraries is Vide for Fable. Let's check it out!

Demo

Once you've created a project using the minimal template, you can modify the view to include two counter components, as suggested in the docs:

open Fable.Core.JsInterop
open Vide
open type Html

importSideEffects("./Demo.scss")

let view =
    let counter elementName = vide {
        div {
            let! count = Vide.ofMutable 0

            button.onclick(fun _ -> count.Value <- count.Value + 1) {
                $"Count %s{elementName}!"
            }
            $"{elementName}: {count.Value}"
        }
    }
    vide {
        counter "cats"
        counter "dogs"
    }

Which renders like this:

Pretty easy!

What next?

You can find more information about how to get started—and further examples—on the docs site.

As mentioned in the project's README, Vide "is in an early prototype state". I'm interested to see where it goes from here. In the meantime, give it a try! maybe you'll find your new favourite front-end library, or even your next OSS project to contribute to 🚀