Style

CSS layout configuration for a node, including flexbox, sizing, spacing, and alignment properties.

This class holds the supported layout properties for a node. Create an instance with new Style() and configure properties before passing to TaffyTree.newLeaf().

Default Value

A new style uses these layout defaults:

display: Display.Flex
position: Position.Relative
direction: Direction.Ltr; float: Float.None; clear: Clear.None
boxSizing: BoxSizing.BorderBox; both overflow axes: Overflow.Visible
flexDirection: FlexDirection.Row
flexWrap: FlexWrap.NoWrap
flexGrow: 0
flexShrink: 1
flexBasis: "auto"; aspectRatio: undefined
alignSelf and justifySelf: AlignSelf.Auto (get() returns undefined)
Other alignment properties: undefined (use default behavior)
Preferred, minimum, and maximum dimensions: "auto"
Margin, padding, border, and gap: 0; inset: "auto"
scrollbarWidth: 0; itemIsTable and itemIsReplaced: false
textAlign: TextAlign.Auto; gridAutoFlow: GridAutoFlow.Row
Grid row/column placements: "auto"; track, area, and line-name arrays: []
Grid template area row and column counts: 0

Constructors

Constructor

new Style(props?): Style;

Creates a new Style instance with default values

Parameters

Parameter	Type	Description
`props?`	`any`	Optional object with initial style properties

Returns

Style

A new Style object using the layout defaults and supplied overrides

Example

// Create with defaults
const style = new Style();
console.log(style.display); // Display.Flex

// Create with initial properties
const style2 = new Style({
  display: Display.Flex,
  flexDirection: FlexDirection.Column,
  width: 200,
  marginLeft: 10,
});

Properties

