Rich Text Parameter Utilities

Rich text parameters store structured content with formatting (headings, lists, links, bold, italic, etc.) managed through the Uniform rich text editor. The SDK provides the UniformRichText component and the @uniformdev/richtext package for working with rich text data.

Rendering rich text with UniformRichText#

The UniformRichText component renders rich text parameters with full formatting support and inline editing capabilities in the Uniform visual editor:

import { ComponentParameter, ComponentProps, UniformRichText, } from "@uniformdev/next-app-router/component"; import { ParameterRichTextValue } from "@uniformdev/richtext"; type ArticleProps = { body?: ComponentParameter<ParameterRichTextValue>; }; export const ArticleComponent = ({ parameters: { body }, component, }: ComponentProps<ArticleProps>) => { return ( <article> <UniformRichText component={component} parameter={body} className="prose" placeholder="Write your article content here" /> </article> ); };

UniformRichText props#

Prop	Type	Default	Description
`component`	`Pick<ComponentContext, '_id'>`	required	Component context (from `ComponentProps`)
`parameter`	`ComponentParameter<ParameterRichTextValue>`	required	The rich text parameter value
`as`	`React.ElementType`	`"div"`	Wrapper HTML element. Set to `null` for no wrapper.
`className`	`string`	—	CSS class applied to the wrapper
`placeholder`	`string \| ((parameter) => string)`	—	Placeholder text shown in the editor when empty
`resolveRichTextRenderer`	`RenderRichTextComponentResolver`	—	Custom renderer for rich text nodes

The RenderRichTextComponentResolver type is not exported from the public API, so you cannot import it directly. It has the shape (node: RichTextNode) => RichTextRendererComponent | null | undefined, where returning null or undefined falls back to the default renderer for that node type.

Custom rich text node renderers#

By default, UniformRichText maps rich text nodes to standard HTML elements. You can override the rendering of specific node types using resolveRichTextRenderer:

import { RichTextNode } from "@uniformdev/richtext"; const customResolver = (node: RichTextNode) => { // Custom heading rendering if (node.type === "heading") { return ({ node, children }) => { const tag = node.tag || "h2"; const Tag = tag as keyof JSX.IntrinsicElements; return <Tag className="font-display text-brand">{children}</Tag>; }; } // Custom link rendering if (node.type === "link") { return ({ node, children }) => ( <a href={node.url as string} className="text-blue-600 underline hover:text-blue-800" target={node.target as string} rel={node.rel as string} > {children} </a> ); } // Return undefined to use default renderer return undefined; }; // Usage: <UniformRichText component={component} parameter={body} resolveRichTextRenderer={customResolver} />

Default node type mappings#

The SDK provides default renderers for these rich text node types:

Node Type	Default Rendering
`heading`	`<h1>` through `<h6>` based on tag level
`paragraph`	`<p>`
`text`	Inline text with formatting (bold, italic, underline, etc.)
`link`	`<a>`
`list`	`<ul>` or `<ol>`
`listitem`	`<li>`
`quote`	`<blockquote>`
`code`	`<pre><code>`
`linebreak`	`<br>`
`table`	`<table><tbody>`
`tablerow`	`<tr>`
`tablecell`	`<td>` or `<th>`
`asset`	`<img>` or media element
`tab`	Tab content wrapper

Rendering rich text to plain text#

For non-visual use cases (SEO meta descriptions, search indexing, summaries), use renderToText from @uniformdev/richtext:

import { renderToText } from "@uniformdev/richtext"; // richTextValue is the raw ParameterRichTextValue const plainText = renderToText(richTextValue);

Rendering rich text to HTML string#

For server-side HTML generation (e.g., RSS feeds, emails), use renderToHtml:

import { renderToHtml } from "@uniformdev/richtext"; const htmlString = renderToHtml(richTextValue);

Import reference#

Export	Package	Description
`UniformRichText`	`@uniformdev/next-app-router/component`	React component for rendering rich text
`ParameterRichTextValue`	`@uniformdev/richtext`	Type for rich text parameter values
`renderToText`	`@uniformdev/richtext`	Convert rich text to plain text
`renderToHtml`	`@uniformdev/richtext`	Convert rich text to HTML string
`walkRichTextTree`	`@uniformdev/richtext`	Walk and transform the rich text node tree
`isRichTextValue`	`@uniformdev/richtext`	Type guard for rich text values
`isRichTextValueConsideredEmpty`	`@uniformdev/richtext`	Check if rich text is empty