Numable authoring docsthe same content is available in the terminal: `numable docs <topic>`中文

rcn-nodes — RCN node types and fields (generated)

The source of truth is the editor's field schema: every knob in the property panel is one row here, and the Notes column is the panel's own hint. Rules and idioms live in numable docs rcn; fields not listed here are silently dropped (e.g. there is no bold — pick a Bold typeface instead).

Node types

type Purpose Type-specific fields
layer Layer color
txt Text text textColor fontSize typeface alignmentH alignmentV maxLines lineSpacing lineBreak
img Image url urlHeaders scaleType
arc Arc color lineWidth startAngle sweepAngle useCenter
line Polyline color coverageColor lineWidth points
curves Curve color coverageColor lineWidth points
path Path d viewBox lineWidth scaleType fillRule lineCap lineJoin fillColor strokeColor clipPath mask
richText Rich text textColor fontSize typeface alignmentH alignmentV maxLines lineSpacing lineBreak spans
group Group (common fields only)
op Logic node action props

Common fields (all nodes)

Field Name Group Type / values Notes
id ID Layout string The name of this node inside this canvas; do not reuse a name. It is how another node finds it when it wants to sit against it (write {this name.r})
x X Layout number, unit pt How far from the parent's left edge. You can also place it against another node: {other node ID.r}+8 puts it to that node's right with a gap of 8
y Y Layout number, unit pt How far from the parent's top edge. You can also place it against another node: {other node ID.b}+8 puts it below that node with a gap of 8
w Width Layout number, unit pt;special values -1=auto The width. Choosing "auto" means it grows to fit the content (as wide as the text)
h Height Layout number, unit pt;special values -1=auto The height. Choosing "auto" means it grows to fit the content (as tall as the text needs)
events.onClick Tap · onClick Data navigation string or flow binding What happens when this block is tapped: go to a page / open a link, or run an action flow
events.onLongPress Long-press · onLongPress Data navigation string or flow binding What happens when a finger is held down, commonly used to pop up a menu
click Click event (legacy field, events wins) Data navigation string or flow binding The legacy-form tap event; it only applies when the onClick above is empty. Always use the one above for new content
maxWidth Max width Layout number, unit pt How wide it may grow when the width is set to "auto". Give text that can get long (titles, amounts) a limit so it does not burst the widget
maxHeight Max height Layout number, unit pt How tall it may grow when the height is set to "auto"
paddingLeft Padding left Layout number, unit pt How much space to leave between the content inside and this node's left edge
paddingTop Padding top Layout number, unit pt How much space to leave between the content inside and this node's top edge
paddingRight Padding right Layout number, unit pt How much space to leave between the content inside and this node's right edge
paddingBottom Padding bottom Layout number, unit pt How much space to leave between the content inside and this node's bottom edge
hide Hide Layout enum 0 / 1 / 2 Whether to hide this block. "Hidden, keeps its space" means it is invisible but still occupies its slot, so the nodes around it do not move; "Hidden, gives up its space" releases the slot and the content after it moves up. Commonly paired with ${} to show something only when there is data
zIndex Z-order Layout string The stacking order: a larger number sits on top of a smaller one. Left empty, nodes stack in the order they appear in the list on the left
bgColor Background Paint Style color Paint (light\ dark)
bgUrl Background image URL Style string The address of the background image. You can write ${} to take it from the data, or pick an image asset from inside the package
bgUrlHeaders Background image headers JSON Style JSON Extra request headers to send when fetching this background image, written as {"name":"value"}. Only needed when the image sits on a server that requires authentication
borderColor Border Paint Style color Paint (light\ dark)
borderWidth Border width Style number, unit pt How thick the border line is. A width with no color is invisible
cornerRadius Corner radius Style object {leftT,leftB,rightT,rightB} (a string makes the whole widget fail to render) How round the four corners are; you can set all four at once or each one separately. To round the images inside as well, also turn on "Clip children" below
shadowColor Shadow color Style color Paint (light\ dark)
shadowRadius Shadow blur Style number, unit pt How soft the shadow is — the larger the value, the more it spreads. 0 gives a hard-edged block of color
shadowDx Shadow X Style number, unit pt How far the shadow shifts to the right; a negative value shifts it left. Together with Y below it decides which side the light comes from
shadowDy Shadow Y Style number, unit pt How far the shadow shifts down; a negative value shifts it up
alpha Opacity Style string Overall opacity: 0 = fully transparent, 1 = fully opaque. The child nodes inside fade along with it
blendMode Blend mode Style enum source-over / multiply / screen / overlay / darken / lighten / pluslighter How this color mixes with whatever is underneath it. Normally leave it on the default (paint straight over); multiply is common for stacking dark shadows, and screen / lighter for brightening
rotate Rotation Style string How many degrees to rotate; a positive value is clockwise. It turns around the node's center by default; to use another pivot, set Pivot X / Y under Advanced
clip Clip children Style boolean (write "1"/"0") Whether to cut off the child content that falls outside this node. It must be on for rounded avatars and rounded covers, otherwise the image shows its square corners
translateX Translate X Advanced number, unit pt How far to nudge it right from where the layout put it (negative goes left). Use it for fine tuning; it does not move any other node
translateY Translate Y Advanced number, unit pt How far to nudge it down from where the layout put it (negative goes up)
scaleX Scale X Advanced string The horizontal scale factor: 1 = as is, 1.2 = 20% wider, 0.5 = half as wide
scaleY Scale Y Advanced string The vertical scale factor: 1 = as is. For a uniform scale, use the same value as above
pivotX Pivot X Advanced number, unit pt The point that rotation and scaling turn around (horizontally), measured from this node's left edge. Left empty it is the node's center (-1 also means the center)
pivotY Pivot Y Advanced number, unit pt The point that rotation and scaling turn around (vertically), measured from this node's top edge. Left empty it is the node's center (-1 also means the center)

