DEV Community

Cover image for JSPT: The Toast & Popup Library That Actually Makes Sense
wokki20
wokki20

Posted on

JSPT: The Toast & Popup Library That Actually Makes Sense

#javascript #webdev #tutorial #opensource

Ever spent hours wrestling with a notification library that has 50+ config options, requires a build step, and still doesn't look quite right? Yeah, me too. That's why I built JSPT.

What is JSPT?

JSPT (JavaScript Popup & Toast) is a modern library that does one thing well: beautiful toast notifications and popups. No bloat, no complex setup, just two lines and you're ready to go.

<link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.1.0/jspt.css">
<script src="https://cdn.wokki20.nl/content/jspt-v2.1.0/jspt.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

That's it. No npm install (unless you want to), no webpack config, no build step. Just add and use.

Why Another Notification Library?

Fair question. Here's what makes JSPT different:

1. CDN-First with Version Pinning 

<!-- Production: Pinned version, cached for 30 days -->
<script src="https://cdn.wokki20.nl/content/jspt-v2.1.0/jspt.min.js"></script>

<!-- Development: Always latest -->
<script src="https://cdn.wokki20.nl/dynamic/jspt/jspt.js"></script>
Enter fullscreen mode Exit fullscreen mode

Use versioned URLs in production for stability, or dynamic URLs in development to always get the latest features.

2. Full TypeScript Support (Without TypeScript)

Thanks to comprehensive JSDoc comments, you get full intellisense in VS Code even with vanilla JavaScript:

jspt.makeToast({
  message: "Hello!",
  icon_left: "check_circle",
  icon_left_type: "google_material_rounded",
  duration: 3000
});
Enter fullscreen mode Exit fullscreen mode

Your editor will show you all available options, their types, and descriptions. No TypeScript setup required.

3. Promise-Based Icon Loading

Icons are loaded asynchronously and only when you need them:

jspt.importScript({
  names: ['material_symbols_rounded', 'lucide']
}).then(() => {
  jspt.makeToast({
    message: "Icons loaded!",
    icon_left: "check_circle",
    icon_left_type: "google_material_rounded"
  });
});
Enter fullscreen mode Exit fullscreen mode

Supports Google Material Symbols (Rounded & Outlined), Lucide Icons, and even syntax highlighting with Highlight.js for popups.

4. Tiny File Size

  • Minified: 12KB
  • Full version with comments: 29KB
  • CSS: 6KB

Compare that to alternatives that can be 100KB+.

Real-World Examples

Success Toast 

jspt.makeToast({
  message: "Profile updated successfully!",
  style: "default",
  icon_left: "check_circle",
  icon_left_type: "google_material_rounded",
  duration: 3000
});
Enter fullscreen mode Exit fullscreen mode

Error Toast with Action 

jspt.makeToast({
  style: "default-error",
  message: "Failed to save. Click to retry.",
  icon_left: "error",
  icon_left_type: "google_material_rounded",
  icon_right: "refresh",
  icon_right_type: "google_material_rounded",
  icon_right_action: () => {
    saveData();
  },
  duration: -1,
  close_on_click: true
});
Enter fullscreen mode Exit fullscreen mode

Information Popup 

jspt.makePopup({
  content_type: "text",
  header: "Update Available",
  title: "Version 2.0 Released",
  message: "We've added new features and improvements. Would you like to learn more?",
  close_on_blur: true
});
Enter fullscreen mode Exit fullscreen mode

Custom HTML Popup 

jspt.makePopup({
  content_type: "html",
  header: "Welcome!",
  content: `
    <div style="text-align: center;">
      <h2>👋 Hello!</h2>
      <p>Welcome to our app. Here's what's new:</p>
      <ul style="text-align: left;">
        <li>Dark mode support</li>
        <li>Faster performance</li>
        <li>New features</li>
      </ul>
      <button onclick="jspt.closePopup()">Get Started</button>
    </div>
  `,
  close_on_blur: false
});
Enter fullscreen mode Exit fullscreen mode

Multiple Ways to Use It

Classic Script Tag 

<script src="https://cdn.wokki20.nl/content/jspt-v2.1.0/jspt.min.js"></script>
<script>
  jspt.makeToast({ message: "Hello!" });
