The Rich Text node allows you to add text to the screen with several formatting options (we call Markdown), such as managing paragraphs, adding bullet points, displaying images or even links in the text.

You can then apply the same formatting properties as normal text: font type and style, size, color, highlighting, alignment...

Components

Text

Text defines the text value, in other words, which text to display.

Value

Allows you to set the text content to display.

Formatting

Formatting controls how the text is visually rendered and formatted.

Font

Allows you to choose a font from Google Font. If a font has different variant (italic, bold...) you can specify which one to use.

Size

The size of the font in pixels.

Color

The color of the text.

Decoration

Allows you to underline or strike through the text.

Align

Specify the alignment of the text:

left: align the text to the left.
center: center the text.
right: align the text to the right.
justified: justify the text.

Style

Style handles the general visual properties applied to this node.

Background

Control the background (image, color or gradient) of the node.

Opacity

Control the opacity of the node.

Radius

Controls the radius of the rounding of the corners of the outer shape of the node. You can either set the radius for all corners (top left, top right, bottom left, bottom right) or each one individually.

Border

Controls the shape, color and thickness of the border of the node.

thickness: how thick the border is. You can either set thickness for all borders (top, left, right, bottom) or each one individually.
shape: the style of the border.
color: the color of the border.

Shadows

Allow you to add one or more shadows to a node. Each shadow is defined by:

type: whether the shadow is inner or outer the box of the node.
x: specifies the horizontal distance. Negative values place the shadow to the left of the element.
y: specifies the vertical distance. Negative values place the shadow above the element..
blur: the larger this value, the bigger the blur, so the shadow becomes bigger and lighter.
spread: positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.

Blur

Apply the blur on the node's background only, to create iOS style glass effect. The bigger the value, the blurrier it is.

Layout

Layout allows you to place and position your node dependings on its siblings.

Width

Controls the width of the node.

px: sets the width of the node in pixel.
%: sets the width of the node in percentage relative to its parent's width.
fit: automatically determines the width of the node according to the width of its content.
grow: specifies how much of the remaining space of the parent should be assigned to the node.

Height

px: sets the height of the node in pixel.
%: sets the height of the node in percentage relative to its parent's width.
fit: automatically determines the height of the node according to the width of its content.
grow: specifies how much of the remaining space of the parent should be assigned to the node.

Top

Controls the top margin between the node and its neighbor.

px: set the margin in pixel.
%: set the margin in percentage relative to its parent's width.
auto: automatically sets the margin to the remaning space within its parent. If there are more nodes with margin top sets at auto, the remaining space is equally divided between each node.

Right

Controls the right margin between the node and its neighbor.

px: set the margin in pixel.