prismic-element

Mimics prismic-dom except that it renders real DOM nodes and not just HTML strings.

NOTE:

Requires version 2 of the Prismic.io API and the compatible JavaScript library prismic-javascript.

Usage

Pass a rich text object to the function and get HTML Element(s) back.

const Prismic = require('prismic-javascript')
const asElement = require('prismic-element')

Prismic.api('https://<YOUR_API_ENDPOINT>.cdn.prismic.io/api').then(api => {
  api.getSingle('my-page').then(doc => {
    document.body.appendChild(asElement(doc.data.body));
  })
})

With bel

Working with DOM elements integrates beautifully with tools such as bel and choo.

const html = require('bel')
const Prismic = require('prismic-javascript')
const asElement = require('prismic-element')

Prismic.api('https://<YOUR_API_ENDPOINT>.cdn.prismic.io/api').then(api => {
  api.getSingle('my-page').then(doc => {
    document.body.appendChild(html`
      <article>
        ${asElement(doc.data.title)}

        <figure>
          ${asElement(doc.data.image)}
          <figcaption>${doc.data.image.alt}</figcaption>
        </figure>

        <hr />

        ${asElement(doc.data.body)}
      </article>
    `)
  })
})

See also

• Prismic.io – CMS as a service
• bel – Create DOM elements using tagged templates
• choo - High level framework using tagged templates

License

MIT