JSPT: The Toast & Popup Library That Actually Makes Sense

wokki20 — Sun, 15 Feb 2026 14:07:43 +0000

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>

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>

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
});

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"
  });
});

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
});

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
});

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
});

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
});

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>

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>

NPM Package

npm install @wokki20/jspt

import { makeToast, makePopup } from '@wokki20/jspt';

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
});

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"
});

Event Handling

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

Performance Tips

Use versioned CDN URLs in production - They're cached for 30 days
Use the minified version - 58% smaller (10KB vs 24KB)
Lazy load icon libraries - Only import when needed
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">

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>

Documentation & Resources

📚 Full Documentation: jspt.js.org
💻 GitHub: github.com/levkris/jspt
🐛 Issues: Report bugs or request features
🌐 CDN: cdn.wokki20.nl (the CDN is not open for the public to upload files, this is my own CDN)

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:

GitHub: https://github.com/levkris/jspt ⭐
Documentation: https://jspt.js.org
CDN: https://cdn.wokki20.nl
NPM: npm install @wokki20/jspt

Forem: wokki20