# Render into a div container instead of full screen renderer in vtk.js

**URL:** https://discourse.vtk.org/t/render-into-a-div-container-instead-of-full-screen-renderer-in-vtk-js/886
**Category:** Web
**Created:** [May 1, 2019, 6:29pm UTC](https://discourse.vtk.org/t/render-into-a-div-container-instead-of-full-screen-renderer-in-vtk-js/886 "2019-05-01T18:29:15Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Donny\_Zimmerman](https://discourse.vtk.org/user_avatar/discourse.vtk.org/donny_zimmerman/32/301_2.png) [@Donny\_Zimmerman](https://discourse.vtk.org/u/Donny_Zimmerman)
#### Post date: [May 1, 2019, 6:29pm UTC](https://discourse.vtk.org/t/render-into-a-div-container-instead-of-full-screen-renderer-in-vtk-js/886/1 "2019-05-01T18:29:16Z")

</div>

I am trying to render into a div element instead of using the full screen renderer. I found this issue post on github:

> <https://github.com/Kitware/vtk-js/issues/150>
>
> how can I set the renderwindow to a div in my DOM?

I am getting error “Uncaught TypeError: Cannot read property ‘newInstance’ of undefined” on the following line:

> var openGlRenderWindow = vtk.Rendering.OpenGL.vtkOpenGLRenderWindow.newInstance();

Here is the code I am currently trying:

> var renderWindow = vtk.Rendering.Core.vtkRenderWindow.newInstance();  
> var renderer = vtk.Rendering.Core.vtkRenderer.newInstance();
> 
> // OpenGlRenderWindow  
> var openGlRenderWindow = vtk.Rendering.OpenGL.vtkOpenGLRenderWindow.newInstance();  
> renderWindow.addView(openGlRenderWindow);
> 
> // Interactor  
> var interactor = vtk.Rendering.Core.vtkRenderWindowInteractor.newInstance();  
> interactor.setView(openGlRenderWindow);  
> interactor.initialize();
> 
> renderWindow.addRenderer(renderer);  
> var actor = vtk.Rendering.Core.vtkActor.newInstance();  
> var mapper = vtk.Rendering.Core.vtkMapper.newInstance();  
> actor.setMapper(mapper);
> 
> renderer.setLayer(0);  
> renderer.addActor(actor);  
> renderer.resetCamera();
> 
> var rootContainer = document.getElementById(‘renderwindow’);  
> openGlRenderWindow.setContainer(rootContainer);  
> const dims = rootContainer.getBoundingClientRect();  
> openGlRenderWindow.setSize(dims.width, dims.height);  
> interactor.bindEvents(rootContainer);  
> renderWindow.render();

Any help is appreciated.

---

<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: [May 1, 2019, 8:19pm UTC](https://discourse.vtk.org/t/render-into-a-div-container-instead-of-full-screen-renderer-in-vtk-js/886/2 "2019-05-01T20:19:12Z")

</div>

Based on [this](https://github.com/Kitware/vtk-js/blob/master/Sources/Rendering/OpenGL/index.js), you should call `vtk.Rendering.OpenGL.vtkRenderWindow.newInstance();`

---

<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: [May 1, 2019, 8:22pm UTC](https://discourse.vtk.org/t/render-into-a-div-container-instead-of-full-screen-renderer-in-vtk-js/886/3 "2019-05-01T20:22:23Z")

</div>

That would be the corresponding [example](https://kitware.github.io/vtk-js/examples/SimpleCone.html) using ES6.

---

<div class="post-metadata">

### Author: ![Donny\_Zimmerman](https://discourse.vtk.org/user_avatar/discourse.vtk.org/donny_zimmerman/32/301_2.png) [@Donny\_Zimmerman](https://discourse.vtk.org/u/Donny_Zimmerman)
#### Post date: [May 1, 2019, 8:46pm UTC](https://discourse.vtk.org/t/render-into-a-div-container-instead-of-full-screen-renderer-in-vtk-js/886/4 "2019-05-01T20:46:15Z")

</div>

Thanks again Seb! I am now seeing 3D weather radar in my browser!