diff --git a/.npmignore b/.npmignore
index 0899475..f490e88 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,5 +1,5 @@
 /.*/
-/example/
+/demo/
 /test/
 /.*
 /bower.json
diff --git a/bower.json b/bower.json
index af62958..dff8561 100644
--- a/bower.json
+++ b/bower.json
@@ -6,7 +6,7 @@
   "main": "dist/clipboard.js",
   "ignore": [
     "/.*/",
-    "/example/",
+    "/demo/",
     "/test/",
     "/.*",
     "/bower.json",
diff --git a/demo/constructor-node.html b/demo/constructor-node.html
new file mode 100644
index 0000000..f84857a
--- /dev/null
+++ b/demo/constructor-node.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>constructor-node</title>
+</head>
+<body>
+    <!-- 1. Define some markup -->
+    <button id="btn" data-clipboard-text="1">Copy</button>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard by passing a HTML element -->
+    <script>
+    var btn = document.getElementById('btn');
+    var clipboard = new Clipboard(btn);
+
+    clipboard.on('success', function(e) {
+        console.log(e);
+    });
+
+    clipboard.on('error', function(e) {
+        console.log(e);
+    });
+    </script>
+</body>
+</html>
diff --git a/demo/constructor-nodelist.html b/demo/constructor-nodelist.html
new file mode 100644
index 0000000..a784d2a
--- /dev/null
+++ b/demo/constructor-nodelist.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>constructor-nodelist</title>
+</head>
+<body>
+    <!-- 1. Define some markup -->
+    <button data-clipboard-text="1">Copy</button>
+    <button data-clipboard-text="2">Copy</button>
+    <button data-clipboard-text="3">Copy</button>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
+    <script>
+    var btns = document.querySelectorAll('button');
+    var clipboard = new Clipboard(btns);
+
+    clipboard.on('success', function(e) {
+        console.log(e);
+    });
+
+    clipboard.on('error', function(e) {
+        console.log(e);
+    });
+    </script>
+</body>
+</html>
diff --git a/demo/constructor-selector.html b/demo/constructor-selector.html
new file mode 100644
index 0000000..137116d
--- /dev/null
+++ b/demo/constructor-selector.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>constructor-selector</title>
+</head>
+<body>
+    <!-- 1. Define some markup -->
+    <button class="btn" data-clipboard-text="1">Copy</button>
+    <button class="btn" data-clipboard-text="2">Copy</button>
+    <button class="btn" data-clipboard-text="3">Copy</button>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard by passing a string selector -->
+    <script>
+    var clipboard = new Clipboard('.btn');
+
+    clipboard.on('success', function(e) {
+        console.log(e);
+    });
+
+    clipboard.on('error', function(e) {
+        console.log(e);
+    });
+    </script>
+</body>
+</html>
diff --git a/demo/function-target.html b/demo/function-target.html
new file mode 100644
index 0000000..ee85c55
--- /dev/null
+++ b/demo/function-target.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>function-target</title>
+</head>
+<body>
+    <!-- 1. Define some markup -->
+    <button class="btn">Copy</button>
+    <div>hello</div>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard -->
+    <script>
+    var clipboard = new Clipboard('.btn', {
+        target: function() {
+            return document.querySelector('div');
+        }
+    });
+
+    clipboard.on('success', function(e) {
+        console.log(e);
+    });
+
+    clipboard.on('error', function(e) {
+        console.log(e);
+    });
+    </script>
+</body>
+</html>
diff --git a/demo/function-text.html b/demo/function-text.html
new file mode 100644
index 0000000..55fefe5
--- /dev/null
+++ b/demo/function-text.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>function-text</title>
+</head>
+<body>
+    <!-- 1. Define some markup -->
+    <button class="btn">Copy</button>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard -->
+    <script>
+    var clipboard = new Clipboard('.btn', {
+        text: function() {
+            return 'to be or not to be';
+        }
+    });
+
+    clipboard.on('success', function(e) {
+        console.log(e);
+    });
+
+    clipboard.on('error', function(e) {
+        console.log(e);
+    });
+    </script>
+</body>
+</html>
diff --git a/demo/target-div.html b/demo/target-div.html
new file mode 100644
index 0000000..1e4af09
--- /dev/null
+++ b/demo/target-div.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>target-div</title>
+</head>
+<body>
+    <!-- 1. Define some markup -->
+    <div>hello</div>
+    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard -->
+    <script>
+    var clipboard = new Clipboard('.btn');
+
+    clipboard.on('success', function(e) {
+        console.log(e);
+    });
+
+    clipboard.on('error', function(e) {
+        console.log(e);
+    });
+    </script>
+</body>
+</html>
diff --git a/demo/target-input.html b/demo/target-input.html
new file mode 100644
index 0000000..b24e8c5
--- /dev/null
+++ b/demo/target-input.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>target-input</title>
+</head>
+<body>
+    <!-- 1. Define some markup -->
+    <input id="foo" type="text" value="hello">
+    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard -->
+    <script>
+    var clipboard = new Clipboard('.btn');
+
+    clipboard.on('success', function(e) {
+        console.log(e);
+    });
+
+    clipboard.on('error', function(e) {
+        console.log(e);
+    });
+    </script>
+</body>
+</html>
diff --git a/demo/target-textarea.html b/demo/target-textarea.html
new file mode 100644
index 0000000..d8394f5
--- /dev/null
+++ b/demo/target-textarea.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>target-textarea</title>
+</head>
+<body>
+    <!-- 1. Define some markup -->
+    <textarea id="bar">hello</textarea>
+    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard -->
+    <script>
+    var clipboard = new Clipboard('.btn');
+
+    clipboard.on('success', function(e) {
+        console.log(e);
+    });
+
+    clipboard.on('error', function(e) {
+        console.log(e);
+    });
+    </script>
+</body>
+</html>
