diff --git a/demo/mode_list.html b/demo/mode_list.html
new file mode 100644
index 00000000..9aa3f295
--- /dev/null
+++ b/demo/mode_list.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Editor</title>
+  <style type="text/css" media="screen">
+    body {
+        overflow: hidden;
+    }
+    
+    #editor { 
+        margin: 0;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+  </style>
+</head>
+<body>
+
+<pre id="editor">Editor.prototype.showKeyboardShortcuts = function () {
+    showKeyboardShortcuts(this);
+};
+editor.commands.addCommands([{
+    name: "showKeyboardShortcuts",
+    bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
+    exec: function(editor, line) {
+        editor.showKeyboardShortcuts();
+    }
+}]);
+</pre>
+    
+<script src="../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+<script src="../build/src-noconflict/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
+<script>
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/twilight");
+    (function () {
+        var modelist = ace.require('ace/ext/modelist');
+        // the file path could come from an xmlhttp request, a drop event,
+        // or any other scriptable file loading process.
+        // Extensions could consume the modelist and use it to dynamically
+        // set the editor mode. Webmasters could use it in their scripts
+        // for site specific purposes as well.
+        var filePath = 'blahblah/weee/some.js';
+        var mode = modelist.getModeFromPath(filePath).mode;
+        console.log(mode);
+        editor.getSession().setMode(mode);
+    }());
+    
+</script>
+
+</body>
+</html>
