🍞 ModernToasts
A modern, lightweight toast notification library with beautiful stacked animations, TypeScript support, and zero dependencies
🚀 Interactive Examples
Try the new ModernToasts library with all its modern features
Interactive Playground Interactive
Comprehensive playground with custom toast builder, all animations, positions, styling options, and real-time configuration testing.
React Integration New
React application using ModernToasts with hooks, TypeScript, and modern React patterns.
Vue.js Integration New
Vue.js application demonstrating ModernToasts integration with Vue 3 Composition API and reactive stores.
Angular Integration New
Angular application with services, dependency injection, HTTP interceptors, and form validation integration.
Svelte Integration New
Svelte application with reactive stores, two-way binding, and reactive statements for dynamic configuration.
Node.js/Express New
Server-side integration with Express.js, middleware, API routes, and template engine examples.
Vanilla JavaScript New
Pure vanilla JavaScript implementation using CDN. Perfect for quick integration and learning the basics.
Accessibility Demo New
Demonstration of accessibility features including screen reader support and keyboard navigation.
📚 Legacy Examples
Original implementations for reference and comparison
Pure Vanilla JS/CSS Legacy
Original pure implementation with basic toast functionality. Perfect for understanding the evolution.
React + Vanilla CSS Legacy
Original React components with custom CSS. Shows the foundation that led to the modern library.
React + Tailwind CSS Legacy
Original React with Tailwind CSS implementation. Utility-first approach from the early development.
React + Vite + TypeScript Legacy
Original modern development setup. The foundation that inspired the current TypeScript library.
📚 Documentation & Resources
🔧 API Reference
Complete API documentation with TypeScript definitions, configuration options, and usage examples.
View Documentation →🚀 Quick Start Guide
Get started quickly with installation instructions, basic usage, and integration examples.
Get Started →⚖️ Legacy Comparison
Detailed comparison between legacy implementations and the modern library approach.
View Comparison →🎨 Customization Guide
Learn how to customize animations, styling, positioning, and create your own themes.
Customize →🤝 Contributing
Guidelines for contributing to the project, reporting issues, and submitting improvements.
Contribute →📦 NPM Package
Install the library via NPM and integrate it into your projects with full TypeScript support.
Install →