diff --git a/demo.html b/demo.html
index 9781c2a..9585386 100644
--- a/demo.html
+++ b/demo.html
@@ -9,7 +9,10 @@
   </head>
   <body>
     <div class="chat-container"></div>
-    <div style="text-align: center;"><button id="demo-button">Start Demo</button></div>
+    <div style="text-align: center;">
+      <button class="chat-demo-button" id="demo-button">Start Demo</button>
+      <button class="chat-demo-button" id="clear-button">Clear</button>
+    </div>
     <script src="./dist/Chatroom.js"></script>
     <script type="text/javascript">
 window.chatroom = new window.DemoChatroom({
@@ -60,7 +63,11 @@
 function startDemo() {
   window.chatroom.demo(window.demoMessages);
 }
+function clearDemo() {
+  window.chatroom.clear();
+}
 document.getElementById("demo-button").addEventListener("click", startDemo, false);
+document.getElementById("clear-button").addEventListener("click", clearDemo, false);
 window.addEventListener("load", startDemo, false);
 </script>
   </body>
diff --git a/index.css b/index.css
index 9e3152f..55464c4 100644
--- a/index.css
+++ b/index.css
@@ -17,7 +17,7 @@
   }
 }
 
-#demo-button {
+.chat-demo-button {
   border-radius: 3px;
   color: #343d4e;
   border: 2px solid #343d4e;
@@ -27,9 +27,9 @@
   font-size: 12px;
   cursor: pointer;
 }
-#demo-button:hover {
+.chat-demo-button:hover {
   background-color: rgba(52, 61, 78, 0.3);
 }
-#demo-button:active {
+.chat-demo-button:active {
   background-color: rgba(52, 61, 78, 0.8);
 }
diff --git a/src/index.js b/src/index.js
index 806b943..44e7fc4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -109,5 +109,8 @@ window.DemoChatroom = function(options: DemoChatroomOptions) {
 
     this.demoIsPlaying = false;
   };
+
+  this.clear = () => { this.render([]); };
+
   this.render([]);
 };
