👻 A dead simple, responsive, vanilla JavaScript plugin to show notifications.
Switch branches/tags
Clone or download



Notyf is a dead simple, responsive, vanilla javascript notification plugin. No jQuery required.

Demo: carlosroso.com/notyf

demo gif

Angular version: ng-notyf



npm install --save notyf


bower install --save notyf

Now add it to your project:

    <link rel="stylesheet" type="text/css" href="/path/to/notyf.min.css">
    <script src="/path/to/notyf.min.js" type="text/javascript"></script>



// Create an instance of Notyf
var notyf = new Notyf();

// Display an alert notification
notyf.alert('You must fill out the form before moving forward');

// Display a success notification
notyf.confirm('Your changes have been successfully saved!');


When importing Notyf via CommonJS modules, for example for Vue or Angular on top of Webpack, you can import the module as shown below:

// Import Notyf using CommonJS require
var Notyf = require('notyf');
import 'notyf/dist/notyf.min.css';

// Create an instance of Notyf
var notyf = new Notyf()

// Display an alert notification 
notyf.alert('Please fill out the form')


You can set some options when creating a Notyf instance.

new Notyf([options])

Param Type Default Details
delay Number 2000 Number of miliseconds the notification must be shown
alertIcon String Custom Notyf icon CSS class of the icon shown in an alert notification
confirmIcon String Custom Notyf icon CSS class of the icon shown in a success notification

This is an example of setting Notyf with a 1s delay and FontAwesome alert and success icons (be sure to include FontAwesome in your project):

var notyf = new Notyf({
  alertIcon: 'fa fa-exclamation-circle',
  confirmIcon: 'fa fa-check-circle'  


Notyf is under MIT licence