Get started with jsPanel

a JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution and other web applications

A few words

Some years ago I needed to make a backend for a site ( that the owner (my brother) wanted to be highly configurable. Nearly all content comes from a database with meanwhile thousands of datasets. For management purposes all those datasets need to be displayed in various configurations.

So I looked for something like a "window manager" to display a variable number of "windows" at once. Those "windows" of course need to be draggable and resizable, so that you can arrange them as needed. And yes, it needs to be free.

In short ... I couldn't find something I really liked. So I started to make my own "window" tool with help from jQuery and jQuery UI.

jsPanel was born.

The first two versions worked quite well, but I didn't think of making them available to anyone else. By profession I never had anything to do with programming. Meanwhile I'm retired and programming is just a spare time occupation to keep my brain working.

But I had fun and my third version found its way to GitHub as jsPanel v1.0.0 in March 2014.

Version 2.0.0 already followed in August 2014 and version 3.0.0 was released in June 2016.

Now I'm working on this fourth version which is the first one without dependencies.

Enjoy life,

Stefan Sträßer (Flyer53)




As of version 4.0.0 there are no more dependencies other than a modern browser with javascript enabled.

It's important to realize that jsPanel v4 is not a jQuery plugin anymore and also doesn't depend on jQuery anymore. This for example means that you cannot use jQuery methods the way you might be used to from previous jsPanel versions.


At time of writing version 4 should work with , , , , Brave, Vivaldi and IE11.

I'm not that much focused on mobile devices, but it seems to work quite well.


right away or go to the downloads page to select the desired version.

HTML Template

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- loading jsPanel css -->
    <link rel="stylesheet" href="jspanel/dist/jspanel.css">

    <!-- Your HTML goes here -->

    <!-- loading jsPanel javascript -->
    <script src="jspanel/dist/jspanel.js"></script>
    <!-- optionally load jsPanel extensions -->
    <script src="jspanel/dist/extensions/contextmenu/jspanel.contextmenu.js"></script>
    <script src="jspanel/dist/extensions/hint/jspanel.hint.js"></script>
    <script src="jspanel/dist/extensions/modal/jspanel.modal.js"></script>
    <script src="jspanel/dist/extensions/tooltip/jspanel.tooltip.js"></script>


A default jsPanel is created via the method .create() of the global object jsPanel.

The method accepts a plain object as argument to pass the desired panel configuration.

    theme:       'primary',
    headerTitle: 'my panel #1',
    position:    'center-top 0 30',
    contentSize: '450 250',
    content:     '<p>Example panel ...</p>',
    callback: function () { = '20px';
    onbeforeclose: function () {
        return confirm('Do you really want to close the panel?');

Of course there are a lot more configuration options, properties, methods and events to work with.

Take a look at the docs for detailed information about all features.

jsPanel on GitHub, npm, CDNJS, Twitter
jsPanel is Open Source and free. And that's what it will remain. However, if you like my work and want to support it I'd be very grateful for a small donation.

Thanks a lot to JetBrains for granting an All Products Pack Open Source License to jsPanel.