Reference

Node Types

Every node is a container, text, or image.

All nodes accept these fields:

Prop

Type

Description

tagName?string

Element tag name used for HTML preset and selector matching

className?string

Element class name used for selector matching

id?string

Element id used for selector matching

attributes?NodeAttributes

Extra element attributes used for selector matching

preset?Style

Default HTML element styles (lowest priority)

tw?string

Tailwind classes (medium priority, overrides preset)

style?Style

Inline styling properties (highest priority)

lang?string

BCP-47 language tag; inherited by descendants, drives locale-aware shaping

dir?"ltr" | "rtl"

Text direction; inherited by descendants

Container

Groups other nodes and arranges them in a layout. Adds:

Prop

Type

Description

children?Node[]

Children nodes

Text

Displays text. Adds:

Prop

Type

Description

textstring

Text content to be displayed

Image

Displays a rasterized image or SVG. Adds:

Prop

Type

Description

srcstring | Uint8Array | ArrayBuffer

Source URL, persistent image key, or raw image bytes

width?number

Overwrite the intrinsic width of the image

height?number

Overwrite the intrinsic height of the image

Style Properties

Properties use their camelCase names. Longhands are listed in parentheses. Supported means the property follows its CSS spec; a value cell instead lists the accepted keywords.

Layout & display

Property	Values
`display`	`none`, `flex`, `inline-flex`, `grid`, `inline-grid`, `block`, `inline-block`, `inline`
`position`	`relative`, `absolute`, `static`, `fixed`
`direction`	Supported
`float`	Supported
`clear`	Supported
`zIndex`	Supported
`order`	Supported
`overflow` (`overflowX`, `overflowY`)	`visible`, `clip`, `hidden`
`objectFit`	Supported
`objectPosition`	Supported
`boxSizing`	Supported
`visibility`	`visible`, `hidden`
`content`	Supported

Sizing

Property	Values
`width`, `height`	Supported
`minWidth`, `maxWidth`	Supported
`minHeight`, `maxHeight`	Supported
`aspectRatio`	Supported

Spacing

Property	Values
`padding` (`paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingInline`, `paddingBlock`)	Supported
`margin` (`marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginInline`, `marginBlock`)	Supported
`inset` (`top`, `right`, `bottom`, `left`, `insetInline`, `insetBlock`)	Supported
`gap` (`columnGap`, `rowGap`)	Supported

Border & outline

