Rich text support
Rich text gives editors control over how text and other elements appear within a component. This could be as simple as allowing inline formatting in the form of bold and italic text effects, or more specialized elements such as block quotes, code blocks, or even images or tables.
Rich text in Uniform#
Most systems distill the formatting from rich text into a proprietary JSON format that's programmatically consumed by your chosen front end, converting the raw data into web-friendly HTML.
Rich text fields can vary dramatically in terms of their function and capabilities. Most systems supporting this formatting will also provide a proprietary package or rendering engine that does the heavy lifting so that rich text works seamlessly when computed into HTML.
Rich text from Uniform or external sources#
An important early decision to make is if you want your editors to create and maintain rich text for a given component within Uniform directly or from an external system. Unlike many parameters in Uniform, the Rich Text parameter isn't designed to be connected to external data as Uniform can't guarantee that external sources utilise a compatible data structure to the one supported by Uniform's packages.
Uniform's Rich Text parameter#
Out of the box you will find that Uniform supplies a parameter type called Rich Text that can be implemented on any component or content type. Once implemented, the parameter will allow you to enter and format rich text directly in compositions and entries.
Add a Rich Text parameter to a component#
Adding the Uniform Rich Text parameter is the same as adding any other parameter type. Navigate to the component definition which you would like to add a Rich Text property to and select Add parameter. Then select the Rich Text parameter type:
Once added, you will be able to control the formatting options that you would like to make available to your editors. This provides necessary governance to prevent authors from using elements that aren't part of the design system (such as block quotes).
When the link element is enabled, the parameter configuration also includes a link configuration section where you can allow anchors (a #fragment editors can append to project map links) and define allowed custom link attributes — HTML attributes such as target, rel, class, or data-* that editors can set on inline links. See the Rich Text parameter reference for details.
Once your new parameter has been saved, configuration is complete. Next, you will need to ensure that your front end is able to process the rich text field, converting it to web-friendly HTML.
Render the Uniform Rich Text parameter#
Uniform stores any content entered into the Rich Text parameter as JSON, delivered through Uniform's APIs and compiled into HTML on your front end. The Uniform SDK does the heavy lifting: it provides a Vanilla JS rich text-to-HTML renderer as well as components for React and Vue, with framework-specific packages for Next.js and Nuxt. Each option lets you override how individual rich text nodes are rendered.
Rich Text Parameter Utilities
Rendering code and the full API reference: the UniformRichText component, custom node renderers, and the helper reference.
Rich text from integrations and external sources#
The Uniform Rich Text parameter is ideal for components leveraging a single piece of content to support an article or campaign. But sometimes you may use structured content from multiple external sources. In these cases, JSON-based rich text that comes from a system with a data structure different from the one provided by Uniform requires slightly different steps to ensure the external rich text renders correctly in your frontend.
Connecting external rich text to components#
To consume rich text data in the frontend, you will need to create a parameter to connect to rich text data in the API response from your chosen external source. First, navigate to the component which you would like to support rich text, and add a new parameter of type JSON Data. Give this parameter any name that you like, for example "Rich text content."
Once the parameter is configured, you can connect it to any JSON content from external sources. Next, within Canvas, you will create a new data resource which contains rich text content from your integration source. At this stage, you need to select the top-level field which contains the rich text content in JSON format, and connect this data to your component.
tip
Once you have set up a data connection between a JSON parameter and rich text, Uniform recommends saving this configuration as a pattern to make updating the content easier in the future. To find out more, check out the guide on patterns.
To learn more about connecting data to components, check out the connect external data guide.
Rendering external rich text into HTML#
Once you have connected the JSON rich text data to your component in Canvas, you will need to head to the component on your front end which will resolve the rich text into HTML. Check the documentation for your rich text service, as the steps for processing rich text may vary by front-end framework.
In general, this may involve installing a package from the service that can handle the compilation of HTML from the JSON data that you have already connected to Canvas.
Connecting multiple rich text sources
If you are using a project with multiple integrations, there may be a case where you need to support rich text from multiple sources on the same component. In these cases, Uniform recommends following the same steps as above and to use the frontend to determine the correct package for compiling the resulting JSON data into HTML.