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.

Uniform provides a Vanilla JS rich text-to-HTML renderer as well as components for React and Vue, plus framework-specific packages for Next.js and Nuxt. Each option lets you override how individual rich text nodes are rendered. The examples on this page use React; for Vue and Nuxt, see UniformRichText in the Nuxt SDK.

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:

UniformRichText props#

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.

Checking if rich text is empty#

Because the rich text value is a structured JSON object rather than a string, checking whether it's empty is more involved than comparing against an empty string or undefined. Use isRichTextValueConsideredEmpty from @uniformdev/richtext to guard rendering:

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:

Link nodes carry the link value on node.link ({ type, path, nodeId?, projectMapId?, attributes? }). The linkParamValueToAnchorProps helper from @uniformdev/canvas-react converts it to React anchor props: it derives the href and includes any custom link attributes set by the editor (such as target, rel, or data-*), applying the built-in safeguards (security filtering, automatic rel="noopener noreferrer", and class to className translation) described in Link Parameter Utilities. The default link renderer applies the same behavior. Outside React (Vue, Nuxt, or HTML string output), use linkParamValueToHtmlAttributes from @uniformdev/richtext, which returns a plain attribute record.

Note that a custom className prop as in the example above overrides any class attribute set on the link by the editor; merge the two values if you need both.

Rendering nested rich text nodes#

The UniformRichText component looks up its value from the current component, so it does not resolve rich text that is nested inside a block parameter. When you already have a rich text node — such as one nested in a block — render it directly with UniformRichTextNode.

A rich text value looks like this, with the top-level node available on richTextValue.root:

Pass the root node (or any child node) to UniformRichTextNode:

Default node type mappings#

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

The table, tablerow, and tablecell nodes require Uniform SDKs >= 19.181.1, and the asset node requires >= 19.187.0.

Node-specific properties#

Some nodes carry additional properties that are useful when writing custom renderers. Each listed helper is exported from @uniformdev/richtext.

Rendering rich text to plain text#

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

Rendering rich text to HTML string#

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

You can override node renderers when generating an HTML string by passing a resolveRenderer:

Import reference#