diff --git a/playground/main.browser.js b/playground/main.browser.js
index 2cce3b0..192f1d3 100644
--- a/playground/main.browser.js
+++ b/playground/main.browser.js
@@ -47483,8 +47483,8 @@ function generateRenderFunc(renderFunc) {
     }
 }
 var z = {getInitialState: function() {return {name:"reactTemplates"}}};
-var templateHTML =  '<div>\n   Have {_.filter(this.state.todos, {done:true}).length} todos done, \n   and {_.filter(this.state.todos, {done:false}).length} not done\n  <br/>\n   <div rt-repeat="todo in this.state.todos" key="{todo.key}">\n      <button onClick="()=>this.setState({todos:_.reject(this.state.todos, todo)})">Remove</button>\n      <input type="checkbox" checked="{todo.done}" onChange="()=>var td = _.cloneDeep(this.state.todos); td[todoIndex].done = !td[todoIndex].done, this.setState({todos:td})"/>\n      <span style="{todo.done ? {\'text-decoration\':\'line-through\'} : {} }">{todo.value}</span>\n   </div>\n   <input key="myinput" type="text" onKeyDown="(e) => if (e.keyCode == 13) { this.add(); }" valueLink="{this.linkState(\'edited\')}"/>\n        <button onClick="(e)=>e.preventDefault(); this.add()" >Add</button><br/>\n   <button onClick="(e)=>e.preventDefault(); this.setState({todos: _.filter(this.state.todos, {done:false})})">Clear done</button>\n</div>';
-var templateProps = '{\nmixins: [React.addons.LinkedStateMixin],\ngetInitialState: function () {\n return {edited: "", todos: [], counter: 0};\n},\nadd: function () {\n this.setState({todos: this.state.todos.concat({value: this.state.edited, done: false,key:this.state.counter}), edited: "", counter: this.state.counter+1})\n}\n}';
+var templateHTML = "<div>\n    Have {_.filter(this.state.todos, {done:true}).length} todos done,\n    and {_.filter(this.state.todos, {done:false}).length} not done\n    <br/>\n    <div rt-repeat=\"todo in this.state.todos\" key=\"{todo.key}\">\n        <button onClick=\"(e)=>e.preventDefault(); this.remove(todo)\">x</button>\n        <input type=\"checkbox\" checked=\"{todo.done}\" onChange=\"()=>this.toggleChecked(todoIndex)\"/>\n        <span style=\"{todo.done ? {'text-decoration':'line-through'} : {} }\">{todo.value}</span>\n    </div>\n    <input key=\"myinput\" type=\"text\" onKeyDown=\"(e) => if (e.keyCode == 13) { this.add(); }\" valueLink=\"{this.linkState('edited')}\"/>\n    <button onClick=\"(e)=>e.preventDefault(); this.add()\" >Add</button><br/>\n    <button onClick=\"(e)=>e.preventDefault(); this.clearDone()\">Clear done</button>\n</div>";
+var templateProps = "{\n    mixins: [React.addons.LinkedStateMixin],\n    getInitialState: function () {\n        return {edited: '', todos: [], counter: 0};\n    },\n    add: function () {\n    if (this.state.edited.trim().length === 0) {\n        return;\n    }\n        var newTodo = {value: this.state.edited, done: false, key: this.state.counter};\n        this.setState({todos: this.state.todos.concat(newTodo), edited: '', counter: this.state.counter + 1});\n    },\n    remove: function (todo) {\n        this.setState({todos: _.reject(this.state.todos, todo)});\n    },\n    toggleChecked: function (index) {\n        var todos = _.cloneDeep(this.state.todos);\n        todos[index].done = !todos[index].done;\n        this.setState({todos: todos});\n    },\n    clearDone: function () {\n        this.setState({todos: _.filter(this.state.todos, {done: false})});\n    }\n}";
 
 var Playground = React.createClass({
 
diff --git a/playground/main.js b/playground/main.js
index 4a73107..0cb13ac 100644
--- a/playground/main.js
+++ b/playground/main.js
@@ -44,8 +44,8 @@ function generateRenderFunc(renderFunc) {
     }
 }
 var z = {getInitialState: function() {return {name:"reactTemplates"}}};
-var templateHTML =  '<div>\n   Have {_.filter(this.state.todos, {done:true}).length} todos done, \n   and {_.filter(this.state.todos, {done:false}).length} not done\n  <br/>\n   <div rt-repeat="todo in this.state.todos" key="{todo.key}">\n      <button onClick="()=>this.setState({todos:_.reject(this.state.todos, todo)})">Remove</button>\n      <input type="checkbox" checked="{todo.done}" onChange="()=>var td = _.cloneDeep(this.state.todos); td[todoIndex].done = !td[todoIndex].done, this.setState({todos:td})"/>\n      <span style="{todo.done ? {\'text-decoration\':\'line-through\'} : {} }">{todo.value}</span>\n   </div>\n   <input key="myinput" type="text" onKeyDown="(e) => if (e.keyCode == 13) { this.add(); }" valueLink="{this.linkState(\'edited\')}"/>\n        <button onClick="(e)=>e.preventDefault(); this.add()" >Add</button><br/>\n   <button onClick="(e)=>e.preventDefault(); this.setState({todos: _.filter(this.state.todos, {done:false})})">Clear done</button>\n</div>';
-var templateProps = '{\nmixins: [React.addons.LinkedStateMixin],\ngetInitialState: function () {\n return {edited: "", todos: [], counter: 0};\n},\nadd: function () {\n this.setState({todos: this.state.todos.concat({value: this.state.edited, done: false,key:this.state.counter}), edited: "", counter: this.state.counter+1})\n}\n}';
+var templateHTML = "<div>\n    Have {_.filter(this.state.todos, {done:true}).length} todos done,\n    and {_.filter(this.state.todos, {done:false}).length} not done\n    <br/>\n    <div rt-repeat=\"todo in this.state.todos\" key=\"{todo.key}\">\n        <button onClick=\"(e)=>e.preventDefault(); this.remove(todo)\">x</button>\n        <input type=\"checkbox\" checked=\"{todo.done}\" onChange=\"()=>this.toggleChecked(todoIndex)\"/>\n        <span style=\"{todo.done ? {'text-decoration':'line-through'} : {} }\">{todo.value}</span>\n    </div>\n    <input key=\"myinput\" type=\"text\" onKeyDown=\"(e) => if (e.keyCode == 13) { this.add(); }\" valueLink=\"{this.linkState('edited')}\"/>\n    <button onClick=\"(e)=>e.preventDefault(); this.add()\" >Add</button><br/>\n    <button onClick=\"(e)=>e.preventDefault(); this.clearDone()\">Clear done</button>\n</div>";
+var templateProps = "{\n    mixins: [React.addons.LinkedStateMixin],\n    getInitialState: function () {\n        return {edited: '', todos: [], counter: 0};\n    },\n    add: function () {\n    if (this.state.edited.trim().length === 0) {\n        return;\n    }\n        var newTodo = {value: this.state.edited, done: false, key: this.state.counter};\n        this.setState({todos: this.state.todos.concat(newTodo), edited: '', counter: this.state.counter + 1});\n    },\n    remove: function (todo) {\n        this.setState({todos: _.reject(this.state.todos, todo)});\n    },\n    toggleChecked: function (index) {\n        var todos = _.cloneDeep(this.state.todos);\n        todos[index].done = !todos[index].done;\n        this.setState({todos: todos});\n    },\n    clearDone: function () {\n        this.setState({todos: _.filter(this.state.todos, {done: false})});\n    }\n}";
 
 var Playground = React.createClass({