Fable samples

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!

Fun and games

Super Fable Mario

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.

Ozmo game

Phil Trelford's classic Ozmo game, originally hosted on BitBucket ported to Fable! Shows how to handle keyboard events and use HTML5 canvas. You can also get it (as a JavaScript app) from the Windows Store. View the raw source code on GitHub.

Pacman

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.

SameGame

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.

Interactive L-system generator

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!

Pong

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.

Productivity

TodoMVC with Elm architecture

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.

TodoMVC with React

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!

TodoMVC with Redux

This is a port of Redux TodoMVC and the third instalment in the Fable TodoMVC series. Redux is a predictable state container for JavaScript apps, easy to use and compatible with functional patterns. Redux greatly improves your development experience with extensions like Redux DevTools allowing for live code editing combined with a time traveling debugger.

Testing with NUnit

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.

Visualizations

D3 world tour

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.

Hokusai and fractals

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.

WebGL Geometry Terrain

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.

Server-side node.js

Simple static server

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 serve-static package. You can view the source code, package.json and fableconfig.json on GitHub.

Express web framework demo

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.

Something missing?

Send us a pull request!

Do you have a nice demo using Fable? Send us a pull request! We'd love to add more examples of using Fable in reactive web applications, server-side node applications and other domains that rely on JavaScript. You can add demos to the samples folder in Fable repo, or just add a link from this page.

Fork me on GitHub