DEV Community

Akshay
Akshay

Posted on

Introducing KAlert.js β€” A lightweight animated alert dialog library for JavaScript

#webdev #opensource #javascript #frontend

Introducing KAlert.js β€” A Lightweight Modern Alert Dialog Library for JavaScript πŸš€

While working on my frontend projects, I often needed a clean and modern alternative to the default browser alert dialogs.

The native browser alert:

alert("Hello world");
Enter fullscreen mode Exit fullscreen mode

is functional, but it looks outdated and isn't customizable.

So I built KAlert.js β€” a lightweight, animated, Promise-based alert dialog library that works instantly via CDN with zero setup required.

✨ Features

KAlert.js provides:

βœ… Animated modal dialogs
βœ… Promise-based confirm dialogs
βœ… Font Awesome icon support (auto-loaded)
βœ… Blur background overlay
βœ… Success / error / warning / info alert types
βœ… Zero dependencies
βœ… CDN-ready usage
βœ… Lightweight and fast

πŸ“¦ Install via CDN (No setup required)

Just include one script:

<script src="https://cdn.jsdelivr.net/gh/TutorialsAndroid/KAlert@v1.1.1/kalertdialog.js"></script>
Enter fullscreen mode Exit fullscreen mode

That’s it.

No configuration needed.

πŸš€ Basic Usage Example

Show a success alert:

KAlert.show("Saved successfully!", "success");
Enter fullscreen mode Exit fullscreen mode

Other supported alert types:

success
error
warning
info
Enter fullscreen mode Exit fullscreen mode

Example:

KAlert.show("Something went wrong!", "error");
Enter fullscreen mode Exit fullscreen mode

βœ… Confirm Dialog Example (Promise-Based)

Unlike traditional confirm dialogs, KAlert uses a modern Promise API:

KAlert.confirm("Delete this file?")
.then(result => {

if(result){
console.log("User confirmed");
}else{
console.log("User cancelled");
}

});
Enter fullscreen mode Exit fullscreen mode

This makes it easier to integrate into modern JavaScript workflows.

🎨 Alert Types Available

KAlert currently supports:

🟒 success
πŸ”΄ error
🟑 warning
πŸ”΅ info

Each alert includes animated UI and Font Awesome icons automatically.

πŸ’‘ Why I Built This Library

Many alert dialog libraries are powerful but often:

β€’ too large
β€’ require configuration
β€’ need multiple imports
β€’ depend on frameworks

KAlert.js focuses on simplicity:

One script.
Instant usage.
Clean UI.

πŸ§ͺ Live Example 

KAlert.show("Welcome to KAlert!", "info");

KAlert.confirm("Continue?")
.then(result => console.log(result));
Enter fullscreen mode Exit fullscreen mode

πŸ“‚ GitHub Repository

You can check out the project here:

https://github.com/TutorialsAndroid/KAlert

Feedback, suggestions, and contributions are welcome!

πŸ›  Roadmap

Planned features for upcoming versions:

β€’ custom dialog titles
β€’ input prompt dialogs
β€’ dark mode support
β€’ theme customization
β€’ button text customization

If you’re building frontend projects and want a clean alert dialog alternative without extra setup, give KAlert.js a try.

I’d love to hear your feedback πŸ™‚

Top comments (0)