diff --git a/index.html b/index.html
index cfd5af5..6a14dc4 100644
--- a/index.html
+++ b/index.html
@@ -34,10 +34,8 @@ <h2>Dot And Box editor</h2>
     <div class="links">
         <a href="https://github.com/dot-and-box/dot-and-box">Dot and Box repository</a>
         <a href="https://dot-and-box.github.io/dot-and-box/">Documentation</a>
-        <div>
-            <button id="save" title="save">💾 </button>
-            <button id="clear" title="clear">clear</button>
-        </div>
+        <button id="save" title="save">💾 </button>
+        <button id="clear" title="delete">delete</button>
 
     </div>
     <hr>
diff --git a/src/dotAndBoxEditor.ts b/src/dotAndBoxEditor.ts
index 51102cc..a773368 100644
--- a/src/dotAndBoxEditor.ts
+++ b/src/dotAndBoxEditor.ts
@@ -224,6 +224,7 @@ class DotAndBoxEditor extends HTMLElement {
           <div><input type="checkbox" id="show-experimental" title="show controls">experimental</div>
           <div><input type="checkbox" id="toggle-editor" checked title="show/hide editor">editor</div>
           <div><button id="reformat" title="reformat">reformat</div>
+          <div><button id="clear" title="clear">✖</div>
           <div class="right-menu"><button id="copy-clipboard" title="copy to clipboard">📋</button></div>           
         </div>
       <div class="content-wrapper">        
@@ -241,6 +242,8 @@ class DotAndBoxEditor extends HTMLElement {
 
         const reformatButton: HTMLElement = this.getControl('#reformat')
         reformatButton.onclick = (_: any) => this.reformat()
+        const clearButton: HTMLElement = this.getControl('#clear')
+        clearButton.onclick = (_: any) => this.updateEditorCode('title: new ')
 
         const runCodeButton: HTMLElement = this.getControl('#run-code')
         runCodeButton.onclick = (_: any) => this.runCode()