layer fields

Field Name Group Type / values Notes
color Paint Content color Paint (light\ dark)

txt fields

Field Name Group Type / values Notes
text Text Content string The text to show. Write ${} to pull a value out of the data, such as ${item.title}; you can also mix the two: ${count} items today
textColor Text Paint Content color Paint (light\ dark)
fontSize Font size Content number, unit pt How large the text is. The unit is pt (the same scale as the system font size) — never write px
typeface Typeface Content enum OpenSans / OpenSans-Bold / NotoSansSC / NotoSansSC-Bold / DancingScript / DancingScript-Bold / Inter / Inter-Bold / Roboto / Roboto-Bold / DMSans / DMSans-Bold / Manrope / Manrope-Bold / Poppins / Poppins-Bold / SpaceGrotesk / SpaceGrotesk-Bold / BebasNeue / BebasNeue-Bold / Lora / Lora-Bold / SourceSerif4 / SourceSerif4-Bold / PlayfairDisplay / PlayfairDisplay-Bold / JetBrainsMono / JetBrainsMono-Bold / RobotoMono / RobotoMono-Bold / IBMPlexMono / IBMPlexMono-Bold / System / System-Bold Which font to use. ⚠️ To make text bold, pick the Bold variant here — there is no separate "bold" switch
alignmentH Horizontal alignment Content enum 0 / 1 / 2 Whether the text sits left / center / right within this area. You only see the difference when the node is wider than the text
alignmentV Vertical alignment Content enum 0 / 1 / 2 Whether the text sits top / center / bottom within this area. You only see the difference when the node is taller than the text
maxLines Max lines Content string At most how many lines to show; anything beyond is dropped. 1 forces a single line. Use it to keep text that can get long from bursting the widget
lineSpacing Line spacing Content number, unit pt How much extra space to leave between lines in multi-line text. Body text usually takes 2–6
lineBreak Wrap text Content boolean (write "1"/"0") On = long text wraps to the next line; off = one line only, anything past the edge is cut. ⚠️ It is also the ellipsis switch, and "left blank" is not the same as "set to 0": write 0 explicitly and set Max lines, and a "…" is appended where the text is cut; a node that leaves this field blank still wraps when the text is too long, but gets no dots. 1 = wraps, no dots. Also: with Max lines set, 0 here still wraps — it controls whether you get the "…", not whether the line can break. An auto-width node (width -1) grows to fit its content and never truncates, so it has no "…" either

