prismic-dom Technical Reference


prismic-dom is one of two fundamental Prismic packages for creating web apps with Prismic and JavaScript. It is primarily responsible for rendering data from the Prismic API as HTML. The other is @prismicio/client, which helps with querying the API.

Dependencies & Requirements

This package works with the Prismic API V2. You can tell if you're using V2 if your endpoint URL includes


  • NPM
  • Yarn
npm install prismic-dom
yarn add prismic-dom


In this example, we will use @prismicio/client to query content from a Prismic repository, and prismic-dom to render the content we receive.

const PrismicDom = require('prismic-dom')
const Prismic = require('@prismicio/client')

const endpoint = ''
const client = Prismic.client(endpoint)

const init = async () => {
  const { data } = await client.getByUID('page', 'quickstart')
  // <p>This <em>should</em> log your formatted text.</p>



This section assumes you have required prismic-dom in your project and stored it in the variable PrismicDom, and that you have a document from the Prismic API stored in the variable document (using @prismicio/client):

const PrismicDom = require('prismic-dom')

async () => {
  const document = await client.getByUID('page', 'example-document')
  // all operations happen here

For the following examples, the document has this structure:

  uid: 'example-document',
  type: 'page',
  // document metadata
  // ...
  data: {
    date: '2018-01-16' // A date field
    link: {...} // An internal link to a blog post with the UID "vacation"
    title: {...} // An h2 title field with the content "This is a Title"
    description: {...} // A block of rich text with formatting

prismic-dom offers four useful methods for rendering HTML:


PrismicDom.Date() takes a date fields from the Prismic and converts it to an ISO date.

A Date object is a built-in JavaScript object for storing date and time. To learn more about the JavaScript date object, see this tutorial by Tania Rascia.

By default, Prismic dates are formatted: '2020-11-19T16:45:39+0000'.

// 2018-01-16T13:46:15.000Z

// 2018


PrismicDom.Link.url() takes a link from the API and a Link Resolver function and returns a URL. (See above for an explanation of Link Resolvers.) Works for Prismic document links, media links, and web links.

const linkResolver = (document) => {
  if (document.type === 'blog') return "/post/" + document.uid;
  else return "/" + document.uid;

PrismicDOM.Link.url(, linkResolver)
// /blog/vacation

What is a Link Resolver?

A Link Resolver is a function that formats internal links based on document data. For instance, a document of type "blog_post" with a UID of "vacation" could have the URL path /blog/vacation.

A very simple Link Resolver would look like this:

const linkResolver = (document) => "/" +

That example will return the document's UID as the URL path.


PrismicDom.RichText.asText() takes a rich text array from the Prismic API and converts it to plain text.

// "This is a Title"


PrismicDom.RichText.asHtml() takes a rich text array from the Prismic API, a Link Resolver function, and an HTML Serializer function, and returns rendered HTML. (See above for an explanation of Link Resolvers.)

PrismicDom.RichText.asHtml(, linkResolver, htmlSerializer)
// <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Ut enim ad minim veniam.</p>

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.