I have already written about Vex, a library for creating modal dialogs. This week let's take a look at SweetAlert, which is very similar to Vex.

SweetAlert bills itself as "a beautiful replacement for JavaScript's 'alert'", but the word "alert" in this statement is a bit misleading. For me, an alert refers to a simple message only, but SweetAlert also supports confirmation messages and input fields. So it is more accurate to see it as a modal dialog library similar to Vex.

Let's check out some examples. First, a simple alert:

swal("Library of the Week, what an honor!")

A confirmation dialog:

swal({
  text: "Do you need my address to send me my trophy and cash prize?!",
  type: "info",
  showCancelButton: true,
  confirmButtonText: "Yes",
  cancelButtonText: "No,
}, function(value) {
  console.log(value);
});

And finally a prompt:

swal({
  text: "By the way, how much is that cash prize again?",
  type: "input",
  showCancelButton: true,
}, function(value) {
  console.log(value);
});

Not that different from Vex, is it? This is not surprising, seeing as this kind of API is hardly rocket science. The differences between Vex and SweetAlert are subtle. SweetAlert has a really nice default look. Vex has more themes with varied looks. SweetAlert has nice feature to replace a dialog's content after a button click instead of closing it. Vex is somewhat more versatile with its API hooks on dialog open and close.

It is worth browsing the documentation for both SweetAlert and Vex before deciding which is the best fit for your project.