---
title: DIY
url: 'https://doc.brix.ch/anura/webcomponents/diy'
markdown: 'https://doc.brix.ch/anura/webcomponents/diy.md'
lang: en
date: '2026-10-26'
description: 'Table of Contents Do It Yourself 1. Write your own web component 2. Use your new compone…'
---

[](#) 

  [ Welcome ](https://doc.brix.ch/)     [ brix:anura ](https://doc.brix.ch/anura)     [ Anura Webcomponents ](https://doc.brix.ch/anura/webcomponents)      DIY    

# DIY

#### Table of Contents

- [Do It Yourself](#do-it-yourself)
    - [1. Write your own web component](#1-write-your-own-web-comp)
    - [2. Use your new component](#2-use-your-new-component)
    - [3. Admire your work](#3-admire-your-work)

## Do It Yourself

You can also use our generalized [adapters](https://doc.brix.ch/anura/webcomponents/adapters) to write your own web components, if you prefer.

> > > This section assumes some basic JavaScript know-how

### 1. Write your own web component

*simple-example.js*

```js
const simpleTemplate = document.createElement('template'); // define your template:
simpleTemplate.innerHTML = `
<figure>
    <img>
    <figcaption></figcaption>
</figure> 
`
export class SimpleExample extends HTMLElement {

  constructor() {
    super();
    this._shadowRoot = this.attachShadow({'mode': 'open'});
    this._shadowRoot.appendChild(simpleTemplate.content.cloneNode(true)); // clone your template
    this._img = this._shadowRoot.querySelector('img'); // find elements to talk to later
    this._caption = this._shadowRoot.querySelector('figcaption');
  }

  connectedCallback() {
    // let's ignore live updates via observedAttributes/attributeChangedCallback for brevity
    this._adapter = document.querySelector(this.getAttribute('adapter'));
    if (this.hasAttribute('asset-id')) this.#showAssetById(this.getAttribute('asset-id')); // show an asset
  }

  #showAssetById(assetId) {
    this._adapter.loadAsset(assetId).then(asset => { // ask the adapter about said assetId
      if (asset) {
        this._img.src = asset.thumbnail;
        this._caption.innerText = asset.name;
      } else {
        this._img.src = '';
        this._caption.innerText = this._adapter.translate('resultCount0');
      }
    });
  }
}
window.customElements.define('simple-example', SimpleExample);
```

> > > > > All public methods of the adapters are documented in anura-adapters.js

### 2. Use your new component

```html
<head>
    <script type="module" src="./anura/src/adapters/some-adapter.js"></script>
    <script type="module" src="./my/components/simple-example.js"></script>
</head>
<body>
    <some-adapter url="https://some.server.com"></some-adapter>
    <h1>Admire your work</h1>
    <simple-example adapter="some-adapter" asset-id="1234"></simple-example>
</body>
```

### 3. Admire your work

![Screenshot of the simple-example component](https://doc.brix.ch/anura/webcomponents/diy/./result.png)

---

## Navigation

- Parent: [Anura Webcomponents](https://doc.brix.ch/anura/webcomponents.md)
- Previous: [Examples](https://doc.brix.ch/anura/webcomponents/examples.md)