diff --git a/app/assets/javascripts/alchemy/admin.js b/app/assets/javascripts/alchemy/admin.js
index 183e2445c7..718079aee3 100644
--- a/app/assets/javascripts/alchemy/admin.js
+++ b/app/assets/javascripts/alchemy/admin.js
@@ -23,7 +23,6 @@
 //= require alchemy/alchemy.elements_window
 //= require alchemy/alchemy.fixed_elements
 //= require alchemy/alchemy.growler
-//= require alchemy/alchemy.gui
 //= require alchemy/alchemy.hotkeys
 //= require alchemy/alchemy.image_overlay
 //= require alchemy/alchemy.string_extension
diff --git a/app/assets/javascripts/alchemy/alchemy.gui.js.coffee b/app/assets/javascripts/alchemy/alchemy.gui.js.coffee
deleted file mode 100644
index a99c0ce1dd..0000000000
--- a/app/assets/javascripts/alchemy/alchemy.gui.js.coffee
+++ /dev/null
@@ -1,27 +0,0 @@
-window.Alchemy = {} if window.Alchemy == undefined
-
-# Alchemy GUI initializers
-Alchemy.GUI =
-
-  # Initializes all Alchemy GUI elements in given scope
-  init: (scope) ->
-    Alchemy.SelectBox(scope)
-    Alchemy.Datepicker(scope && scope.selector)
-    Alchemy.Tooltips(scope)
-    Alchemy.Buttons.observe(scope)
-    # Dialog links use event delegation and therefore do not
-    # need to be re-initialized after dom elements get replaced
-    unless scope
-      Alchemy.watchForDialogs()
-    Alchemy.Hotkeys(scope)
-    Alchemy.ListFilter(scope)
-    Alchemy.Autocomplete.tags(scope)
-    $('[data-alchemy-char-counter]', scope).each ->
-      new Alchemy.CharCounter(this)
-
-  initElement: ($el) ->
-    Alchemy.ElementDirtyObserver($el)
-    Alchemy.GUI.init($el && $el.selector)
-    Alchemy.ImageLoader($el[0])
-    Alchemy.fileEditors($el.find(".ingredient-editor.file, .ingredient-editor.audio, .ingredient-editor.video").selector)
-    Alchemy.pictureEditors($el.find(".ingredient-editor.picture").selector)
diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
index 5628a0504a..ff5cb6e296 100644
--- a/app/javascript/alchemy_admin.js
+++ b/app/javascript/alchemy_admin.js
@@ -1,6 +1,7 @@
 import "@hotwired/turbo-rails"
 
 import Buttons from "alchemy_admin/buttons"
+import GUI from "alchemy_admin/gui"
 import translate from "alchemy_admin/i18n"
 import Dirty from "alchemy_admin/dirty"
 import translationData from "alchemy_admin/translations"
@@ -24,6 +25,7 @@ if (typeof window.Alchemy === "undefined") {
 Object.assign(Alchemy, {
   Buttons,
   ...Dirty,
+  GUI,
   t: translate, // Global utility method for translating a given string
   translations: Object.assign(Alchemy.translations || {}, translationData),
   fileEditors,
diff --git a/app/javascript/alchemy_admin/gui.js b/app/javascript/alchemy_admin/gui.js
new file mode 100644
index 0000000000..9d4af85334
--- /dev/null
+++ b/app/javascript/alchemy_admin/gui.js
@@ -0,0 +1,32 @@
+function init(scope) {
+  Alchemy.SelectBox(scope)
+  Alchemy.Datepicker(scope && scope.selector)
+  Alchemy.Tooltips(scope)
+  Alchemy.Buttons.observe(scope)
+  if (!scope) {
+    Alchemy.watchForDialogs()
+  }
+  Alchemy.Hotkeys(scope)
+  Alchemy.ListFilter(scope)
+  Alchemy.Autocomplete.tags(scope)
+  $("[data-alchemy-char-counter]", scope).each(function () {
+    new Alchemy.CharCounter(this)
+  })
+}
+
+function initElement($el) {
+  Alchemy.ElementDirtyObserver($el)
+  init($el && $el.selector)
+  Alchemy.ImageLoader($el[0])
+  Alchemy.fileEditors(
+    $el.find(
+      ".ingredient-editor.file, .ingredient-editor.audio, .ingredient-editor.video"
+    ).selector
+  )
+  Alchemy.pictureEditors($el.find(".ingredient-editor.picture").selector)
+}
+
+export default {
+  init,
+  initElement
+}