diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index ce562cbea1..24e081375f 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -27,17 +27,20 @@ permissions:
 jobs:
   deploy:
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-diretory: ./docs
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-python@v5
         with:
           python-version: 3.x
-      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV 
+      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
       - uses: actions/cache@v4
         with:
           key: mkdocs-material-${{ env.cache_id }}
           path: .cache
           restore-keys: |
             mkdocs-material-
-      - run: pip install mkdocs-material 
-      - run: mkdocs gh-deploy --force
\ No newline at end of file
+      - run: pip install mkdocs-material
+      - run: mkdocs gh-deploy --force
diff --git a/README.md b/README.md
index 2601aaf675..91accc36b6 100644
--- a/README.md
+++ b/README.md
@@ -19,11 +19,11 @@ limitations under the License.
 ## elyra/canvas
 
 ## Overview
-The Common Canvas tooling consists of two Node JS modules:
+The Elyra Canvas tooling consists of two Node JS modules:
 
 1) A `Common Canvas` for use in building canvas-like applications. See [detailed API and event documentation](https://github.com/elyra-ai/canvas/tree/main/canvas_modules/common-canvas).
 
-2) `Test harness`  
+2) `Test harness`
 See [here](https://github.com/elyra-ai/canvas/tree/main/canvas_modules/harness) for setting up local environment
 
 ## Documentation
@@ -33,18 +33,21 @@ See [here](https://github.com/elyra-ai/canvas/tree/main/canvas_modules/harness)
 ## Using local version of common-canvas and/or common-properties
 Clone elyra/canvas
 ```sh
+# Clone the repo
 git clone git@github.com:elyra-ai/canvas.git
-# install global libraries for building
+
+# Install global libraries for building
 npm install -g grunt-cli sass
+
 # Build common-canvas and common-properties
 ./<elyra/canvas>/canvas_modules/common-canvas/build.sh
 ```
-In your application's package.json replace  
+In your application's package.json replace
 ```
 "@elyra/canvas": "<version>"
 ```
 with
-```  
+```
 "@elyra/canvas": "file:<elyra/canvas>/canvas_modules/common-canvas"
 ```
 
@@ -57,7 +60,8 @@ npm install
 
 ### Contribute to the Elyra Canvas documentation (mkdocs)
 1. Python v3 needs to be available.
-2. Go to canvas directory.
+
+2. Go to canvas/docs directory.
 
 3. Install required mkdocs packages using pip3.
 ```
diff --git a/docs/2.0.1-Canvas-Editor.md b/docs/2.0.1-Canvas-Editor.md
deleted file mode 100644
index 728db155b4..0000000000
--- a/docs/2.0.1-Canvas-Editor.md
+++ /dev/null
@@ -1,11 +0,0 @@
-The Canvas Editor displays the flow to the user and allows the user to interact with the flow using the mouse/trackpad and the keyboard.
-
-The editor displays the following object types which the user can interact with:
-
-## Nodes
-## Links
-## Comments
-## The Canvas background
-
-
-[Still under construction]
\ No newline at end of file
diff --git a/docs/2.0.1.1-Nodes.md b/docs/2.0.1.1-Nodes.md
deleted file mode 100644
index bedcb0af63..0000000000
--- a/docs/2.0.1.1-Nodes.md
+++ /dev/null
@@ -1 +0,0 @@
-[Under construction]
\ No newline at end of file
diff --git a/docs/4.0-Styling.md b/docs/4.0-Styling.md
deleted file mode 100644
index d106a33aed..0000000000
--- a/docs/4.0-Styling.md
+++ /dev/null
@@ -1,56 +0,0 @@
-## Overriding Styles and Color Themes
-
-### CSS styling for quick start
-
-If you just want to get up and running and don't care about scss then import these regular css files:
-
-  - carbon-components/css/carbon-components.min.css
-  - @elyra/canvas/dist/styles/common-canvas.min.css
-    - version 8.x and older @elyra/canvas/dist/common-canvas.min.css
-
-More information about carbon components can be found here http://www.carbondesignsystem.com/getting-started/developers
-
-
-### SCSS styling (recommended)
-
-If you want to use the full power of scss styling with variable overrides etc then include these imports in your main scss file:
-```sass
-@import "carbon-components/scss/globals/scss/styles";
-@import "@elyra/canvas/src/index.scss";
-```
-
-  - use `autoprefixer` when building
-  - if using webpack under the `sass-loader` and make sure to include
-
-```js
-options: { includePaths: ["node_modules"] }
-```
-
-Again, you can refer to the test harness [index.scss file](https://github.com/elyra-ai/canvas/blob/master/canvas_modules/harness/src/styles/index.scss) for sample code.
-
-
-### Loading Fonts
-You may find that there is a pause in common canvas behavior, such as when the context menu is first displayed, which is caused by fonts being loaded. This can be fixed by adding the following to the `.scss` file for your application:
-```
-$font-path: "/fonts";
-@import "carbon-components/scss/globals/scss/styles";
-```
-The fonts will need to be imported from carbon before carbon styles and placed in a public `/fonts` directory.
-You can see an example of this in the common-canvas test harness (which is the equivalent of a host application) in this repo. That is, the [index.scss file](https://github.com/elyra-ai/canvas/blob/master/canvas_modules/harness/src/styles/index.scss) contains the lines above and the grunt build files ensures the fonts are copied from`node_modules/carbon-components/src/globals/` to the `<carbon fonts folder>` directory.
-
-
-### 3rd party styling
-
-
-If you are using common-properties then also include the react-virtualized styles:
-
-  - react-virtualized/styles.css
-
-## Elyra Canvas styling guidelines
-- Used the `data-id` attribute on inputs to be used for automated tests.  Format for common properties should be `properties-`
-- **className** format format for common-properties should be `properties-`
-- Limit the use of html(DOM) ids
-- Minimum inline styling.  This allows for consumers to easily override styling.  
-- scss/sass styling should be added to the component's folder
-- No `important!` in styling
-- Use variables for all colors(preferably from carbon)
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
new file mode 100644
index 0000000000..ee25c0422b
--- /dev/null
+++ b/docs/mkdocs.yml
@@ -0,0 +1,121 @@
+#
+# Copyright 2017-2023 Elyra Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+site_name: Elyra Canvas
+repo_url: https://github.com/elyra-ai/canvas
+docs_dir: pages
+
+theme:
+    name: material
+    highlightjs: true
+    logo: assets/FlowIcon.png
+    favicon: assets/FlowIcon.png
+    palette:
+        scheme: default
+    features:
+      - content.code.copy
+      - content.action.edit
+      - navigation.tabs
+      - navigation.indexes
+
+plugins:
+    - search
+
+extra_css:
+  - css/styles.css
+
+extra_javascript:
+  - js/links-in-new-tabs.js
+
+edit_uri: edit/main/docs/
+
+# Documentation and theme
+copyright: 'Copyright  &copy; 2024 Elyra Authors, an open source project and all are welcome to contribute! Maintained by the Elyra Authors Team'
+
+nav:
+  - Home: index.md
+
+  - Installation:
+    - 01-install/index.md
+
+  - Common Canvas:
+    - 02-canvas/index.md
+    - Canvas Components:
+      - 02-canvas/01-components/index.md
+      - Flow Editor:
+        - 02-canvas/01-components/01-editor/index.md
+        - Nodes: 02-canvas/01-components/01-editor/01-Nodes.md
+        - Links: 02-canvas/01-components/01-editor/02-Links.md
+        - Comments: 02-canvas/01-components/01-editor/03-Comments.md
+      - Palette: 02-canvas/01-components/02-Palette.md
+      - Context Menu: 02-canvas/01-components/03-Context-Menu.md
+      - Context Toolbar: 02-canvas/01-components/04-Context-Toolbar.md
+    - Config Objects:
+      - 02-canvas/02-configs/index.md
+      - Canvas Config: 02-canvas/02-configs/01-canvas-config.md
+      - Toolbar Config: 02-canvas/02-configs/02-toolbar-config.md
+      - Notification Config: 02-canvas/02-configs/03-notification-config.md
+      - Context Menu Config: 02-canvas/02-configs/04-context-menu-config.md
+      - Keyboard Config: 02-canvas/02-configs/05-keyboard-config.md
+    - Callbacks: 02-canvas/03-callbacks/index.md
+    - Canvas Controller:
+      - 02-canvas/04-controller/index.md
+      - Styling Canvas Objects: 02-canvas/04-controller/01-Styling-Objects.md
+      - Decorations: 02-canvas/04-controller/02-Decorations.md
+      - API Object Structure: 02-canvas/04-controller/03-Object-structure-used-by-API.md
+      - Notification Message Specification: 02-canvas/04-controller/04-Notification-Message-Specification.md
+      - Programmatically Creating New Canvas Nodes: 02-canvas/04-controller/05-Programmatically-creating-new-canvas-nodes.md
+      - Read Only or Locked Canvas: 02-canvas/04-controller/06-Read-only-or-locked-canvas.md
+      - Calling the Canvas Controller API: 02-canvas/04-controller/07-Calling-the-Canvas-Controller-API.md
+    - Node Creation from External Object: 02-canvas/05-ext-objs/index.md
+    - Commmand Stack API: 02-canvas/06-stack/01-Command-Stack.md
+    - Customizing Node Layout Properties: 02-canvas/07-layout/01-Customizing-Node-Layout.md
+    - Context Menu Wrapper Documentation: 02-canvas/08-menu/01-Context-Menu-Wrapper.md
+    - External Subflows Support: 02-canvas/09-ext-flows/01-External-Subflows-support.md
+    - Flow Validation API: 02-canvas/10-validate/01-Flow-Validation-API.md
+
+  - Common Properties:
+    - 03-props/index.md
+    - Parameter Definitions: 03-props/01-Parameter-Definition.md
+    - UI Hints: 03-props/02-UI-Hints.md
+    - Controls: 03-props/03-Controls.md
+    - Conditions: 03-props/04-Conditions.md
+    - Custom Components: 03-props/05-Custom-Components.md
+    - Properties Controller: 03-props/06-Properties-Controller.md
+
+  - Troubleshooting:
+    - 04-trouble/01-Troubleshooting.md
+
+  - Contributing:
+    - 05-contrib/01-Testing-Guidelines-for-Development.md
+
+  # - Testing Guidelines for Development: 5.0-Testing-Guidelines-for-Development.md
+
+markdown_extensions:
+  - admonition:
+  - codehilite:
+  - extra:
+  - pymdownx.magiclink:
+  - pymdownx.inlinehilite:
+  - pymdownx.highlight:
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
+  - sane_lists:
+  - smarty:
+  - toc:
+      permalink: True
diff --git a/docs/index.md b/docs/pages/01-install/index.md
similarity index 51%
rename from docs/index.md
rename to docs/pages/01-install/index.md
index f1f3412656..80a23bef69 100644
--- a/docs/index.md
+++ b/docs/pages/01-install/index.md
@@ -1,14 +1,4 @@
-# Welcome to the Elyra Canvas Documentation
-
-The elyra-ai/canvas repo contains three main components:
-
-* [Common Canvas](2.0-Common-Canvas-Documentation.md) - This contains canvas functionality which is packaged into the [elyra/canvas NPM module](https://www.npmjs.com/package/@elyra/canvas) and deployed on the NPM registry. It provides a way for an application to display a flow of data operations (shown as a set of nodes connected with links) defined in a pipeline flow JSON document, to the user and to allows the user to interact with the display to modify the flow. Common canvas is a react component which can be imported, and is assisted by a regular JavaScript class called `CanvasController` which provides an API and handles the internal data model of the flow. Common canvas is highly customizable where node shape and appearance, colors, styles layout etc can all be customized by your application code.
-
-* [Common Properties](3.0-Common-Properties-documentation.md) - This contains properties functionality which is packaged into the [elyra/canvas NPM module](https://www.npmjs.com/package/@elyra/canvas) and deployed on the NPM registry. It provides a way to translate a JSON document, which describes a set of properties with UI hints, into working properties dialog panel. Common properties is a react component and has an associated properties controller object. 
-
-* [Test Harness](https://github.com/elyra-ai/canvas/tree/master/canvas_modules/harness#test-harness) - This provides a node.js app which displays a UI which allows you to try out various features of the common canvas and common properties components. Bear in mind this is not supposed to be a fully functional app but is, as the name suggests, a framework for testing. To get select one of the sample applications or select `None` as the sample app and then select a test canvas file from the `Canvas Diagram` drop down list and a test palette from the `Canvas palette` drop down list.
-
-## Installation
+# Installation
 
 You'll need to build your application with Elyra Canvas.
 
@@ -72,19 +62,56 @@ render() {
 }
 ```
 
-## Notes
-When building your application you will need to load fonts and override styles can be found here:
-[Styling](4.0-Styling.md)
+## Overriding Styles and Color Themes
+
+When building your application you will need to load fonts and override styles:
+
+### CSS styling for quick start
+
+
+If you just want to get up and running and don't care about scss then import these regular css files:
+
+  - carbon-components/css/carbon-components.min.css
+  - @elyra/canvas/dist/styles/common-canvas.min.css
+    - version 8.x and older @elyra/canvas/dist/common-canvas.min.css
+
+More information about carbon components can be found here http://www.carbondesignsystem.com/getting-started/developers
+
+
+### SCSS styling (recommended)
+
+If you want to use the full power of scss styling with variable overrides etc then include these imports in your main scss file:
+```sass
+@import "carbon-components/scss/globals/scss/styles";
+@import "@elyra/canvas/src/index.scss";
+```
 
-## Testing
-When testing your application with Jest, this error might show up: `crypto.getRandomValues() not supported`. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported for details. 
+  - use `autoprefixer` when building
+  - if using webpack under the `sass-loader` and make sure to include
 
-To fix, added this to your jest setup file:
 ```js
-const cryptoJest = require("crypto");
-Object.defineProperty(global.self, "crypto", {
-	value: {
-		getRandomValues: (arr) => cryptoJest.randomBytes(arr.length)
-	}
-});
+options: { includePaths: ["node_modules"] }
 ```
+
+Again, you can refer to the test harness [index.scss file](https://github.com/elyra-ai/canvas/blob/master/canvas_modules/harness/src/styles/index.scss) for sample code.
+
+
+### Loading Fonts
+You may find that there is a pause in common canvas behavior, such as when the context menu is first displayed, which is caused by fonts being loaded. This can be fixed by adding the following to the `.scss` file for your application:
+```
+$font-path: "/fonts";
+@import "carbon-components/scss/globals/scss/styles";
+```
+The fonts will need to be imported from carbon before carbon styles and placed in a public `/fonts` directory.
+You can see an example of this in the common-canvas test harness (which is the equivalent of a host application) in this repo. That is, the [index.scss file](https://github.com/elyra-ai/canvas/blob/master/canvas_modules/harness/src/styles/index.scss) contains the lines above and the grunt build files ensures the fonts are copied from`node_modules/carbon-components/src/globals/` to the `<carbon fonts folder>` directory.
+
+
+### 3rd party styling
+
+If you are using common-properties then also include the react-virtualized styles:
+  - react-virtualized/styles.css
+
+
+
+
+
diff --git a/docs/pages/02-canvas/01-components/01-editor/01-Nodes.md b/docs/pages/02-canvas/01-components/01-editor/01-Nodes.md
new file mode 100644
index 0000000000..d48282040b
--- /dev/null
+++ b/docs/pages/02-canvas/01-components/01-editor/01-Nodes.md
@@ -0,0 +1,10 @@
+# Nodes
+
+## Introduction
+
+Nodes displayed in the flow editor can represent data operations or other types of
+operations for the type of flow the application displays.
+
+Nodes are made up of a number of display elements such as an image, label background shape etc.
+
+[Under construction]
diff --git a/docs/2.0.1.2-Links.md b/docs/pages/02-canvas/01-components/01-editor/02-Links.md
similarity index 100%
rename from docs/2.0.1.2-Links.md
rename to docs/pages/02-canvas/01-components/01-editor/02-Links.md
diff --git a/docs/pages/02-canvas/01-components/01-editor/03-Comments.md b/docs/pages/02-canvas/01-components/01-editor/03-Comments.md
new file mode 100644
index 0000000000..7a116849d1
--- /dev/null
+++ b/docs/pages/02-canvas/01-components/01-editor/03-Comments.md
@@ -0,0 +1,5 @@
+# Comments
+
+## Introduction
+
+[Under construction]
diff --git a/docs/pages/02-canvas/01-components/01-editor/index.md b/docs/pages/02-canvas/01-components/01-editor/index.md
new file mode 100644
index 0000000000..5c7815df67
--- /dev/null
+++ b/docs/pages/02-canvas/01-components/01-editor/index.md
@@ -0,0 +1,13 @@
+# Flow Editor
+
+The Flow Editor displays the flow to the user and allows the user to interact with the flow using the mouse/trackpad and the keyboard and other input devices.
+
+The editor displays the following object types which the user can interact with:
+
+* Nodes
+* Links
+* Comments
+* The Canvas background
+
+
+[Still under construction]
diff --git a/docs/2.0.2-Palette.md b/docs/pages/02-canvas/01-components/02-Palette.md
similarity index 100%
rename from docs/2.0.2-Palette.md
rename to docs/pages/02-canvas/01-components/02-Palette.md
diff --git a/docs/2.0.3-Context-Menu.md b/docs/pages/02-canvas/01-components/03-Context-Menu.md
similarity index 100%
rename from docs/2.0.3-Context-Menu.md
rename to docs/pages/02-canvas/01-components/03-Context-Menu.md
diff --git a/docs/2.0.4-Context-Toolbar.md b/docs/pages/02-canvas/01-components/04-Context-Toolbar.md
similarity index 100%
rename from docs/2.0.4-Context-Toolbar.md
rename to docs/pages/02-canvas/01-components/04-Context-Toolbar.md
diff --git a/docs/pages/02-canvas/01-components/index.md b/docs/pages/02-canvas/01-components/index.md
new file mode 100644
index 0000000000..ae1ecd36be
--- /dev/null
+++ b/docs/pages/02-canvas/01-components/index.md
@@ -0,0 +1,28 @@
+
+# Common Canvas Components
+
+Common canvas has several constituent parts that are visible to the user:
+
+* [Canvas editor](02-canvas/01-components/01-editor/index.md) - the main area of the UI where the flow is displayed and edited
+* [Palette](02-canvas/01-components/02-Palette.md) - a set of node templates that can be dragged to the canvas to create new nodes
+* [Context menu](02-canvas/01-components/03-Context-Menu.md) - a menu of options for nodes, comments, etc
+* [Context toolbar](02-canvas/01-components/04-Context-Toolbar.md) - a menu of options for nodes, comments, etc presented as a small toolbar
+* Toolbar - a set of tools across the top of the UI
+* Notification panel - a panel for displaying runtime and other messages to your user
+* Right side flyout - a panel, often used to display node properties
+* Top panel - a panel which can be used to display other app related information
+* Bottom panel - a panel which can be used to display other app related information
+
+and it handles:
+
+  1. the visual display of the flow of operations;
+  2. any user gestures on the canvas;
+  3. display of context menus;
+  4. display and handling of the palette.
+  5. provision of callbacks to tell your code what operations the user is performing on the canvas
+  6. and much much more.
+
+
+
+
+
diff --git a/docs/2.1-Config-Objects.md b/docs/pages/02-canvas/02-configs/01-canvas-config.md
similarity index 57%
rename from docs/2.1-Config-Objects.md
rename to docs/pages/02-canvas/02-configs/01-canvas-config.md
index 0246bddc8e..1c06d3fef5 100644
--- a/docs/2.1-Config-Objects.md
+++ b/docs/pages/02-canvas/02-configs/01-canvas-config.md
@@ -2,7 +2,7 @@
 
 The canvas config object is optional. If it is not provided, or any of the properties within it are not provided, common-canvas will use reasonable defaults. Here's an example of a canvas config object:
 ```js
-    const commonCanvasConfig = { 
+    const commonCanvasConfig = {
        "enableNodeFormatType": "Vertical",
        "enableLinkType": "Straight"
        }
@@ -12,8 +12,8 @@ and this is how it is specified to common-canvas:
 ```js
     render() {
         return (
-            <CommonCanvas 
-                canvasController={this.canvasController} 
+            <CommonCanvas
+                canvasController={this.canvasController}
                 config={commonCanvasConfig}
             />
         );
@@ -23,32 +23,32 @@ and this is how it is specified to common-canvas:
 
 ## Canvas Config fields
 
-#### **enableInteractionType** 
-This can be "Mouse", "Carbon" or "Trackpad". The default is "Mouse". 
+#### **enableInteractionType**
+This can be "Mouse", "Carbon" or "Trackpad". The default is "Mouse".
 ***"Trackpad" has been deprecated and will be removed in the future.***
 
 * With this set to "Mouse" the following interaction is enabled:
-    * Zoom canvas = Rotate mouse wheel.  
+    * Zoom canvas = Rotate mouse wheel.
 (Can be simulated with a trackpad with two finger up and down scroll)
-    * Pan canvas = Left mouse key down on canvas background + drag.  
+    * Pan canvas = Left mouse key down on canvas background + drag.
 (Can be simulated with a trackpad with press down on trackpad and drag.)
-    * Region select on canvas = Shift key + left mouse key down on canvas background + drag.  
+    * Region select on canvas = Shift key + left mouse key down on canvas background + drag.
 (Can be simulated with a trackpad with Shift + finger down on trackpad + drag across canvas background)
 
 * With this set to "Carbon" the following interaction is enabled:
-    * Zoom canvas = Rotate mouse wheel.  
+    * Zoom canvas = Rotate mouse wheel.
 (Can be simulated with a trackpad with two finger up and down scroll)
-    * Pan canvas = Press and hold space bar then left mouse key down on canvas background + drag.  
+    * Pan canvas = Press and hold space bar then left mouse key down on canvas background + drag.
 (Can be simulated with a trackpad by press and hold space bar then press down on trackpad and drag.)
-    * Region select on canvas = Left mouse key down on canvas background + drag.  
+    * Region select on canvas = Left mouse key down on canvas background + drag.
 (Can be simulated with a trackpad with press down on trackpad and drag.)
 
 * **This setting is now deprecated** With this set to "Trackpad" the following interactions are enabled:
-    * Zoom canvas = Two finger pinch or two finger spread gesture.  
-(Can be simulated with a mouse as follows: Ctrl + rotate mouse wheel.) 
-    * Pan canvas = Two finger horizontal or vertical scroll gesture.  
+    * Zoom canvas = Two finger pinch or two finger spread gesture.
+(Can be simulated with a mouse as follows: Ctrl + rotate mouse wheel.)
+    * Pan canvas = Two finger horizontal or vertical scroll gesture.
 (Can be simulated with a mouse as follows: Vertical pan is rotate mouse wheel; Horizontal pan is Shift + rotate mouse wheel)
-    * Region select on canvas = Finger down + drag.  
+    * Region select on canvas = Finger down + drag.
 (Can be simulated with a mouse as follows: Left button down + drag on canvas background)
 
 #### **enableNodeFormatType**
@@ -68,22 +68,22 @@ This can be "LeftRight", "TopBottom", or "BottomTop". "LeftRight" is the default
 This can be: "None", "LinkOnly", "Handles" or "Detachable". The default is "None". These have the following affect on the canvas:
 
 * "None" - no selection of links is possible however user can right click on a link to get a context menu.
-* "LinkOnly" - a link may be selected and added to the set of currently selected objects (nodes and/or comments). 
+* "LinkOnly" - a link may be selected and added to the set of currently selected objects (nodes and/or comments).
 * "Handles" - This includes the "LinkOnly" function. In addition, when a link is selected a handle (either a circle or an image) is displayed at the start and end of the link. The link handle can be dragged to a new node/port position to rewire the flow.
 * "Detachable" - This includes the "LinkOnly" and "Handles" function. In addition, this option enables detachable links for the canvas. This means a link can exist either:
     * between a source node and an arbitrary point on the canvas (semi-detached) OR
     * between an arbitrary point on the canvas and a target node (semi-detached) OR
-    * between two arbitrary points on the canvas (detached) 
+    * between two arbitrary points on the canvas (detached)
 
     Additionally, "Detachable" mode, allows:
 
     - semi-detached or fully-detached links to be stored in and retrieved from the pipeline flow document.
     - semi-detached or fully-detached links to be manipulated with link handles. The link handles can be used to drag the end of the link away from its connecting source or target nodes and onto the canvas. Or semi-detached or fully detached links can be reattached to nodes/ports.
-    - a new detached link to be created by drawing out a new link from a node and dropping it onto the canvas. 
+    - a new detached link to be created by drawing out a new link from a node and dropping it onto the canvas.
     - palette and canvas nodes, when they are dragged, to be dropped onto the ends of detached links to automatically attach them to the node being dragged.
 
 #### **enableLinkReplaceOnNewConnection**
-This can be true or false. The default is false. If set to true, the user can drag a new connection to a target node, and if the input port on the target node has a maximum cardinality of one AND there is currently a connection to that port, the existing connection will be removed and the new connection is created; essentially this gesture replaces the existing link with the new one. If set to false the new connection will not be completed and the existing link will remain in place. 
+This can be true or false. The default is false. If set to true, the user can drag a new connection to a target node, and if the input port on the target node has a maximum cardinality of one AND there is currently a connection to that port, the existing connection will be removed and the new connection is created; essentially this gesture replaces the existing link with the new one. If set to false the new connection will not be completed and the existing link will remain in place.
 
 When set to true and a link is replaced, common-canvas will call the `beforeEditActionHandler` the `editActionHandler` callback functions, if either are provided by the host application, with a `data` object parameter with the `editType` field set to `"linkNodesAndReplace"`.
 
@@ -101,7 +101,7 @@ will override the style from the common-canvas CSS
     }
 ```
 
-## enableImageDisplay
+#### **enableImageDisplay**
 
 This can be set to: "SVGInline", "LoadSVGToDefs" or "SVGAsImage". The default is "SVGInline". This field controls the display of SVG image files (that is, files with a `.svg` extension) on the canvas, such as those displayed for node icons or decoration images. This option can be useful to improve performance when images are repeated a large number of times on the canvas and particularly when the browser cache is disabled. Note: this does not affect the display behavior of non-SVG files which are always displayed inside an `<image>` tag. The behavior for SVG image files is as follows:
 
@@ -134,23 +134,23 @@ This can be true or false. The default is false. If set to true the right flyout
 This can be a boolean or an object. The default is false. If set to true, when the right-side flyout is open the currently selected node (assuming there is one) will be automatically positioned in the center of the viewport (canvas area). Instead of true this field can also be set to a simple JavaScript object like this `{ x: 30, y: 40 }` where x and y indicate the position where the node will be positioned as a percentage of the width and height of the viewport respectively.
 
 #### **enableHighlightNodeOnNewLinkDrag**
-This can be true or false. The default is false. If set to true common-canvas will add the "data-new-link-over" attribute to the node's group `<g>` element, when the end of a new link is dragged to be close to and over a target node. This allows applications to alter the appearance of the target node as a new link is dragged towards it. 
+This can be true or false. The default is false. If set to true common-canvas will add the "data-new-link-over" attribute to the node's group `<g>` element, when the end of a new link is dragged to be close to and over a target node. This allows applications to alter the appearance of the target node as a new link is dragged towards it.
 
 #### **enableHighlightUnavailableNodes**
 This can be true or false. The default is false. If set to true, when the user begins to drag a new link line, common-canvas will add a new class called `d3-node-unavailable` to all nodes which cannot accept the link as input. The class will be applied to each node's group `<g>` element in the DOM. This class can be used for styling the unavailable nodes as desired using CSS. The default styling will 'gray out' the node label, node outline rectangle (if there is one) and the node icon (provided it is an SVG image). These styles can be overridden in the applications CSS if different styling is needed. This behavior also applies if the end of a partially or fully detached link is dragged.
 
-#### **enableRaiseNodesToTopOnHover** 
+#### **enableRaiseNodesToTopOnHover**
 This can be true or false. The default is true. If set to false the nodes will be left in their original place in the DOM. If set to true, when the user moves the mouse cursor over a node, that node will be moved in the DOM so that the node appears on top of all other nodes. This is only really noticeable if nodes, or parts of nodes, overlap other nodes. It can be useful if your nodes have protruding ports or decorations and your users sometimes position nodes very close to one another. Note: the 'true' setting can adversely affect the behavior of scroll areas in a node that are displayed using a React object (using the `nodeExternalObject` node layout option) because when the node is moved in the DOM the scroll area gets reset to its initial position. Set this to false if you are displaying nodes using React objects.
 
 
-#### **enableAutoLinkOnlyFromSelNodes** 
-This can be true or false. The default is false. When set to true the auto-add function (where double clicking a node in the palette automatically adds it to the canvas) will only link up nodes when a node is already selected on the canvas and then, only if the selected node can be linked to the node that was double clicked. If false, the auto-add function will make a best guess at which node the double-clicked node should be added to.  
+#### **enableAutoLinkOnlyFromSelNodes**
+This can be true or false. The default is false. When set to true the auto-add function (where double clicking a node in the palette automatically adds it to the canvas) will only link up nodes when a node is already selected on the canvas and then, only if the selected node can be linked to the node that was double clicked. If false, the auto-add function will make a best guess at which node the double-clicked node should be added to.
 
 #### **enableMoveNodesOnSupernodeResize**
 This can be true or false. The default is true. If true, nodes surrounding a supernode will be moved when the supernode is expanded or manually resized so that the supernode does not overlay them. When set to false, the nodes surrounding a supernode will stay in their current positions when the supernode is expanded or manually resized. This may result in the nodes being overlaid by the supernode.
 
 #### **enableExternalPipelineFlows**
-This can be true or false. The default is false. If true, the context menu will include a `Create External Supernode` option when a set of objects are selected from which a supernode can be created. 
+This can be true or false. The default is false. If true, the context menu will include a `Create External Supernode` option when a set of objects are selected from which a supernode can be created.
 
 Waring: The host application must implement some of the common-canvas callbacks for external pipeline flow support to work correctly. See the Wiki section on [external pipeline flow support](2.9-External-Subflows-support.md) for more details.
 
@@ -158,14 +158,14 @@ Waring: The host application must implement some of the common-canvas callbacks
 This can be true or false. The default is false. If set to true, any abbreviated node label will be displayed in full when the pointer hovers over the label. If set to false, abbreviated node labels will remain the same when the pointer hovers over them.
 
 #### **enableSingleOutputPortDisplay**
-This can be true or false. The default is false. If set to true, only the last of the ports from the array of output ports will be displayed for each node. This config property is only applicable to applications with very specialized styling and handling of ports. If set to true with regular applications, it may result in a confusing display to the user. The single port is displayed at a position specified by outputPortRightPosX and outputPortRightPosY layout properties. For exmaple: 
+This can be true or false. The default is false. If set to true, only the last of the ports from the array of output ports will be displayed for each node. This config property is only applicable to applications with very specialized styling and handling of ports. If set to true with regular applications, it may result in a confusing display to the user. The single port is displayed at a position specified by outputPortRightPosX and outputPortRightPosY layout properties. For exmaple:
 ```js
 config = {
     enableSingleOutputPortDisplay: true,
     enableNodeLayout: {
       outputPortRightPosX: 0,
       outputPortRightPosY: 20
-}; 
+};
 ```
 #### **enableDragWithoutSelect**
 This can be either true or false. The default is false. If set to true, the user can drag and drop a single node or a single comment without that gesture removing selection on any other nodes or comments. If the node being dragged was selected prior to the drag gesture then it and any other objects that are currently selected will be moved. With this parameter set to false (or missing) a drag and drop gesture will select the node or comment being dragged and will deselect any currently selected objects.
@@ -174,26 +174,26 @@ This can be either true or false. The default is false. If set to true, the user
 This can be true or false. The default is false. When set to true the user may enter markdown syntax into comments on the canvas when in edit mode for the comment. When the editing ends, the comment is shown in presentation mode and the markdown syntax is converted to HTML which is displayed in the comment and is styled by CSS.
 
 #### **enableStateTag**
-This can be either "None", "Locked" or "ReadOnly". The default is "None". When set to either "Locked" or "ReadOnly", a 'state tag' object will be shown permanently over the top of the canvas. The state tag will be positioned in the center and towards the top of the canvas. The state tag consists of a black background rectangle with rounded corners overlaid with an icon and a text label. A tooltip is displayed when the mouse pointer is hovered over the state tag. The icon, label and default tooltip will be set appropriately based on the value ("Locked" or "ReadOnly") for this setting. The host application can override the tooltip by implementing the [tipHandler callback](2.2-Common-Canvas-callbacks.md#tiphandler). 
+This can be either "None", "Locked" or "ReadOnly". The default is "None". When set to either "Locked" or "ReadOnly", a 'state tag' object will be shown permanently over the top of the canvas. The state tag will be positioned in the center and towards the top of the canvas. The state tag consists of a black background rectangle with rounded corners overlaid with an icon and a text label. A tooltip is displayed when the mouse pointer is hovered over the state tag. The icon, label and default tooltip will be set appropriately based on the value ("Locked" or "ReadOnly") for this setting. The host application can override the tooltip by implementing the [tipHandler callback](2.2-Common-Canvas-callbacks.md#tiphandler).
 
 #### **enableEditingActions**
 This can be true or false. The default is true. If set to false, various editing actions on the canvas will be prevented, as follows:
 
-1. Nodes cannot be created on the canvas using any of the following: 
+1. Nodes cannot be created on the canvas using any of the following:
 
     (a) dragging and dropping a node template from the palette onto the canvas or
 
     (b) dragging and dropping an object onto the canvas from outside the canvas area, such as a file being dragged from the computer desktop onto the canvas (see note below), or
- 
+
     (c) double clicking a node in the palette to create a node
 
-    Note: It is not possible for common-canvas to prevent an object being dragged from the computer desktop to the canvas so it is recommended the drop zone (which provides visual feedback about the drop) should be switched off by setting the [enableDropZoneOnExternalDrag](2.1-Config-Objects.md#enabledropzoneonexternaldrag) config field to `false`. 
+    Note: It is not possible for common-canvas to prevent an object being dragged from the computer desktop to the canvas so it is recommended the drop zone (which provides visual feedback about the drop) should be switched off by setting the [enableDropZoneOnExternalDrag](2.1-Config-Objects.md#enabledropzoneonexternaldrag) config field to `false`.
 
-2. Nodes and comments cannot be dragged and moved.  
+2. Nodes and comments cannot be dragged and moved.
 3. The end points of Links, when [enableLinkSelection](2.1-Config-Objects.md#enablelinkselection) is set to `"Detachable"` or `"Handles"`, cannot be dragged and moved.
-4. Links from nodes and comments cannot be created by dragging from the port object on the source node or comment to the target node. 
+4. Links from nodes and comments cannot be created by dragging from the port object on the source node or comment to the target node.
 5. Comments, node labels and text decorations cannot be edited, neither by clicking the edit icon (which does not appear) nor by double clicking the text.
-6. Context menu options that alter the canvas objects will be removed from the context menu before it is displayed by common-canvas. The options that will be removed are: 
+6. Context menu options that alter the canvas objects will be removed from the context menu before it is displayed by common-canvas. The options that will be removed are:
 
     |Option Text|Action Identifier|
     |---|---|
@@ -217,7 +217,7 @@ This can be true or false. The default is true. If set to false, various editing
 
     If your application adds its own editing actions to the context menu your code must remove them if they are not needed in some situations (e.g. you are displaying a read-only canvas).
 
-7. Any default toolbar actions (tools) that alter the canvas objects will be disabled regardless of their specified enablement status. These actions are: 
+7. Any default toolbar actions (tools) that alter the canvas objects will be disabled regardless of their specified enablement status. These actions are:
 
     |Default Tooltip|Action|
     |---|---|
@@ -238,13 +238,13 @@ This can be true or false. The default is true. If set to false, various editing
     |delete|delete|
     |Ctrl/Cmd + x|cut|
     |Ctrl/Cmd + c|copy|
-    |Ctrl/Cmd + v|paste| 
-    |Ctrl/Cmd + z|undo| 
-    |Ctrl/Cmd + Shift + z|redo| 
-    |Ctrl/Cmd + y|redo| 
+    |Ctrl/Cmd + v|paste|
+    |Ctrl/Cmd + z|undo|
+    |Ctrl/Cmd + Shift + z|redo|
+    |Ctrl/Cmd + y|redo|
 
 9. The browser's Edit menu options (cut, copy, paste) will not work with the canvas objects regardless of the setting for [enableBrowserEditMenu](2.1-Config-Objects.md#enablebrowsereditmenu).
- 
+
 #### **enableDropZoneOnExternalDrag**
 This can be true or false. The default is false. If set to true a graphic overlay will be displayed over the canvas when a data object icon is dragged from the desktop over the canvas. The default graphic overlay will be an image and a  message saying: "Drop to add to canvas and project" unless the `dropZoneCanvasContent` configuration parameter is provided.
 
@@ -254,17 +254,17 @@ See the [Dragging an object from the desktop](2.3-Enabling-node-creation-from-ex
 This is a simple Javascript object, the properties of which override the default node layout properties. For more details see: [Customizing Node Layout Properties](2.7-Customizing-Node-Layout-Properties.md)
 
 #### **enableSaveZoom**
-This can be: "None", "LocalStorage" or "Pipelineflow". The default is "None". 
+This can be: "None", "LocalStorage" or "Pipelineflow". The default is "None".
 
-* "None" - When the canvas is zoomed, the zoom (scale and x/y pan) are not saved anywhere so if the canvas is closed and reopened it reopens with the default zoom which is a scale of 1 and x/y pan values of 0.   
-* "LocalStorage" - The zoom for the canvas is stored in the browser's local storage and will be reapplied to the canvas each time that canvas is shown in that browser. This applies to sub-flows, when the user displays them full-screen, as well as the primary flow. Sub-flows and the primary flow each have their own zoom amounts stored in local storage. Note: Zoom amounts stored in local storage can be cleared from storage by calling the `canvasController.clearSavedZoomValues()` API method.   
-* "Pipelineflow" - The zoom is serialized into the pipeline flow document and when a pipeline flow document is provided to common canvas through the API the zoom will be applied to the canvas display. Zoom amounts can be stored for both primary and sub pipelines. (See the pipelineFlow schema specification). 
+* "None" - When the canvas is zoomed, the zoom (scale and x/y pan) are not saved anywhere so if the canvas is closed and reopened it reopens with the default zoom which is a scale of 1 and x/y pan values of 0.
+* "LocalStorage" - The zoom for the canvas is stored in the browser's local storage and will be reapplied to the canvas each time that canvas is shown in that browser. This applies to sub-flows, when the user displays them full-screen, as well as the primary flow. Sub-flows and the primary flow each have their own zoom amounts stored in local storage. Note: Zoom amounts stored in local storage can be cleared from storage by calling the `canvasController.clearSavedZoomValues()` API method.
+* "Pipelineflow" - The zoom is serialized into the pipeline flow document and when a pipeline flow document is provided to common canvas through the API the zoom will be applied to the canvas display. Zoom amounts can be stored for both primary and sub pipelines. (See the pipelineFlow schema specification).
 
 #### **enablePanIntoViewOnOpen**
 This can be either true or false. The default is false. If set to true, the canvas will be panned so as much of the canvas area (the area containing the nodes and comments) is visible in the viewport as possible. This will only happen when enableSaveZoom === "None" or if there is no saved zoom available either in local storage (when enableSaveZoom === "LocalStorage") or in the pipelineFlow (when enableSaveZoom === "Pipelineflow").
 
 #### **enableZoomIntoSubFlows**
-This is a boolean. The default is false. When set to true, common-canvas will override the maximum zoom extent value which, by default is used for the entire canvas, to allow the user to zoom in on in-place sub-flows further than they can do on containing flows. This means the user can zoom in on multi-nested sub-flows so they are easier to view. To see this effect, the user must position the mouse pointer over the sub-flow before performing the zoom gesture. 
+This is a boolean. The default is false. When set to true, common-canvas will override the maximum zoom extent value which, by default is used for the entire canvas, to allow the user to zoom in on in-place sub-flows further than they can do on containing flows. This means the user can zoom in on multi-nested sub-flows so they are easier to view. To see this effect, the user must position the mouse pointer over the sub-flow before performing the zoom gesture.
 
 #### **enableContextToolbar**
 This is a boolean. The default is false. When set to true, common-canvas will display a context toolbar instead of a context menu for performing actions on canvas objects. A context toolbar is a small toolbar that appears above nodes, links and comments as the mouse cursor is hovered over them. The toolbar shows icons for actions the user is most likely to want to perform on the object. An overflow icon is displayed which, when clicked, shows a menu of additional actions. A context toolbar for the canvas background can also be displayed by right-clicking on the background. Common-canvas will display default context toolbars for nodes, links comments and the canvas background however the default actions can be customized by implementing the [`contextMenuHanlder`](2.2-Common-Canvas-callbacks.md#contextmenuhandler) callback.
@@ -273,26 +273,26 @@ This is a boolean. The default is false. When set to true, common-canvas will di
 This can be: "None", "During" or "After". The default is "None".
 
 * "None" - there is no snap to grid and objects can be moved to any position on the canvas.
-* "During" - when nodes or comments are moved or sized, the objects snap to an imaginary grid while the objects are being dragged or sized. This gives a somewhat jerky effect as the move or size is happening but has the advantage of telling the user exactly where the object will be when they release the mouse button to end the action.  
-* "After" - nodes or comments snap to a grid when the drag or size event ends. This gives a smooth dragging and sizing effect but the user does not see the final position until they release the mouse button at the end of the action. By default the canvas uses reasonable values for the grid increments. 
+* "During" - when nodes or comments are moved or sized, the objects snap to an imaginary grid while the objects are being dragged or sized. This gives a somewhat jerky effect as the move or size is happening but has the advantage of telling the user exactly where the object will be when they release the mouse button to end the action.
+* "After" - nodes or comments snap to a grid when the drag or size event ends. This gives a smooth dragging and sizing effect but the user does not see the final position until they release the mouse button at the end of the action. By default the canvas uses reasonable values for the grid increments.
 
 #### **enableSnapToGridX**
-This optional value overrides the default horizontal increment of the snap-to-grid grid. It can be either a numeric value which is a number of pixels or it can be a numeric value followed by a % sign (e.g. "25%") which indicates the grid will be a percentage of the default node width. Its default is dependent on whatever is set for enableNodeFormatType. That is for "Horizontal" it will be "20%" and for "Vertical" it will be "25%".  
+This optional value overrides the default horizontal increment of the snap-to-grid grid. It can be either a numeric value which is a number of pixels or it can be a numeric value followed by a % sign (e.g. "25%") which indicates the grid will be a percentage of the default node width. Its default is dependent on whatever is set for enableNodeFormatType. That is for "Horizontal" it will be "20%" and for "Vertical" it will be "25%".
 
 #### **enableSnapToGridY**
-This optional value overrides the default vertical increment of the snap-to-grid grid. It can be either a numeric value which is a number of pixels or it can be a numeric value followed by a % sign (e.g. "25%") which indicates the grid will be a percentage of the default node height. Its default is dependent on whatever is set for enableNodeFormatType. That is for "Horizontal" it will be "33.33%" and for "Vertical" it will be "20%".  
-   
+This optional value overrides the default vertical increment of the snap-to-grid grid. It can be either a numeric value which is a number of pixels or it can be a numeric value followed by a % sign (e.g. "25%") which indicates the grid will be a percentage of the default node height. Its default is dependent on whatever is set for enableNodeFormatType. That is for "Horizontal" it will be "33.33%" and for "Vertical" it will be "20%".
+
 #### **enableAutoLayoutVerticalSpacing**
-This is the spacing in pixels which is used to separate nodes vertically when either the vertical or horizontal auto layout action is used. 
+This is the spacing in pixels which is used to separate nodes vertically when either the vertical or horizontal auto layout action is used.
 
 #### **enableAutoLayoutHorizontalSpacing**
-This is the spacing in pixels which is used to separate nodes horizontally when either the vertical or horizontal auto layout action is used. For horizontal auto layout, common-canvas may override this value if it decides that more space is needed to prevent connecting lines from doubling back on themselves. 
+This is the spacing in pixels which is used to separate nodes horizontally when either the vertical or horizontal auto layout action is used. For horizontal auto layout, common-canvas may override this value if it decides that more space is needed to prevent connecting lines from doubling back on themselves.
 
 #### **enableAssocLinkCreation**
 This is a Boolean. The default is `false`. If set to `true` it changes the nature of links that are created between nodes as follows:
 
 - The user is able to pull out a link from either port on the node and drag it to another node
-- When a link is completed an `association` link is created rather than the regular data flow link that is created when this field is set to `true`. Association links describe an association between pairs of nodes and do not indicate any kind of data flow between those nodes.    
+- When a link is completed an `association` link is created rather than the regular data flow link that is created when this field is set to `true`. Association links describe an association between pairs of nodes and do not indicate any kind of data flow between those nodes.
 
 #### **enableAssocLinkType**
 This can be "Straight" or "RightSideCurve". The default it "Straight". This field changes the way association links are drawn on the canvas.
@@ -301,18 +301,18 @@ This can be "Straight" or "RightSideCurve". The default it "Straight". This fiel
 This can be true or false.  true is the default.  If true, the Cut/Copy/Paste items in the Browser's `Edit` menu, including keyboard input for those actions, can be used for performing those actions on objects (e.g. Nodes) in the canvas. When false, those items in the Browser's edit menu, including keyboard input for those actions, will not work for objects in the canvas. This will not prevent those actions working in the canvas when, say, invoked with the toolbar or canvas context menus, but this property can be used if the keyboard input for those actions into the canvas is disabled for common-canvas using the [keyboard config](2.1-Config-Objects.md#keyboard-config-object) object.
 
 #### **enableNarrowPalette**
-This can be true or false.  true is the default.  If true when the palette is closed the narrow palette will be shown.  When false the palette completely closes. 
+This can be true or false.  true is the default.  If true when the palette is closed the narrow palette will be shown.  When false the palette completely closes.
 
 #### **paletteInitialState**
 Deprecated -- This option is deprecated and will be removed soon.  Use `CanvasController.openPalette()` to display an opened palette at start-up. This `openPalette()` can be called immediately after creating the canvas controller.
 
-paletteInitialState can be true or false. false is the default. If set to true the palette will be opened when common canvas first appears to its full (non-narrow) state. 
+paletteInitialState can be true or false. false is the default. If set to true the palette will be opened when common canvas first appears to its full (non-narrow) state.
 
 #### **emptyCanvasContent**
 This is a JSX or HTML snippet that contains some text or any elements (such as an image) that you want to display when the canvas is empty, that is, when it doesn't have any nodes or comments. The default behavior if this config parameter is not provided is that common canvas will display an image and message saying: "Your flow is empty!".
 
 #### **dropZoneCanvasContent**
-This is a JSX or HTML snippet that contains some text or any elements (such as an image) that you want to display when a data object is dragged from the desktop over the canvas. The default behavior if this config parameter is not provided is that common canvas will display an image and a  message saying: "Drop to add to canvas and project". The content will not be displayed unless the `enableDropZoneOnExternalDrag` configuration parameter (see above) is set to true. 
+This is a JSX or HTML snippet that contains some text or any elements (such as an image) that you want to display when a data object is dragged from the desktop over the canvas. The default behavior if this config parameter is not provided is that common canvas will display an image and a  message saying: "Drop to add to canvas and project". The content will not be displayed unless the `enableDropZoneOnExternalDrag` configuration parameter (see above) is set to true.
 
 #### **schemaValidation**
 This can be true or false. false is the default. It tells common canvas whether you want pipleineFlow and palette objects to be validated against the schema files when they are submitted to the canvas controller, using the `setPipelineFlow(pFlow)` or `setPipelineFlowPalette(palette)` methods. If any validation errors are found messages are displayed in the browser console. It is recommended this option be set to true during development and testing but switched off in production since schema validation can be somewhat slow for large objects.
@@ -345,283 +345,3 @@ The tips displayed by the palette can be further refined. For example, this woul
 ```
 
 Note: The default content of tips can be overwritten by implementing the [tipHandler callback](2.2-Common-Canvas-callbacks.md#tiphandler).
-
-# Toolbar Config object
-
-The toolbar config object is optional. If it is not provided common-canvas will display a reasonable default toolbar. If provided, it configures which action items (tools) and dividers are shown in the canvas toolbar. A toolbar will only be displayed for common-canvas if the canvas configuration field [`enableToolbarLayout`](2.1-Config-Objects.md#enabletoolbarlayout) is set to "Top" (which is the default). 
-
-If you do specify a toolbar config object, you can specify actions for the left and right side of the toolbar to override the default toolbar. You can also optionally tell the toolbar not to handle the enable/disable state for the standard toolbar buttons using `overrideAutoEnableDisable`. The `leftBar` and `rightBar` fields contain an array of objects: one element for each toolbar item. Here is an example, toolbar configuration object:
-
-```js
-    const toolbarConfig = {
-        leftBar: [
-            { action: "undo", label: "Undo", enable: true },
-            { action: "redo", label: "Redo", enable: true },
-            { divider: true },
-            { action: "cut", label: "Cut", enable: false },
-            { action: "copy", label: "Copy", enable: false },
-            { action: "paste", label: "Paste", enable: false },
-            { divider: true },
-            { action: "createAutoComment", label: "Add Comment", enable: true },
-            { action: "deleteSelectedObjects", label: "Delete", enable: true },
-            { action: "arrangeHorizontally", label: "Arrange Horizontally", enable: true }
-            { divider: true },
-            { action: "insaneMode", label: "Switch on insane mode", enable: true, isSelected: true }
-        ],
-        rightBar: [
-            { action: "stop", label: "Stop Execution", enable: false },
-            { divider: true },
-            { action: "run", label: "Run Pipeline", enable: false }
-        ],
-        overrideAutoEnableDisable: false
-    };
-```
-Where:
-
-* **leftBar** - an array of action items to specify what is displayed on the left side of the toolbar.
-
-* **rightBar** - an array of action items to specify what is displayed on the right side of the toolbar. If this is omitted, common-canvas will automatically populate the right side of the toolbar with zoom-in, zoom-out, and zoom-to-fit actions. To suppress these right side actions, specify the `rightBar` field as an empty array or an array containing the actions you want on the right.
-
-* **overrideAutoEnableDisable** - a boolean. The default is false. By default common-canvas has an auto-enablement feature that controls the enablement of common tools in the toolbar based on user actions (e.g enable the `Delete` icon when items are selected). If `overrideAutoEnableDisable` set to true it will switch off the auto-enablement feature. This is useful if the host application wants to disable all the nodes under certain circumstances. If set to true, the `enable` property in the action items for each tool is used to decide whether to display the icon as enabled or disabled. If set to false or omitted, common-canvas will handle the auto-enablement of common actions. (See the `action`section below for more details.)  
-
-Two toolbar items are automatically added to the toolbar:
-
-- A palette action which is used for opening and closing the node palette. This is added to the left side of the left side of the toolbar if the [`enablePaletteLayout`](2.1-Config-Objects.md#enablepalettelayout) field is set to either "Flyout" (the default) or "Modal" in the canvas configuration.
-- A notification panel action which is used to open and close the notifications panel. This will be added to the right side of the toolbar if a [notification configuration](2.1-Config-Objects.md#notification-config-object) object is specified to the `<CommonCanvas>` react object.
-
-The toolbar will display the objects in the same order they are defined in the arrays. 
-
-Here is an example of an action object which must contain a unique `action` field as a minimum.
-```js
-    {
-        action: "run", 
-        label: "Run", 
-        enable: true,
-        iconEnabled: "/image/myOwnEnabledIcon.svg",
-        iconDisabled: "/image/myOwnDisabledIcon.svg",
-        incLabelWithIcon: "before",
-        kind: "primary",
-        tooltip: "Run the flow",
-        isSelected: false
-    }
-```
-
-* **action** - a unique identifier and the name of the action to be performed. This action name will be passed in the `data` parameter of the [editActionHandler](2.2-Common-Canvas-callbacks.md#editactionhandler) callback method so you can detect when the user clicks an action in the toolbar. 
-    
-    If you are using the recommended (and default) [internal object model](2.1-Config-Objects.md#enableinternalobjectmodel), the following built in actions will be automatically handled by common-canvas: `undo`, `redo`, `cut`, `copy`, `paste`, `createAutoComment`, `deleteSelectedObjects`, `arrangeHorizontally`, `arrangeVertically`, `zoomIn`, `zoomOut`, and `zoomToFit`. So for example, if the `deleteSelectedObjects` action (shown as a trash can) is clicked, any selected objects will be deleted from the internal object model. 
-    
-    Disablement of some of these built in actions is also handled by common-canvas so, for example, when no canvas objects are selected the `deleteSelectedObjects` action (trash can icon) will be automatically disabled. You can switch off this automatic enable/disable function by setting `overrideAutoEnableDisable` field in the toolbar config to `true`. When set to true, the `enable` field in the action objects will be used to set the enablement appearance of the toolbar item.
-
-* **label** - the Tooltip label to display (and optionally the text to display next to the icon if `incLabelWithIcon` is specified).  
-
-* **enable** - Icon will have hover effect and is clickable when set to true. If false, icon will be disabled and unclickable. If not set, it will default to disabled (false). If `overrideAutoEnableDisable` is set to false, or omitted, this field is ignored for the standard action items (like cut, copy, paste) because common canvas handles their enable/disable appearance. If `overrideAutoEnableDisable` is set to true, this field will be used for standard action items.
-
-* **iconEnabled** - specifies the icon to display when `enable` is true. Common-canvas will provide icons for the following actions so you don't need to specify `iconEnabled` or `iconDisabled` for them: `stop`, `run`, `undo`, `redo`, `cut`, `copy`, `paste`, `createAutoComment`, `deleteSelectedObjects`, `arrangeHorizontally`, `arrangeVertically`, `commentsShow`, `commentsHide`, `zoomIn`, `zoomOut`, and `zoomToFit`. 
-
-    It can be either:
-
-    - a string containing the path to a custom SVG file to display or
-    - a JSX expression, for example `(<Edit32 />)` where Edit32 is an icon imported from carbon icons. It is recommended to only pass very simple JSX expressions. 
-
-* **iconDisabled** - specifies the icon to display when `enable` is false. If `iconDisabled` is *not* specified `iconEnabled` will be used instead. It can be omitted for any of the standard actions (see `iconEnabled` above). 
-
-    It can be either:
-
-    - a string containing the path to a custom SVG file to display or
-    - a JSX expression, for example `(<Edit32 />)` where Edit32 is an icon imported from carbon icons. It is recommended to only pass very simple JSX expressions. 
-
-* **incLabelWithIcon** - can be set to "no", "before" or "after". The default is "no". This field specifies whether the label should be displayed in the toolbar with the icon and if so, where it is displayed with respect to the icon.
-
-* **kind** - can be set to "default", "primary", "danger", "secondary", "tertiary" or "ghost". The default it "default". These give the action the same styling as the equivalent kind's of [buttons in the carbon library](https://carbondesignsystem.com/components/button/usage#button-types).
-
-* **tooltip** - A string or JSX object. The tooltip that will be displayed for the action. If this is not provided the label will be displayed as the tooltip instead.
-
-* **isSelected** - A boolean. When set to true the toolbar button displays a selection highlight (which is a blue bar along the bottom border of the toolbar item). This is useful if you have a button that switches on and off a mode in your interface, as opposed to a regular button, which does not have any state, that would typically execute a command of some sort. For example, if your product has a 'Turbo boost' setting, which can be on or off, you could add a 'Turbo Boost' button to the toolbar and use `isSelected` to indicate when the option is active. When the user clicks the button it would switch `isSelected` for the 'Turbo Boost' button to true or false as appropriate. (This would give behavior like a checkbox.) 
-
-    You can also use this property to indicate a current state between a number of mutually exclusive settings. In this case, you would add one button to the toolbar for each setting and then set the `isSelected` property to true for the setting that is currently active. Then, when the user clicks a different option in the set, your code would set `isSelected` to true for that button and set it to false for the previously selected button. (This would give behavior like a radio button set.) 
-
-
-You can add dividers to separate groups of actions from other actions. This is displayed as a thin gray line. The divider object has one attribute:
-```js
-    { 
-       divider: true
-    }
-```
-
-* **divider** - To show a divider in the toolbar, add an object with `divider` attribute set to true.
-
-### Deprecated toolbar config
- 
-  The old toolbar configuration is still supported for now (but is deprecated). This allows the config to be provided as an array that defines just the left side of the toolbar. The right side will always show the zoom actions (zoomIn, zoomOut, zoomToFit) and a notifications panel icon (if a notification configuration object is provided in the CommonCanvas react object). These right side actions will always show on the right-hand side of the toolbar and are handled internally by the canvas. The entries in the array follow the same definition as described above. Note: there is no need to provide a `palette` action in the array because a palette icon and following divider will automatically be added to the toolbar when a palette is specified for the canvas. 
-
-An example of the toolbar config array should look like this:
-```js
-    const toolbarConfig = [
-       { action: "stop", label: "Stop Execution", enable: false },
-       { action: "run", label: "Run Pipeline", enable: false },
-       { action: "undo", label: "Undo", enable: true },
-       { action: "redo", label: "Redo", enable: true },
-       { action: "cut", label: "Cut", enable: false },
-       { action: "copy", label: "Copy", enable: false },
-       { action: "paste", label: "Paste", enable: false },
-       { action: "createAutoComment", label: "Add Comment", enable: true },
-       { action: "deleteSelectedObjects", label: "Delete", enable: true },
-       { action: "arrangeHorizontally", label: "Arrange Horizontally", enable: true }
-    ];
-```
-
-### Advanced: JSX actions
-Regular toolbar buttons, explained above, are displayed as set of Carbon `Button`s. If you _don't_ want your content wrappered in a button, you can provide your own JSX to display as an action in the toolbar. Be aware however that, because of the way the toolbar is designed, there are restrictions on what the toolbar can do to display your JSX. For example, it cannot display anything with a height greater than the toolbar height. 
-
-If you provide your own JSX object it is displayed in a simple `div` in the toolbar. Some attributes are applied to the `div` to allow the action to work correctly within the toolbar - these cannot be changed.  You are responsible for styling your JSX object to get it to appear the way you want. 
-
-Also be aware that, if the width of the toolbar reduces (maybe by the user sizing the page) your action may get moved into the overflow menu. It is also your responsibility to style the button so it appears as you want in the overflow menu as well as the toolbar. 
-
-The JSX can be provided in the `jsx` field. Here is an example. The only other fields that are recognized with the `jsx` field are `action` and `tooltip`, all other fields will be ignored. 
-
-```js
-    { 
-       action: "custom-loading",
-       jsx: (<div style={{ padding: "0 11px" }}><InlineLoading status="active" description="Loading..." /></div>),
-       tooltip: "Loading the thing you wanted."
-    }
-```
-
-* **action** - a unique identifier and the name of the action to be performed. 
-
-* **jsx** - A JSX object. This will be displayed as the action in the toolbar.
-
-* **tooltip** - A string or JSX object. This will be displayed as the tooltip for the action in the toolbar. If `tooltip` is omitted no tooltip will be added to your action. If `tooltip` is specified the `jsx` will be inside a tooltip `div` which is in the toolbar `div` mentioned above. 
-
-Here's an example toolbar that includes some Carbon React components
-```js
-    toolbarConfig = {
-        leftBar: [
-            { action: "custom-loading",
-              jsx: (
-                <div style={{ padding: "0 11px" }}>
-                  <InlineLoading status="active" description="Loading..." />
-                 </div>
-               )
-             },
-            { divider: true },
-            { action: "custom-checkbox",
-              jsx: (
-                <div style={{ padding: "0 11px" }}>
-                  <Checkbox id={"chk1"} defaultChecked labelText={"Check it out"} />
-                </div>
-              ) 
-            },
-            { divider: true },
-            { action: "custom-button",
-              tooltip: "A custom button of type primary!",
-              jsx: (
-                <div className="toolbar-custom-button">
-                  <Button id={"btn1"} size="field" kind="primary">Custom button </Button>
-                </div>
-              )
-            },
-            { divider: true },
-            { action: "custom-dropdown",
-              tooltip: "A drop down using the overflow menu!",
-              jsx: (
-                <div className="toolbar-custom-button">
-                  <OverflowMenu id={"ovf1"} renderIcon={TextScale32}>
-                    <OverflowMenuItem itemText="Big" />
-                    <OverflowMenuItem itemText="Medium" />
-                    <OverflowMenuItem itemText="Little" />
-                  </OverflowMenu>
-                </div>) },
-            { divider: true }
-        ]
-    };
-```
-
-# Notification Config object
-
-The notification config object configures whether or not the notification icon will be shown in the canvas toolbar. It will appear to the far right of the zoom actions in the toolbar. 
-Similar to a toolbar action object, the notificationConfig object looks like this:
-```js
-    const notificationConfig = { 
-       action: "notification",
-       label: "Notifications",
-       enable: true,
-       notificationHeader: "Notification Messages",
-       notificationSubtitle: "subtitle",
-       emptyMessage: "You don't have any notifications right now.",
-       clearAllMessage: "Clear all",
-       keepOpen: true,
-       clearAllCallback: () => { console.log("Clear All clicked"); }
-    };
-```
-
-* **action** - "notification" enables the notifications icon to appear in the far right of the toolbar.
-
-* **label** - the Tooltip label to display for the notifications icon in the toolbar.
-
-* **enable** - Icon will have hover effect and is clickable when set to true. If false, icon will be disabled and unclickable. If not set, it will default to disabled (enable: false)
-
-* **notificationHeader** - String to display in the notification panel header. If not set, it will default to "Notifications".
-
-* **notificationSubtitle** - String to be displayed as a sub-title in the panel header. If not set panel header will be sized to only contain the `notificationHeader` string.
-
-* **emptyMessage** - String to be displayed when there are no notification messages to display.
-
-* **clearAllMessage** - String to be displayed on a button displayed at the bottom of the panel. The button can be clicked to clear all the messages from the panel. If omitted the button, and the footer area of the panel it appears in, will not be displayed.
-
-* **keepOpen** - A boolean which indicates when the panel will close. The default is false. If set to false, the panel will close when the user clicks on the page somewhere outside the panel. If set to true the panel will remain open when the user clicks somewhere on the page outside of the panel. With the option the user must click the `x` icon in the top right of the panel, or click the notification toolbar icon, to close the panel.
-
-* **clearAllCallback** - An optional callback function that will be called every time the "clear all" button is clicked.
-
-* **secondaryButtonLabel** - Label for the optional secondary button to be displayed in the notification panel. Both `secondaryButtonLabel` and `secondaryButtonCallback` must be specified for the button to appear.
-* **secondaryButtonCallback** - A callback function that will be called when the secondary button is clicked.
-* **secondaryButtonDisabled** - Specify whether the secondary button is disabled or not.
-
-
-The notification icon state is determined by the type of messages in the notification message array. By default, a notifications icon in ready state will be shown if there are messages in the notification message array. If any message in the array is of type 'warning', a notifications icon in warning state will be shown. If any message in the array is of type 'error', a notifications icon in error state will be shown. A number will be shown within the notifications icon to indicate the number of messages.
-
-For information about the structure of notification messages, refer to the [message specification documentation](2.4.4-Notification-Message-Specification.md). Notification messages can be added and removed from the notification panel by calling the canvas controller API. Refer to the canvas controller API documentation for information on how to [add/set messages in the notification message array](2.4-Canvas-Controller-API.md#notification-messages-methods).
-
-# Context Menu Config object
-
-The context menu config object configures whether certain actions are available in the default context menu.
-
-```js
-    const contextMenuConfig = { 
-       enableCreateSupernodeNonContiguous: false,
-       defaultMenuEntries: {
-          saveToPalette: true,
-          createSupernode: false,
-          displaySupernodeFullPage: true,
-          colorBackground: false
-       }
-    };
-```
-
-* **enableCreateSupernodeNonContiguous** - Allows the creation of supernodes from non-contiguous nodes. When set to `true`, the "Create supernode" menu item will be added to the default context menu when the currently selected nodes are contiguous or non-contiguous. When set to `false`, the "Create supernode" menu item is only added to the default context menu when the selected nodes are contiguous. The default value is `false`.
-
-* **defaultMenuEntries** - Controls what entries are generated in the default context menu generated by common canvas. This has the following properties: 
-    * 'saveToPalette' - This is a boolean. The default is false. If set to true, common canvas will add a 'Save to palette' option to the default node context menu.
-    * 'createSupernode' - This is a boolean. The default is true. If set to false, common canvas will not show the 'Create Supernode' option in the default context menu for nodes.
-    * 'displaySupernodeFullPage' - This is a boolean. The default is true. If set to false, common canvas will not show the 'Display full page' option in the default context menu for supernodes. When true, the option will be displayed. Clicking that option navigates the user to the full page view of the supernode's pipeline as if the user had clicked the expansion icon of the expanded in-place supernode view.
-    * 'colorBackground' - This is a boolean. The default is true. If set to false, common canvas will not show the 'Color background' option in the default context menu for comments. When true, the option will be displayed. 
-
-[Note: If any host app wants more control over the default context menu here, please open an issue.]
-
-# Keyboard Config object
-
-The keyboard config object configures whether certain actions are available from the keyboard.
-See this section for what [key combinations are supported](2.0-Common-Canvas-Documentation.md#keyboard-support)
-```js 
-    const keyboardConfig = {
-       actions: {
-          delete: false,
-          undo: false,
-          redo: false,
-          selectAll: false,
-          cutToClipboard: false,
-          copyToClipboard: false,
-          pasteFromClipboard: false
-    };
-```
-All actions are `true` by default so it is only necessary to specify those actions you don't want as `false`. 
\ No newline at end of file
diff --git a/docs/pages/02-canvas/02-configs/02-toolbar-config.md b/docs/pages/02-canvas/02-configs/02-toolbar-config.md
new file mode 100644
index 0000000000..27669c8977
--- /dev/null
+++ b/docs/pages/02-canvas/02-configs/02-toolbar-config.md
@@ -0,0 +1,190 @@
+# Toolbar Config object
+
+The toolbar config object is optional. If it is not provided common-canvas will display a reasonable default toolbar. If provided, it configures which action items (tools) and dividers are shown in the canvas toolbar. A toolbar will only be displayed for common-canvas if the canvas configuration field [`enableToolbarLayout`](2.1-Config-Objects.md#enabletoolbarlayout) is set to "Top" (which is the default).
+
+If you do specify a toolbar config object, you can specify actions for the left and right side of the toolbar to override the default toolbar. You can also optionally tell the toolbar not to handle the enable/disable state for the standard toolbar buttons using `overrideAutoEnableDisable`. The `leftBar` and `rightBar` fields contain an array of objects: one element for each toolbar item. Here is an example, toolbar configuration object:
+
+```js
+    const toolbarConfig = {
+        leftBar: [
+            { action: "undo", label: "Undo", enable: true },
+            { action: "redo", label: "Redo", enable: true },
+            { divider: true },
+            { action: "cut", label: "Cut", enable: false },
+            { action: "copy", label: "Copy", enable: false },
+            { action: "paste", label: "Paste", enable: false },
+            { divider: true },
+            { action: "createAutoComment", label: "Add Comment", enable: true },
+            { action: "deleteSelectedObjects", label: "Delete", enable: true },
+            { action: "arrangeHorizontally", label: "Arrange Horizontally", enable: true }
+            { divider: true },
+            { action: "insaneMode", label: "Switch on insane mode", enable: true, isSelected: true }
+        ],
+        rightBar: [
+            { action: "stop", label: "Stop Execution", enable: false },
+            { divider: true },
+            { action: "run", label: "Run Pipeline", enable: false }
+        ],
+        overrideAutoEnableDisable: false
+    };
+```
+Where:
+
+* **leftBar** - an array of action items to specify what is displayed on the left side of the toolbar.
+
+* **rightBar** - an array of action items to specify what is displayed on the right side of the toolbar. If this is omitted, common-canvas will automatically populate the right side of the toolbar with zoom-in, zoom-out, and zoom-to-fit actions. To suppress these right side actions, specify the `rightBar` field as an empty array or an array containing the actions you want on the right.
+
+* **overrideAutoEnableDisable** - a boolean. The default is false. By default common-canvas has an auto-enablement feature that controls the enablement of common tools in the toolbar based on user actions (e.g enable the `Delete` icon when items are selected). If `overrideAutoEnableDisable` set to true it will switch off the auto-enablement feature. This is useful if the host application wants to disable all the nodes under certain circumstances. If set to true, the `enable` property in the action items for each tool is used to decide whether to display the icon as enabled or disabled. If set to false or omitted, common-canvas will handle the auto-enablement of common actions. (See the `action`section below for more details.)
+
+Two toolbar items are automatically added to the toolbar:
+
+- A palette action which is used for opening and closing the node palette. This is added to the left side of the left side of the toolbar if the [`enablePaletteLayout`](2.1-Config-Objects.md#enablepalettelayout) field is set to either "Flyout" (the default) or "Modal" in the canvas configuration.
+- A notification panel action which is used to open and close the notifications panel. This will be added to the right side of the toolbar if a [notification configuration](2.1-Config-Objects.md#notification-config-object) object is specified to the `<CommonCanvas>` react object.
+
+The toolbar will display the objects in the same order they are defined in the arrays.
+
+Here is an example of an action object which must contain a unique `action` field as a minimum.
+```js
+    {
+        action: "run",
+        label: "Run",
+        enable: true,
+        iconEnabled: "/image/myOwnEnabledIcon.svg",
+        iconDisabled: "/image/myOwnDisabledIcon.svg",
+        incLabelWithIcon: "before",
+        kind: "primary",
+        tooltip: "Run the flow",
+        isSelected: false
+    }
+```
+
+* **action** - a unique identifier and the name of the action to be performed. This action name will be passed in the `data` parameter of the [editActionHandler](2.2-Common-Canvas-callbacks.md#editactionhandler) callback method so you can detect when the user clicks an action in the toolbar.
+
+    If you are using the recommended (and default) [internal object model](2.1-Config-Objects.md#enableinternalobjectmodel), the following built in actions will be automatically handled by common-canvas: `undo`, `redo`, `cut`, `copy`, `paste`, `createAutoComment`, `deleteSelectedObjects`, `arrangeHorizontally`, `arrangeVertically`, `zoomIn`, `zoomOut`, and `zoomToFit`. So for example, if the `deleteSelectedObjects` action (shown as a trash can) is clicked, any selected objects will be deleted from the internal object model.
+
+    Disablement of some of these built in actions is also handled by common-canvas so, for example, when no canvas objects are selected the `deleteSelectedObjects` action (trash can icon) will be automatically disabled. You can switch off this automatic enable/disable function by setting `overrideAutoEnableDisable` field in the toolbar config to `true`. When set to true, the `enable` field in the action objects will be used to set the enablement appearance of the toolbar item.
+
+* **label** - the Tooltip label to display (and optionally the text to display next to the icon if `incLabelWithIcon` is specified).
+
+* **enable** - Icon will have hover effect and is clickable when set to true. If false, icon will be disabled and unclickable. If not set, it will default to disabled (false). If `overrideAutoEnableDisable` is set to false, or omitted, this field is ignored for the standard action items (like cut, copy, paste) because common canvas handles their enable/disable appearance. If `overrideAutoEnableDisable` is set to true, this field will be used for standard action items.
+
+* **iconEnabled** - specifies the icon to display when `enable` is true. Common-canvas will provide icons for the following actions so you don't need to specify `iconEnabled` or `iconDisabled` for them: `stop`, `run`, `undo`, `redo`, `cut`, `copy`, `paste`, `createAutoComment`, `deleteSelectedObjects`, `arrangeHorizontally`, `arrangeVertically`, `commentsShow`, `commentsHide`, `zoomIn`, `zoomOut`, and `zoomToFit`.
+
+    It can be either:
+
+    - a string containing the path to a custom SVG file to display or
+    - a JSX expression, for example `(<Edit32 />)` where Edit32 is an icon imported from carbon icons. It is recommended to only pass very simple JSX expressions.
+
+* **iconDisabled** - specifies the icon to display when `enable` is false. If `iconDisabled` is *not* specified `iconEnabled` will be used instead. It can be omitted for any of the standard actions (see `iconEnabled` above).
+
+    It can be either:
+
+    - a string containing the path to a custom SVG file to display or
+    - a JSX expression, for example `(<Edit32 />)` where Edit32 is an icon imported from carbon icons. It is recommended to only pass very simple JSX expressions.
+
+* **incLabelWithIcon** - can be set to "no", "before" or "after". The default is "no". This field specifies whether the label should be displayed in the toolbar with the icon and if so, where it is displayed with respect to the icon.
+
+* **kind** - can be set to "default", "primary", "danger", "secondary", "tertiary" or "ghost". The default it "default". These give the action the same styling as the equivalent kind's of [buttons in the carbon library](https://carbondesignsystem.com/components/button/usage#button-types).
+
+* **tooltip** - A string or JSX object. The tooltip that will be displayed for the action. If this is not provided the label will be displayed as the tooltip instead.
+
+* **isSelected** - A boolean. When set to true the toolbar button displays a selection highlight (which is a blue bar along the bottom border of the toolbar item). This is useful if you have a button that switches on and off a mode in your interface, as opposed to a regular button, which does not have any state, that would typically execute a command of some sort. For example, if your product has a 'Turbo boost' setting, which can be on or off, you could add a 'Turbo Boost' button to the toolbar and use `isSelected` to indicate when the option is active. When the user clicks the button it would switch `isSelected` for the 'Turbo Boost' button to true or false as appropriate. (This would give behavior like a checkbox.)
+
+    You can also use this property to indicate a current state between a number of mutually exclusive settings. In this case, you would add one button to the toolbar for each setting and then set the `isSelected` property to true for the setting that is currently active. Then, when the user clicks a different option in the set, your code would set `isSelected` to true for that button and set it to false for the previously selected button. (This would give behavior like a radio button set.)
+
+
+You can add dividers to separate groups of actions from other actions. This is displayed as a thin gray line. The divider object has one attribute:
+```js
+    {
+       divider: true
+    }
+```
+
+* **divider** - To show a divider in the toolbar, add an object with `divider` attribute set to true.
+
+### Deprecated toolbar config
+
+  The old toolbar configuration is still supported for now (but is deprecated). This allows the config to be provided as an array that defines just the left side of the toolbar. The right side will always show the zoom actions (zoomIn, zoomOut, zoomToFit) and a notifications panel icon (if a notification configuration object is provided in the CommonCanvas react object). These right side actions will always show on the right-hand side of the toolbar and are handled internally by the canvas. The entries in the array follow the same definition as described above. Note: there is no need to provide a `palette` action in the array because a palette icon and following divider will automatically be added to the toolbar when a palette is specified for the canvas.
+
+An example of the toolbar config array should look like this:
+```js
+    const toolbarConfig = [
+       { action: "stop", label: "Stop Execution", enable: false },
+       { action: "run", label: "Run Pipeline", enable: false },
+       { action: "undo", label: "Undo", enable: true },
+       { action: "redo", label: "Redo", enable: true },
+       { action: "cut", label: "Cut", enable: false },
+       { action: "copy", label: "Copy", enable: false },
+       { action: "paste", label: "Paste", enable: false },
+       { action: "createAutoComment", label: "Add Comment", enable: true },
+       { action: "deleteSelectedObjects", label: "Delete", enable: true },
+       { action: "arrangeHorizontally", label: "Arrange Horizontally", enable: true }
+    ];
+```
+
+### Advanced: JSX actions
+Regular toolbar buttons, explained above, are displayed as set of Carbon `Button`s. If you _don't_ want your content wrappered in a button, you can provide your own JSX to display as an action in the toolbar. Be aware however that, because of the way the toolbar is designed, there are restrictions on what the toolbar can do to display your JSX. For example, it cannot display anything with a height greater than the toolbar height.
+
+If you provide your own JSX object it is displayed in a simple `div` in the toolbar. Some attributes are applied to the `div` to allow the action to work correctly within the toolbar - these cannot be changed.  You are responsible for styling your JSX object to get it to appear the way you want.
+
+Also be aware that, if the width of the toolbar reduces (maybe by the user sizing the page) your action may get moved into the overflow menu. It is also your responsibility to style the button so it appears as you want in the overflow menu as well as the toolbar.
+
+The JSX can be provided in the `jsx` field. Here is an example. The only other fields that are recognized with the `jsx` field are `action` and `tooltip`, all other fields will be ignored.
+
+```js
+    {
+       action: "custom-loading",
+       jsx: (<div style={{ padding: "0 11px" }}><InlineLoading status="active" description="Loading..." /></div>),
+       tooltip: "Loading the thing you wanted."
+    }
+```
+
+* **action** - a unique identifier and the name of the action to be performed.
+
+* **jsx** - A JSX object. This will be displayed as the action in the toolbar.
+
+* **tooltip** - A string or JSX object. This will be displayed as the tooltip for the action in the toolbar. If `tooltip` is omitted no tooltip will be added to your action. If `tooltip` is specified the `jsx` will be inside a tooltip `div` which is in the toolbar `div` mentioned above.
+
+Here's an example toolbar that includes some Carbon React components
+```js
+    toolbarConfig = {
+        leftBar: [
+            { action: "custom-loading",
+              jsx: (
+                <div style={{ padding: "0 11px" }}>
+                  <InlineLoading status="active" description="Loading..." />
+                 </div>
+               )
+             },
+            { divider: true },
+            { action: "custom-checkbox",
+              jsx: (
+                <div style={{ padding: "0 11px" }}>
+                  <Checkbox id={"chk1"} defaultChecked labelText={"Check it out"} />
+                </div>
+              )
+            },
+            { divider: true },
+            { action: "custom-button",
+              tooltip: "A custom button of type primary!",
+              jsx: (
+                <div className="toolbar-custom-button">
+                  <Button id={"btn1"} size="field" kind="primary">Custom button </Button>
+                </div>
+              )
+            },
+            { divider: true },
+            { action: "custom-dropdown",
+              tooltip: "A drop down using the overflow menu!",
+              jsx: (
+                <div className="toolbar-custom-button">
+                  <OverflowMenu id={"ovf1"} renderIcon={TextScale32}>
+                    <OverflowMenuItem itemText="Big" />
+                    <OverflowMenuItem itemText="Medium" />
+                    <OverflowMenuItem itemText="Little" />
+                  </OverflowMenu>
+                </div>) },
+            { divider: true }
+        ]
+    };
+```
diff --git a/docs/pages/02-canvas/02-configs/03-notification-config.md b/docs/pages/02-canvas/02-configs/03-notification-config.md
new file mode 100644
index 0000000000..b5cf7f87bd
--- /dev/null
+++ b/docs/pages/02-canvas/02-configs/03-notification-config.md
@@ -0,0 +1,44 @@
+# Notification Config object
+
+The notification config object configures whether or not the notification icon will be shown in the canvas toolbar. It will appear to the far right of the zoom actions in the toolbar.
+Similar to a toolbar action object, the notificationConfig object looks like this:
+```js
+    const notificationConfig = {
+       action: "notification",
+       label: "Notifications",
+       enable: true,
+       notificationHeader: "Notification Messages",
+       notificationSubtitle: "subtitle",
+       emptyMessage: "You don't have any notifications right now.",
+       clearAllMessage: "Clear all",
+       keepOpen: true,
+       clearAllCallback: () => { console.log("Clear All clicked"); }
+    };
+```
+
+* **action** - "notification" enables the notifications icon to appear in the far right of the toolbar.
+
+* **label** - the Tooltip label to display for the notifications icon in the toolbar.
+
+* **enable** - Icon will have hover effect and is clickable when set to true. If false, icon will be disabled and unclickable. If not set, it will default to disabled (enable: false)
+
+* **notificationHeader** - String to display in the notification panel header. If not set, it will default to "Notifications".
+
+* **notificationSubtitle** - String to be displayed as a sub-title in the panel header. If not set panel header will be sized to only contain the `notificationHeader` string.
+
+* **emptyMessage** - String to be displayed when there are no notification messages to display.
+
+* **clearAllMessage** - String to be displayed on a button displayed at the bottom of the panel. The button can be clicked to clear all the messages from the panel. If omitted the button, and the footer area of the panel it appears in, will not be displayed.
+
+* **keepOpen** - A boolean which indicates when the panel will close. The default is false. If set to false, the panel will close when the user clicks on the page somewhere outside the panel. If set to true the panel will remain open when the user clicks somewhere on the page outside of the panel. With the option the user must click the `x` icon in the top right of the panel, or click the notification toolbar icon, to close the panel.
+
+* **clearAllCallback** - An optional callback function that will be called every time the "clear all" button is clicked.
+
+* **secondaryButtonLabel** - Label for the optional secondary button to be displayed in the notification panel. Both `secondaryButtonLabel` and `secondaryButtonCallback` must be specified for the button to appear.
+* **secondaryButtonCallback** - A callback function that will be called when the secondary button is clicked.
+* **secondaryButtonDisabled** - Specify whether the secondary button is disabled or not.
+
+
+The notification icon state is determined by the type of messages in the notification message array. By default, a notifications icon in ready state will be shown if there are messages in the notification message array. If any message in the array is of type 'warning', a notifications icon in warning state will be shown. If any message in the array is of type 'error', a notifications icon in error state will be shown. A number will be shown within the notifications icon to indicate the number of messages.
+
+For information about the structure of notification messages, refer to the [message specification documentation](2.4.4-Notification-Message-Specification.md). Notification messages can be added and removed from the notification panel by calling the canvas controller API. Refer to the canvas controller API documentation for information on how to [add/set messages in the notification message array](2.4-Canvas-Controller-API.md#notification-messages-methods).
diff --git a/docs/pages/02-canvas/02-configs/04-context-menu-config.md b/docs/pages/02-canvas/02-configs/04-context-menu-config.md
new file mode 100644
index 0000000000..3804b21319
--- /dev/null
+++ b/docs/pages/02-canvas/02-configs/04-context-menu-config.md
@@ -0,0 +1,26 @@
+# Context Menu Config object
+
+The context menu config object configures whether certain actions are available in the default context menu.
+
+```js
+    const contextMenuConfig = {
+       enableCreateSupernodeNonContiguous: false,
+       defaultMenuEntries: {
+          saveToPalette: true,
+          createSupernode: false,
+          displaySupernodeFullPage: true,
+          colorBackground: false
+       }
+    };
+```
+
+* **enableCreateSupernodeNonContiguous** - Allows the creation of supernodes from non-contiguous nodes. When set to `true`, the "Create supernode" menu item will be added to the default context menu when the currently selected nodes are contiguous or non-contiguous. When set to `false`, the "Create supernode" menu item is only added to the default context menu when the selected nodes are contiguous. The default value is `false`.
+
+* **defaultMenuEntries** - Controls what entries are generated in the default context menu generated by common canvas. This has the following properties:
+    * 'saveToPalette' - This is a boolean. The default is false. If set to true, common canvas will add a 'Save to palette' option to the default node context menu.
+    * 'createSupernode' - This is a boolean. The default is true. If set to false, common canvas will not show the 'Create Supernode' option in the default context menu for nodes.
+    * 'displaySupernodeFullPage' - This is a boolean. The default is true. If set to false, common canvas will not show the 'Display full page' option in the default context menu for supernodes. When true, the option will be displayed. Clicking that option navigates the user to the full page view of the supernode's pipeline as if the user had clicked the expansion icon of the expanded in-place supernode view.
+    * 'colorBackground' - This is a boolean. The default is true. If set to false, common canvas will not show the 'Color background' option in the default context menu for comments. When true, the option will be displayed.
+
+[Note: If any host app wants more control over the default context menu here, please open an issue.]
+
diff --git a/docs/pages/02-canvas/02-configs/05-keyboard-config.md b/docs/pages/02-canvas/02-configs/05-keyboard-config.md
new file mode 100644
index 0000000000..eb3e5fe5e1
--- /dev/null
+++ b/docs/pages/02-canvas/02-configs/05-keyboard-config.md
@@ -0,0 +1,17 @@
+# Keyboard Config object
+
+The keyboard config object configures whether certain actions are available from the keyboard.
+See this section for what [key combinations are supported](2.0-Common-Canvas-Documentation.md#keyboard-support)
+```js
+    const keyboardConfig = {
+       actions: {
+          delete: false,
+          undo: false,
+          redo: false,
+          selectAll: false,
+          cutToClipboard: false,
+          copyToClipboard: false,
+          pasteFromClipboard: false
+    };
+```
+All actions are `true` by default so it is only necessary to specify those actions you don't want as `false`.
diff --git a/docs/pages/02-canvas/02-configs/index.md b/docs/pages/02-canvas/02-configs/index.md
new file mode 100644
index 0000000000..2d1bbcdb86
--- /dev/null
+++ b/docs/pages/02-canvas/02-configs/index.md
@@ -0,0 +1,20 @@
+# Configuraiton
+
+There are 5 configuraiton objects that can be passed as props to the `<CommonCanvas>`
+react obect:
+
+* Canvas Config
+    - This is the main canvas configutation an allow customization of many aspects of the
+    flow editor, visual layout, palette and tooltips
+
+* Toolbar Config
+    - Allows customizaiton of the toolbar including the addition of application specific 'tools'.
+
+* Notification Config
+    - Allows customization of the notificaiton panel displayed by clicing the notification icon on the toolbar
+
+* Context Menu Config
+    - Allows some minor customization of the what options the context menus/toolbars display.
+
+* Keyboard Config
+    - Allows customizaiton of the shortcut keys supported by the flow editor
diff --git a/docs/2.2-Common-Canvas-callbacks.md b/docs/pages/02-canvas/03-callbacks/index.md
similarity index 95%
rename from docs/2.2-Common-Canvas-callbacks.md
rename to docs/pages/02-canvas/03-callbacks/index.md
index 22a0aba8e5..a89f02b8da 100644
--- a/docs/2.2-Common-Canvas-callbacks.md
+++ b/docs/pages/02-canvas/03-callbacks/index.md
@@ -1,9 +1,9 @@
-# Event listener callbacks 
+# Common Canvas callbacks
 
-You can *optionally* provide callback listeners.  These will be called when the user interacts with the canvas. 
+You can *optionally* provide callback listeners.  These will be called when the user interacts with the canvas.
 
 These listeners are as follows:
- 
+
 ## contextMenuHandler
 ```js
     contextMenuHandler(source, defaultMenu)
@@ -12,18 +12,18 @@ This callback is used for both 'context menus' and, if the [`enableContextToolba
 
 If this callback is not provided common canvas will handle context menu/toolbars, and their actions, internally. You only need to implement this callback if you want to add or remove options to/from the context menu/toolbar.
 
-The job of this callback is to tell common canvas what items to display in the context menu/toolbar. 
+The job of this callback is to tell common canvas what items to display in the context menu/toolbar.
 
-### For Context Menu 
+### For Context Menu
 
-For context menus this will be dependent on what object or set of objects the context menu was requested for by the user. 
+For context menus this will be dependent on what object or set of objects the context menu was requested for by the user.
 
 This callback will be called if the user performs a context menu gesture (such as mouse 'right click') on a:
 
 * node
 * link
 * comment
-* port 
+* port
 * on the canvas background or
 * if a number of objects are selected, the combination of objects.
 
@@ -38,9 +38,9 @@ The source object passed in looks like this:
       mousePos: {x: "10", y:"20"}
     }
 ```
-**type** - Indicates type of object for which the context menu was selected. Can be "node", "port", "link", "canvas" or "comment" 
+**type** - Indicates type of object for which the context menu was selected. Can be "node", "port", "link", "canvas" or "comment"
 
-**targetObject** - The object for which the context menu was requested. Only provided when type is "node" or "comment" 
+**targetObject** - The object for which the context menu was requested. Only provided when type is "node" or "comment"
 
 **selectedObjectIds** -  An array containing the IDs of all currently selected nodes and/or comments
 
@@ -57,7 +57,7 @@ The callback would need to return an array, that describes the context menu to b
 ```
 There is one element in the array for each entry in the context menu. An entry can be either a context menu item, which consists of a label and an action, or a divider, whose field would need to be set to true.
 
-Actions can be either internal (implemented inside the common canvas, like "deleteSelectedObjects" above) or external (like "myAction"). 
+Actions can be either internal (implemented inside the common canvas, like "deleteSelectedObjects" above) or external (like "myAction").
 
 Existing internal actions are:
 
@@ -79,7 +79,7 @@ Existing internal actions are:
 * highlightUpstream
 * unhighlight
 
-External actions are custom actions you want common canvas to display for your application. To get common canvas to display your action you would need to return an array from the callback that includes a menu item for the action. 
+External actions are custom actions you want common canvas to display for your application. To get common canvas to display your action you would need to return an array from the callback that includes a menu item for the action.
 
 When the user clicks the option in the context menu matching your action common canvas will call the [editActionHandler](#editactionhandler) callback so you'll need to implement some code in that callback to execute the intended action. If you want to simply add your action to the default context menu provided by common canvas you can take the defaultMenu parameter provided to the callback and add your menu item to it. Alternatively, you can provide a complete new context menu of your own.
 
@@ -94,13 +94,13 @@ Here is a sample implementation of contextMenuHandler, which takes a source obje
       return customMenu;
     }
 ```
-In addition to adding the context menu item, you would also need to implement the editActionHandler callback to execute the action, like this: 
+In addition to adding the context menu item, you would also need to implement the editActionHandler callback to execute the action, like this:
 ```js
     editActionHandler(data) {
       if (data.editType === "myAction") {
         // Execute my action code here.
       }
-    } 
+    }
 ```
 Tip: To avoid any future name clashes with internal actions you should make sure you action names are unique. For example, you could add a prefix to your action names eg. `$MyApp_action` where `$MayApp_` is the prefix for all your actions.
 
@@ -110,7 +110,7 @@ For context toolbars, this will be dependent on which object the mouse cursor is
 
 
 ## editActionHandler
-```js    
+```js
     editActionHandler(data, command)
 ```
 This callback is optional. You don't *need* to implement anything for it and it doesn't return anything. It is called whenever the user does the following types of action on the canvas:
@@ -123,7 +123,7 @@ This callback is optional. You don't *need* to implement anything for it and it
     * Moves one or a set of nodes/comments (moveObjects)
     * Edits a comment (editComment)
     * Links two nodes together (linkNodes)
-    * Links a comment to a node (linkComment) 
+    * Links a comment to a node (linkComment)
     * Resizes a supernode (resizeObjects)
     * Resizes a comment (editComment)
     * Expands a supernode in place (expandSuperNodeInPlace)
@@ -145,7 +145,7 @@ This callback is called *after* the common-canvas internal object model has been
     }
 ```
 
-   + ***editType*** - This is the action that originates from either the toolbar, context menu, keyboard action or direct manipulation on the canvas. If you specified your own action in the context menu or in the toolbar this field will be your action's name. 
+   + ***editType*** - This is the action that originates from either the toolbar, context menu, keyboard action or direct manipulation on the canvas. If you specified your own action in the context menu or in the toolbar this field will be your action's name.
 
    + ***editSource*** - This is the source of the action. It can be set to "toolbar", "contextmenu", "keyboard" or "canvas" (for an action caused by direct manipulation on the canvas).
 
@@ -155,13 +155,13 @@ This callback is called *after* the common-canvas internal object model has been
 
    + ***Other fields*** - Numerous other fields which vary based on the action and the source of the action.
 
-2. **command parameter** - This is a Javascript class which is the command object that was added to the command stack and executed to run the action 'requested' by the user. If the user performed an `undo` action this will be the command that has been undone. If the user performed a `redo` action this will be the command that was redone. The command object may contain fields which are connected with the execution of the command.    
- 
+2. **command parameter** - This is a Javascript class which is the command object that was added to the command stack and executed to run the action 'requested' by the user. If the user performed an `undo` action this will be the command that has been undone. If the user performed a `redo` action this will be the command that was redone. The command object may contain fields which are connected with the execution of the command.
+
 ## beforeEditActionHandler
-```js    
+```js
     beforeEditActionHandler(data, command)
 ```
-This callback is optional. You don't *need* to implement anything for it but if you do implement it you **must** return either a data object or null. This callback is called in all the same instances where `editActionHandler` is called. The difference is that this callback is called *before* the internal object model is updated. This gives your application the opportunity to examine the action that is about to be performed and either: let it continue; modify it and let it continue; or cancel it. 
+This callback is optional. You don't *need* to implement anything for it but if you do implement it you **must** return either a data object or null. This callback is called in all the same instances where `editActionHandler` is called. The difference is that this callback is called *before* the internal object model is updated. This gives your application the opportunity to examine the action that is about to be performed and either: let it continue; modify it and let it continue; or cancel it.
 
  This callback is provided with two parameters: `data` and `command`.
 
@@ -171,24 +171,24 @@ This callback is optional. You don't *need* to implement anything for it but if
 This callback *must* return either the data object that was passed in or null. `beforeEditActionHandler` will behave as follows based on what is returned:
 
 * If the data object is returned unmodified: the action will be performed as normal.
-* If the data object is returned modified: the action will be performed based on the modified data object. This means your application can alter the behavior of the action that will be performed. For example, you could intercept a `createNode` command and change the label for the new node in the nodeTemplate to something different. Then when the node is created the new label will be used. It is recommended you be **very** **very** careful when updating this object since there is no error checking in common-canvas to ensure you modified the object correctly.     
+* If the data object is returned modified: the action will be performed based on the modified data object. This means your application can alter the behavior of the action that will be performed. For example, you could intercept a `createNode` command and change the label for the new node in the nodeTemplate to something different. Then when the node is created the new label will be used. It is recommended you be **very** **very** careful when updating this object since there is no error checking in common-canvas to ensure you modified the object correctly.
 * If `null` is returned: the action will be cancelled and not performed on the internal object model nor will `editActionHandler` be called.
 
 If you need to do any asynchronous activity in the beforeEditActionHandler callback you can:
 
 * Return null from the callback - which will cancel the current action
-* Do your asynchronous activity. While this is happening, the user ought to be prevented from modifying the canvas so you should display some sort of progress indicator or modal dialog to inform the user that some activity is occurring.   
-* Then call `CanvasController.editActionHandler(data)` passing in the `data` object as a parameter with the modified properties. This will then execute the action as before. Note: This means the `beforeEditActionHandler` will be called a second time so be sure you put in a check to make sure you don't get into a loop. 
+* Do your asynchronous activity. While this is happening, the user ought to be prevented from modifying the canvas so you should display some sort of progress indicator or modal dialog to inform the user that some activity is occurring.
+* Then call `CanvasController.editActionHandler(data)` passing in the `data` object as a parameter with the modified properties. This will then execute the action as before. Note: This means the `beforeEditActionHandler` will be called a second time so be sure you put in a check to make sure you don't get into a loop.
 
 ## clickActionHandler
 ```js
     clickActionHandler(source)
 ```
-This callback is provided for your information. You don't need to implement anything for it and it doesn't need to return anything to common canvas. It is called whenever the user clicks or double clicks on something on the canvas. You could use this callback to implement opening a properties dialog when the user double clicks a node. 
+This callback is provided for your information. You don't need to implement anything for it and it doesn't need to return anything to common canvas. It is called whenever the user clicks or double clicks on something on the canvas. You could use this callback to implement opening a properties dialog when the user double clicks a node.
 
 Note: When handling selections, it is recommended the selectionChangeHandler be used in preference to this handler when possible. selectionChangeHandler will notify you of all selection changes regardless of how they occur, such as when the user presses Ctrl+A on the keyboard to select all objects.
 
-At the moment only click/double-click on nodes and the canvas background are returned. It is provided with one parameter that looks like this: 
+At the moment only click/double-click on nodes and the canvas background are returned. It is provided with one parameter that looks like this:
 ```js
     {
       clickType: "DOUBLE_CLICK"
@@ -200,7 +200,7 @@ At the moment only click/double-click on nodes and the canvas background are ret
 The fields can be:
 
 * clickType - This can be either "SINGLE_CLICK", "SINGLE_CLICK_CONTEXTMENU" or "DOUBLE_CLICK"
-* objectType - Can be either "node", "comment", "canvas" or "region". "region" is specified when the user pulls out a selection rectangle around a set of objects that might include nodes and comments.  
+* objectType - Can be either "node", "comment", "canvas" or "region". "region" is specified when the user pulls out a selection rectangle around a set of objects that might include nodes and comments.
 * id - The ID of the node or comment clicked. Only provided when objectType is "node" or "comment"
 * selectedObjectIds - An array of the selected objects (after the click action was performed).
 
@@ -212,7 +212,7 @@ Note: "SINGLE_CLICK_CONTEXTMENU" indicates that the user performed a contextmenu
 ```
 Decorations are small images that can be displayed on or near to your nodes and links. They can be for display only or actionable (so the user can click on them). See the canvas JSON schema for information on how to define decorations for your nodes.
 
-This callback is called when the user clicks on an actionable decoration. You don't need to implement anything for this callback unless you added actionable decorations to your nodes. It doesn't return anything. It is called whenever the user clicks on a decoration that you added to a node in the canvas JSON. 
+This callback is called when the user clicks on an actionable decoration. You don't need to implement anything for this callback unless you added actionable decorations to your nodes. It doesn't return anything. It is called whenever the user clicks on a decoration that you added to a node in the canvas JSON.
 
 It is provided with two parameters:
 
@@ -224,7 +224,7 @@ It is provided with two parameters:
 ```js
     tipHandler(tipType, data)
 ```
-Note: The display of tooltips (or not) can be controlled using the [`tipConfig`](2.1-Config-Objects.md#tipconfig) field of the canvas config object. 
+Note: The display of tooltips (or not) can be controlled using the [`tipConfig`](2.1-Config-Objects.md#tipconfig) field of the canvas config object.
 
 This optional callback can be implemented to override the tooltip content that is displayed by default for each canvas object. It is called before tips are shown for: palette categories, palette node templates, node, ports, links, decorations and the state tag. Common-canvas provides default implementations for all of the tips except for links and decorations, as follows:
 
@@ -242,7 +242,7 @@ To override the content, you can return either a string or JSX object. If your c
 
 Common-canvas calls the `tipHandler` callback with two parameters:
 
-- tipType - the type of the tip 
+- tipType - the type of the tip
 - data - an object that describes the canvas element for which the tip was requested
 
 Here are some specific examples:
@@ -254,19 +254,19 @@ Here are some specific examples:
 
 ```js
 {
-    category: { 
+    category: {
         id: "1234",
         label: "Import",
         description: "Category for import nodes",
         image: "/images/import.svg"
     }
-} 
-``` 
+}
+```
 
 #### Palette nodes templates:
 
   - tipType: "tipTypePaletteItem"
-  - data: An object with node template information: 
+  - data: An object with node template information:
 ```js
 {
     nodeTemplate: {
@@ -280,7 +280,7 @@ Here are some specific examples:
     }
 }
 ```
-#### Nodes: 
+#### Nodes:
   - tipType: "tipTypeNode"
   - data: An object with pipelineId and node information:
 ```js
@@ -301,7 +301,7 @@ Here are some specific examples:
 }
 ```
 
-#### Ports: 
+#### Ports:
 
   - tipType: "tipTypePort"
   - data: An object with pipelineId, node and port information:
@@ -369,7 +369,7 @@ Here are some specific examples:
         trgPortId: "inPort"
     }
 }
-``` 
+```
 
 #### Decorations
   - tipType: "tipTypeDec"
@@ -384,7 +384,7 @@ Here are some specific examples:
         "tooltip": "Foxes never quit"
     }
 }
-``` 
+```
 
 #### State tag
   - tipType: "tipTypeStateTag"
@@ -394,7 +394,7 @@ Here are some specific examples:
     stateTagText: "This flow is locked and cannot be edited.",
     stateTagType: "Locked"
 }
-``` 
+```
 
 
 
@@ -435,12 +435,12 @@ nodeType:
 
 * create comment:
 
-    * action: create_comment 
+    * action: create_comment
     * data: n/a
 
 * create node link:
-    * action: create_node_link 
-    * data: 
+    * action: create_node_link
+    * data:
 
 ```js
 sourceNode: {
@@ -478,7 +478,7 @@ targetNode: {
 ```
 
 - create comment link:
-    * action: create_comment_link 
+    * action: create_comment_link
     * data:
 
 ```js
@@ -510,7 +510,7 @@ targetNode: {
 ```
 
 - clone node: triggered when copying&pasting a node
-    * action: clone_node 
+    * action: clone_node
     * data:
 
 ```js
@@ -683,7 +683,7 @@ The selectionChangeHandler callback is triggered whenever the selection in the c
 - addedComments: Array with comment objects that were added to the selection
 - deselectedNodes: Array with node objects that were removed from the selection
 - deselectedComments: Array with comment objects that were removed from the selection
-- previousPipelineId: The ID of the Pipeline for the selected objects prior to the selection action 
+- previousPipelineId: The ID of the Pipeline for the selected objects prior to the selection action
 - selectedPipelineId: The ID of the Pipeline for the newly selected objects
 
 
@@ -691,7 +691,7 @@ The selectionChangeHandler callback is triggered whenever the selection in the c
 ```js
     layoutHandler(data)
 ```
-This is an optional handler you don't need to implement anything for it unless you want to. The layoutHandler callback, when provided, is called for each node on the canvas. The callback should return a Javascript object whose properties will override the default properties for node layout. The callback is provided with a parameter `data` which is the node object. Your code can look at the node properties and decide which properties it needs to override. This can be used to change the node shape, styling and position and size of node elements like the image, main label etc. 
+This is an optional handler you don't need to implement anything for it unless you want to. The layoutHandler callback, when provided, is called for each node on the canvas. The callback should return a Javascript object whose properties will override the default properties for node layout. The callback is provided with a parameter `data` which is the node object. Your code can look at the node properties and decide which properties it needs to override. This can be used to change the node shape, styling and position and size of node elements like the image, main label etc.
 
 For more details see: [Customizing Node Layout Properties](2.7-Customizing-Node-Layout-Properties.md)
 
@@ -699,6 +699,6 @@ For more details see: [Customizing Node Layout Properties](2.7-Customizing-Node-
 ```js
     actionLabelHandler(action)
 ```
-This is an optional handler you don't need to implement anything for it unless you want to. This callback allows your code to override the default tooltip text for the `Undo` and `Redo` buttons. 
+This is an optional handler you don't need to implement anything for it unless you want to. This callback allows your code to override the default tooltip text for the `Undo` and `Redo` buttons.
 
-The `actionLabelHandler` callback, when provided, is called for each action that is performed in common-canvas. The `action` object parameter, passed in to the callback, contains details of the action being performed. This callback should return either a string or null. If a string is returned it will be shown in the tooltip for the `Undo` button in the toolbar preceded by "Undo:" and the string will also appear in the tooltip for the `Redo` button (when appropriate) preceded by "Redo:". If null is returned, common-canvas will display the default text for the `Undo` and `Redo` buttons. 
\ No newline at end of file
+The `actionLabelHandler` callback, when provided, is called for each action that is performed in common-canvas. The `action` object parameter, passed in to the callback, contains details of the action being performed. This callback should return either a string or null. If a string is returned it will be shown in the tooltip for the `Undo` button in the toolbar preceded by "Undo:" and the string will also appear in the tooltip for the `Redo` button (when appropriate) preceded by "Redo:". If null is returned, common-canvas will display the default text for the `Undo` and `Redo` buttons.
diff --git a/docs/2.4.1-Style-Specification.md b/docs/pages/02-canvas/04-controller/01-Styling-Objects.md
similarity index 92%
rename from docs/2.4.1-Style-Specification.md
rename to docs/pages/02-canvas/04-controller/01-Styling-Objects.md
index 07f13cd824..da47facb95 100644
--- a/docs/2.4.1-Style-Specification.md
+++ b/docs/pages/02-canvas/04-controller/01-Styling-Objects.md
@@ -1,9 +1,11 @@
+# Styling Canvas Objects
+
 There are multiple was to specify the styles for the objects common-canvas displays:
 
 * A class name can be provided for nodes either within the pipelineFlow document or
 * The common-canvas default styes can be overriden within your CSS or SCSS file
 
-For more precise styling of objects the style specification object can be used to provide a number of styles to common canvas to set the inline styles on numerous elements of an object. For example, a node is made up of: a selection outline; a node body (rectangle); an image, a label etc. 
+For more precise styling of objects the style specification object can be used to provide a number of styles to common canvas to set the inline styles on numerous elements of an object. For example, a node is made up of: a selection outline; a node body (rectangle); an image, a label etc.
 
 Style specifications may be applied to common-canvas objects using the following [Canvas Controller](2.4-Canvas-Controller-API.md) methods:
 ```js
@@ -31,8 +33,8 @@ The style spec for a node can set the styles for all these elements in one shot.
  ```
 And here is a real example:
 ```js
-{ 
-    body: { 
+{
+    body: {
         default: "fill: coral; stroke: red;",
         hover: "fill: cornflowerblue; stroke: blue;"
     }
@@ -58,12 +60,12 @@ And here is a template for styling a link:
 
 * **`<css_snippet>`** - is a string containing any CSS code that can be added inline to an SVG object. That means, for example, you need to use fill and stroke for colors etc  It is recommended NOT to change the sizes of text fonts.
 
-The CSS will be applied to the element of the object specified, either as the default inline style or as the style when the pointer hovers over the object. 
+The CSS will be applied to the element of the object specified, either as the default inline style or as the style when the pointer hovers over the object.
 
-When a hover style is applied to a graphical element it is applied in addition to the default style so there is no need to repeat styles in the hover `<css_snippet>` because they will augment the default style. 
+When a hover style is applied to a graphical element it is applied in addition to the default style so there is no need to repeat styles in the hover `<css_snippet>` because they will augment the default style.
 
-Because styles are applied as in-line styles they will override any styles provided in your application's CSS and specified to common-canvas through the class_name field of canvas objects.  
+Because styles are applied as in-line styles they will override any styles provided in your application's CSS and specified to common-canvas through the class_name field of canvas objects.
 
 If the `<css_snippet>` is specified as null the current style will be removed from the specified element of the object.
 
-Finally, styles can be applied to your nodes, comments and links as either temporary or permanent styles by specifying the `temporary` boolean in the API methods. A temporary style is just applied for the duration of the session and are not persisted. You should use `temporary=true` styles that represent transient attributes of an object that should not be persisted in the pipelineFlow document. Use `temporary=false` styles for styles that you want to persist in the pipelineFlow document.   
+Finally, styles can be applied to your nodes, comments and links as either temporary or permanent styles by specifying the `temporary` boolean in the API methods. A temporary style is just applied for the duration of the session and are not persisted. You should use `temporary=true` styles that represent transient attributes of an object that should not be persisted in the pipelineFlow document. Use `temporary=false` styles for styles that you want to persist in the pipelineFlow document.
diff --git a/docs/2.4.2-Decoration-Specification.md b/docs/pages/02-canvas/04-controller/02-Decorations.md
similarity index 93%
rename from docs/2.4.2-Decoration-Specification.md
rename to docs/pages/02-canvas/04-controller/02-Decorations.md
index cab5187c9f..f7f755c175 100644
--- a/docs/2.4.2-Decoration-Specification.md
+++ b/docs/pages/02-canvas/04-controller/02-Decorations.md
@@ -1,4 +1,4 @@
-## Decorations
+# Decorations
 Your application can add Decorations -- additional icons, text labels, shapes or JSX objects -- to nodes or links in the canvas to indicate special status or attributes of the node or link. Decorations can be static (for display only) or interactive (a hotspot) so the user can click them to initiate some action.
 
 ## Adding Decorations
@@ -18,7 +18,7 @@ Decorations can be added to the nodes and/or links in four different ways:
     ```
     See the [CanvasController API documentation](2.4-Canvas-Controller-API.md) for more details.
 
-2. Node decorations can be specified in the [nodeLayout object](2.1-Config-Objects.md#enablenodelayout) in the canvas config. Decorations specified in this way are applied to all nodes on the canvas. 
+2. Node decorations can be specified in the [nodeLayout object](2.1-Config-Objects.md#enablenodelayout) in the canvas config. Decorations specified in this way are applied to all nodes on the canvas.
 
 3. Decorations can be applied to, and retrieved from, nodes or links in the pipelineFlow in the `app_data.ui_data` section for the node or link. (Note: JSX objects are not supported in the pipelineFlow document).
 
@@ -104,14 +104,14 @@ These properties are applicable to a JSX decoration:
 
 where:
 
-#### **id** 
+#### **id**
 A unique ID for the decoration within the context of the node or link to which the decorator is attached.
 
 #### **image**
 A reference to an image to display for the decoration. If an image is specified the image is displayed within an outline rectangle unless `outline` is set to false. The image should be a reference to your image like: "/images/decorations/zoom-in_32.svg". Do not set label or path or jsx when this field is set.
 
 #### **path**
-An SVG shape that is displayed using this string as it's SVG path. eg. "M 0 0 L 10 10 -10 10 Z" could be specified to draw a triangle. Do not set image or label or jsx when this field is set. 
+An SVG shape that is displayed using this string as it's SVG path. eg. "M 0 0 L 10 10 -10 10 Z" could be specified to draw a triangle. Do not set image or label or jsx when this field is set.
 
 #### **jsx**
 A JSX object that is is displayed at the specified decoration location. Do not set image or path or label when this field is set. Note JSX decorations are not supported in the pipelineFlow document.
@@ -120,7 +120,7 @@ A JSX object that is is displayed at the specified decoration location. Do not s
 A text string that is displayed at the specified decoration location. Do not set image or path or jsx when this field is set.
 
 #### **label_editable**
-A boolean that defaults to `false`. When set to `true`, if the mouse pointer is hovered over the label an edit icon is displayed next to the label which, when clicked, opens the label for editing. The label can also for double clicked to go to edit mode. 
+A boolean that defaults to `false`. When set to `true`, if the mouse pointer is hovered over the label an edit icon is displayed next to the label which, when clicked, opens the label for editing. The label can also for double clicked to go to edit mode.
 
 When editing is completed (by clicking outside the text area) an `editDecorationLabel` action is executed which results in calls to first the `beforeEditActionHandler` and then the `editActionHandler` callbacks.
 
@@ -128,61 +128,61 @@ When editing is completed (by clicking outside the text area) an `editDecoration
 Can be either "center" or "left". When set to center the label will be centered on the point defined by the `position`, `distance`, `x_pos` and `y_pos` properties.
 
 #### **label_single_line**
-A boolean that defaults to `false`. When set to `true` the label is displayed on a single line and is truncated at the width of the label (specified in the `width` property for the decoration) and does not word wrap. If it is truncated an ellipsis (...) is displayed at the end of the truncated text. 
+A boolean that defaults to `false`. When set to `true` the label is displayed on a single line and is truncated at the width of the label (specified in the `width` property for the decoration) and does not word wrap. If it is truncated an ellipsis (...) is displayed at the end of the truncated text.
 
-If this property is set to `false`, long label text is displayed over a number of lines with word wrapping being controlled by the `width` set for the decoration. If the text extends beyond a second line an ellipsis (..) is displayed at the end of the second line. This is controlled by the `-webkit-line-clamp: 2;` CSS property. You can override this if you want the ellipsis to be displayed on a different line. 
+If this property is set to `false`, long label text is displayed over a number of lines with word wrapping being controlled by the `width` set for the decoration. If the text extends beyond a second line an ellipsis (..) is displayed at the end of the second line. This is controlled by the `-webkit-line-clamp: 2;` CSS property. You can override this if you want the ellipsis to be displayed on a different line.
 
 Note: For both single and multi-line labels you may need to set the `height` property for the decoration to show the text fully.
 
 #### **label_max_characters**
-A number or null. Defaults to null. If set to a number the label will be restricted to that number of characters. If the label in the pipeline flow document is longer than the max number it will be displayed but when it is edited the user will not be able to do anything except delete characters until the label is shorter than the max number. If this property is set to `null` or omitted an unlimited number of characters may be entered by the user. 
+A number or null. Defaults to null. If set to a number the label will be restricted to that number of characters. If the label in the pipeline flow document is longer than the max number it will be displayed but when it is edited the user will not be able to do anything except delete characters until the label is shorter than the max number. If this property is set to `null` or omitted an unlimited number of characters may be entered by the user.
 
 #### **label_allow_return_key**
 A boolean that defaults to `false`. When `false`, if the user presses the return key nothing will happen. This means multi-line labels will only word-wrap at the `width` of the decorator. Preventing newline insertion is useful if the label text appears elsewhere in the UI which is not able to show text with newline characters. When set to `"save"`, if the user presses the return key, the editing will be completed and the label saved -- this is the equivalent of clicking on the canvas background to complete the edit. If set to `true`, a new line character will be inserted in the label when the user presses return.
 
 #### **position**
-This is the anchor point to which the decoration is attached.  For a node, this can be one of these 9 enumerated values:  
+This is the anchor point to which the decoration is attached.  For a node, this can be one of these 9 enumerated values:
 ```
-   "topLeft", "topCenter", "topRight",  
-   "middleLeft", "middleCenter", "middleRight",   
-   "bottomLeft", "bottomCenter", "bottomRight".   
+   "topLeft", "topCenter", "topRight",
+   "middleLeft", "middleCenter", "middleRight",
+   "bottomLeft", "bottomCenter", "bottomRight".
 ```
 If omitted it will default to "topLeft".
-    
-For a link, this can be one of these 3 enumerated values:  
+
+For a link, this can be one of these 3 enumerated values:
 ```
-   "source"  
-   "middle"  
-   "target"  
+   "source"
+   "middle"
+   "target"
 ```
 `source` will position the decoration at the start point of the line and `target` will position it at the end point of the line. If omitted it will default to `middle`.
 
 #### **distance**
 A number of pixels. This is only applicable when the decoration is for a link line and then, only with straight connecting lines. That is, for node to node connections when the config property `enableLinkType` is set to `"straight"`. When specified, it will move the anchor point for the decoration to a new position along the connecting line relative to the initial position specified in the decoration's `position` property. A positive number moves the decoration along the line from the starting position towards the target of the link and a negative number backwards towards the source of the link. For example, if a straight link decoration has `position` of `source` and a `distance` of `20` the decoration's anchor point will be 20 pixels along the link line from the source (start) point of the line. After the `distance` value has been applied to the anchor point of the decoration, any `x_pos` and `y_pos` adjustment will be applied to fine tune the decoration's final position.
- 
+
 #### **x_pos**
-This is the number of pixels horizontally from the anchor point that the decoration is positioned. It can be positive or negative. If omitted it takes a default value from the [node layout properties](2.7-Customizing-Node-Layout-Properties.md#what-are-the-node-layout-properties-and-what-are-they-set-to-by-default). x_pos is not applicable if you specify an SVG path using the `path` field, because the SVG path can be used to position the shape. 
+This is the number of pixels horizontally from the anchor point that the decoration is positioned. It can be positive or negative. If omitted it takes a default value from the [node layout properties](2.7-Customizing-Node-Layout-Properties.md#what-are-the-node-layout-properties-and-what-are-they-set-to-by-default). x_pos is not applicable if you specify an SVG path using the `path` field, because the SVG path can be used to position the shape.
 
 #### **y_pos**
 This is the number of pixels vertically from the anchor point that the decoration is positioned. It can be positive or negative. If omitted it takes a default value from the [node layout properties](2.7-Customizing-Node-Layout-Properties.md#what-are-the-node-layout-properties-and-what-are-they-set-to-by-default). y_pos is not applicable if you specify an SVG path using the `path` field, because the SVG path can be used to position the shape.
 
 #### **width**
-This is the width for the decorator in pixels. For an image decorator, it is the width of the rectangle surrounding the image. For a label decorator it is the width allowed for display of the label text. If omitted it takes a default value from the [node layout properties](2.7-Customizing-Node-Layout-Properties.md#what-are-the-node-layout-properties-and-what-are-they-set-to-by-default) for Node decorations and from the canvas layout properties for Link properties. 
+This is the width for the decorator in pixels. For an image decorator, it is the width of the rectangle surrounding the image. For a label decorator it is the width allowed for display of the label text. If omitted it takes a default value from the [node layout properties](2.7-Customizing-Node-Layout-Properties.md#what-are-the-node-layout-properties-and-what-are-they-set-to-by-default) for Node decorations and from the canvas layout properties for Link properties.
 
 #### **height**
-This is the height for the decorator in pixels. For an image decorator, it is the height of the rectangle surrounding the image. For a label decorator it is the height allowed for display of the label text. If omitted it takes a default value from the [node layout properties](2.7-Customizing-Node-Layout-Properties.md#what-are-the-node-layout-properties-and-what-are-they-set-to-by-default) for Node decorations and from the canvas layout properties for Link properties. 
+This is the height for the decorator in pixels. For an image decorator, it is the height of the rectangle surrounding the image. For a label decorator it is the height allowed for display of the label text. If omitted it takes a default value from the [node layout properties](2.7-Customizing-Node-Layout-Properties.md#what-are-the-node-layout-properties-and-what-are-they-set-to-by-default) for Node decorations and from the canvas layout properties for Link properties.
 
 #### **hotspot**
-A Boolean. It defaults to false. When set to true the decoration becomes clickable and when it is clicked the [decorationCallbackHandler](2.2-Common-Canvas-callbacks.md#decorationactionhandler) is called with the ID of the decoration passed as a parameter.   
+A Boolean. It defaults to false. When set to true the decoration becomes clickable and when it is clicked the [decorationCallbackHandler](2.2-Common-Canvas-callbacks.md#decorationactionhandler) is called with the ID of the decoration passed as a parameter.
 
 #### **class_name**
-An optional class that will be applied to the decoration. You can add a style rule that references that class in your CSS to style the decoration and override the default styles. 
+An optional class that will be applied to the decoration. You can add a style rule that references that class in your CSS to style the decoration and override the default styles.
 
 #### **outline**
 A Boolean. It defaults to true. When a decoration is specified with an image field the image is typically displayed with a outline rectangle around it and with an offset within the rectangle to improve presentation. If `outline` is set to `false` the outline rectangle is **not** displayed and the image is displayed without any offset from its specified `x_pos` and `y_pos`.
 
 #### **tooltip**
-A String. When specified, the string will be shown in a tooltip when the pointer is hovered over the decoration. No tip will be displayed if the `tooltip` property is omitted. Note: for decoration tooltips to be displayed on the canvas, the `decorations` property of the `tipConfig` object in the canvas config must be set to true (which is its default setting).  
+A String. When specified, the string will be shown in a tooltip when the pointer is hovered over the decoration. No tip will be displayed if the `tooltip` property is omitted. Note: for decoration tooltips to be displayed on the canvas, the `decorations` property of the `tipConfig` object in the canvas config must be set to true (which is its default setting).
 
 #### **temporary**
 A Boolean. It defaults to false. When set to true the decoration object will _not_ be saved in the pipelineFlow document returned by the `CanvasController.getPipelineFlow()` method. Typically, this should be set to `true` when adding decorations programmatically to the nodes and links on the canvas.
@@ -192,4 +192,4 @@ A Boolean. It defaults to false. When set to true the decoration object will _no
 1. Using `x_pos` and `y_pos`, decorations can be displayed outside the node boundary.
 2. If no image or label or path is provided, the default decoration is a rectangle displayed with the class_name provided.
 3. You can specify as many decorations as you want by providing extra entries in the decorations array.
-4. Images and labels are positioned differently. For images, the position defined for the decoration is the top left corner of the image. For labels it is anchor point for the label which is the base line of the string in the vertical direction and is dependent on the text-anchor CSS property applied to the text. So if you apply the `text-anchor: middle` CSS property to the label in the style related to class_name the label will be centered on the point calculated for the position of the decoration.  
\ No newline at end of file
+4. Images and labels are positioned differently. For images, the position defined for the decoration is the top left corner of the image. For labels it is anchor point for the label which is the base line of the string in the vertical direction and is dependent on the text-anchor CSS property applied to the text. So if you apply the `text-anchor: middle` CSS property to the label in the style related to class_name the label will be centered on the point calculated for the position of the decoration.
diff --git a/docs/2.4.3-Object-structure-used-by-API.md b/docs/pages/02-canvas/04-controller/03-Object-structure-used-by-API.md
similarity index 100%
rename from docs/2.4.3-Object-structure-used-by-API.md
rename to docs/pages/02-canvas/04-controller/03-Object-structure-used-by-API.md
diff --git a/docs/2.4.4-Notification-Message-Specification.md b/docs/pages/02-canvas/04-controller/04-Notification-Message-Specification.md
similarity index 100%
rename from docs/2.4.4-Notification-Message-Specification.md
rename to docs/pages/02-canvas/04-controller/04-Notification-Message-Specification.md
diff --git a/docs/2.4.5-Programmatically-creating-new-canvas-nodes.md b/docs/pages/02-canvas/04-controller/05-Programmatically-creating-new-canvas-nodes.md
similarity index 100%
rename from docs/2.4.5-Programmatically-creating-new-canvas-nodes.md
rename to docs/pages/02-canvas/04-controller/05-Programmatically-creating-new-canvas-nodes.md
diff --git a/docs/2.4.6-Constructing-a-read-only-or-locked-canvas.md b/docs/pages/02-canvas/04-controller/06-Read-only-or-locked-canvas.md
similarity index 100%
rename from docs/2.4.6-Constructing-a-read-only-or-locked-canvas.md
rename to docs/pages/02-canvas/04-controller/06-Read-only-or-locked-canvas.md
diff --git a/docs/2.4.0-Calling-the-Canvas-Controller-API.md b/docs/pages/02-canvas/04-controller/07-Calling-the-Canvas-Controller-API.md
similarity index 100%
rename from docs/2.4.0-Calling-the-Canvas-Controller-API.md
rename to docs/pages/02-canvas/04-controller/07-Calling-the-Canvas-Controller-API.md
diff --git a/docs/2.4-Canvas-Controller-API.md b/docs/pages/02-canvas/04-controller/index.md
similarity index 100%
rename from docs/2.4-Canvas-Controller-API.md
rename to docs/pages/02-canvas/04-controller/index.md
diff --git a/docs/2.3-Enabling-node-creation-from-external-object.md b/docs/pages/02-canvas/05-ext-objs/index.md
similarity index 100%
rename from docs/2.3-Enabling-node-creation-from-external-object.md
rename to docs/pages/02-canvas/05-ext-objs/index.md
diff --git a/docs/2.5-Command-Stack-API.md b/docs/pages/02-canvas/06-stack/01-Command-Stack.md
similarity index 100%
rename from docs/2.5-Command-Stack-API.md
rename to docs/pages/02-canvas/06-stack/01-Command-Stack.md
diff --git a/docs/2.7-Customizing-Node-Layout-Properties.md b/docs/pages/02-canvas/07-layout/01-Customizing-Node-Layout.md
similarity index 100%
rename from docs/2.7-Customizing-Node-Layout-Properties.md
rename to docs/pages/02-canvas/07-layout/01-Customizing-Node-Layout.md
diff --git a/docs/2.8-Context-Menu-Wrapper-Documentation.md b/docs/pages/02-canvas/08-menu/01-Context-Menu-Wrapper.md
similarity index 93%
rename from docs/2.8-Context-Menu-Wrapper-Documentation.md
rename to docs/pages/02-canvas/08-menu/01-Context-Menu-Wrapper.md
index a5c55ce237..53b76146b6 100644
--- a/docs/2.8-Context-Menu-Wrapper-Documentation.md
+++ b/docs/pages/02-canvas/08-menu/01-Context-Menu-Wrapper.md
@@ -1,10 +1,10 @@
-## Context Menu Wrapper
+# Context Menu Wrapper
 
 Context Menu Wrapper is now deprecated. Carbon 11 supports a context menu component
 
 The context menu in common-canvas can be used in your application by importing the `ContextMenuWrapper` React component. Aside from providing a standard context menu to allow users to select different actions, this context menu also allows for configuration of submenus as a menu item, as well as a visual dividers.
 
-# Getting started with Context Menu 
+# Getting started with Context Menu
 ## Step 1: Import Context Menu Wrapper
 To use Context Menu Wrapper in your React application you need to import the `ContextMenuWrapper` React component from the common-canvas library. It's recommended to use All Components if common-canvas is also being imported, otherwise use ContextMenuWrapper only option.
 
@@ -19,9 +19,9 @@ To use Context Menu Wrapper in your React application you need to import the `Co
 ```
 
 ## Step 2: Pass in the correct props
-* **contextMenuDef** `array` (required): an array of menu item objects consisting of action and label. You can also pass in a divider item. 
+* **contextMenuDef** `array` (required): an array of menu item objects consisting of action and label. You can also pass in a divider item.
 
-```js 
+```js
     const menuDef = [
         { action: ACTION.BUILD, label: "Build" },
 	{ action: ACTION.EXTEND, label: "Extend" },
@@ -33,7 +33,7 @@ To use Context Menu Wrapper in your React application you need to import the `Co
 ```
 
 * **containingDivId** `string` (required): the id of the element that the context menu will be absolutely positioned inside. typically, the page element is used.
-* **contextMenuPos** `object` (required): the position of the context menu within the containing div. 
+* **contextMenuPos** `object` (required): the position of the context menu within the containing div.
 ```js
     const menuPos = { x: 500  , y: 300  };
 ```
@@ -50,8 +50,8 @@ To use Context Menu Wrapper in your React application you need to import the `Co
 		}
 	}
 ```
-* **closeContextMenu** `func`  (required): this handler will be called when the context menu is closed. 
-* **stopPropagation** `bool` (optional): this is optional and only for very specific, uncommon use cases. When this flag is set, if a user clicks outside the context menu, the event will not bubble to parent elements, preventing parent event handlers from being called. 
+* **closeContextMenu** `func`  (required): this handler will be called when the context menu is closed.
+* **stopPropagation** `bool` (optional): this is optional and only for very specific, uncommon use cases. When this flag is set, if a user clicks outside the context menu, the event will not bubble to parent elements, preventing parent event handlers from being called.
 
 ## Example
 ```js
diff --git a/docs/2.9-External-Subflows-support.md b/docs/pages/02-canvas/09-ext-flows/01-External-Subflows-support.md
similarity index 95%
rename from docs/2.9-External-Subflows-support.md
rename to docs/pages/02-canvas/09-ext-flows/01-External-Subflows-support.md
index c0e891ff51..ddf266aed3 100644
--- a/docs/2.9-External-Subflows-support.md
+++ b/docs/pages/02-canvas/09-ext-flows/01-External-Subflows-support.md
@@ -1,4 +1,6 @@
-# Introduction
+# External Subflows
+
+## Introduction
 
 The pipeline flow schema describes two ways of storing a sub-flow pipelines for a supernode: local or external. Local sub-flows are stored within the pipeline flow document whereas external pipelines are stored in a separate pipeline flow document (usually as the primary pipeline in that pipeline flow). The supernode that references an external pipeline contains a `url` property (in `<node>.subflow_ref.url`) and a `pipeline ID` property (in `<node>.subflow_ref.pipeline_id_ref`) to identify the external pipeline flow and the pipeline within it.
 
@@ -8,16 +10,16 @@ Common-canvas supports external pipelines but the host application UI code needs
 * Respond to calls from common-canvas to provide the external pipeline flow(s) when requested.
 * Respond to call from common-canvas when a local pipeline is changed to external or an external is changed to local.
 
-Common-canvas supports lazy loading of external pipeline flows so they will only be requested from your code when the user performs some gesture that requires the pipeline (from within the external pipeline flow) to be displayed.  
+Common-canvas supports lazy loading of external pipeline flows so they will only be requested from your code when the user performs some gesture that requires the pipeline (from within the external pipeline flow) to be displayed.
 
 ## Creating an external sub-flow
-When the common-canvas config property [enableExternalPipelineFlows](2.1-Config-Objects.md#enableexternalpipelineflows) is set to true (the default) and, when a set of objects are selected from which a super node can be created, the default common-canvas context menu will include a `Create External Supernode` option. 
+When the common-canvas config property [enableExternalPipelineFlows](2.1-Config-Objects.md#enableexternalpipelineflows) is set to true (the default) and, when a set of objects are selected from which a super node can be created, the default common-canvas context menu will include a `Create External Supernode` option.
 
-When the `Create External Supernode` option is clicked the `createSuperNodeExternal` action is executed. 
+When the `Create External Supernode` option is clicked the `createSuperNodeExternal` action is executed.
 
 If your application doesn't use the default context menu you can define your own context menu (returned from `contextMenuHandler`) to contain an option which maps to the `createSuperNodeExternal` action. See the section on the [contextMenuHandler](2.2-Common-Canvas-callbacks.md#contextmenuhandler) for details on how to do this.
 
-When the `createSuperNodeExternal` action is executed, the `beforeEditActionHandler` callback is called before the external sub-flow is created. The `beforeEditActionHandler` is called where the first parameter `data` has two properties `externalUrl` and `externalPipelineFlowId` which will both be set to empty string.  Your code must set these to whatever values you want for the url and pipeline flow ID. The url will be assigned to the `subflow_ref.url` property of the supernode that is being created. The pipeline flow ID will be assigned to the newly created pipeline flow. 
+When the `createSuperNodeExternal` action is executed, the `beforeEditActionHandler` callback is called before the external sub-flow is created. The `beforeEditActionHandler` is called where the first parameter `data` has two properties `externalUrl` and `externalPipelineFlowId` which will both be set to empty string.  Your code must set these to whatever values you want for the url and pipeline flow ID. The url will be assigned to the `subflow_ref.url` property of the supernode that is being created. The pipeline flow ID will be assigned to the newly created pipeline flow.
 
 Your code must return the `data` parameter from the `beforeEditActionHandler` callback if you want the action to proceed and create the sub-flow. If you need to do any asynchronous activity at this point see the documentation on the [beforeEditActionHanlder](2.2-Common-Canvas-callbacks.md#beforeeditactionhandler) for details on how to do that.
 
@@ -41,8 +43,8 @@ When any of these actions are performed common-canvas will call the `beforeEditA
 * externalUrl - This is the string which identifies the external pipeline flow document.
 * externalPipelineId - This is the ID of the pipeline being loaded
 * externalPipelineFlow - If `externalPipelineFlowLoad` if true this will be undefined. Otherwise it will be contain the previously loaded external pipeline flow.
- 
-You need to implement the `beforeEditActionHandler` so that: 
+
+You need to implement the `beforeEditActionHandler` so that:
 
 * when the actions above are being performed and externalPipelineFlowLoad is true, you retrieve the external pipeline flow from your repository
 * you then assign it to the `externalPipelineFlow` property of the data object
@@ -51,19 +53,19 @@ You need to implement the `beforeEditActionHandler` so that:
 Your code must return the `data` parameter from the `beforeEditActionHandler` callback if you want the action to proceed and load the external pipeline flow. If you need to do any asynchronous activity at this point see the documentation on the [beforeEditActionHanlder](2.2-Common-Canvas-callbacks.md#beforeeditactionhandler) for details on how to do that.
 
 ## Converting a local supernode to an external supernode
-When the common-canvas config property [enableExternalPipelineFlows](2.1-Config-Objects.md#enableexternalpipelineflows) is set to true, and a local supernode's is right clicked, the default common-canvas context menu will include a `Convert local to external` option.  This will execute the `convertSuperNodeLocalToExternal` action. 
+When the common-canvas config property [enableExternalPipelineFlows](2.1-Config-Objects.md#enableexternalpipelineflows) is set to true, and a local supernode's is right clicked, the default common-canvas context menu will include a `Convert local to external` option.  This will execute the `convertSuperNodeLocalToExternal` action.
 
 The `convertSuperNodeLocalToExternal` action is similar to the `createSuperNodeExternal` action in that a new external pipeline flow is being created. Consequently, you can follow the instructions in the [Creating an external sub-flow](2.9-External-Subflows-support.md#creating-an-external-sub-flow) section for providing the appropriate properties of the `data` object in the `beforeEditActionHandler` and `editActionHandler` callbacks.
 
 ## Converting an external supernode to a local supernode
-When the common-canvas config property [enableExternalPipelineFlows](2.1-Config-Objects.md#enableexternalpipelineflows) is set to true, and an external supernode's is right clicked, the default common-canvas context menu will include a `Convert external to local` option.  This will execute the `convertSuperNodeExternalToLocal` action. 
+When the common-canvas config property [enableExternalPipelineFlows](2.1-Config-Objects.md#enableexternalpipelineflows) is set to true, and an external supernode's is right clicked, the default common-canvas context menu will include a `Convert external to local` option.  This will execute the `convertSuperNodeExternalToLocal` action.
 
 The `convertSuperNodeExternalToLocal` action is similar to the `expandSuperNodeInPlace` action in that an external pipeline flow may need to be retrieved from your repository. Consequently, you can follow the instructions in the [Loading an external sub-flow](2.9-External-Subflows-support.md#loading-an-external-sub-flow) section for providing the appropriate properties of the `data` object in the `beforeEditActionHandler` callback.
 
-## Deleting an external supernode/sub-flow 
-When the user deletes an external supernode/sub-flow the supernode will be removed from the canvas. You code does not need to do anything unless you want to also remove the external pipeline flow from your repository. 
+## Deleting an external supernode/sub-flow
+When the user deletes an external supernode/sub-flow the supernode will be removed from the canvas. You code does not need to do anything unless you want to also remove the external pipeline flow from your repository.
 
-## Clipboard support 
+## Clipboard support
 When a supernode, that refers to an external pipeline, is cut/copied and pasted, the pasted supernode refers to the same external pipeline as the supernode that was cut or copied. This means that if an external supernode is copied to the clipboard and then pasted into the same canvas the result will be two supernodes that refer to the same external pipeline.  
 
 The same situation can occur if a supernode, that refers to an external pipeline, is in the palette and that node is dragged multiple times from the palette onto the canvas.
@@ -72,4 +74,4 @@ The same situation can occur if a supernode, that refers to an external pipeline
 Objects (nodes, links comments, etc.) in an external pipeline can be updated by the host application calling the `CanvasController` API. However, such changes are only effective within common-canvas. It is the host application's responsibility to make sure these changes are persisted in the external pipeline flow document (if that is the behavior that is required). This can be done by the host application calling `CanvasController.getExternalPipelineFlow(url)` and then saving the returned document to the appropriate repository.
 
 ## External pipelines in the Elyra Canvas Test Harness
-The Test Harness supports external pipeline flows but will only persist any saved flows for the current session. (It just stores them in memory).  You can examine the `beforeEditActionHandler` and `editActionHandler` in App.js in the test harness to see how it handles the different actions for managing external pipeline flows. 
\ No newline at end of file
+The Test Harness supports external pipeline flows but will only persist any saved flows for the current session. (It just stores them in memory).  You can examine the `beforeEditActionHandler` and `editActionHandler` in App.js in the test harness to see how it handles the different actions for managing external pipeline flows.
diff --git a/docs/2.6-Flow-Validation-API.md b/docs/pages/02-canvas/10-validate/01-Flow-Validation-API.md
similarity index 94%
rename from docs/2.6-Flow-Validation-API.md
rename to docs/pages/02-canvas/10-validate/01-Flow-Validation-API.md
index 159fdda93f..950e1ac08f 100644
--- a/docs/2.6-Flow-Validation-API.md
+++ b/docs/pages/02-canvas/10-validate/01-Flow-Validation-API.md
@@ -1,5 +1,7 @@
 # Flow Validation API
 
+## __This function is deprectated and will be removed in  future release__
+
   The Flow Validation API allows application code to programmatically validate the nodes in the flow against it's property values.  The API can be invoked after setting the Canvas Controller pipeline flow, when opening a new flow, or associated with a canvas context menu item.  To use the Flow Validation API import the FlowValidation object fro common-canvas:
 ```
 import { FlowValidation } from "@elyra/canvas";
@@ -13,10 +15,10 @@ The Flow Validation object provides the following API:
 
 ```
 validateFlow(canvasController, parameterDataCallback, setNodeMessagesCallback, includeMsgTypes)
-	canvasController - an instance of the canvas controller 
+	canvasController - an instance of the canvas controller
 	parameterDataCallback – function to get the parameter data or form data for a node
 	setNodeMessagesCallback – function to set the validation messages for a node. (optional)
-    includeMsgTypes - array[strings] Return invalid only if messages are found of types contained 
+    includeMsgTypes - array[strings] Return invalid only if messages are found of types contained
                       in the array. If not specified then any message type causes invalid return. (optional)
     return - boolean If flow is valid returns true, otherwise returns false.
 ```
@@ -34,10 +36,10 @@ parameterDataCallback(nodeId)
 setNodeMessagesCallback(nodeId, messages)
 	nodeId – string node Id.
 	an array of message objects generated from the validation of the node.
-``` 
+```
 
 The validateFlow() API will traverse the current flow and for each node invoke the parameterDataCallback() to get with a form data JSON or a parameterDef JSON.  It will validate the JSON for the node and store any messages in the node objects within the model.  The setNodeMessagesCallback() function will be called with all the messages generated for the node.  This is only useful if the application is not using the internal object model.
-The format of the message object is described in [Pipeline Flow UI schema](https://github.com/elyra-ai/wdp-pipeline-schemas/blob/master/common-pipeline/pipeline-flow/pipeline-flow-ui-v1-schema.json) 
+The format of the message object is described in [Pipeline Flow UI schema](https://github.com/elyra-ai/wdp-pipeline-schemas/blob/master/common-pipeline/pipeline-flow/pipeline-flow-ui-v1-schema.json)
 
 Here is an example of using the FlowValidation API to validate a flow on opening:
 
diff --git a/docs/2.0-Common-Canvas-Documentation.md b/docs/pages/02-canvas/index.md
similarity index 87%
rename from docs/2.0-Common-Canvas-Documentation.md
rename to docs/pages/02-canvas/index.md
index 119573587b..82f1eb7b08 100644
--- a/docs/2.0-Common-Canvas-Documentation.md
+++ b/docs/pages/02-canvas/index.md
@@ -1,3 +1,6 @@
+# Common Canvas
+
+
 ## Introduction
 Common canvas displays a flow of data operations as nodes and links which the user can create and edit to get the flow they want. These visual flows of data operations are translated into data processing steps performed by a back-end server. Common canvas provides functionality for the visual display of flows in the browser and leaves persistence and execution of data flows to the application.
 Within common canvas the user can perform operations such as:
@@ -9,34 +12,41 @@ Within common canvas the user can perform operations such as:
 * Delete a link by clicking a context menu option.
 * Add a comment to the canvas and draw a link from it to one or more nodes.
 * Edit a comment.
-* Move nodes and comments around in the canvas to get the desired arrangement.  
+* Move nodes and comments around in the canvas to get the desired arrangement.
 * And more! ...
 
-# Architecture
 
 ## Common Canvas react object
-   Common-canvas is a react component that can be used in your react application to display a fully-functional canvas user interface including the function mentioned above. The `<CommonCanvas>` component is displayed in a `<div>` provided by your application. 
-
-Common-canvas has these constituent parts that are visible to the user:
+   Common-canvas is a react component that can be used in your react application to display a fully-functional canvas user interface including the function mentioned above. The `<CommonCanvas>` component is displayed in a `<div>` provided by your application. Here's some sample code to show the mnimum needed to get a working canvas.
 
-* [Canvas editor](2.0.1-Canvas-Editor.md) - the main area of the UI where the flow is displayed and edited
-* [Palette](2.0.2-Palette.md) - a set of node templates that can be dragged to the canvas to create new nodes
-* [Context menu](2.0.3-Context-Menu.md) - a menu of options for nodes, comments, etc
-* [Context toolbar](2.0.4-Context-Toolbar.md) - a menu of options for nodes, comments, etc presented as a small toolbar
-* Toolbar - a set of tools across the top of the UI
-* Notification panel - a panel for displaying runtime and other messages to your user
-* Right side flyout - a panel, often used to display node properties
-* Top panel - a panel which can be used to display other app related information
-* Bottom panel - a panel which can be used to display other app related information
+```
+import React from "react";
+import AllTypesCanvas from "../../test_resources/diagrams/allTypesCanvas.json";
+import ModelerPalette from "../../test_resources/palettes/modelerPalette.json";
+import { CommonCanvas, CanvasController } from "@elyra/canvas";
+
+class App extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.canvasController = new CanvasController();
+		this.canvasController.setPipelineFlow(AllTypesCanvas);
+		this.canvasController.setPipelineFlowPalette(ModelerPalette);
+	}
+
+	render() {
+		return (
+			<div id="harness-app-container">
+				<CommonCanvas
+					canvasController={this.canvasController}
+				/>
+			</div>
+		);
+	}
+}
+```
 
-and it handles: 
 
-  1. the visual display of the flow of operations;
-  2. any user gestures on the canvas;
-  3. display of context menus;
-  4. display and handling of the palette.
-  5. provision of callbacks to tell your code what operations the user is performing on the canvas
-  6. and much much more.
 
 ## Canvas Controller
 
@@ -63,7 +73,7 @@ The only mandatory parameter for the `<CommonCanvas>` component is a regular Jav
 ## Hello Canvas!
   You can start by looking at these two 'hello  world' examples for using common canvas:
 
-* This first one called [app-tiny.js](https://github.com/elyra-ai/canvas/blob/master/canvas_modules/harness/src/client/app-tiny.js) has the bare minimum necessary to get a fully functioning common-canvas to appear including all the basic functionality, a palette and a flow of nodes and links. 
+* This first one called [app-tiny.js](https://github.com/elyra-ai/canvas/blob/master/canvas_modules/harness/src/client/app-tiny.js) has the bare minimum necessary to get a fully functioning common-canvas to appear including all the basic functionality, a palette and a flow of nodes and links.
 * The second, called [app-small.js](https://github.com/elyra-ai/canvas/blob/master/canvas_modules/harness/src/client/app-small.js), shows many of the options available to a common-canvas developer such as configurations and callback handlers.
 
 You can also look at the [App.js](https://github.com/elyra-ai/canvas/blob/49ed634e3353d8f5c58eb8409ed8e1009f19c87a/canvas_modules/harness/src/client/App.js) file in the test harness section of this repo to see examples of code that uses the common canvas component.
@@ -75,7 +85,7 @@ You can also look at the [App.js](https://github.com/elyra-ai/canvas/blob/49ed63
 
 Enter:
 ```
-     npm install @elyra/canvas 
+     npm install @elyra/canvas
 ```
 
 ## Step 2 : Import Common-canvas
@@ -109,10 +119,10 @@ Next you'll need to populate the palette data. This will specify the nodes (spli
 ```js
     this.canvasController.setPipelineFlowPalette(pipelineFlowPalette);
 ```
-The pipelineFlowPalette object should conform to the JSON schema found here:    
+The pipelineFlowPalette object should conform to the JSON schema found here:
 https://github.com/elyra-ai/pipeline-schemas/tree/master/common-canvas/palette
 
-Some examples of palette JSON files can be found here:    
+Some examples of palette JSON files can be found here:
 https://github.com/elyra-ai/canvas/tree/master/canvas_modules/harness/test_resources/palettes
 
 ## Step 5 : (Optional) Set the flow data
@@ -121,10 +131,10 @@ This is an optional step. If you want a previously saved flow to be shown in the
     this.canvasController.setPipelineFlow(pipelineFlow);
 ```
 
-The pipelineFlow object should conform to the JSON schema found here:    
+The pipelineFlow object should conform to the JSON schema found here:
 https://github.com/elyra-ai/pipeline-schemas/tree/master/common-pipeline/pipeline-flow
 
-Some examples of pipeline flow JSON files can be found here:    
+Some examples of pipeline flow JSON files can be found here:
 https://github.com/elyra-ai/canvas/tree/master/canvas_modules/harness/test_resources/diagrams
 
 ## Step 6 : Pull in the CSS
@@ -143,7 +153,7 @@ Finally you'll need to display the canvas object inside an `<IntlProvider>` obje
 The div should have the dimensions you want for your canvas to display in your page. For the canvasController property, pass the instance of canvas controller you created earlier. This is the only mandatory property. After providing this and running your code you will have a fully functioning canvas including: a palette; default toolbar; context menus; direct manipulation (move and resize) etc. To customize these behaviors and presentation continue with the sections below.
 
 ## Common Canvas customization
-If you want to customize the behavior of common canvas you can specify any combination of the following optional settings:   
+If you want to customize the behavior of common canvas you can specify any combination of the following optional settings:
 ```html
     <div>
         <CommonCanvas
@@ -157,10 +167,10 @@ If you want to customize the behavior of common canvas you can specify any combi
 
             contextMenuHandler={this.contextMenuHandler}
             beforeEditActionHandler={this.beforeEditActionHandler}
-            editActionHandler={this.editActionHandler}    
-            clickActionHandler={this.clickActionHandler}   
+            editActionHandler={this.editActionHandler}
+            clickActionHandler={this.clickActionHandler}
             decorationActionHandler={this.decorationActionHandler}
-            layoutHandler={this.layoutHandler}  
+            layoutHandler={this.layoutHandler}
             tipHandler={this.tipHandler}
             idGeneratorHandler={this.idGeneratorHandler}
             selectionChangeHandler={this.selectionChangeHandler}
@@ -226,7 +236,7 @@ Common canvas supports a number of keyboard interactions as follows:
 
 |Keyboard Shortcut|Action|Description|
 |---|---|---|
-|Ctrl/Cmnd + a|selectAll|Select All objects   
+|Ctrl/Cmnd + a|selectAll|Select All objects
 |delete|deleteSelectedObjects|Delete currently selected objects|
 |Ctrl/Cmnd + x|cut|Cut selected objects to the clipboard|
 |Ctrl/Cmnd + c|copy|Copy selected objects to the clipboard|
diff --git a/docs/3.1-Common-Properties-Parameter-Definition.md b/docs/pages/03-props/01-Parameter-Definition.md
similarity index 100%
rename from docs/3.1-Common-Properties-Parameter-Definition.md
rename to docs/pages/03-props/01-Parameter-Definition.md
diff --git a/docs/3.2-Common-Properties-UI-Hints.md b/docs/pages/03-props/02-UI-Hints.md
similarity index 100%
rename from docs/3.2-Common-Properties-UI-Hints.md
rename to docs/pages/03-props/02-UI-Hints.md
diff --git a/docs/3.3-Common-Properties-Controls.md b/docs/pages/03-props/03-Controls.md
similarity index 97%
rename from docs/3.3-Common-Properties-Controls.md
rename to docs/pages/03-props/03-Controls.md
index 40c71fe33b..28278b53e7 100644
--- a/docs/3.3-Common-Properties-Controls.md
+++ b/docs/pages/03-props/03-Controls.md
@@ -1,4 +1,6 @@
-# Common Properties Element Types
+# Controls
+
+## Common Properties Element Types
 The editor determines the most appropriate control and panel type for each parameter based on the context (parameter type, role, group type, etc.). Although an author can specify a desired control for a given parameter via its `uihints`, this should be used sparingly and carefully - specifying an inappropriate control for a parameter will lead to undefined behavior.
 
 A visual documentation containing examples of the following group/panels and control types are available at https://wdp-common-canvas-dev.stage1.mybluemix.net/#/properties.
@@ -16,9 +18,9 @@ Controls are grouped and arranged on panels and sub-panels within the "group_inf
 * `customPanel` A custom panel for displaying user defined control. See [3.5 Common Properties Custom Components](3.5-Common-Properties-Custom-Components.md#custom-panels) for more details.
 * `summaryPanel` A panel used in the flyout editor that will provide a link to open a wide flyout that can contain panels and parameter.
 * `actionPanel` A panel used for containing action controls.
-* `textPanel` A panel used to display static label and/or description. 
+* `textPanel` A panel used to display static label and/or description.
 * `twistyPanel` A panel used to display a panel title that expands to the panel content when clicked.
-* `columnPanel` A panel used to display children side by side. 
+* `columnPanel` A panel used to display children side by side.
 * `tearsheetPanel` A tearsheet panel.  The panel can be opened/closed using the propertyController methods `setActiveTearsheet(groupId)` and `clearActiveTearsheet()`
 
 ## Parameter Controls
@@ -36,17 +38,17 @@ The following controls are supported in the Common Properties editor. Control ty
     "data": {
       "tearsheet_ref": "<tearsheet groupId>"
     }
-    ```   
+    ```
 * `code` An code editing field  that provides language specific syntax highlighting and text auto complete.  To maximize in a tearsheet add this attribute and define a `tearsheetPanel` in `group_info`.
     ```
     "data": {
       "tearsheet_ref": "<tearsheet groupId>"
     }
-    ``` 
+    ```
 * `numberfield` A numeric text field. Number fields can also optionally display a random number generator button beside the control. See the uihints schema for details.
 * `datefield` A date input control whose date format tokens follow [date-fns](https://date-fns.org/v2.29.3/docs/format). Defaults to `yyyy-mm-dd`
 * `timefield` A time input control whose time format tokens follow [date-fns](https://date-fns.org/v2.29.3/docs/format). Defautls to `H:m:s`
-* `datepicker` A date input control with calendar picker whose date format tokens follow [Flatpickr](https://flatpickr.js.org/formatting/#date-formatting-tokens). Defaults to `Y-m-d`. Helper text can be included by adding `[parameter_id].helper` in the resources section. 
+* `datepicker` A date input control with calendar picker whose date format tokens follow [Flatpickr](https://flatpickr.js.org/formatting/#date-formatting-tokens). Defaults to `Y-m-d`. Helper text can be included by adding `[parameter_id].helper` in the resources section.
 * `datepickerRange` A date input control with calendar picker for a range of dates. This follow the same rules as the `datepicker` control. Start and end labels defaults to `Start` and `End` respectively. Start, end, and helper labels can be customized by adding the following in the resources section:
     ```
     "resources": {
@@ -57,7 +59,7 @@ The following controls are supported in the Common Properties editor. Control ty
       [parameter_id].range.end.desc: "Custom end description that will appear as tooltip next to the label",
       [parameter_id].range.end.helper: "Custom end helper that will appear as text below the input"`
     }
-    ``` 
+    ```
 * `spinner` A standard spinner control to increment/decrement the number value.
 * `checkbox` A standard checkbox control.
 * `radioset` A radio set where a parameter value is selected from a small range of options. See the Conditions wiki page for special radio button disabling options.
@@ -80,8 +82,8 @@ The following controls are supported in the Common Properties editor. Control ty
 
 ### A Note on Field Name Storage
 When a given node can accept more than a single datarecord-metadata object as input, it becomes necessary to store the schema name (a.k.a. 'link_name') along with each field name that is stored in parameter sets. In those cases, instead of using strings to store field names, they are represented in parameter sets as compound objects containing both 'link_ref' and 'field_name' elements:
-    
-    "current_parameters": {  
+
+    "current_parameters": {
       "field": { "link_ref": "Schema-1", "field_name": "Age" },
       ...
 
@@ -104,9 +106,9 @@ When editing complex type values in tables one can either edit cell values inlin
 * `on_panel` Control appears below the table when the row is selected.
 
 ### Miscellaneous
-* `moveable_rows` *boolean* A value that appears in "complex_type_definition" sections. If set to `true` allows rows in the table to be moved  up and down for reordering. 
+* `moveable_rows` *boolean* A value that appears in "complex_type_definition" sections. If set to `true` allows rows in the table to be moved  up and down for reordering.
 * `row_selection` *enum ["single", "multiple"]* Determines how many rows can be selected in a table at one time. Defaults to *multiple*.
 * `sortable` *boolean* Both sortable and filterable apply to table columns. When set within the "key_definition" or the "parameters" sections of a structure definition, those columns are sortable and/or can be filtered upon.
 * `filterable` *boolean* _(see sortable above)_
-* `language` *enum ["CLEM", "text/x-hive"]* The language for the expression control syntax highlight and text auto complete feature.  If not specified, the expression control does not have syntax highlighting or text auto complete. 
+* `language` *enum ["CLEM", "text/x-hive"]* The language for the expression control syntax highlight and text auto complete feature.  If not specified, the expression control does not have syntax highlighting or text auto complete.
 * `layout` A two-dimensional string array value that appears in "complex_type_definition" sections and allows one to layout structureeditor controls in a two dimensional grid.
diff --git a/docs/3.4-Common-Properties-Conditions.md b/docs/pages/03-props/04-Conditions.md
similarity index 100%
rename from docs/3.4-Common-Properties-Conditions.md
rename to docs/pages/03-props/04-Conditions.md
diff --git a/docs/3.5-Common-Properties-Custom-Components.md b/docs/pages/03-props/05-Custom-Components.md
similarity index 100%
rename from docs/3.5-Common-Properties-Custom-Components.md
rename to docs/pages/03-props/05-Custom-Components.md
diff --git a/docs/3.6-Common-Properties-Controller.md b/docs/pages/03-props/06-Properties-Controller.md
similarity index 100%
rename from docs/3.6-Common-Properties-Controller.md
rename to docs/pages/03-props/06-Properties-Controller.md
diff --git a/docs/3.0-Common-Properties-documentation.md b/docs/pages/03-props/index.md
similarity index 96%
rename from docs/3.0-Common-Properties-documentation.md
rename to docs/pages/03-props/index.md
index 77e4e2a97a..d1e4e27aea 100644
--- a/docs/3.0-Common-Properties-documentation.md
+++ b/docs/pages/03-props/index.md
@@ -1,10 +1,12 @@
+# Common Properties
+
 ## Introduction
 Common properties displays controls to view and set property values.
 
 You can look at the harness/src/client/App.js file of this repo to see examples of code that uses the common properties component.
 
 
-# Getting started with Common Properties programming
+## Getting started with Common Properties programming
 
 _Note: There are two ways one can use the Common Properties tooling: Either by allowing the form to be built dynamically from a parameterDef JSON (which is comprised of the base property set, ui-hints, conditions, and resources), or by explicitly providing the dialog form for rendering (deprecated). The first approach is recommended as an easier and clearer interface_
 
@@ -16,7 +18,7 @@ To use Common Properties in your React application you need to do the following.
 ```js
     import { CommonProperties } from "@elyra/canvas";
 ```
-**Properties Only** 
+**Properties Only**
 
 To import only common properties functionality in `cjs` format use:
 
@@ -39,9 +41,9 @@ propertiesInfo: {
   id: "{id}"	                            // Unique parameter definition ID [Optional]
 }
 ```
-[parameterDef schema and examples](https://github.com/elyra-ai/pipeline-schemas/tree/master/common-canvas/parameter-defs)  
-[3.1 Common Properties Parameter Definition](3.1-Common-Properties-Parameter-Definition.md)  
-[`expressionInfo` schema and examples](https://github.com/elyra-ai/pipeline-schemas/tree/master)  
+[parameterDef schema and examples](https://github.com/elyra-ai/pipeline-schemas/tree/master/common-canvas/parameter-defs)
+[3.1 Common Properties Parameter Definition](3.1-Common-Properties-Parameter-Definition.md)
+[`expressionInfo` schema and examples](https://github.com/elyra-ai/pipeline-schemas/tree/master)
 
 or...
 
@@ -57,8 +59,8 @@ propertiesInfo: {
   id: "{id}"	                                                // Unique parameter definition ID [Optional]
 }
 ```
-formData [schema](https://github.com/elyra-ai/pipeline-schemas/tree/master/common-canvas/form)  
-form information [wiki](https://github.com/elyra-ai/wml-canvas-service/wiki/2.-Runtimes-And-Operators)  
+formData [schema](https://github.com/elyra-ai/pipeline-schemas/tree/master/common-canvas/form)
+form information [wiki](https://github.com/elyra-ai/wml-canvas-service/wiki/2.-Runtimes-And-Operators)
 
 The optional messages attribute can be used to set validation messages associated with a node.  The format of the message objects is defined in [Pipelin Flow UI schema](https://github.com/elyra-ai/pipeline-schemas/blob/master/common-pipeline/pipeline-flow/pipeline-flow-ui-v1-schema.json)
 
@@ -85,7 +87,7 @@ var messages = i18nData.messages;
     />
   </IntlProvider>
 ```
-**Properties**  
+**Properties**
 
 - propertiesInfo `object`: See above
 - propertiesConfig `object`:
@@ -122,7 +124,7 @@ You can look at the **harness/src/intl/en.js** file of this repo to see the list
 **Reference methods**
 ```js
 /*
-* @closeEditor (boolean) - determines if closePropertiesDialog is called or not 
+* @closeEditor (boolean) - determines if closePropertiesDialog is called or not
 */
 applyPropertiesEditing(closeEditor)
 ```
@@ -137,7 +139,7 @@ Create a CommonProperties object with containerType set to "Custom" and rightFly
     const rightFlyoutContent =(<CommonProperties
         propertiesInfo={this.propertiesInfo}
         propertiesConfig={{ containerType: "Custom", rightFlyout: true }}
-        callbacks={this.callbacks}  
+        callbacks={this.callbacks}
     />);
 ```
 Pass the CommonProperties object into CommonCanvas's rightFlyoutContent props. Also set the showRightFlyout boolean to tell CommonCanvas when to show the rightFlyout.
@@ -195,7 +197,7 @@ closePropertiesDialog() {
 ```
 
 ### propertyListener()
-Executes when a user property values are updated.  
+Executes when a user property values are updated.
 
 ```js
 propertyListener(data) {
@@ -222,14 +224,14 @@ actionHandler(id, appData, data) {
 ```
 
 ### buttonHandler()
-Called when the edit button is clicked on in a `readonlyTable` control, or if a custom table button is clicked. The callback provides the following data: 
+Called when the edit button is clicked on in a `readonlyTable` control, or if a custom table button is clicked. The callback provides the following data:
 
 - data: an object that consists of
-    - type: of button the click was invoked from. 
+    - type: of button the click was invoked from.
         - `edit` is returned from the edit button click of a `readonlyTable` control.
         - `custom_button` is returned from the custom button click of a complex type control.
-    - propertyId: of the control that was clicked. 
-    - buttonId: of the button that was clicked from a custom table button. 
+    - propertyId: of the control that was clicked.
+    - buttonId: of the button that was clicked from a custom table button.
 
 ```js
 buttonHandler(data) {
@@ -238,12 +240,12 @@ buttonHandler(data) {
 ```
 
 ### buttonIconHandler()
-Called when there is a `buttons` uihints set in the `complex_type_info` section of the parameter definition. This buttonIconHandler expects a Carbon Icon jsx object as the return value from the callback. This is used to display the Carbon icon in the custom table button. The buttonIconHandler provides the following data: 
+Called when there is a `buttons` uihints set in the `complex_type_info` section of the parameter definition. This buttonIconHandler expects a Carbon Icon jsx object as the return value from the callback. This is used to display the Carbon icon in the custom table button. The buttonIconHandler provides the following data:
 
 - data: an object that consists of
     - type: `customButtonIcon`
-    - propertyId: of the control that was clicked. 
-    - buttonId: of the button that was clicked from a custom table button. 
+    - propertyId: of the control that was clicked.
+    - buttonId: of the button that was clicked from a custom table button.
     - carbonIcon: The name of the Carbon icon specified in the uihints. The corresponding jsx object is expected to be returned in the callback.
 
 ```js
@@ -266,7 +268,7 @@ helpClickHandler(nodeTypeId, helpData, appData) {
 }
 ```
 To control whether a node shows the help icon in the right fly-out, a help object with optional helpData needs to be provided in the paramDef or formData:
-- paramDef: Provide help object in operator's uihints. If help object exists, the icon will be shown. Optionally, provide a helpData object within the help object, which will be passed in the helpClickHandler callback.  
+- paramDef: Provide help object in operator's uihints. If help object exists, the icon will be shown. Optionally, provide a helpData object within the help object, which will be passed in the helpClickHandler callback.
 https://github.com/elyra-ai/pipeline-schemas/blob/master/common-pipeline/operators/uihints-v2-schema.json#L64
 - formData: add help object to form definition. The
 https://github.com/elyra-ai/pipeline-schemas/blob/master/common-canvas/form/form-v2-schema.json#L51
@@ -286,7 +288,7 @@ titleChangeHandler(title, callbackFunction) {
       type: "error",
       message: "Only 15 characters are allowed in title."
     });
-  } 
+  }
 }
 ```
 where:
diff --git a/docs/pages/04-trouble/01-Troubleshooting.md b/docs/pages/04-trouble/01-Troubleshooting.md
new file mode 100644
index 0000000000..756fa4bed1
--- /dev/null
+++ b/docs/pages/04-trouble/01-Troubleshooting.md
@@ -0,0 +1,25 @@
+# Trouble shooting
+
+
+## Testing
+When testing your application with Jest, this error might show up: `crypto.getRandomValues() not supported`. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported for details.
+
+To fix, added this to your jest setup file:
+```js
+const cryptoJest = require("crypto");
+Object.defineProperty(global.self, "crypto", {
+	value: {
+		getRandomValues: (arr) => cryptoJest.randomBytes(arr.length)
+	}
+});
+```
+
+
+## Elyra Canvas styling guidelines
+- Used the `data-id` attribute on inputs to be used for automated tests.  Format for common properties should be `properties-`
+- **className** format format for common-properties should be `properties-`
+- Limit the use of html(DOM) ids
+- Minimum inline styling.  This allows for consumers to easily override styling.
+- scss/sass styling should be added to the component's folder
+- No `important!` in styling
+- Use variables for all colors(preferably from carbon)
diff --git a/docs/5.0-Testing-Guidelines-for-Development.md b/docs/pages/05-contrib/01-Testing-Guidelines-for-Development.md
similarity index 100%
rename from docs/5.0-Testing-Guidelines-for-Development.md
rename to docs/pages/05-contrib/01-Testing-Guidelines-for-Development.md
diff --git a/docs/pages/assets/FlowIcon.png b/docs/pages/assets/FlowIcon.png
new file mode 100644
index 0000000000..4bb30ae3de
Binary files /dev/null and b/docs/pages/assets/FlowIcon.png differ
diff --git a/docs/pages/assets/flow.svg b/docs/pages/assets/flow.svg
new file mode 100644
index 0000000000..20d3883968
--- /dev/null
+++ b/docs/pages/assets/flow.svg
@@ -0,0 +1 @@
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:#000000;}.cls-2{fill:none;}</style></defs><title>flow--data</title><path class="cls-1" d="M20,23H11.86a4.17,4.17,0,0,0-.43-1L22,11.43A3.86,3.86,0,0,0,24,12a4,4,0,1,0-3.86-5H11.86a4,4,0,1,0,0,2h8.28a4.17,4.17,0,0,0,.43,1L10,20.57A3.86,3.86,0,0,0,8,20a4,4,0,1,0,3.86,5H20v3h8V20H20ZM8,10a2,2,0,1,1,2-2A2,2,0,0,1,8,10ZM24,6a2,2,0,1,1-2,2A2,2,0,0,1,24,6ZM8,26a2,2,0,1,1,2-2A2,2,0,0,1,8,26Zm14-4h4v4H22Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-2" width="32" height="32"/></svg>
\ No newline at end of file
diff --git a/docs/pages/assets/spss-modeler.gif b/docs/pages/assets/spss-modeler.gif
new file mode 100644
index 0000000000..f2eeda2784
Binary files /dev/null and b/docs/pages/assets/spss-modeler.gif differ
diff --git a/docs/css/styles.css b/docs/pages/css/styles.css
similarity index 96%
rename from docs/css/styles.css
rename to docs/pages/css/styles.css
index 837e31c9c6..33e73ab515 100644
--- a/docs/css/styles.css
+++ b/docs/pages/css/styles.css
@@ -19,5 +19,6 @@ th {
 }
 
 .md-grid {
-  max-width: initial;
-}
\ No newline at end of file
+  max-width: 71rem;
+}
+
diff --git a/docs/pages/index.md b/docs/pages/index.md
new file mode 100644
index 0000000000..74fcfae8ca
--- /dev/null
+++ b/docs/pages/index.md
@@ -0,0 +1,40 @@
+# Welcome to Elyra Canvas
+
+Elyra Canvas is an open source library providing **React** objects to enable applications to
+**quickly** create a **fully functional flow editor** allowing the user to easily create and edit
+flows of linked nodes.
+
+<p>
+	<img src="assets/spss-modeler.gif" width="800" height="400"/>
+	<br />
+	<em>Elyra Canvas in action in the SPSS Modeler UI, the flagship component of IBM Watsonx</em>
+</p>
+
+## Elyra Canvas Features:
+
+* Provides a comprehensive set of out-of-the-box UI components needed to build
+an application - Such as: flow editor, palette, toolbar, context menu, tooltips, command stack,
+clipboard support, notifications area, side panels and more!
+* Is a UI-centric library and is therefore back-end and run-time agnositc, meaning the flow can
+display connected nodes representing any kind of operations.
+* Is fast to get running - and easy to customize  - with extensive customization capability.
+* Is delivered as a module in the [NPM registry](https://www.npmjs.com/package/@elyra/canvas)
+* Delivers a JSON powered properties management component to allow easy, no-code handling of
+mulltiple properties windows - for when you have a multitude of node types each with their own range of properties.
+* Conforms to the [IBM Carbon](https://carbondesignsystem.com/all-about-carbon/what-is-carbon/) visual design language - and therefore plugs in easily to any application wishing to follow the Carbon standards including dark mode and light mode themes.
+* Delivers built-in accessibility so there's no need to worry about keyboard
+navigation, accessible color themes, screen reader integration, etc.
+* Is translated into 12 languages.
+* Is the mainstay of several IBM products/applications across multiple divisions.
+
+
+## Elyra Canvas Components
+
+The elyra-ai/canvas repo contains three main components:
+
+* [Common Canvas](02-canvas/index.md) - This contains canvas functionality which is packaged into the [elyra/canvas NPM module](https://www.npmjs.com/package/@elyra/canvas) and deployed on the NPM registry. It provides a way for an application to display a flow of data operations (shown as a set of nodes connected with links) defined in a pipeline flow JSON document, to the user and to allows the user to interact with the display to modify the flow. Common canvas is a react component which can be imported, and is assisted by a regular JavaScript class called `CanvasController` which provides an API and handles the internal data model of the flow. Common canvas is highly customizable where node shape and appearance, colors, styles layout etc can all be customized by your application code.
+
+* [Common Properties](03-props/index.md) - This contains properties functionality which is packaged into the [elyra/canvas NPM module](https://www.npmjs.com/package/@elyra/canvas) and deployed on the NPM registry. It provides a way to translate a JSON document, which describes a set of properties with UI hints, into working properties dialog panel. Common properties is a react component and has an associated properties controller object.
+
+* [Test Harness](https://github.com/elyra-ai/canvas/tree/master/canvas_modules/harness#test-harness) - This provides a node.js app which displays a UI which allows you to try out various features of the common canvas and common properties components. Bear in mind this is not supposed to be a fully functional app but is, as the name suggests, a framework for testing. To get select one of the sample applications or select `None` as the sample app and then select a test canvas file from the `Canvas Diagram` drop down list and a test palette from the `Canvas palette` drop down list.
+
diff --git a/docs/js/links-in-new-tabs.js b/docs/pages/js/links-in-new-tabs.js
similarity index 100%
rename from docs/js/links-in-new-tabs.js
rename to docs/pages/js/links-in-new-tabs.js
diff --git a/requirements.txt b/docs/requirements.txt
similarity index 100%
rename from requirements.txt
rename to docs/requirements.txt
diff --git a/mkdocs.yml b/mkdocs.yml
deleted file mode 100644
index 9c6c7ff0bf..0000000000
--- a/mkdocs.yml
+++ /dev/null
@@ -1,93 +0,0 @@
-#
-# Copyright 2017-2023 Elyra Authors
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-# http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-#
-site_name: Elyra Canvas Documentation
-repo_url: https://github.com/elyra-ai/canvas
-docs_dir: docs
-
-theme: 
-    name: material
-    highlightjs: true
-    palette:
-        scheme: default
-    features:
-      - content.code.copy
-      - content.action.edit
-
-plugins:
-    - search
-
-extra_css:
-  - css/styles.css
-
-extra_javascript:
-  - js/links-in-new-tabs.js
-
-edit_uri: edit/main/docs/
-
-# Documentation and theme
-copyright: 'Copyright  &copy; 2024 Elyra Authors, an open source project and all are welcome to contribute! Maintained by the Elyra Authors Team'
-
-nav:
-  - Home: index.md
-  - Common Canvas Documentation: 2.0-Common-Canvas-Documentation.md
-  - Canvas Editor: 2.0.1-Canvas-Editor.md
-  - Nodes: 2.0.1.1-Nodes.md
-  - Links: 2.0.1.2-Links.md
-  - Palette: 2.0.2-Palette.md
-  - Context Menu: 2.0.3-Context-Menu.md
-  - Context Toolbar: 2.0.4-Context-Toolbar.md
-  - Config Objects: 2.1-Config-Objects.md
-  - Common Canvas Callbacks: 2.2-Common-Canvas-callbacks.md
-  - Enabling Node Creation from External Object: 2.3-Enabling-node-creation-from-external-object.md
-  - Canvas Controller API: 2.4-Canvas-Controller-API.md
-  - Calling the Canvas Controller API: 2.4.0-Calling-the-Canvas-Controller-API.md
-  - Style Specification: 2.4.1-Style-Specification.md
-  - Decoration Specification: 2.4.2-Decoration-Specification.md
-  - Object Structure used by API: 2.4.3-Object-structure-used-by-API.md
-  - Notification Message Specification: 2.4.4-Notification-Message-Specification.md
-  - Programmatically Creating new Canvas Nodes: 2.4.5-Programmatically-creating-new-canvas-nodes.md
-  - Constructing a Read Only or Locked Canvas: 2.4.6-Constructing-a-read-only-or-locked-canvas.md
-  - Commmand Stack API: 2.5-Command-Stack-API.md
-  - Flow Validation API: 2.6-Flow-Validation-API.md
-  - Customizing Node Layout Properties: 2.7-Customizing-Node-Layout-Properties.md
-  - Context Menu Wrapper Documentation: 2.8-Context-Menu-Wrapper-Documentation.md
-  - External Subflows Support: 2.9-External-Subflows-support.md
-  - Common Properties Documentation: 3.0-Common-Properties-documentation.md
-  - Common Properties Parameter Definition: 3.1-Common-Properties-Parameter-Definition.md
-  - Common Properties UI Hints: 3.2-Common-Properties-UI-Hints.md
-  - Common Properties Controls: 3.3-Common-Properties-Controls.md
-  - Common Properties Conditions: 3.4-Common-Properties-Conditions.md
-  - Common Properties Custom Components: 3.5-Common-Properties-Custom-Components.md
-  - Common Properties Controller: 3.6-Common-Properties-Controller.md
-  - Styling: 4.0-Styling.md
-  - Testing Guidelines for Development: 5.0-Testing-Guidelines-for-Development.md
-
-markdown_extensions:
-  - admonition:
-  - codehilite:
-  - extra:
-  - pymdownx.magiclink:
-  - pymdownx.inlinehilite:
-  - pymdownx.highlight:
-  - pymdownx.superfences:
-      custom_fences:
-        - name: mermaid
-          class: mermaid
-          format: !!python/name:pymdownx.superfences.fence_code_format
-  - sane_lists:
-  - smarty:
-  - toc:
-      permalink: True