diff --git a/src/ttfrog/themes/default/page.html b/src/ttfrog/themes/default/page.html
index 0945637..4b50d45 100644
--- a/src/ttfrog/themes/default/page.html
+++ b/src/ttfrog/themes/default/page.html
@@ -4,7 +4,7 @@
 {% endblock %}
 
 {% block content %}
-<div id='content'>{{ page.body }}</div>
+<div id='froghat'>{{ page.body }}</div>
 {% endblock %}
 
 
@@ -13,14 +13,14 @@
     <!-- for converting markdown to html -->
     <script src="{{ url_for('static', filename='editor/purify.min.js' ) }}"></script>
     <script src="{{ url_for('static', filename='editor/marked.umd.min.js' ) }}"></script>
-    <script src="{{ url_for('static', filename='editor/grung.js' ) }}"></script>
+    <script src="{{ url_for('static', filename='editor/froghat.js' ) }}"></script>
     {% if user.can_write(page) %}
         <script src="{{ url_for('static', filename='editor/turndown.js' ) }}"></script>
         <script src="{{ url_for('static', filename='editor/joplin-turndown-plugin-gfm.js' ) }}"></script>
-        <script src="{{ url_for('static', filename='editor/grung-editor.js' ) }}"></script>
+        <script src="{{ url_for('static', filename='editor/froghat-editor.js' ) }}"></script>
     {% endif %}
     <script>
-        const wiki = new Grung{% if user.can_write(page) %}Editor{% endif %}({plugins: [MacroPlugin]});
+        const wiki = new Froghat{% if user.can_write(page) %}Editor{% endif %}({plugins: [MacroPlugin, WidgetPlugin]});
         wiki.view();
     </script>
 {% endblock %}
