Home App Docs Blog Github

Regstering web components for use in Builder's Visual Editor

Registering custom elements with Builder is a great way to get support of custom blocks in Builder for any framework.

Let’s say we have a webcomponent called my-hero that takes a title and susbtitle like so

<my-hero title="Hello world" substitle="Lorem ipsum"></my-hero>

That you defined in your code something like:

class MyHero extends HTMLElement { /* ... */ }

customElements.define('my-hero', MyHero)

You can register it in your code:

<script>
// When the SDK loads
window.builderWcLoadCallbacks = [
  (context) => {
    // Register each component
    context.Builder.registerComponent(null, {
      tag: 'my-hero',
      inputs: [ 
        { name: 'title', type: 'string', defaultValue: 'Hello world' },
        { name: 'subTitle', type: 'string', defaultValue: 'Lorem ipsum' }
      ]
    })
  }
];
</script>

You can see more on our import types supported here - just note that for webcomponents we only support primitive elements (text, number, boolean, etc) and not deep objects and arrays (lists, maps, etc)

To render your content, see our webcomponents SDK docs

<builder-component model="page" api-key="YOUR_KEY">
  <!-- HTML here will display while your content is loading, e.g. put a gif here, or leave empty -->
</builder-component>
1 Like