A purely functional and reactive UI framework based on Monix and VirtualDom
Scala JavaScript
Clone or download
Failed to load latest commit information.
project Update to scalajs-bundler 0.13.1, add yarn.lock (#213) Jul 24, 2018
src add AsVDomModifier instances for long and boolean (fixes #206) Jul 30, 2018
.gitignore Major Refactor Feb 17, 2017
CHANGELOG.md Add Changelog Jul 24, 2018
CONTRIBUTING.md Initial commit Nov 4, 2016
LICENSE.txt Initial commit Nov 4, 2016
build.sbt Update dependencies Jul 16, 2018
scalastyle-config.xml Add missing Event emitters Feb 17, 2017
yarn.lock Update to scalajs-bundler 0.13.1, add yarn.lock (#213) Jul 24, 2018


OutWatch - Functional and reactive Web-Frontend Library with Reactive Programming, VirtualDom and Scala Typelevel incubator Build Status Scala.js Gitter chat

import outwatch.dom._
import outwatch.dom.dsl._
import monix.execution.Scheduler.Implicits.global

OutWatch.renderInto("#app", h1("Hello World")).unsafeRunSync()

Syntax is almost exactly as in ScalaTags combined with Observables from Monix.

You can find more examples and features in the changelog: CHANGELOG.md

Getting started

g8 template

For a quick start, install java, sbt, nodejs and yarn and use the following g8 template:

sbt new outwatch/seed.g8

In your newly created project folder, run:

sbt dev

and point your browser to http://localhost:8080.

Changes to the code will trigger a recompile and automatically refresh the page in the browser.

Manual usage

Install java, sbt and nodejs, if you haven't already. Create a new SBT project and add the ScalaJS and Scala-js-bundler plugin to your plugins.sbt:

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.23")
addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-bundler" % "0.13.0")

Then add the outwatch dependency to your build.sbt.

libraryDependencies += "io.github.outwatch" %%% "outwatch" % "1.0.0-RC2"

If you are curious and want to try the state of the current master branch, add the following instead:

resolvers += "jitpack" at "https://jitpack.io"
libraryDependencies += "com.github.outwatch" % "outwatch" % "master-SNAPSHOT"

To configure hot reloading with webpack devserver, check out build.sbt and webpack.config.dev.js from the g8 template.


There is a PR with a corresponding changelog which also serves as documentation with examples: https://github.com/OutWatch/outwatch/blob/changelog/CHANGELOG.md

There is also the slightly outdated but conceptually still correct documentation - contributions welcome.

Three main goals of OutWatch

  1. Updating DOM efficiently without sacrificing abstraction => Virtual DOM
  2. Handling subscriptions automatically
  3. Removing or restricting the need for Higher Order Observables

Bugs and Feedback

For bugs, questions and discussions please use the Github Issues.


We adopted the Typelevel Code of Conduct. People are expected to follow it when discussing OutWatch on the Github page, Gitter channel, or other venues.


Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at


Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.