diff --git a/layouts/shortcodes/bergamot_js_css.html b/layouts/shortcodes/bergamot_js_css.html
index affd6c8..4509d1e 100644
--- a/layouts/shortcodes/bergamot_js_css.html
+++ b/layouts/shortcodes/bergamot_js_css.html
@@ -3,7 +3,105 @@
 {{ $style := resources.Get "scss/bergamot.scss" | resources.ToCSS | resources.Minify }}
 <link rel="stylesheet" href="{{ $style.Permalink }}">
 <script defer>
-const renderRules =
+const loadedWidgets = {};
+const getButtons = (inputGroup) => {
+    return {
+        play: inputGroup.querySelector(".bergamot-play"),
+        reset: inputGroup.querySelector(".bergamot-reset"),
+        close: inputGroup.querySelector(".bergamot-close"),
+    }
+}
+const setRunning = (inputGroup, running) => {
+    if (inputGroup !== null) {
+        const buttons = getButtons(inputGroup);
+        if (buttons.play) buttons.play.classList.toggle("bergamot-hidden", running);
+        if (buttons.reset) buttons.reset.classList.toggle("bergamot-hidden", !running);
+        if (buttons.close) buttons.close.classList.toggle("bergamot-hidden", !running);
+    }
+}
+
+// The object language parsing is handling by a separate standalone Elm
+// application in the ObjectLanguage module, which has two ports:
+//
+// * `parseString` requests a string to be parsed
+// * `parsedString` returns the parsed string, or null
+//
+// We want there to be a single global ObjectLanguage object, but it works
+// on a "subscription" model (we have to give a callback to its port).
+// Configure this callback to invoke `resolve` functions from a list,
+// so that callers can just get a promise. This way we aren't continuously
+// registering more and more handlers for each parsed string, and we can
+// use a convenient promise API.
+const parsingPromiseResolvers = {};
+const ensureObjectLanguage = () => {
+    if (!window.Bergamot.ObjectLanguage) {
+        window.Bergamot.ObjectLanguage = Elm.Bergamot.ObjectLanguage.init({});
+        window.Bergamot.ObjectLanguage.ports.parsedString.subscribe(({ string, term }) => {
+           if (string in parsingPromiseResolvers) {
+              for (const resolver of parsingPromiseResolvers[string]) {
+                resolver(term);
+              }
+              parsingPromiseResolvers[string] = [];
+           }
+        });
+    }
+    return window.Bergamot.ObjectLanguage;
+}
+const parseString = (str) => {
+    if (!(str in parsingPromiseResolvers)) {
+        parsingPromiseResolvers[str] = [];
+    }
+
+    return new Promise(resolve => {
+        parsingPromiseResolvers[str].push(resolve);
+        ensureObjectLanguage().ports.parseString.send(str);
+    });
+}
+
+window.Bergamot = {};
+window.Bergamot.run = (inputGroup, nodeId, inputPrompt, rules, renderPreset, input) => {
+    var app = Elm.Main.init({
+        node: document.getElementById(nodeId),
+        flags: {
+            inputModes: {
+                "Languge Term": { "custom": "Language Term" },
+                "Query": "query"
+            },
+            renderRules: window.Bergamot.renderPresets[renderPreset],
+            rules, input
+        }
+    });
+    app.ports.convertInput.subscribe(async ({ mode, input }) => {
+        let query = await parseString(input);
+        if (query !== null) {
+            query = inputPrompt.replace("TERM", query);
+            app.ports.receiveConverted.send({ input, result: { query } });
+        } else {
+            app.ports.receiveConverted.send({ input, result: { error: "Unable to parse object language term" } });
+        }
+    });
+    loadedWidgets[nodeId] = { app, parentNode: inputGroup ? inputGroup.parentElement : null };
+    setRunning(inputGroup, true);
+};
+window.Bergamot.runPreset = (inputGroup, nodeId, presetName) => {
+    const preset = window.Bergamot.presets[presetName];
+    window.Bergamot.run(inputGroup, nodeId, preset.inputPrompt, preset.rules, preset.renderPreset, preset.query || "");
+};
+window.Bergamot.close = (inputGroup, nodeId) => {
+    if (!(nodeId in loadedWidgets)) return;
+
+    const placeholderDiv = document.createElement('div');
+    placeholderDiv.id = nodeId;
+
+    const widget = loadedWidgets[nodeId];
+    const elmRoot = widget.parentNode.querySelector(".bergamot-root");
+    elmRoot.replaceWith(placeholderDiv)
+    delete loadedWidgets[nodeId];
+    setRunning(inputGroup, false);
+}
+window.Bergamot.presets = {};
+window.Bergamot.renderPresets = {};
+window.Bergamot.renderPresets["default"] =
     `
     PrecApp @ prec(app(?l, ?r), 100, left) <-;
     PrecPlus @ prec(plus(?l, ?r), 80, either) <-;
@@ -79,101 +177,4 @@ const renderRules =
     LatexCall @ latex(?c, ?l) <- call(?c, ?n, ?ts), nonempty(?ts), latexlist(?ts, ?lts_1), intercalate(", ", ?lts_1, ?lts_2), join(?lts_2, ?lts_3), join(["\\\\text{", ?n, "}", "(", ?lts_3, ")"], ?l);
 `;
 
