diff --git a/apps/tests/ui/list-picker/list-picker-tests.ts b/apps/tests/ui/list-picker/list-picker-tests.ts
index 4795ea7b3..2bf605312 100644
--- a/apps/tests/ui/list-picker/list-picker-tests.ts
+++ b/apps/tests/ui/list-picker/list-picker-tests.ts
@@ -4,21 +4,14 @@ import viewModule = require("ui/core/view");
 import listPickerTestsNative = require("./list-picker-tests-native");
 import application = require("application");
 
-// <snippet module="ui/list-picker" title="ListPicker">
-// # ListPicker
-// Using a ListPicker requires the "ui/list-picker" module.
-// ``` JavaScript
+// >> article-require-module
 import listPickerModule = require("ui/list-picker");
-// ```
-// </snippet>
+// << article-require-module
 
 function _createListPicker(): listPickerModule.ListPicker {
-    // <snippet module="ui/list-picker" title="ListPicker">
-    // ## Creating a ListPicker
-    // ``` JavaScript
+    // >> article-create-listpicker
     var listPicker = new listPickerModule.ListPicker();
-    // ```
-    // </snippet>
+    // << article-create-listpicker
     listPicker.id = "ListPicker";
     return listPicker;
 }
@@ -72,12 +65,9 @@ export var testWhenSettingItemsToEmptyArrayZeroNativeItemsAreCreated = function
 export var testSelectedIndexBecomesZeroWhenItemsBoundToNonEmptyArray = function () {
     helper.buildUIAndRunTest(_createListPicker(), function (views: Array<viewModule.View>) {
         var listPicker = <listPickerModule.ListPicker>views[0];
-        // <snippet module="ui/list-picker" title="listPicker">
-        // ## Binding listPicker.items
-        // ``` JavaScript
+        // >> article-binding-listpickeritems
         listPicker.items = [1, 2, 3];
-        // ```
-        // </snippet>
+        // << article-binding-listpickeritems
         var expectedValue = 0;
         var actualValue = listPicker.selectedIndex;
         TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
@@ -88,12 +78,9 @@ export var testSelectedIndexBecomesUndefinedWhenItemsBoundToEmptyArray = functio
     helper.buildUIAndRunTest(_createListPicker(), function (views: Array<viewModule.View>) {
         var listPicker = <listPickerModule.ListPicker>views[0];
         listPicker.items = _createItems(10);
-        // <snippet module="ui/list-picker" title="listPicker">
-        // ## Selecting an item programmatically
-        // ``` JavaScript
+        // >> article-selecting-item
         listPicker.selectedIndex = 9;
-        // ```
-        // </snippet>
+        // << article-selecting-item
         listPicker.items = [];
         var expectedValue = undefined;
         var actualValue = listPicker.selectedIndex;
diff --git a/apps/tests/ui/list-picker/list-picker.md b/apps/tests/ui/list-picker/list-picker.md
new file mode 100644
index 000000000..92a4ee1ad
--- /dev/null
+++ b/apps/tests/ui/list-picker/list-picker.md
@@ -0,0 +1,14 @@
+---
+nav-title: "ListPicker How-To"
+title: "How-To"
+description: "Examples for using ListPicker"
+---
+# ListPicker
+Using a ListPicker requires the "ui/list-picker" module.
+<snippet id='article-require-module'/>
+## Creating a ListPicker
+<snippet id='article-create-listpicker'/>
+## Binding listPicker.items
+<snippet id='article-binding-listpickeritems'/>
+## Selecting an item programmatically
+<snippet id='article-selecting-item'/>
diff --git a/apps/tests/ui/list-view/list-view-tests.ts b/apps/tests/ui/list-view/list-view-tests.ts
index 7e09becbc..08ddc1623 100644
--- a/apps/tests/ui/list-view/list-view-tests.ts
+++ b/apps/tests/ui/list-view/list-view-tests.ts
@@ -7,76 +7,34 @@ import platform = require("platform");
 import utils = require("utils/utils");
 import { Label } from "ui/label";
 
-// <snippet module="ui/list-view" title="list-view">
-// # ListView
-// Using a ListView requires the ListView module.
-// ``` JavaScript
+// >> article-require-module
 import listViewModule = require("ui/list-view");
-// ```
-// Other modules which will be used in the code samples in this article:
-// ``` JavaScript
+// << article-require-module
+
+// >> article-require-modules
 import observableArray = require("data/observable-array");
 import labelModule = require("ui/label");
-// ```
+// << article-require-modules
 
-// ### Binding the ListView items property to collection in the view-model.
-//``` XML
-// <Page>
-//   {%raw%}<ListView items="{{ myItems }}" />{%endraw%}
-// </Page>
-//```
 
-// ### Attaching event handler for the ListView itemTap event.
-//``` XML
-// <Page>
-//   {%raw%}<ListView items="{{ myItems }}" itemTap="listViewItemTap" />{%endraw%}
-// </Page>
-//```
-//``` JavaScript
-// function listViewItemTap(args) {
-//   var itemIndex = args.index;
-// }
-// exports.listViewItemTap = listViewItemTap;
-//```
+// >> article-item-tap
+function listViewItemTap(args) {
+  var itemIndex = args.index;
+}
+exports.listViewItemTap = listViewItemTap;
+// << article-item-tap
 
-// ### Attaching event handler for the ListView loadMoreItems event.
-//``` XML
-// <Page>
-//  {%raw%}<ListView items="{{ myItems }}" loadMoreItems="listViewLoadMoreItems" />{%endraw%}
-// </Page>
-//```
-//``` JavaScript
-// function listViewLoadMoreItems(args) {
-//   // Expand your collection bound to the ListView with more items here!
-// }
-// exports.listViewLoadMoreItems = listViewLoadMoreItems;
-//```
+// >> article-load-items
+function listViewLoadMoreItems(args) {
+  // Expand your collection bound to the ListView with more items here!
+}
+// << article-load-items
 
-// ### Define the ListView itemTemplate property.
-//``` XML
-// <Page>
-//  {%raw%}<ListView items="{{ myItems }}">
-//     <ListView.itemTemplate>
-//        <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
-//     </ListView.itemTemplate>
-//  </ListView>{%endraw%}
-// </Page>
-//```
-
-// ### Define the ListView separatorColor property.
-//``` XML
-// <Page loaded="loaded">
-//  {%raw%}<ListView items="{{ items }}" separatorColor="red" />{%endraw%}
-// </Page>
-//```
-//``` JavaScript
 // function loaded(args) {
 //   args.object.bindingContext = { items: [1,2,3,4,5] };
 // }
 // exports.loaded = loaded;
-//```
 
-// </snippet>
 
 var ASYNC = 0.2;
 var FEW_ITEMS = [0, 1, 2];
@@ -92,12 +50,9 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
     }
 
     public test_default_TNS_values() {
-        // <snippet module="ui/list-view" title="list-view">
-        // ### Creating a ListView
-        // ``` JavaScript
+        // >> article-create-listview
         var listView = new listViewModule.ListView();
-        // ```
-        // </snippet>
+        // << article-create-listview
 
         TKUnit.assertEqual(listView.isScrolling, false, "Default listView.isScrolling");
         TKUnit.assert(types.isUndefined(listView.items), "Default listView.items should be undefined");
@@ -107,10 +62,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         var listView = this.testView;
 
         var indexes = {};
-        // <snippet module="ui/list-view" title="list-view">
-        // ### Using ListView with Array
-        // The itemLoading event is used to create the UI for each item that is shown in the ListView.
-        // ``` JavaScript
+        // >> article-listview-array
         var colors = ["red", "green", "blue"];
         listView.items = colors;
         listView.on(listViewModule.ListView.itemLoadingEvent, function (args: listViewModule.ItemEventData) {
@@ -120,7 +72,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
             }
             (<labelModule.Label>args.view).text = colors[args.index];
 
-            //<hide>
+            // >> (hide)
             indexes[args.index] = true;
             if (args.index === (colors.length - 1)) {
                 try {
@@ -140,10 +92,9 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
                     done(e);
                 }
             }
-            //</hide>
+            // << (hide)
         });
-        // ```
-        // </snippet>
+        // << article-listview-array
     }
 
     public test_set_native_item_exposed() {
@@ -210,15 +161,11 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
         TKUnit.assertEqual(this.getNativeViewCount(listView), colors.length, "Native views count.");
 
-        // <snippet module="ui/list-view" title="list-view">
-        // > Note, that changing the array after the list view is shown will not update the UI.
-        // You can force-update the UI using the refresh() method.
-        // ``` JavaScript
+        // >> article-change-refresh-listview
         colors.push("yellow");
         //// Manually trigger the update so that the new color is shown.
         listView.refresh();
-        // ```
-        // </snippet>
+        // << article-change-refresh-listview
         TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
         TKUnit.assertEqual(this.getNativeViewCount(listView), colors.length, "Native views count.");
     }
@@ -300,9 +247,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         var listView = this.testView;
 
         var indexes = {};
-        // <snippet module="ui/list-view" title="list-view">
-        // ### Using ListView with ObservableArray
-        // ``` JavaScript
+        // >> article-listview-observablearray
         var colors = new observableArray.ObservableArray(["red", "green", "blue"]);
         listView.items = colors;
         listView.on(listViewModule.ListView.itemLoadingEvent, function (args: listViewModule.ItemEventData) {
@@ -314,8 +259,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
 
             indexes[args.index] = true;
         });
-        // ```
-        // </snippet>
+        // << article-listview-observablearray
 
         TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
         TKUnit.assert(indexes[0], "itemLoading not called for index 0");
@@ -333,13 +277,10 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
         TKUnit.assertEqual(this.getNativeViewCount(listView), 3, "getNativeViewCount");
 
-        // <snippet module="ui/list-view" title="list-view">
-        // > When using ObservableArray the list view will be automatically updated when items are added or removed form the array.
-        // ``` JavaScript
+        // >> article-push-in-observablearray
         colors.push("yellow");
         //// The ListView will be updated automatically.
-        // ```
-        // </snippet>
+        // << article-push-in-observablearray
         TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
         TKUnit.assertEqual(this.getNativeViewCount(listView), 4, "getNativeViewCount");
     }
@@ -383,22 +324,17 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         var nativeTapRaised = false;
         var itemIndex = -1;
         /* tslint:disable:no-unused-variable */
-        // <snippet module="ui/list-view" title="list-view">
-        // ## Responding to other events
-        // ### ItemTap event
-        // The event will be raise when an item inside the ListView is tapped.
-        // ``` JavaScript
+        // >> article-itemtap-event
         listView.on(listViewModule.ListView.itemTapEvent, function (args: listViewModule.ItemEventData) {
             var tappedItemIndex = args.index;
             var tappedItemView = args.view;
             //// Do someting
-            //<hide>
+            // >> (hide)
             nativeTapRaised = true;
             itemIndex = args.index;
-            //</hide>
+            // << (hide)
         });
-        // ```
-        // </snippet>
+        // << article-itemtap-event
         /* tslint:enable:no-unused-variable */
         TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
         this.performNativeItemTap(listView, 1);
@@ -413,19 +349,15 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         var loadMoreItemsCount = 0;
         listView.items = FEW_ITEMS;
         listView.on(listViewModule.ListView.itemLoadingEvent, this.loadViewWithItemNumber);
-        // <snippet module="ui/list-view" title="list-view">
-        // ### LoadMoreItems event
-        // The event will be raised when the ListView is scrolled so that the last item is visible.
-        // This even is intended to be used to add additional data in the ListView.
-        // ``` JavaScript
+        // >> article-loadmoreitems-event
         listView.on(listViewModule.ListView.loadMoreItemsEvent, function (data: observable.EventData) {
             //// Do something.
-            //<hide>
+            // >> (hide)
             loadMoreItemsCount++;
-            //</hide>
+            // << (hide)
         });
         // ```
-        // </snippet>
+        // << article-loadmoreitems-event
         TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
         TKUnit.assertEqual(loadMoreItemsCount, 1, "loadMoreItemsCount");
     }
diff --git a/apps/tests/ui/list-view/list-view.md b/apps/tests/ui/list-view/list-view.md
new file mode 100644
index 000000000..7cd7f1fea
--- /dev/null
+++ b/apps/tests/ui/list-view/list-view.md
@@ -0,0 +1,64 @@
+---
+nav-title: "list-view How-To"
+title: "How-To"
+description: "Examples for using list-view"
+---
+# ListView
+Using a ListView requires the ListView module.
+<snippet id='article-require-module'/>
+Other modules which will be used in the code samples in this article:
+<snippet id='article-require-modules'/>
+### Binding the ListView items property to collection in the view-model.
+``` XML
+<Page>
+  {%raw%}<ListView items="{{ myItems }}" />{%endraw%}
+</Page>
+```
+### Attaching event handler for the ListView itemTap event.
+``` XML
+<Page>
+  {%raw%}<ListView items="{{ myItems }}" itemTap="listViewItemTap" />{%endraw%}
+</Page>
+```
+<snippet id='article-item-tap'/>
+### Attaching event handler for the ListView loadMoreItems event.
+``` XML
+<Page>
+ {%raw%}<ListView items="{{ myItems }}" loadMoreItems="listViewLoadMoreItems" />{%endraw%}
+</Page>
+```
+<snippet id='article-load-items'>
+### Define the ListView itemTemplate property.
+``` XML
+<Page>
+ {%raw%}<ListView items="{{ myItems }}">
+    <ListView.itemTemplate>
+       <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
+    </ListView.itemTemplate>
+ </ListView>{%endraw%}
+</Page>
+```
+### Creating a ListView
+<snippet id='article-create-listview'/>
+### Using ListView with Array
+The itemLoading event is used to create the UI for each item that is shown in the ListView.
+<snippet id='article-listview-array'/>
+
+> Note, that changing the array after the list view is shown will not update the UI.
+You can force-update the UI using the refresh() method.
+<snippet id='article-change-refresh-listview'/>
+
+### Using ListView with ObservableArray
+<snippet id='article-listview-observablearray'/>
+
+> When using ObservableArray the list view will be automatically updated when items are added or removed form the array.
+<snippet id='article-push-in-observablearray'/>
+
+## Responding to other events
+### ItemTap event
+The event will be raise when an item inside the ListView is tapped.
+<snippet id='article-itemtap-event'/>
+### LoadMoreItems event
+The event will be raised when the ListView is scrolled so that the last item is visible.
+This even is intended to be used to add additional data in the ListView.
+<snippet id='article-loadmoreitems-event'/>
diff --git a/apps/tests/ui/page/page-tests-common.ts b/apps/tests/ui/page/page-tests-common.ts
index 37405011f..7573729cf 100644
--- a/apps/tests/ui/page/page-tests-common.ts
+++ b/apps/tests/ui/page/page-tests-common.ts
@@ -1,27 +1,16 @@
-// <snippet module="ui/page" title="Page">
-// # Page
-// Using a page requires the Page module.
-// ``` JavaScript
+// >> article-require-module
 import pageModule = require("ui/page");
 //// FrameModule is needed in order to have an option to navigate to the new page.
 import frameModule = require("ui/frame");
-// ```
+// << article-require-module
 
-// ### Attaching event handler for the Page loaded event to set bindingContext.
-//``` XML
-// <Page loaded="pageLoaded">
-//   {%raw%}<Label text="{{ name }}" />{%endraw%}
-// </Page>
-//```
-//``` JavaScript
-// function pageLoaded(args) {
-//   var page = args.object;
-//   page.bindingContext = { name : "Some name" };
-// }
-// exports.pageLoaded = pageLoaded;
-//```
-
-// </snippet>
+// >> article-set-bindingcontext
+function pageLoaded(args) {
+  var page = args.object;
+  page.bindingContext = { name : "Some name" };
+}
+exports.pageLoaded = pageLoaded;
+// << article-set-bindingcontext
 import TKUnit = require("../../TKUnit");
 import labelModule = require("ui/label");
 import {StackLayout} from "ui/layouts/stack-layout";
@@ -99,13 +88,12 @@ export function test_PageLoaded_is_called_once() {
 }
 
 export function test_NavigateToNewPage() {
+    // >> artivle-create-navigate-to-page
     var currentPage;
     var topFrame = frameModule.topmost();
     currentPage = topFrame.currentPage;
 
-    // <snippet module="ui/page" title="Page">
-    // ### Creating and navigating to the created page.
-    // ``` JavaScript
+    
     var testPage: Page;
     var pageFactory = function (): Page {
         testPage = new pageModule.Page();
@@ -119,17 +107,13 @@ export function test_NavigateToNewPage() {
         animated: false
     };
     topFrame.navigate(navEntry);
-    // ```
-    // </snippet>
+    // << artivle-create-navigate-to-page
 
     TKUnit.waitUntilReady(() => { return testPage.isLayoutValid });
 
-    // <snippet module="ui/page" title="Page">
-    // ### Navigating backward is as simple as calling a single method.
-    // ``` JavaScript
+    // >> article-navigating-backward
     topFrame.goBack();
-    // ```
-    // </snippet>
+    // << article-navigating-backward
 
     TKUnit.waitUntilReady(() => { return topFrame.currentPage !== null && topFrame.currentPage === currentPage });
     TKUnit.assert(testPage.parent === undefined, "Page.parent should become undefined after navigating back");
@@ -221,9 +205,7 @@ function _test_PageNavigation_EventSequence(withTransition: boolean) {
 
 export function test_NavigateTo_WithContext() {
     let currentPage = frameModule.topmost().currentPage;
-    // <snippet module="ui/page" title="Page">
-    // ### Pass data to the new page.
-    // ``` JavaScript
+    // >> article-pass-data
     var testPage: pageModule.Page;
     var pageFactory = function (): pageModule.Page {
         testPage = new pageModule.Page();
@@ -239,8 +221,7 @@ export function test_NavigateTo_WithContext() {
     };
     let topFrame = frameModule.topmost();
     topFrame.navigate(navEntry);
-    // ```
-    // </snippet>
+    // << article-pass-data
     TKUnit.waitUntilReady(() => topFrame.currentPage !== null && topFrame.currentPage !== currentPage && testPage.isLayoutValid);
 
     var actualContextValue = testPage.navigationContext;
diff --git a/apps/tests/ui/page/page.md b/apps/tests/ui/page/page.md
new file mode 100644
index 000000000..f64449557
--- /dev/null
+++ b/apps/tests/ui/page/page.md
@@ -0,0 +1,21 @@
+---
+nav-title: "Page How-To"
+title: "How-To"
+description: "Examples for using Page"
+---
+# Page
+Using a page requires the Page module.
+<snippet id='article-require-module'/>
+### Attaching event handler for the Page loaded event to set bindingContext.
+``` XML
+<Page loaded="pageLoaded">
+  {%raw%}<Label text="{{ name }}" />{%endraw%}
+</Page>
+```
+<snippet id='article-set-bindingcontext'/>
+### Creating and navigating to the created page.
+<snippet id='artivle-create-navigate-to-page'/>
+### Navigating backward is as simple as calling a single method.
+<snippet id='article-navigating-backward'/>
+### Pass data to the new page.
+<snippet id='article-pass-data'/>
diff --git a/apps/tests/ui/placeholder/placeholder-tests.ts b/apps/tests/ui/placeholder/placeholder-tests.ts
index 0f367ca8d..4eba7930b 100644
--- a/apps/tests/ui/placeholder/placeholder-tests.ts
+++ b/apps/tests/ui/placeholder/placeholder-tests.ts
@@ -4,39 +4,29 @@ import utils = require("utils/utils");
 import helper = require("../helper");
 import viewModule = require("ui/core/view");
 
-// <snippet module="ui/placeholder" title="placeholder">
-// # Placeholder
-// Using the placeholder requires the Placeholder module.
-// ``` JavaScript
+// >> article-require-module
 import placeholderModule = require("ui/placeholder");
-// ```
+// << article-require-module
 
-// Creating native view for the Placeholder using creatingView event.
-//``` XML
-// <Page>
-//   {%raw%}<Placeholder creatingView="creatingView" />{%endraw%}
-// </Page>
-//```
-//``` JavaScript
-//var platform = require("platform");
-//var utils = require("utils/utils");
-//
-//function creatingView(args) {
-//    var nativeView;
-//    if (platform.device.os === platform.platformNames.ios) {
-//        nativeView = new UITextView();
-//        nativeView.text = "Native";
-//    } else if (platform.device.os === platform.platformNames.android) {
-//        nativeView = new android.widget.TextView(utils.ad.getApplicationContext());
-//        nativeView.setText("Native");
-//    }
-//
-//    args.view = nativeView;
-//}
-//
-//exports.creatingView = creatingView;
-//```
-// </snippet>
+// >> article-creating-view
+var platform = require("platform");
+var utils = require("utils/utils");
+
+function creatingView(args) {
+   var nativeView;
+   if (platform.device.os === platform.platformNames.ios) {
+       nativeView = new UITextView();
+       nativeView.text = "Native";
+   } else if (platform.device.os === platform.platformNames.android) {
+       nativeView = new android.widget.TextView(utils.ad.getApplicationContext());
+       nativeView.setText("Native");
+   }
+
+   args.view = nativeView;
+}
+
+exports.creatingView = creatingView;
+// << article-creating-view
 
 export function test_placeholder_creatingView() {
     var nativeView;
diff --git a/apps/tests/ui/placeholder/placeholder.md b/apps/tests/ui/placeholder/placeholder.md
new file mode 100644
index 000000000..6f678a624
--- /dev/null
+++ b/apps/tests/ui/placeholder/placeholder.md
@@ -0,0 +1,15 @@
+---
+nav-title: "placeholder How-To"
+title: "How-To"
+description: "Examples for using placeholder"
+---
+# Placeholder
+Using the placeholder requires the Placeholder module.
+<snippet id='article-require-module'/>
+Creating native view for the Placeholder using creatingView event.
+``` XML
+<Page>
+  {%raw%}<Placeholder creatingView="creatingView" />{%endraw%}
+</Page>
+```
+<snippet id='article-creating-view'/>
diff --git a/apps/tests/ui/progress/progress-tests.ts b/apps/tests/ui/progress/progress-tests.ts
index b75af2fef..ad1f916a2 100644
--- a/apps/tests/ui/progress/progress-tests.ts
+++ b/apps/tests/ui/progress/progress-tests.ts
@@ -5,35 +5,16 @@ import observable = require("data/observable");
 import color = require("color");
 import platform = require("platform");
 
-// <snippet module="ui/progress" title="progress">
-// # Progress
-// Using the progress view requires the Progress module.
-// ``` JavaScript
+// >> article-require-module
 import progressModule = require("ui/progress");
-// ```
+// << article-require-module
+
 
-// Binding the Progress value property to a view-model property.
-//``` XML
-// <Page loaded="pageLoaded">
-//   {%raw%}<Progress value="{{ someProperty }}" />{%endraw%}
-// </Page>
-//```
-//``` JavaScript
-// function pageLoaded(args) {
-//   var page = args.object;
-//   page.bindingContext = { someProperty : 42 };
-// }
-// exports.pageLoaded = pageLoaded;
-//```
-// </snippet>
 
 export function test_default_TNS_values() {
-    // <snippet module="ui/progress" title="progress">
-    // ### Creating a progress view
-    // ``` JavaScript
+    // >> article-create-progress-view
     var progress = new progressModule.Progress();
-    // ```
-    // </snippet>
+    // << article-create-progress-view
 
     TKUnit.assertEqual(progress.value, 0, "Default progress.value");
     TKUnit.assertEqual(progress.maxValue, 100, "Default progress.maxValue");
@@ -101,13 +82,10 @@ if (platform.device.os === platform.platformNames.ios) {
 export function test_set_maxValue_should_adjust_value() {
     var progress = new progressModule.Progress();
 
-    // <snippet module="ui/progress" title="progress">
-    // ### Setting up the progress view
-    // ``` JavaScript
+    // >> article-set-value
     progress.maxValue = 255;
     progress.value = 16;
-    // ```
-    // </snippet>
+    // << article-set-value
 
     function testAction(views: Array<viewModule.View>) {
         progress.maxValue = 10;
diff --git a/apps/tests/ui/progress/progress.md b/apps/tests/ui/progress/progress.md
new file mode 100644
index 000000000..10cad91ba
--- /dev/null
+++ b/apps/tests/ui/progress/progress.md
@@ -0,0 +1,25 @@
+---
+nav-title: "progress How-To"
+title: "How-To"
+description: "Examples for using progress"
+---
+# Progress
+Using the progress view requires the Progress module.
+<snippet id='article-require-module'/>
+Binding the Progress value property to a view-model property.
+``` XML
+<Page loaded="pageLoaded">
+  {%raw%}<Progress value="{{ someProperty }}" />{%endraw%}
+</Page>
+```
+``` JavaScript
+function pageLoaded(args) {
+  var page = args.object;
+  page.bindingContext = { someProperty : 42 };
+}
+exports.pageLoaded = pageLoaded;
+```
+### Creating a progress view
+<snippet id='article-create-progress-view'>
+### Setting up the progress view
+<snippet id='article-set-value'/>
diff --git a/apps/tests/ui/repeater/repeater-tests.ts b/apps/tests/ui/repeater/repeater-tests.ts
index 36c2a2f6e..fafd11e7e 100644
--- a/apps/tests/ui/repeater/repeater-tests.ts
+++ b/apps/tests/ui/repeater/repeater-tests.ts
@@ -10,64 +10,16 @@ import pageModule = require("ui/page");
 import gestureModule = require("ui/gestures");
 import { Label } from "ui/label";
 
-// <snippet module="ui/repeater" title="repeater">
-// # Repeater
-// Using a Repeater requires the repeater module.
-// ``` JavaScript
+// >> article-require-module
 import repeaterModule = require("ui/repeater");
-// ```
-// Other modules which will be used in the code samples in this article:
-// ``` JavaScript
+// << article-require-module
+
+// >> article-require-modules
 import observableArray = require("data/observable-array");
 import labelModule = require("ui/label");
-// ```
+// << article-require-modules
 
-// ### Binding the Repeater items property to collection in the view-model.
-//``` XML
-// <Page>
-//   {%raw%}<Repeater items="{{ myItems }}" />{%endraw%}
-// </Page>
-//```
 
-// ### Define the Repeater itemTemplate property.
-//``` XML
-// <Page>
-//  {%raw%}<Repeater items="{{ myItems }}">
-//     <Repeater.itemTemplate>
-//        <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
-//     </Repeater.itemTemplate>
-//  </Repeater>{%endraw%}
-// </Page>
-//```
-
-// ### Define the Repeater itemsLayout property. Default is StackLayout with orientation="vertical".
-//``` XML
-// <Page>
-//  {%raw%}<Repeater items="{{ myItems }}">
-//     <Repeater.itemsLayout>
-//        <StackLayout orientation="horizontal" />
-//     </Repeater.itemsLayout>
-//  </Repeater>{%endraw%}
-// </Page>
-//```
-
-// ### Repeater with WrapLayout inside ScrollView.
-//``` XML
-// <Page>
-// {%raw%}<ScrollView>
-//   <Repeater items="{{ myItems }}">
-//     <Repeater.itemsLayout>
-//        <WrapLayout />
-//     </Repeater.itemsLayout>
-//     <Repeater.itemTemplate>
-//        <Label text="{{ $value }}" margin="10" />
-//     </Repeater.itemTemplate>
-//   </Repeater>
-//  </ScrollView>{%endraw%}
-// </Page>
-//```
-
-// </snippet>
 
 var ASYNC = 0.2;
 var FEW_ITEMS = [0, 1, 2];
@@ -80,13 +32,10 @@ export function test_set_items_to_array_loads_all_items() {
     var repeater = new repeaterModule.Repeater();
 
     function testAction(views: Array<viewModule.View>) {
-        // <snippet module="ui/repeater" title="repeater">
-        // ### Using Repeater with Array
-        // ``` JavaScript
+        // >> article-repeater-with-array
         var colors = ["red", "green", "blue"];
         repeater.items = colors;
-        // ```
-        // </snippet>
+        // << article-repeater-with-array
 
         TKUnit.wait(ASYNC);
 
@@ -121,15 +70,11 @@ export function test_refresh_after_adding_items_to_array_loads_new_items() {
 
         TKUnit.wait(ASYNC);
         TKUnit.assertEqual(getChildrenCount(repeater), colors.length, "views count.");
-        // <snippet module="ui/repeater" title="repeater">
-        // > Note, that changing the array after the repeater is shown will not update the UI.
-        // You can force-update the UI using the refresh() method.
-        // ``` JavaScript
+        // >> artcle-array-push-element
         colors.push("yellow");
         //// Manually trigger the update so that the new color is shown.
         repeater.refresh();
-        // ```
-        // </snippet>
+        // << artcle-array-push-element
         TKUnit.wait(ASYNC);
         TKUnit.assertEqual(getChildrenCount(repeater), colors.length, "views count.");
     };
@@ -183,15 +128,12 @@ export function test_set_itmes_to_null_clears_items() {
 }
 
 export function test_set_itemsLayout_accepted() {
-    // <snippet module="ui/repeater" title="repeater">
-    // ### Using Repeater with different layout.
-    // ``` JavaScript
+    // >> article-repeater-layout
     var repeater = new repeaterModule.Repeater();
     var stackLayout = new stackLayoutModule.StackLayout();
     stackLayout.orientation = "horizontal";
     repeater.itemsLayout = stackLayout;
-    // ```
-    // </snippet>
+    // << article-repeater-layout
 
     function testAction(views: Array<viewModule.View>) {
 
@@ -240,13 +182,10 @@ export function test_set_items_to_observable_array_loads_all_items() {
     var repeater = new repeaterModule.Repeater();
 
     function testAction(views: Array<viewModule.View>) {
-        // <snippet module="ui/repeater" title="repeater">
-        // ### Using Repeater with ObservableArray
-        // ``` JavaScript
+        // >> article-repeater-observablearray
         var colors = new observableArray.ObservableArray(["red", "green", "blue"]);
         repeater.items = colors;
-        // ```
-        // </snippet>
+        // << article-repeater-observablearray
 
         TKUnit.assert(getChildAtText(repeater, 0) === "red", "Item not created for index 0");
         TKUnit.assert(getChildAtText(repeater, 1) === "green", "Item not created for index 1");
@@ -266,13 +205,10 @@ export function test_add_to_observable_array_refreshes_the_Repeater() {
         TKUnit.wait(ASYNC);
         TKUnit.assertEqual(getChildrenCount(repeater), 3, "getChildrenCount");
 
-        // <snippet module="ui/repeater" title="repeater">
-        // > When using ObservableArray the repeater will be automatically updated when items are added or removed form the array.
-        // ``` JavaScript
+        // >> article-push-to-observablearray
         colors.push("yellow");
         //// The Repeater will be updated automatically.
-        // ```
-        // </snippet>
+        // << article-push-to-observablearray
         TKUnit.wait(ASYNC);
         TKUnit.assertEqual(getChildrenCount(repeater), 4, "getChildrenCount");
 
diff --git a/apps/tests/ui/repeater/repeater.md b/apps/tests/ui/repeater/repeater.md
new file mode 100644
index 000000000..b123dbf70
--- /dev/null
+++ b/apps/tests/ui/repeater/repeater.md
@@ -0,0 +1,62 @@
+---
+nav-title: "repeater How-To"
+title: "How-To"
+description: "Examples for using repeater"
+---
+# Repeater
+Using a Repeater requires the repeater module.
+<snippet id='article-require-module'/>
+Other modules which will be used in the code samples in this article:
+<snippet id='article-require-modules'/>
+### Binding the Repeater items property to collection in the view-model.
+``` XML
+<Page>
+  {%raw%}<Repeater items="{{ myItems }}" />{%endraw%}
+</Page>
+```
+### Define the Repeater itemTemplate property.
+``` XML
+<Page>
+ {%raw%}<Repeater items="{{ myItems }}">
+    <Repeater.itemTemplate>
+       <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
+    </Repeater.itemTemplate>
+ </Repeater>{%endraw%}
+</Page>
+```
+### Define the Repeater itemsLayout property. Default is StackLayout with orientation="vertical".
+``` XML
+<Page>
+ {%raw%}<Repeater items="{{ myItems }}">
+    <Repeater.itemsLayout>
+       <StackLayout orientation="horizontal" />
+    </Repeater.itemsLayout>
+ </Repeater>{%endraw%}
+</Page>
+```
+### Repeater with WrapLayout inside ScrollView.
+``` XML
+<Page>
+{%raw%}<ScrollView>
+  <Repeater items="{{ myItems }}">
+    <Repeater.itemsLayout>
+       <WrapLayout />
+    </Repeater.itemsLayout>
+    <Repeater.itemTemplate>
+       <Label text="{{ $value }}" margin="10" />
+    </Repeater.itemTemplate>
+  </Repeater>
+ </ScrollView>{%endraw%}
+</Page>
+```
+### Using Repeater with Array
+<snippet id='article-repeater-with-array'/>
+> Note, that changing the array after the repeater is shown will not update the UI.
+You can force-update the UI using the refresh() method.
+<snippet id='artcle-array-push-element'/>
+### Using Repeater with different layout.
+<snippet id='article-repeater-layout'/>
+### Using Repeater with ObservableArray
+<snippet id='article-repeater-observablearray'/>
+> When using ObservableArray the repeater will be automatically updated when items are added or removed form the array.
+<snippet id='article-push-to-observablearray'/>
diff --git a/apps/tests/ui/scroll-view/scroll-view-tests.ts b/apps/tests/ui/scroll-view/scroll-view-tests.ts
index 2cb6e1200..dacb25f25 100644
--- a/apps/tests/ui/scroll-view/scroll-view-tests.ts
+++ b/apps/tests/ui/scroll-view/scroll-view-tests.ts
@@ -7,23 +7,9 @@ import layoutHelper = require("../../layouts/layout-helper");
 import {Page} from "ui/page";
 import * as frame from "ui/frame";
 
-// <snippet module="ui/scroll-view" title="scroll-view">
-// # ScrollView
-// Using a ScrollView requires the ScrollView module.
-// ``` JavaScript
+// >> article-require-module
 import scrollViewModule = require("ui/scroll-view");
-// ```
-
-// ### Declaring the ScrollView.
-//``` XML
-// <Page>
-//  <ScrollView>
-//    {%raw%}<Image src="{{ someBigImageUrl }}" />{%endraw%}
-//  </ScrollView>
-// </Page>
-//```
-
-// </snippet>
+// << article-require-module
 
 class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
 
@@ -44,13 +30,9 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
     }
 
     public test_snippets() {
-        /* tslint:disable:no-unused-variable */
-        // <snippet module="ui/scroll-view" title="scroll-view">
-        // ### Creating a ScrollView
-        // ``` JavaScript
+        // >> article-creating-scrollview
         var scrollView = new scrollViewModule.ScrollView();
-        // ```
-        // </snippet>
+        // << article-creating-scrollview
     }
 
     public test_default_TNS_values() {
diff --git a/apps/tests/ui/scroll-view/scroll-view.md b/apps/tests/ui/scroll-view/scroll-view.md
new file mode 100644
index 000000000..cc7bbbd11
--- /dev/null
+++ b/apps/tests/ui/scroll-view/scroll-view.md
@@ -0,0 +1,18 @@
+---
+nav-title: "scroll-view How-To"
+title: "How-To"
+description: "Examples for using scroll-view"
+---
+# ScrollView
+Using a ScrollView requires the ScrollView module.
+<snippet id='article-require-module'/>
+### Declaring the ScrollView.
+``` XML
+<Page>
+ <ScrollView>
+   {%raw%}<Image src="{{ someBigImageUrl }}" />{%endraw%}
+ </ScrollView>
+</Page>
+```
+### Creating a ScrollView
+<snippet id='article-creating-scrollview'/>
diff --git a/apps/tests/ui/search-bar/search-bar-tests.ts b/apps/tests/ui/search-bar/search-bar-tests.ts
index 93f340ad6..9f459311c 100644
--- a/apps/tests/ui/search-bar/search-bar-tests.ts
+++ b/apps/tests/ui/search-bar/search-bar-tests.ts
@@ -4,13 +4,9 @@ import viewModule = require("ui/core/view");
 import searchBarTestsNative = require("./search-bar-tests-native");
 import colorModule = require("color");
 import observable = require("data/observable");
-// <snippet module="ui/search-bar" title="search-bar">
-// # SearchBar
-// Using the SearchBar requires the "ui/search-bar" module.
-// ``` JavaScript
+// >> article-require-module
 import searchBarModule = require("ui/search-bar");
-// ```
-// </snippet>
+// << article-require-module
 
 // ### Declaring a SearchBar.
 //``` XML
@@ -21,12 +17,9 @@ import searchBarModule = require("ui/search-bar");
 // </snippet>
 
 var _createSearchBarFunc = function (): searchBarModule.SearchBar {
-    // <snippet module="ui/search-bar" title="SearchBar">
-    // ### Creating a SearchBar
-    // ``` JavaScript
+    // >> article-creating-searchbar
     var searchBar = new searchBarModule.SearchBar();
-    // ```
-    // </snippet>
+    // << article-creating-searchbar
     searchBar.text = "searchBar";
     return searchBar;
 };
@@ -75,9 +68,7 @@ export var testSearchBarFontSize = function () {
 };
 
 export function test_DummyTestForSnippetOnly() {
-    // <snippet module="ui/search-bar" title="search-bar">
-    // ### Searching
-    // ``` JavaScript
+    // >> article-searching
     var searchBar = new searchBarModule.SearchBar();
     searchBar.on(searchBarModule.SearchBar.submitEvent, function (args: observable.EventData) { 
         console.log("Search for " + (<searchBarModule.SearchBar>args.object).text);
@@ -85,6 +76,5 @@ export function test_DummyTestForSnippetOnly() {
     searchBar.on(searchBarModule.SearchBar.clearEvent, function (args: observable.EventData) {
         console.log("Clear");
     });
-    // ```
-    // </snippet>
+    // << article-searching
 }
diff --git a/apps/tests/ui/search-bar/search-bar.md b/apps/tests/ui/search-bar/search-bar.md
new file mode 100644
index 000000000..c8faf26de
--- /dev/null
+++ b/apps/tests/ui/search-bar/search-bar.md
@@ -0,0 +1,12 @@
+---
+nav-title: "search-bar How-To"
+title: "How-To"
+description: "Examples for using search-bar"
+---
+# SearchBar
+Using the SearchBar requires the "ui/search-bar" module.
+<snippet id='article-require-module'/>
+### Creating a SearchBar
+<snippet id='article-creating-searchbar'/>
+### Searching
+<snippet id='article-searching' />
diff --git a/apps/tests/ui/segmented-bar/segmented-bar-tests.ts b/apps/tests/ui/segmented-bar/segmented-bar-tests.ts
index 97cf85267..0dab24831 100644
--- a/apps/tests/ui/segmented-bar/segmented-bar-tests.ts
+++ b/apps/tests/ui/segmented-bar/segmented-bar-tests.ts
@@ -6,31 +6,14 @@ import bindable = require("ui/core/bindable");
 import observable = require("data/observable");
 import color = require("color");
 
-// <snippet module="ui/segmented-bar" title="SegmentedBar">
-// # SegmentedBar
-
-// Using a SegmentedBar requires the "ui/segmented-bar" module.
-// ``` JavaScript
+// >> article-require-module
 import segmentedBarModule = require("ui/segmented-bar");
-// ```
-// </snippet>
+// << article-require-module
 
 function _createSegmentedBar(): segmentedBarModule.SegmentedBar {
-    // <snippet module="ui/segmented-bar" title="SegmentedBar">
-    // ## Creating a SegmentedBar
-    // ``` JavaScript
+    // >> article-create-segmentedbar
     var segmentedBar = new segmentedBarModule.SegmentedBar();
-    // ```
-    // ``` XML
-    // <SegmentedBar>
-    //   <SegmentedBar.items>
-    //     <SegmentedBarItem title="Item 1" />
-    //     <SegmentedBarItem title="Item 2" />
-    //     <SegmentedBarItem title="Item 3" />
-    //   </SegmentedBar.items>
-    // </SegmentedBar>
-    // ```
-    // </snippet>
+    // << article-create-segmentedbar
     segmentedBar.id = "SegmentedBar";
     return segmentedBar;
 }
@@ -102,11 +85,7 @@ export var testWhenSettingItemsToEmptyArrayZeroNativeItemsAreCreated = function
 export var testSelectedIndexBecomesZeroWhenItemsBoundToNonEmptyArray = function () {
     helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
         var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
-        // <snippet module="ui/segmented-bar" title="SegmentedBar">
-        // ### Creating segmentedBar.items
-        // It is important that an items array gets created and filled with
-        // items first and then assigned to the segmented bar.
-        // ``` JavaScript
+        // >> article-creating-segmentedbar-items
         var items = [];
         var item1 = new segmentedBarModule.SegmentedBarItem();
         item1.title = "Item1";
@@ -118,8 +97,7 @@ export var testSelectedIndexBecomesZeroWhenItemsBoundToNonEmptyArray = function
         item3.title = "Item3";
         items.push(item3);
         segmentedBar.items = items;
-        // ```
-        // </snippet>
+        // << article-creating-segmentedbar-items
         var expectedValue = 0;
         var actualValue = segmentedBar.selectedIndex;
         TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
@@ -130,12 +108,9 @@ export var testSelectedIndexBecomesUndefinedWhenItemsBoundToEmptyArray = functio
     helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
         var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
         segmentedBar.items = _createItems(10);
-        // <snippet module="ui/segmented-bar" title="SegmentedBar">
-        // ### Selecting an item programmatically
-        // ``` JavaScript
+        // >> artcile-selecting-item
         segmentedBar.selectedIndex = 9;
-        // ```
-        // </snippet>
+        // << artcile-selecting-item
         segmentedBar.items = [];
         var expectedValue = undefined;
         var actualValue = segmentedBar.selectedIndex;
diff --git a/apps/tests/ui/segmented-bar/segmented-bar.md b/apps/tests/ui/segmented-bar/segmented-bar.md
new file mode 100644
index 000000000..7fad59685
--- /dev/null
+++ b/apps/tests/ui/segmented-bar/segmented-bar.md
@@ -0,0 +1,25 @@
+---
+nav-title: "SegmentedBar How-To"
+title: "How-To"
+description: "Examples for using SegmentedBar"
+---
+# SegmentedBar
+Using a SegmentedBar requires the "ui/segmented-bar" module.
+<snippet id='article-require-module'/>
+## Creating a SegmentedBar
+<snippet id='article-create-segmentedbar'/>
+``` XML
+<SegmentedBar>
+  <SegmentedBar.items>
+    <SegmentedBarItem title="Item 1" />
+    <SegmentedBarItem title="Item 2" />
+    <SegmentedBarItem title="Item 3" />
+  </SegmentedBar.items>
+</SegmentedBar>
+```
+### Creating segmentedBar.items
+It is important that an items array gets created and filled with
+items first and then assigned to the segmented bar.
+<snippet id='article-creating-segmentedbar-items'/>
+### Selecting an item programmatically
+<snippet id='artcile-selecting-item'/>
diff --git a/apps/tests/ui/slider/slider-tests.ts b/apps/tests/ui/slider/slider-tests.ts
index 509908fb2..038873631 100644
--- a/apps/tests/ui/slider/slider-tests.ts
+++ b/apps/tests/ui/slider/slider-tests.ts
@@ -7,23 +7,13 @@ import observable = require("data/observable");
 import color = require("color");
 import platform = require("platform");
 
-// <snippet module="ui/slider" title="slider">
-// # Slider
-// Using a slider requires the Slider module.
-// ``` JavaScript
+// >> article-require-slider
 import sliderModule = require("ui/slider");
-// ```
+// << article-require-slider
 
 // ### Binding the Progress and Slider value properties to a observable view-model property.
-//``` XML
-// <Page loaded="pageLoaded">
-//  <StackLayout orientation="vertical">
-//    {%raw%}<Progress value="{{ someProperty }}" />
-//    <Slider value="{{ someProperty }}" />{%endraw%}
-//  </StackLayout>
-// </Page>
-//```
-//``` JavaScript
+
+// >> article-binding-slider-properties
 // function pageLoaded(args) {
 //   var page = args.object;
 //   var obj = new observable.Observable();
@@ -31,19 +21,15 @@ import sliderModule = require("ui/slider");
 //   page.bindingContext = obj;
 // }
 // exports.pageLoaded = pageLoaded;
-//```
+// << article-binding-slider-properties
 
-// </snippet>
 
 var TEST_VALUE = 5;
 
 export function test_set_TNS_value_updates_native_value() {
-    // <snippet module="ui/slider" title="slider">
-    // ### Creating a slider
-    // ``` JavaScript
+    // >> article-creating-slider
     var slider = new sliderModule.Slider();
-    // ```
-    // </snippet>
+    // << article-creating-slider
 
     function testAction(views: Array<viewModule.View>) {
         slider.value = TEST_VALUE;
@@ -172,14 +158,11 @@ export function test_set_maxValue_should_adjust_value() {
 export function test_set_maxValue_should_adjust_value_and_minValue() {
     var slider = new sliderModule.Slider();
 
-    // <snippet module="ui/slider" title="slider">
-    // ### Setting the slider value and bounds
-    // ``` JavaScript
+    // >> article-setting-slider-values
     slider.maxValue = 120;
     slider.value = 80;
     slider.minValue = 50;
-    // ```
-    // </snippet>
+    // << article-setting-slider-values
 
     function testAction(views: Array<viewModule.View>) {
         slider.maxValue = 30;
@@ -335,9 +318,7 @@ export function test_binding_value_to_model() {
     var slider = new sliderModule.Slider()
 
     function testAction(views: Array<viewModule.View>) {
-        // <snippet module="ui/slider" title="slider">
-        // ### Binding value property to a model
-        // ``` JavaScript
+        // >> article-binding-value-property
         var model = new observable.Observable();
         model.set("age", 21);
         var options: bindable.BindingOptions = {
@@ -346,16 +327,15 @@ export function test_binding_value_to_model() {
         };
         slider.bind(options, model);
         //// slider.value is now 21
-        // <hide>
+        // >> (hide)
         TKUnit.assertEqual(slider.value, 21, "slider.value");
-        // </hide>
+        // << (hide)
         model.set("age", 22);
         //// slider.value is now 22
-        // <hide>
+        // >> (hide)
         TKUnit.assertEqual(slider.value, 22, "slider.value");
-        // </hide>
-        // ```
-        // </snippet>
+        // << (hide)
+        // << article-binding-value-property
     }
 
     helper.buildUIAndRunTest(slider, testAction);
diff --git a/apps/tests/ui/slider/slider.md b/apps/tests/ui/slider/slider.md
new file mode 100644
index 000000000..1319b0a72
--- /dev/null
+++ b/apps/tests/ui/slider/slider.md
@@ -0,0 +1,24 @@
+---
+nav-title: "slider How-To"
+title: "How-To"
+description: "Examples for using slider"
+---
+# Slider
+Using a slider requires the Slider module.
+<snippet id='article-require-slider'/>
+### Binding the Progress and Slider value properties to a observable view-model property.
+``` XML
+<Page loaded="pageLoaded">
+ <StackLayout orientation="vertical">
+   {%raw%}<Progress value="{{ someProperty }}" />
+   <Slider value="{{ someProperty }}" />{%endraw%}
+ </StackLayout>
+</Page>
+```
+<snippet id='article-binding-slider-properties'/>
+### Creating a slider
+<snippet id='article-creating-slider'/>
+### Setting the slider value and bounds
+<snippet id='article-setting-slider-values'/>
+### Binding value property to a model
+<snippet id='article-binding-value-property'/>
diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts
index 4133d2a1b..97565d905 100644
--- a/apps/tests/ui/style/style-tests.ts
+++ b/apps/tests/ui/style/style-tests.ts
@@ -13,9 +13,7 @@ import viewModule = require("ui/core/view");
 import styleModule = require("ui/styling/style");
 import dependencyObservableModule = require("ui/core/dependency-observable");
 
-// <snippet module="ui/styling" title="styling">
-// # Styling
-// </snippet>
+
 
 export function test_css_dataURI_is_applied_to_backgroundImageSource() {
     var stack = new stackModule.StackLayout();
@@ -133,20 +131,15 @@ export function test_css_is_applied_inside_NestedControls() {
 
 // Basic selector tests
 export function test_setting_css() {
-    // <snippet module="ui/styling" title="styling">
-    // ### Setting CSS to a page
-    // ``` JavaScript
+    // >> article-setting-css-page
     var page = new pageModule.Page();
     page.css = ".title { font-size: 20 }";
-    // ```
-    // </snippet>
+    // << article-setting-css-page
 
     TKUnit.assert(page.css === ".title { font-size: 20 }", "CSS not set correctly.");
 }
 
-// <snippet module="ui/styling" title="styling">
-// ## Using CSS selectors
-// </snippet>
+
 
 // Basic selector tests
 export function test_type_selector() {
@@ -155,9 +148,7 @@ export function test_type_selector() {
     let btn: buttonModule.Button;
     let label: labelModule.Label;
 
-    // <snippet module="ui/styling" title="styling">
-    // ### Using type selector
-    // ``` JavaScript
+    // >> article-using-type-selector
     page.css = "button { background-color: red; }";
 
     //// Will be styled
@@ -165,8 +156,7 @@ export function test_type_selector() {
 
     //// Won't be styled
     label = new labelModule.Label();
-    // ```
-    // </snippet>
+    // << article-using-type-selector
 
     let stack = new stackModule.StackLayout();
     page.content = stack;
@@ -184,9 +174,7 @@ export function test_class_selector() {
     let btnWithClass: buttonModule.Button;
     let btnWithNoClass: buttonModule.Button;
 
-    // <snippet module="ui/styling" title="styling">
-    // ### Using class selector
-    // ``` JavaScript
+    // >> article-using-class-selector
     page.css = ".test { color: red; }";
 
     //// Will be styled
@@ -195,8 +183,7 @@ export function test_class_selector() {
 
     //// Won't be styled
     btnWithNoClass = new buttonModule.Button();
-    // ```
-    // </snippet>
+    // << article-using-class-selector
 
     var stack = new stackModule.StackLayout();
     page.content = stack;
@@ -231,9 +218,7 @@ export function test_id_selector() {
     let btnWithId: buttonModule.Button;
     let btnWithNoId: buttonModule.Button;
 
-    // <snippet module="ui/styling" title="styling">
-    // ### Using id selector
-    // ``` JavaScript
+    // >> article-using-id-selector
     page.css = "#myButton { color: red; }";
 
     //// Will be styled
@@ -242,8 +227,7 @@ export function test_id_selector() {
 
     //// Won't be styled
     btnWithNoId = new buttonModule.Button();
-    // ```
-    // </snippet>
+    // << article-using-id-selector
 
     var stack = new stackModule.StackLayout();
     page.content = stack;
@@ -275,15 +259,12 @@ export function test_type_and_state_selector() {
     page.style._resetValue(styling.properties.colorProperty);
     var btn: buttonModule.Button;
 
-    // <snippet module="ui/styling" title="styling">
-    // ### Using state selector
-    // ``` JavaScript
+    // >>article-using-state-selector
     page.css = "button:pressed { color: red; }";
 
     //// Will be red when pressed
     btn = new buttonModule.Button();
-    // ```
-    // </snippet>
+    // << article-using-state-selector
     var stack = new stackModule.StackLayout();
     page.content = stack;
     stack.addChild(btn);
diff --git a/apps/tests/ui/style/style.md b/apps/tests/ui/style/style.md
new file mode 100644
index 000000000..9ffa5aeb2
--- /dev/null
+++ b/apps/tests/ui/style/style.md
@@ -0,0 +1,18 @@
+---
+nav-title: "styling How-To"
+title: "How-To"
+description: "Examples for using styling"
+---
+# Styling
+### Setting CSS to a page
+<snippet id='article-setting-css-page'/>
+## Using CSS selectors
+### Using type selector
+<snippet id='article-using-type-selector'/>
+### Using class selector
+<snippet id='article-using-class-selector' />
+### Using id selector
+<snippet id='article-using-id-selector'/>
+### Using state selector
+<snippet id='article-using-state-selector'/>
+For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. 
diff --git a/apps/tests/ui/switch/switch-tests.ts b/apps/tests/ui/switch/switch-tests.ts
index eb5fc527b..dfb6dfbc6 100644
--- a/apps/tests/ui/switch/switch-tests.ts
+++ b/apps/tests/ui/switch/switch-tests.ts
@@ -5,41 +5,27 @@ import bindable = require("ui/core/bindable");
 import observable = require("data/observable");
 import color = require("color");
 import platform = require("platform");
-// <snippet module="ui/switch" title="switch">
-// # Switch
-// Using a switch requires the Switch module.
-// ``` JavaScript
+// >> article-require-switch
 import switchModule = require("ui/switch");
-// ```
+// << article-require-switch
 
 // ### Binding the Switch checked property and Button isEanbled property to a observable view-model property.
-//``` XML
-// <Page loaded="pageLoaded">
-//  <StackLayout orientation="vertical">
-//    {%raw%}<Switch checked="{{ someProperty }}" />
-//    <Button isEanbled="{{ someProperty }}" text="This is a Button!" />{%endraw%}
-//  </StackLayout>
-// </Page>
-//```
-//``` JavaScript
-// function pageLoaded(args) {
-//   var page = args.object;
-//   var obj = new observable.Observable();
-//   obj.set("someProperty", false);
-//   page.bindingContext = obj;
-// }
-// exports.pageLoaded = pageLoaded;
-//```
 
-// </snippet>
+// >> article-binding-switch-property
+function pageLoaded(args) {
+  var page = args.object;
+  var obj = new observable.Observable();
+  obj.set("someProperty", false);
+  page.bindingContext = obj;
+}
+exports.pageLoaded = pageLoaded;
+// << article-binding-switch-property
+
 
 export function test_default_TNS_values() {
-    // <snippet module="ui/switch" title="switch">
-    // ### Creating a switch
-    // ``` JavaScript
+    // >> article-create-switch
     var mySwitch = new switchModule.Switch();
-    // ```
-    // </snippet>
+    // << article-create-switch
     TKUnit.assertEqual(mySwitch.checked, false, "Default switch.checked");
 }
 
@@ -81,12 +67,9 @@ if (platform.device.os === platform.platformNames.ios) {
 export function test_set_TNS_checked_updates_native_checked() {
     var mySwitch = new switchModule.Switch();
     function testAction(views: Array<viewModule.View>) {
-        // <snippet module="ui/switch" title="switch">
-        // ### Setting the checked property of a switch
-        // ``` JavaScript
+        // >> article-setting-checked-property
         mySwitch.checked = true;
-        // ```
-        // </snippet>
+        // << article-setting-checked-property
         TKUnit.assertEqual(getNativeValue(mySwitch), true, "Native checked is different from TNS checked.");
     };
 
@@ -131,9 +114,7 @@ export function test_binding_value_to_model() {
     var mySwitch = new switchModule.Switch()
 
     function testAction(views: Array<viewModule.View>) {
-        // <snippet module="ui/switch" title="switch">
-        // ### Binding checked property to a model
-        // ``` JavaScript
+        // >> aricle-binding-checked-property
         var model = new observable.Observable();
         model.set("enabled", true);
         var options: bindable.BindingOptions = {
@@ -142,16 +123,15 @@ export function test_binding_value_to_model() {
         };
         mySwitch.bind(options, model);
         //// mySwitch.checked is now true
-        // <hide>
+        // >> (hide)
         TKUnit.assertEqual(mySwitch.checked, true, "mySwitch.checked");
-        // </hide>
+        // << (hide)
         model.set("enabled", false);
         //// mySwitch.checked is now false
-        // <hide>
+        // >> (hide)
         TKUnit.assertEqual(mySwitch.checked, false, "mySwitch.checked");
-        // </hide>
-        // ```
-        // </snippet>
+        // << (hide)
+        // << aricle-binding-checked-property
     }
 
     helper.buildUIAndRunTest(mySwitch, testAction);
diff --git a/apps/tests/ui/switch/switch.md b/apps/tests/ui/switch/switch.md
new file mode 100644
index 000000000..4cb5fc845
--- /dev/null
+++ b/apps/tests/ui/switch/switch.md
@@ -0,0 +1,24 @@
+---
+nav-title: "switch How-To"
+title: "How-To"
+description: "Examples for using switch"
+---
+# Switch
+Using a switch requires the Switch module.
+<snippet id='article-require-switch'/>
+### Binding the Switch checked property and Button isEanbled property to a observable view-model property.
+``` XML
+<Page loaded="pageLoaded">
+ <StackLayout orientation="vertical">
+   {%raw%}<Switch checked="{{ someProperty }}" />
+   <Button isEanbled="{{ someProperty }}" text="This is a Button!" />{%endraw%}
+ </StackLayout>
+</Page>
+```
+<snippet id='article-binding-switch-property'/>
+### Creating a switch
+<snippet id='article-create-switch'/>
+### Setting the checked property of a switch
+<snippet id='article-setting-checked-property'/>
+### Binding checked property to a model
+<snippet id='aricle-binding-checked-property'/>
diff --git a/apps/tests/ui/tab-view/tab-view-tests.ts b/apps/tests/ui/tab-view/tab-view-tests.ts
index ad0755046..0a94039ee 100644
--- a/apps/tests/ui/tab-view/tab-view-tests.ts
+++ b/apps/tests/ui/tab-view/tab-view-tests.ts
@@ -5,44 +5,19 @@ import labelModule = require("ui/label");
 import stackLayoutModule = require("ui/layouts/stack-layout");
 import tabViewTestsNative = require("./tab-view-tests-native");
 
-// <snippet module="ui/tab-view" title="TabView">
-// # TabView
 
-// ### Declaring the TabView in xml.
-//``` XML
-// <Page>
-//  <TabView>
-//    <TabView.items>
-//      <TabViewItem title="Tab 1">
-//        <TabViewItem.view>
-//           <Label text="Label in Tab1" />
-//        </TabViewItem.view>
-//      </TabViewItem>
-//      <TabViewItem title="Tab 2">
-//        <TabViewItem.view>
-//           <Label text="Label in Tab2" />
-//        </TabViewItem.view>
-//      </TabViewItem>
-//    </TabView.items>
-//  </TabView>
-// </Page>
-//```
 
 // Using a TabView requires the "ui/tab-view" module.
-// ``` JavaScript
+// >> article-require-tabview-module
 import tabViewModule = require("ui/tab-view");
-// ```
-// </snippet>
+// << article-require-tabview-module
 
 export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
 
     public create(): tabViewModule.TabView {
-        // <snippet module="ui/tab-view" title="TabView">
-        // ## Creating a TabView
-        // ``` JavaScript
+        // >> article-create-tabview
         var tabView = new tabViewModule.TabView();
-        // ```
-        // </snippet>
+        // << article-create-tabview
         tabView.id = "TabView";
         return tabView;
     }
@@ -92,9 +67,7 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
 
     public testSelectedIndexBecomesZeroWhenItemsBoundToNonEmptyArray = function () {
         var tabView = this.testView;
-        // <snippet module="ui/tab-view" title="TabView">
-        // ### Binding TabView.items
-        // ``` JavaScript
+        // >> article-binding-tabview-items
         var items = [];
         var StackLayout0 = new stackLayoutModule.StackLayout();
         var label0 = new labelModule.Label();
@@ -115,8 +88,7 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
         };
         items.push(tabEntry1);
         tabView.items = items;
-        // ```
-        // </snippet>
+        // << article-binding-tabview-items
 
         this.waitUntilTestElementIsLoaded();
 
@@ -131,12 +103,9 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
         tabView.items = this._createItems(10);
         this.waitUntilTestElementIsLoaded();
 
-        // <snippet module="ui/tab-view" title="TabView">
-        // ### Selecting a tab programmatically
-        // ``` JavaScript
+        // >> article-select-tab
         tabView.selectedIndex = 9;
-        // ```
-        // </snippet>
+        // << article-select-tab
         tabView.items = [];
 
         var expectedValue = undefined;
diff --git a/apps/tests/ui/tab-view/tab-view.md b/apps/tests/ui/tab-view/tab-view.md
new file mode 100644
index 000000000..5d068fbd5
--- /dev/null
+++ b/apps/tests/ui/tab-view/tab-view.md
@@ -0,0 +1,33 @@
+---
+nav-title: "TabView How-To"
+title: "How-To"
+description: "Examples for using TabView"
+---
+# TabView
+### Declaring the TabView in xml.
+``` XML
+<Page>
+ <TabView>
+   <TabView.items>
+     <TabViewItem title="Tab 1">
+       <TabViewItem.view>
+          <Label text="Label in Tab1" />
+       </TabViewItem.view>
+     </TabViewItem>
+     <TabViewItem title="Tab 2">
+       <TabViewItem.view>
+          <Label text="Label in Tab2" />
+       </TabViewItem.view>
+     </TabViewItem>
+   </TabView.items>
+ </TabView>
+</Page>
+```
+Using a TabView requires the "ui/tab-view" module.
+<snippet id='article-require-tabview-module'/>
+### Binding TabView.items
+<snippet id='article-binding-tabview-items'/>
+### Selecting a tab programmatically
+<snippet id='article-select-tab'/>
+## Creating a TabView
+<snippet id='article-create-tabview'/>
diff --git a/apps/tests/ui/text-field/text-field-tests.ts b/apps/tests/ui/text-field/text-field-tests.ts
index b2e780d18..2472e0d82 100644
--- a/apps/tests/ui/text-field/text-field-tests.ts
+++ b/apps/tests/ui/text-field/text-field-tests.ts
@@ -9,47 +9,32 @@ import platform = require("platform");
 import formattedStringModule = require("text/formatted-string");
 import spanModule = require("text/span");
 
-// <snippet module="ui/text-field" title="TextField">
-// # TextField
-
-// Using a TextField requires the text-field module.
-// ``` JavaScript
+// >> require-textfield
 import textFieldModule = require("ui/text-field");
-// ```
+// << require-textfield
 // Other frequently used modules when working with buttons include:
-// ``` JavaScript
+
 import bindable = require("ui/core/bindable");
+// >> require-observable
 import observable = require("data/observable");
-// ```
+// << require-observable
 
 // ### Binding two TextFields text property to observable view-model property.
-//``` XML
-// <Page loaded="pageLoaded">
-//  <StackLayout orientation="vertical">
-//    {%raw%}<TextField text="{{ someProperty }}" />
-//    <TextField text="{{ someProperty }}" />{%endraw%}
-//  </StackLayout>
-// </Page>
-//```
-//``` JavaScript
-// function pageLoaded(args) {
-//   var page = args.object;
-//   var obj = new observable.Observable();
-//   obj.set("someProperty", "Please change this text!");
-//   page.bindingContext = obj;
-// }
-// exports.pageLoaded = pageLoaded;
-//```
+// >> binding-text-property
+function pageLoaded(args) {
+  var page = args.object;
+  var obj = new observable.Observable();
+  obj.set("someProperty", "Please change this text!");
+  page.bindingContext = obj;
+}
+exports.pageLoaded = pageLoaded;
+// << binding-text-property
 
-// </snippet> 
 
 var _createTextFieldFunc = function (): textFieldModule.TextField {
-    // <snippet module="ui/text-field" title="TextField">
-    // ## Creating a TextField
-    // ``` JavaScript
+    // >> creating-textfield
     var textField = new textFieldModule.TextField();
-    // ```
-    // </snippet>
+    // << creating-textfield
     textField.text = "textField";
     return textField;
 }
@@ -58,12 +43,9 @@ export var testSetText = function () {
     helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
         var textField = <textFieldModule.TextField>views[0];
         
-        // <snippet module="ui/text-field" title="TextField">
-        // ### Setting the text of a TextField
-        // ``` JavaScript
+        // >> setting-text-property
         textField.text = "Hello, world!";
-        // ```
-        // </snippet>
+        // << setting-text-property
 
         var expectedValue = "Hello, world!";
         var actualValue = textFieldTestsNative.getNativeText(textField);
@@ -101,12 +83,9 @@ export var testSetHintToNumber = function () {
         var textField = <textFieldModule.TextField>views[0];
         var expectedValue = 1;
 
-        // <snippet module="ui/text-field" title="TextField">
-        // ### Setting the text of a TextField
-        // ``` JavaScript
+        // >> setting-hint-property
         textField.hint = <any>expectedValue;
-        // ```
-        // </snippet>
+        // << setting-hint-property
 
         var actualValue = textFieldTestsNative.getNativeHint(textField);
         TKUnit.assert(<any>actualValue == expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
@@ -117,9 +96,7 @@ export var testBindTextDirectlyToModel = function () {
     helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
         var textField = <textFieldModule.TextField>views[0];
 
-        // <snippet module="ui/text-field" title="TextField">
-        // ### Binding text property directly to model
-        // ``` JavaScript
+        // >> binding-text-property-second
         var model = new observable.Observable();
         model.set("username", "john");
         var options: bindable.BindingOptions = {
@@ -128,18 +105,17 @@ export var testBindTextDirectlyToModel = function () {
         }
         textField.bind(options, model);
         //// textField.text is now "john"
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textField.text === "john", "Actual: " + textField.text + "; Expected: " + "john");
         TKUnit.assert(textFieldTestsNative.getNativeText(textField) === "john", "Actual: " + textFieldTestsNative.getNativeText(textField) + "; Expected: " + "john");
-        // </hide>
+        // << (hide)
         model.set("username", "mary");
         //// textField.text is now "mary"
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textField.text === "mary", "Actual: " + textField.text + "; Expected: " + "mary");
         TKUnit.assert(textFieldTestsNative.getNativeText(textField) === "mary", "Actual: " + textFieldTestsNative.getNativeText(textField) + "; Expected: " + "mary");
-        // </hide>
-        // ```
-        // </snippet>
+        // << (hide)
+        // << binding-text-property-second
     });
 }
 
@@ -195,12 +171,9 @@ export var testSetHint = function () {
     helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
         var textField = <textFieldModule.TextField>views[0];
 
-        // <snippet module="ui/text-field" title="TextField">
-        // ### Setting the hint of a TextField
-        // ``` JavaScript
+        // >> setting-hint-text
         textField.hint = "type your username here";
-        // ```
-        // </snippet>
+        // << setting-hint-text
 
         var expectedValue = "type your username here";
         var actualValue = textFieldTestsNative.getNativeHint(textField);
@@ -212,9 +185,7 @@ export var testBindHintDirectlyToModel = function () {
     helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
         var textField = <textFieldModule.TextField>views[0];
 
-        // <snippet module="ui/text-field" title="TextField">
-        // ### Binding hint property directly to model
-        // ``` JavaScript
+        // >> binding-hint-property
         var model = new observable.Observable();
         model.set("hint", "type your username here");
         var options: bindable.BindingOptions = {
@@ -223,18 +194,17 @@ export var testBindHintDirectlyToModel = function () {
         }
         textField.bind(options, model);
         //// textField.hint is now "type your username here"
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textField.hint === "type your username here", "Actual: " + textField.text + "; Expected: " + "type your username here");
         TKUnit.assert(textFieldTestsNative.getNativeHint(textField) === "type your username here", "Actual: " + textFieldTestsNative.getNativeHint(textField) + "; Expected: " + "type your username here");
-        // </hide>
+        // << (hide)
         model.set("hint", "type your password here");
         //// textField.hint is now "type your password here"
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textField.hint === "type your password here", "Actual: " + textField.text + "; Expected: " + "type your password here");
         TKUnit.assert(textFieldTestsNative.getNativeHint(textField) === "type your password here", "Actual: " + textFieldTestsNative.getNativeHint(textField) + "; Expected: " + "type your password here");
-        // </hide>
-        // ```
-        // </snippet>
+        // << (hide)
+        // << binding-hint-property
     });
 }
 
@@ -266,12 +236,9 @@ export var testSetSecure = function () {
     helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
         var textField = <textFieldModule.TextField>views[0];
 
-        // <snippet module="ui/text-field" title="TextField">
-        // ### Setting the secure property of a TextField
-        // ``` JavaScript
+        // >> setting-secure-property
         textField.secure = true;
-        // ```
-        // </snippet>
+        // << setting-secure-property
 
         var expectedValue = true;
         var actualValue = textFieldTestsNative.getNativeSecure(textField);
@@ -283,9 +250,7 @@ export var testBindSecureDirectlyToModel = function () {
     helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
         var textField = <textFieldModule.TextField>views[0];
 
-        // <snippet module="ui/text-field" title="TextField">
-        // ### Binding secure property directly to model
-        // ``` JavaScript
+        // >> binding-secure-property
         var model = new observable.Observable();
         model.set("secure", true);
         var options: bindable.BindingOptions = {
@@ -294,18 +259,17 @@ export var testBindSecureDirectlyToModel = function () {
         }
         textField.bind(options, model);
         //// textField.secure is now true
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textField.secure === true, "Actual: " + textField.secure + "; Expected: " + true);
         TKUnit.assert(textFieldTestsNative.getNativeSecure(textField) === true, "Actual: " + textFieldTestsNative.getNativeSecure(textField) + "; Expected: " + true);
-        // </hide>
+        // << (hide)
         model.set("secure", false);
         //// textField.secure is now false
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textField.secure === false, "Actual: " + textField.secure + "; Expected: " + false);
         TKUnit.assert(textFieldTestsNative.getNativeSecure(textField) === false, "Actual: " + textFieldTestsNative.getNativeSecure(textField) + "; Expected: " + false);
-        // </hide>
-        // ```
-        // </snippet>
+        // << (hide)
+        // << binding-secure-property
     });
 }
 
diff --git a/apps/tests/ui/text-field/text-field.md b/apps/tests/ui/text-field/text-field.md
new file mode 100644
index 000000000..eb253c34b
--- /dev/null
+++ b/apps/tests/ui/text-field/text-field.md
@@ -0,0 +1,35 @@
+---
+nav-title: "TextField How-To"
+title: "How-To"
+description: "Examples for using TextField"
+---
+# TextField
+Using a TextField requires the text-field module.
+<snippet id='require-textfield'/>
+<snippet id='require-observable'/>
+### Binding two TextFields text property to observable view-model property.
+```XML
+ <Page loaded="pageLoaded">
+  <StackLayout orientation="vertical">
+    {%raw%}<TextView text="{{ someProperty }}" />
+    <TextView text="{{ someProperty }}" />{%endraw%}
+  </StackLayout>
+ </Page>
+```
+<snippet id='binding-text-property'/>
+## Creating a TextField
+<snippet id='creating-textfield'/>
+### Setting the text of a TextField
+<snippet id='setting-text-property'/>
+### Setting the text of a TextField
+<snippet id='setting-hint-property'/>
+### Binding text property directly to model
+<snippet id='binding-text-property-second'/>
+### Setting the hint of a TextField
+<snippet id='setting-hint-text'/>
+### Binding hint property directly to model
+<snippet id='binding-hint-property'/>
+### Setting the secure property of a TextField
+<snippet id='setting-secure-property'/>
+### Binding secure property directly to model
+<snippet id='binding-secure-property'/>
diff --git a/apps/tests/ui/text-view/text-view-tests.ts b/apps/tests/ui/text-view/text-view-tests.ts
index f02510690..3e413c3e1 100644
--- a/apps/tests/ui/text-view/text-view-tests.ts
+++ b/apps/tests/ui/text-view/text-view-tests.ts
@@ -7,29 +7,25 @@ import colorModule = require("color");
 import enums = require("ui/enums");
 import platform = require("platform");
 
-// <snippet module="ui/text-view" title="TextView">
-// # TextView
-
-// Using a TextView requires the text-view module.
-// ``` JavaScript
+// >> require-textmodules
 import textViewModule = require("ui/text-view");
-// ```
-// Other frequently used modules when working with buttons include:
-// ``` JavaScript
-import bindable = require("ui/core/bindable");
-import observable = require("data/observable");
-// ```
+// << require-textmodules
 
-// ### Binding two TextViews text property to observable view-model property.
-//``` XML
+// Other frequently used modules when working with buttons include:
+import bindable = require("ui/core/bindable");
+// >> require-observable
+import observable = require("data/observable");
+// << require-observable
+
+// >> text-view-xml
 // <Page loaded="pageLoaded">
 //  <StackLayout orientation="vertical">
 //    {%raw%}<TextView text="{{ someProperty }}" />
 //    <TextView text="{{ someProperty }}" />{%endraw%}
 //  </StackLayout>
 // </Page>
-//```
-//``` JavaScript
+// << text-view-xml
+// >> observable-declare
 // function pageLoaded(args) {
 //   var page = args.object;
 //   var obj = new observable.Observable();
@@ -37,17 +33,12 @@ import observable = require("data/observable");
 //   page.bindingContext = obj;
 // }
 // exports.pageLoaded = pageLoaded;
-//```
-
-// </snippet> 
+// << observable-declare
 
 var _createTextViewFunc = function (): textViewModule.TextView {
-    // <snippet module="ui/text-view" title="TextView">
-    // ### Creating a TextView
-    // ``` JavaScript
+    // >> text-view-create
     var textView = new textViewModule.TextView();
-    // ```
-    // </snippet>
+    // << text-view-create
     textView.text = "textView";
     return textView;
 }
@@ -56,12 +47,9 @@ export var testSetText = function () {
     helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
         var textView = <textViewModule.TextView>views[0];
         
-        // <snippet module="ui/text-view" title="TextView">
-        // ### Setting the text of a TextView
-        // ``` JavaScript
+        // >> set-text-value
         textView.text = "Hello, world!";
-        // ```
-        // </snippet>
+        // << set-text-value
 
         var expectedValue = "Hello, world!";
         var actualValue = textViewTestsNative.getNativeText(textView);
@@ -108,9 +96,7 @@ export var testBindTextDirectlyToModel = function () {
     helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
         var textView = <textViewModule.TextView>views[0];
 
-        // <snippet module="ui/text-view" title="TextView">
-        // ### Binding text property directly to model
-        // ``` JavaScript
+        // >> binding-text-property
         var model = new observable.Observable();
         model.set("username", "john");
         var options: bindable.BindingOptions = {
@@ -119,18 +105,17 @@ export var testBindTextDirectlyToModel = function () {
         }
         textView.bind(options, model);
         //// textView.text is now "john"
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textView.text === "john", "Actual: " + textView.text + "; Expected: " + "john");
         TKUnit.assert(textViewTestsNative.getNativeText(textView) === "john", "Actual: " + textViewTestsNative.getNativeText(textView) + "; Expected: " + "john");
-        // </hide>
+        // << (hide)
         model.set("username", "mary");
         //// textView.text is now "mary"
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textView.text === "mary", "Actual: " + textView.text + "; Expected: " + "mary");
         TKUnit.assert(textViewTestsNative.getNativeText(textView) === "mary", "Actual: " + textViewTestsNative.getNativeText(textView) + "; Expected: " + "mary");
-        // </hide>
-        // ```
-        // </snippet>
+        // << (hide)
+        // >> binding-text-property
     });
 }
 
@@ -176,12 +161,9 @@ export var testSetHint = function () {
         var textView = <textViewModule.TextView>views[0];
         textView.text = "";
 
-        // <snippet module="ui/text-view" title="TextView">
-        // ### Setting the hint of a TextView
-        // ``` JavaScript
+        // >> set-textview-hint
         textView.hint = "type your username here";
-        // ```
-        // </snippet>
+        // << set-textview-hint
 
         var expectedValue = "type your username here";
         var actualValue = textViewTestsNative.getNativeHint(textView);
@@ -194,9 +176,7 @@ export var testBindHintDirectlyToModel = function () {
         var textView = <textViewModule.TextView>views[0];
         textView.text = "";
 
-        // <snippet module="ui/text-view" title="TextView">
-        // ### Binding hint property directly to model
-        // ``` JavaScript
+        // >> binding-hint-property
         var model = new observable.Observable();
         model.set("hint", "type your username here");
         var options: bindable.BindingOptions = {
@@ -205,18 +185,17 @@ export var testBindHintDirectlyToModel = function () {
         }
         textView.bind(options, model);
         //// TextView.hint is now "type your username here"
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textView.hint === "type your username here", "Actual: " + textView.hint + "; Expected: " + "type your username here");
         TKUnit.assert(textViewTestsNative.getNativeHint(textView) === "type your username here", "Actual: " + textViewTestsNative.getNativeHint(textView) + "; Expected: " + "type your username here");
-        // </hide>
+        // << (hide)
         model.set("hint", "type your password here");
         //// TextView.hint is now "type your password here"
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textView.hint === "type your password here", "Actual: " + textView.hint + "; Expected: " + "type your password here");
         TKUnit.assert(textViewTestsNative.getNativeHint(textView) === "type your password here", "Actual: " + textViewTestsNative.getNativeHint(textView) + "; Expected: " + "type your password here");
-        // </hide>
-        // ```
-        // </snippet>
+        // << (hide)
+        // << binding-hint-property
     });
 }
 
@@ -304,12 +283,9 @@ export var testSetEditable = function () {
     helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
         var textView = <textViewModule.TextView>views[0];
 
-        // <snippet module="ui/text-view" title="TextView">
-        // ### Setting the editable property of a TextView
-        // ``` JavaScript
+        // >> setting-editable-property
         textView.editable = false;
-        // ```
-        // </snippet>
+        // << setting-editable-property
 
         var expectedValue = false;
         var actualValue = textViewTestsNative.getNativeEditable(textView);
@@ -321,9 +297,7 @@ export var testBindEditableDirectlyToModel = function () {
     helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
         var textView = <textViewModule.TextView>views[0];
 
-        // <snippet module="ui/text-view" title="TextView">
-        // ### Binding editable property directly to model
-        // ``` JavaScript
+        // >> binding-editable-property
         var model = new observable.Observable();
         model.set("editable", false);
         var options: bindable.BindingOptions = {
@@ -332,18 +306,17 @@ export var testBindEditableDirectlyToModel = function () {
         }
         textView.bind(options, model);
         //// textView.editable is now false
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textView.editable === false, "Actual: " + textView.text + "; Expected: " + false);
         TKUnit.assert(textViewTestsNative.getNativeEditable(textView) === false, "Actual: " + textViewTestsNative.getNativeEditable(textView) + "; Expected: " + false);
-        // </hide>
+        // << (hide)
         model.set("editable", true);
         //// textView.editable is now true
-        // <hide>
+        // >> (hide)
         TKUnit.assert(textView.editable === true, "Actual: " + textView.text + "; Expected: " + true);
         TKUnit.assert(textViewTestsNative.getNativeEditable(textView) === true, "Actual: " + textViewTestsNative.getNativeEditable(textView) + "; Expected: " + true);
-        // </hide>
-        // ```
-        // </snippet>
+        // << (hide)
+        // << binding-editable-property
     });
 }
 
diff --git a/apps/tests/ui/text-view/text-view.md b/apps/tests/ui/text-view/text-view.md
new file mode 100644
index 000000000..8565766ff
--- /dev/null
+++ b/apps/tests/ui/text-view/text-view.md
@@ -0,0 +1,26 @@
+---
+nav-title: "TextView How-To"
+title: "How-To"
+description: "Examples for using TextView"
+---
+# TextView
+Using a TextView requires the text-view module.
+<snippet id='require-textmodules'/>
+<snippet id='require-observable'/>
+### Binding two TextViews text property to observable view-model property.
+<snippet id='text-view-xml'/>
+<snippet id='observable-declare'/>
+### Creating a TextView
+<snippet id='text-view-create'/>
+### Setting the text of a TextView
+<snippet id='set-text-value'/>
+### Binding text property directly to model
+<snippet id='binding-text-property'/>
+### Setting the hint of a TextView
+<snippet id='set-textview-hint'/>
+### Binding hint property directly to model
+<snippet id='binding-hint-property'/>
+### Setting the editable property of a TextView
+<snippet id='setting-editable-property'/>
+### Binding editable property directly to model
+<snippet id='binding-editable-property'/>
diff --git a/apps/tests/ui/time-picker/time-picker-tests.ts b/apps/tests/ui/time-picker/time-picker-tests.ts
index 6114c65ea..d1b2c4dfe 100644
--- a/apps/tests/ui/time-picker/time-picker-tests.ts
+++ b/apps/tests/ui/time-picker/time-picker-tests.ts
@@ -4,13 +4,9 @@ import timePickerTestsNative = require("./time-picker-tests-native");
 import color = require("color");
 import platform = require("platform");
 
-// <snippet module="ui/time-picker" title="TimePicker">
-// # TimePicker
-// Using a TimePicker requires the "ui/time-picker" module.
-// ``` JavaScript
+// >> require-time-picker
 import timePickerModule = require("ui/time-picker");
-// ```
-// </snippet>
+// << require-time-picker
 
 function assertTime(timePicker: timePickerModule.TimePicker, expectedHour: number, expectedMinute) {
     TKUnit.assertEqual(timePicker.hour, expectedHour, "timePicker.hour");
@@ -28,14 +24,11 @@ export class TimePickerTest extends testModule.UITest<timePickerModule.TimePicke
     }
     
     public test_DummyForCodeSnippet() {
-        // <snippet module="ui/time-picker" title="TimePicker">
-        // ## Configuring a TimePicker
-        // ``` JavaScript
+        // >> declare-time-picker
         var timePicker = new timePickerModule.TimePicker();
         timePicker.hour = 9;
         timePicker.minute = 25;
-        // ```
-        // </snippet>
+        // << declare-time-picker
     }
     
     private setUpTimePicker(hour?: number, minute?: number) {
diff --git a/apps/tests/ui/time-picker/time-picker.md b/apps/tests/ui/time-picker/time-picker.md
new file mode 100644
index 000000000..2e4060d58
--- /dev/null
+++ b/apps/tests/ui/time-picker/time-picker.md
@@ -0,0 +1,10 @@
+---
+nav-title: "TimePicker How-To"
+title: "How-To"
+description: "Examples for using TimePicker"
+---
+# TimePicker
+Using a TimePicker requires the "ui/time-picker" module.
+<snippet id='require-time-picker'/>
+## Configuring a TimePicker
+<snippet id='declare-time-picker'/>
diff --git a/apps/tests/ui/web-view/web-view-tests.ts b/apps/tests/ui/web-view/web-view-tests.ts
index 4e39ccd9b..71aecbb9c 100644
--- a/apps/tests/ui/web-view/web-view-tests.ts
+++ b/apps/tests/ui/web-view/web-view-tests.ts
@@ -1,42 +1,31 @@
 import TKUnit = require("../../TKUnit");
 import testModule = require("../../ui-test");
 
-// <snippet module="ui/web-view" title="WebView">
-// # WebView
-// Using a WebView requires the web-view module.
-// ``` JavaScript
+// >> webview-require
 import webViewModule = require("ui/web-view");
-// ```
-// </snippet>
+// << webview-require
 
-// <snippet module="ui/web-view" title="WebView">
-// ### Declaring a WebView.
-//``` XML
+
+// >> declare-webview-xml
 //  <Page>
 //       {%raw%}<WebView src="{{ someUrl | pathToLocalFile | htmlString }}" />{%endraw%}
 //  </Page>
-//```
+// << declare-webview-xml
 
-// </snippet>
 
 export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
 
     public create(): webViewModule.WebView {
-        // <snippet module="ui/web-view" title="WebView">
-        // ### Creating a WebView
-        // ``` JavaScript
+        // >> declare-webview
         let webView = new webViewModule.WebView();
-        // ```
-        // </snippet>
+        // << declare-webview
         return webView;
     }
 
     public testLoadExistingUrl(done) {
         let webView = this.testView;
 
-        // <snippet module="ui/web-view" title="WebView">
-        // ### Using WebView
-        // ``` JavaScript
+        // >> webview-url
         webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {
             let message;
             if (!args.error) {
@@ -46,7 +35,7 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
                 message = "Error loading " + args.url + ": " + args.error;
             }
 
-            // <hide>
+            // >> (hide)
             try {
                 TKUnit.assertNull(args.error, args.error);
                 TKUnit.assertEqual(args.url, "https://github.com/", "args.url");
@@ -56,21 +45,18 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
                 done(e);
             }
 
-            // </hide>
+            // << (hide)
         });
         webView.url = "https://github.com/";
-        // ```
-        // </snippet>
+        // << webview-url
     }
 
     public testLoadLocalFile(done) {
         let webView = this.testView;
 
-        // <snippet module="ui/web-view" title="WebView">
-        // ### Using WebView
-        // ``` JavaScript
+        // >> webview-localfile
         webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {
-            // <hide>
+            // >> (hide)
             let actual;
             let expectedTitle = 'MyTitle';
             let expectedHtml = '<span style="color:red">TestÖ</span>';
@@ -89,7 +75,7 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
             catch (e) {
                 done(e);
             }
-            // </hide>
+            // << (hide)
 
             let message;
             if (!args.error) {
@@ -100,18 +86,15 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
             }
         });
         webView.src = "~/ui/web-view/test.html";
-        // ```
-        // </snippet> 
+        // << webview-localfile
     }
 
     public testLoadHTMLString(done) {
         let webView = this.testView;
 
-        // <snippet module="ui/web-view" title="WebView">
-        // ### Using WebView
-        // ``` JavaScript
+        // >> webview-string
         webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {
-            // <hide>
+            // >> (hide)
 
             let actual;
             let expected;
@@ -132,7 +115,7 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
             catch (e) {
                 done(e);
             }
-            // </hide>
+            // << (hide)
 
             let message;
             if (!args.error) {
@@ -143,8 +126,7 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
             }
         });
         webView.src = '<!DOCTYPE html><html><head><title>MyTitle</title><meta charset="utf-8" /></head><body><span style="color:red">TestÖ</span></body></html>';
-        // ```
-        // </snippet>
+        // << webview-string
     }
 
     public testLoadInvalidUrl(done) {
diff --git a/apps/tests/ui/web-view/web-view.md b/apps/tests/ui/web-view/web-view.md
new file mode 100644
index 000000000..3edc8e419
--- /dev/null
+++ b/apps/tests/ui/web-view/web-view.md
@@ -0,0 +1,18 @@
+---
+nav-title: "WebView How-To"
+title: "How-To"
+description: "Examples for using WebView"
+---
+# WebView
+Using a WebView requires the web-view module.
+<snippet id='webview-require'/>
+### Declaring a WebView.
+<snippet id='declare-webview-xml'/>
+### Creating a WebView
+<snippet id='declare-webview'/>
+### Using WebView
+<snippet id='webview-url'/>
+### Using WebView
+<snippet id='webview-localfile'/>
+### Using WebView
+<snippet id='webview-string'/>
\ No newline at end of file
diff --git a/apps/tests/xml-parser-tests/xml-parser-tests.ts b/apps/tests/xml-parser-tests/xml-parser-tests.ts
index 9dfa2176f..f55d1ea23 100644
--- a/apps/tests/xml-parser-tests/xml-parser-tests.ts
+++ b/apps/tests/xml-parser-tests/xml-parser-tests.ts
@@ -1,10 +1,6 @@
-// <snippet module="xml" title="xml">
-// # Xml module
-// Using xml requires the Xml module.
-// ``` JavaScript
+// >> xml-module-snippet
 //var xmlModule = require("xml");
-// ```
-// </snippet>
+// << xml-module-snippet
 
 import TKUnit = require("../TKUnit");
 import xmlModule = require("xml");
@@ -61,7 +57,7 @@ export var test_XmlParser_OnErrorIsCalledWhenAnErrorOccurs = function () {
     var e;
     var xmlParser = new xmlModule.XmlParser(
         function (event: xmlModule.ParserEvent) {
-            //
+            
         },
         function (error: Error) {
             e = error;
@@ -121,9 +117,8 @@ export var test_XmlParser_IntegrationTest = function () {
 };
 
 export var test_XmlParser_DummyDocumentationTest = function () {
-    // <snippet module="xml" title="xml">
-    // ### Parse XML
-    // ``` JavaScript
+    
+    // >> xml-parser-snippet
     var onEventCallback = function (event: xmlModule.ParserEvent) {
         switch (event.eventType) {
 
@@ -168,8 +163,7 @@ export var test_XmlParser_DummyDocumentationTest = function () {
     //// Text = "I am second"
     //// EndElement Second
     //// EndElement Document
-    // ```
-    // </snippet>
+    // << xml-parser-snippet
 };
 
 export var test_XmlParser_NamespacesTest = function () {
diff --git a/apps/tests/xml-parser-tests/xml-parser.md b/apps/tests/xml-parser-tests/xml-parser.md
new file mode 100644
index 000000000..fedbea2f5
--- /dev/null
+++ b/apps/tests/xml-parser-tests/xml-parser.md
@@ -0,0 +1,11 @@
+---
+nav-title: "xml How-To"
+title: "How-To"
+description: "Examples for using xml"
+---
+# Xml module
+Using xml requires the Xml module.
+<snippet id='xml-module-snippet'/>
+### Parse XML
+<snippet id='xml-parser-snippet'/>
+
diff --git a/gruntfile.js b/gruntfile.js
index 6c358c93f..d28154763 100644
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -429,7 +429,7 @@ module.exports = function(grunt) {
                 cmd: "grunt simplemocha:node"
             },
             injectArticles: {
-                cmd: "./node_modules/.bin/mdinject --root=<%= localCfg.srcAppsTests %> --docsroot=<%= localCfg.outArticlesDir %>"
+                cmd: "node node_modules/markdown-snippet-injector/index.js --root=<%= localCfg.srcAppsTests %> --docsroot=<%= localCfg.outArticlesDir %>"
             }
         },
         multidest: {