Owlet is a Typed Spreadsheet UI library for ScalaJS. It is built on top of Monix and Typelevel Cats to combine predefined input fields to a reactive user interface, just like what you would done in spreadsheet. Owlet is inspired by the PureScript library Flare.

<img src=https://upload.wikimedia.org/wikipedia/commons/1/14/Imperial_Encyclopaedia_-_Animal_Kingdom_-_pic014-%E8%B2%93%E9%A0%AD%E9%B7%B9%E5%9C%96.svg width=50% />

Get Started

1. add dependency in your build.sbt


Latest version

libraryDependencies += "us.oyanglul" %%% "owlet" % "<maven version>"


resolvers += "jitpack" at "https://jitpack.io"
libraryDependencies += "com.github.jcouyang" % "owlet" % "<jitpact version>"

2. Now programming UI is just like using spreadsheet

import us.oyanglul.owlet._
import DOM._
val a1 = number("a1", 1)
val a2 = number("a2", 2)
val a3 = number("a3", 3)
val sum = fx[Double, Double](_.sum, List(a1, a2, a3))
render(a1 &> a2 &> a3 &> sum, "#app")

or Cats Friendly Badge

val a1 = number("a1", 1)
val a2 = number("a2", 2)
val a3 = number("a3", 3)
val sum = a1 |+| a2 |+| a3
renderOutput(sum, "#app")

eh… Ready for 3D spreadsheet programming?

You know spreadsheet is 2D, when we have monad, it became 3D

!!!Monad Warning!!!

val numOfItem = int("noi", 3)
val items = numOfItem
    no => (0 to no).toList.parTraverse(i => string("inner", i.toString))
  • imagine that numOfItem lives in dimension (x=1, y=1, z=0)
  • then items live in dimension (x=1,y=1,z=1)

you can render either numOfItem or items seperatly, for they live in diffenrent z axis (which means render items you won’t able to see numOfItem even it’s flatMap from there

but you can some how connect the dots with magic &>

renderOutput(numOfItem &> items, "#output")

Anyway, just keep in mind that monad ops map ap flatMap… will lift your z axis parMap parAp parXXX instead, will keep them in the same z axis



Owlet components are completely written in Scala


Owlet implements Cats typeclasses so you will get awesome cats syntax


Owlet takes advantage from high performance Reactive lib Monix to build reactive UI component