Scala.js UI
Reactive Scala.js interfaces with SSR and hydration built into the same component model.
THE COMPONENT MODEL
SCALA / RENDER / HYDRATE
1.0.7Current release
Scala.jsRuns on
Scala 3.3Language version
MITLicense
Installation
Every module is published separately. Add the core and the modules your application uses.
sbt
enablePlugins(ScalaJSPlugin)
// sbt 2: %% adds the Scala.js suffix itself (sbt 1: %%%)
libraryDependencies ++= Seq(
"com.anjunar" %% "scalajs-ui-core" % "1.0.7", // components, DSL, state, SSR
"com.anjunar" %% "scalajs-ui-router" % "1.0.7", // routes, loaders, locale prefixes
"com.anjunar" %% "scalajs-ui-controls" % "1.0.7", // tabs, carousel, tables, grids
"com.anjunar" %% "scalajs-ui-forms" % "1.0.7", // typed forms and inputs
"com.anjunar" %% "scalajs-ui-viewport" % "1.0.7", // windows, overlays, notifications
"com.anjunar" %% "scalajs-ui-editor" % "1.0.7" // Markdown editor
)
Start with working code
A Property drives the text, and the event updates that same state after hydration.
Count: 0
scala
import ui.core.dsl.EventDsl.onClick
import ui.core.layout.Button.button
import ui.core.layout.TextComponent.text
import ui.core.layout.VBox.vbox
import ui.core.state.Property
val count = Property(0)
vbox {
text(count.map(n => s"Count: $n")) {}
button("Increment") {
onClick(_ => count.set(count.get + 1))
}
}
01 / Render
Server first, browser second
Every page renders as complete HTML on the server. The browser hydrates the same component tree instead of building it again.
02 / Compose
One DSL for structure and behaviour
Elements, attributes, events and children are Scala code. There is no template language and no DOM handwork.
03 / React
State with a lifecycle
Properties drive the view directly. Subscriptions, timers and windows belong to a component and end with it.
Contents
One page per building block
Every page shows the building block live, explains when to use it and ends with the code.
CompositionTabsPanel lifecycle and keyboard selectionCarouselLooping slides and lifecycle-bound autoplay
FormsFormsControl registration and contextImage cropperUpload, crop and thumbnail bindingComboBoxTyped selection and stable identity