https://github.com/tornqvist/prismic-element

Render Prismic.io fragments as DOM elements
https://github.com/tornqvist/prismic-element

bell choo dom-element html prismic

Last synced: about 1 month ago
JSON representation

Render Prismic.io fragments as DOM elements

• Host: GitHub
• URL: https://github.com/tornqvist/prismic-element
• Owner: tornqvist
• Created: 2017-05-06T20:28:20.000Z (about 8 years ago)
• Default Branch: main
• Last Pushed: 2022-01-07T16:58:00.000Z (over 3 years ago)
• Last Synced: 2025-03-25T08:42:46.242Z (about 2 months ago)
• Topics: bell, choo, dom-element, html, prismic
• Language: JavaScript
• Size: 91.8 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# prismic-element

[![npm version](https://img.shields.io/npm/v/prismic-element.svg?style=flat-square)](https://npmjs.org/package/prismic-element) [![downloads](http://img.shields.io/npm/dm/prismic-element.svg?style=flat-square)](https://npmjs.org/package/prismic-element)

[![style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://npmjs.org/package/prismic-element)

Mimics [prismic-dom](https://github.com/prismicio/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](https://github.com/prismicio/prismic-javascript).

## Usage

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

```javascript

const Prismic = require('prismic-javascript')

const asElement = require('prismic-element')

Prismic.api('https://.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](https://github.com/shama/bel) and [choo](https://github.com/yoshuawuyts/choo).

```javascript

const html = require('bel')

const Prismic = require('prismic-javascript')

const asElement = require('prismic-element')

Prismic.api('https://.cdn.prismic.io/api').then(api => {

  api.getSingle('my-page').then(doc => {

    document.body.appendChild(html`

      

        ${asElement(doc.data.title)}

        

          ${asElement(doc.data.image)}

          ${doc.data.image.alt}

        

        


        ${asElement(doc.data.body)}

      

    `)

  })

})

```

## See also

- [Prismic.io](https://prismic.io) – CMS as a service

- [bel](https://github.com/shama/bel) – Create DOM elements using tagged templates

- [choo](https://github.com/yoshuawuyts/choo) - High level framework using tagged templates

## License

MIT