Skip to main content
The Web Component block lets you go beyond the built-in blocks and bring your own. Define a custom block as a standard JavaScript web component and drop it onto the canvas in the Live Page Builder — fully editable and reusable across pages.

​
What You Can Do

  • Drop in any web component that follows the standard custom-element pattern
  • Configure custom inputs (attributes) for your component using the schema input editor
  • Copy and paste a Web Component block to other pages
  • Copy an AI prompt — a built-in utility that generates a ready-to-use prompt (with your configured inputs) so you can offload web component creation to an LLM

​
Defining a Web Component

A Web Component block is a JavaScript class that extends HTMLElement. Use observedAttributes to declare the inputs you want to expose, and re-render when they change: 
export default class extends HTMLElement {
  static observedAttributes = [/* e.g. "title" */];

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const value = this.getAttribute("title") ?? "";
    this.shadowRoot.innerHTML = `
      <style>:host{display:block}</style>
      <div>${value}</div>
    `;
  }
}
Each attribute you list in observedAttributes can be wired up as a configurable input through the schema input editor, so non-technical authors can edit your component’s content from the property panel just like any built-in block.
Use the Copy AI prompt utility to hand off the boilerplate. It produces a prompt pre-filled with the inputs you’ve configured, so an LLM can scaffold the component for you.

​
Use Cases

  • Bespoke visualizations — render a chart, gauge, or diagram tailored to your data
  • Embedded widgets — calculators, sliders, or interactive elements not covered by built-in blocks
  • Brand-specific UI — components that match a design system exactly

​
Current Limitations

This is a minimal, complete implementation of custom web component support. The following are not yet supported and are planned for future releases:
  • $ref nested block support
  • Persisting Web Component blocks in the block palette
  • AI assistant integration

​
Next Steps

Live Page Builder

Back to the visual builder overview

Page Templates

Save pages with your custom blocks as templates