diff --git a/packages/moon/dist/moon.js b/packages/moon/dist/moon.js
index 5071bb9f..c958fd03 100644
--- a/packages/moon/dist/moon.js
+++ b/packages/moon/dist/moon.js
@@ -22,16 +22,6 @@
 		component: 2,
 		fragment: 3
 	};
-	/**
-	 * Checks if a given character is a quote.
-	 *
-	 * @param {string} char
-	 * @returns {boolean} True if the character is a quote
-	 */
-
-	function isQuote(_char) {
-		return _char === "\"" || _char === "'";
-	}
 	/**
 	 * Logs an error message to the console.
 	 * @param {string} message
@@ -74,6 +64,11 @@
 		return full;
 	}
 
+	/**
+	 * Capture whitespace-only text.
+	 */
+
+	var whitespaceRE = /^\s+$/;
 	/**
 	 * Capture the tag name, attribute text, and closing slash from an opening tag.
 	 */
@@ -98,12 +93,23 @@
 	 */
 
 	var globals = ["NaN", "event", "false", "in", "null", "this", "true", "typeof", "undefined", "window"];
+	/**
+	 * Checks if a given character is a quote.
+	 *
+	 * @param {string} char
+	 * @returns {boolean} True if the character is a quote
+	 */
+
+	function isQuote(_char) {
+		return _char === "\"" || _char === "'";
+	}
 	/**
 	 * Scope an expression to use variables within the `data` object.
 	 *
 	 * @param {string} expression
 	 */
 
