# Rich Text Parameter Utilities > How to render and customize rich text parameters in Uniform components. Source: https://docs.uniform.app/docs/sdk/parameter-utilities/rich-text-parameters 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](https://docs.uniform.app/docs/sdk/nuxt#uniformrichtext). ## 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: ```tsx import { ComponentParameter, ComponentProps, UniformRichText, } from "@uniformdev/next-app-router/component"; import { ParameterRichTextValue } from "@uniformdev/richtext"; type ArticleProps = { body?: ComponentParameter; }; export const ArticleComponent = ({ parameters: { body }, component, }: ComponentProps) => { return (
); }; ``` ## UniformRichText props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `component` | `Pick` | required | Component context (from `ComponentProps`) | | `parameter` | `ComponentParameter` | 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. ## 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: ```tsx import { UniformRichText } from "@uniformdev/next-app-router/component"; import { isRichTextValueConsideredEmpty } from "@uniformdev/richtext"; isRichTextValueConsideredEmpty(body?.value) ? null : ( ); ``` ## 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`: ```tsx import { linkParamValueToAnchorProps } from "@uniformdev/canvas-react"; import { RichTextNode, isRichTextNodeType } 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 {children}; }; } // Custom link rendering if (node.type === "link") { return ({ node, children }) => { // Narrow to a link node so `node.link` is available under strict TS if (!isRichTextNodeType(node, "link")) return null; return ( {children} ); }; } // Return undefined to use default renderer return undefined; }; // Usage: ``` 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](https://docs.uniform.app/docs/guides/models/components/parameters#link) 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](https://docs.uniform.app/docs/sdk/parameter-utilities/link-parameters). 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`: ```js const richTextValue = { root: { type: "root", version: 1, children: [ { type: "paragraph", version: 1, children: [ { type: "text", version: 1, text: "text", }, ], }, ], }, }; ``` Pass the `root` node (or any child node) to `UniformRichTextNode`: ```tsx import { UniformRichTextNode } from "@uniformdev/canvas-react"; ; ``` ## Default node type mappings The SDK provides default renderers for these rich text node types: | Node Type | Default Rendering | | --- | --- | | `heading` | `

` through `

` based on tag level | | `paragraph` | `

` | | `text` | Inline text with formatting (bold, italic, underline, etc.) | | `link` | `` | | `list` | `