embeddable

Generate Kibana Embeddable

Create a custom Embeddable that can be rendered inside Kibana Dashboards or other container contexts. Ask the user for:

1. Embeddable type ID (snake_case, e.g. my_plugin_widget)
2. Display name (human-readable, e.g. "My Plugin Widget")
3. What it renders (description of the visualization or content)
4. Input parameters (what data/config the embeddable accepts from the dashboard)
5. Output parameters (what data the embeddable exposes to the dashboard/container)
6. Data source: Does it query Elasticsearch directly, use a saved object, or receive all data via input?
7. Interactive? Does it emit events (e.g. filter clicks, drilldowns)?
8. Needs saved object reference? Can users save/load configurations for this embeddable?

Generation Steps

1. Create the embeddable directory structure:

   public/embeddable/
   ├── index.ts
   ├── my_embeddable.tsx           # The embeddable class
   ├── my_embeddable_factory.ts    # Factory for creating instances
   ├── my_embeddable_component.tsx # React component rendered inside
   └── types.ts                    # Input/Output interfaces
   

2. Define Input and Output interfaces in types.ts:

   • Input extends EmbeddableInput — includes id, title, timeRange, filters, query, plus custom fields
   • Output extends EmbeddableOutput — includes any data the embeddable exposes to the container

3. Create the Embeddable class:

   • Extends Embeddable<MyInput, MyOutput>
   • Implements render(node: HTMLElement) and reload() methods
   • Renders a React component into the provided DOM node
   • Handles input changes via this.getInput() and this.updateInput()
   • Handles output updates via this.updateOutput()
   • Implements destroy() for cleanup (unmount React, cancel subscriptions)

4. Create the EmbeddableFactory:

   • Extends EmbeddableFactoryDefinition
   • Sets type, displayName, grouping, getIconType()
   • Implements create(input, parent?) to instantiate the embeddable
   • Optionally implements getExplicitInput() for a creation wizard/modal
   • Optionally implements canCreateNew() and isEditable()