So you've reached a stage in your content modeling process where you're wondering, "Which style of text field do my content creators need?" Then you begin to ask yourself, "What exactly is the difference in the two?" and "How will this effect the content and styling?"

Well let's clear this up once and for all.
 

Key Text

We'll start with the simpler of the two, 'Key Text' . This text field is pretty straightforward, whatever your content creators write in the field will be delivered using the API as a string, no frills and thrills, no formatting, just a simple lightweight string of text.

So if you add a 'Key Text' field in your custom type and add some text in the document, it should look something like this:

Below you can see the API response of how the key text field will look:

data: {

  simple_text: "Here is how a key text field will look."

}

In this example we can see that a Key Text field with the API ID of 'simple_text' is returned with a string inside the data object. This is what your application will receive when you query the document. So when using 'Key Text' all styling for this field will be handled inside the website application.
 

Rich Text

OK, now on to the interesting part, 'Rich Text'. This text field is full of options. It gives your content creators the ability to take control on how they would like to style their text and have it appear on the live site.

Some options include:

  • Titles
  • Bold text
  • Italics
  • Ordered and unordered lists
  • links
  • Images and embeds

This gives your creators a lot of freedom, but it also makes this field a lot more complex than the 'Key Text' field seen previously. This is translated in to a more complex response from the API.

So if you add a 'Rich Text' field in your custom type and add some text in the document, it should look something like this:

Below you can see how the API will deliver all this extra information:

data: {
  complex_text: [
    {
      type: "heading1"
      text: "The rich text field."
      spans: [ ]
    },
    {
      type: "paragraph"
      text: ""
      spans: [ ]
    },
    {
      type: "paragraph"
      text: "This is how you will see the information delivered to your application."
      spans: [
        {
          start: 8
          end: 11
          type: "strong"
        },
        {
          start: 29
          end: 40
          type: "em"
        }
      ]
    },
    {
      type: "o-list-item"
      text: "With OL's"
      spans: [ ]
    },
    {
      type: "list-item"
      text: "And UL's"
      spans: [ ]
    },
    {
      type: "paragraph"
      text: "Lot's of options."
      spans: [ ]
    }
  ]
}

In this example you can see that this is much more than a simple string. 

In the data object we have a rich text field with the API ID 'complex_text' and inside this we can see all the different styling that was added to the text in the document, like H1 styling and lists, output as objects with strings relating to the information and what they are. 

How do I template this information?

This may seem complicated but using one of our development kits makes it quite easy to template this information in your application with all the relevant styling.

Alternatively you can strip away everything but the text and take more control of the styling in your web app using a development kit as well.

You can read more about this in our developer docs. For example, here is the link that explains how to use the prismic-dom kit with Javascript:
https://prismic.io/docs/javascript/templating/rich-text
 

Summary

That's everything you need to know about the difference between 'Rich Text' and 'Key Text'. Now you can decide which one best fits the needs of you and your content creators.

Did this answer your question?