</script>
Enter fullscreen mode Exit fullscreen mode

ES Module 

<script type="module">
  import { makeToast } from 'https://cdn.wokki20.nl/content/jspt-v2.1.0/jspt.module.js';
  makeToast({ message: "Hello from ESM!" });
</script>
Enter fullscreen mode Exit fullscreen mode

NPM Package 

npm install @wokki20/jspt
Enter fullscreen mode Exit fullscreen mode 
import { makeToast, makePopup } from '@wokki20/jspt';
Enter fullscreen mode Exit fullscreen mode

Advanced Features

Custom Toast IDs

Replace existing toasts instead of stacking them:

jspt.makeToast({
  custom_id: "upload-progress",
  message: "Uploading: 0%",
  duration: -1
});

jspt.makeToast({
  custom_id: "upload-progress",
  message: "Uploading: 50%",
  duration: -1
});

jspt.makeToast({
  custom_id: "upload-progress",
  message: "Upload complete!",
  icon_left: "check_circle",
  icon_left_type: "google_material_rounded",
  duration: 3000
});
Enter fullscreen mode Exit fullscreen mode

Icon Types

JSPT supports multiple icon types:

  • google_material_rounded - Material Symbols Rounded
  • google_material_outlined - Material Symbols Outlined
  • lucide_icon - Lucide Icons
  • svg - Raw SVG markup
  • image - Image URLs
  • text - Plain text
  • emoji - Emoji characters 
jspt.makeToast({
  message: "Mission accomplished!",
  icon_left: "🚀",
  icon_left_type: "emoji"
});
Enter fullscreen mode Exit fullscreen mode

Event Handling 

jspt.makeToast({
  message: "Click me!",
  close_on_click: true,
  onclick: () => {
    console.log("Toast clicked!");
    window.location.href = "/dashboard";
  }
});
Enter fullscreen mode Exit fullscreen mode

Performance Tips

  1. Use versioned CDN URLs in production - They're cached for 30 days
  2. Use the minified version - 58% smaller (10KB vs 24KB)
  3. Lazy load icon libraries - Only import when needed
  4. Preload for faster loading: 
<link rel="preload" href="https://cdn.wokki20.nl/content/jspt-v2.1.0/jspt.min.js" as="script">
<link rel="preload" href="https://cdn.wokki20.nl/content/jspt-v2.1.0/jspt.css" as="style">
Enter fullscreen mode Exit fullscreen mode

Browser Support

Works in all modern browsers:

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • Opera (latest)

Getting Started

The easiest way to try JSPT is with the CDN:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.1.0/jspt.css">
  <script src="https://cdn.wokki20.nl/content/jspt-v2.1.0/jspt.min.js"></script>
</head>
<body>
  <button onclick="showToast()">Click Me</button>

  <script>
    jspt.importScript({
      names: ['material_symbols_rounded']
    }).then(() => {
      console.log('Ready!');
    });

    function showToast() {
      jspt.makeToast({
        message: "You clicked the button!",
        icon_left: "check_circle",
        icon_left_type: "google_material_rounded",
        duration: 3000
      });
    }
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Documentation & Resources

Contributing

JSPT is open source (MIT License) and welcomes contributions! Whether it's:

  • 🐛 Bug fixes
  • ✨ New features
  • 📝 Documentation improvements
  • 🎨 Design enhancements

Check out the Contributing Guide to get started.

Why You Should Star This Repo

If you find JSPT useful:

  • ⭐ Star the repo to show support and help others discover it
  • 📢 Share it with your team or on social media
  • 🤝 Contribute to make it even better
  • 💬 Open issues for bugs or feature requests

Final Thoughts

JSPT was built out of frustration with overcomplicated notification libraries. Sometimes you just need to show a toast or popup without setting up a entire framework, configuring 50 options, or dealing with styling conflicts.

If you're tired of bloated libraries and want something that just works, give JSPT a try. It's small, fast, and actually pleasant to use.

What do you think? Have you tried JSPT? What features would you like to see? Drop a comment below! 👇

P.S. If you're already using JSPT or plan to try it, I'd love to hear your feedback. Star the repo if you find it useful!

Links:

Top comments (0)