> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wizflow.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Component Blocks

> Create your own custom, reusable blocks for the Live Page Builder using standard web components

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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) and drop it onto the canvas in the [Live Page Builder](/features/live-page-builder) — fully editable and reusable across pages.

<Frame caption="Defining a custom web component block and configuring its inputs">
  <video controls className="w-full aspect-video rounded-xl" src="https://mintcdn.com/dreamplan-d87d53ea/T-nGPRpvGP_Fd5ZP/resources/live-page-web-component.mp4?fit=max&auto=format&n=T-nGPRpvGP_Fd5ZP&q=85&s=2a085d97dad29380d751354ab21560dc" data-path="resources/live-page-web-component.mp4" />
</Frame>

***

## 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:

```js theme={null}
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.

<Tip>
  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.
</Tip>

***

## 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

<CardGroup cols={2}>
  <Card title="Live Page Builder" icon="pen-ruler" href="/features/live-page-builder">
    Back to the visual builder overview
  </Card>

  <Card title="Page Templates" icon="folder" href="/features/live-page-templates">
    Save pages with your custom blocks as templates
  </Card>
</CardGroup>