jGrowl turns a jQuery call into a corner notification you can theme

One method call produces the notification

jGrowl is a jQuery plugin that raises unobtrusive messages inside the browser, modelled on the way the OS X Growl Framework behaves. The stated idea is simple: deliver notifications to the end user in a way that is noticeable without obstructing the workflow, while still keeping the user informed.

The whole API is a call on the jQuery object, with a message and an optional options object:

// Sample 1
$.jGrowl("Hello world!");
// Sample 2
$.jGrowl("Stick this!", { sticky: true });
// Sample 3
$.jGrowl("A message with a header", { header: 'Important' });
// Sample 4
$.jGrowl("A message that will live a little longer.", { life: 10000 });

Those four lines cover the common cases: a plain message, one that stays until the user closes it, one with a header line above it, and one with a longer lifespan. A fifth sample in the documentation shows the callback and animation options together, which is where the plugin stops being a wrapper around a div.

For a jQuery codebase this is a very small dependency to carry. There is no component to mount, no provider to wrap an application in, and no state to synchronise with the rest of your UI.

Installation through npm, a CDN, or a copied file

The plugin can be added in three ways, and the documentation lists all of them: package managers such as bower and npm, a CDN reference in the HTML, or the old fashioned route of copying the file into the project directory.

The npm route is a single command:

npm install jgrowl

The CDN route needs two tags, a stylesheet and a script, and both point at the cdnjs-hosted build of the 1.5.0 release:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.5.0/jquery.jgrowl.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.5.0/jquery.jgrowl.min.js"></script>

Two details are worth pausing on. The stylesheet is not optional, because the plugin's appearance comes from a class it applies to the container and to each notification, and the theme options are described as CSS classes intended for use with jQuery UI. Second, the CDN version and the npm version are not the same build: the package manifest lists the current version as 1.5.1, while the CDN snippet still references 1.5.0.

The repository is published to npm under the name jgrowl, with the main entry point set to jquery.jgrowl.js and the style field pointing at jquery.jgrowl.css, so a bundler will pick up the stylesheet correctly if you import it that way.

The options table is where the real behaviour lives

The configuration options are documented in a long table, and reading it is the fastest way to understand what the plugin does. The defaults matter. life is 3000, the lifespan of a non-sticky message in milliseconds, and sticky defaults to false, so a message sticks to the screen until it is intentionally closed by the user only when you ask for it. The position default is top-right, and by default there are five options available: top-left, top-right, bottom-left, bottom-right and center. That position is described as designating a class applied to the jGrowl container.

The pool option, defaulting to 0, limits the number of messages appearing at a given time to the number in the pool, which is how you stop a burst of errors from stacking into a wall of notifications. glue controls whether a notification is appended after all notifications or prepended before them, and appendTo chooses the element the messages are appended to, defaulting to body.

The styling options are equally specific. group applies a CSS class to notifications when they are created, which the documentation suggests is useful for grouping notifications by a CSS selector, while theme and themeState designate custom styling for the message and its state, both intended for jQuery UI. corners sets the curvature radius of the notification corners, defaulting to 10px.

Several of these options, including position, check and closer, are explicitly documented as needing to be changed in the defaults before the startup method is called, rather than being set per message. That is a small but real constraint on how you configure the plugin.

Seven lifecycle callbacks, all with the same three arguments

The callback surface is generous, and it follows a consistent shape. There is a log callback that runs before anything is done with the notification, intended for a logging mechanism covering all notifications passed to jGrowl, and then a sequence around the open and close cycle: beforeOpen, open, afterOpen, beforeClose and close, plus a click callback for when a notification is clicked.

Every one of them receives the same three arguments, the notification's DOM context, the notification's message and its option object. The consistent signature is what makes the callbacks composable: a logging function and an analytics function can share the same shape without a wrapper.

The fifth sample in the documentation shows how the animation options combine with a callback:

// Sample 5
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
	beforeClose: function(e,m) {
		alert('About to close this notification!');
	},
	animateOpen: {
		height: 'show'
	}
});

The animation options are separate from the jQuery effect names used elsewhere. animateOpen defaults to opacity show and animateClose to opacity hide, and you can swap in a different effect, in this case height show for the opening animation. The closeDuration and openDuration options control the animation speed for closing and opening, with the default of normal, and easing controls the easing method for those animations, defaulting to swing. closeDuration and openDuration are described as taking a value, which in jQuery means a duration and optionally an easing function.

A scrub interval and a close-all button that only exist sometimes

Two options exist only when more than one notification is on screen. The closer option, true by default, decides whether the close-all button is used when more than one notification appears, and it can optionally be set to a function used as a callback when the close-all button is clicked. The content of that button is controlled by closerTemplate, which defaults to a div containing the text close all, and the individual close links on each notification corner use closeTemplate, defaulting to the times entity.

Separately, there is a check option with a default of 250, the frequency at which jGrowl scrubs messages from the screen. It is described as needing to be changed in the defaults before the startup method is called. The implication is a timer running every quarter second, which is a design decision from an era when the plugin was written and is worth noting if you are counting timer work in a modern single page application.

The combined effect of these options is that the visual density of the notifications is controllable at two levels. The pool caps how many appear at once, and the closer template and the check interval decide how the stack is dismissed. The container element and its position class are what make the whole group look like a single system rather than a pile of divs.

A mature plugin with a jQuery peer dependency and a Grunt build

The dependency situation is the main constraint to weigh. The package manifest lists jQuery as a peer dependency with the range >= 2.1.0 < 4.0.0, and jQuery itself appears in the development dependencies at 3.7.1. There is no bundled jQuery, and the plugin will not work on a page that has no jQuery at all, so for a new project that has moved to plain modules, this rules the plugin out.

For a jQuery codebase it is otherwise a well-behaved dependency. The licence is MIT, the author is Stan Lemon, and the build is a Grunt setup with the build script mapped to grunt. The dev dependencies list grunt itself, grunt-cli, and plugins for jshint, less, uglify and watch, which tells you the stylesheet is authored as Less and compiled, and that the minified files at the root of the repository are generated rather than hand-edited. The repository also carries a bower.json for the older package manager, a jgrowl.jquery.json manifest, a renovate.json for dependency updates, and a cspell.json, and the examples directory holds an appendTo.html page, a bootstrap.html page and a jgrowl.html page.

On maintenance, the last push was on 2026-09-03, and the repository publishes no GitHub releases, so the npm version 1.5.1 in the manifest is the version marker to track rather than a tag.

Editorial conclusion

Adopt jGrowl if you are maintaining a jQuery codebase that needs unobtrusive in-page notifications and you want the whole behaviour configured from one options object rather than a hand-rolled toast component. Do not adopt it for a new project built without jQuery, since the plugin declares jQuery as a peer dependency and the whole API is a jQuery method. Before you install it, check two things: the version you pull, because the npm package reports 1.5.1 while the CDN snippet in the documentation still points at 1.5.0, and the position and pool options, which the documentation says must be changed in the defaults before the startup method is called rather than passed per message.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. Project website
4. README
5. stanlemon/jGrowl on GitHub