diff --git a/www/api/data/base-components/automatic-preview/commands/autoRunPreviews.js b/www/api/data/base-components/automatic-preview/commands/autoRunPreviews.js
index dc228c0..ca87fee 100644
--- a/www/api/data/base-components/automatic-preview/commands/autoRunPreviews.js
+++ b/www/api/data/base-components/automatic-preview/commands/autoRunPreviews.js
@@ -1,25 +1,25 @@
 function(el) {
-  var previewRunners = document.querySelectorAll("iframe.sb-full-preview");
+  var previewRunners = document.querySelectorAll("iframe.simplycode-full-preview");
   previewRunners.forEach(function(previewRunner) {
     previewRunner.contentWindow.document.previewRunner = previewRunner;
     simplyApp.commands.resetPreview(previewRunner)
       .then(function(previewRunner) {
       previewRunner.contentWindow.document.open();
-      previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".sb-preview-code").innerText);
+      previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".simplycode-preview-code").innerText);
       previewRunner.contentWindow.document.close();
     });
   });
 
-  var previewRunners = document.querySelectorAll("iframe.sb-component-preview");
+  var previewRunners = document.querySelectorAll("iframe.simplycode-component-preview");
   previewRunners.forEach(function(previewRunner) {
     previewRunner.contentWindow.document.previewRunner = previewRunner;
     simplyApp.commands.resetPreview(previewRunner)
       .then(function(previewRunner) {
       previewRunner.contentWindow.document.open();
-      previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".sb-preview-code").innerText);
+      previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".simplycode-preview-code").innerText);
       previewRunner.contentWindow.document.close();
       previewRunner.contentWindow.addEventListener("simply-content-loaded", function() {
-        var previewData = previewRunner.parentNode.querySelector(".sb-preview-data").innerText;
+        var previewData = previewRunner.parentNode.querySelector(".simplycode-preview-data").innerText;
         try {
           previewData = JSON.parse(previewData);
         } catch(e) {
diff --git a/www/api/data/base-components/automatic-tests/commands/autoRunTests.js b/www/api/data/base-components/automatic-tests/commands/autoRunTests.js
index 6ae3b8c..b3e2ad8 100644
--- a/www/api/data/base-components/automatic-tests/commands/autoRunTests.js
+++ b/www/api/data/base-components/automatic-tests/commands/autoRunTests.js
@@ -1,5 +1,5 @@
 function(el) {
-  var testRunners = document.querySelectorAll(".sb-component[open] iframe.qunit");
+  var testRunners = document.querySelectorAll(".simplycode-component[open] iframe.qunit");
   testRunners.forEach(function(testRunner) {
     testRunner.contentWindow.document.testRunner = testRunner;
     testRunner.contentWindow.document.open();
diff --git a/www/api/data/base-components/codemirror/commands/codeMirrorInit.js b/www/api/data/base-components/codemirror/commands/codeMirrorInit.js
index c6cde72..43897a9 100644
--- a/www/api/data/base-components/codemirror/commands/codeMirrorInit.js
+++ b/www/api/data/base-components/codemirror/commands/codeMirrorInit.js
@@ -1,5 +1,5 @@
 function() {
-  var textareas = document.querySelectorAll(".sb-component[open] textarea[data-codemirror-mode]:not([style])");
+  var textareas = document.querySelectorAll(".simplycode-component[open] textarea[data-codemirror-mode]:not([style])");
   textareas.forEach(function(textarea) {
     var mode = "javascript";
     if (textarea.hasAttribute("data-codemirror-mode")) {
diff --git a/www/api/data/components/1-styling/componentCss/style.css b/www/api/data/components/1-styling/componentCss/style.css
index 9e93fbf..298a1ee 100644
--- a/www/api/data/components/1-styling/componentCss/style.css
+++ b/www/api/data/components/1-styling/componentCss/style.css
@@ -77,8 +77,8 @@ a:visited {
 
 /* custom styling for custom elements */
 
-.sb-button,
-a.sb-button {
+.simplycode-button,
+a.simplycode-button {
     background: var(--support-background);
     color: var(--support-color);
     padding: 0.3em 0.5em;
@@ -87,13 +87,13 @@ a.sb-button {
     text-decoration: none;
 }
 
-.sb-button:first-child {
+.simplycode-button:first-child {
     margin-left: 0;
 }
-.sb-button:last-child {
+.simplycode-button:last-child {
     margin-right: 0;
 }
-.sb-button.highlight {
+.simplycode-button.highlight {
     background: var(--highlight-background);
     color: var(--highlight-color);
 }
@@ -125,7 +125,7 @@ body > nav {
 body > div.main {
     grid-area: pane;
 }
-nav ul ul .sb-expand {
+nav ul ul .simplycode-expand {
     display: none;
     padding: 0 1.7em;
 }
@@ -146,18 +146,18 @@ nav > ul > li[data-simply-command=expandMenu]::before {
     content: "[+] ";
     font-family: monospace;
 }
-.sb-part {
+.simplycode-part {
     margin-top: 1em;
 }
 
-.sb-part-header {
+.simplycode-part-header {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
-.sb-part-header .sb-options {
+.simplycode-part-header .simplycode-options {
     text-align: right;
 }
-.sb-part .sb-tab {
+.simplycode-part .simplycode-tab {
     padding: 10px 5px;
     margin: 0;
     background-color: #151515;
@@ -166,54 +166,54 @@ nav > ul > li[data-simply-command=expandMenu]::before {
     text-align: center;
     margin-right: 5px;
 }
-.sb-part .sb-tab input[type=radio] {
+.simplycode-part .simplycode-tab input[type=radio] {
     display: none;
 }
-.sb-part .sb-tab input[type=radio]:checked ~ span {
+.simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
     font-weight: bold;
     border-bottom: 2px solid var(--support-background);
 }
-.sb-part .sb-editor-code {
+.simplycode-part .simplycode-editor-code {
     display: grid;
     grid-template-columns: 1fr;
 }
-.sb-part .sb-dual {
+.simplycode-part .simplycode-dual {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
-.sb-part .sb-dual-preview {
+.simplycode-part .simplycode-dual-preview {
     display: grid;
     grid-template-columns: auto 480px;
 }
-.sb-test-header {
+.simplycode-test-header {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
-.sb-test-header .sb-options {
+.simplycode-test-header .simplycode-options {
     text-align: right;
 }
-.sb-component summary {
+.simplycode-component summary {
     font-size: 1.2em;
 }
-.sb-component {
+.simplycode-component {
     margin: 10px 0px;
 }
-.sb-header {
+.simplycode-header {
     display: grid;
     grid-template-columns: 3fr 1fr;
     vertical-align: middle;
 }
-.sb-header .sb-controls {
+.simplycode-header .simplycode-controls {
     text-align: right;
 }
-.sb-header h1 span {
+.simplycode-header h1 span {
     white-space: nowrap;
 }
-.sb-component summary .sb-controls {
+.simplycode-component summary .simplycode-controls {
     display: none;
     margin-left: 1em;
 }
-.sb-component[open] summary .sb-controls {
+.simplycode-component[open] summary .simplycode-controls {
     display: inline-block;
 }
 header {
@@ -231,16 +231,16 @@ header {
 header h1 {
     margin: 0;
 }
-header .sb-controls {
+header .simplycode-controls {
     padding-top: 5px;
     padding-right: 5px;
     text-align: right;
 }
-.sb-editor-code textarea {
+.simplycode-editor-code textarea {
     margin-top: -1px;
 }
 
-ul.sb-components-list {
+ul.simplycode-components-list {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -249,7 +249,7 @@ ul.sb-components-list {
     gap: 10px;
     margin-bottom: 1em;
 }
-ul.sb-components-list li {
+ul.simplycode-components-list li {
     border: 1px solid #555;
     background-color: #2a2a2a;
     padding: 10px;
diff --git a/www/api/data/components/component-actions/componentTemplates/componentActions.html b/www/api/data/components/component-actions/componentTemplates/componentActions.html
index ba36bd4..a60b912 100644
--- a/www/api/data/components/component-actions/componentTemplates/componentActions.html
+++ b/www/api/data/components/component-actions/componentTemplates/componentActions.html
@@ -1,41 +1,41 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Actions provide the internal API for the app to use. It is called by routes and commands, and makes use of the Data API. Actions should not do any DOM access.">
     <span data-simply-field="count.actions" data-simply-content="attributes" data-simply-attributes="data-count">
       Actions
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addAction">Add action</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addAction">Add action</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.actions">
+  <div class="simplycode-code-method" data-simply-list="component.parts.actions">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="action" placeholder="Action name, eg getItemList">
-            <label class="sb-tab">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="action" placeholder="Action name, eg getItemList">
+            <label class="simplycode-tab">
               <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
             </label>
-            <label class="sb-tab">
+            <label class="simplycode-tab">
               <input type="radio" name="actionEditor" value="tests" data-simply-field="editor">
               <span>Tests</span>
             </label>
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-deleted="false" data-simply-command="deleteEntry">Delete action</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-deleted="false" data-simply-command="deleteEntry">Delete action</button>
           </div>
         </div>
-        <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+        <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
           <template data-simply-template="code">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
               <simply-render rel="componentQUnitActionRunner"></simply-render>
             </div>
           </template>
           <template data-simply-template="tests">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <simply-render rel="componentQUnitTests"></simply-render>
             </div>
           </template>
diff --git a/www/api/data/components/component-body-html/componentTemplates/componentBodyHtml.html b/www/api/data/components/component-body-html/componentTemplates/componentBodyHtml.html
index 38fb51a..61c454c 100644
--- a/www/api/data/components/component-body-html/componentTemplates/componentBodyHtml.html
+++ b/www/api/data/components/component-body-html/componentTemplates/componentBodyHtml.html
@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="These are added to the top of the &lt;body&gt; of the HTML">
     <span data-simply-field="count.bodyHtml" data-simply-content="attributes" data-simply-attributes="data-count">
       Additional body HTML
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addBodyHtml">Add body HTML</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addBodyHtml">Add body HTML</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.bodyHtml">
+  <div class="simplycode-code-method" data-simply-list="component.parts.bodyHtml">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="name" placeholder="Name">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>
             <simply-render rel="componentHtmlValidator"></simply-render>
           </div>
diff --git a/www/api/data/components/component-commands/componentTemplates/componentCommands.html b/www/api/data/components/component-commands/componentTemplates/componentCommands.html
index f94be5b..e306976 100644
--- a/www/api/data/components/component-commands/componentTemplates/componentCommands.html
+++ b/www/api/data/components/component-commands/componentTemplates/componentCommands.html
@@ -1,41 +1,41 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Commands come from user interaction on the DOM, for instance clicking a button. Commands are aware of the DOM, and use actions to execute logic.">
     <span data-simply-field="count.commands" data-simply-content="attributes" data-simply-attributes="data-count">
       Commands
     </span>
-    <span class='sb-controls'>
-      <button class="sb-button" data-simply-command="addCommand">Add command</button>
+    <span class='simplycode-controls'>
+      <button class="simplycode-button" data-simply-command="addCommand">Add command</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.commands">
+  <div class="simplycode-code-method" data-simply-list="component.parts.commands">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="command" placeholder="Command name, eg getItemList">
-            <label class="sb-tab">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="command" placeholder="Command name, eg getItemList">
+            <label class="simplycode-tab">
               <input type="radio" name="commandEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
             </label>
-            <label class="sb-tab">
+            <label class="simplycode-tab">
               <input type="radio" name="commandEditor" value="tests" data-simply-field="editor">
               <span>Tests</span>
             </label>
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete command</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete command</button>
           </div>
         </div>
-        <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+        <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
           <template data-simply-template="code">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
               <simply-render rel="componentQUnitCommandRunner"></simply-render>
             </div>
           </template>
           <template data-simply-template="tests">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <simply-render rel="componentQUnitTests"></simply-render>
             </div>
           </template>
diff --git a/www/api/data/components/component-component-css/componentTemplates/componentComponentCss.html b/www/api/data/components/component-component-css/componentTemplates/componentComponentCss.html
index 4e240a3..a2456f6 100644
--- a/www/api/data/components/component-component-css/componentTemplates/componentComponentCss.html
+++ b/www/api/data/components/component-component-css/componentTemplates/componentComponentCss.html
@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Set component CSS - this CSS is globally available.">
     <span data-simply-field="count.componentCss" data-simply-content="attributes" data-simply-attributes="data-count">
       Component CSS collections
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addComponentCss">Add CSS collection</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addComponentCss">Add CSS collection</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.componentCss">
+  <div class="simplycode-code-method" data-simply-list="component.parts.componentCss">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="name" placeholder="Name this CSS collection">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="name" placeholder="Name this CSS collection">
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="css" data-simply-field="code" placeholder="div {...}"></textarea>
           </div>
         </div>
diff --git a/www/api/data/components/component-component-html/componentTemplates/componentComponentTemplate.html b/www/api/data/components/component-component-html/componentTemplates/componentComponentTemplate.html
index ce34dba..18be07c 100644
--- a/www/api/data/components/component-component-html/componentTemplates/componentComponentTemplate.html
+++ b/www/api/data/components/component-component-html/componentTemplates/componentComponentTemplate.html
@@ -1,34 +1,34 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="These templates are used to build up page templates.">
     <span data-simply-field="count.componentTemplates" data-simply-content="attributes" data-simply-attributes="data-count">
       Component HTML template
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addComponentTemplate">Add component HTML template</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addComponentTemplate">Add component HTML template</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.componentTemplates">
+  <div class="simplycode-code-method" data-simply-list="component.parts.componentTemplates">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="component" placeholder="Component name">
-            <label class="sb-tab">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="component" placeholder="Component name">
+            <label class="simplycode-tab">
               <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
             </label>
-            <label class="sb-tab">
+            <label class="simplycode-tab">
               <input type="radio" name="actionEditor" value="sampledata" data-simply-field="editor">
               <span>Sample data</span>
             </label>
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
           </div>
         </div>
-        <div class="sb-editors sb-dual-preview">
-          <div class="sb-editor-code" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+        <div class="simplycode-editors simplycode-dual-preview">
+          <div class="simplycode-editor-code" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
             <template data-simply-template="code">
               <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<main><div>Component Html</div></main>"></textarea>
             </template>
@@ -36,7 +36,7 @@
               <textarea data-codemirror-mode="json" data-simply-field="sampledata" placeholder="{}"></textarea>
             </template>
           </div>
-          <div class="sb-previews">
+          <div class="simplycode-previews">
             <simply-render rel="componentPreview"></simply-render>
           </div>
         </div>
diff --git a/www/api/data/components/component-data-api/componentTemplates/componentDataApi.html b/www/api/data/components/component-data-api/componentTemplates/componentDataApi.html
index 9fdee4d..e088ce6 100644
--- a/www/api/data/components/component-data-api/componentTemplates/componentDataApi.html
+++ b/www/api/data/components/component-data-api/componentTemplates/componentDataApi.html
@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="The Data API layer provides functions to load en store data types. Makes use of the Raw API and provides data for actions">
     <span data-simply-field="count.dataApi" data-simply-content="attributes" data-simply-attributes="data-count">
       Data API
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addDataApiMethod">Add method</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addDataApiMethod">Add method</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.dataApi">
+  <div class="simplycode-code-method" data-simply-list="component.parts.dataApi">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete method</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete method</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
           </div>
         </div>
diff --git a/www/api/data/components/component-data-sources/componentTemplates/componentDataSources.html b/www/api/data/components/component-data-sources/componentTemplates/componentDataSources.html
index efd2a96..a30c43c 100644
--- a/www/api/data/components/component-data-sources/componentTemplates/componentDataSources.html
+++ b/www/api/data/components/component-data-sources/componentTemplates/componentDataSources.html
@@ -1,69 +1,69 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Data sources provide list information from an external data source. Use this to provide lists that are not part of the subject of the page. Used as data-simply-data on data-simply-lists">
     <span data-simply-field="count.dataSources" data-simply-content="attributes" data-simply-attributes="data-count">
       Data sources
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addDataSource">Add data source</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addDataSource">Add data source</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.dataSources">
+  <div class="simplycode-code-method" data-simply-list="component.parts.dataSources">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="dataSource" placeholder="Data source name, eg itemList">
-            <label class="sb-tab" title="Load code is used to fetch the data source and render it in the list. Save code is used to gather data from the data source and save it back to where it came from.">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="dataSource" placeholder="Data source name, eg itemList">
+            <label class="simplycode-tab" title="Load code is used to fetch the data source and render it in the list. Save code is used to gather data from the data source and save it back to where it came from.">
               <input type="radio" checked name="dataSourceEditor" value="code" data-simply-field="editor">
               <span>Load/Save</span>
             </label>
-            <label class="sb-tab" title="Get/Set is used to populate the data-simply-list value.">
+            <label class="simplycode-tab" title="Get/Set is used to populate the data-simply-list value.">
               <input type="radio" checked name="dataSourceEditor" value="getset" data-simply-field="editor">
               <span>Get/Set</span>
             </label>
-            <label class="sb-tab">
+            <label class="simplycode-tab">
               <input type="radio" name="dataSourceEditor" value="tests" data-simply-field="editor">
               <span>Tests</span>
             </label>
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete data source</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete data source</button>
           </div>
         </div>
-        <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+        <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
           <template data-simply-template="code">
-            <div class="sb-editor-code sb-dual">
+            <div class="simplycode-editor-code simplycode-dual">
               <textarea data-codemirror-mode="javascript" data-simply-field="load-code" placeholder="function() {...}"></textarea>
               <textarea data-codemirror-mode="javascript" data-simply-field="save-code" placeholder="function() {...}"></textarea>
             </div>
           </template>
           <template data-simply-template="getset">
-            <div class="sb-editor-code sb-dual">
+            <div class="simplycode-editor-code simplycode-dual">
               <textarea data-codemirror-mode="javascript" data-simply-field="get-code" placeholder="function() {...}"></textarea>
               <textarea data-codemirror-mode="javascript" data-simply-field="set-code" placeholder="function() {...}"></textarea>
             </div>
           </template>
           <template data-simply-template="tests">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <simply-render rel="componentQUnitTests"></simply-render>
             </div>
           </template>
-          <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+          <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
             <template data-simply-template="code">
-              <div class="sb-editor-code sb-dual">
+              <div class="simplycode-editor-code simplycode-dual">
                 <textarea data-codemirror-mode="javascript" data-simply-field="load-code" placeholder="function() {...}"></textarea>
                 <textarea data-codemirror-mode="javascript" data-simply-field="save-code" placeholder="function() {...}"></textarea>
               </div>
             </template>
             <template data-simply-template="getset">
-              <div class="sb-editor-code sb-dual">
+              <div class="simplycode-editor-code simplycode-dual">
                 <textarea data-codemirror-mode="javascript" data-simply-field="get-code" placeholder="function() {...}"></textarea>
                 <textarea data-codemirror-mode="javascript" data-simply-field="set-code" placeholder="function() {...}"></textarea>
               </div>
             </template>
             <template data-simply-template="tests">
-              <div class="sb-editor-code">
+              <div class="simplycode-editor-code">
                 <simply-render rel="componentQUnitTests"></simply-render>
               </div>
             </template>
diff --git a/www/api/data/components/component-description/componentTemplates/componentDescription.html b/www/api/data/components/component-description/componentTemplates/componentDescription.html
index 0ac5986..762a19b 100644
--- a/www/api/data/components/component-description/componentTemplates/componentDescription.html
+++ b/www/api/data/components/component-description/componentTemplates/componentDescription.html
@@ -1,4 +1,4 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary title="Describe this component for your own use.">
     Description
   </summary>
diff --git a/www/api/data/components/component-foot-html/componentTemplates/componentFootHtml.html b/www/api/data/components/component-foot-html/componentTemplates/componentFootHtml.html
index 7ba2ce3..af9d496 100644
--- a/www/api/data/components/component-foot-html/componentTemplates/componentFootHtml.html
+++ b/www/api/data/components/component-foot-html/componentTemplates/componentFootHtml.html
@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="These templates are added just before the &lt;/body&gt; in the HTML">
     <span data-simply-field="count.footHtml" data-simply-content="attributes" data-simply-attributes="data-count">
       Additional foot HTML
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addFootHtml">Add foot HTML</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addFootHtml">Add foot HTML</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.footHtml">
+  <div class="simplycode-code-method" data-simply-list="component.parts.footHtml">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="name" placeholder="Name">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>
             <simply-render rel="componentHtmlValidator"></simply-render>
           </div>
diff --git a/www/api/data/components/component-head-html/componentTemplates/componentHeadHtml.html b/www/api/data/components/component-head-html/componentTemplates/componentHeadHtml.html
index ec9af10..ff083e3 100644
--- a/www/api/data/components/component-head-html/componentTemplates/componentHeadHtml.html
+++ b/www/api/data/components/component-head-html/componentTemplates/componentHeadHtml.html
@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="These are added to the &lt;head&gt; section of the HTML">
     <span data-simply-field="count.headHtml" data-simply-content="attributes" data-simply-attributes="data-count">
       Additional head HTML
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addHeadHtml">Add head HTML</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addHeadHtml">Add head HTML</button>
     </span> 
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.headHtml">
+  <div class="simplycode-code-method" data-simply-list="component.parts.headHtml">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="name" placeholder="Name">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
           </div>
-          <div class="sb-options">
-            <button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete head HTML</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete head HTML</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>
             <simply-render rel="componentHtmlValidator"></simply-render>
           </div>
diff --git a/www/api/data/components/component-page-css/componentTemplates/componentPageCss.html b/www/api/data/components/component-page-css/componentTemplates/componentPageCss.html
index c49cce5..d77f07a 100644
--- a/www/api/data/components/component-page-css/componentTemplates/componentPageCss.html
+++ b/www/api/data/components/component-page-css/componentTemplates/componentPageCss.html
@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Set page specific CSS - this CSS is only used for this page and is removed when we are on another page.">
     <span data-simply-field="count.pageCss" data-simply-content="attributes" data-simply-attributes="data-count">
       Page CSS collections
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addPageCss">Add CSS collection</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addPageCss">Add CSS collection</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.pageCss">
+  <div class="simplycode-code-method" data-simply-list="component.parts.pageCss">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="name" placeholder="Name this CSS collection">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="name" placeholder="Name this CSS collection">
           </div>
-          <div class="sb-options">
-            <button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="css" data-simply-field="code" placeholder="div {...}"></textarea>
           </div>
         </div>
diff --git a/www/api/data/components/component-page-frame/componentTemplates/componentPageFrame.html b/www/api/data/components/component-page-frame/componentTemplates/componentPageFrame.html
index 5b1b8fe..a955691 100644
--- a/www/api/data/components/component-page-frame/componentTemplates/componentPageFrame.html
+++ b/www/api/data/components/component-page-frame/componentTemplates/componentPageFrame.html
@@ -1,15 +1,15 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="These make up the page frame together with the Simply App parts.">
     Page frame
   </summary>
-  <div class="sb-part">
-    <div class="sb-part-header">
-      <div class="sb-tabs">
-        <label class="sb-tab">Full app</label>
+  <div class="simplycode-part">
+    <div class="simplycode-part-header">
+      <div class="simplycode-tabs">
+        <label class="simplycode-tab">Full app</label>
       </div>
     </div>
-    <div class="sb-editors">
-      <div class="sb-editor-code">
+    <div class="simplycode-editors">
+      <div class="simplycode-editor-code">
         <textarea data-codemirror-mode="htmlmixed" data-simply-field="component.parts.fullApp" placeholder="<!DOCTYPE...">
 &lt;!DOCTYPE HTML>
 &lt;html lang="en">
@@ -18,14 +18,14 @@
     </div>
   </div>
 
-  <div class="sb-part">
-    <div class="sb-part-header">
-      <div class="sb-tabs">
-        <label class="sb-tab">Page preview</label>
+  <div class="simplycode-part">
+    <div class="simplycode-part-header">
+      <div class="simplycode-tabs">
+        <label class="simplycode-tab">Page preview</label>
       </div>
     </div>
-    <div class="sb-editors">
-      <div class="sb-editor-code">
+    <div class="simplycode-editors">
+      <div class="simplycode-editor-code">
         <textarea data-codemirror-mode="htmlmixed" data-simply-field="component.parts.pagePreview" placeholder="<!DOCTYPE...">
 &lt;!DOCTYPE HTML>
 &lt;html lang="en">
@@ -34,14 +34,14 @@
     </div>
   </div>
 
-  <div class="sb-part">
-    <div class="sb-part-header">
-      <div class="sb-tabs">
-        <label class="sb-tab">Component preview</label>
+  <div class="simplycode-part">
+    <div class="simplycode-part-header">
+      <div class="simplycode-tabs">
+        <label class="simplycode-tab">Component preview</label>
       </div>
     </div>
-    <div class="sb-editors">
-      <div class="sb-editor-code">
+    <div class="simplycode-editors">
+      <div class="simplycode-editor-code">
         <textarea data-codemirror-mode="htmlmixed" data-simply-field="component.parts.componentPreview" placeholder="<!DOCTYPE...">
 &lt;!DOCTYPE HTML>
 &lt;html lang="en">
diff --git a/www/api/data/components/component-page-template/componentTemplates/componentPageTemplate.html b/www/api/data/components/component-page-template/componentTemplates/componentPageTemplate.html
index d338dd2..42ee026 100644
--- a/www/api/data/components/component-page-template/componentTemplates/componentPageTemplate.html
+++ b/www/api/data/components/component-page-template/componentTemplates/componentPageTemplate.html
@@ -1,34 +1,34 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="These templates are used in routes to set the HTML of the requested page.">
     <span data-simply-field="count.pageTemplates" data-simply-content="attributes" data-simply-attributes="data-count">
       Page HTML template
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addPageTemplate">Add page HTML template</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addPageTemplate">Add page HTML template</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.pageTemplates">
+  <div class="simplycode-code-method" data-simply-list="component.parts.pageTemplates">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="page" placeholder="Page name">
-            <label class="sb-tab">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="page" placeholder="Page name">
+            <label class="simplycode-tab">
               <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
             </label>
-            <label class="sb-tab">
+            <label class="simplycode-tab">
               <input type="radio" name="actionEditor" value="sampledata" data-simply-field="editor">
               <span>Sample data</span>
             </label>
           </div>
-          <div class="sb-options">
-            <button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
           </div>
         </div>
-        <div class="sb-editors sb-dual">
-          <div class="sb-editor-code" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+        <div class="simplycode-editors simplycode-dual">
+          <div class="simplycode-editor-code" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
             <template data-simply-template="code">
               <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<main><div>Page contents</div></main>"></textarea>
             </template>
@@ -36,7 +36,7 @@
               <textarea data-codemirror-mode="json" data-simply-field="sampledata" placeholder="{}"></textarea>
             </template>
           </div>
-          <div class="sb-previews">
+          <div class="simplycode-previews">
             <simply-render rel="pagePreview"></simply-render>
           </div>
         </div>
diff --git a/www/api/data/components/component-qunit-tests/componentTemplates/componentQUnitTests.html b/www/api/data/components/component-qunit-tests/componentTemplates/componentQUnitTests.html
index 5c1dace..35bd54e 100644
--- a/www/api/data/components/component-qunit-tests/componentTemplates/componentQUnitTests.html
+++ b/www/api/data/components/component-qunit-tests/componentTemplates/componentQUnitTests.html
@@ -1,21 +1,21 @@
-<div class="sb-editor-qunit-tests">
-  <div class="sb-tests" data-simply-list="tests">
+<div class="simplycode-editor-qunit-tests">
+  <div class="simplycode-tests" data-simply-list="tests">
     <template>
-      <div class="sb-test" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-test-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="name" placeholder="Test name">
+      <div class="simplycode-test" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-test-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="name" placeholder="Test name">
           </div>
-          <div class="sb-options">
-            <button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete test</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete test</button>
           </div>
         </div>
-        <div class="sb-test-editor">
+        <div class="simplycode-test-editor">
           <textarea data-codemirror-mode="javascript" data-simply-field="test-code" placeholder="function() {...}"></textarea>
         </div>
       </div>
     </template>
   </div>
-  <button class="sb-button" data-simply-command="addTest">Add test</button>
+  <button class="simplycode-button" data-simply-command="addTest">Add test</button>
 </div>
\ No newline at end of file
diff --git a/www/api/data/components/component-raw-api/componentTemplates/componentRawApi.html b/www/api/data/components/component-raw-api/componentTemplates/componentRawApi.html
index 1eb3877..fa4e99c 100644
--- a/www/api/data/components/component-raw-api/componentTemplates/componentRawApi.html
+++ b/www/api/data/components/component-raw-api/componentTemplates/componentRawApi.html
@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="The Raw API layer provides lower level functions to access an API. It handles things like authentication, connection, encoding and the likes. It exposes 'get', 'post' methods.">
     <span data-simply-field="count.rawApi" data-simply-content="attributes" data-simply-attributes="data-count">
       Raw API
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addRawApiMethod">Add method</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addRawApiMethod">Add method</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.rawApi">
+  <div class="simplycode-code-method" data-simply-list="component.parts.rawApi">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
           </div>
-          <div class="sb-options">
-            <button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete method</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete method</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
           </div>
         </div>
diff --git a/www/api/data/components/component-routes/componentTemplates/componentRoutes.html b/www/api/data/components/component-routes/componentTemplates/componentRoutes.html
index 2bea784..7a34308 100644
--- a/www/api/data/components/component-routes/componentTemplates/componentRoutes.html
+++ b/www/api/data/components/component-routes/componentTemplates/componentRoutes.html
@@ -1,27 +1,27 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Routes provide a translation from a URL to something the app should do. Routes make use of actions to fetch or store data">
     <span data-simply-field="count.routes" data-simply-content="attributes" data-simply-attributes="data-count">
       Routes
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addRoute">Add route</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addRoute">Add route</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.routes">
+  <div class="simplycode-code-method" data-simply-list="component.parts.routes">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="name" placeholder="Name of the route">
-            <input class="sb-tab" data-simply-field="route" placeholder="#route/:variable">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="name" placeholder="Name of the route">
+            <input class="simplycode-tab" data-simply-field="route" placeholder="#route/:variable">
           </div>
-          <div class="sb-options">
-            <button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete route</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete route</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
           </div>
         </div>
diff --git a/www/api/data/components/component-sorters/componentTemplates/componentSorters.html b/www/api/data/components/component-sorters/componentTemplates/componentSorters.html
index 2364bca..af41fe6 100644
--- a/www/api/data/components/component-sorters/componentTemplates/componentSorters.html
+++ b/www/api/data/components/component-sorters/componentTemplates/componentSorters.html
@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Sorters are utility function that are used to sort arrays, used in datasources, actions.">
     <span data-simply-field="count.sorters" data-simply-content="attributes" data-simply-attributes="data-count">
       Sorters
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addSorter">Add sorter</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addSorter">Add sorter</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.sorters">
+  <div class="simplycode-code-method" data-simply-list="component.parts.sorters">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="sorter" placeholder="Sorter name, eg sortByDescription">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="sorter" placeholder="Sorter name, eg sortByDescription">
           </div>
-          <div class="sb-options">
-            <button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete sorter</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete sorter</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
           </div>
         </div>
diff --git a/www/api/data/components/component-transformers/componentTemplates/componentTransformers.html b/www/api/data/components/component-transformers/componentTemplates/componentTransformers.html
index 15a3ff2..f255f58 100644
--- a/www/api/data/components/component-transformers/componentTemplates/componentTransformers.html
+++ b/www/api/data/components/component-transformers/componentTemplates/componentTransformers.html
@@ -1,41 +1,41 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Transformers provide a last moment change to data, just before it is rendered. Use as a value of data-simply-transform on a data-simply-field">
     <span data-simply-field="count.transformers" data-simply-content="attributes" data-simply-attributes="data-count">
       Transformers
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addTransformer">Add transformer</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addTransformer">Add transformer</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.transformers">
+  <div class="simplycode-code-method" data-simply-list="component.parts.transformers">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="transformer" placeholder="Transformer name, eg itemNameFromId">
-            <label class="sb-tab" title="Render code transforms the data from what is stored into what the user sees. Extract takes the data as provided from the DOM and transforms it for storage">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="transformer" placeholder="Transformer name, eg itemNameFromId">
+            <label class="simplycode-tab" title="Render code transforms the data from what is stored into what the user sees. Extract takes the data as provided from the DOM and transforms it for storage">
               <input type="radio" checked name="transformerEditor" value="code" data-simply-field="editor">
               <span>Render/Extract</span>
             </label>
-            <label class="sb-tab">
+            <label class="simplycode-tab">
               <input type="radio" name="transformerEditor" value="tests" data-simply-field="editor">
               <span>Tests</span>
             </label>
           </div>
-          <div class="sb-options">
-            <button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete transformer</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete transformer</button>
           </div>
         </div>
-        <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+        <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
           <template data-simply-template="code">
-            <div class="sb-editor-code sb-dual">
+            <div class="simplycode-editor-code simplycode-dual">
               <textarea data-codemirror-mode="javascript" data-simply-field="render-code" placeholder="function() {...}"></textarea>
               <textarea data-codemirror-mode="javascript" data-simply-field="extract-code" placeholder="function() {...}"></textarea>
             </div>
           </template>
           <template data-simply-template="tests">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <simply-render rel="componentQUnitTests"></simply-render>
             </div>
           </template>
diff --git a/www/api/data/components/components-generic/componentCss/code-method block.css b/www/api/data/components/components-generic/componentCss/code-method block.css
index 1bf95b4..bceb28f 100644
--- a/www/api/data/components/components-generic/componentCss/code-method block.css	
+++ b/www/api/data/components/components-generic/componentCss/code-method block.css	
@@ -1,17 +1,17 @@
-.sb-code-method {
+.simplycode-code-method {
   width: 100%;
 }
-.sb-component summary span[data-count] {
+.simplycode-component summary span[data-count] {
   font-weight: bold;
 }
-.sb-component summary span[data-count]:after {
+.simplycode-component summary span[data-count]:after {
   content: '(' attr(data-count) ')';
 }
-.sb-component summary span[data-count=""],
-.sb-component summary span[data-count="0"] {
+.simplycode-component summary span[data-count=""],
+.simplycode-component summary span[data-count="0"] {
   font-weight: normal;
 }
-.sb-component summary span[data-count=""]:after,
-.sb-component summary span[data-count="0"]:after {
+.simplycode-component summary span[data-count=""]:after,
+.simplycode-component summary span[data-count="0"]:after {
   content: '';
 }
\ No newline at end of file
diff --git a/www/api/data/components/components-generic/componentCss/deleted-parts.css b/www/api/data/components/components-generic/componentCss/deleted-parts.css
index ef42d84..03b1e74 100644
--- a/www/api/data/components/components-generic/componentCss/deleted-parts.css
+++ b/www/api/data/components/components-generic/componentCss/deleted-parts.css
@@ -1,3 +1,3 @@
-.sb-part[data-deleted="true"] {
+.simplycode-part[data-deleted="true"] {
   opacity: 0.3;
 }
\ No newline at end of file
diff --git a/www/api/data/components/dragdrop/componentCss/simply dragdrop.css b/www/api/data/components/dragdrop/componentCss/simply dragdrop.css
index 343d4df..83ed51e 100644
--- a/www/api/data/components/dragdrop/componentCss/simply dragdrop.css	
+++ b/www/api/data/components/dragdrop/componentCss/simply dragdrop.css	
@@ -1,11 +1,11 @@
 [data-simply-list].simply-dragdrop-receiving {
   outline: 2px dashed var(--highlight-dark);
 }
-.sb-component [data-simply-list].sb-code-method.simply-empty:before {
+.simplycode-component [data-simply-list].simplycode-code-method.simply-empty:before {
   content: "Nothing here yet... add or drop code blocks here.";
   font-style: italic;
 }
-.sb-component [data-simply-list].sb-code-method:before {
+.simplycode-component [data-simply-list].simplycode-code-method:before {
   content: "Drop code blocks here.";
   font-style: italic;
 }
diff --git a/www/api/data/components/header/componentTemplates/header.html b/www/api/data/components/header/componentTemplates/header.html
index 1b7de6c..42aa003 100644
--- a/www/api/data/components/header/componentTemplates/header.html
+++ b/www/api/data/components/header/componentTemplates/header.html
@@ -1,4 +1,4 @@
 <h1>Simply Code - Build something awesome!</h1>
-<div class="sb-controls">
-  <a href="#publish" class="sb-button">Preview and publish!</a>
+<div class="simplycode-controls">
+  <a href="#publish" class="simplycode-button">Preview and publish!</a>
 </div>
\ No newline at end of file
diff --git a/www/api/data/components/html-validator/componentCss/HTML validator.css b/www/api/data/components/html-validator/componentCss/HTML validator.css
index bc9a657..82868c5 100644
--- a/www/api/data/components/html-validator/componentCss/HTML validator.css	
+++ b/www/api/data/components/html-validator/componentCss/HTML validator.css	
@@ -1,19 +1,19 @@
-.sb-html-valid,
-.sb-html-invalid {
+.simplycode-html-valid,
+.simplycode-html-invalid {
   padding: 4px 10px;
   background-color: #D2E0E6;
   color: #2B81AF;
 }
-.sb-html-valid {
+.simplycode-html-valid {
   border-top: 5px solid #C6E746; /* pass color from qunit */
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
   margin-bottom: 10px;
 }
-.sb-html-invalid {
+.simplycode-html-invalid {
   border-top: 5px solid #EE5757; /* fail color from qunit */
 }
-.sb-html-messages:not(.simply-empty) {
+.simplycode-html-messages:not(.simply-empty) {
   padding: 4px 10px;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
@@ -21,9 +21,9 @@
   background-color: #D2E0E6;
   color: #2B81AF;
 }
-.sb-html-message:not(:last-child) {
+.simplycode-html-message:not(:last-child) {
   border-bottom: 1px solid #2B81AF;
 }
-.sb-html-message [data-simply-field=firstLine]:not(:empty):after {
+.simplycode-html-message [data-simply-field=firstLine]:not(:empty):after {
   content: " - ";
 }
\ No newline at end of file
diff --git a/www/api/data/components/html-validator/componentTemplates/componentHtmlValidator.html b/www/api/data/components/html-validator/componentTemplates/componentHtmlValidator.html
index a42d241..c5a4662 100644
--- a/www/api/data/components/html-validator/componentTemplates/componentHtmlValidator.html
+++ b/www/api/data/components/html-validator/componentTemplates/componentHtmlValidator.html
@@ -1,7 +1,7 @@
 <div data-simply-field="code" data-simply-transformer="validateHtml"></div>
-<div class="sb-html-messages" data-simply-list="validateResult.messages">
+<div class="simplycode-html-messages" data-simply-list="validateResult.messages">
   <template>
-    <div class="sb-html-message">
+    <div class="simplycode-html-message">
       <span data-simply-field="message"></span><br>
       <span data-simply-field="extract" data-simply-transformer="escapeHtml"></span> on line <span data-simply-field="firstLine"></span> <span data-simply-field="lastLine"></span>
     </div>
diff --git a/www/api/data/components/html-validator/transformers/validateHtml-render.js b/www/api/data/components/html-validator/transformers/validateHtml-render.js
index 2ca7b92..9cfdffb 100644
--- a/www/api/data/components/html-validator/transformers/validateHtml-render.js
+++ b/www/api/data/components/html-validator/transformers/validateHtml-render.js
@@ -20,11 +20,11 @@ function(data) {
       .then(function(validateResult) {
       element.dataBinding.config.data.validateResult = validateResult;
       if(validateResult.messages.length) {
-        element.className = "sb-html-invalid";
+        element.className = "simplycode-html-invalid";
         element.innerHTML = "HTML validation failed:";
       } else {
         element.innerHTML = "HTML validated!";
-        element.className = "sb-html-valid";
+        element.className = "simplycode-html-valid";
       }
     });
   }, 1000);
diff --git a/www/api/data/components/previews/componentCss/App full preview.css b/www/api/data/components/previews/componentCss/App full preview.css
index 182fb3e..2c51deb 100644
--- a/www/api/data/components/previews/componentCss/App full preview.css	
+++ b/www/api/data/components/previews/componentCss/App full preview.css	
@@ -1,17 +1,17 @@
-.sb-preview-code {
+.simplycode-preview-code {
   display: none;
 }
-.sb-preview-data {
+.simplycode-preview-data {
   display: none;
 }
-.sb-preview-code [data-simply-list-item]:last-child .trailingComma {
+.simplycode-preview-code [data-simply-list-item]:last-child .trailingComma {
   display: none;
 }
-.sb-full-preview-container {
+.simplycode-full-preview-container {
   height: calc(0.6 * 768px);
   width: calc(0.6 * 1280px);
 }
-iframe.sb-full-preview {
+iframe.simplycode-full-preview {
   width: 1280px;
   height: 768px;
   transform: scale(0.6);
@@ -20,12 +20,12 @@ iframe.sb-full-preview {
   background-color: white;
 }
 :root {
-  --sb-component-preview-scale: 0.4;
+  --simplycode-component-preview-scale: 0.4;
 }
-iframe.sb-component-preview {
-  width: calc(480px/var(--sb-component-preview-scale));
-  height: calc(300px/var(--sb-component-preview-scale));
-  transform: scale(var(--sb-component-preview-scale));
+iframe.simplycode-component-preview {
+  width: calc(480px/var(--simplycode-component-preview-scale));
+  height: calc(300px/var(--simplycode-component-preview-scale));
+  transform: scale(var(--simplycode-component-preview-scale));
   transform-origin: top left;
   position: absolute;
   background-color: white;
diff --git a/www/api/data/components/previews/componentTemplates/componentPreview.html b/www/api/data/components/previews/componentTemplates/componentPreview.html
index 29a4e26..1e6c7fd 100644
--- a/www/api/data/components/previews/componentTemplates/componentPreview.html
+++ b/www/api/data/components/previews/componentTemplates/componentPreview.html
@@ -1,11 +1,11 @@
-<div class="sb-component-preview-container">
-  <iframe class="sb-component-preview"></iframe>
-  <div class="sb-preview-code">
+<div class="simplycode-component-preview-container">
+  <iframe class="simplycode-component-preview"></iframe>
+  <div class="simplycode-preview-code">
     <pre>
       <span data-simply-field="code" data-simply-transformer="simplyPreviewComponent"></span>
 </pre>
   </div>
-  <div class="sb-preview-data">
+  <div class="simplycode-preview-data">
     <pre>
       <span data-simply-field="sampledata" data-simply-transformer="htmlEscape" data-indent=4></span>
 </pre>
diff --git a/www/api/data/components/previews/componentTemplates/fullAppPreview.html b/www/api/data/components/previews/componentTemplates/fullAppPreview.html
index 9075eb7..af69c64 100644
--- a/www/api/data/components/previews/componentTemplates/fullAppPreview.html
+++ b/www/api/data/components/previews/componentTemplates/fullAppPreview.html
@@ -1,4 +1,4 @@
-<div class="sb-full-preview-container">
-  <iframe class="sb-full-preview"></iframe>
-  <div class="sb-preview-code" data-simply-field="app" data-simply-transformer="simplyPreviewFullApp"></div>
+<div class="simplycode-full-preview-container">
+  <iframe class="simplycode-full-preview"></iframe>
+  <div class="simplycode-preview-code" data-simply-field="app" data-simply-transformer="simplyPreviewFullApp"></div>
 </div>
\ No newline at end of file
diff --git a/www/api/data/components/previews/componentTemplates/pagePreview.html b/www/api/data/components/previews/componentTemplates/pagePreview.html
index 633d3c4..56c1341 100644
--- a/www/api/data/components/previews/componentTemplates/pagePreview.html
+++ b/www/api/data/components/previews/componentTemplates/pagePreview.html
@@ -1,11 +1,11 @@
-<div class="sb-component-preview-container">
-  <iframe class="sb-component-preview"></iframe>
-  <div class="sb-preview-code">
+<div class="simplycode-component-preview-container">
+  <iframe class="simplycode-component-preview"></iframe>
+  <div class="simplycode-preview-code">
     <pre>
       <span data-simply-field="code" data-simply-transformer="simplyPreviewPage"></span>
 </pre>
   </div>
-  <div class="sb-preview-data">
+  <div class="simplycode-preview-data">
     <pre>
       <span data-simply-field="sampledata" data-simply-transformer="htmlEscape" data-indent=4></span>
 </pre>
diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index e824993..0673a92 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -111,8 +111,8 @@
       
       /* custom styling for custom elements */
       
-      .sb-button,
-      a.sb-button {
+      .simplycode-button,
+      a.simplycode-button {
           background: var(--support-background);
           color: var(--support-color);
           padding: 0.3em 0.5em;
@@ -121,13 +121,13 @@
           text-decoration: none;
       }
       
-      .sb-button:first-child {
+      .simplycode-button:first-child {
           margin-left: 0;
       }
-      .sb-button:last-child {
+      .simplycode-button:last-child {
           margin-right: 0;
       }
-      .sb-button.highlight {
+      .simplycode-button.highlight {
           background: var(--highlight-background);
           color: var(--highlight-color);
       }
@@ -159,7 +159,7 @@
       body > div.main {
           grid-area: pane;
       }
-      nav ul ul .sb-expand {
+      nav ul ul .simplycode-expand {
           display: none;
           padding: 0 1.7em;
       }
@@ -180,18 +180,18 @@
           content: "[+] ";
           font-family: monospace;
       }
-      .sb-part {
+      .simplycode-part {
           margin-top: 1em;
       }
       
-      .sb-part-header {
+      .simplycode-part-header {
           display: grid;
           grid-template-columns: 1fr 1fr;
       }
-      .sb-part-header .sb-options {
+      .simplycode-part-header .simplycode-options {
           text-align: right;
       }
-      .sb-part .sb-tab {
+      .simplycode-part .simplycode-tab {
           padding: 10px 5px;
           margin: 0;
           background-color: #151515;
@@ -200,54 +200,54 @@
           text-align: center;
           margin-right: 5px;
       }
-      .sb-part .sb-tab input[type=radio] {
+      .simplycode-part .simplycode-tab input[type=radio] {
           display: none;
       }
-      .sb-part .sb-tab input[type=radio]:checked ~ span {
+      .simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
           font-weight: bold;
           border-bottom: 2px solid var(--support-background);
       }
-      .sb-part .sb-editor-code {
+      .simplycode-part .simplycode-editor-code {
           display: grid;
           grid-template-columns: 1fr;
       }
-      .sb-part .sb-dual {
+      .simplycode-part .simplycode-dual {
           display: grid;
           grid-template-columns: 1fr 1fr;
       }
-      .sb-part .sb-dual-preview {
+      .simplycode-part .simplycode-dual-preview {
           display: grid;
           grid-template-columns: auto 480px;
       }
-      .sb-test-header {
+      .simplycode-test-header {
           display: grid;
           grid-template-columns: 1fr 1fr;
       }
-      .sb-test-header .sb-options {
+      .simplycode-test-header .simplycode-options {
           text-align: right;
       }
-      .sb-component summary {
+      .simplycode-component summary {
           font-size: 1.2em;
       }
-      .sb-component {
+      .simplycode-component {
           margin: 10px 0px;
       }
-      .sb-header {
+      .simplycode-header {
           display: grid;
           grid-template-columns: 3fr 1fr;
           vertical-align: middle;
       }
-      .sb-header .sb-controls {
+      .simplycode-header .simplycode-controls {
           text-align: right;
       }
-      .sb-header h1 span {
+      .simplycode-header h1 span {
           white-space: nowrap;
       }
-      .sb-component summary .sb-controls {
+      .simplycode-component summary .simplycode-controls {
           display: none;
           margin-left: 1em;
       }
-      .sb-component[open] summary .sb-controls {
+      .simplycode-component[open] summary .simplycode-controls {
           display: inline-block;
       }
       header {
@@ -265,16 +265,16 @@
       header h1 {
           margin: 0;
       }
-      header .sb-controls {
+      header .simplycode-controls {
           padding-top: 5px;
           padding-right: 5px;
           text-align: right;
       }
-      .sb-editor-code textarea {
+      .simplycode-editor-code textarea {
           margin-top: -1px;
       }
       
-      ul.sb-components-list {
+      ul.simplycode-components-list {
           list-style: none;
           padding: 0;
           margin: 0;
@@ -283,7 +283,7 @@
           gap: 10px;
           margin-bottom: 1em;
       }
-      ul.sb-components-list li {
+      ul.simplycode-components-list li {
           border: 1px solid #555;
           background-color: #2a2a2a;
           padding: 10px;
@@ -424,36 +424,36 @@
         height: 0px;
       }
       /* code-method block */
-      .sb-code-method {
+      .simplycode-code-method {
         width: 100%;
       }
-      .sb-component summary span[data-count] {
+      .simplycode-component summary span[data-count] {
         font-weight: bold;
       }
-      .sb-component summary span[data-count]:after {
+      .simplycode-component summary span[data-count]:after {
         content: '(' attr(data-count) ')';
       }
-      .sb-component summary span[data-count=""],
-      .sb-component summary span[data-count="0"] {
+      .simplycode-component summary span[data-count=""],
+      .simplycode-component summary span[data-count="0"] {
         font-weight: normal;
       }
-      .sb-component summary span[data-count=""]:after,
-      .sb-component summary span[data-count="0"]:after {
+      .simplycode-component summary span[data-count=""]:after,
+      .simplycode-component summary span[data-count="0"]:after {
         content: '';
       }
       /* deleted-parts */
-      .sb-part[data-deleted="true"] {
+      .simplycode-part[data-deleted="true"] {
         opacity: 0.3;
       }
       /* simply dragdrop */
       [data-simply-list].simply-dragdrop-receiving {
         outline: 2px dashed var(--highlight-dark);
       }
-      .sb-component [data-simply-list].sb-code-method.simply-empty:before {
+      .simplycode-component [data-simply-list].simplycode-code-method.simply-empty:before {
         content: "Nothing here yet... add or drop code blocks here.";
         font-style: italic;
       }
-      .sb-component [data-simply-list].sb-code-method:before {
+      .simplycode-component [data-simply-list].simplycode-code-method:before {
         content: "Drop code blocks here.";
         font-style: italic;
       }
@@ -461,22 +461,22 @@
         cursor: move;
       }
       /* HTML validator */
-      .sb-html-valid,
-      .sb-html-invalid {
+      .simplycode-html-valid,
+      .simplycode-html-invalid {
         padding: 4px 10px;
         background-color: #D2E0E6;
         color: #2B81AF;
       }
-      .sb-html-valid {
+      .simplycode-html-valid {
         border-top: 5px solid #C6E746; /* pass color from qunit */
         border-bottom-left-radius: 8px;
         border-bottom-right-radius: 8px;
         margin-bottom: 10px;
       }
-      .sb-html-invalid {
+      .simplycode-html-invalid {
         border-top: 5px solid #EE5757; /* fail color from qunit */
       }
-      .sb-html-messages:not(.simply-empty) {
+      .simplycode-html-messages:not(.simply-empty) {
         padding: 4px 10px;
         border-bottom-left-radius: 8px;
         border-bottom-right-radius: 8px;
@@ -484,27 +484,27 @@
         background-color: #D2E0E6;
         color: #2B81AF;
       }
-      .sb-html-message:not(:last-child) {
+      .simplycode-html-message:not(:last-child) {
         border-bottom: 1px solid #2B81AF;
       }
-      .sb-html-message [data-simply-field=firstLine]:not(:empty):after {
+      .simplycode-html-message [data-simply-field=firstLine]:not(:empty):after {
         content: " - ";
       }
       /* App full preview */
-      .sb-preview-code {
+      .simplycode-preview-code {
         display: none;
       }
-      .sb-preview-data {
+      .simplycode-preview-data {
         display: none;
       }
-      .sb-preview-code [data-simply-list-item]:last-child .trailingComma {
+      .simplycode-preview-code [data-simply-list-item]:last-child .trailingComma {
         display: none;
       }
-      .sb-full-preview-container {
+      .simplycode-full-preview-container {
         height: calc(0.6 * 768px);
         width: calc(0.6 * 1280px);
       }
-      iframe.sb-full-preview {
+      iframe.simplycode-full-preview {
         width: 1280px;
         height: 768px;
         transform: scale(0.6);
@@ -513,12 +513,12 @@
         background-color: white;
       }
       :root {
-        --sb-component-preview-scale: 0.4;
+        --simplycode-component-preview-scale: 0.4;
       }
-      iframe.sb-component-preview {
-        width: calc(480px/var(--sb-component-preview-scale));
-        height: calc(300px/var(--sb-component-preview-scale));
-        transform: scale(var(--sb-component-preview-scale));
+      iframe.simplycode-component-preview {
+        width: calc(480px/var(--simplycode-component-preview-scale));
+        height: calc(300px/var(--simplycode-component-preview-scale));
+        transform: scale(var(--simplycode-component-preview-scale));
         transform-origin: top left;
         position: absolute;
         background-color: white;
@@ -527,8 +527,8 @@
     <!-- /Component CSS -->
     <!-- Page CSS -->
     <style>
-      /* sb-fullscreen-preview */
-      main.sb-fullscreen-preview iframe {
+      /* simplycode-fullscreen-preview */
+      main.simplycode-fullscreen-preview iframe {
         position: fixed;
         top: 0;
         left: 0;
@@ -538,8 +538,8 @@
         border: 0;
         z-index: 10;
       }
-      body:has(main.sb-fullscreen-preview) header, 
-      body:has(main.sb-fullscreen-preview) nav {
+      body:has(main.simplycode-fullscreen-preview) header, 
+      body:has(main.simplycode-fullscreen-preview) nav {
         display: none;
       }
     </style>
@@ -1960,27 +1960,27 @@
           /* Commands */
           commands: {
             "autoRunPreviews" : function(el) {
-              var previewRunners = document.querySelectorAll("iframe.sb-full-preview");
+              var previewRunners = document.querySelectorAll("iframe.simplycode-full-preview");
               previewRunners.forEach(function(previewRunner) {
                 previewRunner.contentWindow.document.previewRunner = previewRunner;
                 simplyApp.commands.resetPreview(previewRunner)
                   .then(function(previewRunner) {
                   previewRunner.contentWindow.document.open();
-                  previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".sb-preview-code").innerText);
+                  previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".simplycode-preview-code").innerText);
                   previewRunner.contentWindow.document.close();
                 });
               });
             
-              var previewRunners = document.querySelectorAll("iframe.sb-component-preview");
+              var previewRunners = document.querySelectorAll("iframe.simplycode-component-preview");
               previewRunners.forEach(function(previewRunner) {
                 previewRunner.contentWindow.document.previewRunner = previewRunner;
                 simplyApp.commands.resetPreview(previewRunner)
                   .then(function(previewRunner) {
                   previewRunner.contentWindow.document.open();
-                  previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".sb-preview-code").innerText);
+                  previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".simplycode-preview-code").innerText);
                   previewRunner.contentWindow.document.close();
                   previewRunner.contentWindow.addEventListener("simply-content-loaded", function() {
-                    var previewData = previewRunner.parentNode.querySelector(".sb-preview-data").innerText;
+                    var previewData = previewRunner.parentNode.querySelector(".simplycode-preview-data").innerText;
                     try {
                       previewData = JSON.parse(previewData);
                     } catch(e) {
@@ -2002,7 +2002,7 @@
               });
             },
             "autoRunTests" : function(el) {
-              var testRunners = document.querySelectorAll(".sb-component[open] iframe.qunit");
+              var testRunners = document.querySelectorAll(".simplycode-component[open] iframe.qunit");
               testRunners.forEach(function(testRunner) {
                 testRunner.contentWindow.document.testRunner = testRunner;
                 testRunner.contentWindow.document.open();
@@ -2011,7 +2011,7 @@
               });
             },
             "codeMirrorInit" : function() {
-              var textareas = document.querySelectorAll(".sb-component[open] textarea[data-codemirror-mode]:not([style])");
+              var textareas = document.querySelectorAll(".simplycode-component[open] textarea[data-codemirror-mode]:not([style])");
               textareas.forEach(function(textarea) {
                 var mode = "javascript";
                 if (textarea.hasAttribute("data-codemirror-mode")) {
@@ -2285,7 +2285,7 @@
               });
             },
             "saveAppHtml" : function() {
-              var appHtml = document.querySelector(".sb-preview-code").innerText;
+              var appHtml = document.querySelector(".simplycode-preview-code").innerText;
               appHtml = appHtml.replaceAll(/^(\n)+/g, '');
               appHtml = appHtml.replaceAll(/(\n)+/g, '\n');
               simplyApp.actions.saveAppHtml(appHtml)
@@ -2645,44 +2645,44 @@
     <!-- /Body HTML -->
     <!-- Component HTML templates -->
     <template id="componentActions">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="Actions provide the internal API for the app to use. It is called by routes and commands, and makes use of the Data API. Actions should not do any DOM access.">
         <span data-simply-field="count.actions" data-simply-content="attributes" data-simply-attributes="data-count">
           Actions
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addAction">Add action</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addAction">Add action</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.actions">
+      <div class="simplycode-code-method" data-simply-list="component.parts.actions">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="action" placeholder="Action name, eg getItemList">
-                <label class="sb-tab">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="action" placeholder="Action name, eg getItemList">
+                <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
                 </label>
-                <label class="sb-tab">
+                <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" value="tests" data-simply-field="editor">
                   <span>Tests</span>
                 </label>
               </div>
-              <div class="sb-options">
-    			<button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-deleted="false" data-simply-command="deleteEntry">Delete action</button>
+              <div class="simplycode-options">
+    			<button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-deleted="false" data-simply-command="deleteEntry">Delete action</button>
               </div>
             </div>
-            <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+            <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
               <template data-simply-template="code">
-                <div class="sb-editor-code">
+                <div class="simplycode-editor-code">
                   <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
                   <simply-render rel="componentQUnitActionRunner"></simply-render>
                 </div>
               </template>
               <template data-simply-template="tests">
-                <div class="sb-editor-code">
+                <div class="simplycode-editor-code">
                   <simply-render rel="componentQUnitTests"></simply-render>
                 </div>
               </template>
@@ -2693,29 +2693,29 @@
     </details>
     </template>
     <template id="componentBodyHtml">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="These are added to the top of the &lt;body&gt; of the HTML">
         <span data-simply-field="count.bodyHtml" data-simply-content="attributes" data-simply-attributes="data-count">
           Additional body HTML
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addBodyHtml">Add body HTML</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addBodyHtml">Add body HTML</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.bodyHtml">
+      <div class="simplycode-code-method" data-simply-list="component.parts.bodyHtml">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="name" placeholder="Name">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
               </div>
-              <div class="sb-options">
-    			<button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
+              <div class="simplycode-options">
+    			<button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
               </div>
             </div>
-            <div class="sb-editors">
-              <div class="sb-editor-code">
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-code">
                 <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>
                 <simply-render rel="componentHtmlValidator"></simply-render>
               </div>
@@ -2726,44 +2726,44 @@
     </details>
     </template>
     <template id="componentCommands">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="Commands come from user interaction on the DOM, for instance clicking a button. Commands are aware of the DOM, and use actions to execute logic.">
         <span data-simply-field="count.commands" data-simply-content="attributes" data-simply-attributes="data-count">
           Commands
         </span>
-        <span class='sb-controls'>
-          <button class="sb-button" data-simply-command="addCommand">Add command</button>
+        <span class='simplycode-controls'>
+          <button class="simplycode-button" data-simply-command="addCommand">Add command</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.commands">
+      <div class="simplycode-code-method" data-simply-list="component.parts.commands">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="command" placeholder="Command name, eg getItemList">
-                <label class="sb-tab">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="command" placeholder="Command name, eg getItemList">
+                <label class="simplycode-tab">
                   <input type="radio" name="commandEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
                 </label>
-                <label class="sb-tab">
+                <label class="simplycode-tab">
                   <input type="radio" name="commandEditor" value="tests" data-simply-field="editor">
                   <span>Tests</span>
                 </label>
               </div>
-              <div class="sb-options">
-    			<button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete command</button>
+              <div class="simplycode-options">
+    			<button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete command</button>
               </div>
             </div>
-            <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+            <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
               <template data-simply-template="code">
-                <div class="sb-editor-code">
+                <div class="simplycode-editor-code">
                   <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
                   <simply-render rel="componentQUnitCommandRunner"></simply-render>
                 </div>
               </template>
               <template data-simply-template="tests">
-                <div class="sb-editor-code">
+                <div class="simplycode-editor-code">
                   <simply-render rel="componentQUnitTests"></simply-render>
                 </div>
               </template>
@@ -2775,29 +2775,29 @@
     
     </template>
     <template id="componentComponentCss">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="Set component CSS - this CSS is globally available.">
         <span data-simply-field="count.componentCss" data-simply-content="attributes" data-simply-attributes="data-count">
           Component CSS collections
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addComponentCss">Add CSS collection</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addComponentCss">Add CSS collection</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.componentCss">
+      <div class="simplycode-code-method" data-simply-list="component.parts.componentCss">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="name" placeholder="Name this CSS collection">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="name" placeholder="Name this CSS collection">
               </div>
-              <div class="sb-options">
-    			<button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
+              <div class="simplycode-options">
+    			<button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
               </div>
             </div>
-            <div class="sb-editors">
-              <div class="sb-editor-code">
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-code">
                 <textarea data-codemirror-mode="css" data-simply-field="code" placeholder="div {...}"></textarea>
               </div>
             </div>
@@ -2807,37 +2807,37 @@
     </details>
     </template>
     <template id="componentComponentTemplate">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="These templates are used to build up page templates.">
         <span data-simply-field="count.componentTemplates" data-simply-content="attributes" data-simply-attributes="data-count">
           Component HTML template
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addComponentTemplate">Add component HTML template</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addComponentTemplate">Add component HTML template</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.componentTemplates">
+      <div class="simplycode-code-method" data-simply-list="component.parts.componentTemplates">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="component" placeholder="Component name">
-                <label class="sb-tab">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="component" placeholder="Component name">
+                <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
                 </label>
-                <label class="sb-tab">
+                <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" value="sampledata" data-simply-field="editor">
                   <span>Sample data</span>
                 </label>
               </div>
-              <div class="sb-options">
-    			<button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
+              <div class="simplycode-options">
+    			<button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
               </div>
             </div>
-            <div class="sb-editors sb-dual-preview">
-              <div class="sb-editor-code" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+            <div class="simplycode-editors simplycode-dual-preview">
+              <div class="simplycode-editor-code" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
                 <template data-simply-template="code">
                   <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<main><div>Component Html</div></main>"></textarea>
                 </template>
@@ -2845,7 +2845,7 @@
                   <textarea data-codemirror-mode="json" data-simply-field="sampledata" placeholder="{}"></textarea>
                 </template>
               </div>
-              <div class="sb-previews">
+              <div class="simplycode-previews">
                 <simply-render rel="componentPreview"></simply-render>
               </div>
             </div>
@@ -2856,29 +2856,29 @@
     </details>
     </template>
     <template id="componentDataApi">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="The Data API layer provides functions to load en store data types. Makes use of the Raw API and provides data for actions">
         <span data-simply-field="count.dataApi" data-simply-content="attributes" data-simply-attributes="data-count">
           Data API
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addDataApiMethod">Add method</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addDataApiMethod">Add method</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.dataApi">
+      <div class="simplycode-code-method" data-simply-list="component.parts.dataApi">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
               </div>
-              <div class="sb-options">
-    			<button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete method</button>
+              <div class="simplycode-options">
+    			<button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete method</button>
               </div>
             </div>
-            <div class="sb-editors">
-              <div class="sb-editor-code">
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-code">
                 <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
               </div>
             </div>
@@ -2888,72 +2888,72 @@
     </details>
     </template>
     <template id="componentDataSources">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="Data sources provide list information from an external data source. Use this to provide lists that are not part of the subject of the page. Used as data-simply-data on data-simply-lists">
         <span data-simply-field="count.dataSources" data-simply-content="attributes" data-simply-attributes="data-count">
           Data sources
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addDataSource">Add data source</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addDataSource">Add data source</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.dataSources">
+      <div class="simplycode-code-method" data-simply-list="component.parts.dataSources">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="dataSource" placeholder="Data source name, eg itemList">
-                <label class="sb-tab" title="Load code is used to fetch the data source and render it in the list. Save code is used to gather data from the data source and save it back to where it came from.">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="dataSource" placeholder="Data source name, eg itemList">
+                <label class="simplycode-tab" title="Load code is used to fetch the data source and render it in the list. Save code is used to gather data from the data source and save it back to where it came from.">
                   <input type="radio" checked name="dataSourceEditor" value="code" data-simply-field="editor">
                   <span>Load/Save</span>
                 </label>
-                <label class="sb-tab" title="Get/Set is used to populate the data-simply-list value.">
+                <label class="simplycode-tab" title="Get/Set is used to populate the data-simply-list value.">
                   <input type="radio" checked name="dataSourceEditor" value="getset" data-simply-field="editor">
                   <span>Get/Set</span>
                 </label>
-                <label class="sb-tab">
+                <label class="simplycode-tab">
                   <input type="radio" name="dataSourceEditor" value="tests" data-simply-field="editor">
                   <span>Tests</span>
                 </label>
               </div>
-              <div class="sb-options">
-    			<button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete data source</button>
+              <div class="simplycode-options">
+    			<button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete data source</button>
               </div>
             </div>
-            <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+            <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
               <template data-simply-template="code">
-                <div class="sb-editor-code sb-dual">
+                <div class="simplycode-editor-code simplycode-dual">
                   <textarea data-codemirror-mode="javascript" data-simply-field="load-code" placeholder="function() {...}"></textarea>
                   <textarea data-codemirror-mode="javascript" data-simply-field="save-code" placeholder="function() {...}"></textarea>
                 </div>
               </template>
               <template data-simply-template="getset">
-                <div class="sb-editor-code sb-dual">
+                <div class="simplycode-editor-code simplycode-dual">
                   <textarea data-codemirror-mode="javascript" data-simply-field="get-code" placeholder="function() {...}"></textarea>
                   <textarea data-codemirror-mode="javascript" data-simply-field="set-code" placeholder="function() {...}"></textarea>
                 </div>
               </template>
               <template data-simply-template="tests">
-                <div class="sb-editor-code">
+                <div class="simplycode-editor-code">
                   <simply-render rel="componentQUnitTests"></simply-render>
                 </div>
               </template>
-              <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+              <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
                 <template data-simply-template="code">
-                  <div class="sb-editor-code sb-dual">
+                  <div class="simplycode-editor-code simplycode-dual">
                     <textarea data-codemirror-mode="javascript" data-simply-field="load-code" placeholder="function() {...}"></textarea>
                     <textarea data-codemirror-mode="javascript" data-simply-field="save-code" placeholder="function() {...}"></textarea>
                   </div>
                 </template>
                 <template data-simply-template="getset">
-                  <div class="sb-editor-code sb-dual">
+                  <div class="simplycode-editor-code simplycode-dual">
                     <textarea data-codemirror-mode="javascript" data-simply-field="get-code" placeholder="function() {...}"></textarea>
                     <textarea data-codemirror-mode="javascript" data-simply-field="set-code" placeholder="function() {...}"></textarea>
                   </div>
                 </template>
                 <template data-simply-template="tests">
-                  <div class="sb-editor-code">
+                  <div class="simplycode-editor-code">
                     <simply-render rel="componentQUnitTests"></simply-render>
                   </div>
                 </template>
@@ -2965,7 +2965,7 @@
     </details>
     </template>
     <template id="componentDescription">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary title="Describe this component for your own use.">
         Description
       </summary>
@@ -2973,29 +2973,29 @@
     </details>
     </template>
     <template id="componentFootHtml">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="These templates are added just before the &lt;/body&gt; in the HTML">
         <span data-simply-field="count.footHtml" data-simply-content="attributes" data-simply-attributes="data-count">
           Additional foot HTML
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addFootHtml">Add foot HTML</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addFootHtml">Add foot HTML</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.footHtml">
+      <div class="simplycode-code-method" data-simply-list="component.parts.footHtml">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="name" placeholder="Name">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
               </div>
-              <div class="sb-options">
-    			<button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
+              <div class="simplycode-options">
+    			<button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
               </div>
             </div>
-            <div class="sb-editors">
-              <div class="sb-editor-code">
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-code">
                 <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>
                 <simply-render rel="componentHtmlValidator"></simply-render>
               </div>
@@ -3006,29 +3006,29 @@
     </details>
     </template>
     <template id="componentHeadHtml">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="These are added to the &lt;head&gt; section of the HTML">
         <span data-simply-field="count.headHtml" data-simply-content="attributes" data-simply-attributes="data-count">
           Additional head HTML
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addHeadHtml">Add head HTML</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addHeadHtml">Add head HTML</button>
         </span> 
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.headHtml">
+      <div class="simplycode-code-method" data-simply-list="component.parts.headHtml">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="name" placeholder="Name">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
               </div>
-              <div class="sb-options">
-                <button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete head HTML</button>
+              <div class="simplycode-options">
+                <button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete head HTML</button>
               </div>
             </div>
-            <div class="sb-editors">
-              <div class="sb-editor-code">
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-code">
                 <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>
                 <simply-render rel="componentHtmlValidator"></simply-render>
               </div>
@@ -3039,29 +3039,29 @@
     </details>
     </template>
     <template id="componentPageCss">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="Set page specific CSS - this CSS is only used for this page and is removed when we are on another page.">
         <span data-simply-field="count.pageCss" data-simply-content="attributes" data-simply-attributes="data-count">
           Page CSS collections
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addPageCss">Add CSS collection</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addPageCss">Add CSS collection</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.pageCss">
+      <div class="simplycode-code-method" data-simply-list="component.parts.pageCss">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="name" placeholder="Name this CSS collection">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="name" placeholder="Name this CSS collection">
               </div>
-              <div class="sb-options">
-                <button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
+              <div class="simplycode-options">
+                <button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
               </div>
             </div>
-            <div class="sb-editors">
-              <div class="sb-editor-code">
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-code">
                 <textarea data-codemirror-mode="css" data-simply-field="code" placeholder="div {...}"></textarea>
               </div>
             </div>
@@ -3071,18 +3071,18 @@
     </details>
     </template>
     <template id="componentPageFrame">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="These make up the page frame together with the Simply App parts.">
         Page frame
       </summary>
-      <div class="sb-part">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <label class="sb-tab">Full app</label>
+      <div class="simplycode-part">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <label class="simplycode-tab">Full app</label>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="htmlmixed" data-simply-field="component.parts.fullApp" placeholder="<!DOCTYPE...">
     &lt;!DOCTYPE HTML>
     &lt;html lang="en">
@@ -3091,14 +3091,14 @@
         </div>
       </div>
     
-      <div class="sb-part">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <label class="sb-tab">Page preview</label>
+      <div class="simplycode-part">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <label class="simplycode-tab">Page preview</label>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="htmlmixed" data-simply-field="component.parts.pagePreview" placeholder="<!DOCTYPE...">
     &lt;!DOCTYPE HTML>
     &lt;html lang="en">
@@ -3107,14 +3107,14 @@
         </div>
       </div>
     
-      <div class="sb-part">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <label class="sb-tab">Component preview</label>
+      <div class="simplycode-part">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <label class="simplycode-tab">Component preview</label>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="htmlmixed" data-simply-field="component.parts.componentPreview" placeholder="<!DOCTYPE...">
     &lt;!DOCTYPE HTML>
     &lt;html lang="en">
@@ -3125,37 +3125,37 @@
     </details>
     </template>
     <template id="componentPageTemplate">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="These templates are used in routes to set the HTML of the requested page.">
         <span data-simply-field="count.pageTemplates" data-simply-content="attributes" data-simply-attributes="data-count">
           Page HTML template
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addPageTemplate">Add page HTML template</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addPageTemplate">Add page HTML template</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.pageTemplates">
+      <div class="simplycode-code-method" data-simply-list="component.parts.pageTemplates">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="page" placeholder="Page name">
-                <label class="sb-tab">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="page" placeholder="Page name">
+                <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
                 </label>
-                <label class="sb-tab">
+                <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" value="sampledata" data-simply-field="editor">
                   <span>Sample data</span>
                 </label>
               </div>
-              <div class="sb-options">
-                <button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
+              <div class="simplycode-options">
+                <button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
               </div>
             </div>
-            <div class="sb-editors sb-dual">
-              <div class="sb-editor-code" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+            <div class="simplycode-editors simplycode-dual">
+              <div class="simplycode-editor-code" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
                 <template data-simply-template="code">
                   <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<main><div>Page contents</div></main>"></textarea>
                 </template>
@@ -3163,7 +3163,7 @@
                   <textarea data-codemirror-mode="json" data-simply-field="sampledata" placeholder="{}"></textarea>
                 </template>
               </div>
-              <div class="sb-previews">
+              <div class="simplycode-previews">
                 <simply-render rel="pagePreview"></simply-render>
               </div>
             </div>
@@ -3313,52 +3313,52 @@
           </div>
     </template>
     <template id="componentQUnitTests">
-      <div class="sb-editor-qunit-tests">
-      <div class="sb-tests" data-simply-list="tests">
+      <div class="simplycode-editor-qunit-tests">
+      <div class="simplycode-tests" data-simply-list="tests">
         <template>
-          <div class="sb-test" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-test-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="name" placeholder="Test name">
+          <div class="simplycode-test" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-test-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="name" placeholder="Test name">
               </div>
-              <div class="sb-options">
-                <button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete test</button>
+              <div class="simplycode-options">
+                <button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete test</button>
               </div>
             </div>
-            <div class="sb-test-editor">
+            <div class="simplycode-test-editor">
               <textarea data-codemirror-mode="javascript" data-simply-field="test-code" placeholder="function() {...}"></textarea>
             </div>
           </div>
         </template>
       </div>
-      <button class="sb-button" data-simply-command="addTest">Add test</button>
+      <button class="simplycode-button" data-simply-command="addTest">Add test</button>
     </div>
     </template>
     <template id="componentRawApi">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="The Raw API layer provides lower level functions to access an API. It handles things like authentication, connection, encoding and the likes. It exposes 'get', 'post' methods.">
         <span data-simply-field="count.rawApi" data-simply-content="attributes" data-simply-attributes="data-count">
           Raw API
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addRawApiMethod">Add method</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addRawApiMethod">Add method</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.rawApi">
+      <div class="simplycode-code-method" data-simply-list="component.parts.rawApi">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
               </div>
-              <div class="sb-options">
-                <button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete method</button>
+              <div class="simplycode-options">
+                <button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete method</button>
               </div>
             </div>
-            <div class="sb-editors">
-              <div class="sb-editor-code">
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-code">
                 <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
               </div>
             </div>
@@ -3368,30 +3368,30 @@
     </details>
     </template>
     <template id="componentRoutes">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="Routes provide a translation from a URL to something the app should do. Routes make use of actions to fetch or store data">
         <span data-simply-field="count.routes" data-simply-content="attributes" data-simply-attributes="data-count">
           Routes
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addRoute">Add route</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addRoute">Add route</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.routes">
+      <div class="simplycode-code-method" data-simply-list="component.parts.routes">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="name" placeholder="Name of the route">
-                <input class="sb-tab" data-simply-field="route" placeholder="#route/:variable">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="name" placeholder="Name of the route">
+                <input class="simplycode-tab" data-simply-field="route" placeholder="#route/:variable">
               </div>
-              <div class="sb-options">
-                <button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete route</button>
+              <div class="simplycode-options">
+                <button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete route</button>
               </div>
             </div>
-            <div class="sb-editors">
-              <div class="sb-editor-code">
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-code">
                 <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
               </div>
             </div>
@@ -3401,29 +3401,29 @@
     </details>
     </template>
     <template id="componentSorters">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="Sorters are utility function that are used to sort arrays, used in datasources, actions.">
         <span data-simply-field="count.sorters" data-simply-content="attributes" data-simply-attributes="data-count">
           Sorters
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addSorter">Add sorter</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addSorter">Add sorter</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.sorters">
+      <div class="simplycode-code-method" data-simply-list="component.parts.sorters">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="sorter" placeholder="Sorter name, eg sortByDescription">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="sorter" placeholder="Sorter name, eg sortByDescription">
               </div>
-              <div class="sb-options">
-                <button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete sorter</button>
+              <div class="simplycode-options">
+                <button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete sorter</button>
               </div>
             </div>
-            <div class="sb-editors">
-              <div class="sb-editor-code">
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-code">
                 <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
               </div>
             </div>
@@ -3433,44 +3433,44 @@
     </details>
     </template>
     <template id="componentTransformers">
-      <details class="sb-component">
+      <details class="simplycode-component">
       <summary data-simply-command="initEditors" title="Transformers provide a last moment change to data, just before it is rendered. Use as a value of data-simply-transform on a data-simply-field">
         <span data-simply-field="count.transformers" data-simply-content="attributes" data-simply-attributes="data-count">
           Transformers
         </span>
-        <span class="sb-controls">
-          <button class="sb-button" data-simply-command="addTransformer">Add transformer</button>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addTransformer">Add transformer</button>
         </span>
       </summary>
-      <div class="sb-code-method" data-simply-list="component.parts.transformers">
+      <div class="simplycode-code-method" data-simply-list="component.parts.transformers">
         <template>
-          <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-            <div class="sb-part-header">
-              <div class="sb-tabs">
-                <input class="sb-tab" data-simply-field="transformer" placeholder="Transformer name, eg itemNameFromId">
-                <label class="sb-tab" title="Render code transforms the data from what is stored into what the user sees. Extract takes the data as provided from the DOM and transforms it for storage">
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="transformer" placeholder="Transformer name, eg itemNameFromId">
+                <label class="simplycode-tab" title="Render code transforms the data from what is stored into what the user sees. Extract takes the data as provided from the DOM and transforms it for storage">
                   <input type="radio" checked name="transformerEditor" value="code" data-simply-field="editor">
                   <span>Render/Extract</span>
                 </label>
-                <label class="sb-tab">
+                <label class="simplycode-tab">
                   <input type="radio" name="transformerEditor" value="tests" data-simply-field="editor">
                   <span>Tests</span>
                 </label>
               </div>
-              <div class="sb-options">
-                <button class="sb-button" draggable="true">Drag to move</button>
-                <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete transformer</button>
+              <div class="simplycode-options">
+                <button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete transformer</button>
               </div>
             </div>
-            <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+            <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
               <template data-simply-template="code">
-                <div class="sb-editor-code sb-dual">
+                <div class="simplycode-editor-code simplycode-dual">
                   <textarea data-codemirror-mode="javascript" data-simply-field="render-code" placeholder="function() {...}"></textarea>
                   <textarea data-codemirror-mode="javascript" data-simply-field="extract-code" placeholder="function() {...}"></textarea>
                 </div>
               </template>
               <template data-simply-template="tests">
-                <div class="sb-editor-code">
+                <div class="simplycode-editor-code">
                   <simply-render rel="componentQUnitTests"></simply-render>
                 </div>
               </template>
@@ -3482,15 +3482,15 @@
     </template>
     <template id="header">
       <h1>Simply Code - Build something awesome!</h1>
-    <div class="sb-controls">
-      <a href="#publish" class="sb-button">Preview and publish!</a>
+    <div class="simplycode-controls">
+      <a href="#publish" class="simplycode-button">Preview and publish!</a>
     </div>
     </template>
     <template id="componentHtmlValidator">
       <div data-simply-field="code" data-simply-transformer="validateHtml"></div>
-    <div class="sb-html-messages" data-simply-list="validateResult.messages">
+    <div class="simplycode-html-messages" data-simply-list="validateResult.messages">
       <template>
-        <div class="sb-html-message">
+        <div class="simplycode-html-message">
           <span data-simply-field="message"></span><br>
           <span data-simply-field="extract" data-simply-transformer="escapeHtml"></span> on line <span data-simply-field="firstLine"></span> <span data-simply-field="lastLine"></span>
         </div>
@@ -3508,14 +3508,14 @@ <h1>Simply Code - Build something awesome!</h1>
     </ul>
     </template>
     <template id="componentPreview">
-      <div class="sb-component-preview-container">
-      <iframe class="sb-component-preview"></iframe>
-      <div class="sb-preview-code">
+      <div class="simplycode-component-preview-container">
+      <iframe class="simplycode-component-preview"></iframe>
+      <div class="simplycode-preview-code">
         <pre>
           <span data-simply-field="code" data-simply-transformer="simplyPreviewComponent"></span>
     </pre>
       </div>
-      <div class="sb-preview-data">
+      <div class="simplycode-preview-data">
         <pre>
           <span data-simply-field="sampledata" data-simply-transformer="htmlEscape" data-indent=4></span>
     </pre>
@@ -3523,20 +3523,20 @@ <h1>Simply Code - Build something awesome!</h1>
     </div>
     </template>
     <template id="fullAppPreview">
-      <div class="sb-full-preview-container">
-      <iframe class="sb-full-preview"></iframe>
-      <div class="sb-preview-code" data-simply-field="app" data-simply-transformer="simplyPreviewFullApp"></div>
+      <div class="simplycode-full-preview-container">
+      <iframe class="simplycode-full-preview"></iframe>
+      <div class="simplycode-preview-code" data-simply-field="app" data-simply-transformer="simplyPreviewFullApp"></div>
     </div>
     </template>
     <template id="pagePreview">
-      <div class="sb-component-preview-container">
-      <iframe class="sb-component-preview"></iframe>
-      <div class="sb-preview-code">
+      <div class="simplycode-component-preview-container">
+      <iframe class="simplycode-component-preview"></iframe>
+      <div class="simplycode-preview-code">
         <pre>
           <span data-simply-field="code" data-simply-transformer="simplyPreviewPage"></span>
     </pre>
       </div>
-      <div class="sb-preview-data">
+      <div class="simplycode-preview-data">
         <pre>
           <span data-simply-field="sampledata" data-simply-transformer="htmlEscape" data-indent=4></span>
     </pre>
@@ -3554,11 +3554,11 @@ <h1>Simply Code - Build something awesome!</h1>
     <!-- Page HTML templates -->
     <template data-simply-template="Edit base component">
       <main>
-      <div class="sb-header">
+      <div class="simplycode-header">
         <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
-        <div class="sb-controls">
-          <button class="sb-button" data-simply-command="saveBaseComponent">Save</button>
-          <button class="sb-button" data-simply-command="deleteBaseComponent">Delete</button>
+        <div class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="saveBaseComponent">Save</button>
+          <button class="simplycode-button" data-simply-command="deleteBaseComponent">Delete</button>
         </div>
       </div>
       <simply-render rel="componentDescription"></simply-render>
@@ -3574,7 +3574,7 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
     <template data-simply-template="Base components">
       <main>
       <h1>Base components</h1>
-      <ul class="sb-components-list" data-simply-list="components">
+      <ul class="simplycode-components-list" data-simply-list="components">
         <template>
           <li data-simply-command="navigate">
             <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink"><span data-simply-field="id"></span></a>
@@ -3583,17 +3583,17 @@ <h1>Base components</h1>
         </template>
       </ul>
       <h1>Add base component</h1>
-      <div class="sb-part">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input data-simply-field="newComponent.id" class="sb-tab" placeholder="Name your component">
+      <div class="simplycode-part">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
           </div>
-          <div class="sb-options">
-            <button class="sb-button" data-simply-command="createBaseComponent">Create</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" data-simply-command="createBaseComponent">Create</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
           </div>
         </div>
@@ -3602,11 +3602,11 @@ <h1>Add base component</h1>
     </template>
     <template data-simply-template="Edit component">
       <main>
-      <div class="sb-header">
+      <div class="simplycode-header">
         <h1>Edit component: <span data-simply-field="component.id"></span></h1>
-        <div class="sb-controls">
-          <button class="sb-button" data-simply-command="saveComponent">Save</button>
-          <button class="sb-button" data-simply-command="deleteComponent">Delete</button>
+        <div class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="saveComponent">Save</button>
+          <button class="simplycode-button" data-simply-command="deleteComponent">Delete</button>
         </div>
       </div>
       <simply-render rel="componentDescription"></simply-render>
@@ -3624,7 +3624,7 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
     <template data-simply-template="List components">
       <main>
       <h1>Components</h1>
-      <ul class="sb-components-list" data-simply-list="components">
+      <ul class="simplycode-components-list" data-simply-list="components">
         <template>
           <li data-simply-command="navigate">
             <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink"><span data-simply-field="id"></span></a>
@@ -3633,17 +3633,17 @@ <h1>Components</h1>
         </template>
       </ul>
       <h1>Add component</h1>
-      <div class="sb-part">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input data-simply-field="newComponent.id" class="sb-tab" placeholder="Name your component">
+      <div class="simplycode-part">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
           </div>
-          <div class="sb-options">
-            <button class="sb-button" data-simply-command="createComponent">Create</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" data-simply-command="createComponent">Create</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
           </div>
         </div>
@@ -3653,11 +3653,11 @@ <h1>Add component</h1>
     </template>
     <template data-simply-template="Edit page">
       <main>
-      <div class="sb-header">
+      <div class="simplycode-header">
         <h1>Edit page: <span data-simply-field="component.id"></span></h1>
-        <div class="sb-controls">
-          <button class="sb-button" data-simply-command="savePage">Save</button>
-          <button class="sb-button" data-simply-command="deletePage">Delete</button>
+        <div class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="savePage">Save</button>
+          <button class="simplycode-button" data-simply-command="deletePage">Delete</button>
         </div>
       </div>
       <simply-render rel="componentDescription"></simply-render>
@@ -3674,10 +3674,10 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
     </template>
     <template data-simply-template="Edit page frame">
       <main>
-      <div class="sb-header">
+      <div class="simplycode-header">
         <h1>Edit page frame</h1>
-        <div class="sb-controls">
-          <button class="sb-button" data-simply-command="savePageFrame">Save</button>
+        <div class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="savePageFrame">Save</button>
         </div>
       </div>
       <simply-render rel="componentDescription"></simply-render>
@@ -3687,7 +3687,7 @@ <h1>Edit page frame</h1>
     <template data-simply-template="Pages">
       <main>
       <h1>Pages</h1>
-      <ul class="sb-components-list" data-simply-list="components">
+      <ul class="simplycode-components-list" data-simply-list="components">
         <template>
           <li data-simply-command="navigate">
             <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink"><span data-simply-field="id"></span></a>
@@ -3696,17 +3696,17 @@ <h1>Pages</h1>
         </template>
       </ul>
       <h1>Add page</h1>
-      <div class="sb-part">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input data-simply-field="newComponent.id" class="sb-tab" placeholder="Name your component">
+      <div class="simplycode-part">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
           </div>
-          <div class="sb-options">
-            <button class="sb-button" data-simply-command="createPage">Create</button>
+          <div class="simplycode-options">
+            <button class="simplycode-button" data-simply-command="createPage">Create</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
           </div>
         </div>
@@ -3715,12 +3715,12 @@ <h1>Add page</h1>
     
     </template>
     <template data-simply-template="preview-app">
-      <main class="sb-fullscreen-preview">
+      <main class="simplycode-fullscreen-preview">
       <simply-render rel="componentAppFullPreview"></simply-render>
     </main>
     </template>
     <template data-simply-template="preview-component">
-      <main class="sb-fullscreen-preview">
+      <main class="simplycode-fullscreen-preview">
       <simply-render rel="componentPreview"></simply-render>
       <simply-render rel="componentPreviewAppHead"></simply-render>
       <simply-render rel="componentPreviewAppFoot"></simply-render>
@@ -3730,7 +3730,7 @@ <h1>Add page</h1>
       <main>
       <h1>App preview</h1>
       <div class="field">
-        <button class="sb-button" data-simply-command="saveAppHtml">Publish App</button>
+        <button class="simplycode-button" data-simply-command="saveAppHtml">Publish App</button>
       </div>
       <simply-render rel="fullAppPreview"></simply-render>
     </main>
@@ -3765,11 +3765,11 @@ <h1>App preview</h1>
                 .then(function(validateResult) {
                 element.dataBinding.config.data.validateResult = validateResult;
                 if(validateResult.messages.length) {
-                  element.className = "sb-html-invalid";
+                  element.className = "simplycode-html-invalid";
                   element.innerHTML = "HTML validation failed:";
                 } else {
                   element.innerHTML = "HTML validated!";
-                  element.className = "sb-html-valid";
+                  element.className = "simplycode-html-valid";
                 }
               });
             }, 1000);
diff --git a/www/api/data/pages/base-component/pageTemplates/Edit base component.html b/www/api/data/pages/base-component/pageTemplates/Edit base component.html
index d8f052d..6652f38 100644
--- a/www/api/data/pages/base-component/pageTemplates/Edit base component.html	
+++ b/www/api/data/pages/base-component/pageTemplates/Edit base component.html	
@@ -1,9 +1,9 @@
 <main>
-  <div class="sb-header">
+  <div class="simplycode-header">
     <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
-    <div class="sb-controls">
-      <button class="sb-button" data-simply-command="saveBaseComponent">Save</button>
-      <button class="sb-button" data-simply-command="deleteBaseComponent">Delete</button>
+    <div class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="saveBaseComponent">Save</button>
+      <button class="simplycode-button" data-simply-command="deleteBaseComponent">Delete</button>
     </div>
   </div>
   <simply-render rel="componentDescription"></simply-render>
diff --git a/www/api/data/pages/base-components/pageTemplates/Base components.html b/www/api/data/pages/base-components/pageTemplates/Base components.html
index 17af51b..7c78448 100644
--- a/www/api/data/pages/base-components/pageTemplates/Base components.html	
+++ b/www/api/data/pages/base-components/pageTemplates/Base components.html	
@@ -1,6 +1,6 @@
 <main>
   <h1>Base components</h1>
-  <ul class="sb-components-list" data-simply-list="components">
+  <ul class="simplycode-components-list" data-simply-list="components">
     <template>
       <li data-simply-command="navigate">
         <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink"><span data-simply-field="id"></span></a>
@@ -9,17 +9,17 @@ <h1>Base components</h1>
     </template>
   </ul>
   <h1>Add base component</h1>
-  <div class="sb-part">
-    <div class="sb-part-header">
-      <div class="sb-tabs">
-        <input data-simply-field="newComponent.id" class="sb-tab" placeholder="Name your component">
+  <div class="simplycode-part">
+    <div class="simplycode-part-header">
+      <div class="simplycode-tabs">
+        <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
       </div>
-      <div class="sb-options">
-        <button class="sb-button" data-simply-command="createBaseComponent">Create</button>
+      <div class="simplycode-options">
+        <button class="simplycode-button" data-simply-command="createBaseComponent">Create</button>
       </div>
     </div>
-    <div class="sb-editors">
-      <div class="sb-editor-code">
+    <div class="simplycode-editors">
+      <div class="simplycode-editor-code">
         <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
       </div>
     </div>
diff --git a/www/api/data/pages/component-list/pageTemplates/List components.html b/www/api/data/pages/component-list/pageTemplates/List components.html
index ad6729d..77587f2 100644
--- a/www/api/data/pages/component-list/pageTemplates/List components.html	
+++ b/www/api/data/pages/component-list/pageTemplates/List components.html	
@@ -1,6 +1,6 @@
 <main>
   <h1>Components</h1>
-  <ul class="sb-components-list" data-simply-list="components">
+  <ul class="simplycode-components-list" data-simply-list="components">
     <template>
       <li data-simply-command="navigate">
         <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink"><span data-simply-field="id"></span></a>
@@ -9,17 +9,17 @@ <h1>Components</h1>
     </template>
   </ul>
   <h1>Add component</h1>
-  <div class="sb-part">
-    <div class="sb-part-header">
-      <div class="sb-tabs">
-        <input data-simply-field="newComponent.id" class="sb-tab" placeholder="Name your component">
+  <div class="simplycode-part">
+    <div class="simplycode-part-header">
+      <div class="simplycode-tabs">
+        <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
       </div>
-      <div class="sb-options">
-        <button class="sb-button" data-simply-command="createComponent">Create</button>
+      <div class="simplycode-options">
+        <button class="simplycode-button" data-simply-command="createComponent">Create</button>
       </div>
     </div>
-    <div class="sb-editors">
-      <div class="sb-editor-code">
+    <div class="simplycode-editors">
+      <div class="simplycode-editor-code">
         <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
       </div>
     </div>
diff --git a/www/api/data/pages/component/pageTemplates/Edit component.html b/www/api/data/pages/component/pageTemplates/Edit component.html
index fdd3f84..884e25b 100644
--- a/www/api/data/pages/component/pageTemplates/Edit component.html	
+++ b/www/api/data/pages/component/pageTemplates/Edit component.html	
@@ -1,9 +1,9 @@
 <main>
-  <div class="sb-header">
+  <div class="simplycode-header">
     <h1>Edit component: <span data-simply-field="component.id"></span></h1>
-    <div class="sb-controls">
-      <button class="sb-button" data-simply-command="saveComponent">Save</button>
-      <button class="sb-button" data-simply-command="deleteComponent">Delete</button>
+    <div class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="saveComponent">Save</button>
+      <button class="simplycode-button" data-simply-command="deleteComponent">Delete</button>
     </div>
   </div>
   <simply-render rel="componentDescription"></simply-render>
diff --git a/www/api/data/pages/page-frame/pageTemplates/Edit page frame.html b/www/api/data/pages/page-frame/pageTemplates/Edit page frame.html
index b01f4f9..2cd346d 100644
--- a/www/api/data/pages/page-frame/pageTemplates/Edit page frame.html	
+++ b/www/api/data/pages/page-frame/pageTemplates/Edit page frame.html	
@@ -1,8 +1,8 @@
 <main>
-  <div class="sb-header">
+  <div class="simplycode-header">
     <h1>Edit page frame</h1>
-    <div class="sb-controls">
-      <button class="sb-button" data-simply-command="savePageFrame">Save</button>
+    <div class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="savePageFrame">Save</button>
     </div>
   </div>
   <simply-render rel="componentDescription"></simply-render>
diff --git a/www/api/data/pages/page/pageTemplates/Edit page.html b/www/api/data/pages/page/pageTemplates/Edit page.html
index 46052b5..b49e5f3 100644
--- a/www/api/data/pages/page/pageTemplates/Edit page.html	
+++ b/www/api/data/pages/page/pageTemplates/Edit page.html	
@@ -1,9 +1,9 @@
 <main>
-  <div class="sb-header">
+  <div class="simplycode-header">
     <h1>Edit page: <span data-simply-field="component.id"></span></h1>
-    <div class="sb-controls">
-      <button class="sb-button" data-simply-command="savePage">Save</button>
-      <button class="sb-button" data-simply-command="deletePage">Delete</button>
+    <div class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="savePage">Save</button>
+      <button class="simplycode-button" data-simply-command="deletePage">Delete</button>
     </div>
   </div>
   <simply-render rel="componentDescription"></simply-render>
diff --git a/www/api/data/pages/pages/pageTemplates/Pages.html b/www/api/data/pages/pages/pageTemplates/Pages.html
index a949453..18e9694 100644
--- a/www/api/data/pages/pages/pageTemplates/Pages.html
+++ b/www/api/data/pages/pages/pageTemplates/Pages.html
@@ -1,6 +1,6 @@
 <main>
   <h1>Pages</h1>
-  <ul class="sb-components-list" data-simply-list="components">
+  <ul class="simplycode-components-list" data-simply-list="components">
     <template>
       <li data-simply-command="navigate">
         <a href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink"><span data-simply-field="id"></span></a>
@@ -9,17 +9,17 @@ <h1>Pages</h1>
     </template>
   </ul>
   <h1>Add page</h1>
-  <div class="sb-part">
-    <div class="sb-part-header">
-      <div class="sb-tabs">
-        <input data-simply-field="newComponent.id" class="sb-tab" placeholder="Name your component">
+  <div class="simplycode-part">
+    <div class="simplycode-part-header">
+      <div class="simplycode-tabs">
+        <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
       </div>
-      <div class="sb-options">
-        <button class="sb-button" data-simply-command="createPage">Create</button>
+      <div class="simplycode-options">
+        <button class="simplycode-button" data-simply-command="createPage">Create</button>
       </div>
     </div>
-    <div class="sb-editors">
-      <div class="sb-editor-code">
+    <div class="simplycode-editors">
+      <div class="simplycode-editor-code">
         <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
       </div>
     </div>
diff --git a/www/api/data/pages/preview/pageCss/sb-fullscreen-preview.css b/www/api/data/pages/preview/pageCss/sb-fullscreen-preview.css
deleted file mode 100644
index cbe04b7..0000000
--- a/www/api/data/pages/preview/pageCss/sb-fullscreen-preview.css
+++ /dev/null
@@ -1,14 +0,0 @@
-main.sb-fullscreen-preview iframe {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-  transform: none;
-  border: 0;
-  z-index: 10;
-}
-body:has(main.sb-fullscreen-preview) header, 
-body:has(main.sb-fullscreen-preview) nav {
-  display: none;
-}
\ No newline at end of file
diff --git a/www/api/data/pages/preview/pageCss/simplycode-fullscreen-preview.css b/www/api/data/pages/preview/pageCss/simplycode-fullscreen-preview.css
new file mode 100644
index 0000000..c19b914
--- /dev/null
+++ b/www/api/data/pages/preview/pageCss/simplycode-fullscreen-preview.css
@@ -0,0 +1,14 @@
+main.simplycode-fullscreen-preview iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  transform: none;
+  border: 0;
+  z-index: 10;
+}
+body:has(main.simplycode-fullscreen-preview) header, 
+body:has(main.simplycode-fullscreen-preview) nav {
+  display: none;
+}
\ No newline at end of file
diff --git a/www/api/data/pages/preview/pageTemplates/preview-app.html b/www/api/data/pages/preview/pageTemplates/preview-app.html
index 35740a9..fdd4e7b 100644
--- a/www/api/data/pages/preview/pageTemplates/preview-app.html
+++ b/www/api/data/pages/preview/pageTemplates/preview-app.html
@@ -1,3 +1,3 @@
-<main class="sb-fullscreen-preview">
+<main class="simplycode-fullscreen-preview">
   <simply-render rel="componentAppFullPreview"></simply-render>
 </main>
\ No newline at end of file
diff --git a/www/api/data/pages/preview/pageTemplates/preview-component.html b/www/api/data/pages/preview/pageTemplates/preview-component.html
index 199e776..e46865d 100644
--- a/www/api/data/pages/preview/pageTemplates/preview-component.html
+++ b/www/api/data/pages/preview/pageTemplates/preview-component.html
@@ -1,4 +1,4 @@
-<main class="sb-fullscreen-preview">
+<main class="simplycode-fullscreen-preview">
   <simply-render rel="componentPreview"></simply-render>
   <simply-render rel="componentPreviewAppHead"></simply-render>
   <simply-render rel="componentPreviewAppFoot"></simply-render>
diff --git a/www/api/data/pages/publish/commands/saveAppHtml.js b/www/api/data/pages/publish/commands/saveAppHtml.js
index f2bacc4..c8aa87d 100644
--- a/www/api/data/pages/publish/commands/saveAppHtml.js
+++ b/www/api/data/pages/publish/commands/saveAppHtml.js
@@ -1,5 +1,5 @@
 function() {
-  var appHtml = document.querySelector(".sb-preview-code").innerText;
+  var appHtml = document.querySelector(".simplycode-preview-code").innerText;
   appHtml = appHtml.replaceAll(/^(\n)+/g, '');
   appHtml = appHtml.replaceAll(/(\n)+/g, '\n');
   simplyApp.actions.saveAppHtml(appHtml)
diff --git a/www/api/data/pages/publish/pageTemplates/Publish App.html b/www/api/data/pages/publish/pageTemplates/Publish App.html
index bddc24c..754613f 100644
--- a/www/api/data/pages/publish/pageTemplates/Publish App.html	
+++ b/www/api/data/pages/publish/pageTemplates/Publish App.html	
@@ -1,7 +1,7 @@
 <main>
   <h1>App preview</h1>
   <div class="field">
-    <button class="sb-button" data-simply-command="saveAppHtml">Publish App</button>
+    <button class="simplycode-button" data-simply-command="saveAppHtml">Publish App</button>
   </div>
   <simply-render rel="fullAppPreview"></simply-render>
 </main>
\ No newline at end of file