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

    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).

    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