diff --git a/apps/tests/layouts/absolute-layout-tests.ts b/apps/tests/layouts/absolute-layout-tests.ts
index 8fe0ca5f5..df28a37a2 100644
--- a/apps/tests/layouts/absolute-layout-tests.ts
+++ b/apps/tests/layouts/absolute-layout-tests.ts
@@ -5,23 +5,9 @@ import colorModule = require("color");
 import layoutHelper = require("./layout-helper");
 import commonTests = require("./common-layout-tests");
 
-// <snippet module="ui/layouts/absolute-layout" title="absolute-layout">
-// # AbsoluteLayout
-// Using a AbsoluteLayout requires the AbsoluteLayout module.
-// ``` JavaScript
+// >> absolute-layout-require
 import absoluteLayoutModule = require("ui/layouts/absolute-layout");
-// ```
-// </snippet> 
-
-// ### Declaring a AbsoluteLayout.
-//``` XML
-// <Page>
-//   <AbsoluteLayout>
-//     <Label text="This is Label 1" left="30" top="70" />
-//   </AbsoluteLayout>
-// </Page>
-//```
-// </snippet>
+// << absolute-layout-require
 
 export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.AbsoluteLayout> {
 
@@ -31,9 +17,7 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
 
     public snippet() {
 
-        // <snippet module="ui/layouts/absolute-layout" title="absolute-layout">
-        // ## Creating and populating a AbsoluteLayout with children
-        // ``` JavaScript
+        // >> absolute-layout-populating
         var absoluteLayout = new absoluteLayoutModule.AbsoluteLayout();
         absoluteLayout.width = 230;
         absoluteLayout.height = 230;
@@ -48,8 +32,7 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
         label.id = "LT";
         label.style.backgroundColor = new colorModule.Color("Red");
         absoluteLayout.addChild(label);
-        // ```
-        // </snippet>
+        // << absolute-layout-populating
     }
 
     public testAll() {
diff --git a/apps/tests/layouts/absolute-layout.md b/apps/tests/layouts/absolute-layout.md
new file mode 100644
index 000000000..ca920e27e
--- /dev/null
+++ b/apps/tests/layouts/absolute-layout.md
@@ -0,0 +1,19 @@
+---
+nav-title: "absolute-layout How-To"
+title: "How-To"
+description: "Examples for using absolute-layout"
+---
+# AbsoluteLayout
+Using a AbsoluteLayout requires the AbsoluteLayout module.
+<snippet id='absolute-layout-require'/>
+
+``` XML
+<Page>
+  <AbsoluteLayout>
+    <Label text="This is Label 1" left="30" top="70" />
+  </AbsoluteLayout>
+</Page>
+```
+
+## Creating and populating a AbsoluteLayout with children
+<snippet id='absolute-layout-populating'/>
diff --git a/apps/tests/layouts/dock-layout-tests.ts b/apps/tests/layouts/dock-layout-tests.ts
index d21bc963c..06c440475 100644
--- a/apps/tests/layouts/dock-layout-tests.ts
+++ b/apps/tests/layouts/dock-layout-tests.ts
@@ -6,32 +6,13 @@ import testModule = require("../ui-test");
 import layoutHelper = require("./layout-helper");
 import commonTests = require("./common-layout-tests");
 
-// <snippet module="ui/layouts/dock-layout" title="dock-layout">
-// # DockLayout
-// Using a DockLayout requires the DockLayout module.
-// ``` JavaScript
+// >> <snippet id='dock-layout-require'/>
 import dockModule = require("ui/layouts/dock-layout");
-// ```
+// << <snippet id='dock-layout-require'/>
 
-// ### Declaring a DockLayout.
-//``` XML
-//<Page>
-//  <DockLayout stretchLastChild="true" >
-//    <Button dock="left" text="left" style="background-color: red; margin: 5;"/ >/ >
-//    <Button dock="top" text="top" style="background-color: lightblue; margin: 5;"/ >
-//    <Button dock="right" text="right" style="background-color: lightgreen; margin: 5;"/ >
-//    <Button dock="bottom" text="bottom" style="background-color: lightpink; margin: 5;"/ >
-//    <Button text="fill" style="background-color: wheat; margin: 5;"/ >
-//  </DockLayout >
-//</Page>
-//```
-// </snippet>
-
-// Other frequently used modules when working with a DockLayout include:
-// ``` JavaScript
+// >> dock-layout-others
 import enums = require("ui/enums");
-// ```
-// </snippet> 
+// << dock-layout-others
 
 export class DockLayoutTest extends testModule.UITest<DockLayout> {
 
@@ -164,30 +145,24 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
     }
 
     public test_codesnippets() {
-        // <snippet module="ui/layouts/dock-layout" title="dock-layout">
-        // ## Create DockLayout
-        // ``` JavaScript
+        // >> dock-layout-create
         var dockLayout = new dockModule.DockLayout();
-        //  ```
-
-        // ## Add child view to layout
-        // ``` JavaScript
+        //  << dock-layout-create
+        
+        // >> dock-layout-addchild
         var btn = new button.Button();
         dockLayout.addChild(btn);
-        //  ```
+        // << dock-layout-addchild
 
-        // ## Remove child view from layout
-        // ``` JavaScript
+        // >> dock-layout-removechild
         dockLayout.removeChild(btn);
-        // ```
+        // << dock-layout-removechild
 
-        // ## Setting the dock property
-        // ``` JavaScript
+        // >> dock-layout-setdocl
         var btnDockedToRight = new button.Button();
         dockModule.DockLayout.setDock(btnDockedToRight, enums.Dock.right);
         dockLayout.addChild(btnDockedToRight);
-        // ```
-        // </snippet>
+        // << dock-layout-setdocl
     }
 
     public test_percent_support() {
diff --git a/apps/tests/layouts/dock-layout.md b/apps/tests/layouts/dock-layout.md
new file mode 100644
index 000000000..ac332b1a0
--- /dev/null
+++ b/apps/tests/layouts/dock-layout.md
@@ -0,0 +1,37 @@
+
+---
+nav-title: "dock-layout How-To"
+title: "How-To"
+description: "Examples for using dock-layout"
+---
+# DockLayout
+Using a DockLayout requires the DockLayout module.
+<snippet id='dock-layout-require'/>
+
+### Declaring a DockLayout.
+``` XML
+<Page>
+ <DockLayout stretchLastChild="true">
+   <Button dock="left" text="left" style="background-color: red; margin: 5;" />
+   <Button dock="top" text="top" style="background-color: lightblue; margin: 5;" />
+   <Button dock="right" text="right" style="background-color: lightgreen; margin: 5;" />
+   <Button dock="bottom" text="bottom" style="background-color: lightpink; margin: 5;" />
+   <Button text="fill" style="background-color: wheat; margin: 5;" />
+ </DockLayout>
+</Page>
+```
+
+Other frequently used modules when working with a DockLayout include:
+<snippet id='dock-layout-others'/>
+
+## Create DockLayout
+<snippet id='dock-layout-create'/>
+
+## Add child view to layout
+<snippet id='dock-layout-addchild'/>
+
+## Remove child view from layout
+<snippet id='dock-layout-removechild'/>
+
+## Setting the dock property
+<snippet id='dock-layout-setdocl'/>
diff --git a/apps/tests/layouts/grid-layout-tests.ts b/apps/tests/layouts/grid-layout-tests.ts
index 0e6b4adc9..f3ce31fed 100644
--- a/apps/tests/layouts/grid-layout-tests.ts
+++ b/apps/tests/layouts/grid-layout-tests.ts
@@ -561,27 +561,12 @@ export class GridLayoutTest extends testModule.UITest<GridLayout> {
     }
 
     public test_codesnippets = function () {
-        // <snippet module="ui/layouts/grid-layout" title="grid-layout">
-        // ## GridLayout sample
-        // ### Creating Grid Layout via code.
-        // ``` JavaScript
+        // >> grid-layout-require
         //var layout = require("ui/layouts/grid-layout");
         var gridLayout = new GridLayout();
-        //  ```
+        //  << grid-layout-require
 
-        // ### Create grid layout with an xml declaration
-        // ``` XML
-        // <GridLayout columns="80, *, auto" rows="auto, *" >
-        //  <Button col="0" />
-        //  <Button col="1" />
-        //  <Button col="2" />
-        //// by default column and row are set to 0
-        //  <Button row="1" colSpan="3" />
-        // </GridLayout>
-        // ```
-
-        // ### Add views to grid layout
-        // ``` JavaScript
+        // >> grid-layout-addviews
         var btn1 = new Button();
         var btn2 = new Button();
         var btn3 = new Button();
@@ -590,27 +575,23 @@ export class GridLayoutTest extends testModule.UITest<GridLayout> {
         gridLayout.addChild(btn2);
         gridLayout.addChild(btn3);
         gridLayout.addChild(btn4);
-        //  ```
-
-        // ### Set column property on views - btn1 in first column, btn2 is second and btn3 in third
-        // ``` JavaScript
+        //  << grid-layout-addviews
+        
+        // >> grid-layout-setcolumn
         GridLayout.setColumn(btn1, 0);
         GridLayout.setColumn(btn2, 1);
         GridLayout.setColumn(btn3, 2);
-        // ```
-
-        // ### Set row property on btn4.
-        // ``` JavaScript
+        // << grid-layout-setcolumn
+        
+        // >> grid-layout-setrow
         GridLayout.setRow(btn4, 1);
-        // ```
+        // << grid-layout-setrow
 
-        // ### Set columnSpan property on btn4 to stretch into all columns
-        // ``` JavaScript
+        // >> grid-layout-columnspan
         GridLayout.setColumnSpan(btn4, 3);
-        // ```
+        // << grid-layout-columnspan
 
-        // ### Create ItemSpec for columns and rows 3 columns - 80px, *, auto size and 2 rows - 100px and auto size
-        // ``` JavaScript
+        // >> grid-layout-itemspec
         //// ItemSpec modes of the column refers to its width.
         //// Absolute size of the column
         var firstColumn = new ItemSpec(80, GridUnitType.pixel);
@@ -622,17 +603,15 @@ export class GridLayoutTest extends testModule.UITest<GridLayout> {
         //// Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
         var firstRow = new ItemSpec(1, GridUnitType.auto);
         var secondRow = new ItemSpec(1, GridUnitType.star);
-        // ```
-
-        // ### Add columns and rows to GridLayout
-        // ``` JavaScript
+        // << grid-layout-itemspec
+        
+        // >> grid-layout-add-rowscols
         gridLayout.addColumn(firstColumn);
         gridLayout.addColumn(secondColumn);
         gridLayout.addColumn(thirdColumn);
         gridLayout.addRow(firstRow);
         gridLayout.addRow(secondRow);
-        // ```
-        // </snippet>
+        // << grid-layout-add-rowscols
     }
 
     public test_percent_support() {
diff --git a/apps/tests/layouts/grid-layout.md b/apps/tests/layouts/grid-layout.md
new file mode 100644
index 000000000..84cf24f0e
--- /dev/null
+++ b/apps/tests/layouts/grid-layout.md
@@ -0,0 +1,37 @@
+---
+nav-title: "grid-layout How-To"
+title: "How-To"
+description: "Examples for using grid-layout"
+---
+## GridLayout sample
+### Creating Grid Layout via code.
+<snippet id='grid-layout-require'/>
+
+### Create grid layout with an xml declaration
+``` XML
+<GridLayout columns="80, *, auto" rows="auto, *" >
+ <Button col="0" />
+ <Button col="1" />
+ <Button col="2" />
+ // by default column and row are set to 0
+ <Button row="1" colSpan="3" />
+</GridLayout>
+```
+
+### Add views to grid layout
+<snippet id='grid-layout-addviews'/>
+
+### Set column property on views - btn1 in first column, btn2 is second and btn3 in third
+<snippet id='grid-layout-setcolumn'/>
+
+### Set row property on btn4.
+<snippet id='grid-layout-setrow'/>
+
+### Set columnSpan property on btn4 to stretch into all columns
+<snippet id='grid-layout-columnspan'/>
+
+### Create ItemSpec for columns and rows 3 columns - 80px, *, auto size and 2 rows - 100px and auto size
+<snippet id='grid-layout-itemspec'/>
+
+### Add columns and rows to GridLayout
+<snippet id='grid-layout-add-rowscols'/>
diff --git a/apps/tests/layouts/stack-layout-tests.ts b/apps/tests/layouts/stack-layout-tests.ts
index 0fb48a27e..4c0c5a472 100644
--- a/apps/tests/layouts/stack-layout-tests.ts
+++ b/apps/tests/layouts/stack-layout-tests.ts
@@ -161,42 +161,28 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {
     }
 
     public test_codesnippets() {
-        // <snippet module="ui/layouts/stack-layout" title="stack-layout">
-        // ### import StackLayout and Button classes
+        
+        // >> stack-layout-new     
         // var StackLayout = require("ui/layouts/stack-layout").StackLayout;
+        // >> (hide)
         // var Button = require("ui/button").Button;
-        // ### Create StackLayout
-        // ``` JavaScript        
+        // << (hide)
         var stackLayout = new StackLayout();
-        //  ```
+        // << stack-layout-new
 
-        // ### Declaring a StackLayout.
-        //``` XML
-        // <Page>
-        //   <StackLayout orientation="horizontal">
-        //     <Label text="This is Label 1" />
-        //   </StackLayout>
-        // </Page>
-        //```
-        // </snippet>
-
-        // ### Add child view to layout
-        // ``` JavaScript
+        // >> stack-layout-addchild
         var btn = new Button();
         stackLayout.addChild(btn);
-        //  ```
+        //  << stack-layout-addchild
 
-        // ### Remove child view from layout
-        // ``` JavaScript
+        // >> stack-layout-remove
         stackLayout.removeChild(btn);
-        // ```
+        // << stack-layout-remove
 
-        // ### Change layout orientation to Horizontal
-        // ``` JavaScript
+        // >> stack-layout-horizontal
         stackLayout.orientation = enums.Orientation.horizontal;
-        // ```
+        // << stack-layout-horizontal
 
-        // </snippet>
     }
 
     private setup_percent(): layoutHelper.MyButton {
diff --git a/apps/tests/layouts/stack-layout.md b/apps/tests/layouts/stack-layout.md
new file mode 100644
index 000000000..d0750a5e1
--- /dev/null
+++ b/apps/tests/layouts/stack-layout.md
@@ -0,0 +1,29 @@
+---
+nav-title: "stack-layout How-To"
+title: "How-To"
+description: "Examples for using stack-layout"
+---
+### import StackLayout and Button classes
+var StackLayout = require("ui/layouts/stack-layout").StackLayout;
+var Button = require("ui/button").Button;
+### Create StackLayout
+<snippet id='stack-layout-new'/>
+ 
+### Declaring a StackLayout.
+``` XML
+<Page>
+  <StackLayout orientation="horizontal">
+    <Label text="This is Label 1" />
+  </StackLayout>
+</Page>
+```
+
+### Add child view to layout
+<snippet id='stack-layout-addchild'/>
+
+### Remove child view from layout
+<snippet id='stack-layout-remove'/>
+
+### Change layout orientation to Horizontal
+<snippet id='stack-layout-horizontal'/>
+
diff --git a/apps/tests/layouts/wrap-layout-tests.ts b/apps/tests/layouts/wrap-layout-tests.ts
index c185eb95d..9c6ec4cbf 100644
--- a/apps/tests/layouts/wrap-layout-tests.ts
+++ b/apps/tests/layouts/wrap-layout-tests.ts
@@ -4,41 +4,20 @@ import layoutHelper = require("./layout-helper");
 import testModule = require("../ui-test");
 import commonTests = require("./common-layout-tests");
 
-// <snippet module="ui/layouts/wrap-layout" title="WrapLayout">
-// # WrapLayout
-// Using a WrapLayout requires the WrapLayout module.
-// ``` JavaScript
+// >> wrap-layout-require
 import wrapLayoutModule = require("ui/layouts/wrap-layout");
-// ```
+// << wrap-layout-require
 
-// Other frequently used modules when working with a WrapLayout include:
-// ``` JavaScript
+// >> wrap-layout-others
 import enums = require("ui/enums");
-// ```
-// </snippet> 
+// << wrap-layout-others
 
 export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayout> {
 
     public create(): wrapLayoutModule.WrapLayout {
-        // <snippet module="ui/layouts/wrap-layout" title="WrapLayout">
-        // ## Creating a WrapLayout
-        // ``` JavaScript
+        // >> wrap-layout-new
         var wrapLayout = new wrapLayoutModule.WrapLayout();
-        // ```
-        // </snippet>
-
-        // ### Declaring a WrapLayout.
-        //``` XML
-        // <Page>
-        //   <WrapLayout>
-        //     <Label text="This is Label 1" />
-        //     <Label text="This is Label 2" />
-        //     <Label text="This is Label 3" />
-        //     <Label text="This is Label 4" />
-        //   </WrapLayout>
-        // </Page>
-        //```
-        // </snippet>
+        // << wrap-layout-new
 
         wrapLayout.width = layoutHelper.dp(200);
         wrapLayout.height = layoutHelper.dp(200);
@@ -124,12 +103,9 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
 
     public testVerticalOrientation() {
         var wrapLayout = this.testView;
-        // <snippet module="ui/layouts/wrap-layout" title="WrapLayout">
-        // ## Setting the orientation of a wrap-layout.
-        // ``` JavaScript
+        // >> wrap-layout-orientation
         wrapLayout.orientation = enums.Orientation.vertical;
-        // ```
-        // </snippet>
+        // << wrap-layout-orientation
         this.waitUntilTestElementLayoutIsValid();
 
         let actualValue = this.testView.getChildAt(0)._getCurrentLayoutBounds();
diff --git a/apps/tests/layouts/wrap-layout.md b/apps/tests/layouts/wrap-layout.md
new file mode 100644
index 000000000..e08668be9
--- /dev/null
+++ b/apps/tests/layouts/wrap-layout.md
@@ -0,0 +1,29 @@
+---
+nav-title: "WrapLayout How-To"
+title: "How-To"
+description: "Examples for using WrapLayout"
+---
+# WrapLayout
+Using a WrapLayout requires the WrapLayout module.
+<snippet id='wrap-layout-require'/>
+
+Other frequently used modules when working with a WrapLayout include:
+<snippet id='wrap-layout-others'/>
+
+## Creating a WrapLayout
+<snippet id='wrap-layout-new'/>
+
+### Declaring a WrapLayout.
+``` XML
+<Page>
+    <WrapLayout>
+        <Label text="This is Label 1" />
+        <Label text="This is Label 2" />
+        <Label text="This is Label 3" />
+        <Label text="This is Label 4" />
+    </WrapLayout>
+</Page>
+```
+
+## Setting the orientation of a wrap-layout.
+<snippet id='wrap-layout-orientation'/>