Click the button below 👇 to see the toast message Made with ❤️ by vivekweb2013


⭐️# Adding toastmaker to npm project
   # To install toastmaker library in your npm project, execute use the following commands
   npm install --save toastmaker

   # or if you use yarn
   yarn add toastmaker -S

   # Then import the ToastMaker in your script as shown below.
   import ToastMaker from 'toastmaker';
   import "toastmaker/dist/toastmaker.css";

⭐️# Adding toastmaker in plain html/javascript
   # Copy below script and css to the head section of your index.html file
                   <link rel="stylesheet" type="text/css" href="">
   <script type="text/javascript" src=""></script>

Toast Maker is a simple and very lightweight javascript library for showing toast notification messages on web page. It provides multiple configurations to customize the toast styling(font, background, size ... anything), duration, position etc. Below are the option you can use with ToastMaker function

Option Value Description Default Mandatory?
text string Text message to be shown in toast N/A Yes
timeout number Duration (In milliseconds) for which the toast should be displayed 3000 No
styles object Object containing style properties to be applied to toast N/A No
classList array Array of css classes to be applied to toast N/A No
align 'left'
Horizontal alignment for toast 'center' No
valign 'top'
Vertical alignment for toast 'bottom' No

Simple Toast

ToastMaker('Hi There!');

You can create a simple toast just by passing the text message to ToastMaker function. Toast will be shown in bottom center for 3 seconds(default) 👉

Toast With Timeout

ToastMaker('Hi There!', 5000);

You can specify the timeout to ToastMaker function. Toast will be shown for 5 seconds with this code 👉

Toast With Alignment

ToastMaker("Hi There, I'm at the top left of the screen!", 5000, {
    valign: 'top',
    align: 'left'

You can specify the alignment arguments as well to position the toast wherever you want.

In this example, Toast will be shown in top left side of the screen 👉

Toast With Styles

ToastMaker('All Records Deleted!', 3500, {
    styles : {
        backgroundColor: 'red',
        fontSize: '20px'

You can specify your own style attributes to the toast element, for example you can apply background color, font size, border... etc styling with the use of styles option.

With this example, Toast will be shown for 3.5 seconds with red background and font size 20px 👉

Toast With classList

.custom-border {
    border: 1px solid #ffffff;
    border-radius: 0;

.large-appearance {
    top: 0;
    background-color: #a6e22ec2;
    color: #323f4c;
    font-size: 22px;
    max-width: initial;
    width: 100%;
    padding: 15px;
ToastMaker("I'm a bit different than others... 😎", 2000, {
    valign: 'top'
    classList: ["custom-border", "large-appearance"]

If you want to modify the toast element styling without specifying all the style attributes each time, you can create one or more css classes and pass it to the ToastMaker with classList option.

With this example, a green colored, full width transparent Toast will be shown for 2 seconds at the top.

This toast is created by applying custom css classes as shown here 👉


ToastMaker('Made with ❤️ by vivekweb2013');

You can download the latest version of toastmaker distributable bundle from the github releases section.
Download Latest Release

If you like this library, please start it on Github - ToastMaker