Resources
A community driven list of useful Fable tutorials, libraries and software.
Tools
Tools around Fable platform.
- ts2fable - Fable parser for Typescript declaration files
- Online REPL - The Fable Online REPL
- HTML to Elmish - Convert HTML snippets into code ready to be used in Elmish apps
- JSON to Thoth - Convert JSON to F# code with Thoth decoders.
- Femto - Femto is a CLI tool that automatically resolves npm packages used by Fable bindings
Editors
Editors to code with F#.
- Ionide - A wonderful Visual Studio Code extension for F# language.
- Visual Studio
- JetBrains Rider
JavaScript
Examples
Some good apps written in Fable.
- Elmish - Find web app samples in elmish repository list.
- SAFE Bookstore - Full stack SAFE example with support for deploying in a Docker container.
- SAFE-Chat - IRC-style chat demo featuring full-stack F#, Akka.Streams, Akkling, Fable, Elmish, Websockets and .NET Core.
- SAFE Nightwatch - A Demo application for React Native development in F# using Fable and the SAFE stack.
- SAFE Confplanner - A Demo application showcasing shared behaviour of CQRS/Event-Sourcing on the backend and the Elm architecture on the frontend. Both systems communication with push-notifications via websockets.
- tabula-rasa - Minimalistic real-worldish blogging platform, written entirely in F#, made as a learning reference for building large Elmish apps
- SAFE TodoList - The simplest Todo app: a client-server application written entirely in F# using Elmish on the client, Suave on the server and Fable.Remoting for type-safe communication between the two.
- Fable-Elmish-Electron-Material-UI demo - Complete boilerplate for Electron apps using Fable 2 and Elmish with hot module reloading, time-travel debugging, etc. Also demoes how to implement some non-trivial UX patterns in Elmish, as well as how to use Material-UI with JSS (styles as code).
- Volca FM editor - A Patch editor for the Korg Volca FM made with Fable-Elmish-React which uses Web MIDI
- fable-webmidi-sample - A simple sample for making a Web MIDI application with fable
- fable-uploadcare - A simple React sample to use UploadCare widget
- dexter - A minimal Pokemon search made with Fable, Feliz and Elmish. It demoes React components designed with Typesafe styling.
- FSharp React Starter - A starter application with examples of common architecture and testing patterns.
- F# trivia game - A trivia game written in Fable + F# Azure Functions, deployed to Azure Static Web Apps
- Bleeter - UI for GTA 5's microblogging site built using F# + Fable, React and Tailwind CSS
Learn
Learn what this awesome thing is.
- Official Docs — General information and in-depth guide with examples.
- Official SAFE-Stack Docs - Official SAFE-Stack docs with nice samples and getting started tutorials.
- Official Elmish Docs - Official Elmish docs with nice samples and explanation of concepts
- Minimalistic Live Testing Fable Apps With QUnit
- F# Interop with Javascript in Fable: The Complete Guide - A comprehensive guide to Fable's interop capabilities
- Introducing Fable.Remoting: Automated Type-Safe Client-Server Communication for Fable Apps
- Statically Typed Client-Server Communication with F#: Proof of Concept - Joining F# Server and Client (outdated).
- Fable and Fable-Elmish Step-by-Step - Creating a Calculator using Fable-Elmish (Fable 0.7).
- Getting Started with Fable Elmish - Learn Elmish by working up to the Counter sample app from scratch (Fable 0.7).
- Fablelous Enterprise Tic-Tac-Toe - Web-based tic-tac-toe game written in F# and transpiled to JavaScript using Fable.
- Fable from Scratch Series - Bootstrap a Fable application from an empty directory to learn more about the stack.
- Creating Visual Planetary Systems using Fable and F#
- FableConf 2017, Elmish & Canvas based presentation - Learn how to create gorgeous Perlin based canvas animations and texts with Elmish and JS Events through a very simple example.
- Learning about the F# SAFE stack - Suave.io, Azure, Fable, Elmish - High level introduction to the SAFE stack by Scott Hanselman.
- A fable of Web MIDI - An article about how to create Fable bindings for Web MIDI
- Opinionated Fable - Architecture & Performance - Architecture & Performance tips and tricks for Fable 1.x
- Fable in React land - Fable for React: creating components and optimizing them
- Create WebComponents with Fable + Elmish + React - How to create WebComponents with Fable + Elmish + React
- Even more interop with Fable - How to use Bcrypt Js library with Fable - Dec 2018
- Fable interop 101 : generate-password - How to use generate-password Js library with Fable - Jan 2019
- Getting Started with Elmish - Walking through Elmish Counter app and explaining the MVU architecture.
- Starting with Fable (F#) - From scratch, no React, no Elmish, no Paket. Interop with DOM, p5.js explained. Also published on dev.to.
Videos and podcasts
Watch great talks about Fable
Official Fable youtube channel
- FableConf 2018 videos playlist - All FableConf 2018 videos
- FableConf 2017 videos playlist - All FableConf 2017 videos
- Fable conference talks videos playlist - Other Fable talks on Youtube
From F# to JavaScript and beyond with Fable - with Alfonso Garcia-Caro on Scott Hanselman's "Hanselminutes" podcast
F# and the SAFE stack - with Krzysztof Cieślak on Scott Hanselman's "Hanselminutes" podcast
Introduction to Web-Development with F# and Fable - @zaid-ajaj and @rommsen will talk about what Fable is, why it is an awesome tool to use for web development in 2019 and how you can start using it today.
Fable + Azure Functions + Static Web Apps - A session for On .NET Live
Templates
Fable templates to get up and running
- Elmish templates - Templates to kick start a new Elmish application. Install them like
dotnet new -i "Fable.Template.Elmish.React::*"
and create a project withdotnet new fable-elmish-react -n myproject
- SAFE template - Dotnet CLI template to bootstrap SAFE projects, including Suave.IO on server side
- Fulma minimal template - The quickest way to get started an Elmish + Fulma application from scratch
- Fable.Library.Template - F# Template for create and publishing Fable Libraries
- Semuserable.Fable.Templates - Minimal Fable templates
- Fable for Azure Static Web Apps - GitHub repo template for Fable + Functions for Azure Static Web Apps
- Fable + Feliz for Azure Static Web Apps - GitHub repo template for Feliz + Functions for Azure Static Web Apps
- Elmish for Azure Static Web Apps - GitHub repo template for Elmish + Functions for Azure Static Web Apps
Built with Fable
Production application that built with Fable
- ionide - VS Code and Atom extension for F# development
- The Gamma - Tools for open data-driven storytelling
- CompostJS - Composable data visualization library
- Fable-of-the-Day - Catch of the day by @wesbos ported to Fable
- Metadata Excel-Add-in: Swate
- facemorph.me - Website for morphing faces