Rich Text in React

Learn how to work with rich text in React.

Prismic provides the tools to write, save, query, and render rich text content in a React application.

Rich text is text that can be formatted in a user interface. Most people are comfortable creating content in a Rich Text editor. But Rich Text from an application like Microsoft Word or Google Docs has very complicated encoding that is difficult to work with in a web application.

Prismic provides a rich text editor that saves the content in a simple data structure designed for web publishing.

With Prismic, content creators can author content in a familiar rich text editor. Then, developers can use Prismic's first-class integration to pull the content into a React app and render it as HTML.

We'll use a basic Prismic project to demonstrate how to render rich text in React.

To get started, open your terminal and run the following command to launch a blank React project configured with Prismic:

Once that's set up, run the project with this command:

You now have your app running on a development server, accessible at http://localhost:3000/

You also have Slice Machine, Prismic’s local development tool, running at http://localhost:9999/

With our example project running, we’re ready to work with Rich Text.

Rich Text fields work like many other text inputs with formatting capabilities, including bolding, italicizing, and linking functionality.

To edit Rich Text, open the Prismic dashboard (prismic.io/dashboard) and click on your new repository.

Open the “Hello World” document. Inside there’s one Slice, called “Text”. Edit the content just like you would in any text editor. You can apply formatting, add images, and embed videos.

For more info, read Edit Rich Text.

You can customize the Rich Text field that appears in the Prismic Editor.

Go to http://localhost:9999/slices/Text/default in your browser. This is the Slice that renders your Rich Text field. On this screen, you can add other fields to your Text Slice. For now, we’re going to focus on the Rich Text field. Click the pencil icon to edit the Rich Text field.

On this screen, you can customize the Rich Text field options.

To learn more about the Rich Text configuration options, read Configure Rich Text.

In your new React application, open slices/Text/index.js. This is the React component for your Text Slices. Your text is rendered by the <PrismicRichText> component.

You can provide your own components to override <PrismicRichText>'s default rendering. The following code will render paragraph elements as blockquotes rather than ps:

Learn more about providing your own components.

Learn more about how to render Rich Text in Template Content in React.

To access the Rich Text of a Document, fetch the Document from the API. You can see a Prismic API query in src/Page.jsx:

This line fetches a document based on its unique identifier — or uid.

You can search API results by Rich Text using three predicates:

• fulltext to search for documents that contain a given string
• has to search for documents where a Rich Text field is populated with content
• missing to search for documents where a Rich Text field is not populated with content

Note: has and missing don't work with fields in Slices or Groups.

Here’s a fulltext query:

To learn more about querying, read Fetch Data in React.