ui

.acknowledge Element shows a message that need to be explictly acknowledged/di... .acknowledge-once Element shows a message that need to be explictly acknowledged. O... clear-acknowledgement Action clears all prior user acknowledgements

animate Action applies a named CSS animation keyframe to an element fadein Action fades element in fadeout Action fades an element in hide Action hide specified element pulse Action pulses an element (subtle scale animation for attention) scalein Action scales element in (grows from smaller size) scaleout Action scales element out (shrinks to smaller size) shake Action shakes an element (error feedback animation) show Action shows a hidden ui element slidein Action slides element into view from specified direction slideout Action slides element out of view to specified direction spin Action spins/rotates an element continuously or once

.app-icon Element Display the configured app icon from manifest state app-icon Action Set the current app icon configuration get-app-icon-url Action Get the current app icon URL

.avatar Element Versatile avatar element supporting images, icons, and in... .dicebear-avatar Element Avatar using Dicebear API with various style sets .icon-avatar Element Avatar with icon content .image-avatar Element Avatar with image from app registry, variable, or URL .initials-avatar Element Avatar with initials extracted from text

.background-animated-gradient Element an animated background gradient .background-color Element sets background color .background-gradient Element sets a background gradient .background-image Element sets a background image for the viewport .background-video Element shows MP4 video as background

.barcode128 Element displays a Code 128 barcode from text content .qrcode Element displays a scannable QR code from text or URL .upc Element displays a UPC-A barcode from 12-digit product code

browser-version Action returns info about the current browser environment open-browser Action opens a browser with specified URL open-browser-window Action opens a new browser window

.back-button Element displays a back button for navigation .busy-button Element a button with a busy indicator .button Element Creates a clickable button element .button-bar Element Groups multiple buttons together in a horizontal bar layout .circle-button Element a circular button .continue-button Element a button that continues an app in wait state .icon-button Element this is an icon button .nav-button Element basic mobile navigation button with icon and a label

.card Element a card container element: children will appear inside .card-background Element background image for a .card container

.date-chip Element Calendar-style date chip showing month and day in a compa... .date-chip-range Element Display a range of date chips in a responsive grid layout .day-chip Element Day chip showing weekday name and day number (no month) .statistic-chip Element Display a statistic value with label in a compact chip fo...

.color-palette Element displays 12 shades of a color family palette .color-swatch Element displays one to three color swatches color Action defines a color or alias dynamic-color-theme Action sets a dynamic color theme from an image or base color list-color-palettes Action lists color palette names list-colors Action returns a list of rhappsody colors set-brand-color Action sets the brand color

.chip Element display a chip .copy-textbox Element display a text box with a copy icon that allows users to ... .copyright Element displays a copyright phrase with the current year

