Skip to main content

Tairu protocol

The Tairu protocol uses a JSON structure with a top-level Tile component.

Content components

Content components define how the tile contents must be displayed. These contents can be rendered in different formats and do not support interactions.

Tile

The Tile component is the top-level component that must be provided by all handlers. It behaves as the Box component supporting its style and children, with additional metadata.

Tile properties

KeyTypeComment
titlestringHTML page title
descriptionstringHTML page description (optional)
childrenBox | Text | Image | Array<Box | Text | Image>
styleBox style objectoptional

Box

A Box is a container for other Box, Text and Image elements defined in its children property, optionally with a specific style.

Box properties

KeyType
childrenBox | Text | Image | Array<Box | Text | Image>
styleBox style object

Box style

KeyTypeComment
display"flex" | "none"Default: "none"
overflow"visible" | "hidden"Default: "visible"
objectFit"none" | "contain" | "cover"Default: "none"
opacitynumberMin: 0, max: 1
boxShadowstring
position"relative" | "absolute"Default: "relative"
topnumber
rightnumber
bottomnumber
leftnumber
widthnumberMin: 0
heightnumberMin: 0
minWidthnumberMin: 0
minHeightnumberMin: 0
maxWidthnumberMin: 0
maxHeightnumberMin: 0
marginnumber
marginTopnumber
marginRightnumber
marginBottomnumber
marginLeftnumber
paddingnumber
paddingTopnumber
paddingRightnumber
paddingBottomnumber
paddingLeftnumber
flexGrownumberMin: 0
flexShrinknumberMin: 0
flexBasisnumberMin: 0
flexDirection"row" | "row-reverse" | "column" | "column-reverse"Default: "row"
flexWrap"nowrap" | "wrap" | "wrap-reverse"Default: "wrap"
alignItems"flex-start" | "center" | "flex-end"
alignSelf"auto" | "flex-start" | "center" | "flex-end"
justifyContent"flex-start" | "center" | "flex-end" | "space-between" | "space-around"
gapnumberMin: 0
borderStyle"solid" | "dashed"
borderTopStyle"solid" | "dashed"
borderRightStyle"solid" | "dashed"
borderBottomStyle"solid" | "dashed"
borderLeftStyle"solid" | "dashed"
borderWidthnumberMin: 0
borderTopWidthnumberMin: 0
borderRightWidthnumberMin: 0
borderBottomWidthnumberMin: 0
borderLeftWidthnumberMin: 0
borderColorstring
borderTopColorstring
borderRightColorstring
borderBottomColorstring
borderLeftColorstring
borderRadiusnumber | stringMin: 0
borderTopLeftRadiusnumber | stringMin: 0
borderTopRightRadiusnumber | stringMin: 0
borderBottomLeftRadiusnumber | stringMin: 0
borderBottomRightRadiusnumber | stringMin: 0
backgroundColorstring
backgroundImagestring
backgroundPositionstring
backgroundSizestring
backgroundClip"border-box" | "text"
backgroundRepeat"repeat" | "repeat-x" | "repeat-y" | "no-repeat"Default: "repeat"

Text

Text properties

KeyType
childrenstring | number | null | Text | Array<string | number | null | Text>
styleText style object

Text style

KeyTypeComment
colorstring
fontFamilystring
fontSizenumber | stringMin: 0
fontWeightnumber | stringMin: 0
fontStylestring
textAlign"start" | "end" | "left" | "right" | "center" | "justify"Default: "start"
textTransform"none" | "uppercase" | "lowercase" | "capitalize"Default: "none"
textOverflow"clip" | "ellipsis"Default: "clip"
textDecorationstring
textShadowstring
lineHeightnumber | stringMin: 0
letterSpacingnumber | stringMin: 0
whiteSpace"normal" | "pre" | "pre-wrap" | "pre-line" | "nowrap"Default: "normal"
wordBreak"normal" | "break-all" | "break-word" | "keep-all"Default: "normal"
textWrap"wrap" | "balance"Default: "wrap"

Image

Image properties

KeyTypeComment
srcstringImage source (required)
altstringAlternative image description (required)

Input components

Tairu supports two types of inputs: as free text or using a defined set of options.

Options input

The options input defines a list of options items that can be selected by the user, either as a single choice or multiple choices based on the multiple value.

Options input properties

KeyTypeRequired?
type"options"Yes
optionsArray<{ label: string, value: string }>Yes
multiplebooleanNo

Text input

The text input can be freely set by the user, optionally with a default value and a placeholder. The secure option can be used to indicate the content of the input should be hidden when typing it.

Text input properties

KeyTypeRequired?
type"text"Yes
labelstringYes
placeholderstringNo
defaultValuestringNo
securebooleanNo

Action buttons

Tairu supports three types of actions, typically represented by buttons or similar components users can interact with.

DID submitting

This action can be used to submit the value of an input component to the Tile handler. The agent takes care of signing the input value along with the action state, if provided.

DID submitting properties

KeyTypeRequired?
type"did/submit"Yes
labelstringYes
stateRecord<string, any>No

DID signing

This action can be used to post server-defined data signed by the agent to the Tile handler. The agent takes care of signing the payload value along with the action state, if provided.

DID signing properties

KeyTypeRequired?
type"did/sign"Yes
labelstringYes
payloadRecord<string, any>No
stateRecord<string, any>No

URI opening

This action can be used to open the specified URI in a Web browser or other application.

URI opening properties

KeyTypeRequired?
type"uri/open"Yes
labelstringYes
uristringYes