diff --git a/playground-iframe.html b/playground-iframe.html
deleted file mode 100644
index e787d482..00000000
--- a/playground-iframe.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-
-    <script src="libs/owl.js"></script>
-
-  </head>
-  <body>
-  </body>
-</html>
\ No newline at end of file
diff --git a/src/playground.js b/src/playground.js
index 557fe434..c21b930f 100644
--- a/src/playground.js
+++ b/src/playground.js
@@ -62,23 +62,28 @@ class Playground extends Component {
   runCode() {
     this.updateStateFromEditor();
 
-    // inject js
+    // create iframe
     const iframe = document.createElement("iframe");
-    iframe.src = "playground-iframe.html";
 
     iframe.onload = () => {
       const doc = iframe.contentWindow.document;
-      const script = doc.createElement("script");
-      script.type = "text/javascript";
-      script.innerHTML = this.state.js;
-      doc.body.appendChild(script);
+      // inject js
+      const owlScript = doc.createElement("script");
+      owlScript.type = "text/javascript";
+      owlScript.src = "libs/owl.js";
+      owlScript.addEventListener("load", () => {
+        const script = doc.createElement("script");
+        script.type = "text/javascript";
+        script.innerHTML = this.state.js;
+        doc.body.appendChild(script);
+      });
+      doc.head.appendChild(owlScript);
 
       // inject css
       const style = document.createElement("style");
       style.innerHTML = this.state.css;
       doc.head.appendChild(style);
     };
-
     this.refs.content.innerHTML = "";
     this.refs.content.appendChild(iframe);
   }
diff --git a/src/samples.js b/src/samples.js
index da8ee64b..97c7180e 100644
--- a/src/samples.js
+++ b/src/samples.js
@@ -97,14 +97,14 @@ for (let i = 1; i < 16000; i++) {
 // Counter Widget
 //------------------------------------------------------------------------------
 class Counter extends owl.core.Component {
-  inlineTemplate = \`
-    <div>
-      <button t-on-click="increment(-1)">-</button>
-      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-      <button t-on-click="increment(1)">+</button>
-    </div>\`;
   constructor(parent, props) {
     super(parent, props);
+    this.inlineTemplate = \`
+      <div>
+        <button t-on-click="increment(-1)">-</button>
+        <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
+        <button t-on-click="increment(1)">+</button>
+      </div>\`;
     this.state = {
       counter: props.initialState || 0
     };
@@ -119,16 +119,16 @@ class Counter extends owl.core.Component {
 // Message Widget
 //------------------------------------------------------------------------------
 class Message extends owl.core.Component {
-  inlineTemplate = \`
-    <div class="message">
-        <span class="author"><t t-esc="props.author"/></span>
-        <span class="msg"><t t-esc="props.msg"/></span>
-        <button class="remove" t-on-click="removeMessage">Remove</button>
-        <t t-widget="Counter" t-props="{initialState: props.id}"/>
-    </div>\`;
 
   constructor(parent, props) {
     super(parent, props);
+    this.inlineTemplate = \`
+      <div class="message">
+          <span class="author"><t t-esc="props.author"/></span>
+          <span class="msg"><t t-esc="props.msg"/></span>
+          <button class="remove" t-on-click="removeMessage">Remove</button>
+          <t t-widget="Counter" t-props="{initialState: props.id}"/>
+      </div>\`;
     this.widgets = { Counter };
   }