owl/extras/playground/templates.xml

<templates>
  <div t-name="TabbedEditor" class="tabbed-editor">
    <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
        <t t-foreach="['js', 'xml', 'css']" t-as="tab">
            <a t-ref="tab" t-if="props[tab]" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="setTab(tab)">
                <t t-esc="tab"/>
            </a>
        </t>
    </div>
    <div class="code-editor" t-ref="'editor'"></div>
  </div>

  <div t-name="App" class="playground">
      <div class="left-bar" t-att-style="leftPaneStyle" t-att-class="{split: state.splitLayout}">
        <div class="menubar">
          <a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
          <select t-on-change="setSample">
            <option t-foreach="SAMPLES" t-as="sample" t-key="sample_index">
              <t t-esc="sample.description"/>
            </option>
          </select>
          <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-if="state.splitLayout">
          <t t-widget="TabbedEditor"
             t-props="{js:state.js, css:false, xml: false}"
             t-on-updateCode="updateCode"
             t-att-style="topEditorStyle"/>
          <div class="separator horizontal"/>
          <t t-widget="TabbedEditor" t-keepalive="1"
             t-props="{js:false, css:state.css, xml: state.xml, resizeable: true}"
             t-on-updateCode="updateCode"
             t-on-updatePanelHeight="updatePanelHeight"/>
        </t>
        <t t-else="1">
          <t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js|xml|css'}" t-on-updateCode="updateCode"/>
        </t>
      </div>
      <div class="separator vertical" t-on-mousedown="onMouseDown"/>
      <div class="right-pane"  t-att-style="rightPaneStyle">
        <div class="welcome" t-if="state.displayWelcome">
          <div>🦉 Odoo Web Library 🦉</div>
          <div>v<t t-esc="version"/></div>
          <div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
          <div class="note">Note: these examples require a recent browser to work without a transpilation step. </div>
        </div>
        <div t-if="state.error" class="error">
          <t t-esc="state.error"/>
        </div>
        <div class="content" t-ref="'content'"/>
      </div>
  </div>
</templates>