---
url: /documentation/concepts/elements/registration.md
description: >-
  Register WPCE element definitions during wpce_instance_added by mounting them
  through editor.definition.mountElement().
---

# Register an Element Definition

As elements are defined in JavaScript, we'll have to hook into the `wpce_instance_added` event to get the editor instance and register the element definition there.

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

  const elementDefinition = {
    id: 'text',
    label: 'Text',
    icon: '<span class="dashicons dashicons-editor-textcolor"></span>',
    isContainer: false,
    groups: ['content'],
    properties: [
      {
        id: 'content',
        label: 'Inhalt',
        description: 'Der anzuzeigende Text',
        input: {
          type: 'visualtext'
        },
        defaultValue: 'my default value!'
      }
    ]
  }

  editor.definition.mountElement(elementDefinition)
})
```

## Depending on the Post Type

If you want to adjust behavior of your element definitions based on the post type the WPCE instance refers to, you can access it at through the event object:

```js
document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance
  const manager = event.detail.instanceManager
  
  const elementDefinition = {
    id: 'root',
    label: manager.postType === 'wpce-element'
      ? 'Globales Element'
      : 'Dokument'

    // ...
  }

  editor.definition.mountElement(elementDefinition)
})
```