ZeroZ Stack · Components
A programmatic component model — new Button("Send"), not a template — styled with Tailwind and DaisyUI. Components live in the client's WebAssembly heap, so the server holds no DOM state for them. There is no HTML file and no CSS file in a ZeroZ Stack application unless you decide to write one.
var form = new VerticalLayout( new TextField("Name").bind(user::getName, user::setName), new Select<Role>("Role").setItems(Role.values()), new Button("Save").onClick(e -> users.save(user)) );
This page is an orientation — the generated API documentation ↗ is authoritative.
Building views
Layouts implement HasComponents and nest hierarchically. VerticalLayout, HorizontalLayout, and FormLayout manage Flexbox and Grid for you — add children and compose complex UIs entirely in Java.
Prefer markup for a complex structure? FlavourWrapper binds a TeaVM Flavour HTML template while keeping type safety and data binding.
var main = new VerticalLayout(); main.add(new CardTitle("User Registration")); var form = new FormLayout(); form.add(new TextField("Name"), new TextField("Email")); var actions = new HorizontalLayout(); actions.add(new Button("Submit"), new Button("Cancel")); main.add(form, actions);
var binder = new Binder<User>(); binder.forField(nameField) .asRequired("Name is required") .bind(User::getName, User::setName); // load a bean — fields populate, edits write back binder.setBean(user);
Data binding
Any component implementing HasValue binds to a bean field through Binder. It reads the bean into the fields, validates on change, writes valid input back, and renders error states onto the components automatically.
Component reference
Layouts implement HasComponents and nest hierarchically — add children and compose the whole view in Java.
DivGeneric block-level containerSpanGeneric inline containerVerticalLayoutArranges children in a vertical columnHorizontalLayoutArranges children in a horizontal rowFlexLayoutFlexbox container with custom flex propertiesGridLayoutCSS grid container for two-dimensional layoutsFormLayoutResponsive layout for form fields and labelsScrollerAdds scrollbars when content overflows its boundsSplitPaneTwo resizable panels with a dividerStackLayout utility for overlapping componentsDividerVisual separator between sectionsJoinSeamlessly connects grouped elementsFlavourWrapperHosts TeaVM Flavour HTML templatesFlexComponentBase layout class for flexbox containersEvery input implements HasValue, so it binds to a bean field through Binder — validation and error states included.
TextFieldSingle-line text inputTextAreaMulti-line text input areaCheckboxBoolean toggle for individual optionsRadioButtonGroupSet of mutually exclusive radio optionsSelectDropdown for a single item from a collectionRangeSlider for numeric values within a rangeRatingInteractive star-based rating selectorToggleSwitch — alternative to a checkboxFileInputSelect files from the user's systemActions and navigation — from a single button to a full navigation shell.
ButtonStandard clickable buttonLinkStandard hyperlink for navigationNavbarStandard top navigation headerBottomNavigationMobile nav bar fixed to the bottomBreadcrumbsCurrent navigational hierarchy and pathMenuList of navigational or action itemsDropdownContextual overlay menu from an anchorContextMenuPopup menu from right-click / long-pressTabSelectable sections in a tabbed interfacePaginationNavigate through paginated datasetsStepsWizard-like progression through a sequenceSwapToggles between two states or icons on clickFrom a single stat to a virtualized list — data display without leaving the Wasm heap.
TableStructured grid for tabular dataKeyedListList that manages DOM nodes by keyVirtualScrollerRenders only visible items for large listsCardBounded container for related contentCardTitle / CardActionsSub-components for Card structureAccordionExpandable/collapsible list of panelsCollapseGeneric expand/collapse containerStatProminent statistic or metricKpiTileDashboard tile for a KPISparklineSmall inline trend chartTimelineLinear representation of events by timeLaneTimelineTimeline segmented into multiple lanesPropertyGridGrid of key-value object propertiesDiff / DiffViewSide-by-side text or file differencesCarouselSlideshow for cycling through elementsChatBubbleA single message in a conversationStreamingTextText that streams in dynamicallyMarkdownViewRenders Markdown safely into HTMLCodeBlockStyled container for source codeSvgCanvasContainer for drawing SVG graphicsAvatarUser or entity with an image or initialsBadgeSmall label for counts or statusIconScalable vector icon componentKbdVisual styling for keyboard inputCountdownTimer counting down to an eventTokenMeterVisualization for API token usageHeroLarge, prominent landing bannerFooterStandard page footer elementFeedback and overlays — transient, modal, or ambient.
AlertMessage banner for important informationToastBrief, auto-expiring notificationDialogModal overlay for critical interactionDrawerSliding side panel for navigationTooltipInformational popup on hoverLoadingSpinner for a background processProgress / RadialProgressLinear and circular progress barsSkeletonPlaceholder screen while data loadsEmptyStatePlaceholder shown when there is no dataIndicatorMarker attached to another elementStatusDotColored status indicator (online/offline)Base classes, mixins, device frames and utilities the rest of the library is built from.
ComponentBase class for all UI elementsAbstractFieldFoundation for input componentsHasComponentsInterface for containers of childrenHasValueInterface for data-bindable componentsHasSize / HasStyle / HasText / HasEnabledMixins for standard propertiesFocusableComponents that can receive keyboard focusClickEvent / ComponentEventDOM & custom event infrastructureDomListenerRegistration / EventListenerEvent listener plumbingMaskShapes or clips elements (e.g. circular)ThemeControllerSwitches application themes (light/dark)PhoneMockup / BrowserMockupStylized device / window framesWindowMockup / CodeMockupWindow and code-editor framesResizerDrag handle for resizable containersJsWrapper for custom JavaScript execution