Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

Modifiers are chainable methods on a component builder. Each modifier returns a new builder with one additional modifier wrapping the inner subtree, and the renderer applies the chain in order. Calling .padding(16) on a Text does not mutate the text — it produces a new builder that the next call can chain from. The result is that styling, layout, and behavior all read top-to-bottom on a single component, and the component itself stays a function call with its bare arguments. This page covers the chainable pattern, why ordering matters, and how the modifier surface is organized in the reference.

​
The chainable pattern

Every component supports the same universal modifier set. Calls return the builder, so you can chain as many as you need: 
Text("Hello")
    .font("headline")
    .foregroundStyle(Color("blue"))
    .padding(16)
Each call returns a new builder. The chain reads as a sequence of wrappers around the inner component — font is applied first, then foregroundStyle, then padding. The renderer walks that wrapper chain when it produces native output, so what you write is the order the renderer applies. A few practical consequences:
  • Modifiers compose across components. The same .padding(16) works on a Text, a VStack, an Image, a Button.
  • Modifiers can carry components themselves. .background(Color("red")) and .overlay(Text("Badge")) accept other components as their content, which lets the chain stay flat instead of nesting wrappers in the tree.
  • Some modifiers only take effect on specific component types. The chain still type-checks, but the rendered effect is scoped to where it makes sense — see Component-specific modifiers below.

​
Order matters

Modifiers apply left to right. Reordering changes what you see, because each modifier wraps the result of the chain so far. The classic case is .padding and .background: 
// Background extends to the padded area
Text("Hello")
    .padding(8)
    .background(Color("red"))

// Background hugs the text; padding is applied outside
Text("Hello")
    .background(Color("red"))
    .padding(8)
In the first chain, .padding(8) runs first and produces a padded text node; .background then paints the entire padded area red. In the second, .background paints the bare text node; .padding(8) then adds whitespace around the colored block. The same logic applies anywhere a modifier wraps geometry — .frame, .cornerRadius, .clipped, .overlay, .shadow, transform modifiers. When a chain is not producing what you expect, the order is usually the answer. Every conforming BindJS runtime preserves the author’s order through to the renderer. You can rely on A.then(B) rendering the same way on every platform.

​
Categories

The modifier surface is organized by what each modifier affects. The reference splits the catalog into consolidated pages — use the table to jump to the right section.
CategoryWhat it doesReference
Identity and lifecycle.id, .tag, .onAppear, .onDisappearIdentity and lifecycle
Layout — frame and padding.frame, .padding, .offset, .zIndex, sizingLayout — frame and padding
Transforms.scaleEffect, .rotationEffect, .transformEffectTransforms
Appearance — color and style.foregroundStyle, .background, .cornerRadius, .shadowAppearance — color and style
Appearance — effects.blur, .saturation, .brightness, .blendModeAppearance — effects
Typography.font, .fontWeight, .bold, .italic, .lineLimitTypography
Layering — overlay.overlayoverlay
Clipping and masking.clipped, .clipShape, .maskClipping and masking
Visibility and interaction.hidden, .disabled, .allowsHitTesting, .textSelectionVisibility and interaction
Gestures.onTapGesture, .onDragGesture, .onLongPressGesture, .onHoverGestures
Visual effects.visualEffect, .coordinateSpaceVisual effects
Controls.controlSize, .pickerStyle, .buttonStyleControls
Text input.keyboardType, .textFieldStyle, .submitLabel, .focusedText input
Value observation.onChangeonChange
Accessibility.accessibilityLabel, .accessibilityValue, .accessibilityHiddenAccessibility
Transitions.transitiontransition
Environment.environment(key, value)environment
These are core — every conforming runtime should implement them, and code that uses them is portable across iOS, Android, and the web. A separate set of iOS-only modifiers covers presentation, navigation chrome, and platform-specific affordances: Presentation (.sheet, .fullScreenCover, .presentationDetents), Navigation chrome, Toolbar, List chrome, Scroll chrome, Grid cells, Accessibility refinements, and Text refinements. Reading these from a cross-platform component requires a fallback.

​
Component-specific modifiers

A handful of modifiers are only valid on specific component types. The chain still type-checks because the modifier is declared on the corresponding component interface, but the rendered effect is scoped:
  • .font(...), .bold(), .italic(), and the rest of typography apply to Text.
  • .resizable(), .renderingMode(...), .interpolation(...) apply to Image.
  • .fill(...) and .stroke(...) apply to shapes (Circle, Rectangle, RoundedRectangle, Ellipse, Capsule, Path).
The reference pages call these out where they apply. When in doubt, look at the component’s own page — the typography modifiers, for example, are documented under Typography and surface as methods on Text.

​
Animation

Animation is a thin layer on top of the modifier chain. withAnimation(animation?, body) wraps a state mutation in an animation context, and any modifier whose value changes as a result of that mutation animates between the old and new values. 
withAnimation(() => setExpanded(!expanded))
withAnimation(Spring({ response: 0.5 }), () => setOffset({ x: 100, y: 0 }))
The first argument is an optional animation builder — Spring, EaseIn, EaseOut, Linear, Bouncy, and the rest. Omit it for the default spring. See withAnimation for the wrapping function and Animation builders for the catalog of timing curves.

Layout — frame and padding

The geometric modifiers most chains start with.

Typography

The text-shaping modifiers Text accepts.

Gestures

Tap, drag, long press, and hover handlers.

State and environment

How useState, useStore, and environment values move through a render.