Core Concepts > Content Modeling > Fields > Rich Text and Titles

Configure the Rich Text and Title Fields

This article explains how to configure the Rich Text and Title fields, the differences between them, and how they differ from the Key Text field.

What are the Rich Text and Title fields?

The Rich Text and Title fields are both customizable text fields. The only difference is that the Title field, as its name says, only allows heading elements as formatting options.

Both fields return an array in the API response. The arrays contain nested elements that specify their content and formatting and can be parsed with the utilities in Prismic's various development kits.

To learn how to use the Rich Text and Title editors, visit the content creation section.

To learn how to render Rich Text and Titles, see the documentation for your framework or technology.

Rich Text vs. Key Text

The Key Text field has no formatting options. It returns a simple string in the API response. This makes the Rich Text field much more complex and configurable.

Elements and styles

These are all the elements and styles available for the Rich Text field. Note that for the Title field, only the heading elements and custom labels are available.

  • Heading elements (h1, h2, h3, h4, h5, h6)
  • Normal text paragraph
  • Strong or bold text
  • Emphasized or italic text
  • Preformatted text
  • Inline hyperlink to the web, to a document, or a media item
  • Image
  • Embed to a service URL supporting oEmbed
  • Unordered list
  • Ordered list
  • Right-to-left text
  • Custom labels

Custom labels

For special formatting in your Rich Text or Title fields, you can add custom formatting by using labels. For example, the prismic-dom kit for developing Prismic apps with JavaScript will, by default, render a custom label as a <span> with a class of the label's name.

This is an advanced configuration that can only be set up in the JSON editor.

Here is an example of a Rich Text field with the label options “right-align” and "center-align":

Copy
 "example_rich_text": {
   "type": "StructuredText",
   "config": {
     "single": "paragraph",
     "label": "Rich Content",
     "placeholder": "Rich Content",
     "labels": ["right-align", "center-align"]
   }
}

Rich Text field configuration

Screenshot of the Rich Text field in the drag-and-drop editor.

The Rich Text field allows content writers to edit rich content with standard formatting options, such as bold, italics, headings, and lists.

The visual builder

You'll see all these available options when configuring a Rich Text field, as well as the Field name, API ID, and Field placeholder.

Screenshot of the Rich Text field editor.

JSON model

The following table displays the JSON configuration options available in the JSON editor.

If the 'Allow multiple paragraphs' option is unchecked in the visual builder, then "multi" will change to "single" in the JSON editor.

If neither "multi" nor "single" are specified in the config object, then the field will allow multiple paragraphs and include all the available formatting options.

type
string (required)

The value must be StructuredText

config

object

Object for the configuration options

config.placeholder

string

Defines a user-friendly placeholder.

config.label

string

Defines the label that shows up for the field in the editor.

config.labels

array

An array of strings to define labels for custom formatting.

config.multi

string

A comma-separated list of formatting options, with paragraph breaks allowed.
Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl

config.single

string

A comma-separated list of formatting options that does not allow line breaks.

Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl

config.imageConstraint

object

Set the width and/or height constraints of any image added to the field. The object has two properties: width and height, with integers as their values, representing the image size in pixels.

Example JSON configuration

The following JSON defines a single paragraph Rich Text field:

Copy
"example_rich_text": {
  "type": "StructuredText",
  "config": {
    "single": "paragraph, strong, em",
    "label": "Quote",
    "placeholder": "Enter a quote..."
  }
}

API response example

Here is an API response example of a Rich Text field with the API ID of example_rich_text:

Copy
"example_rich_text": [
  {
    "type":"paragraph",
    "text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    "spans":["..."]
  }
]

Title field configuration

The Title field is a configurable field dedicated to titles and headings.

Screenshot of the Title field in the drag-and-drop editor.

The visual builder

You'll see all the available heading options when configuring a Title field, as well as the Field name, API ID, and Field placeholder.

Screenshot of the Title field editor.

JSON model

The following table explains all the configuration options of a Title field in the JSON editor:

type

string (required)

Value must be StructuredText

config

object

Object for the configuration options

config.placeholder

string

Defines a user-friendly placeholder.

config.label

string

Defines the label that shows up for the field in the editor.

config.labels

array

An array of strings to define labels for custom formatting.

config.single

string

A comma-separated list of formatting options.

Options: heading1 | heading2 | heading3 | heading4 | heading5 | heading6

Example JSON configuration

The following JSON defines a single heading Title field:

Copy
"example_title": {
  "type": "StructuredText",
  "config": {
    "single": "heading1, heading2, heading3",
    "label": "Page Title",
    "placeholder": "Enter page title...",
    "useAsTitle": true
  }
}

API response example

Below you can see an example Title field's API response:

Copy
"example_title":[
  {
    "type":"heading1",
    "text":"Lorem ipsum",
    "spans":[]
  }
]
Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.