owl/extras/playground/templates.xml

<templates>
  <div t-name="tabbed-editor" class="tabbed-editor" t-att-style="props.style">
    <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
      <a t-if="tabs.js" class="tab flash" t-att-class="{active: state.currentTab==='js'}" t-on-click="setTab('js')">JS</a>
      <a t-if="tabs.xml" class="tab flash" t-att-class="{active: state.currentTab==='xml'}" t-on-click="setTab('xml')">XML</a>
      <a t-if="tabs.css" class="tab flash" t-att-class="{active: state.currentTab==='css'}" t-on-click="setTab('css')">CSS</a>
    </div>
    <div class="code-editor" t-ref="'editor'"></div>
  </div>

  <div t-name="playground" 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:state.css, xml: state.xml, display: 'js|xml|css'}" t-on-updateCode="updateCode"/>
        </t>
        <t t-else="1">
          <t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js', style:topEditorStyle}" t-on-updateCode="updateCode"/>
          <div class="separator horizontal"/>
          <t t-widget="TabbedEditor" t-keepalive="1" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'xml|css', resizeable: true}" t-on-updateCode="updateCode" t-on-updatePanelHeight="updatePanelHeight"/>
        </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>