---
url: /documentation/concepts/elements/preview.md
description: >-
  Customize element previews in the editor with setPreviewHandler() or
  setElementNodeRenderer().
---

# Render an Element Preview

## Simple Preview Rendering

You can define your preview freely by adding a preview handler function, which will be called by the editor to render a preview of an element node.

This handler will have the element's document node itself as its `this` context and its DOM element as the only parameter, so you can add child nodes to display your contents:

```js
document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance

  editor.definition.setPreviewHandler('text', function (domNode) {
    const container = domNode.querySelector('.preview-container')
    
    if (!container) {
      container = document.createElement('div')
      container.className = 'preview-container'
      domNode.appendChild(container)
    }

    container.innerHTML = this.properties.content
  })
})
```

Note that the preview handler will be called every time the element node is updated, so you can make sure that the preview elements stay up to date.

## Custom Element Rendering 

Instead of making the preview a small part of the element, you can swap out the whole Vue component which renders the element node in the editor:

```js
import MySectionRenderer from './my-section-renderer.vue'

document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance
  editor.definition.setElementNodeRenderer('section', MySectionRenderer)
})
```

The rendered component will receive slotted content for the `headline` and its `children` as well as props for the rendered `node` and whether the element is currently `dragging`. Take a look at the [default element renderer](https://bitbucket.org/ownbit/ownbit-wpce/src/dev/src/js/components/elements/DefaultElementNodeRenderer.vue) for an example.