ZeroZ Stack · Components
The component model is programmatic, i.e. you write new Button("Send") rather than a template, and it is styled with Tailwind and DaisyUI. The 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 that you want 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 meant as an orientation. The generated API documentation ↗ is the authoritative reference, so check there when the two disagree.
Building views
Layouts implement HasComponents and nest inside one another. VerticalLayout, HorizontalLayout and FormLayout take care of the Flexbox and Grid CSS for you, so you add children and compose fairly complex screens entirely in Java.
If you prefer markup for a complicated 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 that implements HasValue can be bound to a bean field through Binder. It reads the bean into the fields, validates on every change, writes valid input back, and renders the error states onto the components without you doing anything more.
Component reference
Layouts implement HasComponents and nest inside one another, so you 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 sectionsJoinConnects grouped elements without gapsFlavourWrapperHosts TeaVM Flavour HTML templatesFlexComponentBase layout class for flexbox containersEvery input implements HasValue, so it binds to a bean field through Binder, with 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 up 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 statistic to a virtualised list, all rendered 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, whether 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