Merry Christmas Fable Community!

Dear people from the f# & Fable community, here is my little contribution to the great F# advent calendar 2017 edition.

I’m very happy to be able to participate this year with a light presentation of PixiJS and Animejs for Fable.

PixiJS and Fable

I have been working quite some time using PixiJS. So it was quite obvious for me to port PixiJS to Fable. I started in 2016 with PixiJS v3.x. And this year, with the help of the Fable community I ported the brand new v4.x.x APIs.

Getting started

So how one is getting started with PixiJS on Fable? That’s very simple.

Use Paket

Bindings are located in the official fable-import repository and available as a NuGet package.

So for all your PixiJS based projects you can easily add the dependency using our beloved Paket tool:


Wrappers are great but we obviously need samples and proper documentation. Regarding the latter, I haven’t had enough time to start but it’s something that’s planned for 2018.


So, instead I focused on porting all the most known PixiJS javascript samples to F# and Fable. These samples are ready to play with here and of course, full source is available from the official samples-pixi repository.

Rotating Bunny?

For instance, here’s the adaptation of the very first basic pixi sample for Fable

Fablicules! (Fable Particles)

You’ll also find there our latest experiments mixing sub PixiJS libraries such as pixi-particles and pixi-sound.

And even small gaming experiments like this one:

Fable Pixi Template!

Ah! And there’s a great new project to easily get started using Pixi and Fable. Thanks to the amazing work of Mike Janger.

So grab the template, start a new project, copy and paste some code from samples-pixi and have fun!

Animejs and Fable

For those who don’t know Animejs yet, it’s a great tweening library that allows to animate Dom Elements, SVG and any javascript object


There too, we’ve prepared bindings in the fable-import repository.


So for all your Animejs based projects you can easily get a most convenient NuGet package through our beloved Paket tool:


We’ve also made sure to provide with samples featuring both PixiJS and Animejs. Full source is, again, available from the official samples-pixi repository, like the sample below.

Fable, PixiJS and AnimeJS working together

Merry Christmas!

Now here’s my gift for you: Click here to see it in action!

Of course the source code is available for you. It’s fully documented. I’ve spent a lot of time tweaking things to easy up things. It’s a very small project involving PixiJS and AnimeJS yet it is complete: we’re using a preloader, we’re using layers, sprites, particles, a little Async based state machine to process events and a very easy to understand rendering state machine.

So there’s plenty of things to learn and who knows… You could easily tweak this project to build a complete game…

Last but not least

2017 has been a great #fsharp year for me with FableConf and all the projects I did using Fable.

It seems that, for very special reasons, 2018 will also be a great #fsharp #fable year too. Now that our pixi repo is ready I will try to work on the documentation part to make this much more practical for you and who knows… Maybe we’ll see great animations or games popping on twitter with the hashtag #fablepixi


I would like to thank the whole Fable and Fsharp community for their kind help.

And particularly Alfonso & Maxime for their patience, their messages full of kawaii emojis and their invaluable help on setting up the sample-pixi and fable-import repositories as well as NuGet packages.

Fsharp rocks! And don’t forget:

Fable: if it compiles it works.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store