Failure in Getting Scalatags Work

Dear all,

I am trying the Hands-On Tutorial and things work relatively well up to here:

I have included some Scalatags as instructed in my code and see no widgets on the HTML – even though the compiler is happy both in the terminal and the workbench output on the page. For the reference, I am putting the relevant files in the P.S. Does anyone know what’s going wrong?



  • workbench-example-app\build.sbt:

enablePlugins(ScalaJSPlugin, WorkbenchPlugin)

name := "Example"

version := "0.1-SNAPSHOT"

scalaVersion := "2.11.8"

libraryDependencies ++= Seq(
"org.scala-js" %%% "scalajs-dom" % "0.9.1",
"com.lihaoyi" %%% "scalatags" % "0.6.2"

  • workbench-example-app\src\main\resources\index-dev.html

<!DOCTYPE html>
<title>Example Scala.js application</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<body style="margin: 0px">

    <canvas style="display: block" id="div" width="255" height="255"/>

<script type="text/javascript" src="../example-fastopt.js"></script>
<script type="text/javascript" src="/workbench.js"></script>
  • workbench-example-app\project\build.sbt

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.13")

addSbtPlugin("com.lihaoyi" % "workbench" % "0.3.0")

  • workbench-example-app\src\main\scala\webpage\Search0.scala

    package webpage

    import org.scalajs.dom
    import dom.html
    import scalajs.js.annotation.JSExport
    import scalatags.JsDom.all._

    object Search0 extends{
    def main(target: html.Div) = {
    val listings = Seq(
    "Apple", "Apricot", "Banana", "Cherry",
    "Mango", "Mangosteen", "Mandarin",
    "Grape", "Grapefruit", "Guava"

      def renderListings = ul(
        for {
          fruit <- listings
          if fruit.toLowerCase.startsWith(box.value.toLowerCase)
        } yield li(fruit)
      lazy val box = input(
        placeholder:="Type here!"
      val output = div(renderListings).render
      box.onkeyup = (e: dom.Event) => {
        output.innerHTML = ""
          h1("Search Box!"),
            "Type here to filter " +
            "the list of things below!"


To make sure code is formatted correctly, please put ```scala (three backticks, and scala, with no space in between) before any code snippets, and ``` after them.

Thank you for the formatting tip. Any chance anyone picks up the contents too?

Hi Hossein,
I think you missed part of how to do that example towards the top of that page you linked.
Critically, you need to:

  • Get all the code via git clone
  • cd into that directory.
  • Compile and run the code with: sbt ~fastOptJS (note that ~ is crucial so the server is running to serve the web page.)
  • View the ouput by putting this in your browser: http://localhost:12345/target/scala-2.11/classes/index-dev.html

Worked well for me once I followed the above steps. Cool fractals as a reward!

Hi Brett,

I don’t think I’ve missed any of those steps. With minor reservations, I do get the output the book promises up the point I mention.

The fractals worked for me too. Did you also get any of



Ah yeah, nope, that part of the tutorial is super unclear, sorry I misunderstood what you are stuck on. I might try some more later.

Thanks. Looking forward that.

For the record, I would like to announce it that with little change in the HTML, I do get the promised behaviour. canvas here

<canvas style="display: block" id="div" width="255" height="255"/>

should have been replaced by div. The tutorial does indeed allude to that in a way that was unhelpful to an HTML-illiterate like me:

need to update the on-page Javascript’s document.getElementById to pick a <div> rather than the <canvas> we were using in the previous chapter.

My understanding from the above excerpt was that I needed to only replace id="canvas" by id="div". After all, document.getElementById picks ids…