JSX (dashboard)
The Membrane dashboard uses a custom JSX implementation. This reference page covers all valid elements and styles.
We use flex layout for styling, so your existing mental model from CSS Flexbox should mostly apply here.
Elements
Section titled “Elements”Base props
Section titled “Base props”All elements except for string can accept these props:
style?: valid properties specific by element (see below)children?: child element(s), can bestring | number | boolean | null | undefinedor another JSX elementkey?: string | number: unique identifier for element in liststooltip?: string: Helpful text that appears when hovering over the element
A vertical container element.
Props
style?: accepts container, flex, sizing, and box styleslink?: Gref: links element and all its descendents in the UI to a graph node- All base props
A horizontal container element.
Props
style?: accepts container, flex, sizing, and box styleslink?: Gref: links element and all its descendents in the UI to a graph node- All base props
<text>
Section titled “<text>”A text element.
Props
style?: accepts flex, sizing, and box stylesnumberOfLines?: dictates maximum number of lines to display before truncatingformat?: "markdown" | string: content format - “markdown” renders the content as markdown- All base props
<string>
Section titled “<string>”A string element for rendering scalar values. Lower level than <text>.
Props
gref: reference to the value to be renderedvalue?: Gref: Text to be rendered
<button>
Section titled “<button>”A clickable button element.
Props
style?: accepts container, flex, sizing, and box stylesaction?: reference (gref) to the action to invoke when clicked- All base props
<image>
Section titled “<image>”An image display element.
Props
style?: accepts container, flex, sizing, and box stylessource?: reference (gref) to the image URL to display, or string literal URL- All base props
<embed>
Section titled “<embed>”An element for embedding complex data structures.
Props
style: accepts container, flex, sizing, and box stylesgref: reference (gref) to the data to be embeddedcompact?: renders a compact view for a block, if there is one- All base props
Container styles
Section titled “Container styles”Space between child elements. string | number
alignItems
Section titled “alignItems”Alignment of children along the cross axis. "start" | "end" | "flex-start" | "flex-end" | "center" | "stretch"
justifyContent
Section titled “justifyContent”Alignment of children along the main axis. "start" | "end" | "flex-start" | "flex-end" | "center" | "space-around" | "space-between" | "stretch"
overflowX
Section titled “overflowX”Horizontal overflow behavior. "visible" | "hidden" | "scroll"
overflowY
Section titled “overflowY”Vertical overflow behavior. "visible" | "hidden" | "scroll"
dividers
Section titled “dividers”Control the appearance of dividers (lines/separators), which containers render between items by default. "none" | "thin" | "medium" | "thick"
Text styles
Section titled “Text styles”Text color. string
fontSize
Section titled “fontSize”Text size - one of predefined sizes. "small" | "medium" | "large" | "x-large"
textAlign
Section titled “textAlign”Horizontal text alignment. "left" | "right" | "center"
Flex styles
Section titled “Flex styles”flexShrink
Section titled “flexShrink”Controls how much an element will shrink relative to others (0.0 to 1.0). number
flexBasis
Section titled “flexBasis”Sets the initial main size of the element before growing/shrinking. "auto" | string
flexGrow
Section titled “flexGrow”Controls how much an element will grow relative to others (0.0 to 1.0). number
flexDirection
Section titled “flexDirection”Sets the direction of the flex container’s main axis. "row" | "row-reverse" | "column" | "column-reverse"
alignSelf
Section titled “alignSelf”Overrides the alignItems value for this specific element. "start" | "end" | "flex-start" | "flex-end" | "center" | "stretch"
Sizing styles
Section titled “Sizing styles”Element width (px, %, or other CSS units). string | number
height
Section titled “height”Element width (px, %, or other CSS units). string | number
Box styles
Section titled “Box styles”background
Section titled “background”Background color - “auto” generates a color automatically. "auto" | string
border
Section titled “border”Border width. string | number
borderRadius
Section titled “borderRadius”Border corner radius. string | number
borderColor
Section titled “borderColor”Border color - “auto” generates a color automatically. "auto" | string
Distance from the left edge. string | number
Distance from the top edge. string | number
Distance from the right edge. string | number
bottom
Section titled “bottom”Distance from the bottom edge. string | number
padding
Section titled “padding”Space inside the element between content and border. string | number
margin
Section titled “margin”Space outside the element between border and adjacent elements. string | number
opacity
Section titled “opacity”Opacity of the element and its descendants. Must be between 0.0 to 1.0. string | number