Skip to content
This repository has been archived by the owner on Nov 13, 2018. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time



Bindings & samples for Pixi.js related libraries including:



Pixi-particles's really easy to use and there's a great online editor to configure your particle effects easily

Go to the src/particles folder to have a go. And make changes to the json located under public/img/emitter.json to see what you can do with particles.


We also support Pixi-Sound, the official pixi sound API.

Go to the src/sound folder to see a sample in action.

Animatejs Tweening


We support Animejs for all your tweenings!

Go to the src/animejs folder to see a sample in action.


We've got you covered with 19 straight to the point samples which are either ports from the PixiJS official ones or original ones.

Original samples

Dragon Particle


Learn how to move a particle emitter around som SVG shape like our Fable Dragon!

You'll know how to:

  • Add particles using pixi-particles
  • play simple animations using AnimeJS and html SVG path

Source code can be found here

Game of Cogs

Game of cogs

Learn how to make a complete mini game:

  • Title screen
  • Game Screen
  • Loading assets, pictures and json files and sounds, through pixi asset loader
  • Playing sounds using pixi-sound
  • Adding particles using pixi-particles
  • playing simple animations using AnimeJS

Source code can be found here

How to build and run the samples

  • Restore NPM dependencies: yarn install
  • Restore NuGet dependencies: dotnet restore
  • Move to src folder: cd src
  • Start Fable and Webpack dev server: dotnet fable yarn-start
  • In your browser, open localhost:8080/[EXAMPLE] (e.g. http://localhost:8080/basic) or just select a sample in the list at http://localhost:8080/

Any modification you do to the F# code will be reflected in the web page after saving. If you want to write JS files to disk instead of using the development server, run dotnet fable yarn-build.

How to add a new sample

  • Take one of the existing samples as a reference.
  • Add the information about your sample to public/samples.json5: id, title and description
  • Add one folder named after the id of the sample to src directory and another one to public. The first one will contain the F# (and maybe JS) source files, while the second contains the public assets for the sample (like index.html, images, etc).
  • Add the project to the Fable.Samples.sln solution: dotnet sln add src/mySample/mySample.fsproj. Important: the name of your fsproj file must be the same you use for your folder to allow for automatic build.(folder greatProject -> greatProject.fsproj)
  • Restore NuGet dependencies: dotnet restore

Webpack configuration

Pixi requires to set additional externals to work with webpack. Like this:

  externals: {
    "PIXI": "PIXI",
    "PIXI.extras": "PIXI.extras",
    "PIXI.loaders": "PIXI.loaders",
    "PIXI.settings": "PIXI.settings",
    "PIXI.filters": "PIXI.filters",
    "PIXI.interaction": "PIXI.interaction",
    "PIXI.mesh": "PIXI.mesh",
    "PIXI.particles": "PIXI.particles",
    "PIXI.sound": "PIXI.sound"

Would you stumble on errors like this: Module not found: Error: Can't resolve '' in ..., just add the module to the Webpack config.