Formatted text

Formatted text

Displays text from a data field with its formatting — bold, links and headings — instead of as plain text.

Displays text from a data field with the formatting it contains: bold, italic, links, headings and lists. Without this block the formatting would end up on the page as literal text. Every article page on this site shows its content through this block. The technical name is RichText.

Use RichText whenever a data field stores formatted content that should render as real HTML rather than as literal markup on the page. Article bodies, FAQ answers and any long-form text field edited by a content editor typically need this block; a plain Text tag would print the tags instead of applying them.

It's the block powering the article content you're reading right now, and pairs well with TableOfContents for longer pieces, which scans the headings RichText renders and builds a jump-to menu from them.

Typical use cases

A webshop's product-description field is a common case — RichText lets whoever maintains the catalogue bold key specs, add a bullet list of what's included, and link to a size guide, all from a plain text field with no template changes needed per product. A portfolio's project write-up benefits the same way, especially when a case study needs to link out to press coverage or an external live site. For professional services, FAQ answers and policy or terms pages are typical: content a non-technical team member edits directly, where the formatting needs to survive without touching JSX.

Common mistakes

Content pasted directly from Word or Google Docs sometimes carries inline styles and heading levels that clash with the page's own type scale — writing directly in the field's editor, or pasting as plain text and then applying formatting there, avoids that. Heading discipline matters more than it looks: jumping from a top-level heading straight to a much deeper one inside the field breaks the visual hierarchy and also confuses a table-of-contents scan on longer pages, which relies on exactly those heading levels to build its jump menu. Only the field's supported formatting — bold, italic, links, headings, lists — is guaranteed to round-trip correctly; arbitrary custom markup pasted into the field may not render as intended, since this content is stored and sanitised differently from the JSX written directly on a page or in a component — see content is JSX for that distinction.

Because RichText outputs real semantic tags rather than styled plain text, the same content benefits screen readers, search-engine crawlers and Search's own indexing equally — there's no separate SEO or accessibility pass needed on top of writing well-structured content in the first place.

Use bold sparingly within a field — a paragraph where every sentence carries emphasis loses the contrast that made the first bold word useful. Reserve it for the handful of terms or numbers a skimming reader should catch first.

Example

Bold, italic and a link — all from a single text field.

The prompt for this example

prompt
Show the formatted content of the text field on the page, with bold, italic and links intact.