Products
Star

JavaScript Plugins

A free and open-source collection of lightweight JavaScript plugins, combining several common tools in a single package to facilitate the acceleration of web application development.

React Logo Vue Logo JavaScript Logo


NPM Logo
20k +

Weekly downloads

GitHub Logo
400+

GitHub stars

MIT License Icon
MIT License

Free and open-source

Create rich and user-friendly web-applications

Comprehensive JavaScript plugins and tools for diverse web-based applications. Fully compatible and easily integrated with any JavaScript library, offering various components to enhance web development projects.

JavaScript Dropdown

Enhance your forms with dynamic drop-down and autocomplete features.

JavaScript Calendar

Implement interactive calendars for event management and scheduling.

JavaScript Toolbar

Enables embedding dynamic, fully customizable toolbars into web applications.

JavaScript Color Picker

Embed a color picker tool for customizable color selections.

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<div id="dropdown"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown'), {
    data: [
        { group:'Breads', value:'1', text:'Wholemeal' },
        { group:'Breads', value:'2', text:'Wholegrain' },
        { group:'Breakfast Cereals', value:'4', text:'High fibre (wholegrain) oats' },
        { group:'Breakfast Cereals', value:'5', text:'Porridge' },
        { group:'Grains', value:'7', text:'Rice' },
        { group:'Grains', value:'8', text:'Barley' },
        { group:'Other products', value:'10', text:'Pasta' },
        { group:'Other products', value:'11', text:'Noodles' }
    ],
    width:'280px',
    autocomplete: true,
    value: '7'
});
</script>
</html>

import { Dropdown } from 'jsuites/react'
import { useRef, useEffect } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
    const dropdown = useRef(null);

    const data = [
        { group:'Breads', value:'1', text:'Wholemeal' },
        { group:'Breads', value:'2', text:'Wholegrain' },
        { group:'Breakfast Cereals', value:'4', text:'High fibre (wholegrain) oats' },
        { group:'Breakfast Cereals', value:'5', text:'Porridge' },
        { group:'Grains', value:'7', text:'Rice' },
        { group:'Grains', value:'8', text:'Barley' },
        { group:'Other products', value:'10', text:'Pasta' },
        { group:'Other products', value:'11', text:'Noodles' }
    ];

    return (
        <div className="App">
            <Dropdown
                ref={dropdown}
                data={data}
                width={'280px'}
                autocomplete={true}
                value={'7'}
            />
        </div>
    );
}

export default App;

<template>
    <Dropdown ref="dropdown" :data="data" width="280px" :autocomplete="true" />
</template>

<script>
import { Dropdown } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        return {
            data: [
                { group: 'Breads', value: '1', text: 'Wholemeal' },
                { group: 'Breads', value: '2', text: 'Wholegrain' },
                { group: 'Breakfast Cereals', value: '4', text: 'High fibre (wholegrain) oats' },
                { group: 'Breakfast Cereals', value: '5', text: 'Porridge' },
                { group: 'Grains', value: '7', text: 'Rice' },
                { group: 'Grains', value: '8', text: 'Barley' },
                { group: 'Other products', value: '10', text: 'Pasta' },
                { group: 'Other products', value: '11', text: 'Noodles' }
            ]
        }
    }
};
</script>

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<input id='calendar' />

<script>
let instance = jSuites.calendar(document.getElementById('calendar'), {
    format: 'DD/MM/YYYY HH:MM',
    time: true,
    value: Date.now(),
});
</script>
</html>

import { Calendar } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'


function App() {
    const calendar = useRef(null);

    return (
        <div className="App">
            <Calendar ref={calendar} format={'DD/MM/YYYY HH:MM'} time={true} value={Date.now()} />
        </div>
    );
}

export default App;

<template>
    <Calendar
        ref="calendar"
        format="DD/MM/YYYY HH:MM"
        :time="true"
        :value="Date.now()"
    />
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    },
}
</script>

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<input id="color"/>

<script>
let color = jSuites.color(document.getElementById('color'), {
    value: "#F3A568"
});
</script>
</html>

