diff --git a/owl.js b/owl.js
index aec8ad59..f8cb1c64 100644
--- a/owl.js
+++ b/owl.js
@@ -1297,6 +1297,13 @@
                 }
                 return;
             }
+            const firstLetter = node.tagName[0];
+            if (firstLetter === firstLetter.toUpperCase()) {
+                // this is a component, we modify in place the xml document to change
+                // <SomeComponent ... /> to <t t-widget="SomeComponent" ... />
+                node.setAttribute('t-widget', node.tagName);
+                node.nodeValue = 't';
+            }
             const attributes = node.attributes;
             const validDirectives = [];
             let withHandlers = false;
@@ -2711,7 +2718,7 @@
      * explanation of the code generated by the t-widget directive for the following
      * situation:
      * ```xml
-     *   <t t-widget="child"
+     *   <Child
      *      t-key="'somestring'"
      *      flag="state.flag"
      *      t-transition="fade"/>
@@ -3490,8 +3497,8 @@
     exports.utils = utils;
 
     exports.__info__.version = '0.15.0';
-    exports.__info__.date = '2019-06-17T13:59:39.059Z';
-    exports.__info__.hash = '609c108';
+    exports.__info__.date = '2019-06-18T13:03:02.358Z';
+    exports.__info__.hash = 'a7cd007';
     exports.__info__.url = 'https://github.com/odoo/owl';
 
 }(this.owl = this.owl || {}));
diff --git a/playground/samples.js b/playground/samples.js
index 52f7cc71..c2bd1858 100644
--- a/playground/samples.js
+++ b/playground/samples.js
@@ -26,8 +26,8 @@ const COMPONENTS_XML = `<templates>
   </button>
 
   <div t-name="App">
-    <t t-widget="Counter"/>
-    <t t-widget="Counter"/>
+    <Counter />
+    <Counter />
   </div>
 </templates>`;
 
@@ -88,7 +88,7 @@ const ANIMATION_XML = `<templates>
       <div class="demo">
         <button t-on-click="toggle('widgetFlag')">Toggle widget</button>
         <div>
-          <t t-widget="Counter" t-if="state.widgetFlag" t-transition="fade"/>
+          <Counter t-if="state.widgetFlag" t-transition="fade"/>
         </div>
       </div>
 
@@ -98,7 +98,7 @@ const ANIMATION_XML = `<templates>
         <button t-on-click="addNumber">Add a number</button>
         <div>
           <t t-foreach="state.numbers" t-as="n">
-            <span t-transition="fade" class="numberspan"><t t-esc="n"/></span>
+            <span t-transition="fade" class="numberspan" t-key="n"><t t-esc="n"/></span>
           </t>
         </div>
       </div>
@@ -236,7 +236,7 @@ const LIFECYCLE_DEMO_XML = `<templates>
     <button t-on-click="increment">Increment Parent State</button>
     <button t-on-click="toggleSubWidget">Toggle SubWidget</button>
     <div t-if="state.flag">
-      <t t-widget="DemoWidget" n="state.n"/>
+      <DemoWidget n="state.n"/>
     </div>
   </div>
 </templates>`;
@@ -483,7 +483,7 @@ const TODO_APP_STORE_XML = `<templates>
       <label for="toggle-all"></label>
       <ul class="todo-list">
         <t t-foreach="visibleTodos" t-as="todo">
-          <t t-widget="TodoItem" t-key="todo.id" id="todo.id" completed="todo.completed" title="todo.title"/>
+          <TodoItem t-key="todo.id" id="todo.id" completed="todo.completed" title="todo.title"/>
         </t>
       </ul>
     </section>
@@ -995,17 +995,17 @@ const RESPONSIVE_XML = `<templates>
   </div>
 
   <div t-name="App" class="app" t-att-class="{mobile: env.isMobile, desktop: !env.isMobile}">
-    <t t-widget="Navbar"/>
-    <t t-widget="ControlPanel"/>
+    <Navbar/>
+    <ControlPanel/>
     <div class="content-wrapper" t-if="!env.isMobile">
       <div class="content">
-        <t t-widget="FormView"/>
-        <t t-widget="Chatter"/>
+        <FormView />
+        <Chatter />
       </div>
     </div>
     <t t-else="1">
-      <t t-widget="FormView"/>
-      <t t-widget="Chatter"/>
+      <FormView />
+      <Chatter />
     </t>
   </div>
 </templates>
@@ -1128,17 +1128,17 @@ const SLOTS_XML = `<templates>
   </div>
 
   <div t-name="App" class="main">
-    <t t-widget="Card" title="'Title card A'">
+    <Card title="'Title card A'">
       <t t-set="content">Content of card 1...  [<t t-esc="state.a"/>]</t>
       <t t-set="footer"><button t-on-click="inc('a', 1)">Increment A</button></t>
-    </t>
-    <t t-widget="Card"  title="'Title card B'">
+    </Card>
+    <Card title="'Title card B'">
       <div t-set="content">
         <div>Card 2... [<t t-esc="state.b"/>]</div>
-        <t t-widget="Counter"/>
+        <Counter />
       </div>
       <t t-set="footer"><button t-on-click="inc('b', -1)">Decrement B</button></t>
-    </t>
+    </Card>
   </div>
 </templates>`;
 
@@ -1226,8 +1226,8 @@ app.mount(document.body);
 const ASYNC_COMPONENTS_XML = `<templates>
   <div t-name="App" class="app">
     <button t-on-click="increment">Increment</button>
-    <t t-widget="SlowWidget" value="state.value"/>
-    <t t-widget="NotificationList" t-asyncroot="1" notifications="state.notifs"/>
+    <SlowWidget value="state.value"/>
+    <NotificationList t-asyncroot="1" notifications="state.notifs"/>
   </div>
 
   <div t-name="SlowWidget" class="value" >
diff --git a/playground/templates.xml b/playground/templates.xml
index 9a4d82a7..1c67cc6d 100644
--- a/playground/templates.xml
+++ b/playground/templates.xml
@@ -24,14 +24,14 @@
           <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
           <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
         </div>
-        <t t-widget="TabbedEditor"
+        <TabbedEditor
             js="state.js"
             css="!state.splitLayout and state.css"
             xml="!state.splitLayout and state.js"
             t-att-style="topEditorStyle"/>
         <t t-if="state.splitLayout">
           <div class="separator horizontal"/>
-          <t t-widget="TabbedEditor" t-keepalive="1"
+          <TabbedEditor t-keepalive="1"
              js="false"
              css="state.css"
              xml="state.xml"