Demos for ScalablyTyped

This is a collection of tiny demo projects to show off how we can use javascript libraries from scala.js

React demos

All react demos are now moved to separate repositories by the react library they use. See slinky demos here

Browser demos



It uses d3 to generate a rather fancy spinning globe. Demo is converted from here

sbt> d3/start starts a webpack-dev-server at http://localhost:8001 .



The demo loads the google maps javascript as distributed by google (see index.html ). It's very simple usage, it just shows the location of a few beaches.

sbt> google-maps/start starts a webpack-dev-server at http://localhost:8002 .



This demo shows how to interact with old-style javascript. Jqueryui is a global library (as in, not a module), so you'll see the code touches an object to include it. It also extends jquery with more functionality, so you'll see an explicit cast to tell the compiler about this. This is poor mans interface augmentation (a mechanism by which typescript does this automatically)

Libraries used

  • jquery
  • jqueryui

sbt> jquery/start starts a webpack-dev-server at http://localhost:8003 .



This demo showcases a pretty simple todo app (stolen and adapted from scalajs-vue). Some templating is done in index.html, while a bunch of stuff is done in Scala.

From its design it's pretty clear that Vue was designed by javascript people. Trying to obtain type safety in this mess will probably never be worth it, but at least now you can try! :) sbt> vue/start starts a webpack-dev-server at http://localhost:8004 .



A fancy animation of a horse, stolen from three.js demos. sbt> three/start starts a webpack-dev-server at http://localhost:8005 .



Write your talks in scala.js! This uses highlight.js and reveal.js along with scalajs-react. adapted from scala-reveal-js, sbt> reveal/start starts a webpack-dev-server at http://localhost:8006 .



Simple charting using canvas elements. Shows off how to work with the DOM as well as how to use chart.js. Heavily adapted from the retyped demo, sbt> chart/start starts a webpack-dev-server at http://localhost:8007 .

Angular 8


Let's be nice and say that Angular is a reasonable alternative for creating a frontend app. If you agree, now is your chance to use it with Scala.js.

Adapted from sherpal's prototype. sbt> angular/start starts a webpack-dev-server at http://localhost:8008 .



Demo adapted from documentation sbt> p5/start starts a webpack-dev-server at http://localhost:8009 .



Demo adapted from scalajs-leaflet sbt> leaflet/start starts a webpack-dev-server at http://localhost:8010 .


Demo Adapted from documentation

sbt> onsenui/start starts a webpack-dev-server at http://localhost:8011 .


Demo Adapted from animation/create-from-sprite-config example

sbt> phaser/start starts a webpack-dev-server at http://localhost:8012 .


Demo This is the translation of some of the examples into Scala.

Pixi.js is a library to render blazingly fast 2D animations on Canvas, using WebGL under the hood.

sbt> pixi/start starts a webpack-dev-server at http://localhost:8013 .

You will be presented with a menu that has the same structure as the examples from the Pixi website.


Implements the backend/mainprocess part of an Electron app in Scala.js, though it would be easy to do the frontend as well (in another module).

Start the project like this:


Again adapted from sherpal's work.

Node demos


This is a very simple app which uses a few functions from lodash. sbt> lodash/run runs the demo in node.


This demo is a HTTP endpoint written in express, which runs on node. Adapted from this

sbt> node-express/run will start it.

You'll need for instance curl to test it:

> curl http://localhost:3000/welcome
#Hello, World!

> curl http://localhost:3000/welcome/foo
# Hello, foo!


sbt> typescript/run runs the typescript compiler on two files (one of which is meant to fail). It accepts parameters to specify other files if you want to play around.


sbt> cypress/run runs a basic test

Your demo here! :)

Pull requests most welcome!


Demos for ScalablyTyped

Demos Info

⭐ Stars31
🔗 Source
🕒 Last Updatea year ago
🕒 Created4 years ago
🐞 Open Issues0
➗ Star-Issue RatioInfinity
😎 AuthorScalablyTyped