import { Color } from 'jsuites/react'
import { useRef } from 'react'

import 'jsuites/dist/jsuites.css'

function App() {
    const color = useRef(null);

    return (
        <div className="App">
            <Color ref={color} value={'#F3A568'} />
        </div>
    );
}

export default App;

<template>
    <Color value="#F3A568" />
</template>

<script>
import { Color } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Color
    },
};
</script>

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<div id='toolbar'></div>

<script>
jSuites.toolbar(document.getElementById('toolbar'), {
    container: true,
    items:[{
            type: 'icon',
            content: 'undo',
            onclick: function() {
                console.log('undo action');
            }
        },
        {
            type: 'icon',
            content: 'redo',
            onclick: function() {
                console.log('redo action');
            }
        },
        {
            type: 'icon',
            content: 'save',
            onclick: function () {
                console.log('save something');
            }
        },
        {
            type: 'label',
            content: 'Text item',
            onclick: function() {
                console.log('action');
            }
        },
        {
            type: 'divisor',
        },
        {
            type: 'select',
            data: [
                'Verdana',
                'Arial',
                'Courier New'
            ],
            width: '160px',
            render: function(e) {
                return '<span style="font-family:' + e + '">' + e + '</span>';
            },
            onchange: function(a,b,c,d) {
                console.log('font-family: ' + d);
            }
        },
        {
            type: 'icon',
            content: 'format_bold',
            onclick: function(a,b,c) {
                console.log('font-weight: bold');
                // Control state
                c.toggleState();
            },
            state: true,
            active: true,
        },
        {
            type: 'icon',
            content: 'format_color_text',
            onclick: function(element, instance, item) {
                if (! item.color) {
                    var colorPicker = jSuites.color(item, {
                        onchange:function(o, v) {
                            console.log('color:', v);
                        }
                    });
                    colorPicker.open();
                }
            }
        },
        {
            type: 'select',
            data: [
                'border_all',
                'border_outer',
                'border_inner',
                'border_horizontal',
                'border_vertical',
                'border_left',
                'border_top',
                'border_right',
                'border_bottom',
                'border_clear'
            ],
            columns: 5,
            render: function(e) {
                return '<i class="material-icons">' + e + '</i>';
            },
            right: true,
            onload: function(a, b) {
                // Border color
                var container = document.createElement('div');
                var div = document.createElement('div');
                container.appendChild(div);
                var colorPicker = jSuites.color(div, {
                    onchange: function(o, v) {
                        div.style.color = v;
                    },
                });
                var i = document.createElement('i');
                i.classList.add('material-icons');
                i.innerHTML = 'border_color';
                i.onclick = function() {
                    colorPicker.open();
                }
                container.appendChild(i);
                a.children[1].appendChild(container);

                var div = document.createElement('div');
                var picker = jSuites.picker(div, {
                    content: 'line_style',
                    type: 'select',
                    data: [ 1, 2, 3, 4, 5 ],
                    render: function(e) {
                        return '<div style="height: ' + e + 'px; width: 50px; background-color: black;"></div>';
                    },
                    width: '24px',
                });
                a.children[1].appendChild(div);

                var div = document.createElement('div');
                div.style.flex = '1'
                a.children[1].appendChild(div);
            }
        }
    ]
});
</script>
</html>

