# Render a component outside of the template in EmberJS
**URL:** https://discuss.emberjs.com/t/render-a-component-outside-of-the-template-in-emberjs/10626
**Category:** Uncategorized
**Created:** [May 6, 2016, 9:39pm UTC](https://discuss.emberjs.com/t/render-a-component-outside-of-the-template-in-emberjs/10626 "2016-05-06T21:39:52Z")
**Posts on this page:** 10
**Page:** 1
I want to render a modal which is defined inside a template but this modal should be insert into the DOM outside of the template.
e.g.
my-list.hbs:
```
```
Basically what I want is to be able to render `{{item-creation-modal}}` outside of the DOM (typically at the end of the DOM) to be sure it’s above everything.
How can I achieve this?
---
Take a look at yapplab’s [Ember Wormhole](https://github.com/yapplabs/ember-wormhole). Very handy way to redirect render output to another (named by element id) location.
---
I have the component do a show() on the item container. CSS can set its absolute position and make it an overlay irrelevant of where it is in the DOM.
---
Could you not, on didInsert, have the component change it’s own parent during the lifetime of the overlay? I say this ignorant of how Ember keeps track of the DOM element.
---
> [@Ben\_Glancy](#):
>
> Could you not, on didInsert, have the component change it’s own parent during the lifetime of the overlay? I say this ignorant of how Ember keeps track of the DOM element.
This is actually how the Wormhole works: [https://github.com/yapplabs/ember-wormhole/blob/master/addon/components/ember-wormhole.js](https://github.com/yapplabs/ember-wormhole/blob/master/addon/components/ember-wormhole.js)
🙂