Brightspot CMS Developer Guide

Rendering rich text

Brightspot stores rich-text elements as Strings, and a view model's getter for a String retrieves the text as it is stored. If Mary says to Henry in plain text, "No, Henry, I simply will not marry you!", Brightspot stores her refusal as:

Plain text example.png Plain text example.png

and the view renders it the same way.

However, if Mary wants to put some emphasis into her refusal, she may say,

Text with emphasis.png Text with emphasis.png

To render the previous string with boldface and italics, Brightspot needs to store HTML markup along with the plain text as in the following example:

Text with emphasis and html code.png Text with emphasis and html code.png

However, Brightspot returns strings as they are stored. If you apply a simple getter to the above string, Brightspot escapes the opening and closing brackets so they appear in the rendered page. Looking at the rendered string's source, you see all the escape codes.

Text with escape codes.png Text with escape codes.png

Brightspot provides the RichTextViewBuilder class to revert the escaped HTML to unescaped HTML so that the browser renders the rich text as expected.

Step 1: Create a rich-text marker

Create a rich-text marker interface RichTextElementView.

public interface RichTextElementView {


Brightspot uses implementations of this interface to create views.

Step 2: Add rich-text support to view model

Apply the method RichTextViewBuilder#buildHtml to the escaped HTML.

import com.psddev.cms.rte.RichTextViewBuilder;

import com.psddev.cms.view.ViewModel;

import com.psddev.cms.view.PageEntryView;

import styleguide.content.article.ArticleView;

public class ArticleViewModel extends ViewModel<Article> implements ArticleView, PageEntryView {


public CharSequence getBody() {

return RichTextViewBuilder.buildHtml(


e -> createView(RichTextElementView.class, e));


/* Other getters */

  • Retrieves the escaped HTML from the model.
  • Calls the method createView to convert the escaped HTML into a view using the marker class RichTextElementView created in step 1.

See also:

Previous Topic
Rich-text elements
Next Topic
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Apple News