diff --git a/tool/mode_tool.html b/tool/mode_tool.html
new file mode 100644
index 00000000..58b67446
--- /dev/null
+++ b/tool/mode_tool.html
@@ -0,0 +1,184 @@
+<!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;
+		margin: 0;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+    
+    #editor { 
+        
+    }
+  </style>
+</head>
+<body>
+
+<div id="toolbar"></div>
+<pre id="editor"></pre>
+
+<script src="../build/src/ace.js" type="text/javascript"></script>
+<script src="../build/kitchen-sink/demo.js" type="text/javascript"></script>
+
+<script>
+var $ = document.getElementById.bind(document);
+function bindDropdown(el, callback) {
+    var onChange = function() {
+        callback(el.value);
+    };
+    el.onchange = onChange;
+    onChange();
+}
+
+function fillDropdown(list, el) {
+    list.forEach(function(item) {
+        var option = document.createElement("option");
+        option.setAttribute("value", item.name);
+        option.innerHTML = item.desc;
+        el.appendChild(option);
+    });
+}
+	
+/************** modes ***********************/
+var modes = [];
+function getModeFromPath(path) {
+    var mode = modesByName.text;
+    for (var i = 0; i < modes.length; i++) {
+        if (modes[i].supportsFile(path)) {
+            mode = modes[i];
+            break;
+        }
+    }
+    return mode;
+};
+
+var Mode = function(name, desc, extensions) {
+    this.name = name;
+    this.desc = desc;
+    this.mode = "ace/mode/" + name;
+    this.extRe = new RegExp("^.*\\.(" + extensions + ")$", "g");
+};
+
+Mode.prototype.supportsFile = function(filename) {
+    return filename.match(this.extRe);
+};
+
+var modesByName = {
+    c9search:   ["C9Search"     , "c9search_results"],
+    coffee:     ["CoffeeScript" , "coffee|^Cakefile"],
+    coldfusion: ["ColdFusion"   , "cfm"],
+    csharp:     ["C#"           , "cs"],
+    css:        ["CSS"          , "css"],
+    diff:       ["Diff"         , "diff|patch"],
+    golang:     ["Go"           , "go"],
+    groovy:     ["Groovy"       , "groovy"],
+    haxe:       ["haXe"         , "hx"],
+    html:       ["HTML"         , "htm|html|xhtml"],
+    c_cpp:      ["C/C++"        , "c|cc|cpp|cxx|h|hh|hpp"],
+    clojure:    ["Clojure"      , "clj"],
+    java:       ["Java"         , "java"],
+    javascript: ["JavaScript"   , "js"],
+    json:       ["JSON"         , "json"],
+    jsx:        ["JSX"          , "jsx"],
+    latex:      ["LaTeX"        , "latex|tex|ltx|bib"],
+    less:       ["LESS"         , "less"],
+    liquid:     ["Liquid"       , "liquid"],
+    lua:        ["Lua"          , "lua"],
+    luapage:    ["LuaPage"      , "lp"], // http://keplerproject.github.com/cgilua/manual.html#templates
+    markdown:   ["Markdown"     , "md|markdown"],
+    ocaml:      ["OCaml"        , "ml|mli"],
+    perl:       ["Perl"         , "pl|pm"],
+    pgsql:      ["pgSQL"        , "pgsql"],
+    php:        ["PHP"          , "php|phtml"],
+    powershell: ["Powershell"   , "ps1"],
+    python:     ["Python"       , "py"],
+    ruby:       ["Ruby"         , "ru|gemspec|rake|rb"],
+    scad:       ["OpenSCAD"     , "scad"],
+    scala:      ["Scala"        , "scala"],
+    scss:       ["SCSS"         , "scss|sass"],
+    sh:         ["SH"           , "sh|bash|bat"],
+    sql:        ["SQL"          , "sql"],
+    svg:        ["SVG"          , "svg"],
+    text:       ["Text"         , "txt"],
+    textile:    ["Textile"      , "textile"],
+    xml:        ["XML"          , "xml|rdf|rss|wsdl|xslt|atom|mathml|mml|xul|xbl"],
+    xquery:     ["XQuery"       , "xq"],
+    yaml:       ["YAML"         , "yaml"]
+};
+
+for (var name in modesByName) {
+    var mode = modesByName[name];
+    mode = new Mode(name, mode[0], mode[1])
+    modesByName[name] = mode;
+    modes.push(mode);
+}
+
+
+
+var container = document.getElementById("editor");
+container.style.position = "absolute";
+// Splitting.
+var Split = require("ace/split").Split;
+var split = new Split(container, null, 1);
+split.setOrientation(split.BESIDE);
+split.setSplits(2);
+
+var editor1 = split.getEditor(0);
+var editor2 = split.getEditor(1);
+
+var toolbar = $("toolbar");
+var modeEl = document.createElement("select");
+fillDropdown(modes, modeEl);
+
+bindDropdown(modeEl, function(value) {
+    editor1.session.setMode((modesByName[value] || modesByName.text).mode);
+});
+toolbar.appendChild(modeEl);
+var button = document.createElement("input");
+button.setAttribute("type", "button");
+button.value = "generate test";
+toolbar.appendChild(button)
+
+function onResize() {
+    var top = toolbar.clientHeight;
+    var width = document.documentElement.clientWidth;
+    container.style.top = top + "px";
+    container.style.width = width + "px";
+    container.style.height = document.documentElement.clientHeight - top + "px";
+    split.resize();
+}
+
+window.onresize = onResize;
+onResize();
+
+
+
+
+button.onclick = function() {
+	var s = editor1.session
+	tok = s.bgTokenizer
+	var data = []
+	for (var i = 0; i < s.getLength(); i++) {
+		data.push({
+			text: s.getLine(i),
+			state: [tok.getState(i - 1), tok.getState(i)],
+			tokens: tok.getTokens(i)
+		})
+	}
+	data = JSON.stringify(data, null, 4);
+	data = data.replace(/(\n\s*)"(\w+)":/g, "$1$2:");
+	editor2.insert(data);
+}
+
+</script>
+
+</body>
+</html>