diff --git a/src/ttfrog/themes/default/static/editor/grung-editor.js b/src/ttfrog/themes/default/static/editor/froghat-editor.js
similarity index 98%
rename from src/ttfrog/themes/default/static/editor/grung-editor.js
rename to src/ttfrog/themes/default/static/editor/froghat-editor.js
index 4b4d89e..840d078 100644
--- a/src/ttfrog/themes/default/static/editor/grung-editor.js
+++ b/src/ttfrog/themes/default/static/editor/froghat-editor.js
@@ -1,4 +1,4 @@
-class GrungEditor extends Grung {
+class FroghatEditor extends Froghat {
 
     constructor(settings) {
         /*
diff --git a/src/ttfrog/themes/default/static/editor/grung.js b/src/ttfrog/themes/default/static/editor/froghat.js
similarity index 87%
rename from src/ttfrog/themes/default/static/editor/grung.js
rename to src/ttfrog/themes/default/static/editor/froghat.js
index 504ac29..2358686 100644
--- a/src/ttfrog/themes/default/static/editor/grung.js
+++ b/src/ttfrog/themes/default/static/editor/froghat.js
@@ -1,9 +1,9 @@
-class Grung {
+class Froghat {
     constructor(settings) {
         /*
          * Create a new Editor instance.
          */
-        this.element = document.getElementById(settings.editorId || 'content');
+        this.element = document.getElementById(settings.editorId || 'froghat');
         this.source = this.element.textContent;
 
         this.marked = marked;
@@ -91,7 +91,7 @@ class Grung {
 
 }
 
-class GrungPlugin {
+class FroghatPlugin {
 
     constructor(settings) {
         this.name = settings.name;
@@ -112,7 +112,73 @@ class GrungPlugin {
 };
 
 
-class MacroPlugin extends GrungPlugin {
+class WidgetPlugin extends FroghatPlugin {
+
+    setEditable() {
+    };
+
+    toMarkdown(html) {
+        return html;
+    };
+
+    toHTML(md) {
+        return md;
+    };
+
+    parseWidgetSource(html) {
+
+        function block(prefix) {
+            return RegExp('##\\s*' + prefix + '.*?```\\w*(.+?)```', 'gims');
+        };
+
+        const template  = block("Template").exec(html)[1];
+        const css       = block("CSS").exec(html)[1];
+        const processor = block("Processor").exec(html)[1];
+
+        var func;
+        eval("func = " + processor);
+
+        return {
+            template: template,
+            css: css,
+            processor: func
+        };
+    }
+
+    async processWidgets(html, callback) {
+
+        var widgetPattern = /({{(.+)}})/gm;
+
+        if (!html.match(widgetPattern)) {
+            callback();
+            return;
+        }
+
+        html.matchAll(widgetPattern).forEach(match => {
+            var widgetTag = match[1];
+            var widgetName = match[2];
+            if (Object.values(WIDGETS).indexOf(widgetName) == -1) {
+                APIv1.search("Widget", widgetName, (res) => {
+                    if (res.code == 200) {
+                        var parts = parseWidgetSource(res.response[0].body);
+                        WIDGETS[widgetName] = parts.processor;
+                        contents = WIDGETS[widgetName](widgetTag, parts.template, parts.css);
+                    } else {
+                        contents = `Invalid widget: ${widgetName}`;
+                    }
+                    var rep = `<span class="widget-${widgetName}" data-source="${widgetTag}">${contents}</span>`;
+                    html = html.replaceAll(widgetTag, rep);
+                    if (parts) {
+                        html = `<style type='text/css'>${parts.css}</style>${html}`;
+                    }
+                    callback(html);
+                });
+            }
+        });
+    };
+}
+
+class MacroPlugin extends FroghatPlugin {
 
     macros = {
         // image: {}
diff --git a/src/ttfrog/themes/default/static/site.css b/src/ttfrog/themes/default/static/site.css
index ebb0cca..da9a44a 100644
--- a/src/ttfrog/themes/default/static/site.css
+++ b/src/ttfrog/themes/default/static/site.css
@@ -328,27 +328,27 @@ div[data-macro-name="toc"] a:hover {
 }
 
 
-#content {
+#froghat {
     display: none;
 }
 
-#content.loaded {
+#froghat.loaded {
     display: block;
 }
-#content.wysiwyg {
+#froghat.wysiwyg {
     display: none,
 }
-#content.view {
+#froghat.view {
 }
 
-#content.edit {
+#froghat.edit {
     font-family: monospace;
     white-space: pre;
 }
 
-#content.wysiwyg {
+#froghat.wysiwyg {
 }
 
-#content.wysiwyg .md {
+#froghat.wysiwyg .md {
     opacity: 0.5;
 }
diff --git a/src/ttfrog/themes/default/static/site.js b/src/ttfrog/themes/default/static/site.js
index 5184b9f..c6c3920 100644
--- a/src/ttfrog/themes/default/static/site.js
+++ b/src/ttfrog/themes/default/static/site.js
@@ -56,57 +56,3 @@ APIv1 = {
         })();
     },
 };
-
-const WIDGETS = {};
-
-function parseWidgetSource(html) {
-
-    function block(prefix) {
-        return RegExp('##\\s*' + prefix + '.*?```\\w*(.+?)```', 'gims');
-    };
-
-    const template  = block("Template").exec(html)[1];
-    const css       = block("CSS").exec(html)[1];
-    const processor = block("Processor").exec(html)[1];
-
-    var func;
-    eval("func = " + processor);
-
-    return {
-        template: template,
-        css: css,
-        processor: func
-    };
-}
-
-async function processWidgets(html, callback) {
-
-    var widgetPattern = /({{(.+)}})/gm;
-
-    if (!html.match(widgetPattern)) {
-        callback();
-        return;
-    }
-
-    html.matchAll(widgetPattern).forEach(match => {
-        var widgetTag = match[1];
-        var widgetName = match[2];
-        if (Object.values(WIDGETS).indexOf(widgetName) == -1) {
-            APIv1.search("Widget", widgetName, (res) => {
-                if (res.code == 200) {
-                    var parts = parseWidgetSource(res.response[0].body);
-                    WIDGETS[widgetName] = parts.processor;
-                    contents = WIDGETS[widgetName](widgetTag, parts.template, parts.css);
-                } else {
-                    contents = `Invalid widget: ${widgetName}`;
-                }
-                var rep = `<span class="widget-${widgetName}" data-source="${widgetTag}">${contents}</span>`;
-                html = html.replaceAll(widgetTag, rep);
-                if (parts) {
-                    html = `<style type='text/css'>${parts.css}</style>${html}`;
-                }
-                callback(html);
-            });
-        }
-    });
-};