diff --git a/apps/tests/frame-tests.ts b/apps/tests/frame-tests.ts
index 6cce6dfd3..f0e148e13 100644
--- a/apps/tests/frame-tests.ts
+++ b/apps/tests/frame-tests.ts
@@ -1,27 +1,19 @@
-// <snippet module="ui/frame" title="frame">
-// # Frame
-// To perform navigation, you will need a reference to the topmost frame of the application.
-// ``` JavaScript
+// >> frame-require
 import frameModule = require("ui/frame");
 var topmost = frameModule.topmost();
-// ```
-// </snippet>
+// << frame-require
+
 import labelModule = require("ui/label");
 import pagesModule = require("ui/page");
 
 export var ignore_test_DummyTestForSnippetOnly0 = function () {
-    // <snippet module="ui/frame" title="frame">
-    // ### Navigating to a Module
-    // ``` JavaScript
+    // >> frame-navigating
     topmost.navigate("details-page");
-    // ```
-    // </snippet>
+    // << frame-navigating
 }
 
 export var ignore_test_DummyTestForSnippetOnly1 = function () {
-    // <snippet module="ui/frame" title="frame">
-    // ### Navigating with a Factory Function
-    // ``` JavaScript
+    // >> frame-factory-func
     var factoryFunc = function () {
         var label = new labelModule.Label();
         label.text = "Hello, world!";
@@ -30,29 +22,22 @@ export var ignore_test_DummyTestForSnippetOnly1 = function () {
         return page;
     };
     topmost.navigate(factoryFunc);    
-    // ```
-    // </snippet>
+    // <<frame-factory-func
 }
 
 export var ignore_test_DummyTestForSnippetOnly2 = function () {
-    // <snippet module="ui/frame" title="frame">
-    // ### Navigating with NavigationEntry
-    // ``` JavaScript
+    // >> frame-naventry
     var navigationEntry = {
         moduleName: "details-page",
         context: { info: "something you want to pass to your page" },
         animated: false
     };
     topmost.navigate(navigationEntry);
-    // ```
-    // </snippet>
+    // << frame-naventry
 }
 
 export var ignore_test_DummyTestForSnippetOnly3 = function () {
-    // <snippet module="ui/frame" title="frame">
-    // ### Navigating Back
-    // ``` JavaScript
+    // >> frame-back
     topmost.goBack();
-    // ```
-    // </snippet>
+    // << frame-back
 }
\ No newline at end of file
diff --git a/apps/tests/frame.md b/apps/tests/frame.md
new file mode 100644
index 000000000..fdd3008bd
--- /dev/null
+++ b/apps/tests/frame.md
@@ -0,0 +1,20 @@
+---
+nav-title: "frame How-To"
+title: "How-To"
+description: "Examples for using frame"
+---
+# Frame
+To perform navigation, you will need a reference to the topmost frame of the application.
+<snippet id='frame-require'/>
+
+### Navigating to a Module
+<snippet id='frame-navigating'/>
+
+### Navigating with a Factory Function
+<snippet id='frame-factory-func'/>
+
+### Navigating with NavigationEntry
+<snippet id='frame-naventry'/>
+
+### Navigating Back
+<snippet id='frame-back'/>
diff --git a/apps/tests/ui/activity-indicator/activity-indicator-tests.ts b/apps/tests/ui/activity-indicator/activity-indicator-tests.ts
index ec492c938..012c19989 100644
--- a/apps/tests/ui/activity-indicator/activity-indicator-tests.ts
+++ b/apps/tests/ui/activity-indicator/activity-indicator-tests.ts
@@ -5,28 +5,15 @@ import imageModule = require("ui/image");
 import platform = require("platform");
 import color = require("color");
 
-// <snippet module="ui/activity-indicator" title="activity-indicator">
-// # ActivityIndicator
-// Using the activity indicator requires the ActivityIndicator module.
-// ``` JavaScript
+// >> activity-indicator-require
 import activityIndicatorModule = require("ui/activity-indicator");
-// ```
-// ### Binding the activity indicator busy property to a view-model property.
-//``` XML
-// <Page>
-//   {%raw%}<ActivityIndicator busy="{{ isLoading }}" />{%endraw%}
-// </Page>
-//```
-// </snippet>
+// << activity-indicator-require
 
 var ASYNC = 0.2;
 export function test_default_TNS_values() {
-    // <snippet module="ui/activity-indicator" title="activity-indicator">
-    // ### Creating an activity indicator
-    // ``` JavaScript
+    // >> activity-indicator-create
     var indicator = new activityIndicatorModule.ActivityIndicator();
-    // ```
-    // </snippet>
+    // << activity-indicator-create
 
     TKUnit.assertEqual(indicator.busy, false, "Default indicator.busy");
 }
@@ -76,9 +63,7 @@ if (platform.device.os === platform.platformNames.ios) {
 function binding_busy_to_image() {
     /* tslint:enable:no-unused-variable */
     
-    // <snippet module="ui/activity-indicator" title="activity-indicator">
-    // ### Showing activity indicator while image is loading
-    // ``` JavaScript
+    // >> activity-indicator-loading
     var image = new imageModule.Image();
     var indicator = new activityIndicatorModule.ActivityIndicator();
     indicator.width = 100;
@@ -89,8 +74,7 @@ function binding_busy_to_image() {
         sourceProperty: "isLoading",
         targetProperty: "busy"
     }, image);
-    // ```
-    // </snippet>
+    // << activity-indicator-loading
 }
 
 function getNativeBusy(indicator: activityIndicatorModule.ActivityIndicator): boolean {
diff --git a/apps/tests/ui/activity-indicator/activity-indicator.md b/apps/tests/ui/activity-indicator/activity-indicator.md
index ccfa2053a..80ee31207 100644
--- a/apps/tests/ui/activity-indicator/activity-indicator.md
+++ b/apps/tests/ui/activity-indicator/activity-indicator.md
@@ -5,9 +5,8 @@ description: "Examples for using activity-indicator"
 ---
 # ActivityIndicator
 Using the activity indicator requires the ActivityIndicator module.
-``` JavaScript
-var activityIndicatorModule = require("ui/activity-indicator");
-```
+<snippet id='activity-indicator-require'/>
+
 ### Binding the activity indicator busy property to a view-model property.
 ``` XML
 <Page>
@@ -15,18 +14,7 @@ var activityIndicatorModule = require("ui/activity-indicator");
 </Page>
 ```
 ### Creating an activity indicator
-``` JavaScript
-var indicator = new activityIndicatorModule.ActivityIndicator();
-```
+<snippet id='activity-indicator-create'/>
+
 ### Showing activity indicator while image is loading
-``` JavaScript
-var image = new imageModule.Image();
-var indicator = new activityIndicatorModule.ActivityIndicator();
-indicator.width = 100;
-indicator.height = 100;
-// Bind the busy property of the indicator to the isLoading property of the image
-indicator.bind({
-    sourceProperty: "isLoading",
-    targetProperty: "busy"
-}, image);
-```
+<snippet id='activity-indicator-loading'/>
diff --git a/apps/tests/ui/animation/animation-tests.ts b/apps/tests/ui/animation/animation-tests.ts
index 47e5df0e4..e262cb0ad 100644
--- a/apps/tests/ui/animation/animation-tests.ts
+++ b/apps/tests/ui/animation/animation-tests.ts
@@ -7,13 +7,9 @@ import stackLayoutModule = require("ui/layouts/stack-layout");
 import colorModule = require("color");
 import enums = require("ui/enums");
 
-// <snippet module="ui/animation" title="animation">
-// # Animation
-// Animating view properties requires the "ui/animation" module.
-// ``` JavaScript
+// >> animation-require
 import animation = require("ui/animation");
-// ```
-// </snippet>
+// << animation-require
 
 export var test_AnimatingProperties = function(done) {
     var mainPage: pageModule.Page;
@@ -31,9 +27,7 @@ export var test_AnimatingProperties = function(done) {
     helper.navigate(pageFactory);
     TKUnit.waitUntilReady(() => { return label.isLoaded });
 
-    // <snippet module="ui/animation" title="animation">
-    // # Animating properties
-    // ``` JavaScript
+    // >> animation-properties
     label.animate({
         opacity: 0.75,
         backgroundColor: new colorModule.Color("Red"),
@@ -47,19 +41,18 @@ export var test_AnimatingProperties = function(done) {
     })
         .then(() => {
             ////console.log("Animation finished.");
-            // <hide>
+            // >> (hide)
             assertIOSNativeTransformIsCorrect(label);
             done();
-            // </hide>
+            // << (hide)
         })
         .catch((e) => {
             console.log(e.message);
-            // <hide>
+            // >> (hide)
             done(e);
-            // </hide>
+            // << (hide)
         });
-    // ```
-    // </snippet>
+    // << animation-properties
 }
 
 export var test_CancellingAnimation = function(done) {
@@ -78,20 +71,18 @@ export var test_CancellingAnimation = function(done) {
     helper.navigate(pageFactory);
     TKUnit.waitUntilReady(() => { return label.isLoaded });
 
-    // <snippet module="ui/animation" title="animation">
-    // # Cancelling animation
-    // ``` JavaScript
+    // >> animation-cancel
     var animation1 = label.createAnimation({ translate: { x: 100, y: 100 }, duration: 500 });
     animation1.play()
         .then(() => {
             ////console.log("Animation finished");
-            // <hide>
+            // >> (hide)
             throw new Error("Cancelling Animation - Should not be in the Promise Then()");
-            // </hide>
+            // << (hide)
         })
         .catch((e) => {
             ////console.log("Animation cancelled");
-            // <hide>
+            // >> (hide)
             if (!e) {
                 done(new Error("Cancel path did not have proper error"));
             } else if (e.toString() === "Error: Animation cancelled.") {
@@ -99,11 +90,10 @@ export var test_CancellingAnimation = function(done) {
             } else {
                 done(e);
             }
-            // </hide>
+            // << (hide)
         });
     animation1.cancel();
-    // ```
-    // </snippet>
+    // << animation-cancel
 }
 
 export var test_CancellingAnimate = function(done) {
@@ -122,19 +112,17 @@ export var test_CancellingAnimate = function(done) {
     helper.navigate(pageFactory);
     TKUnit.waitUntilReady(() => { return label.isLoaded });
 
-    // <snippet module="ui/animation" title="animation">
-    // # Cancelling animation
-    // ``` JavaScript
+    // >> animation-cancel2
     var animation1 = label.animate({ translate: { x: 100, y: 100 }, duration: 500 })
         .then(() => {
             ////console.log("Animation finished");
-            // <hide>
+            // >> (hide)
             throw new Error("Cancelling Animate - Should not be in Promise Then()");
-            // </hide>
+            // << (hide)
         })
         .catch((e) => {
             ////console.log("Animation cancelled");
-            // <hide>
+            // >> (hide)
             if (!e) {
                 done(new Error("Cancel path did not have proper error"));
             } else if (e.toString() === "Error: Animation cancelled.") {
@@ -142,11 +130,10 @@ export var test_CancellingAnimate = function(done) {
             } else {
                 done(e);
             }
-            // </hide>
+            // << (hide)
         });
     animation1.cancel();
-    // ```
-    // </snippet>
+    // << animation-cancel2
 }
 
 export var test_ChainingAnimations = function(done) {
@@ -164,9 +151,7 @@ export var test_ChainingAnimations = function(done) {
     helper.navigate(pageFactory);
     TKUnit.waitUntilReady(() => { return label.isLoaded });
 
-    // <snippet module="ui/animation" title="animation">
-    // # Chaining animations
-    // ``` JavaScript
+    // >> animation-chaining
     label.animate({ opacity: 0 })
         .then(() => label.animate({ opacity: 1 }))
         .then(() => label.animate({ translate: { x: 200, y: 200 } }))
@@ -177,19 +162,18 @@ export var test_ChainingAnimations = function(done) {
         .then(() => label.animate({ rotate: 0 }))
         .then(() => {
             ////console.log("Animation finished");
-            // <hide>
+            // >> (hide)
             assertIOSNativeTransformIsCorrect(label);
             done();
-            // </hide>
+            // << (hide)
         })
         .catch((e) => {
             console.log(e.message);
-            // <hide>
+            // >> (hide)
             done(e);
-            // </hide>
+            // << (hide)
         });
-    // ```
-    // </snippet>
+    // << animation-chaining
 }
 
 export var test_ReusingAnimations = function(done) {
@@ -208,9 +192,7 @@ export var test_ReusingAnimations = function(done) {
     helper.navigate(pageFactory);
     TKUnit.waitUntilReady(() => { return label.isLoaded });
 
-    // <snippet module="ui/animation" title="animation">
-    // # Reusing animations
-    // ``` JavaScript
+    // >> animation-reusing
     var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } });
     var animation2 = label.createAnimation({ translate: { x: 0, y: 0 } });
 
@@ -222,19 +204,18 @@ export var test_ReusingAnimations = function(done) {
         .then(() => animation2.play())
         .then(() => {
             ////console.log("Animation finished");
-            // <hide>
+            // >> (hide)
             assertIOSNativeTransformIsCorrect(label);
             done();
-            // </hide>
+            // << (hide)
         })
         .catch((e) => {
             console.log(e.message);
-            // <hide>
+            // >> (hide)
             done(e);
-            // </hide>
+            // << (hide)
         });
-    // ```
-    // </snippet>
+    // << animation-reusing
 }
 
 export var test_AnimatingMultipleViews = function(done) {
@@ -260,9 +241,7 @@ export var test_AnimatingMultipleViews = function(done) {
     helper.navigate(pageFactory);
     TKUnit.waitUntilReady(() => { return label1.isLoaded && label2.isLoaded });
 
-    // <snippet module="ui/animation" title="animation">
-    // # Animating multiple views simultaneously
-    // ``` JavaScript
+    // >> animation-multiple-views
     var animations: Array<animation.AnimationDefinition> = [
         { target: label1, translate: { x: 200, y: 200 }, duration: 1000, delay: 0 },
         { target: label2, translate: { x: 200, y: 200 }, duration: 1000, delay: 333 },
@@ -272,21 +251,20 @@ export var test_AnimatingMultipleViews = function(done) {
     a.play()
         .then(() => {
             ////console.log("Animations finished");
-            // <hide>
+            // >> (hide)
             assertIOSNativeTransformIsCorrect(label1);
             assertIOSNativeTransformIsCorrect(label2);
             assertIOSNativeTransformIsCorrect(label3);
             done();
-            // </hide>
+            // << (hide)
         })
         .catch((e) => {
             console.log(e.message);
-            // <hide>
+            // >> (hide)
             done(e);
-            // </hide>
+            // << (hide)
         });
-    // ```
-    // </snippet>
+    // << animation-multiple-views
 }
 
 export var test_AnimateOpacity = function(done) {
diff --git a/apps/tests/ui/animation/animation.md b/apps/tests/ui/animation/animation.md
new file mode 100644
index 000000000..78d666998
--- /dev/null
+++ b/apps/tests/ui/animation/animation.md
@@ -0,0 +1,23 @@
+---
+nav-title: "animation How-To"
+title: "How-To"
+description: "Examples for using animation"
+---
+# Animation
+Animating view properties requires the "ui/animation" module.
+<snippet id='animation-require'/>
+
+# Animating properties
+<snippet id='animation-properties'/>
+
+# Cancelling animation
+<snippet id='animation-cancel'/>
+
+# Chaining animations
+<snippet id='animation-chaining'/>
+
+# Reusing animations
+<snippet id='animation-reusing'/>
+
+# Animating multiple views simultaneously
+<snippet id='animation-multiple-views'/>
diff --git a/apps/tests/ui/border/border-tests.ts b/apps/tests/ui/border/border-tests.ts
index 2530ab31d..b4660ccf0 100644
--- a/apps/tests/ui/border/border-tests.ts
+++ b/apps/tests/ui/border/border-tests.ts
@@ -1,16 +1,3 @@
-// <snippet module="ui/border" title="Border">
-// # Border
-// Using borders requires the "ui/border" module.
-// ``` JavaScript
-// var borderModule = require("ui/border");
-// ```
-
-// ### Declaring a Border.
-//``` XML
-//  <Page>
-//      <Border borderRadius="10" borderWidth="1" borderColor="#FF0000">
-//          <Button text="OK"/>
-//      </Border>
-//  </Page>
-//```
-// </snippet>
+// >> border-require
+var borderModule = require("ui/border");
+// << border-require
diff --git a/apps/tests/ui/border/border.md b/apps/tests/ui/border/border.md
new file mode 100644
index 000000000..f507ba630
--- /dev/null
+++ b/apps/tests/ui/border/border.md
@@ -0,0 +1,17 @@
+---
+nav-title: "Border How-To"
+title: "How-To"
+description: "Examples for using Border"
+---
+# Border
+Using borders requires the "ui/border" module.
+<snippet id='border-require'/>
+
+### Declaring a Border.
+``` XML
+ <Page>
+     <Border borderRadius="10" borderWidth="2" borderColor="#FF0000">
+         <Button text="OK"/>
+     </Border>
+ </Page>
+```
diff --git a/apps/tests/ui/button/button-tests.ts b/apps/tests/ui/button/button-tests.ts
index 127a9bb4f..b0132ce06 100644
--- a/apps/tests/ui/button/button-tests.ts
+++ b/apps/tests/ui/button/button-tests.ts
@@ -8,28 +8,14 @@ import enums = require("ui/enums");
 import formattedStringModule = require("text/formatted-string");
 import spanModule = require("text/span");
 
-// <snippet module="ui/button" title="button">
-// # Button
-// ### Declaring button module
-// Button module is required to use any button feature.
-// ``` JavaScript
+// >> button-require
 import buttonModule = require("ui/button");
-// ```
+// << button-require
 
-// Other frequently used modules when working with buttons include:
-// ``` JavaScript
+// >> button-require-others
 import bindable = require("ui/core/bindable");
 import observable = require("data/observable");
-// ```
-
-// ### Attaching event handler for the button tap event.
-//``` XML
-// <Page>
-//   <Button tap="buttonTap" />
-// </Page>
-//```
-
-// </snippet> 
+// << button-require-others
 
 export var testSetText = function () {
     helper.buildUIAndRunTest(_createButtonFunc(), _testSetText);
@@ -90,24 +76,18 @@ export var testMemoryLeak = function (done) {
 }
 
 var _createButtonFunc = function (): buttonModule.Button {
-    // <snippet module="ui/button" title="button">
-    // ### Creating a button
-    // ``` JavaScript
+    // >>button-create
     var button = new buttonModule.Button();
-    // ```
-    // </snippet>
-    button.text = "Button";
+    // << button-create
+    button.text = "Button";  
     return button;
 }
 
 var _testSetText = function (views: Array<viewModule.View>) {
     var button = <buttonModule.Button>views[0];
-    // <snippet module="ui/button" title="button">
-    // ### Setting the text of a button
-    // ``` JavaScript
+    // >> button-settext
     button.text = "Hello, world!";
-    // ```
-    // </snippet>
+    // << button-settext
 
     var expectedValue = button.text;
     var actualValue = buttonTestsNative.getNativeText(button);
@@ -119,17 +99,14 @@ var _testOnClick = function (views: Array<viewModule.View>) {
     var button = <buttonModule.Button>views[0];
 
     var actualValue = false;
-    // <snippet module="ui/button" title="button">
-    // ### Responding to the tap event
-    // ``` JavaScript
+    // >> button-tap
     button.on(buttonModule.Button.tapEvent, function (args: observable.EventData) {
         //// Do something
-        // <hide>
+        // >> (hide)
         actualValue = true;
-        // </hide>
+        // << (hide)
     });
-    // ```
-    // </snippet>
+    // << button-tap
 
     buttonTestsNative.performNativeClick(button);
     TKUnit.assert(actualValue === true, "Actual: " + actualValue + "; Expected: " + true);
@@ -138,9 +115,7 @@ var _testOnClick = function (views: Array<viewModule.View>) {
 var _testBindTextDirectlyToModel = function (views: Array<viewModule.View>) {
     var button = <buttonModule.Button>views[0];
 
-    // <snippet module="ui/button" title="button">
-    // ### Binding text property directly to model
-    // ``` JavaScript
+    // >> button-bind
     var model = new observable.Observable();
     model.set("buttonTitle", "OK");
     var options: bindable.BindingOptions = {
@@ -149,16 +124,15 @@ var _testBindTextDirectlyToModel = function (views: Array<viewModule.View>) {
     }
     button.bind(options, model);
     //// button.text is now "OK"
-    // <hide>
+    // >> (hide)
     TKUnit.assert(button.text === "OK", "Actual: " + button.text + "; Expected: " + "OK");
-    // </hide>
+    // << (hide)
     model.set("buttonTitle", "Cancel");
     //// button.text is now "Cancel"
-    // <hide>
+    // >> (hide)
     TKUnit.assert(button.text === "Cancel", "Actual: " + button.text + "; Expected: " + "Cancel");
-    // </hide>
-    // ```
-    // </snippet>
+    // << (hide)
+    // << button-bind
 }
 
 var _testBindTextToBindingContext = function (views: Array<viewModule.View>) {
diff --git a/apps/tests/ui/button/button.md b/apps/tests/ui/button/button.md
new file mode 100644
index 000000000..76f5381ea
--- /dev/null
+++ b/apps/tests/ui/button/button.md
@@ -0,0 +1,30 @@
+---
+nav-title: "button How-To"
+title: "How-To"
+description: "Examples for using button"
+---
+# Button
+### Declaring button module
+Button module is required to use any button feature.
+<snippet id='button-require'/>
+
+Other frequently used modules when working with buttons include:
+<snippet id='button-require-others'/>
+
+### Attaching event handler for the button tap event.
+``` XML
+<Page>
+  <Button tap="buttonTap" />
+</Page>
+```
+### Creating a button
+<snippet id='button-create'/>
+
+### Setting the text of a button
+<snippet id='button-settext'/>
+
+### Responding to the tap event
+<snippet id='button-tap'/>
+
+### Binding text property directly to model
+<snippet id='button-bind'/>
diff --git a/apps/tests/ui/date-picker/date-picker-tests.ts b/apps/tests/ui/date-picker/date-picker-tests.ts
index 9a5849785..bbc07713e 100644
--- a/apps/tests/ui/date-picker/date-picker-tests.ts
+++ b/apps/tests/ui/date-picker/date-picker-tests.ts
@@ -4,13 +4,9 @@ import datePickerTestsNative = require("./date-picker-tests-native");
 import color = require("color");
 import platform = require("platform");
 
-// <snippet module="ui/date-picker" title="DatePicker">
-// # DatePicker
-// Using a DatePicker requires the "ui/date-picker" module.
-// ``` JavaScript
+// >> date-picker-require
 import datePickerModule = require("ui/date-picker");
-// ```
-// </snippet>
+// << date-picker-require
 
 function assertDate(datePicker: datePickerModule.DatePicker, expectedYear: number, expectedMonth: number, expectedDay: number) {
     TKUnit.assertEqual(datePicker.year, expectedYear, "datePicker.year");
@@ -62,16 +58,13 @@ export class DatePickerTest extends testModule.UITest<datePickerModule.DatePicke
     
     public test_DummyForCodeSnippet() {
         let datePicker = new datePickerModule.DatePicker();
-        // <snippet module="ui/date-picker" title="DatePicker">
-        // ## Configuring a DatePicker
-        // ``` JavaScript
+        // >> date-picker-configure
         datePicker.year = 1980;
         datePicker.month = 2;
         datePicker.day = 9;
         datePicker.minDate = new Date(1975, 0, 29);
         datePicker.maxDate = new Date(2045, 4, 12);
-        // ```
-        // </snippet>
+        // << date-picker-configure
     }
     
     public test_set_color() {
diff --git a/apps/tests/ui/date-picker/date-picker.md b/apps/tests/ui/date-picker/date-picker.md
new file mode 100644
index 000000000..4e12c68c9
--- /dev/null
+++ b/apps/tests/ui/date-picker/date-picker.md
@@ -0,0 +1,11 @@
+---
+nav-title: "DatePicker How-To"
+title: "How-To"
+description: "Examples for using DatePicker"
+---
+# DatePicker
+Using a DatePicker requires the "ui/date-picker" module.
+<snippet id='date-picker-require'/>
+
+## Configuring a DatePicker
+<snippet id='date-picker-configure'/>
diff --git a/apps/tests/ui/dialogs/dialog-tests.ts b/apps/tests/ui/dialogs/dialog-tests.ts
index dc6821343..33ef2e522 100644
--- a/apps/tests/ui/dialogs/dialog-tests.ts
+++ b/apps/tests/ui/dialogs/dialog-tests.ts
@@ -1,15 +1,9 @@
-// <snippet module="ui/dialogs" title="dialogs">
-// # Dialogs
-// Displaying dialogs requires the "ui/dialogs" module.
-// ``` JavaScript
+// >> dialog-require
 import dialogs = require("ui/dialogs");
-// ```
-// </snippet>
+// << dialog-require
 
 export function test_DummyTestForSnippetOnly0() {
-    // <snippet module="ui/dialogs" title="dialogs">
-    // ### Action
-    // ``` JavaScript
+    // >> dialog-action
     var options = {
         title: "Race Selection",
         message: "Choose your race",
@@ -19,14 +13,11 @@ export function test_DummyTestForSnippetOnly0() {
     dialogs.action(options).then((result) => { 
         console.log(result);
     });
-    // ```
-    // </snippet>
+    // << dialog-action
 }
 
 export function test_DummyTestForSnippetOnly1() {
-    // <snippet module="ui/dialogs" title="dialogs">
-    // ### Confirm
-    // ``` JavaScript
+    // >> dialog-confirm
     var options = {
         title: "Race Selection",
         message: "Are you sure you want to be an Elf?",
@@ -38,14 +29,11 @@ export function test_DummyTestForSnippetOnly1() {
         //// result can be true/false/undefined
         console.log(result);
     });
-    // ```
-    // </snippet>
+    // << dialog-confirm
 }
 
 export function test_DummyTestForSnippetOnly2() {
-    // <snippet module="ui/dialogs" title="dialogs">
-    // ### Alert
-    // ``` JavaScript
+    // >> dialog-alert
     var options = {
         title: "Race Selection",
         message: "Race Chosen: Elf",
@@ -54,14 +42,11 @@ export function test_DummyTestForSnippetOnly2() {
     dialogs.alert(options).then(() => {
         console.log("Race Chosen!");
     });
-    // ```
-    // </snippet>
+    // << dialog-alert
 }
 
 export function test_DummyTestForSnippetOnly3() {
-    // <snippet module="ui/dialogs" title="dialogs">
-    // ### Login
-    // ``` JavaScript
+    // >> dialog-login
     var options = {
         title: "Login",
         message: "Login",
@@ -72,14 +57,11 @@ export function test_DummyTestForSnippetOnly3() {
         //// true or false.
         console.log(loginResult.result);
     });
-    // ```
-    // </snippet>
+    // << dialog-login
 }
 
 export function test_DummyTestForSnippetOnly4() {
-    // <snippet module="ui/dialogs" title="dialogs">
-    // ### Prompt
-    // ``` JavaScript
+    // >> dialog-prompt
     var options = {
         title: "Name",
         defaultText: "Enter your name",
@@ -88,6 +70,5 @@ export function test_DummyTestForSnippetOnly4() {
     dialogs.prompt(options).then((result: dialogs.PromptResult) => { 
         console.log("Hello, " + result.text);
     });
-    // ```
-    // </snippet>
+    // << dialog-prompt
 }
\ No newline at end of file
diff --git a/apps/tests/ui/dialogs/dialog.md b/apps/tests/ui/dialogs/dialog.md
new file mode 100644
index 000000000..2644f3233
--- /dev/null
+++ b/apps/tests/ui/dialogs/dialog.md
@@ -0,0 +1,23 @@
+---
+nav-title: "dialogs How-To"
+title: "How-To"
+description: "Examples for using dialogs"
+---
+# Dialogs
+Displaying dialogs requires the "ui/dialogs" module.
+<snippet id='dialog-require'/>
+
+### Action
+<snippet id='dialog-action'/>
+
+### Confirm
+<snippet id='dialog-confirm'/>
+
+### Alert
+<snippet id='dialog-alert'/>
+
+### Login
+<snippet id='dialog-login'/>
+
+### Prompt
+<snippet id='dialog-prompt'/>