Explore Fable through fun demos!
Fable works great for creating server-side node.js application, client-side browser based applications and even desktop electron-based applications. You can find a number of Fable examples and demos of all kinds in the samples directory on GitHub. Here, is a couple of selected examples with longer explanation.
You can also contribute more examples by sending us a pull request for the samples directory!
Mario clone, based on functional reactive sample written in
Elm. The Fable version is using HTML 5
canvas to render the background and an
img tag showing the Mario (using animated GIFs).
You can view the raw source code on GitHub.
Pacman finds himself in a grid filled with monsters... This is the most complex sample here. It involves rendering the maze, AI for the ghosts, user interaction and even playing sound effects. The game has some brief commentary, but if you want to learn Fable, look at the above examples first. The raw source code is on GitHub.
This demo shows a Fable implementation of SameGame. The functional implementation of the game follows the type-first design approach and consists of three main components: types, game logic and front end. This sample has been contributed by Leif Battermann. You can find the full source code on GitHub.
This demo is based on L-system workshop by Andrea Magnorsky and Ross McKinlay. Rather than working on the tasks they gave us, Tomas Petricek compiled it with Fable, so that you can play with it in a browser!
This Fable version of pong is using HTML 5 canvas to render a whole two player pong game. The full source code is on GitHub.
This demo is an implementation of the Elm architecture using the same virtual-dom as Elm originally used. This architecture makes it easy to create complex and maintainable web applications. Contributed by Tomas Jansson.
This is a port of React TodoMVC to show how easy is to take advantage of the full power of React in Fable apps. You can also compare the F# source code with the original JS implementation to see the advantages of Fable programming. And remember Fable is also compatible with React Native for mobile development!
This tutorial shows how to compile NUnit tests so they can be run in JS with Mocha. You can view the source code, package.json and fableconfig.json on GitHub. This is done via a plugin, illustrating the extensibility of Fable.
This demo is a Fable port of Mike Bostock's World Tour D3 demo. It uses the D3 library to create a visualization that loops through all countries of the world and shows them on the globe one by one. You can find the full source code on GitHub.
This demo is based on Tomas Petricek's F# Advent Calendar post that explores Japanese art using the (now defunct) Freebase type provider and renders The Great Wave by Hokusai using the Julia fractal. View the raw source code on GitHub.
This demo is a Fable port of the WebGL Geometry Terrain three.js demo. It uses the three.js library to randomly generate a 3D terrain which can be navigated in a first-person view. The code was originally written by John Quigley for FunScript, you can find Fable's version on GitHub.
Minimal example that shows how to use Fable to create a node.js HTTP server that
hosts static files from the current directory using the
You can view the source code,
Example of using Fable to create a web application using Express, a fast, unopinionated, minimalist web framework for Node.js. The raw source code is on GitHub, together with the configuration in package.json and fableconfig.json.