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
480 +
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.
Dropdown
Enhance your forms with dynamic drop-down and autocomplete features.
Calendar
Implement interactive calendars for event management and scheduling.
Toolbars
Enables embedding dynamic, fully customizable toolbars into web applications.
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>
<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>
<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>
<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>
Deliver high-quality interfaces
and applications to your end-user
Jspreadsheet reduces customers development time. Here are some of their experiences.
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