# Canvas plugin development

**URL:** <https://discuss.elastic.co/t/canvas-plugin-development/214875>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [January 13, 2020, 4:38pm UTC](https://discuss.elastic.co/t/canvas-plugin-development/214875 "2020-01-13T16:38:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![luis.montecatine](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/luis.montecatine/32/48432_2.png) [@luis.montecatine](https://discuss.elastic.co/u/luis.montecatine)\
**Post date:** [January 13, 2020, 4:38pm UTC](https://discuss.elastic.co/t/canvas-plugin-development/214875/1 "2020-01-13T16:38:12Z")

</div>

Hello,

Kibana version: 7.3.1

I'm trying to develop a simple canvas plugins that can contains a html button or something similar.

I have followed this post:

> [@Custom Kibana Canvas Elements](https://discuss.elastic.co/t/custom-kibana-canvas-elements/202632):
>
> In the [intro to canvas webinar](https://www.elastic.co/webinars/intro-to-canvas-a-new-way-to-tell-visual-stories-in-kibana), Rashid khan mentions a plugin interface that allows users to add their own custom Canvas Elements. But I couldn't find any documentation for the same. Any pointers to how to develop new Canvas elements (say heatmaps)? Thank you

And the basic plugin works, but I can't make It works when I tried to use ReactDom.render

Is there any documentation about developing plugins on canvas??

Thanks in advance, Luis

---

<div class="post-metadata">

**Author:** ![clintandrewhall](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/clintandrewhall/32/45435_2.png) [@clintandrewhall](https://discuss.elastic.co/u/clintandrewhall)\
**Post date:** [January 13, 2020, 8:28pm UTC](https://discuss.elastic.co/t/canvas-plugin-development/214875/2 "2020-01-13T20:28:58Z")

</div>

Hi Luis! Can you provide me the exact error you're getting? It's likely you haven't registered a `renderer` with the `kbnInterpreter`. For example, take a look at the [`markdown` renderer](https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/markdown/index.js).

domNodeThe HTML node provided by Canvas to manipulate and render within.configParameters passed by the expression to the renderer.handlersHandlers invoked by Canvas when rendering, moving, destroying, etc

You should be able to register a `renderer` using the same call:

```auto
const fooRenderer = ({
  name: 'foo',
  displayName: 'Foo',
  help: 'Render Foo',
  reuseDomNode: true,
  render(domNode, config, handlers) {
    ReactDOM.render(
      <div className="fooContainer">{config.foo}, {config.baz}</div>,
      domNode,
      () => handlers.done()
    );

    handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
  },
});

const renderers = [fooRenderer];

kbnInterpreter.register({
  elements,
  browserFunctions,
  renderers,
});

```

Hope this helps!

---

<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:** [February 10, 2020, 8:29pm UTC](https://discuss.elastic.co/t/canvas-plugin-development/214875/3 "2020-02-10T20:29:13Z")

</div>

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