img fields

Field Name Group Type / values Notes
url Image URL Content string The image address. You can pick an image asset from inside the package, or write ${} to take it from the data (such as a cover image returned by an API)
urlHeaders Image headers JSON Content JSON Extra request headers to send when fetching this image, written as {"name":"value"}. Only needed when the image sits on a server that requires authentication
scaleType Scaling Content enum fitXY / fitCenter / fitStart / fitEnd / centerCrop How to place the image or shape when its size differs from this area: fitXY stretches to fill (distorts) · fitCenter fits it in whole and centers it, leaving margins (no distortion; use this for icons) · fitStart / fitEnd fit it in whole, aligned to the start / end · centerCrop fills the area and crops the excess (no distortion; common for avatars and covers)

arc fields

Field Name Group Type / values Notes
color Paint Content color Paint (light\ dark)
lineWidth Line width Content number, unit pt How thick the line is: the arc's thickness (the ring width of a circular progress bar), the stroke of a path, or the line of a chart (usually 1–2). A width with no Paint is invisible
startAngle Start angle Content string The angle to start drawing from. 0 degrees is on the right (3 o'clock) and angles increase clockwise — to start from straight up (12 o'clock), write -90
sweepAngle Sweep angle Content string How many degrees to draw in total. 360 is a full circle; for a progress ring write ${progress percentage}*3.6
useCenter Close into a wedge Content boolean (write "1"/"0") On = both ends connect to the center, drawing a pie-chart wedge; off = only the arc itself is drawn (use this for a progress ring)

line fields

