diff --git a/dev/demo/tagger.html b/dev/demo/tagger.html
new file mode 100644
index 0000000..ee4e8c8
--- /dev/null
+++ b/dev/demo/tagger.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Tagger demo</title>
+    <meta charset="utf-8" />
+    <script data-main="taggerdemo.js" src="../js/lib/require.js" async="async"></script>
+    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+    <style type="text/css" rel="stylesheet">
+.info {
+  background-color: #ddd;
+  color: black;
+  padding: 1em;
+  font-family: mono;
+}
+body {
+  margin: 0;
+  background-color: #ddd;
+}
+span.close::after {
+  content: 'x'
+}
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="tagger" id="tagger"></div>
+    </main>
+  </body>
+</html>
+
diff --git a/dev/demo/taggerdemo.js b/dev/demo/taggerdemo.js
new file mode 100644
index 0000000..f0da311
--- /dev/null
+++ b/dev/demo/taggerdemo.js
@@ -0,0 +1,17 @@
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
+});
+
+var gTagger;
+
+require(['tagger', 'lib/domReady'], function (tagger, domReady) {
+  domReady(function(){
+    console.log('Hey');
+    var t = document.getElementById('tagger');
+    gTagger = tagger.create(t);
+  });
+});
+
diff --git a/dev/js/src/tagger.js b/dev/js/src/tagger.js
new file mode 100644
index 0000000..dc7be4d
--- /dev/null
+++ b/dev/js/src/tagger.js
@@ -0,0 +1,40 @@
+define([], function () {
+
+  // "use strict";
+
+  return {
+    create : function (elem) {
+      var obj = Object.create(this);
+      obj._elem = elem;
+      elem.appendChild(
+	document.createElement('div')
+      );
+      var newCat = elem.appendChild(
+	document.createElement('input')
+      );
+
+      newCat.setAttribute('type', 'text');
+
+      newCat.addEventListener('keypress', function (e) {
+	var key = e.keyCode || e.which;
+	if (key === 13) {
+	  obj.addTag(this.value);
+	  this.value = '';
+	};
+      });
+
+      obj._cat = [];
+    },
+    addTag : function (name) {
+      this._cat.push(name);
+      var cat = document.createElement('span');
+      cat.appendChild(
+	document.createTextNode(name)
+      );
+      cat.appendChild(
+	document.createElement('span')
+      ).setAttribute('class','close');
+      this._elem.firstChild.appendChild(cat);
+    }
+  };
+});
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 2bd308d..8702e9d 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -8,6 +8,7 @@
 @import "sidebar";    // Navigation on the left side
 @import "tutorial";   // Embedded and non-embedded tutorial
 @import "koralquery"; // KoralQuery
+@import "tagger";     // Tagger
 @import "alertify";
 
 div.intro {
diff --git a/dev/scss/main/tagger.scss b/dev/scss/main/tagger.scss
new file mode 100644
index 0000000..f794f0e
--- /dev/null
+++ b/dev/scss/main/tagger.scss
@@ -0,0 +1,55 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 1px;
+
+.tagger {
+  display: table;
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 100%;
+
+  // The tag list
+  > div  {
+    display: table-cell;
+    font-size: inherit;
+    white-space: nowrap;
+    width: 0;
+
+    // The tag
+    > span {
+      display: inline-block;
+      white-space: nowrap;
+      background-color: $dark-orange;
+      padding: 0 4px;
+      color: rgba(0,0,0,0.3);
+      margin-right: 2px;
+      box-shadow: $choose-box-shadow;
+      border: $choose-border;
+      border-radius: $standard-border-radius;
+
+      > span {
+	cursor: pointer;
+	&::after {
+	  font-size: 70%;
+	  vertical-align: top;
+	  margin-left: 2px;
+	  color: rgba(0,0,0,0.2);
+	  font-family: 'FontAwesome';
+	  content: $fa-close;
+	}
+      }
+    }
+  }
+
+  // The tag input field
+  input[type=text] {
+    display: table-cell;
+    width: 100%;
+    border: none;
+    background-color: $light-grey;
+    font-size: inherit;
+  }
+}
+
+