diff --git a/.gitignore b/.gitignore
index 9ff2e27..4501e29 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,5 @@
 Icon?
 *~
 node_modules/
-docs/
 package-lock.json
 npm-debug.log
diff --git a/docs/craft-widget-calendar-design-1.js b/docs/craft-widget-calendar-design-1.js
new file mode 100644
index 0000000..f13ab0a
--- /dev/null
+++ b/docs/craft-widget-calendar-design-1.js
@@ -0,0 +1,58 @@
+
+var CalendarStyle = {
+	calendar : `
+		* { box-sizing:border-box; margin:0; padding:0; }
+		:host {
+		}
+		.root {
+			box-sizing: border-box;
+			width: 100%;
+			height: 100%;
+			background-color: #fff;
+		}
+		.header { width:350px; margin-top:22px; margin-left:auto; margin-right:auto; }
+		.month { width:350px; margin-top:11px; margin-left:auto; margin-right:auto; }
+		.navi { width:350px; margin-top: 11px; padding-bottom:22px; margin-left:auto; margin-right:auto; display:flex; }
+		.prev { margin-left:15px; cursor:pointer; text-align:right;  }
+		.next { margin-right:15px; cursor:pointer; margin-left:auto; text-align:left; }
+	`,
+	month : `
+		* { box-sizing:border-box; margin:0; padding:0; }
+		:host {
+			width: 350px;
+		}
+		.root {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			width: 350px;
+		}
+	`,
+	day : `
+		* { box-sizing:border-box; margin:0; padding:0; }
+		:host {
+			width: 50px;
+			height: 50px;
+		}
+		.root {
+			width: 50px;
+			text-align: center;
+			line-height: 50px;
+			cursor: pointer;
+		}
+		.root:hover {
+			background-color: yellowgreen;
+		}
+		.weekday0 { color: #f00; }
+		.weekday1 { color: #555; }
+		.weekday2 { color: #555; }
+		.weekday3 { color: #555; }
+		.weekday4 { color: #555; }
+		.weekday5 { color: #555; }
+		.weekday6 { color: #00f; }
+		.prev_month { pointer-events: none; opacity: 0.5; }
+		.this_month { pointer-events: all; }
+		.next_month { pointer-events: none; opacity: 0.5; }
+		.today { background-color: #0f0; }
+	`
+};
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..0c83001
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, viewport-fit=cover"/>
+	
+	<title>CraftKit Playground</title>
+	<style>
+		* { margin:0; padding:0; }
+		html,body {
+			background-color: #fff;
+			background-image: url('/logo.gif');
+			background-position: center center; 
+			background-repeat: no-repeat;
+			background-attachment: fixed; 
+			font-family: "Meiryo"
+		}
+	</style>
+	
+	<script src="https://unpkg.com/@craftkit/craft-uikit/dist/craft-uikit.min.dev.js"></script>
+	<script>
+		window.load_module = function(url){
+			var http = new XMLHttpRequest();
+			http.onload = function(e){
+				let script = document.createElement('script');
+				script.type = 'text/javascript';
+				script.text = this.responseText;
+				script.async = false;
+				document.head.appendChild(script);
+				console.log('loaded: '+url);
+			};
+			http.onerror = function(e){ alert('cannot call api'); };
+			http.ontimeout = function(){ alert('timeout'); };
+			http.open('GET',url);
+			http.send();
+		};
+		window.load_css = function(url){
+			let link = document.createElement('link');
+			link.rel = 'stylesheet';
+			link.href = url;
+			document.head.appendChild(link);
+			console.log('loaded: '+url);
+		};
+		window.onload = function(){
+			console.log(" ");
+			console.log("🛺  Welcome to CraftKit Playground");
+			console.log(" ");
+			console.log("    Check:");
+			console.log("      https://github.com/craftkit/craftkit-playground");
+			console.log(" ");
+			console.log("    Copy and paste tutorial snippet in here");
+			console.log("    Enjoy!");
+			console.log(" ");
+			Craft.Core.Bootstrap.boot({
+				router : Craft.Core.HashRouter,
+				didBootApplication : function(){
+					Craft.Core.Defaults.BASE_DIV_NAME = 'CraftRoot';
+					Craft.Core.Defaults.ALLOW_COMPONENT_SHORTCUT = true;
+				}
+			});
+		};
+	</script>
+</head>
+<body id="CraftRoot">
+</body>
+</html>
diff --git a/docs/logo.gif b/docs/logo.gif
new file mode 100644
index 0000000..6d75374
Binary files /dev/null and b/docs/logo.gif differ