-const loadedWidgets = {};
-const getButtons = (inputGroup) => {
-    return {
-        play: inputGroup.querySelector(".bergamot-play"),
-        reset: inputGroup.querySelector(".bergamot-reset"),
-        close: inputGroup.querySelector(".bergamot-close"),
-    }
-}
-const setRunning = (inputGroup, running) => {
-    if (inputGroup !== null) {
-        const buttons = getButtons(inputGroup);
-        if (buttons.play) buttons.play.classList.toggle("bergamot-hidden", running);
-        if (buttons.reset) buttons.reset.classList.toggle("bergamot-hidden", !running);
-        if (buttons.close) buttons.close.classList.toggle("bergamot-hidden", !running);
-    }
-}
-
-// The object language parsing is handling by a separate standalone Elm
-// application in the ObjectLanguage module, which has two ports:
-//
-// * `parseString` requests a string to be parsed
-// * `parsedString` returns the parsed string, or null
-//
-// We want there to be a single global ObjectLanguage object, but it works
-// on a "subscription" model (we have to give a callback to its port).
-// Configure this callback to invoke `resolve` functions from a list,
-// so that callers can just get a promise. This way we aren't continuously
-// registering more and more handlers for each parsed string, and we can
-// use a convenient promise API.
-const parsingPromiseResolvers = {};
-const ensureObjectLanguage = () => {
-    if (!window.Bergamot.ObjectLanguage) {
-        window.Bergamot.ObjectLanguage = Elm.Bergamot.ObjectLanguage.init({});
-        window.Bergamot.ObjectLanguage.ports.parsedString.subscribe(({ string, term }) => {
-           if (string in parsingPromiseResolvers) {
-              for (const resolver of parsingPromiseResolvers[string]) {
-                resolver(term);
-              }
-              parsingPromiseResolvers[string] = [];
-           }
-        });
-    }
-    return window.Bergamot.ObjectLanguage;
-}
-const parseString = (str) => {
-    if (!(str in parsingPromiseResolvers)) {
-        parsingPromiseResolvers[str] = [];
-    }
-
-    return new Promise(resolve => {
-        parsingPromiseResolvers[str].push(resolve);
-        ensureObjectLanguage().ports.parseString.send(str);
-    });
-}
-
-window.Bergamot = {};
-window.Bergamot.run = (inputGroup, nodeId, inputPrompt, rules, renderRules, input) => {
-    var app = Elm.Main.init({
-        node: document.getElementById(nodeId),
-        flags: {
-            inputModes: {
-                "Languge Term": { "custom": "Language Term" },
-                "Query": "query"
-            },
-            renderRules, rules, input
-        }
-    });
-    app.ports.convertInput.subscribe(async ({ mode, input }) => {
-        let query = await parseString(input);
-        if (query !== null) {
-            query = inputPrompt.replace("TERM", query);
-            app.ports.receiveConverted.send({ input, result: { query } });
-        } else {
-            app.ports.receiveConverted.send({ input, result: { error: "Unable to parse object language term" } });
-        }
-    });
-    loadedWidgets[nodeId] = { app, parentNode: inputGroup ? inputGroup.parentElement : null };
-    setRunning(inputGroup, true);
-};
-window.Bergamot.runPreset = (inputGroup, nodeId, presetName) => {
-    const preset = window.Bergamot.presets[presetName];
-    window.Bergamot.run(inputGroup, nodeId, preset.inputPrompt, preset.rules, renderRules, preset.query || "");
-};
-window.Bergamot.close = (inputGroup, nodeId) => {
-    if (!(nodeId in loadedWidgets)) return;
-
-    const placeholderDiv = document.createElement('div');
-    placeholderDiv.id = nodeId;
-
-    const widget = loadedWidgets[nodeId];
-    const elmRoot = widget.parentNode.querySelector(".bergamot-root");
-    elmRoot.replaceWith(placeholderDiv)
-    delete loadedWidgets[nodeId];
-    setRunning(inputGroup, false);
-}
-window.Bergamot.presets = {};
-
 </script>
diff --git a/layouts/shortcodes/bergamot_preset.html b/layouts/shortcodes/bergamot_preset.html
index 377e97b..4f74fa8 100644
--- a/layouts/shortcodes/bergamot_preset.html
+++ b/layouts/shortcodes/bergamot_preset.html
@@ -3,5 +3,6 @@
         rules: '{{ .Inner }}',
         inputPrompt: '{{ .Get "prompt" }}',
         query: '{{ .Get "query" }}',
+        renderPreset: '{{ default "default" (.Get "rendering") }}'
     };
 </script>
diff --git a/layouts/shortcodes/bergamot_render_preset.html b/layouts/shortcodes/bergamot_render_preset.html
new file mode 100644
index 0000000..19495b4
--- /dev/null
+++ b/layouts/shortcodes/bergamot_render_preset.html
@@ -0,0 +1,3 @@
+<script>
+    window.Bergamot.renderPresets['{{ .Get "name" }}'] = '{{ .Inner }}';
+</script>
diff --git a/layouts/shortcodes/bergamot_widget.html b/layouts/shortcodes/bergamot_widget.html
index d4e9a31..6ea2ca6 100644
--- a/layouts/shortcodes/bergamot_widget.html
+++ b/layouts/shortcodes/bergamot_widget.html
@@ -1,6 +1,6 @@
 <div id="{{ .Get "id" }}"></div>
 <script>
     window.addEventListener('load', function() {
-        window.Bergamot.run(null, '{{ .Get "id" }}', '{{ .Get "prompt" }}', '{{ .Inner }}', renderRules, '{{ .Get "query" }}');
+        window.Bergamot.run(null, '{{ .Get "id" }}', '{{ .Get "prompt" }}', '{{ .Inner }}', '{{ default "default" (.Get "rendering") }}', '{{ .Get "query" }}');
     });
 </script>