import { Toolbar } from 'jsuites/react'
import { useRef } from 'react'
import jSuites from 'jsuites';
import 'jsuites/dist/jsuites.css'
function App() {
    const toolbar = useRef(null);

    const items = [{
            type: 'icon',
            content: 'undo',
            onclick: function() {
                console.log('undo action');
            }
        },
        {
            type: 'icon',
            content: 'redo',
            onclick: function() {
                console.log('redo action');
            }
        },
        {
            type: 'icon',
            content: 'save',
            onclick: function () {
                console.log('save something');
            }
        },
        {
            type: 'label',
            content: 'Text item',
            onclick: function() {
                console.log('action');
            }
        },
        {
            type: 'divisor',
        },
        {
            type: 'select',
            data: [
                'Verdana',
                'Arial',
                'Courier New'
            ],
            width: '160px',
            render: function(e) {
                return '<span style="font-family:' + e + '">' + e + '</span>';
            },
            onchange: function(a,b,c,d) {
                console.log('font-family: ' + d);
            }
        },
        {
            type: 'icon',
            content: 'format_bold',
            onclick: function(a,b,c) {
                console.log('font-weight: bold');
                // Control state
                c.toggleState();
            },
            state: true,
            active: true,
        },
        {
            type: 'icon',
            content: 'format_color_text',
            onclick: function(element, instance, item) {
                if (! item.color) {
                    var colorPicker = jSuites.color(item, {
                        onchange:function(o, v) {
                            console.log('color:', v);
                        }
                    });
                    colorPicker.open();
                }
            }
        },
        {
            type: 'select',
            data: [
                'border_all',
                'border_outer',
                'border_inner',
                'border_horizontal',
                'border_vertical',
                'border_left',
                'border_top',
                'border_right',
                'border_bottom',
                'border_clear'
            ],
            columns: 5,
            render: function(e) {
                return '<i class="material-icons">' + e + '</i>';
            },
            right: true,
            onload: function(a, b) {
                // Border color
                var container = document.createElement('div');
                var div = document.createElement('div');
                container.appendChild(div);
                var colorPicker = jSuites.color(div, {
                    onchange: function(o, v) {
                        div.style.color = v;
                    },
                });
                var i = document.createElement('i');
                i.classList.add('material-icons');
                i.innerHTML = 'border_color';
                i.onclick = function() {
                    colorPicker.open();
                }
                container.appendChild(i);
                a.children[1].appendChild(container);

                var div = document.createElement('div');
                var picker = jSuites.picker(div, {
                    content: 'line_style',
                    type: 'select',
                    data: [ 1, 2, 3, 4, 5 ],
                    render: function(e) {
                        return '<div style="height: ' + e + 'px; width: 50px; background-color: black;"></div>';
                    },
                    width: '24px',
                });
                a.children[1].appendChild(div);

                var div = document.createElement('div');
                div.style.flex = '1'
                a.children[1].appendChild(div);
            }
        }
    ];

    return (
        <div className="App">
            <Toolbar ref={toolbar} container={true} items={items} />
        </div>
  );
}
export default App;

<template>
    <Toolbar ref="toolbar" :container="true" :items="items"/>
</template>

<script>
import { Toolbar } from "jsuites/vue";
import jSuites from "jsuites"
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Toolbar
    },
    data(){
        const items = [{
            type: 'icon',
            content: 'undo',
            onclick: function() {
                console.log('undo action');
            }
        },
        {
            type: 'icon',
            content: 'redo',
            onclick: function() {
                console.log('redo action');
            }
        },
        {
            type: 'icon',
            content: 'save',
            onclick: function () {
                console.log('save something');
            }
        },
        {
            type: 'label',
            content: 'Text item',
            onclick: function() {
                console.log('action');
            }
        },
        {
            type: 'divisor',
        },
        {
            type: 'select',
            data: [
                'Verdana',
                'Arial',
                'Courier New'
            ],
            width: '160px',
            render: function(e) {
                return '<span style="font-family:' + e + '">' + e + '</span>';
            },
            onchange: function(a,b,c,d) {
                console.log('font-family: ' + d);
            }
        },
        {
            type: 'icon',
            content: 'format_bold',
            onclick: function(a,b,c) {
                console.log('font-weight: bold');
                // Control state
                c.toggleState();
            },
            state: true,
            active: true,
        },
        {
            type: 'icon',
            content: 'format_color_text',
            onclick: function(element, instance, item) {
                if (! item.color) {
                    var colorPicker = jSuites.color(item, {
                        onchange:function(o, v) {
                            console.log('color:', v);
                        }
                    });
                    colorPicker.open();
                }
            }
        },
        {
            type: 'select',
            data: [
                'border_all',
                'border_outer',
                'border_inner',
                'border_horizontal',
                'border_vertical',
                'border_left',
                'border_top',
                'border_right',
                'border_bottom',
                'border_clear'
            ],
            columns: 5,
            render: function(e) {
                return '<i class="material-icons">' + e + '</i>';
            },
            right: true,
            onload: function(a, b) {
                // Border color
                var container = document.createElement('div');
                var div = document.createElement('div');
                container.appendChild(div);
                var colorPicker = jSuites.color(div, {
                    onchange: function(o, v) {
                        div.style.color = v;
                    },
                });
                var i = document.createElement('i');
                i.classList.add('material-icons');
                i.innerHTML = 'border_color';
                i.onclick = function() {
                    colorPicker.open();
                }
                container.appendChild(i);
                a.children[1].appendChild(container);

                var div = document.createElement('div');
                var picker = jSuites.picker(div, {
                    content: 'line_style',
                    type: 'select',
                    data: [ 1, 2, 3, 4, 5 ],
                    render: function(e) {
                        return '<div style="height: ' + e + 'px; width: 50px; background-color: black;"></div>';
                    },
                    width: '24px',
                });
                a.children[1].appendChild(div);

                var div = document.createElement('div');
                div.style.flex = '1'
                a.children[1].appendChild(div);
            }
        }];

        return { items }
    }
};
</script>

