diff --git a/index.html b/index.html
index 4e2fed2..5616dba 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index d7d3590..1835ea9 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
     "flatted": "^3.2.7",
     "htmlparser2": "^8.0.1",
     "jshashes": "^1.0.8",
-    "jszip": "^3.10.1",
     "meriyah": "^4.3.3",
     "moment": "^2.29.4",
     "monaco-editor": "^0.34.1",
diff --git a/packages/Auth0AuthenticationProvider/main.ts b/packages/Auth0AuthenticationProvider/main.ts
index 4b1efc1..a8588ab 100644
--- a/packages/Auth0AuthenticationProvider/main.ts
+++ b/packages/Auth0AuthenticationProvider/main.ts
@@ -48,6 +48,8 @@ export default class Auth0 extends EditorModule {
       title: 'Logout',
       component: 'v-icon',
       props: {
+        style: "cursor: pointer",
+        "help-topic": "logout",
         alt: 'Logout of your current session',
         title: 'Logout of your current session',
         icon: 'mdi-logout',
diff --git a/packages/CompileTemplate/importVue.ts b/packages/CompileTemplate/importVue.ts
index 2e6aa0a..2494992 100644
--- a/packages/CompileTemplate/importVue.ts
+++ b/packages/CompileTemplate/importVue.ts
@@ -46,7 +46,6 @@ const _resolveDynamicComponent = self.dependencies.vue.resolveDynamicComponent;
     let styles = blocks.descriptor.styles.map((style: any) => {
         const s = compiler.compileStyle({id, source: style.content} as any);
         errors.push(...s.errors);
-        console.log('s', s);
         return s.code;
     });
 
diff --git a/packages/Graph/GraphCanvas.vue b/packages/Graph/GraphCanvas.vue
index ba96e0a..05fe877 100644
--- a/packages/Graph/GraphCanvas.vue
+++ b/packages/Graph/GraphCanvas.vue
@@ -1,9 +1,21 @@
 <template>
     <div>
+        <component
+            :is="graphPresentationComponent"
+            v-if="graphSnapshot && presentation"
+            :graph="graphSnapshot"
+        />
+        <component
+            v-for="(style, index) in styles"
+            :is="'style'"
+            v-if="graphSnapshot && presentation"
+            v-html="style"
+            :key="index"
+        />
         <div
             x-graph-canvas
             :style="graphCanvasStyle"
-            v-if="graphSnapshot"
+            v-if="graphSnapshot && !presentation"
             :key="graphUpdateVersion"
             @drop="drop($event)"
             @dragover="dragOver($event)"
@@ -20,7 +32,7 @@
                 :node="c.node"
             />
             <node
-                v-for="node in graphSnapshot.nodes"
+                v-for="node in sortedNodes"
                 :key="node.id + graphUpdateVersion"
                 :node="node"
                 :graph="graphSnapshot"
@@ -29,18 +41,44 @@
             <div v-if="selectionRect.visible && !presentation" class="selection-rect" :style="selectionRectStyle"></div>
             <div v-if="selectedNodes.length !== 0 && !presentation" class="bounding-rect" :style="boundingRectStyle"></div>
         </div>
+        <keep-alive>
+            <div style="position: fixed; top: 33px;left: 10px;" v-if="showGraphCodeEditor" v-show="!presentation">
+                <monaco-code-editor
+                    style="opacity: 0.98"
+                    templateType="vue"
+                    language="html"
+                    :graphId="graphSnapshot.id"
+                    :errors="errors.filter(e => e.type === 'graph')"
+                    :value="graphTemplateValue"
+                    helpLink="https://plastic-io.github.io/plastic-io/interfaces/NodeInterface.html"
+                    @close="showGraphCodeEditor = false"
+                    @dirty="setIsDirty = $event"
+                    @save="saveGraphTemplate($event)"
+                />
+            </div>
+        </keep-alive>
+        <div class="graph-errors" v-if="errors.length > 0">
+            <v-alert color="error" @click="showGraphCodeEditor = true">
+                <pre v-for="error in errors">{{error}}</pre>
+            </v-alert>
+        </div>
     </div>
 </template>
 <script lang="ts">
+import {markRaw} from "vue";
 import {mapWritableState, mapActions} from "pinia";
-import {useStore as useOrchestratorStore} from "@plastic-io/graph-editor-vue3-orchestrator";
 import {useStore as useGraphStore} from "./store";
+import compileTemplate from "@plastic-io/graph-editor-vue3-compile-template";
 import {useStore as usePreferencesStore} from "@plastic-io/graph-editor-vue3-preferences-provider";
+import {useStore as useOrchestratorStore} from "@plastic-io/graph-editor-vue3-orchestrator";
 import colors from "vuetify/lib/util/colors";
 export default {
   name: 'graph-canvas',
   data: () => {
     return {
+      compiledTemplate: null,
+      errors: [],
+      styles: [],
       innerHeight: 0,
       innerWidth: 0,
       positionLocationSaveTimeout: 750,
@@ -49,6 +87,9 @@ export default {
     }
   },
   watch: {
+    'graphSnapshot.properties.template'() {
+        this.loadTemplate();
+    },
     graphSnapshot: {
         handler() {
             // force updates in rewind mode
@@ -75,7 +116,22 @@ export default {
   methods: {
     ...mapActions(useGraphStore, [
         'drop',
+        'updateGraphFromSnapshot',
     ]),
+    async loadTemplate() {
+        const comp = await compileTemplate(this, this.graphSnapshot.id,
+            this.graphSnapshot.properties.template);
+        this.compiledTemplate = markRaw(comp);
+        this.errors = comp.errors;
+        this.styles = this.compiledTemplate.styles;
+        this.errors.forEach((err) => {
+            useOrchestratorStore().raiseError(this.graphSnapshot.id, err, 'vue');
+        });
+    },
+    async saveGraphTemplate(val) {
+        this.graphSnapshot.properties.template = val;
+        await this.updateGraphFromSnapshot('Update Graph Presentation Template');
+    },
     dragOver(e) {
         e.preventDefault();
         e.dataTransfer.dropEffect = "link";
@@ -91,7 +147,7 @@ export default {
       });
     },
   },
-  mounted() {
+  async mounted() {
     const resize = () => {
         this.innerWidth = window.innerWidth;
         this.innerHeight = window.innerHeight;
@@ -103,6 +159,10 @@ export default {
     this.view = view;
     document.addEventListener('resize', resize);
     resize();
+    if (!this.graphSnapshot.properties.template) {
+        this.graphSnapshot.properties.template = this.preferences!.defaultNewGraphTemplate;
+    }
+    await this.loadTemplate();
   },
   computed: {
     ...mapWritableState(usePreferencesStore, ['preferences']),
@@ -118,7 +178,20 @@ export default {
         'boundingRect',
         'presentation',
         'inRewindMode',
+        'showGraphCodeEditor',
     ]),
+    graphPresentationComponent() {
+        return this.compiledTemplate ? this.compiledTemplate.component : 'div';
+    },
+    sortedNodes() {
+        return this.graphSnapshot.nodes.sort((a, b) => {
+            return (a.properties.presentation.sort || 0)
+                - (b.properties.presentation.sort || 0);
+        });
+    },
+    graphTemplateValue() {
+        return this.graphSnapshot.properties.template;
+    },
     connectors: function () {
         let connectors = [];
         this.graphSnapshot.nodes.forEach((node) => {
@@ -228,4 +301,11 @@ export default {
         100px 100px,
         100px 100px;
 }
+.graph-errors {
+    position: fixed;
+    right: 10px;
+    top: 33px;
+    width: 33%;
+    min-width: 500px;
+}
 </style>
\ No newline at end of file
diff --git a/packages/Graph/clipboard.ts b/packages/Graph/clipboard.ts
index 297fac9..df05649 100644
--- a/packages/Graph/clipboard.ts
+++ b/packages/Graph/clipboard.ts
@@ -1,5 +1,4 @@
 import type {Graph, Node} from "@plastic-io/plastic-io";
-import JSZip from 'jszip';
 import {newId} from "@plastic-io/graph-editor-vue3-utils";
 export default {
     async unzip(file: any, fileName: string): Promise<any> {
diff --git a/packages/Graph/mutation.ts b/packages/Graph/mutation.ts
index b3cad2d..3fe59c6 100644
--- a/packages/Graph/mutation.ts
+++ b/packages/Graph/mutation.ts
@@ -396,6 +396,7 @@ export default {
           width: 300,
           timeout: 30000,
           logLevel: 2,
+          template: this.preferencesStore.preferences!.defaultNewGraphTemplate,
         } as any
       };
     },
@@ -691,6 +692,7 @@ export default {
                   x: pos.x,
                   y: pos.y,
                   z: 0 + this.preferencesStore.preferences!.newNodeOffset.z,
+                  order: this.graphSnapshot.nodes.length,
               },
           },
           template: {
diff --git a/packages/Graph/state.ts b/packages/Graph/state.ts
index 07ea26a..9e4c880 100644
--- a/packages/Graph/state.ts
+++ b/packages/Graph/state.ts
@@ -34,6 +34,7 @@ export default () => {
         graphSnapshotStore: useGraphSnapshotStore(),
         graphSnapshot: null as any,
         updatingSnapshotLocally: false,
+        showGraphCodeEditor: false,
         isNewGraph: false,
         rewindVersion: 0,
         keys: {} as Record<string, string>,
diff --git a/packages/GraphPropertiesPanel/GraphCodeMenu.vue b/packages/GraphPropertiesPanel/GraphCodeMenu.vue
new file mode 100644
index 0000000..65e108d
--- /dev/null
+++ b/packages/GraphPropertiesPanel/GraphCodeMenu.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-icon
+    title="Edit Graph Presentation Code"
+    @click="showGraphCodeEditor = !showGraphCodeEditor"
+    help-topic="toggleShowGraphCode"
+    :color="showGraphCodeEditor ? 'info' : ''"
+    class="mx-2"
+    style="cursor: pointer;"
+    >mdi-vuejs</v-icon>
+</template>
+<script lang="ts">
+  import {mapWritableState, mapActions, mapState} from "pinia";
+  import {useStore as useGraphStore} from "@plastic-io/graph-editor-vue3-graph";
+
+  export default {
+    name: 'graph-properties-menu',
+    computed: {
+      ...mapWritableState(useGraphStore, [
+          'showGraphCodeEditor',
+      ]),
+    }
+  }
+</script>
diff --git a/packages/GraphPropertiesPanel/GraphPropertiesMenu.vue b/packages/GraphPropertiesPanel/GraphPropertiesMenu.vue
index 3a68509..2aba225 100644
--- a/packages/GraphPropertiesPanel/GraphPropertiesMenu.vue
+++ b/packages/GraphPropertiesPanel/GraphPropertiesMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <v-menu>
     <template v-slot:activator="{props}">
-      <v-icon icon="mdi-graph" v-bind="props" class="ma-2"/>
+      <v-icon help-topic="graphProperties" icon="mdi-vector-polyline-edit" v-bind="props" class="ma-2"/>
     </template>
     <graph-properties @click.stop @mousemove.stop/>
   </v-menu>
diff --git a/packages/GraphPropertiesPanel/main.ts b/packages/GraphPropertiesPanel/main.ts
index 51c18a0..ecd28c3 100644
--- a/packages/GraphPropertiesPanel/main.ts
+++ b/packages/GraphPropertiesPanel/main.ts
@@ -2,6 +2,7 @@ import type {App} from "vue";
 import type {Router} from "vue-router";
 import _GraphProperties from "./GraphProperties.vue";
 import GraphPropertiesMenu from "./GraphPropertiesMenu.vue";
+import GraphCodeMenu from "./GraphCodeMenu.vue";
 import EditorModule, {Plugin} from "@plastic-io/graph-editor-vue3-editor-module";
 import {useStore as useOrchestratorStore} from "@plastic-io/graph-editor-vue3-orchestrator";
 export default class GraphProperties extends EditorModule {
@@ -9,19 +10,28 @@ export default class GraphProperties extends EditorModule {
     super();
     app.component('graph-properties', _GraphProperties);
     app.component('graph-properties-menu', GraphPropertiesMenu);
+    app.component('graph-code-menu', GraphCodeMenu);
     const graphOrchestratorStore =  useOrchestratorStore();
     
-    const plugin = new Plugin({
+    graphOrchestratorStore.addPlugin({
       name: 'GraphPropertiesMenu',
       title: 'Graph Properties',
       component: 'graph-properties-menu',
       divider: true,
       helpTopic: 'graphProperties',
       type: 'system-bar-bottom',
-      order: 3,
+      order: -1,
     });
 
-    graphOrchestratorStore.addPlugin(plugin);
+    graphOrchestratorStore.addPlugin({
+      name: 'GraphCodeMenu',
+      title: 'Graph Code',
+      component: 'graph-code-menu',
+      divider: true,
+      helpTopic: 'graphCode',
+      type: 'system-bar-bottom',
+      order: 0,
+    });
 
   }
 };
diff --git a/packages/HelpOverlay/HelpOverlay.vue b/packages/HelpOverlay/HelpOverlay.vue
index 1653284..3bd8f93 100644
--- a/packages/HelpOverlay/HelpOverlay.vue
+++ b/packages/HelpOverlay/HelpOverlay.vue
@@ -1,8 +1,255 @@
-<script lang="ts">
-export default {}
-</script>
 <template>
-  <div>
-  </div>
+    <v-overlay v-model="help">
+      <div
+          v-for="(topic, index) in topics"
+          :key="index + '_canvas'"
+          :style="topicStyle(topic)" @mouseover="setTopic(topic)">
+          <v-icon size="x-small" color="white" style="transform: translate(-20px, -20px);">
+              mdi-help-circle
+          </v-icon>
+      </div>
+      <canvas ref="canvas" class="help-topic-canvas"></canvas>
+      <v-alert
+          :style="helpCardStyle"
+          class="help-card"
+          ref="card"
+          icon="mdi-help-circle-outline"
+          v-model="open"
+          dismissible
+          @wheel.stop>
+          <h3 class="headline" v-html="topicTitle"></h3>
+          <div v-html="topicText"></div>
+      </v-alert>
+      <v-card class="help-keyboard">
+          <v-card-text>
+              <v-expansion-panels>
+                  <v-expansion-panel>
+                      <v-expansion-panel-title style="white-space: nowrap;">
+                        <v-icon icon="mdi-keyboard" class="mr-2"/> Keyboard Help
+                      </v-expansion-panel-title>
+                      <v-expansion-panel-text>
+                          <table style="width: 380px;">
+                              <tr>
+                                  <th style="width: 150px;">Key</th>
+                                  <th>Action</th>
+                              </tr>
+                          </table>
+                          <div style="max-height: 65vh;overflow: auto;">
+                              <table style="width: 380px;">
+                                  <tr><td><v-icon x-small>mdi-apple-keyboard-control</v-icon> + =</td><td>Zoom in</td></tr>
+                                  <tr><td><v-icon x-small>mdi-apple-keyboard-control</v-icon> + -</td><td>Zoom out</td></tr>
+                                  <tr><td>Delete</td><td>Delete selection</td></tr>
+                                  <tr><td>Arrow Keys</td><td>Nudge selected vectors</td></tr>
+                                  <tr><td>\</td><td>Toggle presentation visibility</td></tr>
+                                  <tr><td><v-icon x-small>mdi-apple-keyboard-control</v-icon> + ]</td><td>Bring forward</td></tr>
+                                  <tr><td><v-icon x-small>mdi-apple-keyboard-control</v-icon> + <v-icon x-small>mdi-apple-keyboard-shift</v-icon> + ]</td><td>Bring to front</td></tr>
+                                  <tr><td><v-icon x-small>mdi-apple-keyboard-control</v-icon> + [</td><td>Send back</td></tr>
+                                  <tr><td><v-icon x-small>mdi-apple-keyboard-control</v-icon> + <v-icon x-small>mdi-apple-keyboard-shift</v-icon> + [</td><td>Send to back</td></tr>
+                                  <tr><td><v-icon x-small>mdi-apple-keyboard-control</v-icon> + Z</td><td>Undo</td></tr>
+                                  <tr><td><v-icon x-small>mdi-apple-keyboard-control</v-icon> + <v-icon x-small>mdi-apple-keyboard-shift</v-icon> + Z</td><td>Redo</td></tr>
+                                  <tr><td><v-icon x-small>mdi-apple-keyboard-control</v-icon> + <v-icon x-small>mdi-apple-keyboard-shift</v-icon> + D</td><td>Duplicate selected</td></tr>
+                                  <tr><td>ALT + `</td><td>Toggle presentation mode</td></tr>
+                                  <tr><td>Space + Left Mouse Button</td><td>Hold to move graph view</td></tr>
+                                  <tr><td>Middle Mouse Button</td><td>Hold to move graph view</td></tr>
+                              </table>
+                          </div>
+                      </v-expansion-panel-text>
+                  </v-expansion-panel>
+              </v-expansion-panels>
+          </v-card-text>
+      </v-card>
+    </v-overlay>
 </template>
-<style scoped></style>
\ No newline at end of file
+<script>
+import {mapWritableState, mapActions, mapState} from "pinia";
+import {useStore as useOrchestratorStore} from "@plastic-io/graph-editor-vue3-orchestrator";
+import {useStore as usePreferencesStore} from "@plastic-io/graph-editor-vue3-preferences-provider";
+import colors from "vuetify/lib/util/colors";
+import helpTopics from "./helpTopics";
+
+export default {
+    name: "help-overlay",
+    props: {},
+    mounted() {
+        window.removeEventListener("resize", this.resize);
+        this.drawHelp();
+        window.addEventListener("resize", this.resize);
+        const missing = [];
+        this.topics.forEach((topic) => {
+            if (!helpTopics[topic]) {
+                missing.push(topic);
+            }
+        });
+        if (missing.length > 0) {
+            console.warn("missing topics", missing);
+        }
+    },
+    data() {
+        return {
+            showHelp: true,
+            localVersion: 1,
+            ratio: 1,
+            ctx: null,
+            topic: null,
+            open: true,
+            lineRects: {},
+        };
+    },
+    computed: {
+        help: {
+          get() {
+            return useOrchestratorStore().showHelp;
+          },
+          set(val) {
+            useOrchestratorStore().showHelp = val;
+          }
+        },
+        helpCardStyle() {
+          const source = this.topicEl(this.topic || 'openGraph').getBoundingClientRect();
+          const coord = this.moveToCenter(source.x, source.y);
+          return {
+            position: 'absolute',
+            left: coord.x + 'px',
+            top: coord.y + 'px',
+          };
+        },
+        preferences(){
+            // return usePreferencesStore().preferences;
+        },
+        topicTitle() {
+            if (!helpTopics[this.topic]) {
+                return "Sorry!"; 
+            }
+            return helpTopics[this.topic].title || this.topic;
+        },
+        topicText() {
+            if (!helpTopics[this.topic]) {
+                return "No help topic currently exists for this item.";
+            }
+            return helpTopics[this.topic].html;
+        },
+        topics() {
+            this.localVersion;
+            return [...document.querySelectorAll("*[help-topic]")].map(e => e.getAttribute("help-topic"));
+        },
+        topicEl() {
+            return (topic) => {
+                this.localVersion;
+                return document.querySelector(`*[help-topic='${topic}']`);
+            };
+        },
+        topicRect() {
+            return (topic) => {
+                this.localVersion;
+                return this.topicEl(topic).getBoundingClientRect();
+            };
+        },
+        topicStyle() {
+            return (topic) => {
+                const rect = this.topicRect(topic);
+                return {
+                    cursor: "help",
+                    padding: "10px",
+                    position: "fixed",
+                    top: rect.y + "px",
+                    left: rect.x + "px",
+                };
+            };
+        },
+    },
+    watch: {
+        open() {
+            this.$emit("close");
+        },
+        topic() {
+            if (this.topic === "vueTemplate") {
+                this.topic = "template";
+            }
+            if (this.topic === "setTemplate") {
+                this.topic = "set";
+            }
+        },
+        view: {
+            handler() {
+                this.localVersion += 1;
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        moveToCenter(x, y) {
+            const maxWidth = 700, maxHeight = window.innerHeight * 0.8;
+            const [centerX, centerY] = [window.innerWidth / 2, window.innerHeight / 2];
+            let newX = Math.max(0, Math.min(window.innerWidth - maxWidth, x
+              < centerX ? x + (centerX - x) / 2 : x - (x - centerX) / 2));
+            let newY = Math.max(0, Math.min(window.innerHeight - maxHeight, y
+              < centerY ? y + (centerY - y) / 2 : y - (y - centerY) / 2));
+            return { x: newX, y: newY };
+        },
+        resize() {
+            this.drawHelp();
+            this.localVersion += 1;
+        },
+        setTopic(e) {
+            this.topic = e;
+            this.drawHelp();
+        },
+        drawHelp() {
+            setTimeout(() => {
+                this.topics.forEach((topic) => {
+                    if (topic === this.topic && this.$refs.canvas && this.$refs.card && this.topicEl(topic)) {
+                        this.localGraph = this.graph;
+                        this.ctx = this.$refs.canvas.getContext("2d");
+                        this.$refs.canvas.height = window.innerHeight;
+                        this.$refs.canvas.width = window.innerWidth;
+                        this.ctx.scale(this.ratio, this.ratio);
+                        const source = this.topicEl(topic).getBoundingClientRect();
+                        const target = this.$refs.card.$el.getBoundingClientRect();
+                        this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+                        this.ctx.strokeStyle = colors["pink"].base;
+                        this.ctx.lineWidth = 3;
+                        this.ctx.beginPath();
+                        this.ctx.moveTo(source.x + 5, source.y + 5);
+                        this.ctx.lineTo(target.x + (target.width / 2), target.y + 5);
+                        this.ctx.stroke();
+                        this.ctx.closePath();
+                    }
+                });
+            }, 10);
+        }
+    },
+};
+</script>
+<style>
+.help-keyboard {
+  position: absolute;
+  top: 37px;
+  left: 10px;
+}
+.help-card {
+  min-width: 500px;
+  max-width: 700px;
+  max-height: 80vh;
+  overflow: auto;
+}
+.help-overlay-table td {
+    padding: 3px;
+}
+.help-overlay-table {
+    border-collapse: collapse;
+}
+.help-overlay-table tr:nth-child(even) {
+    background: rgba(255, 255, 255, 0.1);
+}
+.help-overlay-table tr:nth-child(odd) {
+    background: rgba(255, 255, 255, 0.05);
+}
+.help-topic-canvas {
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+}
+</style>
\ No newline at end of file
diff --git a/packages/HelpOverlay/helpTopics.ts b/packages/HelpOverlay/helpTopics.ts
index 3e782d8..fd48091 100644
--- a/packages/HelpOverlay/helpTopics.ts
+++ b/packages/HelpOverlay/helpTopics.ts
@@ -1,4 +1,24 @@
 export default {
+    logout: {
+        title: "Logout",
+        html: "Logout of your current session."
+    },
+    panic: {
+        title: "PANIC!",
+        html: "Stop the scheduler from executing the next node.  Use this to stop out of control cyclic graphs."
+    },
+    toggleMap: {
+        title: "Show Mini-map",
+        html: "Shows or hides the mini-map."
+    },
+    showConnectorActivity: {
+        title: "Show Connector Activity",
+        html: "Attach to the graph events and see them as they execute.  View the information passing between nodes.  This incurs a small performance hit while active."
+    },
+    toggleShowGraphCode: {
+        title: "Show Graph Presentation Code",
+        html: "Show the code that drives the graph presentation.  By default this code will show nodes that are marked 'appears in presentation' in their properties.  But you can modify this code to contain anything you like while still having the graph run in the background."
+    },
     settingsNewNodeHelp: {
         title: "New Node Help",
         html: "When this is switched on, creating a new node will use the help template which contains helpful information about nodes for new users.  When off, new nodes are bare bones."
@@ -575,13 +595,17 @@ this.callback(null, {
         title: "Clear Log",
         html: "Clear the log"
     },
+    rewind: {
+        title: "Rewind",
+        html: "This is a record of every change to the graph since the graph started.  You can revert back to any time or just view the state at a previous time."
+    },
     historyPanel: {
         title: "History Panel",
-        html: "Session history"
+        html: "History of what you've done during this session.  You can move forwards or backwards in history here.  This only contains your changes, not the changes of others.  To move further back in time use the rewind panel."
     },
     importPanel: {
         title: "Node Library",
-        html: "Collection of local and public nodes"
+        html: "Collection of local and public nodes and graphs that you can import and use on your graph."
     },
     importLocal: {
         title: "Local Nodes",
diff --git a/packages/HistoryPanel/HistoryPanelMenu.vue b/packages/HistoryPanel/HistoryPanelMenu.vue
index 9d86848..576f6c6 100644
--- a/packages/HistoryPanel/HistoryPanelMenu.vue
+++ b/packages/HistoryPanel/HistoryPanelMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <v-menu>
     <template v-slot:activator="{props}">
-      <v-icon icon="mdi-history" v-bind="props" class="ma-2"/>
+      <v-icon help-topic="historyPanel" icon="mdi-history" v-bind="props" class="ma-2"/>
     </template>
     <v-card>
         <v-card-title>
diff --git a/packages/ImportPanel/ImportPanelMenu.vue b/packages/ImportPanel/ImportPanelMenu.vue
index c1f7cbf..f891baf 100644
--- a/packages/ImportPanel/ImportPanelMenu.vue
+++ b/packages/ImportPanel/ImportPanelMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <v-menu>
     <template v-slot:activator="{props}">
-      <v-icon icon="mdi-bookshelf" v-bind="props" class="ma-2"/>
+      <v-icon help-topic="importPanel" icon="mdi-bookshelf" v-bind="props" class="ma-2"/>
     </template>
     <import-panel @mousedown.stop @click.stop @mousemove.stop/>
   </v-menu>
diff --git a/packages/Node/NodeEditor.vue b/packages/Node/NodeEditor.vue
index a12c392..16af334 100644
--- a/packages/Node/NodeEditor.vue
+++ b/packages/Node/NodeEditor.vue
@@ -69,7 +69,7 @@
           <v-menu style="opacity: 0.98">
             <template v-slot:activator="{props}">
               <v-badge color="transparent">
-                <v-icon icon="mdi-cog" v-bind="props"/>
+                <v-icon icon="mdi-vector-polyline-edit" v-bind="props"/>
               </v-badge>
             </template>
             <node-properties-panel :nodeId="nodeId"/>
@@ -83,7 +83,6 @@
   import {mapWritableState, mapActions, mapState} from "pinia";
   import {useStore as useOrchestratorStore} from "@plastic-io/graph-editor-vue3-orchestrator";
   import {useStore as useGraphStore} from "@plastic-io/graph-editor-vue3-graph";
-  import * as JSZip from "jszip";
   import { saveAs } from "file-saver";
   import NodeError from "./NodeError.vue";
   export default {
diff --git a/packages/NodePropertiesPanel/NodePropertiesPanel.vue b/packages/NodePropertiesPanel/NodePropertiesPanel.vue
index c7376a9..a21a2d8 100644
--- a/packages/NodePropertiesPanel/NodePropertiesPanel.vue
+++ b/packages/NodePropertiesPanel/NodePropertiesPanel.vue
@@ -84,6 +84,7 @@
                         <v-text-field label="x" v-model.number="node.properties.presentation.x"></v-text-field>
                         <v-text-field label="y" v-model.number="node.properties.presentation.y"></v-text-field>
                         <v-text-field label="z" v-model.number="node.properties.presentation.z"></v-text-field>
+                        <v-text-field label="Order" v-model.number="node.properties.presentation.order"></v-text-field>
                     </v-card-text>
                 </v-card>
             </v-expansion-panel-text>
diff --git a/packages/PreferencesProvider/main.ts b/packages/PreferencesProvider/main.ts
index 7d5bdb2..acec753 100644
--- a/packages/PreferencesProvider/main.ts
+++ b/packages/PreferencesProvider/main.ts
@@ -10,7 +10,7 @@ const defaultNewSetTemplate = `if (edges.hasOwnProperty(field)) {
 const defaultNewVueTemplate = `<template>
     <div>
         <v-btn @click="$emit('output-name', 'value-to-send');">
-            New Node
+            {{node.properties.name}}
         </v-btn>
     </div>
 </template>
@@ -22,27 +22,25 @@ export default {
     }
 }
 </script>
-<style>
-</style>
 `;
 const defaultNewGraphTemplate = `<template>
-    <div>
-        <graph-node
-            v-for="node in graph.nodes"
-            :key="node.id"
-            :node="node"
-            :graph="graph"
-        ></graph-node>
-    </div>
+    <node
+        v-for="node in graph.nodes"
+        :key="node.id + node.version"
+        :node="node"
+        :graph="graph"
+        :presentation="true"
+    />
 </template>
 <script>
-    export default {
-        props: {
-            graph: Object,
-        },
+export default {
+    name: 'presentation-graph',
+    props: {
+        graph: Object,
+        state: Object,
     }
-</script>
-`;
+}
+</script>`;
 export const useStore = defineStore('UserPreferences', {
   state: () => ({
     remotePreferences: null as any,
diff --git a/packages/Rewind/GraphRewindIcon.vue b/packages/Rewind/GraphRewindIcon.vue
index 49f49b3..a0e0444 100644
--- a/packages/Rewind/GraphRewindIcon.vue
+++ b/packages/Rewind/GraphRewindIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-icon icon="mdi-vhs" @click="inRewindMode = !inRewindMode" class="ma-2" :color="inRewindMode ? 'info' : ''" title="Graph Rewind"/>
+  <v-icon help-topic="rewind" icon="mdi-vhs" @click="inRewindMode = !inRewindMode" class="ma-2" :color="inRewindMode ? 'info' : ''" title="Graph Rewind"/>
   <graph-rewind v-if="inRewindMode"/>
 </template>
 <script lang="ts">
diff --git a/packages/SettingsPanel/SettingsPanelMenu.vue b/packages/SettingsPanel/SettingsPanelMenu.vue
index 8f68384..a6fefcf 100644
--- a/packages/SettingsPanel/SettingsPanelMenu.vue
+++ b/packages/SettingsPanel/SettingsPanelMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <v-menu>
     <template v-slot:activator="{props}">
-      <v-icon icon="mdi-cog" v-bind="props" class="ma-2"/>
+      <v-icon help-topic="settings" icon="mdi-cog" v-bind="props" class="ma-2"/>
     </template>
     <settings-panel @click.stop @mousemove.stop/>
   </v-menu>
diff --git a/packages/ShortcutIcons/BottomShortcutIcons.vue b/packages/ShortcutIcons/BottomShortcutIcons.vue
index 2972b41..f68181a 100644
--- a/packages/ShortcutIcons/BottomShortcutIcons.vue
+++ b/packages/ShortcutIcons/BottomShortcutIcons.vue
@@ -7,10 +7,10 @@
         <v-icon>mdi-crosshairs-gps</v-icon>{{ Math.floor((mouse.x - view.x) / view.k) }} : {{ Math.floor((mouse.y - view.y) / view.k) }}
     </div>
     <div
-    help-topic="selectionCoordinates"
+    
     title="Selection Coordinates"
     style="width: 240px;cursor: crosshair;">
-        <v-icon>mdi-selection</v-icon>
+        <v-icon help-topic="selectionCoordinates">mdi-selection</v-icon>
             x: {{Math.floor(selectionRect.x)}}
             y: {{Math.floor(selectionRect.x)}}
             h: {{Math.floor(selectionRect.height)}}
diff --git a/packages/ShortcutIcons/TopShortcutIcons.vue b/packages/ShortcutIcons/TopShortcutIcons.vue
index d0de0d6..7373892 100644
--- a/packages/ShortcutIcons/TopShortcutIcons.vue
+++ b/packages/ShortcutIcons/TopShortcutIcons.vue
@@ -9,9 +9,9 @@
             Rewinding...
         </span>
     </div>
-    <span help-topic="documentName" class="pa-1 version-view">
+    <span class="pa-1 version-view">
         {{ graph.properties.name || graph.url || "Untitled" }}
-        <span>v{{ graph.version }}</span>
+        <span help-topic="documentName">v{{ graph.version }}</span>
     </span>
     <v-spacer/>
     <shared-users/>
@@ -89,6 +89,7 @@ export default {
         ...mapWritableState(usePreferencesStore, ['preferences']),
         ...mapWritableState(useOrchestratorStore, [
             'translating',
+            'showHelp',
         ]),
         ...mapWritableState(useGraphStore, [
             'graph',
@@ -109,7 +110,6 @@ export default {
             'pendingEvents',
             'activityConnectors',
             'pathPrefix',
-            'showHelp',
             'panelVisibility',
             'nodeMimeType',
             'showError',
diff --git a/packages/workspace/components/Workspace.vue b/packages/workspace/components/Workspace.vue
index 1cc035e..4bc35e7 100644
--- a/packages/workspace/components/Workspace.vue
+++ b/packages/workspace/components/Workspace.vue
@@ -1,6 +1,7 @@
 <template>
-    <v-app class="graph-editor" :style="workspaceBackground">
-        <error-interstitial/>
+    <v-app :class="{'graph-editor': !presentation}" :style="workspaceBackground">
+        <error-interstitial v-if="!presentation"/>
+        
         <template v-if="graph && !graph.err && preferences">
             <v-system-bar
                 class="top-system-bar no-graph-target"
@@ -19,7 +20,7 @@
             <mini-map-info v-if="preferences.showMap && !presentation"/>
             <div :class="presentation ? 'presentation-graph-container' : 'graph-container'" :style="graphContainerStyle">
                 <graph-canvas
-                    :class="noSelect ? 'no-select' : ''"
+                    :class="noSelect && !presentation ? 'no-select' : ''"
                     :showGrid="preferences.appearance.showGrid && !presentation"
                 ></graph-canvas>
             </div>
@@ -35,8 +36,9 @@
                     <component :is="plugin.component" v-bind="plugin.props"/>
                 </template>
             </v-system-bar>
-            <connector-info v-if="showConnectorView" @close="showConnectorView = false;"/>
+            <connector-info v-if="!presentation && showConnectorView" @close="showConnectorView = false;"/>
         </template>
+        <help-overlay/>
     </v-app>
 </template>
 <script lang="ts">
@@ -78,11 +80,17 @@ export default {
             'hoveredConnector',
         ]),
         workspaceBackground() {
+            if (this.presentation) {
+                return;
+            }
             return {
                 background: this.bgColor,
             };
         },
         graphContainerStyle: function() {
+            if (this.presentation) {
+                return;
+            }
             let cursor = "";
             if ((this.mouse.lmb && this.translate) || this.mouse.mmb) {
                 cursor = "grabbing";
@@ -182,11 +190,7 @@ export default {
 </script>
 <style>
 .presentation-graph-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
+
 }
 .graph-container, .graph-editor {
     position: fixed;

mdi-apple-keyboard-control + =	Zoom in
mdi-apple-keyboard-control + -	Zoom out
Delete	Delete selection
Arrow Keys	Nudge selected vectors
\	Toggle presentation visibility
mdi-apple-keyboard-control + ]	Bring forward
mdi-apple-keyboard-control + mdi-apple-keyboard-shift + ]	Bring to front
mdi-apple-keyboard-control + [	Send back
mdi-apple-keyboard-control + mdi-apple-keyboard-shift + [	Send to back
mdi-apple-keyboard-control + Z	Undo
mdi-apple-keyboard-control + mdi-apple-keyboard-shift + Z	Redo
mdi-apple-keyboard-control + mdi-apple-keyboard-shift + D	Duplicate selected
ALT + `	Toggle presentation mode
Space + Left Mouse Button	Hold to move graph view
Middle Mouse Button	Hold to move graph view