snacky.js

A professional, zero-dependency, and highly customizable snackbar library.

Created by Mohammadreza Soltani

How to Use

Using snacky.js is incredibly simple. Just include the script in your HTML file, and you can call it from anywhere.

<!-- 1. Include the script anywhere in your body -->
<script src="snacky.js"></script>
<!-- Or just paste the script block directly -->

<!-- 2. Call it from your JavaScript -->
<script>
  snacky.show("Your profile has been updated!", {
    type: 'success',
    position: 'bottomRight',
    duration: 5000,
    progressBar: 'show'
  });
</script>

Interactive Demo

Notification Types

Features & Positions

API Reference

Customize every aspect of your notifications with these options.

OptionTypeDescriptionDefault
direction'ltr' | 'rtl'Sets the text and layout direction.'ltr'
typestringDetermines the icon and color. 12 types available.'info'
positionstringWhere the snackbar appears on desktop screens.'bottomRight'
icon'show' | 'hidden'Shows or hides the icon.'show'
progressBar'show' | 'hidden'Shows or hides the duration progress bar.'hidden'
autoHidebooleanIf false, the snackbar stays until manually dismissed.true
durationnumberTime in milliseconds before auto-hiding.4000
wordHighlightstring | string[]A word or array of words to make bold.null
soundEffectbooleanPlays a subtle sound on notification show.false
vibratebooleanVibrates the device (on supported platforms).false