QORMQORM v0.9.8 api Get started

Widget Catalog

Auto-generated from the node() switch in internal/render/render.go (TestWidgetCatalogInSync) — do not edit by hand.

Each widget lists its canonical name first; the rest are equivalent aliases. Prefer the canonical name when writing apps.

CanonicalAliasesRenderer
accordionaccordion
actionsheetcupertinoactionsheetactionSheet
activityindicatorcupertinoactivityindicatoractivityIndicator
alertbanneralert
alertdialogcupertinoalertdialogalertDialog
animatedcontaineranimated_container, animatedpadding, animatedalign, animatedpositionedanimatedContainer
animatedopacityanimatedOpacity
appbarappbar
aspectratioaspectRatio
autocompleteautocomplete
avataravatar
backbuttonbackButton
badgebadge
barometerhwList
batteryhwList
biometricfaceid, fingerprintbiometric
bluetoothhwList
boardboard
bottomappbarbottomAppBar
bottomnavbottomnavigationbar, navigationbarbottomNav
breadcrumbbreadcrumb
brightnesshwAdjust
buttonbutton
calendarhwList
cameracamera
carouselcarousel
chartchart
checkboxswitchcheckbox
chipinputchip, choicechip, filterchipchip
circularprogresscircularprogressindicatorcircularProgress
clipboardhwList
closebuttoncloseButton
compassheadinghwList
contactshwList
contextmenucupertinocontextmenucontextMenu
datatabledatatable
datepickercupertinodatepickerdatepicker
descriptionskeyvaluedescriptions
deviceinfohwList
dismissibledismissible
dividerdivider
dockbadgedockBadge
draggablelongpressdraggabledraggable
dragtargetdroptargetdragTarget
drawerdrawer
dropdownbuttondropdownButton
emptyempty
expansiontileexpansionpanelexpansionTile
fabfloatingactionbuttonfab
fieldformfieldfield
filepickerfilehwList
formform
gesturedetectorgesture, inkwellgestureDetector
gridviewgridView
hapticshwList
iconicon
ignorepointerabsorbpointerignorePointer
imageimage
indexedstackindexedStack
inputinput
insetssafeareahwList
keepawakewakelockhwList
largetitlecupertinolargetitle, sliverappbarlargeTitle
limitedboxlimitedBox
linklink
listlist
listsectioncupertinolistsectionlistSection
listtilelistitemlistTile
locationgeolocationlocation
loginitemstartatloginloginItem
materialsteppermaterialStepper
menumenu
modaldialogmodal
monthviewcalendarview, datepickercalendarmonthView
navigationdrawernavigationDrawer
navigationrailnavigationRail
networkhwList
nfchwList
notifynotify
offstageoffstage
openurlopenlinkhwList
orientationhwList
pageviewpageView
paginationpagination
pathpath
pedometerhwList
photopickerphotohwList
pickercupertinopickerpicker
progressprogress
proximityhwList
qrscanbarcodehwList
radioradio
rangesliderrangeSlider
ratingrating
recorderaudiorecorderrecorder
refreshindicatorrefreshIndicator
richtextrichText
scaffoldscaffold
screenrecordscreenrecordinghwList
screensdisplaysscreens
screenshotscreencapturehwList
searchbarsearchbar
securestoragekeychainhwList
segmentedslidingsegmentedcontrol, cupertinoslidingsegmentedcontrolsegmented
selectdropdownselectBox
selectabletextselectableText
sensorssensors
sharehwList
sheetbottomsheet, draggablesheet, draggablescrollablesheet, modalbottomsheetsheet
skeletonskeleton
sliderslider
slotslot
snackbarsnackbar
spacerspacer
spinnerspinner
statmetricstat
stepssteppersteps
storagehwList
sttspeechinputhwList
swipeactionsswipeactionswipeActions
switchlisttilecheckboxlisttile, radiolisttilecontrolTile
systemmodesmodeshwList
tabletable
tabstabs
tagtag
texttext
textareatextarea
textformfieldtextFormField
tilemaptilemap
timelinetimeline
timepickercupertinotimepickertimepicker
timertimer
tooltiptooltip
torchflashlighthwList
transformrotatedboxtransform
treetree
ttsspeakhwList
verticaldividerdivider
vibratehwList
videovideo
videocapturehwList
volumehwAdjust
webviewwebview
whenwhen
wifihwList
wrapwrap

RichText Widget

The richtext widget allows displaying mixed-style text within a single paragraph. It takes a spans array, where each span is an object containing text and style.

{
  "type": "richtext",
  "spans": [
    { "text": "Hello ", "style": { "color": "red" } },
    { "text": "World", "style": { "fontWeight": "bold" } }
  ]
}

Video Widget

The video widget allows displaying video content. You can configure properties such as src, loop, autoplay, and muted.

{
  "type": "video",
  "src": "https://www.w3schools.com/html/mov_bbb.mp4",
  "loop": true,
  "autoplay": true,
  "muted": true
}

Accessibility (A11y)

Canvas nodes support accessibility labels via the aria-label property. These are critical for making apps usable with screen readers. You can apply an aria-label to any interactive node or structural container to provide a descriptive label.

{
  "type": "button",
  "aria-label": "Play the game",
  "children": [
    { "type": "icon", "props": { "icon": "play" } }
  ]
}