OptionalalignDefines how lines are distributed along the cross axis when flexWrap is WRAP or WRAP_REVERSE.
Has no effect when there is only one line of flex items.
AUTO, FLEX_START, CENTER, FLEX_END, STRETCH, BASELINE, SPACE_BETWEEN, SPACE_AROUND)OptionalalignDefines how flex items are aligned along the cross axis of the container.
AUTO, FLEX_START, CENTER, FLEX_END, STRETCH, BASELINE, SPACE_BETWEEN, SPACE_AROUND)OptionalalignAllows overriding the parent's alignItems value for a specific flex item.
AUTO, FLEX_START, CENTER, FLEX_END, STRETCH, BASELINE, SPACE_BETWEEN, SPACE_AROUND)OptionalaspectLocks the aspect ratio (width / height) of the node. If set, Yoga might adjust the height based on the calculated width or vice versa.
OptionalbackgroundSets the background color of the node. Drawn beneath the content and padding, extending to the border edge. Accepts standard CSS color strings.
OptionalborderSets the width of the node's border. Can be a single number for all edges or an object specifying individual edges.
OptionalborderColour of the node's border — one colour for every edge, or a colour per edge.
Accepts standard CSS colour strings ('red', '#FF0000', 'rgba(255,0,0,0.5)'). Given an
object, an edge left out falls back to black. Where two edges of different colours meet at a
rounded corner the arc is split between them, as CSS joins them.
OptionalborderSets the radius of the node's corners, creating rounded effects.
Can be a single number for all corners or an object specifying individual corners (TopLeft, TopRight, BottomLeft, BottomRight).
OptionalborderSets the style of the node's border.
OptionalboxApplies one or more box-shadow effects to the node. Can be a single shadow object or an array of shadow objects. Shadows are drawn in the order specified.
OptionalboxDefines how the width and height properties are interpreted regarding padding and border.
CONTENT_BOX: Width/height apply only to the content area. Padding and border are added outside.
BORDER_BOX: Width/height include content, padding, and border.
OptionalchildrenContent to draw.
Pass elements for a single-page render, or a function to render a sequence — one page per call. The function form requires either RootProps.pages or RootProps.duration.
OptionalcolorText color. Accepts standard CSS color strings.
OptionalcolorSpace the canvas composites in.
Fixed for the whole render rather than chosen per export: colours are interpreted in it, and one outside its gamut is clipped as it is drawn. Exports convert out of it when asked.
OptionalcolorPixel format the canvas composites in.
Governs the precision everything is drawn at, and the depth the encoded formats that carry one
write. RGBAF32 keeps colour outside sRGB rather than clipping it as it is drawn, and is what
a sixteen-bit PNG or a wide-gamut export needs — at the cost of the CPU backend, since no GPU
composites float.
OptionaldirectionSets the primary text and layout direction (Left-to-Right or Right-to-Left).
Affects the meaning of Start and End edges for properties like position, margin, padding, border.
INHERIT: Uses the direction of the parent node.
INHERIT, LTR, RTL)OptionaldisplayControls whether the node and its children are included in the layout calculation and rendering.
FLEX: The node participates in a flex layout.
NONE: The node and its subtree are ignored by layout and rendering.
FLEX, NONE)OptionalditherDither this node's drawing, trading a little noise for the banding an eight-bit surface shows across a long, subtle gradient.
Costs nothing where nothing bands: a flat fill, text and a blurred shadow encode to identical bytes either way, because a dither only perturbs a pixel whose colour falls between two the surface can hold. On a gradient reckon on about a third again the PNG bytes, and near nothing for WebP or JPEG, whose quantizers absorb the noise.
Inherited by descendants, so setting it on Root covers the page and a node overrides it for
its own subtree without touching its siblings. Pointless under a float colorType, which has
the precision to draw the ramp outright.
OptionaldurationLength of the sequence in seconds; the page count becomes ceil(duration * fps).
Mutually exclusive with RootProps.pages, and only meaningful when children is a function.
OptionalflexDefines the default size of a flex item along the main axis before the remaining space is distributed.
OptionalflexDefines the direction of the main axis for flex items within this container.
COLUMN, ROW, COLUMN_REVERSE, ROW_REVERSE)OptionalflexDefines the ability of a flex item to grow if necessary, relative to other items. A non-negative number indicating the proportion of available space the item should take.
OptionalflexDefines the ability of a flex item to shrink if necessary, relative to other items. A non-negative number indicating the proportion of overflow space the item should lose.
OptionalflexControls whether flex items are forced onto a single line or can wrap onto multiple lines.
NO_WRAP, WRAP, WRAP_REVERSE)OptionalfontFont family (e.g., 'Arial', 'Helvetica', 'sans-serif'). Ensure the font is available in the rendering environment.
OptionalfontsFont files to register for use in the canvas.
OptionalfontFont size.
OptionalfontFont style.
OptionalfontSpecifies font variation settings. Provides fine control over font variation axis. Accepts string in CSS font-variation-settings format.
OptionalfontFont weight (e.g., 'normal', 'bold', 400, 700).
OptionalfpsFrame rate used to derive RootProps.duration and PageInfo.time. Defaults to 30.
This describes the render, not the encode: pass fps to toBuffer('gif', { fps }) as well if
the encoded animation should play at this rate.
OptionalgapDefines the space between flex items along the main axis.
OptionalgpuRasterize on the GPU when one is available. false forces the CPU backend.
Asking is not getting: a build without GPU support, a driver that declines, and a float
colorType all fall back to the CPU. The rendered canvas reports what it settled on through
gpu and engine.
Set it false for output that must be identical between machines — GPU and CPU rasterizers
resolve anti-aliased edges a level or two apart, which a pixel comparison sees.
OptionalgradientSets a linear gradient as the background. Overrides backgroundColor if provided.
colors: Array of CSS color strings for the gradient stops.
direction: Array of four numbers [x0, y0, x1, y1] defining the start and end points of the gradient line, relative to the node's top-left corner.
OptionalheightOptional height of the canvas in pixels. If not set, height is calculated from content.
OptionalimageMaximum number of images to fetch concurrently during render.
OptionaljustifyDefines how flex items are distributed along the main axis of the container.
FLEX_START, CENTER, FLEX_END, SPACE_BETWEEN, SPACE_AROUND, SPACE_EVENLY)OptionalkeyOptional key identifier for component reconciliation.
OptionalletterSets the spacing between letters (tracking). Accepts CSS units like 'normal', '2px', '0.1em'.
OptionallineAdditional vertical spacing between lines of text.
OptionallineHeight of each line box.
Left unset, a line is the face's own height — its ascent plus its descent — which is what
line-height: normal means in CSS and is a little over 1.3em for most text faces. Set smaller
than that and the lines overlap rather than the box quietly growing, again as CSS does.
OptionalmarginSets the margin space on the outside of the node's border. Can be a single number for all edges or an object specifying individual edges.
OptionalmaskLimits what of this node is drawn — see Mask.
Covers everything the node renders, its background, border, content and children alike. A shape
or path clips; a gradient fades. Inherited by every component, so Text, Image, Chart and
Grid take it too.
OptionalmaxSets the maximum height of the node.
OptionalmaxSets the maximum width of the node.
OptionalminSets the minimum height of the node.
OptionalminSets the minimum width of the node.
OptionalnameOptional display name for debugging purposes.
OptionalopacitySets the opacity of the node and its children when drawing. A value between 0 (fully transparent) and 1 (fully opaque).
The node's whole drawing — background, border, content and children — is composited once and then faded, as CSS does. Two overlapping children inside a half-transparent parent are exactly as dark as one of them, rather than compounding into a darker patch where they meet.
Nesting multiplies: a child at 0.5 inside a parent at 0.5 draws at 0.25 against the page.
OptionaloverflowDefines how content that overflows the node's bounds is handled.
VISIBLE: Content is not clipped and may render outside the node's box.
HIDDEN: Content is clipped and the rest is invisible.
SCROLL: Yoga lays the node out as a scroll container, but nothing is clipped — a scroll
container is a box a reader moves, and nothing here is interactive. It draws as VISIBLE.
VISIBLE, HIDDEN, SCROLL)OptionalpaddingSets the padding space on the inside of the node's border, around the content. Can be a single number for all edges or an object specifying individual edges.
OptionalpagesNumber of pages to render. Mutually exclusive with RootProps.duration.
Only meaningful when children is a function.
OptionalpositionSpecifies the offset distances for positioned elements (positionType: 'ABSOLUTE' or RELATIVE).
Can be a single number for all edges or an object specifying individual edges (Top, Right, Bottom, Left, Start, End).
Start and End are affected by direction (LTR/RTL).
OptionalpositionSpecifies the positioning method used for the node.
RELATIVE: Positioned according to the normal flow, then offset relative to that position.
ABSOLUTE: Taken out of the flow and positioned against its immediate parent.
That last part is where this differs from CSS, and the difference is Yoga's rather than this library's. CSS resolves an absolute node against the nearest positioned ancestor, skipping every static box in between; Yoga always uses the parent, whether or not it is positioned. A layout ported from the browser that relies on skipping an intermediate box will land somewhere else — give the node's own parent the offsets instead.
RELATIVE, ABSOLUTE)OptionalscaleScale factor for high-DPI rendering.
OptionaltextHorizontal text alignment within the node's bounds.
OptionaltextLines drawn on the text, in the notation CSS text-decoration uses.
A line keyword on its own is the common case; a style, a colour and a thickness may follow in any order, and two line keywords may be combined. Anything that does not parse draws nothing rather than throwing. Inherited, so a heading and its nested spans are decorated together.
OptionaltransformDefines the 2D transformations (translate, rotate, scale) applied to the node after layout.
OptionaluseWrite fetched images to disk during this render for faster re-decode when the same source appears multiple times. Disk entries are deleted when the render completes — no cross-render sharing.
OptionalverticalVertical text alignment within the node's bounds. Note: Simple implementation aligns based on the first line.
Width of the canvas in pixels. Required — everything else can be derived from the content, but text cannot wrap without knowing how much room it has.
OptionalwordSets the spacing between words. Accepts CSS units like 'normal', '10px', '0.5em'. This space is added to the intrinsic width of the space character.
OptionalworkerWorker mode enabled or default (undefined defaults to true).
OptionalworkersNumber of worker threads (only available in worker mode).
OptionalzStack order among absolutely positioned siblings. A larger value paints over a smaller one, and equal values paint in the order they were declared.
Only absolutely positioned nodes take part. An in-flow child is painted in flow order and is
never lifted by a zIndex.
Leaving it unset is CSS's z-index: auto, which shares a layer with 0 — so an absolutely
positioned child still paints above in-flow siblings, whether it is declared before or after
them. A negative value puts it below them instead, which is how a decoration is placed behind
the content of its own parent.
Root props when worker mode is enabled (default behavior). Includes .release() method for memory cleanup.