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).
Browser Samples
Explore Fable through fun demos!
Who said learning cannot be fun? These samples will help you get started with different kind of Fable web apps, like games, visualizations or productivity apps. You can also find samples to create Github Electron apps and Node samples are coming too. Don't forget to check the fable-awesome list for more info about awesome Fable projects and tutorials!
Check the Github repository to see the source code of the samples and clone it to edit them at will. If you find something missing or have a great idea for a sample, don't hesitate to send us a pull request.
Fun and Games
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.
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.
Pong
This Fable version of pong is using HTML 5 canvas to render a whole two player pong game.
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. Contributed by Leif Battermann.
Funsnake
Classic snake game that can be played either by keyboard or mouse/touch. Originally developed by Alberto Ayuso for FunScript.
Pixi sample
Simple renderization with PixiJS, a fast and flexible library to render 2D WebGL content.
Productivity
These samples are here just to show how easy is to interact with JS libraries from Fable, including advanced UI frameworks like React or Vue. However, the recommended way to create Single Page Applications is to use Fable.Elmish. Check their extensive documentation to learn how thanks to the model-view-update architecture you'll never mess up with the UI state any more.
React + Redux TodoMVC
This is a port of Redux TodoMVC and shows how easy is to create a Fable web app only using JS libraries. Redux is a predictable state container for JavaScript apps, easy to use and compatible with functional patterns.
Vue TodoMVC
Shows how to create a TODO list using Vue.js. Unlike React, Vue relies on a template language separated from logic code and closer to HTML. Please note this is an early experiment so the code may not look as idiomatic F#.
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.
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.
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!
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.
Mandelbrot Fractal
Generate fractals with HTML5 canvas.