Scala.js UI
A Scala 3 and Scala.js UI framework for server-rendered applications.
The idea
Build components in Scala, render their initial HTML on the server, then hydrate the same component tree in the browser. The framework combines reactive state, routing, forms, controls, and lifecycle-aware rendering.
What it does.
Server-side rendering
Render crawlable HTML from the same components used by the browser.
Hydration
Attach behavior to server-rendered markup without rebuilding the page.
Component library
Use a Scala.js DSL, routing, forms, and controls in one runtime.
Installation
libraryDependencies += "com.anjunar" %% "scalajs-ui-core" % "1.0.6"
Package: com.anjunar:scalajs-ui-core
Start building.
Enable ScalaJSPlugin, add scalajs-ui-core, and mount a component with Runtime.mount.
A reactive component
One property drives the displayed count; the button updates it without rebuilding the page.
import ui.core.component.AbstractComponent
import ui.core.dsl.ClassDsl.classes
import ui.core.dsl.EventDsl.onClick
import ui.core.layout.Button.button
import ui.core.layout.Div.div
import ui.core.layout.TextComponent.text
import ui.core.layout.VBox.vbox
import ui.core.render.Cursor
import ui.core.state.Property
final class Counter extends AbstractComponent {
val tagName = "main"
override def compose(cursor: Cursor): Unit = {
val count = Property(0)
vbox {
classes = Seq("counter")
div { text(count.map(n => s"Count: $n")) {} }
button("Increment") { onClick(_ => count.set(count.get + 1)) }
}
}
}Render on the server, hydrate in the browser
The same component is mounted into an SSR cursor and then claimed by a hydration cursor.
import ui.core.async.AsyncRenderContext
import ui.core.component.Runtime
import ui.core.render.HydratingCursor
import org.scalajs.dom
val html = Runtime.renderToStringAsync { cursor =>
Runtime.mount(new Counter, cursor)
}
val async = new AsyncRenderContext()
val cursor = HydratingCursor.root(dom.document, async)
Runtime.mount(new Counter, cursor)By design.
A single component tree drives server rendering, browser hydration, and reactive updates. Component disposal owns subscriptions and event listeners.
Make it part of your stack.
Explore further.
Hibernate DDL Manager
Controlled schema evolution from Hibernate metadata.
↗JSON Mapper
JSON mapping for existing object graphs and domain models.
↗Scala Universe
A resolved view of JVM types, generics and annotations.
↗Scala JS Ember
A modular rich-text editor built on one immutable document model.
↗Scala Reflect
Type metadata generated at compile time for the JVM and Scala.js.
↗