.arrow-divider Element Arrow/chevron decorative divider (fixed to viewport by de... .banner-divider Element displays an edge to edge colored bar with centered text t... .book-divider Element Open book decorative divider (fixed to viewport by default) .curve-divider Element Smooth curved decorative divider (fixed to viewport by de... .divider Element creates a horizontal divider line with optional label .divider-bar Element displays an edge to edge colored bar with centered text t... .multilayer-divider Element Multiple stacked waves decorative divider (fixed to viewp... .shape-divider Element shape divider .tilt-divider Element Diagonal slanted decorative divider (fixed to viewport by... .triangle-divider Element Triangle-peaked decorative divider (fixed to viewport by ... .wave-divider Element Wave-shaped decorative divider (absolute positioned by de... .zigzag-divider Element Zigzag pattern decorative divider (fixed to viewport by d...

.checkbox-field Element Creates a checkbox input with a clickable label .fieldset Element Groups related form fields together with optional label .password-field Element Creates a password input field with hidden text .radio-field Element Creates a radio button input with selectable options .select-field Element Creates a dropdown selection field with multiple options .text-field Element Creates a single-line text input field .textbox-field Element Creates a multi-line text input area for longer content

.font-sample Element Shows a preview of what text looks like in a font font Action Load fonts and configure typography (text, title, dropcap... list-fonts Action Gets a list of all fonts currently loaded in your app

.board Element Game board grid with explicit columns and rows .grid Element CSS Grid container with flexible column count .grid-cell Element grid cell (must be defined after grid) .tile Element Board cell/tile for placement in .board grids

.a Element Creates a clickable link that navigates to web pages .btn Element Creates a clickable button that can trigger actions .details Element Creates an expandable details section with collapsible co... .dialog Element Creates a modal dialog popup for user interaction .div Element Creates a flexible container for organizing content .hr Element Creates a horizontal line to separate content sections .iframe Element Embeds external web pages or content into your app .img Element Displays images from web urls or your media collection .input Element Creates a text input field for user data entry .span Element Creates inline text elements for styling and formatting .textarea Element Creates a multi-line text input area for longer text

tab-badge Action Dynamically update the browser tab favicon

.icon Element a basic icon .icon-with-label Element an icon with a label to the left or below it clear-icons Action clears offline/caches icons from device icon Action defines an icon the app will use including optional aliases list-icons Action lists the icons stored and available for offline use

.embed Element Embed external content via iframe element with secure san...

.10x1-image Element an image with a 10x1 aspect ratio (banner!) .12x1-image Element an image with a 12x1 aspect ratio (mega banner!) .16x9-image Element an image with a 16x9 aspect ratio .1x1-image Element an image with a 1x1 aspect ratio (square!) .1x2-image Element an image with a 1x2 aspect ratio (tall!) .1x3-image Element an image with a 1x3 aspect ratio (very tall!) .1x4-image Element an image with a 1x4 aspect ratio (extremely tall!) .1x6-image Element an image with a 1x6 aspect ratio (super tall!) .1x8-image Element an image with a 1x8 aspect ratio (ultra tall!) .2x1-image Element an image with a 2x1 aspect ratio (wide!) .2x3-image Element an image with a 2x3 aspect ratio (portrait!) .3x1-image Element an image with a 3x1 aspect ratio (very wide!) .3x2-image Element an image with a 3x2 aspect ratio (landscape!) .4x1-image Element an image with a 4x1 aspect ratio (extremely wide!) .4x3-image Element an image with a 4x3 aspect ratio (classic!) .4x5-image Element an image with a 4x5 aspect ratio (standard print!) .5x4-image Element an image with a 5x4 aspect ratio (photo print!) .6x1-image Element an image with a 6x1 aspect ratio (super wide!) .6x9-image Element an image with a 6x9 aspect ratio (postcard!) .8x1-image Element an image with a 8x1 aspect ratio (ultra wide!) .circle-image Element small circlular image .golden-image Element an image with golden ratio aspect (1.618:1!) .image Element base image with its original aspect ratio .image-button Element an image button .image-title Element displays title text on top of an image +tint Action Applies a color tint overlay effect to images app-image Action Saves images locally on the device for offline use clear-image Action Removes a saved image from your device's local storage clear-images Action Removes all cached images from local device storage delete-app-image Action Removes an image from your app's image collection image Action Loads an image from a URL and stores it for future use list-app-images Action Gets a list of images available in your app list-images Function lists images saved in IDB using the set-image action resize-image Action Resizes images to specific dimensions for web or email use save-app-image Action saves an app image set-image Action sets/defines an image tag upload-app-image Action Uploads an image for use within your app interface

.inline-badge Element Inline badge/tag that renders within parent text element .inline-button Element Inline button that renders within parent text element .inline-link Element Inline link that renders within parent text element - nav... .inline-text Element Inline text that renders within parent text element, inhe... .inset-aside Element Floated aside block that text wraps around, for side note... .inset-image Element Floated image with text wrapping around it

.hotkey Action Display keyboard shortcut visually and register keypress ... disable-keypress Action Suspend all keyboard shortcut handlers enable-keypress Action Resume all keyboard shortcut handlers enable-shell-shortcut Action enable the shell shortcut key hide-hotkeys Action Hide all keyboard hotkey indicators without layout shift keypress Action Handle arbitrary keypress events show-hotkeys Action Show all keyboard hotkey indicators

.list Element list .list-item Element list item

.loading-bar Element Animated loading bar at the top of the screen (YouTube-st... .loading-dots Element Animated loading dots indicator .loading-overlay Element Loading overlay with spinner .placeholder-circle Element Animated circle placeholder for avatars and icons .placeholder-line Element Animated line placeholder for loading text .placeholder-rect Element Animated rectangle placeholder for images and cards .spinner Element shows a spinner icon hide-loading Action Hide all active loading indicators

.marquee Element Scrolling ticker-tape banner for text, variables, or groups

.menu Element Creates a dropdown menu container that holds menu items .menu-item Element Creates a clickable menu item with label, optional icon/i... close-menu Action Closes a menu by removing the 'active' class. Targets nea... open-menu Action Opens a menu by adding the 'active' class. Targets neares... toggle-menu Action Toggles a menu open or closed. If open, closes it. If clo...

.alt Element sets the alt text modifier for an element .change Element sets a change event modifier .click Element sets a click modifier .double-click Element sets a double-click modifier .enter Element sets a enter key modifier for an input field .escape Element sets an Escape key modifier .goto Element sets a goto modifier .gradient Element adds a gradient effect to an element .help Element sets a help text modifier for an element .hide Element hides the element after a previous modifier action .hover-over Element sets a hover over modifier .link Element sets a link modifier .navto Element sets a navto modifier .overlay Element overlays text or other element on top of another (usually... .placeholder Element sets a placeholder for an input element .right-click Element sets a right-click modifier .run Element sets a run modifier .shadow Element Adds drop shadow effect to the preceding element .tint Element tints an image with the specified color .tiptext Element sets tooltip text modifier for an element .wait Element waits on previous modifier action before continuing .when-load-complete Element modifier for when load complete event

.number Element display a number .pct-change Element Display percentage change between two numbers with color-...

.bottom-panel Element Slide-up panel from bottom of screen .left-panel Element Slide-in panel from left of screen .popup Element Popup overlay with close functionality and backdrop .right-panel Element Slide-in panel from right of screen .screen Element Basic screen container with z-index and color support .splash Element Splash screen with auto-dismiss and transitions .top-panel Element Slide-down panel from top of screen clear-screen Action Clear the app UI screen close-panel Action Close and remove the current panel with animation hide-panel Action Hide the current panel with animation (keeps in DOM) hide-splash-screen Action Hide the active splash screen if present show-panel Action Show a hidden panel with animation

.paragraph Element a paragraph text container .paragraph-text Element inline paragraph text or value

.bottom Element Fixed position container at bottom-center of viewport .bottom-left Element Fixed position container at bottom-left of viewport .bottom-right Element Fixed position container at bottom-right of viewport .left Element Fixed position container at middle-left of viewport .right Element Fixed position container at middle-right of viewport .top Element Fixed position container at top-center of viewport .top-left Element Fixed position container at top-left of viewport .top-right Element Fixed position container at top-right of viewport clear-position Action Remove a position container from the DOM hide-position Action Hide a position container (display:none but keep in DOM) show-position Action Show a hidden position container

.hide-in-progress Element hides the .show-in-progess element .progress-bar Element Display a horizontal progress bar with customizable appea... .progress-circle Element ... .progress-circle-with-value Element shows a progress circle with percent complete value in ce... .show-in-progress Element shows full screen in progress overlay spinner with an opt...

.rhappsody-logo Element shows rhappsody logo rhappsody-admin-auth Action Set Rhappsody admin authentication credential (encrypted ... rhappsody-api-key Action Set Rhappsody platform API key (encrypted at compile time) rhappsody-app-auth Action Set Rhappsody app authentication credential (encrypted at... rhappsody-app-manager-auth Action Set Rhappsody app manager authentication credential (encr... rhappsody-app-user-auth Action Set Rhappsody app user authentication credential (encrypt... rhappsody-instance Action Set Rhappsody platform instance name rhappsody-owner-auth Action Set Rhappsody owner authentication credential (encrypted ...

.live-search Element live search (on each character) .search Element a search line input box

.settings Element iOS 18 style settings section container with optional header .settings-item Element iOS 18 style settings item row with icon, label, and opti... .settings-toggle Element iOS 18 style settings toggle row with icon, label, and sw...

shift-down Action Set a vertical shift-down value in state shift-left Action Set a horizontal shift-left value in state shift-right Action Set a horizontal shift-right value in state shift-up Action Set a vertical shift-up value in state

.bluesky Element shows a bluesky icon link .facebook Element shows a facebook icon link .github Element shows a github icon link .instagram Element shows an instagram icon link .linkedin Element shows a linkedin icon link .twitter Element shows a twitter/X icon link .youtube Element shows a youtube icon link

.filler Element fills available space in a row .spacer Element defines a spacer hide-spacing Action Remove dotted borders from spacer elements (undo show-spa... show-spacing Action Toggle dotted borders on all spacer elements for debuggin...

.confetti Element shows confetti .corner-banner Element a fixed corner diagonal banner in the upper right of the ...

.led Element LED indicator circle - on (filled) or off (border only)

default-style Action Sets default styles to apply to all elements of a specifi... space-between-lines Action Adjusts vertical spacing between lines of text for better... style Action Defines custom styles that can be applied to elements

count-rows Action Count the number of rows in a table create-table Action creates a new table duplicate-rows Action Find rows with duplicate values in a column each-row Action Get array of row indices for iteration fill-column Action Fills all rows in a table column with the same value has-row Action Check if a row exists at a specific index merge-tables Action Merge multiple tables into one by combining rows sort-table Action sorts your table data by any column you choose unique-rows Action Get unique rows based on column value, removing duplicates

.aside Element a stand alone block of text with additional explanation .callout Element displays large, bold, centered text for marketing callouts .fineprint Element displays teeny-tiny text! .handwriting Element simulates hand or script written text (cursive) .signature Element text that mimics a handwritten signature .tagline Element a huge large tagline. Keep it under 10 words. Shorter is ... .teaser-text Element displays text with a fade-out effect for content preview ... .text Element displays text in the UI .title Element a text title

.validate-email Element validates input is valid email ensure-email Action Checks that the input field contains a valid email address is-array Action Checks if a value is an array type is-boolean Action Checks if a value is a boolean type is-number Action Checks if a value is a number type is-object Action Checks if a value is an object type is-string Action Checks if a value is a string type is-valid-email Action Checks if a value follows valid email format rules is-valid-phone Action Checks if a value looks like a valid phone number

.mobile-app-view Element mobile app view with simple header and footer nav