Rich Text

The rich text field allows content writers to write formatted content, including paragraphs, headings, lists, and more.

Prismic provides components for Next.js, Nuxt, and SvelteKit to display rich text.

import { PrismicRichText } from "@prismicio/react";
import { Heading } from "@/components/Heading";

<PrismicRichText
  field={slice.primary.my_rich_text_field}
  components={{
    heading1: ({ children }) => <Heading as="h1">{children}</Heading>,
    paragraph: ({ children }) => <p className="my-8">{children}</p>,
  }}
/>;

Add a rich text field to a content model

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

• Add a rich text field

  In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a rich text field.

  The label determines the label shown to content writers in the Page Builder. Use an easily understood name.

  The API ID determines the property name in the Content API. Use a short, snake-cased name.

  The Allow target blank for links checkbox determines if a content writer can configure links to open in a new window.

  The Allow multiple paragraphs checkbox determines if a content writer can write multiple blocks of content.

• (Optional) Allow a subset of formatting options

  By default, rich text fields support all formatting options. In some cases, you may want to restrict formatting options, such as only allowing H1, H2, and H3 headings.

  Open the field settings and enable or disable formatting options under the Accept section.

Display rich text

Prismic provides rich text components for Next.js, Nuxt, and SvelteKit.

import { PrismicRichText, PrismicText } from "@prismicio/react";

// Display as rich text with formatting
<PrismicRichText field={slice.primary.my_rich_text_field} />

// Display as plain text
<PrismicText field={slice.primary.my_rich_text_field} />

Style rich text

Rich text can be styled using CSS and a wrapper element.

import { PrismicRichText } from "@prismicio/react";

<div className="rich-text">
  <PrismicRichText field={slice.primary.my_rich_text_field} />
</div>

Use custom UI components

Prismic’s rich text component can render custom components for each block type using the components prop. This prop allows you to use component libraries like Mantine, MUI, or your own.

import { PrismicRichText } from "@prismicio/react";
import { Heading } from "@/components/Heading";

<PrismicRichText
  field={slice.primary.my_rich_text_field}
  components={{
    heading1: ({ children }) => <Heading as="h1">{children}</Heading>,
    paragraph: ({ children }) => <p className="my-8">{children}</p>,
  }}
/>;

Use custom UI components globally

To set custom components once and use globally, create your own wrapper component containing <PrismicRichText> and your custom components. Use your component in place of @prismicio/react’s <PrismicRichText>.

You can use the following example as a starting point — just customize your default components. It supports the same props as the base <PrismicRichText>.

import {
  PrismicRichText as BasePrismicRichText,
  PrismicRichTextProps,
  JSXMapSerializer,
} from "@prismicio/react";

const defaultComponents: JSXMapSerializer = {
  heading1: ({ children }) => (
    <h1 className="font-bold text-3xl">{children}</h1>
  ),
};

export function PrismicRichText({
  components,
  ...props
}: PrismicRichTextProps) {
  return (
    <BasePrismicRichText
      components={{ ...defaultComponents, ...components }}
      {...props}
    />
  );
}

Use labels for custom formatting

Rich text fields support standard text formatting options, like bold and emphasized text. If the formatting you need is not supported, add custom formatting options using labels.

Content writers can select text and apply a label. In your website’s code, you can read the label and apply custom formatting by, for example, adding a custom CSS class.

You can register as many labels as needed.

Convert rich text to HTML or plain text

@prismicio/client provides helpers to convert rich text to HTML or plain text.

import { asHTML, asText } from "@prismicio/client";

const html = asHTML(slice.primary.my_rich_text_field);
const text = asText(slice.primary.my_rich_text_field);

Check if a rich text field has a value

Use isFilled.richText() from @prismicio/client to check if a rich text field has a value.

import { isFilled } from "@prismicio/client";

if (isFilled.richText(slice.primary.my_rich_text_field)) {
  // Do something if `my_rich_text_field` has a value.
}

API response

Here is what a rich text field looks like from the Content API:

{
  "example_rich_text": [
    {
      "type": "heading1",
      "text": "Build a website that grows",
      "spans": []
    },
    {
      "type": "paragraph",
      "text": "Empower marketers to release on-brand pages fast.",
      "spans": [
        {
          "type": "em",
          "start": 45,
          "end": 48
        }
      ]
    }
  ]
}

Prismic returns a JSON representation of the field’s formatted content. Prismic’s rich text components are the best way to display the JSON content.