diff --git a/make-example.js b/make-example.js
index cf3916d7..0c0d199f 100644
--- a/make-example.js
+++ b/make-example.js
@@ -28,7 +28,8 @@ var siteConfig = {
             //  we get an error without this, here, though
             "steal-stache": "^4.0.1",
             "steal-conditional": "^0.3.6",
-            "bit-docs-html-codepen-link": "^1.0.0"
+            "bit-docs-html-codepen-link": "^1.0.0",
+            "bit-docs-html-toc": "^1.1.1"
         },
         staticDist: [
             path.join(__dirname, "dist", "static")
diff --git a/static/canjs.js b/static/canjs.js
index f251faee..881fbded 100644
--- a/static/canjs.js
+++ b/static/canjs.js
@@ -171,6 +171,18 @@ function init() {
 		sidebarViewModel.selectedPageName = window.docObject.name;
 	}
 
+	// Set up the client-side TOC
+	var tocContainer = document.querySelector("#scroll-toc");
+	var oldToc = document.querySelector("bit-toc");
+	if (oldToc) {
+		tocContainer.removeChild(oldToc);
+	}
+	var newToc = document.createElement("bit-toc");
+	newToc.depth = window.docObject.outline;
+	newToc.headingContainerSelector = "#right > article";
+	newToc.scrollSelector = "#scroll-toc";
+	tocContainer.appendChild(newToc);
+
 	if (!surveyAdControl) {
 		// Set up the survey ad control
 		surveyAdControl = new SurveyAdControl("survey-ad");
diff --git a/templates/content.mustache b/templates/content.mustache
index 4da89f43..76960816 100644
--- a/templates/content.mustache
+++ b/templates/content.mustache
@@ -22,5 +22,7 @@
       {{/with}}
 
   </div>
+  <div class="column" id="scroll-toc">
+  </div>
 </div>
 {{> survey-ad.mustache}}