# Multiple html panels in vtk js

**URL:** https://discourse.vtk.org/t/multiple-html-panels-in-vtk-js/4766
**Category:** Web
**Created:** [December 2, 2020, 9:52am UTC](https://discourse.vtk.org/t/multiple-html-panels-in-vtk-js/4766 "2020-12-02T09:52:11Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![lonewolf](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/l/3da27b/32.png) [@lonewolf](https://discourse.vtk.org/u/lonewolf)
#### Post date: [December 2, 2020, 9:52am UTC](https://discourse.vtk.org/t/multiple-html-panels-in-vtk-js/4766/1 "2020-12-02T09:52:11Z")

</div>

Hi, in the examples provided I see there is always one panel with controls.  
Would it be possible to add more panels?  
I searched in the code, forum and examples but I could not find anything.

Cheers!

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [December 2, 2020, 4:08pm UTC](https://discourse.vtk.org/t/multiple-html-panels-in-vtk-js/4766/2 "2020-12-02T16:08:47Z")

</div>

Is it related to [that](https://discourse.vtk.org/t/adding-multiple-views-to-vtkrenderwindow-in-vtk-js/2070)?

Otherwise [Glance](https://kitware.github.io/paraview-glance/) is using several views.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [December 2, 2020, 4:12pm UTC](https://discourse.vtk.org/t/multiple-html-panels-in-vtk-js/4766/3 "2020-12-02T16:12:09Z")

</div>

[That example](https://kitware.github.io/vtk-js/examples/SimpleCone.html) show you how to bind the render window to a DOM element.

You just need to create several instances if you want more than 1 panel.

---

<div class="post-metadata">

### Author: ![lonewolf](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/l/3da27b/32.png) [@lonewolf](https://discourse.vtk.org/u/lonewolf)
#### Post date: [December 2, 2020, 4:20pm UTC](https://discourse.vtk.org/t/multiple-html-panels-in-vtk-js/4766/4 "2020-12-02T16:20:25Z")

</div>

Hi Sebastien, thanks for the relpy.

No, I dont mean vtk renderers. I mean HTML panels. Like here:  
fullScreenRenderer.addController(controlPanel);

> **[vtk.js](https://kitware.github.io/vtk-js/examples/TimeSeries.html)**
>
> TimeSeriesLive example Sourceimport 'vtk.js/Sources/favicon';import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';import vtkPolyData from 'vtk.js/Sources/Common/DataModel/PolyData';import vtkFu

I am wondering if I could add multiple ones. Like, one on the left side, another one on the bottom.  
For more complex web designs and controls of VTK scenes.  
Best regards

---

<div class="post-metadata">

### Author: ![lonewolf](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/l/3da27b/32.png) [@lonewolf](https://discourse.vtk.org/u/lonewolf)
#### Post date: [December 2, 2020, 4:59pm UTC](https://discourse.vtk.org/t/multiple-html-panels-in-vtk-js/4766/5 "2020-12-02T16:59:21Z")

</div>

Thanks Sebastian for the example.  
But I dont see a panel there, nor do I understand how to create two and add them. The code is clear and only allows one:  
openglRenderWindow.setContainer(container);

I am probably missing something, right?

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [December 2, 2020, 8:46pm UTC](https://discourse.vtk.org/t/multiple-html-panels-in-vtk-js/4766/6 "2020-12-02T20:46:08Z")

</div>

Just create your panels in plain HTML. No need to have vtk.js handle the DOM for you.
