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

This looks promising but I feel like there needs to be more documentation or examples showing how to use web components in Builder. It would be great if there was a web component example in

1 Like

@sublimina Thank you for the feedback! We are continuing to build out our documentation within both github and our documentation hub.

For more information specifically on web components check out: Builder.io Webcomponents API - Builder.io

There is a bit more information as well as links to any number of articles about setting up your builder site. Check it out and let us know if you have any specific questions or areas we can help with!