All docs

Text

Rich text with Tiptap editor support. The most-used component in any tree. Renders the tag in props.tagName (h1–h6, p, span, div, Textfit) with HTML in props.text.

Rich text with Tiptap editor support. The most-used component in any tree. Renders the tag in props.tagName (h1–h6, p, span, div, Textfit) with HTML in props.text.

Key files

Props

PropNotes
textRequired. HTML string — supports <strong>, <em>, <u>, <br>, <span> (with data-variable), inline style.
tagNameRequired. h1–h6, p, span, div, Textfit.
richText{ mode: "inline" | "full" }. inline = TipTap inline-only profile (no wrapping <p> in saved text); use for one-line banners/cookie copy. Default full. Not auto-derived from tagName.
className, rootStandard. Headings auto-receive font-heading + size + weight if className has no text-size class.

Variable interpolation

  • Inline <span data-variable="item.title" class="variable-node">{{item.title}}</span> (matches TipTap output) inside a Data repeater.
  • Company variables — {{company.name}}, {{year}} — also use the data-variable span shape.
  • Bare {{...}} outside the span is NOT interpolated in Text.

Gotchas

  • One job per node. NEVER use <a> tags in text (use Button.action). NEVER use <p>/<h1>–<h6> inside text for document semantics (use tagName).
  • Styling parts of text (split-color logos, highlights): use inline style with CSS vars. NEVER use Tailwind classes inside text HTML — the compiler doesn't scan props.text.
  • Heading defaults: Text nodes with tagName: h1–h6 auto-receive font-heading + size + weight if className has no text-size class. Override by providing your own typography classes.
  • Mobile-first headings: text-5xl/6xl/7xl requires sm:/md: downscaling, e.g. text-3xl sm:text-4xl md:text-6xl.

Related