ModernNotify.js Demo

Preset Notifications

Explore the various features and styles of ModernNotify with these preset notifications. Each card showcases a different type of notification or configuration option. Click the "Show" button to see the notification in action, or "View Code" to understand how it's implemented. These presets offer a quick way to explore ModernNotify's capabilities and inspire your own custom configurations.

Success

Display a success message with default settings.

Error

Show an error notification with a dark theme.

Warning

Display a warning with fade animation.

Info

Show an info notification without progress bar.

Top Left

Notification in the top-left corner.

Bottom Right

Notification in the bottom-right corner.

Bottom Left

Notification in the bottom-left corner.

Long Duration

Notification that stays for 10 seconds.

Short Duration

Quick notification (1 second duration).

Wide

A wider notification (400px width).

Narrow

A narrower notification (200px width).

Custom HTML

Notification with custom HTML content.

RTL

Right-to-left text notification.

Persistent

Notification that doesn't auto-dismiss.

With Actions

Notification with clickable buttons.

With Sound

Notification with an audio alert.

Grouped

Multiple notifications grouped together.

Dark Theme

Notification with a dark color scheme.

Custom Notification

Tailor your notification to perfection using the options below. Experiment with different settings to create a notification that fits your exact needs.

Content

Appearance

Animation & Behavior

Test ModernNotify

Use the code editor below to test ModernNotify. You'll find several pre-written examples. Click the "Execute Code" button to run the code and see the notification in action. Feel free to modify the examples or write your own code to explore ModernNotify's features!