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.
20k +
Weekly downloads
400+
GitHub stars
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
Optimized
Small, optimized plugins for efficient performance.
All-in-One Solutions
A diverse range of solutions within a single collection.
User-Friendly Web Apps
Tools for creating rich, user-friendly web interfaces and applications.
Simplified
Simplified management of complex data inputs, maintaining familiarity for users.
Enhancing Client Experience
Enhanced software experience for clients.
Enhanced software experience for clients.
Capability to develop sophisticated and attractive UI designs.
Fast and Easy
Streamlined, fast, and easy-to-use components.
Unified
Unified coding across multiple platforms for consistent development.
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
Enterprise JavaScript data grid component to integrate spreadsheet UI into your web-based application.
Intrasheets
Collaborate with ease using Intrasheets, an intuitive tool for managing spreadsheets across teams, ensuring that everyone stays on the same page.
Jspreadsheet CE
An open-source spreadsheet component that offers essential features for developers looking for flexibility without the need for a commercial license.
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.
Subscribe to our newsletter
Tech news, tips and technical advice
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.