Layout & structure
The architecture of your digital space.
Composition
Layout is the grammar of the surface.
VBox and HBox are deliberately simple. They do not force an external abstraction; they make spatial structure visible directly in the template.
VBox
Vertical order for forms, panels, and pages.
HBox
Horizontal groups for toolbars, actions, and short rows.
Div
Neutral space for semantic or visual specialization.
App shell sketch
A denser layout shows how navigation, content, and detail areas emerge from a few building blocks.
Scala JS UI 1.0
Components
Forms
Data
Showcase surface
Navigation leads from the left, while the right side keeps room for the active component and its explanation.
Live demo
API
Notes
Elegant box layout
The core idea stays small and legible: nest containers, set spacing, place content.
Navigation
Toolbar
Content
Inspector
Readability
The structure reads from the outside in
First comes the page, then the zone, then the concrete row or column.
Stability
Spacing belongs to containers
Gap and padding describe the space, not every individual child.
Extension
New areas stay local
A later panel slots in as another container without reshaping existing elements.
VBox & HBox usage
The layout DSL stays close to the mental model of a UI sketch.
scala
vbox {
style { gap = "10px" }
hbox {
div { text("Left") {} }
div { text("Right") {} }
}
}