Super lightweight, dependency-free toast/notification system for the web.
- ✅ Zero dependencies, ultra-lightweight
- ✅ Multiple positions (
top-right,bottom-left,top-center, etc.) - ✅ Toast types: info, success, warning, error
- ✅ Auto-dismiss with configurable timeout
- ✅ Sticky toasts (
timeout: 0orInfinity) - ✅ Hover to pause, dismiss button
- ✅ Progress bar option
- ✅ Limit max toasts per position
- ✅ Works with CDN or bundlers
npm install tiny-notifyImport in your app:
import TinyNotify from "tiny-notify";
TinyNotify.success("Hello from bundler!",
{
position: "bottom-right",
timeout: 2500
}
);<script src="https://cdn.jsdelivr.net/gh/rohit-chouhan/tiny-notify/dist/tiny-notify.js"></script>Now TinyNotify is available globally:
<button onclick="TinyNotify.success('Saved successfully!', { position: 'top-right', timeout: 2000 })">
Show Success
</button>TinyNotify.show("Hello World!");TinyNotify.success("Operation successful!");
TinyNotify.error("Something went wrong...");
TinyNotify.info("Here is some info");
TinyNotify.warning("Be careful!");TinyNotify.show("Custom notification", {
type: "info", // success | error | warning | info
position: "bottom-left", // top-right | top-left | bottom-right | bottom-left | top-center | bottom-center
timeout: 4000, // ms; 0 or Infinity = sticky
dismissible: true, // show × button
showProgress: true, // progress bar
maxPerPosition: 5, // auto-trim old toasts
nonce: null // CSP nonce for dynamic styles (if needed)
});TinyNotify.setDefaults({
position: "top-right",
timeout: 3000,
maxPerPosition: 5
});TinyNotify.clear(); // removes all toasts
TinyNotify.clear("top-right"); // removes toasts from specific positionTo build the library for production:
npm run buildThis will generate the bundled file in dist/tiny-notify.js.
For development, you can modify the source files in src/ and run the build command.
👉 Live Playground https://tiny-notify.js.org/
Copyright © 2025 Rohit Chouhan. Licensed under the MIT LICENSE.