diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js
index 5e22a5af..e45048fd 100644
--- a/src/editor/dialogs/index.js
+++ b/src/editor/dialogs/index.js
@@ -4,3 +4,5 @@ import './svgSourceDialog.js';
 import './cmenuDialog.js';
 import './cmenuLayersDialog.js';
 import './seSelectDialog.js';
+import './seConfirmDialog.js';
+import './seAlertDialog.js';
diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js
new file mode 100644
index 00000000..6d417f22
--- /dev/null
+++ b/src/editor/dialogs/seAlertDialog.js
@@ -0,0 +1,59 @@
+// eslint-disable-next-line node/no-unpublished-import
+import AlertDialog from 'elix/define/AlertDialog.js';
+/**
+ * @class SeAlertDialog
+ */
+export class SeAlertDialog extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this.dialog = new AlertDialog();
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['title'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    switch (name) {
+    case 'title':
+      this.dialog.textContent = newValue;
+      this.dialog.open();
+      break;
+    default:
+      console.error('unkonw attr for:', name, 'newValue =', newValue);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get title () {
+    return this.getAttribute('title');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set title (value) {
+    this.setAttribute('title', value);
+  }
+}
+
+// Register
+customElements.define('se-alert-dialog', SeAlertDialog);
diff --git a/src/editor/dialogs/seConfirmDialog.js b/src/editor/dialogs/seConfirmDialog.js
new file mode 100644
index 00000000..b2502ff1
--- /dev/null
+++ b/src/editor/dialogs/seConfirmDialog.js
@@ -0,0 +1,13 @@
+// eslint-disable-next-line node/no-unpublished-import
+import AlertDialog from 'elix/define/AlertDialog.js';
+
+const dialog = new AlertDialog();
+const seConfirm = async (text, choices) => {
+  dialog.textContent = text;
+  dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices;
+  dialog.open();
+  const response = await dialog.whenClosed();
+  return response.choice;
+};
+
+window.seConfirm = seConfirm;
diff --git a/src/editor/extensions/ext-imagelib/index.js b/src/editor/extensions/ext-imagelib/index.js
index 6521469a..2e48c220 100644
--- a/src/editor/extensions/ext-imagelib/index.js
+++ b/src/editor/extensions/ext-imagelib/index.js
@@ -32,8 +32,7 @@ $('a').click(function () {
         data = canvas.toDataURL();
       } catch (err) {
         // This fails in Firefox with `file:///` URLs :(
-        // Todo: This could use a generic alert library instead
-        alert('Data URL conversion failed: ' + err); // eslint-disable-line no-alert
+        document.getElementById('se-alert-dialog').title = 'Data URL conversion failed: ' + err;
         data = '';
       }
       post({href, data});
diff --git a/src/editor/extensions/ext-imagelib/openclipart.js b/src/editor/extensions/ext-imagelib/openclipart.js
index 9563974b..d66b3e84 100644
--- a/src/editor/extensions/ext-imagelib/openclipart.js
+++ b/src/editor/extensions/ext-imagelib/openclipart.js
@@ -39,8 +39,7 @@ async function processResults (url) {
   // console.log('json', json);
 
   if (!json || json.msg !== 'success') {
-    // Todo: This could use a generic alert library instead
-    alert('There was a problem downloading the results'); // eslint-disable-line no-alert
+    document.getElementById('se-alert-dialog').title = 'There was a problem downloading the results';
     return;
   }
   const {payload, info: {
diff --git a/src/editor/extensions/ext-mathjax/ext-mathjax.js b/src/editor/extensions/ext-mathjax/ext-mathjax.js
index 133c2375..85687cbe 100644
--- a/src/editor/extensions/ext-mathjax/ext-mathjax.js
+++ b/src/editor/extensions/ext-mathjax/ext-mathjax.js
@@ -202,8 +202,8 @@ export default {
               });
             } catch (e) {
               console.log('Failed loading MathJax.'); // eslint-disable-line no-console
-              // eslint-disable-next-line no-alert
-              alert('Failed loading MathJax. You will not be able to change the mathematics.');
+              // eslint-disable-next-line max-len
+              document.getElementById('se-alert-dialog').title = 'Failed loading MathJax. You will not be able to change the mathematics.';
             }
           }
         }
diff --git a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
index a0bf4b38..be51a83a 100644
--- a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
+++ b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
@@ -64,8 +64,7 @@ export default {
           <input type="hidden" name="contenttype" value="application/x-svgdraw">
         `).appendTo('body')
           .submit().remove();
-        // eslint-disable-next-line no-alert
-        alert(strings.saved);
+        document.getElementById('se-alert-dialog').title = strings.saved;
         top.window.location = '/' + name;
       }
     });
diff --git a/src/editor/extensions/ext-webappfind/ext-webappfind.js b/src/editor/extensions/ext-webappfind/ext-webappfind.js
index 9a4cf89a..176b226a 100644
--- a/src/editor/extensions/ext-webappfind/ext-webappfind.js
+++ b/src/editor/extensions/ext-webappfind/ext-webappfind.js
@@ -63,8 +63,7 @@ export default {
           } */
           break;
         case 'save-end':
-          // eslint-disable-next-line no-alert
-          alert(`save complete for pathID ${pathID}!`);
+          document.getElementById('se-alert-dialog').title = `save complete for pathID ${pathID}!`;
           break;
         default:
           throw new Error('Unexpected WebAppFind event type');
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index 1b32e4de..400a3bd8 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -156,7 +156,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, uniqName);
     if (!newName) { return; }
     if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
-      alert(this.uiStrings.notification.dupeLayerName);
+      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
       return;
     }
     this.svgCanvas.createLayer(newName);
@@ -190,7 +190,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, name);
     if (!newName) { return; }
     if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
-      alert(this.uiStrings.notification.dupeLayerName);
+      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
       return;
     }
     this.svgCanvas.cloneLayer(newName);
@@ -235,7 +235,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterNewLayerName, '');
     if (!newName) { return; }
     if (oldName === newName || this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
-      alert(this.uiStrings.notification.layerHasThatName);
+      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.layerHasThatName;
       return;
     }
     this.svgCanvas.renameCurrentLayer(newName);
diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js
index 5134418f..2dac9259 100644
--- a/src/editor/panels/TopPanelHandlers.js
+++ b/src/editor/panels/TopPanelHandlers.js
@@ -403,8 +403,7 @@ class TopPanelHandlers {
 
     if (!valid) {
       e.target.value = this.selectedElement().getAttribute(attr);
-      // eslint-disable-next-line no-alert
-      alert(this.uiStrings.notification.invalidAttrValGiven);
+      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.invalidAttrValGiven;
       return false;
     }
 
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index c8709ded..ce81af8f 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -222,6 +222,10 @@ editor.init = () => {
     const dialogBox = document.createElement('se-cmenu_canvas-dialog');
     dialogBox.setAttribute('id', 'se-cmenu_canvas');
     document.body.append(dialogBox);
+    // alertDialog added to DOM
+    const alertBox = document.createElement('se-alert-dialog');
+    alertBox.setAttribute('id', 'se-alert-dialog');
+    document.body.append(alertBox);
   } catch (err) {}
 
   editor.configObj.load();
@@ -436,7 +440,6 @@ editor.init = () => {
     // Alert will only appear the first time saved OR the
     //   first time the bug is encountered
     let done = editor.pref('save_notice_done');
-
     if (done !== 'all') {
       let note = uiStrings.notification.saveFromBrowser.replace('%s', 'SVG');
       // Check if FF and has <defs/>
@@ -453,7 +456,7 @@ editor.init = () => {
         editor.pref('save_notice_done', 'all');
       }
       if (done !== 'part') {
-        alert(note);
+        document.getElementById('se-alert-dialog').title = note;
       }
     }
   };
@@ -470,7 +473,7 @@ editor.init = () => {
     exportWindow = window.open(blankPageObjectURL || '', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
 
     if (!exportWindow || exportWindow.closed) {
-      alert(uiStrings.notification.popupWindowBlocked);
+      document.getElementById('se-alert-dialog').title = uiStrings.notification.popupWindowBlocked;
       return;
     }
 
@@ -1289,7 +1292,7 @@ editor.init = () => {
 
   // fired when user wants to move elements to another layer
   let promptMoveLayerOnce = false;
-  $('#selLayerNames').change((evt) => {
+  $('#selLayerNames').change( async(evt) => {
     const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
     const confirmStr = uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer);
     /**
@@ -1307,8 +1310,8 @@ editor.init = () => {
       if (promptMoveLayerOnce) {
         moveToLayer(true);
       } else {
-        const ok = confirm(confirmStr);
-        if (!ok) {
+        const ok = await seConfirm(confirmStr, [uiStrings.common.ok, uiStrings.common.cancel]);
+        if (ok === uiStrings.common.cancel) {
           return;
         }
         moveToLayer(true);
@@ -1666,10 +1669,10 @@ editor.init = () => {
    * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
    * @returns {void}
    */
-  const clickClear = () => {
+  const clickClear = async() => {
     const [x, y] = editor.configObj.curConfig.dimensions;
-    const ok = confirm(uiStrings.notification.QwantToClear);
-    if (!ok) {
+    const cancel = await seConfirm(uiStrings.notification.QwantToClear, [uiStrings.common.ok, uiStrings.common.cancel]);
+    if (cancel === uiStrings.common.cancel) {
       return;
     }
     editor.leftPanelHandlers.clickSelect();
@@ -1846,7 +1849,7 @@ editor.init = () => {
   * @param {Event} e
   * @returns {void} Resolves to `undefined`
   */
-  const saveSourceEditor = (e) => {
+  const saveSourceEditor = async (e) => {
     const $editorDialog = document.getElementById('se-svg-editor-dialog');
     if ($editorDialog.getAttribute('dialog') !== 'open') return;
     const saveChanges = () => {
@@ -1858,8 +1861,8 @@ editor.init = () => {
     };
 
     if (!svgCanvas.setSvgString(e.detail.value)) {
-      const ok = confirm(uiStrings.notification.QerrorsRevertToSource);
-      if (!ok) {
+      const resp = await seConfirm(uiStrings.notification.QerrorsRevertToSource, [uiStrings.common.ok, uiStrings.common.cancel]);
+      if (resp === uiStrings.common.cancel) {
         return;
       }
       saveChanges();
@@ -1901,15 +1904,15 @@ editor.init = () => {
     svgCanvas.setDocumentTitle(title);
 
     if (w !== 'fit' && !isValidUnit('width', w)) {
-      alert(uiStrings.notification.invalidAttrValGiven);
+      document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
       return false;
     }
     if (h !== 'fit' && !isValidUnit('height', h)) {
-      alert(uiStrings.notification.invalidAttrValGiven);
+      document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
       return false;
     }
     if (!svgCanvas.setResolution(w, h)) {
-      alert(uiStrings.notification.noContentToFitTo);
+      document.getElementById('se-alert-dialog').title = uiStrings.notification.noContentToFitTo;
       return false;
     }
     // Set image save option
@@ -1955,7 +1958,7 @@ editor.init = () => {
   * @param {Event} e
   * @returns {void} Resolves to `undefined`
   */
-  const cancelOverlays = (e) => {
+  const cancelOverlays = async (e) => {
     $('#dialog_box').hide();
     const $editorDialog = document.getElementById('se-svg-editor-dialog');
     const editingsource = $editorDialog.getAttribute('dialog') === 'open';
@@ -1969,8 +1972,8 @@ editor.init = () => {
     if (editingsource) {
       const origSource = svgCanvas.getSvgString();
       if (origSource !== e.detail.value) {
-        const ok = confirm(uiStrings.notification.QignoreSourceChanges);
-        if (ok) {
+        const resp = await seConfirm(uiStrings.notification.QignoreSourceChanges, [uiStrings.common.ok, uiStrings.common.cancel]);
+        if (resp === uiStrings.common.ok) {
           hideSourceEditor();
         }
       } else {
@@ -2000,7 +2003,7 @@ editor.init = () => {
   });
 
   $('#url_notice').click(() => {
-    alert(this.title);
+    document.getElementById('se-alert-dialog').title = this.title;
   });
 
   $('#stroke_width').val(editor.configObj.curConfig.initStroke.width);
@@ -2702,7 +2705,7 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
             reject(new Error('URLLoadFail'));
             return;
           }
-          alert(uiStrings.notification.URLLoadFail + ': \n' + err);
+          document.getElementById('se-alert-dialog').title = uiStrings.notification.URLLoadFail + ': \n' + err;
           resolve();
         },
         complete () {