iziToast

iziToast: lightweight toasts in plain JS.

CDN setup

Load styles separately:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1/dist/css/iziToast.min.css">

Script and FetchIt.Message via ESM:

<script type="module">
  import izitoast from 'https://cdn.jsdelivr.net/npm/izitoast@1/+esm'

  document.addEventListener('DOMContentLoaded', () => {
    FetchIt.Message = {
      success(message) {
        izitoast.success({ message })
      },
      error(message) {
        izitoast.error({ message })
      },
    }
  })
</script>

In a separate module with defer (after the FetchIt script), skip the DOMContentLoaded wrapper:

import izitoast from 'https://cdn.jsdelivr.net/npm/izitoast@1/+esm'

FetchIt.Message = {
  success(message) {
    izitoast.success({ message })
  },
  error(message) {
    izitoast.error({ message })
  },
}

Form blocks [data-success] and [data-validation-error] work alongside toasts. Skip Message if you only need those blocks. Selectors: documentation.