buntec / ff4s   0.24.0

Apache License 2.0 Website GitHub

A purely functional web UI library for Scala.js

Scala versions: 3.x 2.13
Scala.js versions: 1.x


Maven Central

Check out the microsite and Scaladocs.

See the examples folder for commented code examples. Try them out by running examples/fastLinkJS in sbt and serving the index.html using something like Live Server.

For good measure, there is an implementation of todomvc in the todo-mvc folder.

Artifacts are published to Maven Central for Scala 2.13 and Scala 3.

libraryDependencies += "io.github.buntec" %%% "ff4s" % "0.24.0"

Companion libraries

(Breaking) changes


  • The store constructor is simplified to (Action, State) => (State, F[Unit]). To migrate replace all occurrences of None with Applicative[F].unit (see microsite and examples).


  • Adds withClass extension method to the V type that allows overriding the class attribute of the underlying node. This turns out to be useful for literals, e.g., setting the class on an SVG icon.


  • Dsl[F, State, Action] becomes Dsl[State, Action]. The F parameter was merely an implementation detail leaking out.
  • ff4s.App no longer has an implicit Dsl member. A better pattern for organizing components is to use a Dsl[State, Action] self-type (see the examples), which obviates the need for passing a Dsl parameter to every component.


  • Adds a debug mode for inspecting the state from the browser console.
  • Improves support for web components by adding a WebComponent base trait and a Slot modifier (see ff4s-shoelace for usage examples).


  • Bug fix: map reflected attributes to attributes instead of props. Properties typically cannot be deleted so things like id, once set, couldn't be removed.


  • Adds caching for literals. This can significantly improve performance, e.g., when displaying a large number of SVG icon literals.


You can query the state of your ff4s app in the Browser console by defining/declaring the following global variables (e.g., by adding an inline script to your index.html):

var process = {
  env: {
    'FF4S_DEBUG': 'TRUE',
var ff4s_state;

The current state can then be retrieved from the ff4s_state variable. In particular, you can call ff4s_state.toString() (and toString can be customized in your Scala code).