United Kingdom: +44 (0)208 088 8978

Vide for Fable

Matt checks out Vide for Fable, a dependency-free library for writing single-page apps in F#.

We're hiring Software Developers

Click here to find out more

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!


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


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:

Two counter components, showing different counts

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 🚀