https://fable.io/

Fable    
DocumentationTryBlogCommunityResources
    
[fable_logo]
Try online
Get started


Fable is a compiler that brings F# into the JavaScript ecosystem

Tweets by @FableCompiler
[fsharp]
Functional programming and more

Immutable by default. Powerful pattern matching. Lightweight syntax.
Units of measure. Type providers. Enjoy.

Type safety without the hassle

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

Modern Javascript output

Fable produces readable JavaScript code compatible with ES2015
standards and popular tooling like Webpack.

Easy JavaScript interop

Call JavaScript from Fable or Fable from JS. Use NPM packages. The
entire JavaScript ecosystem is at your fingertips.

First-class editor tools

Choose your favorite tool: from Visual Studio Code to JetBrains Rider
. Check the whole list here.

Batteries included

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

Features

These are some of the main F# features that you can use in your web
apps with Fable.

Powerful pattern matching

These are some of the main F# features that you can use in your web
apps with Fable.

type Face =
    | Ace | King | Queen | Jack
    | Number of int
type Color =
    | Spades | Hearts | Diamonds | Clubs
type Card =
    | Face * Color

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

match card with
| Ace, Hearts ->
    printfn "Ace Of Hearts!"
| _, Hearts ->
    printfn "A lovely heart"
| (Number 10), Spades ->
    printfn "10 of Spades"
| _, (Diamonds|Clubs) ->
    printfn "Diamonds or clubs"
// Warning:
// Incomplete pattern matches on this expression.
// For example, the value '(_,Spades)' may indicate
// a case not covered by the pattern(s).

Computation expressions

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.

// JS promises made easy
promise {
    let! res = Fetch.fetch url []
    let! txt = res.text()
    return txt.Length
}

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

let option = OptionBuilder()

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

Units of measure

These are some of the main F# features that you can use in your web
apps with Fable.

[<Measure>] type m
[<Measure>] type s

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

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

let thisWorks = distance / time
// 2.0<m/s>

Type providers

Build your types using real-world conditions and make the compiler
warn you if those conditions change.

[<Literal>]
let JSON_URL = "https://jsonplaceholder.typicode.com/todos"

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

async {
    let! (_, res) = Fable.SimpleHttp.Http.get url
    let todos = Todos.ParseArray res
    for todo in todos do
        // Compilation fail if the JSON schema changes
        printfn "ID %i, USER: %i, TITLE %s, COMPLETED %b"
            todo.id
            todo.userId
            todo.title
            todo.completed
}

Users of Fable

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

[resoptima]
[demetrix]
[compraga]
[aimtec]
[nsynk]
[thegamma]
[msu]
[ionide]
[prolucid]
[casquenoir]
[danpower]
[tachyus]
[axxes]
[visualmips]
[lambdafact]
[BTS]
[umc]