Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Write a string value to one or more DOM elements — CSS style property (including custom properties like `--name`), HTML/SVG attribute, or `textContent`. String sibling of `domPropertyWrite` (which writes floats); `domPoseWrite` is the multi-property unified writer when you need both float + string + color in one batched write. Resolves the selector via querySelectorAll; comma-listed selectors write to every match.
Type domStringWriteCategory boundaryContext domDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
value | string | String value to write. Empty string clears the property; verbatim strings (CSS fragments, HTML attribute values, plain text) all pass through. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the element(s) this node writes to. Same picker as domPropertyWrite / domPoseWrite. Comma-list a selector (`.a, .b`) to write the same value to every match in a single batched update. |
propertyName | cssProperty | "textContent" | Property / attribute name. CSS properties (camelCase or kebab): `pointerEvents`, `display`, `clipPath`, `backgroundImage`. Custom properties: pass `--name` verbatim. SVG attributes (`d`, `points`, `viewBox`) and HTML data-attributes are auto-detected. `textContent` writes the element's text. Override the auto-detection with the Write Mode field. |
writeMode | enum | "" | How to write the property. `Auto` infers from the property name (textContent → text, SVG attrs / data-* → attribute, everything else → style). Force `style` for custom CSS properties; force `attribute` for non-data-prefixed HTML attributes (`alt`, `title`, `aria-label`). options , style, attribute, textContent |
Use cases
- Write the active carousel slot's metadata text (title / camera / location) to its display label — wire a `stringArrayPick.value` into `value`, set `propertyName` to `textContent`.
- Latched CSS string properties (`pointer-events`, `display`, `visibility`, `cursor`) gated by a `thresholdMap` — `value: pe-gate.result`, `propertyName: pointerEvents`, `writeMode: style`.
- Animated SVG `d` attribute or any HTML attribute the page reads — `propertyName: d`, auto-inferred `attribute` write mode.
- CSS custom properties whose values are strings (e.g. `--current-mood: "calm"`) — set `propertyName: --current-mood`, `writeMode: style`.
Related nodes
Envelope
Use domStringWrite as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-boundary/