Back to Schema Browser

Text

Rich text component with Tiptap editor support

Required Props: id, text, tagName

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

PropertyTypeDescriptionExamples
text*requiredstring
HTML Content - supports rich text formatting like <strong>, <em>, <u>, <br>, etc.
Welcome to PageHubCreate <strong>amazing</strong> websites with <em>ease</em>Get started <u>today</u> and build your <strong>dream</strong> site+1 more
tagName*requiredstring
h1 | h2 | h3 | h4 | h5 | h6 | p | span | div | Textfit
HTML tag, Next Link, or Textfit. When url is set, internal paths may render as Link.
h1
richTextobject
-
-
textFitModestring
oneline | multiline | box | boxoneline
AutoTextSize mode when tagName is Textfit. oneline = fill width single line, multiline = fill width with wrapping, box = fill width+height with wrapping, boxoneline = fill width+height single line.
Default: "oneline"
-
activeTabnumber
Active tab index for tabbed content patterns
-
clickobject
-
-
actionobject
Unified action system (replaces legacy click/url). Makes the Text node a link. Types: link-url ({ url, target }), link-page ({ pageId, target }), scroll-to ({ anchor }), email ({ email, subject?, body? }), phone ({ phone }), copy-to-clipboard ({ text }), download-file ({ url, filename? }). Example: { "type": "link-url", "url": "https://example.com", "target": "_blank" }. NEVER use <a> tags in text HTML — use this prop instead.
-
canDeleteboolean
-
Default: true
-
canEditNameboolean
Allow renaming in layers (often true)
-
customobject
Editor metadata (displayName, ...)
-
classNamestring
Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.
flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold
urlstring
Optional href; page refs resolved at runtime
-
urlTargetstring
Link target e.g. _blank
-
rolestring
-
-
aria-labelstring
-
-
aria-hiddenstring
-
-
aria-describedbystring
-
-
aria-livestring
polite | assertive | off
-
-
backgroundobject
-
-
rootobject
-
-
handlersobject
Custom JS event handlers. Record<string, string> mapping a React event name (onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, …; must match /^on[A-Z]/) to a JS code string evaluated as a function body with `event` in scope. Runs after any `action` on the same event. Execution is suppressed in the editor. Static export emits each entry as a native HTML event attribute (onclick="…"). Event keys in `attrs` are ignored by React — put them here instead.
-

Examples

Company Logo Text

A company logo displayed as text in the header

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>{{company.name}}</p>",
  "tagName": "h1",
  "className": "text-2xl font-bold text-primary"
}

Hero Title

A large hero title with responsive sizing

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>Welcome to {{company.name}}</p>",
  "tagName": "h1",
  "className": "text-5xl font-bold text-center md:text-6xl"
}

Hero Subtitle

A subtitle with constrained width for hero sections

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>Professional {{company.type}} services in {{company.location}}</p>",
  "tagName": "p",
  "className": "text-lg text-center max-w-2xl"
}

Footer Copyright Text

Small footer text with alternate styling

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>&copy; {{year}} {{company.name}} All rights reserved.</p>",
  "tagName": "p",
  "className": "text-sm text-center text-base-content"
}

Section Heading

A section heading with proper hierarchy and spacing

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>Our Services</p>",
  "tagName": "h2",
  "className": "text-3xl font-bold text-center mb-6 text-base-content md:text-4xl"
}