Rich Text

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

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 Document 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.

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.

How to add a label to a rich text field

Unlike other rich text options, labels cannot be configured through Slice Machine. Instead, they must be added by editing your content model’s JSON file.

Display rich text

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

<PrismicRichText field={slice.primary.my_rich_text_field} />

Prismic also provides components for displaying rich text as plain text.

<PrismicText field={slice.primary.my_rich_text_field} />

Tips

• Style rich text

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

  MarkupCSS

  Next.jsNuxtSvelteKit

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

• Use custom UI components

  Prismic’s rich text components can render custom components for each block type.

  Next.jsNuxtSvelteKit

  import { Heading } from "@/components/Heading";
  
  <PrismicRichText
    field={slice.primary.my_rich_text_field}
    components={{
      // Use a component from another file.
      heading1: ({ children }) => <Heading as="h1">{children}</Heading>,
      // Use an HTML element with class names.
      paragraph: ({ children }) => <p className="my-8">{children}</p>,
    }}
  />;

  Learn more about the components prop
• 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);

  Learn more about asHTML and asText
• Use isFilled.richText() 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.
  }

  Learn more about isFilled

API response

Here is what a rich text field looks like from the Document 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.