Property	Type	Description
`alignContent`	`AlignContent` \| `undefined`	Gets the align-content property Distributes wrapped flex lines, aligns grid rows, or vertically aligns block content, depending on the container's display mode.
`alignItems`	`AlignItems` \| `undefined`	Gets the align-items property Defines the default alignment for all children on the cross axis.
`alignSelf`	`AlignSelf` \| `undefined`	Gets the align-self property Overrides the parent's align-items for this specific element. Remarks Unlike this accessor, `get("alignSelf")` returns `undefined` when unset or assigned `AlignSelf.Auto`.
`aspectRatio`	`number` \| `undefined`	Gets the aspect ratio The ratio of width to height. Used to maintain proportions.
`border`	`Rect`<`LengthPercentage`>	Gets the border width Width of the element's border on each side.
`borderBottom`	`any`	Gets the bottom border width
`borderLeft`	`any`	Gets the left border width
`borderRight`	`any`	Gets the right border width
`borderTop`	`any`	Gets the top border width
`bottom`	`any`	Gets the bottom inset offset
`boxSizing`	`BoxSizing`	Gets the box sizing mode Determines whether padding and border are included in dimensions.
`clear`	`Clear`	Gets which preceding floats this box must clear in block layout.
`columnGap`	`any`	Gets the column gap (horizontal spacing between items)
`direction`	`Direction`	Gets the writing direction used for logical layout.
`display`	`Display`	Gets the display mode Determines the layout algorithm used for this element and its children.
`flexBasis`	`Dimension`	Gets the flex-basis The initial size of a flex item before growing/shrinking.
`flexDirection`	`FlexDirection`	Gets the flex direction Defines the main axis direction for flex items.
`flexGrow`	`number`	Gets the flex grow factor Determines how much the item grows relative to siblings when there is extra space available.
`flexShrink`	`number`	Gets the flex shrink factor Determines how much the item shrinks relative to siblings when there is insufficient space.
`flexWrap`	`FlexWrap`	Gets the flex wrap mode Controls whether flex items wrap to new lines.
`float`	`Float`	Gets whether and where this box floats in block layout.
`gap`	`Size`<`LengthPercentage`>	Gets the gap Spacing between flex/grid items.
`gridAutoColumns`	`TrackSizingFunction`[]	Gets the grid-auto-columns property Defines the size of implicitly created columns.
`gridAutoFlow`	`GridAutoFlow`	Gets the grid-auto-flow property Controls how auto-placed items are inserted into the grid.
`gridAutoRows`	`TrackSizingFunction`[]	Gets the grid-auto-rows property Defines the size of implicitly created rows.
`gridColumn`	`Line`<`GridPlacement`>	Gets the grid-column property Defines which column in the grid the item should start and end at. Corresponds to CSS `grid-column` shorthand.
`gridColumnEnd`	`any`	Gets the grid-column-end property
`gridColumnStart`	`any`	Gets the grid-column-start property
`gridRow`	`Line`<`GridPlacement`>	Gets the grid-row property Defines which row in the grid the item should start and end at. Corresponds to CSS `grid-row` shorthand.
`gridRowEnd`	`any`	Gets the grid-row-end property
`gridRowStart`	`any`	Gets the grid-row-start property
`gridTemplateAreaColumnCount`	`number`	Gets the effective column count of the grid-template-areas template. This may exceed the extent of the named areas when the template has trailing or entirely unnamed (`.`) cells. It is never smaller than the largest named area's ending column line minus one.
`gridTemplateAreaRowCount`	`number`	Gets the effective row count of the grid-template-areas template. This may exceed the extent of the named areas when the template has trailing or entirely unnamed (`.`) cells. It is never smaller than the largest named area's ending row line minus one.
`gridTemplateAreas`	`GridTemplateArea`[]	Gets the grid-template-areas property Defines named grid areas that can be referenced by grid items.
`gridTemplateColumnNames`	`string`[][]	Gets the grid-template-column-names property Defines the named lines between the columns.
`gridTemplateColumns`	`GridTemplateComponent`[]	Gets the grid-template-columns property Defines the track sizing functions (widths) of the grid columns.
`gridTemplateRowNames`	`string`[][]	Gets the grid-template-row-names property Defines the named lines between the rows.
`gridTemplateRows`	`GridTemplateComponent`[]	Gets the grid-template-rows property Defines the track sizing functions (heights) of the grid rows.
`height`	`Dimension`	Gets the height
`inset`	`Rect`<`LengthPercentageAuto`>	Gets the inset Positioning offsets for absolutely positioned elements.
`itemIsReplaced`	`boolean`	Gets whether this item is a replaced element Replaced elements have special sizing behavior (e.g., `<img>`, `<video>`).
`itemIsTable`	`boolean`	Gets whether this item is a table Table children are handled specially in block layout.
`justifyContent`	`JustifyContent` \| `undefined`	Gets the justify-content property Defines alignment and spacing of items along the main axis.
`justifyItems`	`AlignItems` \| `undefined`	Gets the justify-items property Defines the default justify-self for all children in the inline axis. This is primarily used for CSS Grid layout.
`justifySelf`	`AlignSelf` \| `undefined`	Gets the justify-self property Overrides the parent's justify-items for this specific element in the inline axis. Remarks Unlike this accessor, `get("justifySelf")` returns `undefined` when unset or assigned `AlignSelf.Auto`.
`left`	`any`	Gets the left inset offset
`margin`	`Rect`<`LengthPercentageAuto`>	Gets the margin Outer spacing around the element.
`marginBottom`	`any`	Gets the bottom margin
`marginLeft`	`any`	Gets the left margin
`marginRight`	`any`	Gets the right margin
`marginTop`	`any`	Gets the top margin
`maxHeight`	`Dimension`	Gets the maximum height
`maxSize`	`Size`<`Dimension`>	Gets the maximum size constraints
`maxWidth`	`Dimension`	Gets the maximum width
`minHeight`	`Dimension`	Gets the minimum height
`minSize`	`Size`<`Dimension`>	Gets the minimum size constraints
`minWidth`	`Dimension`	Gets the minimum width
`overflow`	`Point`<`Overflow`>	Gets the overflow behavior Controls how content that exceeds the container is handled.
`overflowX`	`Overflow`	Gets the horizontal overflow behavior
`overflowY`	`Overflow`	Gets the vertical overflow behavior
`padding`	`Rect`<`LengthPercentage`>	Gets the padding Inner spacing between the element's border and content.
`paddingBottom`	`any`	Gets the bottom padding
`paddingLeft`	`any`	Gets the left padding
`paddingRight`	`any`	Gets the right padding
`paddingTop`	`any`	Gets the top padding
`position`	`Position`	Gets the position mode Determines how the element is positioned within its parent.
`right`	`any`	Gets the right inset offset
`rowGap`	`any`	Gets the row gap (vertical spacing between items)
`scrollbarWidth`	`number`	Gets the scrollbar width The width of the scrollbar gutter when `overflow` is set to `Scroll`.
`size`	`Size`<`Dimension`>	Gets the size (width and height)
`textAlign`	`TextAlign`	Gets the text-align property Used by block layout to implement legacy text alignment behavior.
`top`	`any`	Gets the top inset offset
`width`	`Dimension`	Gets the width

