Fable · JavaScript you can be proud of!<br>We Stand with Ukraine

Try online<br>Get started

Fable is a compiler that brings F# into the JavaScript ecosystem<br>Tweets by @FableCompiler

Functional programming and moreImmutable by default. Powerful pattern matching. Lightweight syntax. Units of measure. Type providers. Enjoy.

Type safety without the hassleType inference provides robustness and correctness, but without the cost of additional code. Let the compiler catch bugs for you.

Modern Javascript outputFable produces readable JavaScript code compatible with ES2015 standards and popular tooling like Webpack.

Easy JavaScript interopUse NPM packages. The entire JavaScript ecosystem is at your fingertips. See JavaScript features

First-class editor toolsChoose your favorite tool: from Visual Studio Code to JetBrains Rider. Check the whole list here.

Batteries includedFable supports the F# core library and some common .NET libraries to supplement the JavaScript ecosystem.

Features<br>These are some of the main F# features that you can use in your web apps with Fable.Powerful pattern matching<br>These are some of the main F# features that you can use in your web apps with Fable.<br>type Face =<br>| Ace | King | Queen | Jack<br>| Number of int

type Color =<br>| Spades | Hearts | Diamonds | Clubs

type Card =<br>Face * Color

let aceOfHearts = Ace, Hearts<br>let tenOfSpades = (Number 10), Spades

match card with<br>| Ace, Hearts -> printfn "Ace Of Hearts!"<br>| _, Hearts -> printfn "A lovely heart"<br>| (Number n), Spades -> printfn "%d of Spades" n<br>| _, (Diamonds|Clubs) -> printfn "Diamonds or clubs"

// Warning:<br>// Incomplete pattern matches on this expression.<br>// For example, the value '(_,Spades)' may indicate<br>// a case not covered by the pattern(s).

Computation expressions<br>There's a lot of code involving continuations out there, like asynchronous or undeterministic operations. Other languages bake specific solutions into the syntax, with F# you can use built-in computation expressions and also extend them yourself.<br>// JS promises made easy<br>promise {<br>let! res = Fetch.fetch url []<br>let! txt = res.text()<br>return txt.Length

// Declare your own computation expression<br>type OptionBuilder() =<br>member _.Bind(opt, binder) =<br>match opt with<br>| Some value -> binder value<br>| None -> None<br>member _.Return(value) =<br>Some value

let option = OptionBuilder()

option {<br>let! x = trySomething()<br>let! y = trySomethingElse()<br>let! z = andYetTrySomethingElse()<br>// Code will only hit this point if the three<br>// operations above return Some<br>return x + y + z

Units of measure<br>These are some of the main F# features that you can use in your web apps with Fable.<br>[&#60Measure>] type m<br>[&#60Measure>] type s

let distance = 12.0m><br>let time = 6.0s>

let thisWillFail = distance + time<br>// ERROR: The unit of measure 'm' does<br>// not match the unit of measure 's'

let thisWorks = distance / time<br>// 2.0&#60m/s>

Type providers<br>Build your types using real-world conditions and make the compiler warn you if those conditions change.<br>[&#60Literal>]<br>let JSON_URL = "https://jsonplaceholder.typicode.com/todos"

// Type is created automatically from the url<br>type Todos = Fable.JsonProvider.GeneratorJSON_URL>

async {<br>let! (_, res) = Fable.SimpleHttp.Http.get url<br>let todos = Todos.ParseArray res<br>for todo in todos do<br>// Compilation fails if the JSON schema changes<br>printfn $"USER: {todo.userId}, TITLE {todo.title}, COMPLETED {todo.completed}"

Users of Fable<br>These are some of the projects and companies using Fable. Send us a message to include yours!