For the most up-to-date documentation, please visit

Adapters connect the Anura front-end components to an upstream source, usually a DAM. At least one is required.


All adapters have to extend the anura-adapter in order to inherit some utility functions, namely:

  • Translations
    • translate(key, args) - labels translated into the current locale. Supports arbitrary arguments, e.g. the key pageX is translated as Page {page}, expecting {page: 5} in the args. So translate('pageX', {page: 5}) results in Page 5
    • setTranslation(multiMap) - overload the built-in translations, e.g. setTranslation({en: {myKey: 'new value'}, de: {myKey: 'neuer Wert'}})
  • States - stored in the URL as query parameters inside window.location.hash (so you can copy-paste stateful links). Prefix is an arbitrary prefix to your key in order to support multiple instances of the same component on one page.
    • hasState(prefix, key) - test if a given key is present
    • getState(prefix, key, fallback) - get the value of a given key, or your fallback value if not present
    • getStates() - get all states
    • setState(prefix, key, value) - set a value for a given key
    • setStates(array) - set multiple states at once. Note that you must deal with prefix yourself.
    • removeState(prefix, key) - removes the value for a given key (including the key itself)
    • removeStates(prefix, fragment) - remove multiple values whose key starts with fragment

When implementing your own adapter, be sure to inform super() in attributeChangedCallback and connectedCallback.



A regular load-event, can be used to set translations, e.g.

<some-adapter locale="de" onload="this.setTranslation({en: {loadMore: 'gimme more'}})"></celum-adapter>


{detail: {name: name, oldValue: oldValue, newValue: newValue}}

Fired when any attribute has been changed, indicating that components hooked up to this adapter may want to reload themselves, e.g. because the locale has changed.


For testing purposes, serves up a static set of nodes and assets. Has no attributes or events.



Connects Anura to a CELUM DAM, provided that the instance has the backend-plugin installed.

<celum-adapter url="https://my.celum.server/anura/example" locale="en"></celum-adapter>



required: yes, default: -

The URL where the back-end endpoint is located, e.g. https://my.celum.server/anura/example


required: no, default: the page's language (or en)

ISO 639-1 code for the language you'd like to use. Defaults to <html lang=...> if present or en otherwise.


required: maybe, default: -

API-Token to use, only required when the back-end is protected by one.