diff --git a/client/.gitignore b/client/.gitignore
index c8ba65d..84f2391 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -1,3 +1,4 @@
 bower_components
 dist
 index.html
+props.html
diff --git a/client/html/props.html b/client/html/props.html
new file mode 100644
index 0000000..107012f
--- /dev/null
+++ b/client/html/props.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Reactive Search Properties</title>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8">
+        <!-- inject:css -->
+        <!-- endinject -->
+    </head>
+    <body>
+        <div class="container">
+            <!-- busy spinner -->
+            <div class="page-header">
+                <h1><img id="spinner" alt="loading" class="pull-right" src="images/spinner.gif" style="display: none;" width="32" height="32">Reactive Search</h1>
+            </div>
+
+            <div class="row">
+                <!-- visualizer -->
+                <!-- <div class="col-md-7"> -->
+                <!--     <div class="panel panel-default"> -->
+                <!--         <div class="panel-heading"> -->
+                <!--             <big>Visualizer</big> -->
+                <!--         </div> -->
+                <!--         <div class="panel-body"> -->
+                <!--             <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"></svg> -->
+                <!--         </div> -->
+                <!--     </div> -->
+                <!-- </div> -->
+
+                <!-- query -->
+                <!-- <div class="col-md-5"> -->
+                <!--     <div class="panel panel-default"> -->
+                <!--         <div class="panel-heading"> -->
+                <!--             <big>Query</big> -->
+                <!--         </div> -->
+                <!--         <div class="panel-body"> -->
+                <!--             <div class="form-group"> -->
+                <!--                 <label for="walkingDist">Walking distance (km)</label> -->
+                <!--                 <input class="form-control" type="number" step="0.1" min="0.1" value="1.0" id="walkingDist"> -->
+                <!--             </div> -->
+                <!--             <div class="form-group"> -->
+                <!--                 <label for="minScore">Minimum score</label> -->
+                <!--                 <input class="form-control" type="number" step="0.01" value="0.25" id="minScore"> -->
+                <!--             </div> -->
+                <!--             <div class="form-group"> -->
+                <!--                 <label for="hintSteps">Hint steps</label> -->
+                <!--                 <input class="form-control" type="number" value="20" min="1" id="hintSteps"> -->
+                <!--             </div> -->
+                <!--             <div class="form-group"> -->
+                <!--                 <label for="maxResults">Max results</label> -->
+                <!--                 <input class="form-control" type="number" value="100" id="maxResults"> -->
+                <!--             </div> -->
+                <!--             <div class="checkbox"> -->
+                <!--                 <label><input type="checkbox" id="useLocalScale" checked="checked">Use local scale</label> -->
+                <!--             </div> -->
+                <!--             <div class="checkbox"> -->
+                <!--                 <label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label> -->
+                <!--             </div> -->
+                <!--         </div> -->
+                <!--     </div> -->
+                <!-- </div> -->
+            </div>
+
+            <!-- result listing -->
+            <!-- <div class="panel panel-default" style="display: none;" id="resultPanel"> -->
+            <!--     <div class="panel-heading"> -->
+            <!--         <big>Results (<span id="resultCount"></span>)</big> -->
+            <!--     </div> -->
+            <!--     <div class="panel-body"> -->
+            <!--         <script id="template" type="text/x-handlers-template"> -->
+            <!--             {{#if results}} -->
+            <!--             <table class="table table-striped table-condensed"> -->
+            <!--             <thead> -->
+            <!--                 <tr> -->
+            <!--                     <th>Id</th> -->
+            <!--                     <th>Name</th> -->
+            <!--                     <th>Distance to user</th> -->
+            <!--                     <th>Closest station</th> -->
+            <!--                     <th>Distance to station</th> -->
+            <!--                     <th>Score</th> -->
+            <!--                 </tr> -->
+            <!--             </thead> -->
+            <!--             {{#each results}} -->
+            <!--                 <tr> -->
+            <!--                     <td>{{id}}</td> -->
+            <!--                     <td><a href="{{url}}">{{name}}</a></td> -->
+            <!--                     <th>{{distanceToUser}} km</th> -->
+            <!--                     <th>{{closestStn}}</th> -->
+            <!--                     <th>{{distanceToStn}} km</th> -->
+            <!--                     <td>{{score}}</td> -->
+            <!--                 </tr> -->
+            <!--             {{/each}} -->
+            <!--             </table> -->
+            <!--             {{/if}} -->
+            <!--         </script> -->
+            <!--         <div id="results"></div> -->
+            <!--     </div> -->
+            <!-- </div> -->
+
+        </div>
+        <!-- inject:js -->
+        <!-- endinject -->
+    </body>
+</html>
