diff --git a/examples/index.html b/examples/index.html
index 112565d..0acf5c0 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -11,19 +11,58 @@
 		<title>Document</title>
 	</head>
 	<body>
-		<div data-ctra="SimpleButton">
-			<button type="button" data-ctra-on="click:increase:counter">
-				This is a simple Counter:
-				<span data-ctra-var="counter:int:0:10">0</span>
-			</button>
+		<div data-ctra>
+			<h1>
+				the value is
+				<span
+					data-ctra-var="counter:int:0:0-10"
+					data-ctra-on="increase:increase:amount"
+					>0</span
+				>
+			</h1>
+			<div>
+				<button type="button" data-ctra-on="click:increase:counter:1">
+					increase
+				</button>
+				<button
+					type="button"
+					data-ctra-on="click:increase:counter:$amount"
+				>
+					increase by <span data-ctra-var="amount:int:1:1-">2</span>
+				</button>
+			</div>
+			<div>
+				<button type="button" data-ctra-on="click:decrease:counter:1">
+					decrease
+				</button>
+				<button
+					type="button"
+					data-ctra-on="click:decrease:counter:$amount"
+				>
+					decrease by <span data-ctra-var="amount:int:1:1-">2</span>
+				</button>
+			</div>
+			<div>
+				<button type="button" data-ctra-on="click:multiply:counter:3">
+					multiply
+				</button>
+				<button
+					type="button"
+					data-ctra-on="click:divide:counter:$amount"
+				>
+					divide by <span data-ctra-var="amount:int:1:1-">2</span>
+				</button>
+			</div>
 		</div>
 
 		<div data-ctra="List" id="cards">
-			<div data-ctra="Card">
-				<h1 data-ctra-var="title">Title</h1>
-				<p data-ctra-var="description">Description</p>
-			</div>
-			<button type="button" data-ctra-on="click/duplicate/prev/#cards">
+			<template id="card-tpl">
+				<div data-ctra="Card">
+					<h1 data-ctra-var="title">Title</h1>
+					<p data-ctra-var="description">Description</p>
+				</div>
+			</template>
+			<button type="button" data-ctra-on="click:duplicate:prev:#cards">
 				Add Card
 			</button>
 		</div>
