Here is an exemple
```html

{{text}}

var components = MageryCompiler.compile('template');

// create a store
var store = Redux.createStore(function (state, action) {
if (typeof state === 'undefined') {
return {
title: "fuck mennn",
count: 0
};
}
switch (action.type) {
case 'INCREMENT':
return {count: state.count + 1};
case 'DECREMENT':
return {count: state.count - 1};
default:
return state;
}
});

var target = document.querySelector('app');
var handlers = {};

function render() {
console.log(store.getState())
components['app-title'](target, store.getState(), handlers);
}

// add event handlers using Magery
handlers.increment = function () {
store.dispatch({type: 'INCREMENT'});
};
handlers.decrement = function () {
store.dispatch({type: 'DECREMENT'});
};

// update the page when the store changes
store.subscribe(render);

// initial render
render();

```

I've noticed that in the produced dom, the tree rendered by outside ouf the target

```

...

{{text}}

...

</body></html>
```

Start by running the inline HTML reproduction and inspect the render() call, along with /js/magery-compiler.js and /js/magery-patcher.js. Trace where components['app-title'] inserts its output and confirm that the rendered tree appears inside the app target rather than before it in the document; the reproduction should show the corrected placement.

Written by the indexing model from the issue text.