Field Name Group Type / values Notes
color Paint Content color Paint (light\ dark)
coverageColor Area Paint Content color Paint (light\ dark)
lineWidth Line width Content number, unit pt How thick the line is: the arc's thickness (the ring width of a circular progress bar), the stroke of a path, or the line of a chart (usually 1–2). A width with no Paint is invisible
points Points Content string The points the line passes through, given in x,y,x,y… pairs (relative to this node's top-left corner). ⚠️ Compute the coordinates in the data layer and pull the whole string in with ${}; do not pile up arithmetic here

curves fields

Field Name Group Type / values Notes
color Paint Content color Paint (light\ dark)
coverageColor Area Paint Content color Paint (light\ dark)
lineWidth Line width Content number, unit pt How thick the line is: the arc's thickness (the ring width of a circular progress bar), the stroke of a path, or the line of a chart (usually 1–2). A width with no Paint is invisible
points Points Content string The points the line passes through, given in x,y,x,y… pairs (relative to this node's top-left corner). ⚠️ Compute the coordinates in the data layer and pull the whole string in with ${}; do not pile up arithmetic here

path fields

Field Name Group Type / values Notes
d Path d Content string The outline of the shape, i.e. the path data from an SVG (M/L/C/Z…). Usually you copy the d string out of the SVG exported from the design file
viewBox viewBox Content string The size of the canvas that path was originally drawn on, written as four numbers like "0 0 24 24". ⚠️ Always copy it over together with the path from the SVG, or the shape comes out the wrong size or spills outside its bounds
lineWidth Line width Content number, unit pt How thick the line is: the arc's thickness (the ring width of a circular progress bar), the stroke of a path, or the line of a chart (usually 1–2). A width with no Paint is invisible
scaleType Scaling Content enum fitXY / fitCenter / fitStart / fitEnd / centerCrop How to place the image or shape when its size differs from this area: fitXY stretches to fill (distorts) · fitCenter fits it in whole and centers it, leaving margins (no distortion; use this for icons) · fitStart / fitEnd fit it in whole, aligned to the start / end · centerCrop fills the area and crops the excess (no distortion; common for avatars and covers)
fillRule Fill rule Content enum nonzero / evenodd When a shape overlaps itself, whether the inner loop is solid or hollow. The default is nonzero (essentially everything filled); pick evenodd when you want a doughnut with a hole in the middle
lineCap Line cap Content enum round / butt / square What the ends of a line look like: round is rounded (common for progress bars) · butt cuts flush · square is flat but extends half a line width further
lineJoin Line join Content enum round / miter / bevel What a corner of the line looks like: round is rounded · miter is a sharp point · bevel is a flattened corner
fillColor Fill Paint Content color Paint (light\ dark)
strokeColor Stroke Paint Content color Paint (light\ dark)
clipPath ClipPath JSON Advanced JSON Use another shape to cut this node into shape (anything outside that shape is not shown). Use it for irregular avatars and angled shapes
mask Mask JSON Advanced JSON Use another shape as a mask, letting its intensity decide where this node shows and where it fades out. Use it for faded edges

richText fields

Field Name Group Type / values Notes
textColor Text Paint Content color Paint (light\ dark)
fontSize Font size Content number, unit pt How large the text is. The unit is pt (the same scale as the system font size) — never write px
typeface Typeface Content enum OpenSans / OpenSans-Bold / NotoSansSC / NotoSansSC-Bold / DancingScript / DancingScript-Bold / Inter / Inter-Bold / Roboto / Roboto-Bold / DMSans / DMSans-Bold / Manrope / Manrope-Bold / Poppins / Poppins-Bold / SpaceGrotesk / SpaceGrotesk-Bold / BebasNeue / BebasNeue-Bold / Lora / Lora-Bold / SourceSerif4 / SourceSerif4-Bold / PlayfairDisplay / PlayfairDisplay-Bold / JetBrainsMono / JetBrainsMono-Bold / RobotoMono / RobotoMono-Bold / IBMPlexMono / IBMPlexMono-Bold / System / System-Bold Which font to use. ⚠️ To make text bold, pick the Bold variant here — there is no separate "bold" switch
alignmentH Horizontal alignment Content enum 0 / 1 / 2 Whether the text sits left / center / right within this area. You only see the difference when the node is wider than the text
alignmentV Vertical alignment Content enum 0 / 1 / 2 Whether the text sits top / center / bottom within this area. You only see the difference when the node is taller than the text
maxLines Max lines Content string At most how many lines to show; anything beyond is dropped. 1 forces a single line. Use it to keep text that can get long from bursting the widget
lineSpacing Line spacing Content number, unit pt How much extra space to leave between lines in multi-line text. Body text usually takes 2–6
lineBreak Wrap text Content boolean (write "1"/"0") On = long text wraps to the next line; off = one line only, anything past the edge is cut. ⚠️ It is also the ellipsis switch, and "left blank" is not the same as "set to 0": write 0 explicitly and set Max lines, and a "…" is appended where the text is cut; a node that leaves this field blank still wraps when the text is too long, but gets no dots. 1 = wraps, no dots. Also: with Max lines set, 0 here still wraps — it controls whether you get the "…", not whether the line can break. An auto-width node (width -1) grows to fit its content and never truncates, so it has no "…" either
spans Spans JSON Content JSON Segmented text: several runs in one sentence with different colors / sizes / weights (such as making the number red in "up +2.3%"). Write one object per run; they join in order into the whole sentence

op fields

Field Name Group Type / values Notes
action Action Data enum for / forEach / if / set / remove / include What this logic node does: forEach renders an array as many copies · for loops a fixed number of times · if renders only when the condition holds · set defines a variable for later use · remove drops it when the condition holds · include pulls in another canvas
props Props JSON Data JSON The arguments for the action above, written as {"name":"value"}. For example forEach needs items (which array to loop) and key (what each item is called); if needs cond (the condition)