diff --git a/.gitignore b/.gitignore
index 3dcb37e..a7c80a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 node_modules
-*.js
\ No newline at end of file
+*.js
+*.n
+/bin/example/static.html
diff --git a/build-static.hxml b/build-static.hxml
new file mode 100644
index 0000000..adbbfbe
--- /dev/null
+++ b/build-static.hxml
@@ -0,0 +1,6 @@
+-cp src
+-cp test/website
+-lib coconut.html
+-lib cix
+-main Main
+--interp
\ No newline at end of file
diff --git a/haxe_libraries/coconut.html.hxml b/haxe_libraries/coconut.html.hxml
new file mode 100644
index 0000000..13451de
--- /dev/null
+++ b/haxe_libraries/coconut.html.hxml
@@ -0,0 +1,6 @@
+# @install: lix --silent download "gh://github.com/MVCoconut/coconut.html#50ce49e418c3412e780d6f2415cbf721cb4c7067" into coconut.html/0.0.0/github/50ce49e418c3412e780d6f2415cbf721cb4c7067
+-lib coconut.ui
+-lib tink_htmlstring
+-cp ${HAXE_LIBCACHE}/coconut.html/0.0.0/github/50ce49e418c3412e780d6f2415cbf721cb4c7067/src
+-D coconut.html=0.0.0
+--macro coconut.html.macros.Setup.perform()
\ No newline at end of file
diff --git a/haxe_libraries/coconut.ui.hxml b/haxe_libraries/coconut.ui.hxml
index 30be78a..b74afa9 100644
--- a/haxe_libraries/coconut.ui.hxml
+++ b/haxe_libraries/coconut.ui.hxml
@@ -1,8 +1,8 @@
-# @install: lix --silent download "gh://github.com/MVCoconut/coconut.ui#ba6fc91a548cddd2bd1c87a3bb856ae934097ba7" into coconut.ui/0.10.0/github/ba6fc91a548cddd2bd1c87a3bb856ae934097ba7
+# @install: lix --silent download "gh://github.com/MVCoconut/coconut.ui#91a1193f42bcb003a5f23c3af639ff8bdec33850" into coconut.ui/0.11.1/github/91a1193f42bcb003a5f23c3af639ff8bdec33850
 -lib coconut.data
 -lib tink_anon
 -lib tink_hxx
 -lib tink_lang
--cp ${HAXE_LIBCACHE}/coconut.ui/0.10.0/github/ba6fc91a548cddd2bd1c87a3bb856ae934097ba7/src
--D coconut.ui=0.10.0
+-cp ${HAXE_LIBCACHE}/coconut.ui/0.11.1/github/91a1193f42bcb003a5f23c3af639ff8bdec33850/src
+-D coconut.ui=0.11.1
 -D coconut_ui
\ No newline at end of file
diff --git a/haxe_libraries/tink_domspec.hxml b/haxe_libraries/tink_domspec.hxml
index f37f279..00da8c2 100644
--- a/haxe_libraries/tink_domspec.hxml
+++ b/haxe_libraries/tink_domspec.hxml
@@ -1,5 +1,5 @@
-# @install: lix --silent download "gh://github.com/haxetink/tink_domspec#880ae41ff4c346db4a7da567e74d360e8e31f14a" into tink_domspec/0.2.0/github/880ae41ff4c346db4a7da567e74d360e8e31f14a
+# @install: lix --silent download "gh://github.com/haxetink/tink_domspec#7137a4ca5c4b16ff7c9834ab3e418d2847f5ad45" into tink_domspec/0.2.0/github/7137a4ca5c4b16ff7c9834ab3e418d2847f5ad45
 -lib tink_macro
 -lib tink_svgspec
--cp ${HAXE_LIBCACHE}/tink_domspec/0.2.0/github/880ae41ff4c346db4a7da567e74d360e8e31f14a/src
+-cp ${HAXE_LIBCACHE}/tink_domspec/0.2.0/github/7137a4ca5c4b16ff7c9834ab3e418d2847f5ad45/src
 -D tink_domspec=0.2.0
