diff --git a/browser/defaults.js b/browser/defaults.js
index 6a876f3..9818dc6 100644
--- a/browser/defaults.js
+++ b/browser/defaults.js
@@ -50,6 +50,12 @@
 
 function initData(disp, cb) {
   cb = util.logFn('initData', cb);
+  if (util.DEMO) {
+    process.nextTick(function() {
+      return cb();
+    });
+    return;
+  }
   var timestamp = Date.now();
   async.each(data, function(list, cb) {
     disp.addList({name: list.name}, function(err, listId) {
diff --git a/browser/dom_log.js b/browser/dom_log.js
index e7beb8b..51bdc60 100644
--- a/browser/dom_log.js
+++ b/browser/dom_log.js
@@ -36,7 +36,7 @@
     logEl.classList.add('visible');
   };
 
-  Mousetrap.bind(['ctrl+l', 'meta+l'], function() {
+  Mousetrap.bind(['ctrl+shift+l', 'meta+shift+l'], function() {
     logEl.classList.toggle('visible');
   });
 };
diff --git a/browser/index.js b/browser/index.js
index f916a9e..55a8852 100644
--- a/browser/index.js
+++ b/browser/index.js
@@ -84,7 +84,7 @@
   throw err;
 }
 
-// HACKETY HACK
+// HACKETY HACK for demo.
 function emailToBlessing(email) {
   return 'dev.v.io/u/' + email;
 }
@@ -291,10 +291,10 @@
   render: function() {
     var that = this;
     var children = [];
-    // TODO(sadovsky): If there are no lists (and thus no todos), we end up
-    // rendering "Loading..." here, which is wrong.
-    if (!this.props.listId || !this.props.todos) {
-      children.push(h('div.loading', {key: 'loading'}, 'Loading...'));
+    if (!this.props.listId) {
+      children.push(h('div.msg', {key: 'msg'}, 'No list selected.'));
+    } else if (!this.props.todos) {
+      children.push(h('div.msg', {key: 'msg'}, 'Loading...'));
     } else {
       var tagFilter = this.props.tagFilter, items = [];
       _.each(this.props.todos, function(todo) {
@@ -372,7 +372,7 @@
         }
       }, list.name)));
     }
-    return h('div.list' + (list.selected ? '.selected' : ''), {
+    return h('div.list' + (that.props.selected ? '.selected' : ''), {
       onClick: function() {
         that.props.setListId(list._id);
       },
@@ -396,11 +396,16 @@
   },
   render: function() {
     var that = this, list = this.props.list, shared = Boolean(list.sg);
-    var shareUrl;
+    var hShare;
     if (shared) {
-      var encodedSgName = util.strToHex(list.sg.name);
-      var loc = window.location;
-      shareUrl = loc.origin + '/share/' + encodedSgName + loc.search;
+      if (util.DEMO) {
+        hShare = h('span', list.sg.name);
+      } else {
+        var loc = window.location;
+        var encodedSgName = util.strToHex(list.sg.name);
+        var shareUrl = '/share/' + encodedSgName + loc.search;
+        hShare = h('a', {href: shareUrl}, shareUrl);
+      }
     }
     return h('div#status-pane', {
       onClick: function(e) {
@@ -447,8 +452,8 @@
         }).join(', '))
       ]),
       !shared ? null : h('div.url', {key: 'url'}, [
-        h('div.subtitle', {key: 'subtitle'}, 'URL to share with invitees'),
-        h('div.value', {key: 'value'}, h('a', {href: shareUrl}, shareUrl))
+        h('div.subtitle', {key: 'subtitle'}, 'Thing to share with invitees'),
+        h('div.value', {key: 'value'}, hShare)
       ]),
       h('div.close', {
         key: 'close',
@@ -466,21 +471,23 @@
     var that = this;
     var children = [h('div.lists-title', {key: 'title'}, 'Todo Lists')];
     if (!this.props.lists) {
-      children.push(h('div.loading', {key: 'loading'}, 'Loading...'));
+      children.push(h('div.msg', {key: 'msg'}, 'Loading...'));
     } else {
-      var lists = [];
-      _.each(this.props.lists, function(list) {
-        list.selected = that.props.listId === list._id;
-        lists.push(List({
+      children.push(h('div', {
+        key: 'lists'
+      }, _.map(this.props.lists, function(list) {
+        return List({
           key: list._id,
           list: list,
+          selected: that.props.listId === list._id,
           useSyncbase: that.props.useSyncbase,
           setListId: that.props.setListId,
           openStatusDialog: that.props.openStatusDialog
-        }));
-      });
-      children.push(h('div', {key: 'lists'}, lists));
-      children.push(h('div.new-list', {key: 'new-list'}, h('input', _.assign({
+        });
+      })));
+      children.push(h('div.input-row', {
+        key: 'new-list'
+      }, h('input', _.assign({
         type: 'text',
         placeholder: 'New list'
       }, okCancelEvents({
@@ -492,6 +499,22 @@
           e.target.value = '';
         }
       })))));
+      if (util.DEMO && that.props.useSyncbase) {
+        children.push(h('div.input-row', {
+          key: 'join-list'
+        }, h('input', _.assign({
+          type: 'text',
+          placeholder: 'Join list'
+        }, okCancelEvents({
+          ok: function(value, e) {
+            that.props.joinSyncGroup(value, alertOnError);
+            e.target.value = '';
+          }
+        })))));
+      }
+    }
+    if (that.props.useSyncbase) {
+      children.push(h('div.user-id', {'data-text': userEmail}, userEmail));
     }
     return h('div#lists-pane', children);
   }
@@ -590,6 +613,24 @@
       }, cb);
     });
   },
+  // Joins the specified syncgroup and displays the associated list.
+  joinSyncGroup_: function(sgName, cb) {
+    var that = this;
+    console.assert(this.props.dispType === DISP_TYPE_SYNCBASE);
+    disp.joinSyncGroup(sgName, function(err) {
+      // Note, joinSyncGroup is a noop (no error) if the caller is already a
+      // member, which is the desired behavior here.
+      if (err) return cb(err);
+      var listId = disp.sgNameToListId(sgName);
+      // TODO(sadovsky): Wait for all items to get synced before attempting to
+      // read them?
+      that.updateTodos_(listId, function(err) {
+        if (err) return cb(err);
+        // Note, componentDidUpdate() will update the url.
+        that.setState({listId: listId}, cb);
+      });
+    });
+  },
   componentWillMount: function() {
     var that = this, props = this.props;
     if (props.benchmark) {
@@ -602,22 +643,9 @@
     initDispatcher(props.dispType, props.syncbaseName, function(err) {
       alertOnError(err);
       that.setState({dispInitialized: true}, function() {
-        if (!props.joinSgName) return;
-        // TODO(sadovsky): Show "please wait..." modal?
-        console.assert(props.dispType === DISP_TYPE_SYNCBASE);
-        disp.joinSyncGroup(props.joinSgName, function(err) {
-          // Note, joinSyncGroup is a noop (no error) if the caller is already a
-          // member, which is the desired behavior here.
-          alertOnError(err);
-          var listId = disp.sgNameToListId(props.joinSgName);
-          // TODO(sadovsky): Wait for all items to get synced before attempting
-          // to read them?
-          that.updateTodos_(listId, function(err) {
-            alertOnError(err);
-            // Note, componentDidUpdate() will update the url.
-            that.setState({listId: listId});
-          });
-        });
+        if (props.joinSgName) {
+          that.joinSyncGroup_(props.joinSgName, alertOnError);
+        }
       });
     });
   },
@@ -719,6 +747,9 @@
           // will be merged with ours.
           that.setListId_(listId);
           that.setState({showStatusDialog: true});
+        },
+        joinSyncGroup: function(sgName, cb) {
+          that.joinSyncGroup_(sgName, cb);
         }
       }),
       h('div#tags-and-todos-pane', {key: 'tags-and-todos-pane'}, [
@@ -751,13 +782,14 @@
 ////////////////////////////////////////
 // Initialization
 
-// Start our DOM log module. Developers can press Ctrl+L (or Meta+L) to toggle
+// DOM log module. Developers can press Ctrl+Shift+L (or Meta+Shift+L) to toggle
 // visibility of the log.
 domLog.init();
 
 function render(props) {
+  var defaultDispType = util.DEMO ? DISP_TYPE_SYNCBASE : DISP_TYPE_COLLECTION;
   props = _.assign({
-    dispType: u.query.d || DISP_TYPE_COLLECTION,
+    dispType: u.query.d || defaultDispType,
     syncbaseName: syncbaseName,
     benchmark: Boolean(u.query.bm)
   }, props);
diff --git a/browser/util.js b/browser/util.js
index 6fab1e4..7dc9060 100644
--- a/browser/util.js
+++ b/browser/util.js
@@ -6,6 +6,12 @@
 var React = require('react');
 var vtrace = require('vanadium').vtrace;
 
+// If true, run in "demo mode":
+// - Start from a blank slate (no predefined lists)
+// - Default to syncbase dispatcher
+// - Include "join list" input box, share list codes instead of urls
+exports.DEMO = true;
+
 exports.h = function(selector, props, children) {
   if (_.isPlainObject(props)) {
     console.assert(!props.id && !props.className);
diff --git a/stylesheets/constants.less b/stylesheets/constants.less
index 8f36820..8c170fd 100644
--- a/stylesheets/constants.less
+++ b/stylesheets/constants.less
@@ -1,4 +1,6 @@
 /* https://www.google.com/design/spec/style/color.html */
+@color-green-100: #c8e6c9;
 @color-green-700: #388e3c;
+@color-red-100: #ffcdd2;
 @color-red-500: #f44336;
 @color-red-700: #d32f2f;
diff --git a/stylesheets/index.less b/stylesheets/index.less
index 7bf81b5..5d00d6a 100644
--- a/stylesheets/index.less
+++ b/stylesheets/index.less
@@ -86,6 +86,7 @@
 }
 
 #todos-pane, #lists-pane, #tags-pane {
+  position: relative;
   overflow: auto;
 }
 
@@ -101,11 +102,11 @@
   align-items: center;
 }
 
-.loading {
+#page-pane .msg {
   padding: 4px 8px;
 }
 
-.tag {
+#page-pane .tag {
   display: inline-block;
   margin-left: 8px;
   padding: 4px 8px;
@@ -131,14 +132,14 @@
     text-align: center;
   }
 
-  .list, .new-list {
+  .list, .input-row {
     .vcenter;
     padding: 0 12px;
     width: 100%;
     height: 40px;
   }
 
-  .list{
+  .list {
     &.selected {
       background-color: #9be;
       font-weight: bold;
@@ -170,10 +171,27 @@
     }
   }
 
-  .new-list input {
+  .input-row input {
     margin-top: 8px;
     width: 100%;
   }
+
+  .user-id {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 8px;
+    word-break: break-word;
+
+    /* HACKETY HACK for demo. */
+    &[data-text*=hpucha] {
+      background-color: @color-green-100;
+    }
+    &[data-text*=sadovsky] {
+      background-color: @color-red-100;
+    }
+  }
 }
 
 /* Status pane (currently, within #lists-pane) ********************************/