# Embed Discover app into Kibana app plugin

**URL:** <https://discuss.elastic.co/t/embed-discover-app-into-kibana-app-plugin/265411>\
**Category:** Kibana\
**Tags:** kibana-plugin-development\
**Created:** [February 24, 2021, 9:06pm UTC](https://discuss.elastic.co/t/embed-discover-app-into-kibana-app-plugin/265411 "2021-02-24T21:06:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thomas\_Vaudry-Read](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomas_vaudry-read/32/84506_2.png) [@Thomas\_Vaudry-Read](https://discuss.elastic.co/u/Thomas_Vaudry-Read)\
**Post date:** [February 24, 2021, 9:06pm UTC](https://discuss.elastic.co/t/embed-discover-app-into-kibana-app-plugin/265411/1 "2021-02-24T21:06:52Z")

</div>

I am developing a Kibana application plugin, and would like to embed the discover app into one of the pages. There does not seem to be much documentation on how to use the embeddables, and if that would even work for a saved search from discover.

Any help with this would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![Vadims\_Daleckis](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vadims_daleckis/32/57613_2.png) [@Vadims\_Daleckis](https://discuss.elastic.co/u/Vadims_Daleckis)\
**Post date:** [February 25, 2021, 10:21am UTC](https://discuss.elastic.co/t/embed-discover-app-into-kibana-app-plugin/265411/2 "2021-02-25T10:21:02Z")

</div>

Hello @Thomas_Vaudry-Read ,

Welcome to Elastic Discuss forum!

There is not much documentation indeed, but you can find some [here](https://www.elastic.co/guide/en/kibana/master/embeddable-plugin.html) and [here](https://github.com/elastic/kibana/blob/master/src/plugins/embeddable/docs/README.md).

The best way to learn how to use embeddable is to run Kibana with `--run-examples` flag.

```auto
yarn start --run-examples

```

Then in the left sidebar there will be a section with example plugins available and you can edit the `embeddable_explorer` plugin to learn how to work with embeddables.

Going back specifically to your question, you can render in your app embeddables which are registered using [`registerEmbeddableFactory` method](https://github.com/elastic/kibana/blob/master/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablesetup.registerembeddablefactory.md). The whole Discover app is not an embeddable, unfortunately.

But Discover plugin registers an embeddable widget which can display Discover search results (`SearchEmbeddable`), [here](https://github.com/elastic/kibana/blob/bb8e505be2d673b9153fad9bcc4764fe7e5b81dd/src/plugins/discover/public/plugin.ts#L385-L386). In your app you can render that search embeddable.

To render the `search` embeddable which Discover app registers, [you will need to get the embeddable factory](https://github.com/elastic/kibana/blob/master/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestart.getembeddablefactory.md).

```auto
const factory = plugins.embeddable.getEmbeddableFactory('search');

```

And then use that factory to render the embeddable:

```auto
const embeddable = factory.create(/* ... */);
embeddable.render(element);

```

---

<div class="post-metadata">

**Author:** ![Thomas\_Vaudry-Read](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomas_vaudry-read/32/84506_2.png) [@Thomas\_Vaudry-Read](https://discuss.elastic.co/u/Thomas_Vaudry-Read)\
**Post date:** [February 25, 2021, 10:10pm UTC](https://discuss.elastic.co/t/embed-discover-app-into-kibana-app-plugin/265411/3 "2021-02-25T22:10:48Z")

</div>

@Vadims_Daleckis Thanks for the reply. This is what I needed to move forward!

Now I am wondering how do I pass in the time range from the search bar on the page?  
Basically, how do we pass the parameters from search/filters to the embeddables? I thought it may have worked automatically, but it does not.

---

<div class="post-metadata">

**Author:** ![Vadims\_Daleckis](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vadims_daleckis/32/57613_2.png) [@Vadims\_Daleckis](https://discuss.elastic.co/u/Vadims_Daleckis)\
**Post date:** [March 1, 2021, 10:32am UTC](https://discuss.elastic.co/t/embed-discover-app-into-kibana-app-plugin/265411/4 "2021-03-01T10:32:46Z")

</div>

@Thomas_Vaudry-Read,

I've looked it up [how it is done for the dashboard embeddable](https://github.com/elastic/kibana/blob/c116477198a1cd78e2e43bfb38d413cb1f67a2a0/src/plugins/dashboard/public/application/dashboard_app_functions.ts#L153-L155): basically, you get the `query` object from the `data` plugin and use that to access the time range and provide it to your embeddable.

![image](https://us1.discourse-cdn.com/elastic/original/3X/c/8/c87f8d2c23726c48212b4c5bd373cef6c37ee8c9.png)

Where `query` comes from `data` plugin.

---

<div class="post-metadata">

**Author:** ![Thomas\_Vaudry-Read](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomas_vaudry-read/32/84506_2.png) [@Thomas\_Vaudry-Read](https://discuss.elastic.co/u/Thomas_Vaudry-Read)\
**Post date:** [March 3, 2021, 3:54am UTC](https://discuss.elastic.co/t/embed-discover-app-into-kibana-app-plugin/265411/5 "2021-03-03T03:54:03Z")

</div>

This works for passing in the initial value, but then it does not update as you continue to change the query, time range or filters. I noticed there is an `onInputUpdated` function you pass into the renderer of the embeddable, but have not seen any proper implementations.

There must be something I am missing with regards to how the embeddable will automatically update/refresh when the inputs are changed. Unfortunately, again, there is not much documentation in this area. Any help will be appreciated.

---

<div class="post-metadata">

**Author:** ![Vadims\_Daleckis](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vadims_daleckis/32/57613_2.png) [@Vadims\_Daleckis](https://discuss.elastic.co/u/Vadims_Daleckis)\
**Post date:** [March 3, 2021, 11:30am UTC](https://discuss.elastic.co/t/embed-discover-app-into-kibana-app-plugin/265411/6 "2021-03-03T11:30:21Z")

</div>

> There must be something I am missing with regards to how the embeddable will automatically update/refresh when the inputs are changed.

Embeddable will indeed automatically update when you change its input. You need to use `embeddable.updateInput({ /* ... */ })` method for that.

Query, time range and filter have unfortunately their separate states in Kibana, so you would need to do something similar for each one separately.

To subscribe to time range changes and update the embeddable with the latest value, you could do something like this:

```ts
query.timefilter.timefilter.getTimeUpdate$().subscribe(() => {
  embeddable.updateInput({
    timeRange: {
      ..._.cloneDeep(query.timefilter.timefilter.getTime()),
    },
  });
});

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [March 31, 2021, 11:30am UTC](https://discuss.elastic.co/t/embed-discover-app-into-kibana-app-plugin/265411/7 "2021-03-31T11:30:49Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.