Add Content to your HTML

Lesson Overview


[00:00] So you've got your hands on some JSON, but lets be real, that's not impressing anyone. People want sleek, stylish HTML that looks like it was made just for them.

[00:09] Some content can be turned into HTML very simply by injecting that content directly into your project's code.

[00:16] Eight fields return a simple value in the API, like a number or a color code.

[00:21] Here's an example of how a number field might be returned in the API.

  "data": {
    "min_number": 8

[00:26] These simple fields can be added directly to your website code using the API IDs that represent them. So here's how you would template that same example in our website code using React.

  The minimum is: {data.min_number}

[00:38] The other 10 fields return a structured object in the API, such as the Rich Text. The Rich Text field has this more advanced structure because in the CMS you can define an array of formatting options when customizing how the text might look.

[00:52] This is how the API response of a rich text field might look.

"exampleText": [
    "type": "paragraph"
    "text": "I started reading Great Expectations!",
    "spans": [
        "start": 18,
        "end": 36,
        "type": "em"

[00:56] Don't worry though - our react development package comes with a handy helper component to make this just as easy as templating the simple fields.

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

<PrismicRichText field={} />

[01:03] The same goes for image fields, which contain the image URL, the dimensions and alt text. The next package helper component turns all of this into HTML for you.

[01:14] The client package also comes with useful helpers like asText and isFilled. These packages are already installed for you.

Main Takeaways

  • 8 Simple fields can be added directly to your website code using the API IDs
  • The other ten fields return a structured object in the API and require helper components
  • Our framework development packages @prismicio/react, @prismicio/client & @prismicio/next come with any helper components you might need

Useful Links

Prismic Client helper functions.

Prismic Next helper functions.

Prismic React helper functions.

Practice Activity

Complete the following tasks:

  • Replace the hard-coded title with { }.
  • Replace the paragraph with the <PrismicRichText field={} /> component.
  • Use the <PrismicNextImage field={} /> component to replace the image on the page.

Answer to continue

Quiz banner

What was the output of

What was the image coming from the API?