Methods

[dispose]()

dispose: void;

Returns

void

free()

free(): void;

Returns

void

get()

Call Signature

get(): undefined;

Reads multiple style properties in a single WASM call. Supports both object properties and individual flat properties.

Returns

undefined

A single value for one key, values in key order for multiple keys, or undefined when no keys are supplied

Throws

Error if any property key is unknown.

Remarks

Multiple literal keys produce a typed tuple for destructuring
A dynamic array of keys produces an array of the corresponding value types
get("alignSelf") and get("justifySelf") return undefined when unset or assigned AlignSelf.Auto; direct property reads return AlignSelf.Auto

Example

const style = new Style();
style.display = Display.Flex;

// Single property - returns exact type (includes undefined for optional properties)
const display = style.get("display"); // Display | undefined

// Individual flat property - returns exact type
const width = style.get("width"); // Dimension | undefined

// Optional properties return undefined when not set
const alignItems = style.get("alignItems"); // AlignItems | undefined

// Two properties - returns tuple for destructuring
const [d, w] = style.get("display", "width"); // [Display | undefined, Dimension | undefined]

// Three properties - returns tuple for destructuring
const [d2, w2, f] = style.get("display", "width", "flexGrow");

// Four literal keys also return a typed tuple
const values = style.get("display", "width", "flexGrow", "flexShrink");
// values: [Display | undefined, Dimension | undefined, number | undefined, number | undefined]

Call Signature

get<K>(...keys): StylePropertyValues[K];

Type Parameters

Type Parameter
`K` extends `StyleProperty`

Parameters

Parameter	Type
...`keys`	[`K`]

Returns

StylePropertyValues[K]

Call Signature

get<K1, K2>(...keys): [StylePropertyValues[K1], StylePropertyValues[K2]];

Type Parameters

Type Parameter
`K1` extends `StyleProperty`
`K2` extends `StyleProperty`

Parameters

Parameter	Type
...`keys`	[`K1`, `K2`]

Returns

[StylePropertyValues[K1], StylePropertyValues[K2]]

Call Signature

get<K1, K2, K3>(...keys): [StylePropertyValues[K1], StylePropertyValues[K2], StylePropertyValues[K3]];

Type Parameters

Type Parameter
`K1` extends `StyleProperty`
`K2` extends `StyleProperty`
`K3` extends `StyleProperty`

Parameters

Parameter	Type
...`keys`	[`K1`, `K2`, `K3`]

Returns

[StylePropertyValues[K1], StylePropertyValues[K2], StylePropertyValues[K3]]

Call Signature

get<Keys>(...keys): StylePropertyArrayValues<Keys>;

Type Parameters

Type Parameter
`Keys` extends `StyleProperty`[]

Parameters

Parameter	Type
...`keys`	`Keys`

Returns

StylePropertyArrayValues<Keys>

set()

set(props): void;

Sets multiple style properties in a single WASM call. Supports both object properties and individual flat properties.

Parameters

Parameter	Type	Description
`props`	`StylePropertyValues`	Object mapping property keys to their values

const style = new Style();
style.set({
  display: Display.Flex,
  width: 200,
  marginLeft: 10,
  marginRight: "auto",
});