Property	Values
`borderWidth` (`borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, `borderInlineWidth`, `borderBlockWidth`)	`thin`, `medium`, `thick`, `<length>`
`borderStyle`	`none`, `hidden`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`
`borderColor`	Supported
`borderRadius` (`borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius`)	Supported
`outlineWidth`	`thin`, `medium`, `thick`, `<length>`
`outlineStyle`	`none`, `hidden`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`
`outlineColor`	Supported
`outlineOffset`	Supported

Flexbox

Property	Values
`flex` (`flexBasis`, `flexGrow`, `flexShrink`)	Supported
`flexDirection`	Supported
`flexFlow`	Supported
`flexWrap`	`nowrap`, `wrap`, `wrap-reverse`
`justifyContent`, `justifyItems`, `justifySelf`	Supported
`alignContent`, `alignItems`, `alignSelf`	Supported
`placeContent`, `placeItems`, `placeSelf`	Supported

Grid

Property	Values
`gridTemplateColumns`, `gridTemplateRows`, `gridTemplateAreas`	Supported
`gridAutoColumns`, `gridAutoRows`, `gridAutoFlow`	Supported
`gridColumn` (`gridColumnStart`, `gridColumnEnd`)	Supported
`gridRow` (`gridRowStart`, `gridRowEnd`)	Supported
`gridArea` (`gridRowStart`, `gridColumnStart`, `gridRowEnd`, `gridColumnEnd`)	Supported

Background & mask

Property	Values
`backgroundImage`	`linear-gradient()`, `radial-gradient()`, `conic-gradient()`, `repeating-linear-gradient()`, `repeating-radial-gradient()`, `repeating-conic-gradient()`, `url()`
`backgroundColor`	Supported
`backgroundPosition`, `backgroundSize`, `backgroundRepeat`	Supported
`backgroundClip`, `backgroundBlendMode`	Supported
`backgroundOrigin`	`border-box`, `padding-box`, `content-box`
`maskImage`, `maskSize`, `maskPosition`, `maskRepeat`	Supported

Effects & transform

Property	Values
`boxShadow`	Supported
`opacity`	Supported
`filter`	`<filter-function>`, `url(data:image/svg+xml,...)` with inline SVG `<filter>` markup
`backdropFilter`	`<filter-function>`, `url(data:image/svg+xml,...)` with inline SVG `<filter>` markup
`mixBlendMode`	Supported
`isolation`	Supported
`transform`, `rotate`, `scale`, `translate`	2D only; `transform` accepts functions like `translateX()`, `scaleX()`
`transformOrigin`	Supported
`clipPath`	`<basic-shape>`
`clipRule`	Supported
`offsetPath`	`ray()`, `<basic-shape>` (`path()`, `circle()`, `ellipse()`, `polygon()`, `inset()`), `<coord-box>`; `url()` is not supported
`offsetDistance`	`<length-percentage>` (percentage of the path length)
`offsetRotate`	`auto`, `reverse`, `<angle>`, `auto <angle>`
`offsetAnchor`	`auto` (transform-origin) or `<position>`
`offsetPosition`	`normal`, `auto`, `<position>`
`offset`	Shorthand for the five `offset-*` longhands
`imageRendering`	`auto`, `smooth`, `pixelated`
`strokeLinejoin`	`miter`, `round`, `bevel`

filter also accepts SVG filter references: url(data:image/svg+xml,...) where the data URI contains inline <filter> markup, optionally wrapped in an <svg> document. The full SVG filter primitive set applies (feComponentTransfer, feColorMatrix, feComposite, feImage, feTile, feTurbulence, ...), covering effects like ordered dithering, duotone, and bloom, and a reference mixes with filter functions in one list. Browsers parse the same markup, so you can prototype an effect on a plain HTML page and paste it in.

filter: contrast(1.4)
  url("data:image/svg+xml,<filter color-interpolation-filters='sRGB'>...</filter>");

Only data: URIs work: with no surrounding document, url(#id) fragments and external URLs are parse errors. Per the SVG spec, color-interpolation-filters defaults to linearRGB; declare sRGB on the <filter> for threshold-style effects. Error-diffusion dithering (Floyd-Steinberg) is sequential and out of the filter model's reach in browsers too; use the render-level dithering output option instead.

Animation

Property	Values
`animationName`	Supported
`animationDuration`	Supported
`animationDelay`	Supported
`animationTimingFunction`	`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `step-start`, `step-end`, `steps()`, `cubic-bezier()`
`animationIterationCount`	Supported
`animationDirection`	Supported
`animationFillMode`	Supported
`animationPlayState`	Supported

Typography

Property	Values
`color`	Supported
`fontFamily`	Font fallback supported
`fontSize`	Supported
`fontWeight`	Supported
`fontStyle`	Supported
`fontStretch`	Supported
`fontVariationSettings`	Supported
`fontFeatureSettings`	Supported
`fontVariant` (`fontVariantLigatures`, `fontVariantNumeric`, `fontVariantEastAsian`, `fontVariantCaps`, `fontVariantPosition`)	Supported ¹
`fontSynthesis`	`none`, `weight`, `style`
`fontSynthesisWeight`	`auto`, `none`
`fontSynthesisStyle`	`auto`, `none`
`lineHeight`	Supported
`letterSpacing`	Supported
`wordSpacing`	Supported
`textIndent`	Supported
`textAlign`	Supported
`verticalAlign`	Supported
`textTransform`	`none`, `uppercase`, `lowercase`, `capitalize`
`textShadow`	Supported
`textOverflow`	`ellipsis`, `clip`, custom character
`lineClamp`	`none`, `<integer>`, `<integer> <block-ellipsis>`
`maxLines`	`none`, `<integer>`
`blockEllipsis`	`none`, `auto`, `<string>`
`continue`	`normal`, `collapse`
`overflowWrap`	Supported
`wordBreak`	`normal`, `break-all`, `keep-all`, `break-word`
`whiteSpace`	`normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line`, `<text-wrap-mode> <white-space-collapse>`
`whiteSpaceCollapse`	`preserve`, `collapse`, `preserve-spaces`, `preserve-breaks`
`textWrap` (`textWrapMode`, `textWrapStyle`)	`wrap`, `nowrap`; `auto`, `balance`, `pretty`
`textFit`	Supported
`textDecoration` (`textDecorationLine`, `textDecorationStyle`, `textDecorationColor`, `textDecorationThickness`)	`underline`, `line-through`, `overline`; `solid`
`textDecorationSkipInk`	`auto`, `none`
`textUnderlineOffset`	`auto`, `<length-percentage>`
`WebkitTextStroke` (`WebkitTextStrokeWidth`, `WebkitTextStrokeColor`, `WebkitTextFillColor`)	Supported

¹ fontVariant* map to OpenType features applied before fontFeatureSettings, so an explicit setting wins on a tag conflict. alternates and emoji are not supported. Features apply only when the font ships them; unlike browsers, missing ones are not synthesized (for example, small capitals from scaled capitals).

Reference

On this page