+
 	function scopeExpression(expression) {
 		return expression.replace(expressionRE, function (match, name) {
 			return name === undefined || globals.indexOf(name) !== -1 ? match : "data." + name;
@@ -191,9 +197,9 @@
 		var tokens = [];
 
 		for (var i = 0; i < input.length;) {
-			var _char = input[i];
+			var _char2 = input[i];
 
-			if (_char === "<") {
+			if (_char2 === "<") {
 				var charNext = input[i + 1];
 
 				if ("development" === "development" && charNext === undefined) {
@@ -286,18 +292,18 @@
 					closed: closeSlash === "/"
 				});
 				i += typeMatch.length;
-			} else if (_char === "{") {
+			} else if (_char2 === "{") {
 				// If a sequence of characters begins with "{", process it as an
 				// expression token.
 				var expression = ""; // Consume the input until the end of the expression.
 
 				for (i += 1; i < input.length; i++) {
-					var _char2 = input[i];
+					var _char3 = input[i];
 
-					if (_char2 === "}") {
+					if (_char3 === "}") {
 						break;
 					} else {
-						expression += _char2;
+						expression += _char3;
 					}
 				} // Append the expression as a `<text/>` element with the appropriate
 				// text content attribute.
@@ -317,25 +323,27 @@
 				var text = ""; // Consume the input until the start of a new tag or expression.
 
 				for (; i < input.length; i++) {
-					var _char3 = input[i];
+					var _char4 = input[i];
 
-					if (_char3 === "<" || _char3 === "{") {
+					if (_char4 === "<" || _char4 === "{") {
 						break;
 					} else {
-						text += _char3;
+						text += _char4;
 					}
 				} // Append the text as a `<text/>` element with the appropriate text
-				// content attribute.
+				// content attribute if it isn't only whitespace.
 
 
-				tokens.push({
-					type: "tagOpen",
-					value: "text",
-					attributes: {
-						"": "\"" + text + "\""
-					},
-					closed: true
-				});
+				if (!whitespaceRE.test(text)) {
+					tokens.push({
+						type: "tagOpen",
+						value: "text",
+						attributes: {
+							"": "\"" + text + "\""
+						},
+						closed: true
+					});
+				}
 			}
 		}
 
@@ -531,23 +539,92 @@
 	}
 
 	/**
-	 * Generator
+	 * Global variable number
+	 */
+	var generateVariable;
+	/**
+	 * Set variable number to a new number.
 	 *
-	 * The generator is responsible for generating a function that creates a view.
-	 * A view could be represented as a normal set of recursive function calls, but
-	 * it uses lightweight objects to represent them instead. This allows the
-	 * executor to execute the function over multiple frames with its own
-	 * representation of the stack.
+	 * @param {number} newGenerateVariable
+	 */
+
+	function setGenerateVariable(newGenerateVariable) {
+		generateVariable = newGenerateVariable;
+	}
+
+	/**
+	 * Generates view function code and prelude code for an `if` element.
 	 *
 	 * @param {Object} element
-	 * @returns {string} View function code
+	 * @param {Object} parent
+	 * @param {number} index
+	 * @returns {Object} View function code and prelude code
 	 */
 
-	function generate(element) {
+	function generateNodeIf(element, parent, index) {
+		var variable = "m" + generateVariable;
+		var prelude = "";
+		var emptyElseClause = true;
+		setGenerateVariable(generateVariable + 1); // Generate the initial `if` clause.
+
+		var generateIf = generateNode(element.children[0], element, 0);
+		prelude += "var " + variable + ";if(" + element.attributes[""] + "){" + generateIf.prelude + variable + "=" + generateIf.node + ";}"; // Search for `else-if` and `else` clauses if there are siblings.
+
+		if (parent !== null) {
+			var siblings = parent.children;
+
+			for (var i = index + 1; i < siblings.length; i++) {
+				var sibling = siblings[i];
+
+				if (sibling.type === "else-if") {
+					// Generate the `else-if` clause.
+					var generateElseIf = generateNode(sibling.children[0], sibling, 0);
+					prelude += "else if(" + sibling.attributes[""] + "){" + generateElseIf.prelude + variable + "=" + generateElseIf.node + ";}"; // Remove the `else-if` clause so that it isn't generated
+					// individually by the parent.
+
+					siblings.splice(i, 1);
+				} else if (sibling.type === "else") {
+					// Generate the `else` clause.
+					var generateElse = generateNode(sibling.children[0], sibling, 0);
+					prelude += "else{" + generateElse.prelude + variable + "=" + generateElse.node + ";}"; // Skip generating the empty `else` clause.
+
+					emptyElseClause = false; // Remove the `else` clause so that it isn't generated
+					// individually by the parent.
+
+					siblings.splice(i, 1);
+				} else {
+					break;
+				}
+			}
+		} // Generate an empty `else` clause represented by an empty text node.
+
+
+		if (emptyElseClause) {
+			prelude += "else{" + variable + "={type:" + types.text + ",name:\"text\",data:{children:[]}};}";
+		}
+
+		return {
+			prelude: prelude,
+			node: variable
+		};
+	}
+
+	/**
+	 * Generates view function code for a Moon node from an element.
+	 *
+	 * @param {Object} element
+	 * @param {Object} parent
+	 * @param {number} index
+	 * @returns {Object} View function code and prelude code
+	 */
+
+	function generateNode(element, parent, index) {
 		var name = element.type;
-		var type;
+		var type; // Generate the correct type number for the given name.
 
-		if (name === "text") {
+		if (name === "if") {
+			return generateNodeIf(element, parent, index);
+		} else if (name === "text") {
 			type = types.text;
 		} else if (name === "fragment") {
 			type = types.fragment;
@@ -558,6 +635,7 @@
 		}
 
 		var attributes = element.attributes;
+		var prelude = "";
 		var data = "{";
 		var separator = "";
 
@@ -573,14 +651,43 @@
 			separator = "";
 
 			for (var i = 0; i < children.length; i++) {
-				data += separator + generate(children[i]);
+				var childNode = generateNode(children[i], element, i);
+				prelude += childNode.prelude;
+				data += separator + childNode.node;
 				separator = ",";
 			}
 
 			data += "]";
 		}
 
-		return "{type:" + type + ",name:\"" + name + "\",data:" + data + "}}";
+		return {
+			prelude: prelude,
+			node: "{type:" + type + ",name:\"" + name + "\",data:" + data + "}}"
+		};
+	}
+	/**
+	 * Generator
+	 *
+	 * The generator is responsible for generating a function that creates a view.
+	 * A view could be represented as a normal set of recursive function calls, but
+	 * it uses lightweight objects to represent them instead. This allows the
+	 * executor to execute the function over multiple frames with its own
+	 * representation of the stack.
+	 *
+	 * @param {Object} element
+	 * @returns {string} View function code
+	 */
+
+	function generate(element) {
+		// Reset generator variable.
+		setGenerateVariable(0); // Generate the root node and get the prelude and node code.
+
+		var _generateNode = generateNode(element, null, 0),
+				prelude = _generateNode.prelude,
+				node = _generateNode.node; // Convert the code into a usable function body.
+
+
+		return prelude + "return " + node + ";";
 	}
 
 	function compile(input) {
@@ -603,6 +710,7 @@
 	var components = {};
 	/**
 	 * Set old view to a new object.
+	 *
 	 * @param {Object} viewOld
 	 */
 
@@ -611,6 +719,7 @@
 	}
 	/**
 	 * Set new view to a new object.
+	 *
 	 * @param {Object} viewOld
 	 */
 
@@ -619,6 +728,7 @@
 	}
 	/**
 	 * Set current view to a new function.
+	 *
 	 * @param {Function} viewCurrentNew
 	 */
 
@@ -1082,7 +1192,7 @@
 		}
 
 		if (typeof view === "string") {
-			view = new Function("data", "return " + compile(view));
+			view = new Function("data", compile(view));
 		} // If a `root` option is given, start the root renderer, or else just return
 		// the component.
 
diff --git a/packages/moon/dist/moon.min.js b/packages/moon/dist/moon.min.js
index e1526eb9..16918a55 100644
--- a/packages/moon/dist/moon.min.js
+++ b/packages/moon/dist/moon.min.js
@@ -4,4 +4,4 @@
  * Released under the MIT License
  * https://kbrsh.github.io/moon
  */
-!function(e,n){"undefined"==typeof module?e.Moon=n():module.exports=n()}(this,function(){"use strict";var v={element:0,text:1,component:2,fragment:3};var N=/<([\w\d-_]+)([^>]*?)(\/?)>/g,A=/\s*([\w\d-_:@]*)(?:=(?:("[^"]*"|'[^']*')|{([^{}]*)}))?/g,n=/"[^"]*"|'[^']*'|\d+[a-zA-Z$_]\w*|\.[a-zA-Z$_]\w*|[a-zA-Z$_]\w*:|([a-zA-Z$_]\w*)/g,t=["NaN","event","false","in","null","this","true","typeof","undefined","window"];function E(e){return e.replace(n,function(e,n){return void 0===n||-1!==t.indexOf(n)?e:"data."+n})}function r(e){e=e.trim();for(var n=[],t=0;t<e.length;){var r=e[t];if("<"===r){var a=e[t+1];if("/"===a){var o=e.indexOf(">",t+2),i=e.slice(t+2,o);0,n.push({type:"tagClose",value:i}),t=o+1;continue}if("!"===a&&"-"===e[t+2]&&"-"===e[t+3]){var d=e.indexOf("--\x3e",t+4);0,t=d+3;continue}N.lastIndex=t;var u=N.exec(e);0;for(var l=u[0],p=u[1],f=u[2],s=u[3],c={},v=void 0;null!==(v=A.exec(f));){var h=v[0],m=v[1],g=v[2],w=v[3];0===h.length?A.lastIndex+=1:(c[m]=void 0===w?g:E(w),"@"===m[0]&&(c[m]="function(event){"+c[m]+"}"))}n.push({type:"tagOpen",value:p,attributes:c,closed:"/"===s}),t+=l.length}else if("{"===r){var y="";for(t+=1;t<e.length;t++){var b=e[t];if("}"===b)break;y+=b}n.push({type:"tagOpen",value:"text",attributes:{"":E(y)},closed:!0}),t+=1}else{for(var x="";t<e.length;t++){var O=e[t];if("<"===O||"{"===O)break;x+=O}n.push({type:"tagOpen",value:"text",attributes:{"":'"'+x+'"'},closed:!0})}}return n}function p(e,n,t,r){this.message=e,this.start=n,this.end=t,this.next=r}function f(e,n,t){var r=t[e],a=t[n-1],o=n-e;if(0==o)return new p("",e,n);if(1==o)return"tagOpen"===r.type&&!0===r.closed?{type:r.value,attributes:r.attributes,children:[]}:new p("",e,n);if("tagOpen"!==r.type||"tagClose"!==a.type||r.value!==a.value)return new p("",e,n);var i=function e(n,t,r){var a;if(0==t-n)return[];for(var o=n+1;o<=t;o++){var i=f(n,o,r);if(i instanceof p)a=i;else{var d=e(o,t,r);if(!(d instanceof p)){for(var u=[i],l=0;l<d.length;l++)u.push(d[l]);return u}}}return new p("",n,t,a)}(e+1,n-1,t);return i instanceof p?new p("",e,n,i):{type:r.value,attributes:r.attributes,children:i}}function a(e){var n=f(0,e.length,e);return n}function l(e){var n,t=e.type;n="text"===t?v.text:"fragment"===t?v.fragment:t[0]===t[0].toLowerCase()?v.element:v.component;var r=e.attributes,a="{",o="";for(var i in r)a+=o+'"'+i+'":'+r[i],o=",";if(void 0===r.children){var d=e.children;a+=o+"children:[",o="";for(var u=0;u<d.length;u++)a+=o+l(d[u]),o=",";a+="]"}return"{type:"+n+',name:"'+t+'",data:'+a+"}}"}function o(e){return l(a(r(e)))}var s,c,i,w,d={},h={};function m(e){c=e}var y=[],b={updateText:0,setAttributes:1,appendElement:2,removeElement:3,replaceElement:4};function x(e){var n,t=e.type,r=e.name,a={},o=[];if(t===v.text){var i=e.data[""];n=document.createTextNode(i),a[""]=i}else{var d=e.data;if(t===v.element)for(var u in n=document.createElement(e.name),d){var l=d[u];"@"===u[0]?(a[u]=l,n.addEventListener(u.slice(1),l)):"children"!==u&&(a[u]=l,n.setAttribute(u,l))}else n=document.createDocumentFragment();for(var p=d.children,f=0;f<p.length;f++){var s=x(p[f]);o.push(s),n.appendChild(s.node)}}return a.children=o,{type:t,name:r,data:a,node:n}}function g(e,n,t){for(;;){var r=e.pop(),a=n.pop();if(r!==a){if(r.name!==a.name)t.push({type:b.replaceElement,nodeOld:r,nodeNew:a,nodeParent:null});else if(r.type===v.text)t.push({type:b.updateText,nodeOld:r,nodeNew:a,parent:null});else{r.type===v.element&&t.push({type:b.setAttributes,nodeOld:r,nodeNew:a,nodeParent:null});var o=r.data.children,i=a.data.children,d=o.length,u=i.length;if(d===u)for(var l=0;l<d;l++)e.push(o[l]),n.push(i[l]);else if(u<d){for(var p=0;p<u;p++)e.push(o[p]),n.push(i[p]);for(var f=u;f<d;f++)t.push({type:b.removeElement,nodeOld:o[f],nodeNew:null,nodeParent:r})}else{for(var s=0;s<d;s++)e.push(o[s]),n.push(i[s]);for(var c=d;c<u;c++)t.push({type:b.appendElement,nodeOld:null,nodeNew:i[c],nodeParent:r})}}if(0===e.length){O(t);break}if(16<=performance.now()-w){requestAnimationFrame(function(){w=performance.now(),g(e,n,t)});break}}}}function O(e){for(var n=0;n<e.length;n++){var t=e[n];switch(t.type){case b.updateText:var r=t.nodeOld,a=t.nodeNew.data[""];r.data[""]=a,r.node.textContent=a;break;case b.setAttributes:var o=t.nodeOld,i=o.data,d=o.node,u=t.nodeNew.data;for(var l in u){var p=u[l];"@"!==l[0]&&"children"!==l&&(i[l]=p,d.setAttribute(l,p))}break;case b.appendElement:var f=t.nodeNew,s=t.nodeParent,c=x(f);s.data.children.push(c),s.node.appendChild(c.node);break;case b.removeElement:var v=t.nodeParent;v.data.children.pop(),v.node.removeChild(t.nodeOld.node);break;case b.replaceElement:var h=t.nodeOld,m=x(t.nodeNew),g=h.node;h.type=m.type,h.name=m.name,h.data=m.data,h.node=m.node,g.parentNode.replaceChild(h.node,g)}}y.shift(),0!==y.length&&(16<=performance.now()-w?requestAnimationFrame(function(){w=performance.now(),k()}):k())}function k(){var e=y[0];for(var n in e)d[n]=e[n];!function e(n,t,r){for(;;){var a=n.pop(),o=t.pop(),i=r.pop();a.type===v.component?(a=h[a.name](a.data),null===o?m(a):o.data.children[i]=a):null===o&&m(a);for(var d=a.data.children,u=0;u<d.length;u++)n.push(d[u]),t.push(a),r.push(u);if(0===n.length){g([s],[c],[]);break}if(16<=performance.now()-w){requestAnimationFrame(function(){w=performance.now(),e(n,t,r)});break}}}([i(d)],[null],[0])}function u(e){y.push(e),1===y.length&&requestAnimationFrame(function(){w=performance.now(),k()})}function e(n){var e=function(e,n){return void 0===e?n:e}(n.name,"Root");delete n.name;var t=n.view;delete n.view,"string"==typeof t&&(t=new Function("data","return "+o(t)));var r="string"==typeof n.root?document.querySelector(n.root):n.root;delete n.root,void 0===r?h[e]=function(e){return t(function(e,n){var t={};for(var r in n)t[r]=n[r];for(var a in e)t[a]=e[a];return t}(e,n))}:(function(e){s=e}({type:v.element,name:r.tagName.toLowerCase(),data:{children:[]},node:r}),function(e){i=e}(t),u(n))}return e.lex=r,e.parse=a,e.generate=l,e.compile=o,e.components=h,e.set=u,e});
\ No newline at end of file
+!function(e,n){"undefined"==typeof module?e.Moon=n():module.exports=n()}(this,function(){"use strict";var v={element:0,text:1,component:2,fragment:3};var c,N=/^\s+$/,A=/<([\w\d-_]+)([^>]*?)(\/?)>/g,k=/\s*([\w\d-_:@]*)(?:=(?:("[^"]*"|'[^']*')|{([^{}]*)}))?/g,n=/"[^"]*"|'[^']*'|\d+[a-zA-Z$_]\w*|\.[a-zA-Z$_]\w*|[a-zA-Z$_]\w*:|([a-zA-Z$_]\w*)/g,t=["NaN","event","false","in","null","this","true","typeof","undefined","window"];function E(e){return e.replace(n,function(e,n){return void 0===n||-1!==t.indexOf(n)?e:"data."+n})}function r(e){e=e.trim();for(var n=[],t=0;t<e.length;){var r=e[t];if("<"===r){var a=e[t+1];if("/"===a){var o=e.indexOf(">",t+2),i=e.slice(t+2,o);0,n.push({type:"tagClose",value:i}),t=o+1;continue}if("!"===a&&"-"===e[t+2]&&"-"===e[t+3]){var d=e.indexOf("--\x3e",t+4);0,t=d+3;continue}A.lastIndex=t;var l=A.exec(e);0;for(var u=l[0],p=l[1],f=l[2],s=l[3],c={},v=void 0;null!==(v=k.exec(f));){var h=v[0],m=v[1],g=v[2],w=v[3];0===h.length?k.lastIndex+=1:(c[m]=void 0===w?g:E(w),"@"===m[0]&&(c[m]="function(event){"+c[m]+"}"))}n.push({type:"tagOpen",value:p,attributes:c,closed:"/"===s}),t+=u.length}else if("{"===r){var y="";for(t+=1;t<e.length;t++){var b=e[t];if("}"===b)break;y+=b}n.push({type:"tagOpen",value:"text",attributes:{"":E(y)},closed:!0}),t+=1}else{for(var x="";t<e.length;t++){var O=e[t];if("<"===O||"{"===O)break;x+=O}N.test(x)||n.push({type:"tagOpen",value:"text",attributes:{"":'"'+x+'"'},closed:!0})}}return n}function p(e,n,t,r){this.message=e,this.start=n,this.end=t,this.next=r}function f(e,n,t){var r=t[e],a=t[n-1],o=n-e;if(0==o)return new p("",e,n);if(1==o)return"tagOpen"===r.type&&!0===r.closed?{type:r.value,attributes:r.attributes,children:[]}:new p("",e,n);if("tagOpen"!==r.type||"tagClose"!==a.type||r.value!==a.value)return new p("",e,n);var i=function e(n,t,r){var a;if(0==t-n)return[];for(var o=n+1;o<=t;o++){var i=f(n,o,r);if(i instanceof p)a=i;else{var d=e(o,t,r);if(!(d instanceof p)){for(var l=[i],u=0;u<d.length;u++)l.push(d[u]);return l}}}return new p("",n,t,a)}(e+1,n-1,t);return i instanceof p?new p("",e,n,i):{type:r.value,attributes:r.attributes,children:i}}function a(e){var n=f(0,e.length,e);return n}function h(e){c=e}function m(e,n,t){var r,a=e.type;if("if"===a)return function(e,n,t){var r="m"+c,a="",o=!0;h(c+1);var i=m(e.children[0],e,0);if(a+="var "+r+";if("+e.attributes[""]+"){"+i.prelude+r+"="+i.node+";}",null!==n)for(var d=n.children,l=t+1;l<d.length;l++){var u=d[l];if("else-if"===u.type){var p=m(u.children[0],u,0);a+="else if("+u.attributes[""]+"){"+p.prelude+r+"="+p.node+";}",d.splice(l,1)}else{if("else"!==u.type)break;var f=m(u.children[0],u,0);a+="else{"+f.prelude+r+"="+f.node+";}",o=!1,d.splice(l,1)}}return o&&(a+="else{"+r+"={type:"+v.text+',name:"text",data:{children:[]}};}'),{prelude:a,node:r}}(e,n,t);r="text"===a?v.text:"fragment"===a?v.fragment:a[0]===a[0].toLowerCase()?v.element:v.component;var o=e.attributes,i="",d="{",l="";for(var u in o)d+=l+'"'+u+'":'+o[u],l=",";if(void 0===o.children){var p=e.children;d+=l+"children:[",l="";for(var f=0;f<p.length;f++){var s=m(p[f],e,f);i+=s.prelude,d+=l+s.node,l=","}d+="]"}return{prelude:i,node:"{type:"+r+',name:"'+a+'",data:'+d+"}}"}}function o(e){h(0);var n=m(e,null,0);return n.prelude+"return "+n.node+";"}function i(e){return o(a(r(e)))}var u,s,d,w,l={},g={};function y(e){s=e}var b=[],x={updateText:0,setAttributes:1,appendElement:2,removeElement:3,replaceElement:4};function O(e){var n,t=e.type,r=e.name,a={},o=[];if(t===v.text){var i=e.data[""];n=document.createTextNode(i),a[""]=i}else{var d=e.data;if(t===v.element)for(var l in n=document.createElement(e.name),d){var u=d[l];"@"===l[0]?(a[l]=u,n.addEventListener(l.slice(1),u)):"children"!==l&&(a[l]=u,n.setAttribute(l,u))}else n=document.createDocumentFragment();for(var p=d.children,f=0;f<p.length;f++){var s=O(p[f]);o.push(s),n.appendChild(s.node)}}return a.children=o,{type:t,name:r,data:a,node:n}}function C(e,n,t){for(;;){var r=e.pop(),a=n.pop();if(r!==a){if(r.name!==a.name)t.push({type:x.replaceElement,nodeOld:r,nodeNew:a,nodeParent:null});else if(r.type===v.text)t.push({type:x.updateText,nodeOld:r,nodeNew:a,parent:null});else{r.type===v.element&&t.push({type:x.setAttributes,nodeOld:r,nodeNew:a,nodeParent:null});var o=r.data.children,i=a.data.children,d=o.length,l=i.length;if(d===l)for(var u=0;u<d;u++)e.push(o[u]),n.push(i[u]);else if(l<d){for(var p=0;p<l;p++)e.push(o[p]),n.push(i[p]);for(var f=l;f<d;f++)t.push({type:x.removeElement,nodeOld:o[f],nodeNew:null,nodeParent:r})}else{for(var s=0;s<d;s++)e.push(o[s]),n.push(i[s]);for(var c=d;c<l;c++)t.push({type:x.appendElement,nodeOld:null,nodeNew:i[c],nodeParent:r})}}if(0===e.length){F(t);break}if(16<=performance.now()-w){requestAnimationFrame(function(){w=performance.now(),C(e,n,t)});break}}}}function F(e){for(var n=0;n<e.length;n++){var t=e[n];switch(t.type){case x.updateText:var r=t.nodeOld,a=t.nodeNew.data[""];r.data[""]=a,r.node.textContent=a;break;case x.setAttributes:var o=t.nodeOld,i=o.data,d=o.node,l=t.nodeNew.data;for(var u in l){var p=l[u];"@"!==u[0]&&"children"!==u&&(i[u]=p,d.setAttribute(u,p))}break;case x.appendElement:var f=t.nodeNew,s=t.nodeParent,c=O(f);s.data.children.push(c),s.node.appendChild(c.node);break;case x.removeElement:var v=t.nodeParent;v.data.children.pop(),v.node.removeChild(t.nodeOld.node);break;case x.replaceElement:var h=t.nodeOld,m=O(t.nodeNew),g=h.node;h.type=m.type,h.name=m.name,h.data=m.data,h.node=m.node,g.parentNode.replaceChild(h.node,g)}}b.shift(),0!==b.length&&(16<=performance.now()-w?requestAnimationFrame(function(){w=performance.now(),P()}):P())}function P(){var e=b[0];for(var n in e)l[n]=e[n];!function e(n,t,r){for(;;){var a=n.pop(),o=t.pop(),i=r.pop();a.type===v.component?(a=g[a.name](a.data),null===o?y(a):o.data.children[i]=a):null===o&&y(a);for(var d=a.data.children,l=0;l<d.length;l++)n.push(d[l]),t.push(a),r.push(l);if(0===n.length){C([u],[s],[]);break}if(16<=performance.now()-w){requestAnimationFrame(function(){w=performance.now(),e(n,t,r)});break}}}([d(l)],[null],[0])}function _(e){b.push(e),1===b.length&&requestAnimationFrame(function(){w=performance.now(),P()})}function e(n){var e=function(e,n){return void 0===e?n:e}(n.name,"Root");delete n.name;var t=n.view;delete n.view,"string"==typeof t&&(t=new Function("data",i(t)));var r="string"==typeof n.root?document.querySelector(n.root):n.root;delete n.root,void 0===r?g[e]=function(e){return t(function(e,n){var t={};for(var r in n)t[r]=n[r];for(var a in e)t[a]=e[a];return t}(e,n))}:(function(e){u=e}({type:v.element,name:r.tagName.toLowerCase(),data:{children:[]},node:r}),function(e){d=e}(t),_(n))}return e.lex=r,e.parse=a,e.generate=o,e.compile=i,e.components=g,e.set=_,e});
\ No newline at end of file
diff --git a/packages/moon/src/compiler/generator/components/if.js b/packages/moon/src/compiler/generator/components/if.js
new file mode 100644
index 00000000..f02e2220
--- /dev/null
+++ b/packages/moon/src/compiler/generator/components/if.js
@@ -0,0 +1,80 @@
+import { generateNode } from "../generator";
+import { types } from "../../../util/util";
+import { generateVariable, setGenerateVariable } from "../util/globals";
+
+/**
+ * Generates view function code and prelude code for an `if` element.
+ *
+ * @param {Object} element
+ * @param {Object} parent
+ * @param {number} index
+ * @returns {Object} View function code and prelude code
+ */
+export function generateNodeIf(element, parent, index) {
+	const variable = "m" + generateVariable;
+	let prelude = "";
+	let emptyElseClause = true;
+
+	setGenerateVariable(generateVariable + 1);
+
+	// Generate the initial `if` clause.
+	const generateIf = generateNode(
+		element.children[0],
+		element,
+		0
+	);
+
+	prelude += `var ${variable};if(${element.attributes[""]}){${generateIf.prelude}${variable}=${generateIf.node};}`;
+
+	// Search for `else-if` and `else` clauses if there are siblings.
+	if (parent !== null) {
+		const siblings = parent.children;
+
+		for (let i = index + 1; i < siblings.length; i++) {
+			const sibling = siblings[i];
+
+			if (sibling.type === "else-if") {
+				// Generate the `else-if` clause.
+				const generateElseIf = generateNode(
+					sibling.children[0],
+					sibling,
+					0
+				);
+
+				prelude += `else if(${sibling.attributes[""]}){${generateElseIf.prelude}${variable}=${generateElseIf.node};}`;
+
+				// Remove the `else-if` clause so that it isn't generated
+				// individually by the parent.
+				siblings.splice(i, 1);
+			} else if (sibling.type === "else") {
+				// Generate the `else` clause.
+				const generateElse = generateNode(
+					sibling.children[0],
+					sibling,
+					0
+				);
+
+				prelude += `else{${generateElse.prelude}${variable}=${generateElse.node};}`;
+
+				// Skip generating the empty `else` clause.
+				emptyElseClause = false;
+
+				// Remove the `else` clause so that it isn't generated
+				// individually by the parent.
+				siblings.splice(i, 1);
+			} else {
+				break;
+			}
+		}
+	}
+
+	// Generate an empty `else` clause represented by an empty text node.
+	if (emptyElseClause) {
+		prelude += `else{${variable}={type:${types.text},name:"text",data:{children:[]}};}`;
+	}
+
+	return {
+		prelude,
+		node: variable
+	};
+}
diff --git a/packages/moon/src/compiler/generator/generator.js b/packages/moon/src/compiler/generator/generator.js
index 62f819b4..dac9f150 100644
--- a/packages/moon/src/compiler/generator/generator.js
+++ b/packages/moon/src/compiler/generator/generator.js
@@ -1,22 +1,23 @@
+import { generateNodeIf } from "./components/if";
+import { setGenerateVariable } from "./util/globals";
 import { types } from "../../util/util";
 
 /**
- * Generator
- *
- * The generator is responsible for generating a function that creates a view.
- * A view could be represented as a normal set of recursive function calls, but
- * it uses lightweight objects to represent them instead. This allows the
- * executor to execute the function over multiple frames with its own
- * representation of the stack.
+ * Generates view function code for a Moon node from an element.
  *
  * @param {Object} element
- * @returns {string} View function code
+ * @param {Object} parent
+ * @param {number} index
+ * @returns {Object} View function code and prelude code
  */
-export function generate(element) {
+export function generateNode(element, parent, index) {
 	const name = element.type;
 	let type;
 
-	if (name === "text") {
+	// Generate the correct type number for the given name.
+	if (name === "if") {
+		return generateNodeIf(element, parent, index);
+	} else if (name === "text") {
 		type = types.text;
 	} else if (name === "fragment") {
 		type = types.fragment;
@@ -27,6 +28,7 @@ export function generate(element) {
 	}
 
 	const attributes = element.attributes;
+	let prelude = "";
 	let data = "{";
 	let separator = "";
 
@@ -42,12 +44,42 @@ export function generate(element) {
 
 		separator = "";
 		for (let i = 0; i < children.length; i++) {
-			data += separator + generate(children[i]);
+			const childNode = generateNode(children[i], element, i);
+
+			prelude += childNode.prelude;
+			data += separator + childNode.node;
+
 			separator = ",";
 		}
 
 		data += "]";
 	}
 
-	return `{type:${type},name:"${name}",data:${data}}}`;
+	return {
+		prelude,
+		node: `{type:${type},name:"${name}",data:${data}}}`
+	};
+}
+
+/**
+ * Generator
+ *
+ * The generator is responsible for generating a function that creates a view.
+ * A view could be represented as a normal set of recursive function calls, but
+ * it uses lightweight objects to represent them instead. This allows the
+ * executor to execute the function over multiple frames with its own
+ * representation of the stack.
+ *
+ * @param {Object} element
+ * @returns {string} View function code
+ */
+export function generate(element) {
+	// Reset generator variable.
+	setGenerateVariable(0);
+
+	// Generate the root node and get the prelude and node code.
+	const { prelude, node } = generateNode(element, null, 0);
+
+	// Convert the code into a usable function body.
+	return `${prelude}return ${node};`;
 }
diff --git a/packages/moon/src/compiler/generator/util/globals.js b/packages/moon/src/compiler/generator/util/globals.js
new file mode 100644
index 00000000..e2212dc8
--- /dev/null
+++ b/packages/moon/src/compiler/generator/util/globals.js
@@ -0,0 +1,13 @@
+/**
+ * Global variable number
+ */
+export let generateVariable;
+
+/**
+ * Set variable number to a new number.
+ *
+ * @param {number} newGenerateVariable
+ */
+export function setGenerateVariable(newGenerateVariable) {
+	generateVariable = newGenerateVariable;
+}
diff --git a/packages/moon/src/compiler/lexer/lexer.js b/packages/moon/src/compiler/lexer/lexer.js
index de84b725..552db1bd 100644
--- a/packages/moon/src/compiler/lexer/lexer.js
+++ b/packages/moon/src/compiler/lexer/lexer.js
@@ -1,4 +1,9 @@
-import { error, isQuote } from "../../util/util";
+import { error } from "../../util/util";
+
+/**
+ * Capture whitespace-only text.
+ */
+const whitespaceRE = /^\s+$/;
 
 /**
  * Capture the tag name, attribute text, and closing slash from an opening tag.
@@ -24,6 +29,16 @@ const expressionRE = /"[^"]*"|'[^']*'|\d+[a-zA-Z$_]\w*|\.[a-zA-Z$_]\w*|[a-zA-Z$_
  */
 const globals = ["NaN", "event", "false", "in", "null", "this", "true", "typeof", "undefined", "window"];
 
+/**
+ * Checks if a given character is a quote.
+ *
+ * @param {string} char
+ * @returns {boolean} True if the character is a quote
+ */
+function isQuote(char) {
+	return char === "\"" || char === "'";
+}
+
 /**
  * Scope an expression to use variables within the `data` object.
  *
@@ -277,15 +292,17 @@ export function lex(input) {
 			}
 
 			// Append the text as a `<text/>` element with the appropriate text
-			// content attribute.
-			tokens.push({
-				type: "tagOpen",
-				value: "text",
-				attributes: {
-					"": `"${text}"`
-				},
-				closed: true
-			});
+			// content attribute if it isn't only whitespace.
+			if (!whitespaceRE.test(text)) {
+				tokens.push({
+					type: "tagOpen",
+					value: "text",
+					attributes: {
+						"": `"${text}"`
+					},
+					closed: true
+				});
+			}
 		}
 	}
 
diff --git a/packages/moon/src/index.js b/packages/moon/src/index.js
index f04d44cf..bbdad1b8 100644
--- a/packages/moon/src/index.js
+++ b/packages/moon/src/index.js
@@ -46,7 +46,7 @@ export default function Moon(options) {
 	}
 
 	if (typeof view === "string") {
-		view = new Function("data", "return " + compile(view));
+		view = new Function("data", compile(view));
 	}
 
 	// If a `root` option is given, start the root renderer, or else just return
diff --git a/packages/moon/src/util/globals.js b/packages/moon/src/util/globals.js
index dd282201..a0357d5a 100644
--- a/packages/moon/src/util/globals.js
+++ b/packages/moon/src/util/globals.js
@@ -15,6 +15,7 @@ export const components = {};
 
 /**
  * Set old view to a new object.
+ *
  * @param {Object} viewOld
  */
 export function setViewOld(viewOldNew) {
@@ -23,6 +24,7 @@ export function setViewOld(viewOldNew) {
 
 /**
  * Set new view to a new object.
+ *
  * @param {Object} viewOld
  */
 export function setViewNew(viewNewNew) {
@@ -31,6 +33,7 @@ export function setViewNew(viewNewNew) {
 
 /**
  * Set current view to a new function.
+ *
  * @param {Function} viewCurrentNew
  */
 export function setViewCurrent(viewCurrentNew) {
diff --git a/packages/moon/src/util/util.js b/packages/moon/src/util/util.js
index e5dab1e7..83423218 100644
--- a/packages/moon/src/util/util.js
+++ b/packages/moon/src/util/util.js
@@ -8,16 +8,6 @@ export const types = {
 	fragment: 3
 };
 
-/**
- * Checks if a given character is a quote.
- *
- * @param {string} char
- * @returns {boolean} True if the character is a quote
- */
-export function isQuote(char) {
-	return char === "\"" || char === "'";
-}
-
 /**
  * Logs an error message to the console.
  * @param {string} message