\ No newline at end of file
diff --git a/haxe_libraries/tink_htmlstring.hxml b/haxe_libraries/tink_htmlstring.hxml
new file mode 100644
index 0000000..aec00d2
--- /dev/null
+++ b/haxe_libraries/tink_htmlstring.hxml
@@ -0,0 +1,3 @@
+# @install: lix --silent download "gh://github.com/haxetink/tink_htmlstring#d9ac1f8d0de0184e1e3dfc7ca5def710810ef153" into tink_htmlstring/0.1.0/github/d9ac1f8d0de0184e1e3dfc7ca5def710810ef153
+-cp ${HAXE_LIBCACHE}/tink_htmlstring/0.1.0/github/d9ac1f8d0de0184e1e3dfc7ca5def710810ef153/src
+-D tink_htmlstring=0.1.0
\ No newline at end of file
diff --git a/src/bootstrap/Alert.hx b/src/bootstrap/Alert.hx
index cfcaaeb..d7ddaa4 100644
--- a/src/bootstrap/Alert.hx
+++ b/src/bootstrap/Alert.hx
@@ -1,7 +1,5 @@
 package bootstrap;
 
-import coconut.vdom.View;
-
 class Alert extends View {
 	static inline final prefix:String = 'alert';
 
@@ -19,8 +17,8 @@ class Alert extends View {
 			<div
 				role="alert"
 				className=${[
-					'${prefix}' => true, 
-					'${prefix}-${variant}' => true, 
+					'${prefix}' => true,
+					'${prefix}-${variant}' => true,
 				]}
 			>
 				<if ${dismissible}>
diff --git a/src/bootstrap/Button.hx b/src/bootstrap/Button.hx
index 8f09a90..249260d 100644
--- a/src/bootstrap/Button.hx
+++ b/src/bootstrap/Button.hx
@@ -1,7 +1,5 @@
 package bootstrap;
 
-import coconut.vdom.View;
-
 class Button extends View {
 	static inline final prefix:String = 'btn';
 
@@ -13,7 +11,7 @@ class Button extends View {
 	@:attribute var href:String = null;
 	@:attribute var type:ButtonType = ButtonType.Default;
 
-	@:attribute function onclick(e:js.html.Event):Void {};
+	@:attribute function onclick(e:#if js js.html.Event #else Any #end):Void {};
 
 	@:attribute var className:ClassName = null;
 	@:attribute var children:String;
diff --git a/src/bootstrap/CloseButton.hx b/src/bootstrap/CloseButton.hx
index f0e5898..53fd8f5 100644
--- a/src/bootstrap/CloseButton.hx
+++ b/src/bootstrap/CloseButton.hx
@@ -1,7 +1,5 @@
 package bootstrap;
 
-import coconut.vdom.View;
-
 class CloseButton extends View {
 	@:attribute function onclick():Void;
 
diff --git a/src/bootstrap/Container.hx b/src/bootstrap/Container.hx
index b8dc28d..eae0f85 100644
--- a/src/bootstrap/Container.hx
+++ b/src/bootstrap/Container.hx
@@ -1,8 +1,5 @@
 package bootstrap;
 
-import haxe.extern.EitherType;
-import coconut.vdom.View;
-
 class Container extends View {
 	static inline final prefix:String = 'container';
 
diff --git a/src/bootstrap/Dropdown.hx b/src/bootstrap/Dropdown.hx
index 9d97dd7..9c8eb51 100644
--- a/src/bootstrap/Dropdown.hx
+++ b/src/bootstrap/Dropdown.hx
@@ -30,6 +30,7 @@ class Dropdown extends View {
 	';
 
 	function handleClick(e) if (!open) {
+		#if js
 		open = true;
 		e.stopPropagation();
 		var body = js.Browser.document.body;
@@ -37,6 +38,7 @@ class Dropdown extends View {
 			open = false;
 			body.removeEventListener('click', close);
 		});
+		#end
 	}
 }
 
diff --git a/src/bootstrap/ListGroup.hx b/src/bootstrap/ListGroup.hx
index f35d946..f9c4d63 100644
--- a/src/bootstrap/ListGroup.hx
+++ b/src/bootstrap/ListGroup.hx
@@ -7,11 +7,11 @@ class ListGroup extends View {
 	@:attribute var flush:Bool = false;
 	@:attribute var horizontal:Bool = false; // TODO: use Size
 
-	@:attribute function items(tags:ListGroupItemTags):Children return null;
+	@:optional @:attribute function items(tags:ListGroupItemTags):Children;
 
-	@:attribute function links(tags:ListGroupLinkTags):Children return null;
+	@:optional @:attribute function links(tags:ListGroupLinkTags):Children;
 
-	@:attribute function buttons(tags:ListGroupButtonTags):Children return null;
+	@:optional @:attribute function buttons(tags:ListGroupButtonTags):Children;
 
 	function render() '<>
 		<let className=${className.add(['$prefix' => true, '$prefix-horizontal' => horizontal, 'flush' => flush])}>
@@ -36,7 +36,7 @@ class ListGroup extends View {
 	static var itemTags:ListGroupItemTags = {
 		item: function(attr) '
 			<li class=${attr.className.add([
-				'$prefix-item' => true, 
+				'$prefix-item' => true,
 				'$prefix-item-${attr.variant}' => attr.variant != null,
 				'active' => attr.active,
 				'disabled' => attr.disabled,
@@ -49,8 +49,8 @@ class ListGroup extends View {
 	static var linkTags:ListGroupLinkTags = {
 		item: function(attr) '
 			<a class=${attr.className.add([
-				'$prefix-item' => true, 
-				'$prefix-item-action' => true, 
+				'$prefix-item' => true,
+				'$prefix-item-action' => true,
 				'$prefix-item-${attr.variant}' => attr.variant != null,
 				'active' => attr.active,
 				'disabled' => attr.disabled,
@@ -64,8 +64,8 @@ class ListGroup extends View {
 	static var buttonTags:ListGroupButtonTags = {
 		item: function(attr) '
 			<button class=${attr.className.add([
-				'$prefix-item' => true, 
-				'$prefix-item-action' => true, 
+				'$prefix-item' => true,
+				'$prefix-item-action' => true,
 				'$prefix-item-${attr.variant}' => attr.variant != null,
 				'active' => attr.active,
 			])}
diff --git a/src/import.hx b/src/import.hx
index e9074f3..b3e3eaf 100644
--- a/src/import.hx
+++ b/src/import.hx
@@ -1,7 +1,7 @@
 import bootstrap.types.Variant;
 import bootstrap.types.Size;
 import bootstrap.Bootstrap;
-import coconut.vdom.Renderer.hxx;
-import coconut.vdom.*;
+import coconut.ui.Renderer.hxx;
+import coconut.ui.*;
 import tink.domspec.ClassName;
 import haxe.extern.EitherType;
diff --git a/test/website/Main.hx b/test/website/Main.hx
index 9225034..946c660 100644
--- a/test/website/Main.hx
+++ b/test/website/Main.hx
@@ -1,23 +1,31 @@
 package;
 
-import js.Browser.document;
-import js.Browser.window;
-import js.Browser.location;
+#if js
+import js.Browser.*;
+#end
 import bootstrap.*;
 import bootstrap.Container;
 import bootstrap.types.Variant;
 import bootstrap.types.Size;
 import bootstrap.Bootstrap;
-import coconut.vdom.Renderer.hxx;
-import coconut.vdom.View;
-import coconut.ui.Children;
+import coconut.ui.Renderer.hxx;
+import coconut.ui.*;
 import tink.domspec.ClassName;
 
 class Main {
 	static function main() {
-		coconut.ui.Renderer.mount(
-			cast document.body.appendChild(document.createDivElement()), hxx('<Root />')
+		#if sys
+			sys.io.File.saveContent(
+				'bin/example/static.html',
+				sys.io.File.getContent('bin/example/index.html')
+					.split('<script src="example.js"></script>')
+					.join(coconut.html.Renderer.render('<Root />'))
+			);
+		#else
+		Renderer.mount(
+			cast document.body.appendChild(document.createDivElement()), '<Root />'
 		);
+		#end
 	}
 }
 
@@ -46,7 +54,7 @@ class Root extends View {
 			</Col>
 			<Col>
 				<h1 class="display-4 my-5">Coconut.ui 🥥 <small><Badge variant=${Info}>bootstrap components</Badge></small></h1>
-				
+
 				Useful links:
 				<ul>
 					<li><a href="https://github.com/markknol/coconut.bootstrap">coconut.bootstrap on GitHub</a></li>
@@ -604,7 +612,12 @@ class Root extends View {
 	}
 
 	public static function codeExample(attr:{children:String}) {
-		var formattedCode:String = js.Syntax.code("window.formatCode({0})", attr.children);
+		var formattedCode:String =
+			#if js
+				js.Syntax.code("window.formatCode({0})", attr.children);
+			#else
+				attr.children;
+			#end
 		return hxx('<pre class="border rounded p-4 my-1 mb-3"><code>${formattedCode}</code></pre>');
 	}