# Reusing existing Kibana devtools in own custom Plugins?

**URL:** <https://discuss.elastic.co/t/reusing-existing-kibana-devtools-in-own-custom-plugins/139450>\
**Category:** Kibana\
**Created:** [July 11, 2018, 2:54am UTC](https://discuss.elastic.co/t/reusing-existing-kibana-devtools-in-own-custom-plugins/139450 "2018-07-11T02:54:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dMusicb](https://avatars.discourse-cdn.com/v4/letter/d/4bbf92/32.png) [@dMusicb](https://discuss.elastic.co/u/dMusicb)\
**Post date:** [July 11, 2018, 2:54am UTC](https://discuss.elastic.co/t/reusing-existing-kibana-devtools-in-own-custom-plugins/139450/1 "2018-07-11T02:54:54Z")

</div>

I see the advice on plugin development docs suggesting to use React for new Kibana plugins to future proof them. But, a lot of the current code base is in Angular (1.6?). If I for example wanted to be able to reuse a part of the console dev tools (just the query editor panel with autocompletion and syntax highlighting, etc.) how feasible would that be?

---

<div class="post-metadata">

**Author:** ![Catherine\_Liu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/catherine_liu/32/34294_2.png) [@Catherine\_Liu](https://discuss.elastic.co/u/Catherine_Liu)\
**Post date:** [July 11, 2018, 5:45pm UTC](https://discuss.elastic.co/t/reusing-existing-kibana-devtools-in-own-custom-plugins/139450/2 "2018-07-11T17:45:42Z")

</div>

The Kibana team is working towards converting all of our plugins into React, and I don't believe we have converted the console plugin just yet. You are welcome to copy the plugin and Reactify it if you're concerned about future-proofing your plugin. It would also help us a great deal if you would like to contribute any React changes you make to the Kibana repo.

For the base code editor, our Elastic UI framework has a [code editor](https://elastic.github.io/eui/#/forms/code-editor) React component you can use in your plugin. If you set the mode prop to `"ace/mode/json"`, you'll get the same syntax highlighting used in dev tools.

Our EUI code editor is a wrapper component for the `AceEditor` component, and you can pass any props defined for the `AceEditor` component onto the EUI code editor component as well. You may want to consult the documentation for the `AceEditor` in the [`react-ace` docs](https://github.com/securingsincity/react-ace/blob/master/docs/Ace.md).

For the autocomplete, I suspect you'll need to look at how the autocomplete is implemented in the [console plugin](https://github.com/elastic/kibana/tree/master/src/core_plugins/console/public/src) and tweak it to work with the React code editor.

---

<div class="post-metadata">

**Author:** ![protar](https://avatars.discourse-cdn.com/v4/letter/p/3bc359/32.png) [@protar](https://discuss.elastic.co/u/protar)\
**Post date:** [July 13, 2018, 2:59pm UTC](https://discuss.elastic.co/t/reusing-existing-kibana-devtools-in-own-custom-plugins/139450/3 "2018-07-13T14:59:07Z")

</div>

This plugin is indeed a very useful one, I will Love to try it personally. Waiting for some reviews out of it.

With Regards,  
Protar  
[Tutuapp](https://tutuappx.com/) | [Plex](https://plex.software/) | [Vidmate](https://vidmate.onl/)

---

<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:** [August 10, 2018, 2:59pm UTC](https://discuss.elastic.co/t/reusing-existing-kibana-devtools-in-own-custom-plugins/139450/4 "2018-08-10T14:59:08Z")

</div>

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