Deliver high-quality interfaces and applications to your end-user

Explore the powerful and versatile components designed to elevate your productivity. From data management to collaboration, our ecosystem seamlessly integrates to meet your needs.


Small, optimized plugins for efficient performance Optimized

Small, optimized plugins for efficient performance.

A diverse range of solutions within a single collection All-in-One Solutions

A diverse range of solutions within a single collection.

Tools for creating rich, user-friendly web interfaces and applications User-Friendly Web Apps

Tools for creating rich, user-friendly web interfaces and applications.

Simplified management of complex data inputs, maintaining familiarity for users Simplified

Simplified management of complex data inputs, maintaining familiarity for users.

Enhanced software experience for clients Enhancing Client Experience

Enhanced software experience for clients.

Capability to develop sophisticated and attractive UI designs Enhanced software experience for clients.

Capability to develop sophisticated and attractive UI designs.

Streamlined, fast, and easy-to-use components Fast and Easy

Streamlined, fast, and easy-to-use components.

Unified coding across multiple platforms for consistent development Unified

Unified coding across multiple platforms for consistent development.

Uniform, excellent user experience across various devices Consistent

Uniform, excellent user experience across various devices.

Component Ecosystem

Explore the powerful and versatile components designed to elevate your productivity. From data management to collaboration, our ecosystem seamlessly integrates to meet your needs.


Jspreadsheet Pro Logo
Jspreadsheet Pro

Enterprise JavaScript data grid component to integrate spreadsheet UI into your web-based application.

Intrasheets Logo
Intrasheets

Collaborate with ease using Intrasheets, an intuitive tool for managing spreadsheets across teams, ensuring that everyone stays on the same page.

Jspreadsheet CE Logo
Jspreadsheet CE

An open-source spreadsheet component that offers essential features for developers looking for flexibility without the need for a commercial license.

LemonadeJS Logo
Lemonade

A light and easy-to-use solution for creating elegant UI elements, giving your web apps a refreshing boost in both style and functionality.

What is Jsuites?

Jsuites is a versatile collection of free lightweight, responsive JavaScript plugins and web components designed to enhance user experience across various web-based projects. This suite offers a range of tools that enable developers to maintain a unified codebase while building sophisticated, user-friendly interfaces. With optimized performance and a diverse set of solutions, jSuites allows for the streamlined management of complex data inputs, providing a familiar and efficient user experience across multiple platforms and devices.

The base package of Jsuites includes essential components such as dropdowns, calendars, input masks, modals, and more, all aimed at simplifying the development of rich user interfaces. Additionally, extensions like the JavaScript Cropper, Organogram, and Activity Heatmap further expand the capabilities of the suite. Fully compatible with any JavaScript library, jSuites ensures that developers can create modern, attractive UIs with ease while delivering a consistent, high-quality user experience across different devices and platforms.

Edit this page on GitHub