Simple yet flexible JavaScript charting for designers & developers. Our demo chart js is available in here Demo charts

All demo chart config is available in src/js/charts/**.js.

Example Chart js configuration

<!-- Chart js -->
<script src="vendors/chart.js/dist/chart.umd.js"></script>

<!-- Chart config -->
<script src="src/js/chart/finance.js"></script>
<script src="src/js/chart/sales.js"></script>
<script src="src/js/chart/crm.js"></script>
<script src="src/js/chart/support.js"></script>
<script src="src/js/chart/sales-team.js"></script>
<script src="src/js/chart/analytics.js"></script>

Please read more documentation about chart js in https://www.chartjs.org/

100% native and cool looking animated JavaScript/CoffeScript gauge. Demo charts

All demo chart config is available in html file.

Example Chart js configuration

  <!-- Gauge chart  -->
  <script src="src/js/chart/gauge.min.js"></script>
  <script>
    var opts = {
      angle: 0, // The span of the gauge arc
      lineWidth: 0.29, // The line thickness
      radiusScale: 1, // Relative radius
      pointer: {
        length: 0.57, // // Relative to gauge radius
        strokeWidth: 0.035, // The thickness
        color: '#06b6d4' // Fill color
      },
      staticZones: [
         {strokeStyle: "#ec4899", min: 0, max: 1000}, // Red
         {strokeStyle: "#eab308", min: 1000, max: 2000}, // Yellow
         {strokeStyle: "#22c55e", min: 2000, max: 3000}, // Green
      ],
      limitMax: false,     // If false, max value increases automatically if value > maxValue
      limitMin: false,     // If true, the min value of the gauge will be fixed
      colorStart: '#6FADCF',   // Colors
      colorStop: '#8FC0DA',    // just experiment with them
      strokeColor: '#E0E0E0',  // to see which ones work best for you
      generateGradient: true,
      highDpiSupport: true,     // High resolution support
      
    };

    var target = document.getElementById('Gauge'); // your canvas element
    var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
    gauge.maxValue = 3000; // set max gauge value
    gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
    gauge.animationSpeed = 43; // set animation speed (32 is default value)
    gauge.set(1725); // set actual value
  </script>

Please read more documentation about gauge js in https://github.com/bernii/gauge.js/

Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars. Our demo dropzone uploader is available in here dropzone uploader

Example Dropzone configuration

<!-- Vendor -->
<script src="vendors/dropzone/dist/dropzone-min.js"></script>

<!-- Configuration -->
<script src="src/js/vendor.js"></script>

Demo config available in src/js/vendor.js function myUploader();

More information about Dropzone please read on here

Lightweight, powerful javascript datetimepicker with no dependencies. Flatpickr demo is available in here Date picker & Start and End date picker

Example Flatpickr configuration

<!-- Vendor -->
<script src="vendors/flatpickr/dist/flatpickr.min.js"></script>
<script src="vendors/flatpickr/dist/plugins/rangePlugin.js"></script>

<!-- Configuration -->
<script src="src/js/theme.js"></script>

Demo config available in src/js/theme.js function myDatepicker();

More information about Flatpickr please read on here

Full-sized drag & drop event calendar. Our demo FullCalendar uploader is available in here Demo FullCalendar

Example FullCalendar configuration

<!-- Html -->
<div id="calendar"></div>

<!-- Vendor -->
<script src="vendors/@fullcalendar/index.global.min.js"></script>

<!-- Configuration -->
<script src="src/js/vendor.js"></script>

Demo config available in src/js/vendor.js function myCalendar();

For more documentation please check in here https://github.com/fullcalendar/fullcalendar.

Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes.

Example Glightbox configuration

<!-- Simple image -->
<a href="src/img/large.jpg" class="glightbox">
  <img src="src/img/small.jpg" alt="image" />
</a>

<!-- Video -->
<a href="https://vimeo.com/115041822" class="glightbox2">
  <img src="src/img/small.jpg" alt="image" />
</a>

<!-- Gallery -->
<a href="src/img/large.jpg" class="glightbox3" data-gallery="gallery1">
  <img src="src/img/small.jpg" alt="image" />
</a>
<a href="video.mp4" class="glightbox3" data-gallery="gallery1">
  <img src="src/img/small.jpg" alt="image" />
</a>

<!-- Simple Description -->
<a href="src/img/large.jpg" class="glightbox4" data-glightbox="title: My title; description: this is the slide description">
  <img src="src/img/small.jpg" alt="image" />
</a>

<!-- Vendor -->
<script src="vendors/glightbox/dist/js/glightbox.min.js"></script>

<!-- Configuration -->
<script src="src/js/vendor.js"></script>

Demo config available in src/js/vendor.js function myLightbox();

For more documentation please check in here https://github.com/biati-digital/glightbox.

A lightweight Javascript library for creating interactive maps and pretty data visualization.

Example Jsvectormap configuration

<!-- html -->
<div id="worldmap" class="w-full" style="min-height: 18rem"></div>

<!-- vendor -->
<script src="vendors/jsvectormap/dist/jsvectormap.min.js"></script>
<script src="vendors/jsvectormap/dist/maps/world.js"></script>

<!-- Configuration -->
<script src="src/js/vendor.js"></script>

Demo config available in src/js/vendor.js function myMaps();

For more documentation please check in here https://github.com/themustafaomar/jsvectormap.

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It's used in thousands of websites, including some of those you visit daily.

Example Prism.js configuration

<!-- html -->
<pre>
<code class="language-html" data-lang="html">
  Your code in here
</code>
</pre>

<!-- Vendor -->
<script src="src/js/prism.js"></script>

For more documentation please check in here https://prismjs.com/.

DataTables but in Vanilla ES2018 JS. Simple-DataTables demo is available in here Demo

Example Simple-DataTables configuration

<!-- vendor -->
<script src="vendors/simple-datatables/dist/umd/simple-datatables.js"></script>

<!-- Configuration -->
<script src="src/js/theme.js"></script>

Demo config available in src/js/theme.js function myTablesorter();

For more documentation please check in here https://github.com/fiduswriter/Simple-DataTables.

SimpleMDE is a simple, embeddable, and beautiful JS markdown editor. SimpleMDE demo is available in here SimpleMDE

Example SimpleMDE configuration

<!-- vendor -->
<script src="vendors/simplemde/dist/simplemde.min.js"></script>

<!-- Configuration -->
<script src="src/js/vendor.js"></script>

Demo config available in src/js/vendor.js function myEditor();

For more documentation please check in here https://simplemde.com/.

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.

Example Splide configuration

<!-- html -->
<div id="card-carousel" class="splide nav-hidden" role="group" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</div>

<!-- vendor -->
<script src="vendors/@splidejs/splide/dist/js/splide.min.js"></script>

<!-- Configuration -->
<script>
document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#card-carousel', {
    perPage    : 2,
    type   : 'loop',
    breakpoints: {
      560: {
        perPage: 1,
      },
    },
  } ).mount();
} );
</script>

Change id #card-carousel and custom config in new Splide

For more documentation please check in here https://splidejs.com/guides/getting-started/.

Vanilla javascript form validation micro-library. Pristine demo is available in here Form validation

Example Pristine configuration

<!-- vendor -->
<script src="vendors/pristinejs/dist/pristine.min.js"></script>

<!-- Configuration -->
<script src="src/js/theme.js"></script>

Demo config available in src/js/theme.js function myValidation();

For more documentation please check in here https://pristine.js.org/.

Lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue. Tagify demo is available in here Input Tags, Select and Input Select

Example Tagify configuration

<!-- vendor -->
<script src="vendors/@yaireo/tagify/dist/tagify.js"></script>

<!-- Configuration -->
<script src="src/js/theme.js"></script>

<!-- select -->
<script>
  // The DOM element you wish to replace with Tagify
  var input = document.querySelector('input[name=basic]');
  // initialize Tagify on the above input node reference
  new Tagify(input)

  var input = document.querySelector('input[name=tags]')
  var tagify = new Tagify(input, {
      mode : "select",
      whitelist: ["first option", "second option", "third option"],
      blacklist: ['foo', 'bar'],
      keepInvalidTags: true,   // do not auto-remove invalid tags
      dropdown: {
          // closeOnSelect: false
      }
  })
  // bind events
  tagify.on('add', onAddTag)
  tagify.DOM.input.addEventListener('focus', onSelectFocus)
  function onAddTag(e){
      console.log(e.detail)
  }
  function onSelectFocus(e){
      console.log(e)
  }
</script>

<!-- Select input -->
<script id="rendered-js">
  var inputElm = document.querySelector('input.tagify-select'),
      whitelist = ["Ari","Boy","Caca","Doni","Ema","Fanny","Ghosh","Hana","Icha","Jeje","Kalban","Leo","Mona","Nabil","Oman","Pepi","Qusa","Radja","Sasa","Toni","Udin","Verlyn","Weird","Xana","Yaoyao","Zuma"];

  // initialize Tagify on the above input node reference
  var tagify = new Tagify(inputElm, {
    enforceWhitelist: true,
    // make an array from the initial input value
    whitelist: inputElm.value.trim().split(/\s*,\s*/) 
  });

  // Chainable event listeners
  tagify.on('add', onAddTag).
  on('remove', onRemoveTag).
  on('input', onInput).
  on('edit', onTagEdit).
  on('invalid', onInvalidTag).
  on('click', onTagClick).
  on('focus', onTagifyFocusBlur).
  on('blur', onTagifyFocusBlur).
  on('dropdown:hide dropdown:show', e => console.log(e.type)).
  on('dropdown:select', onDropdownSelect);

  var mockAjax = function mockAjax() {
    var timeout;
    return function (duration) {
      clearTimeout(timeout); // abort last request
      return new Promise(function (resolve, reject) {
        timeout = setTimeout(resolve, duration || 700, whitelist);
      });
    };
  }();

  // tag added callback
  function onAddTag(e) {
    console.log("onAddTag: ", e.detail);
    console.log("original input value: ", inputElm.value);
    tagify.off('add', onAddTag); // exmaple of removing a custom Tagify event
  }

  // tag remvoed callback
  function onRemoveTag(e) {
    console.log("onRemoveTag:", e.detail, "tagify instance value:", tagify.value);
  }

  // on character(s) added/removed (user is typing/deleting)
  function onInput(e) {
    console.log("onInput: ", e.detail);
    tagify.settings.whitelist.length = 0; // reset current whitelist
    tagify.loading(true).dropdown.hide.call(tagify); // show the loader animation
    // get new whitelist from a delayed mocked request (Promise)
    mockAjax().
    then(function (result) {
      // replace tagify "whitelist" array values with new values
      // and add back the ones already choses as Tags
      tagify.settings.whitelist.push(...result, ...tagify.value);
      // render the suggestions dropdown.
      tagify.loading(false).dropdown.show.call(tagify, e.detail.value);
    });
  }

  function onTagEdit(e) {
    console.log("onTagEdit: ", e.detail);
  }

  // invalid tag added callback
  function onInvalidTag(e) {
    console.log("onInvalidTag: ", e.detail);
  }

  // invalid tag added callback
  function onTagClick(e) {
    console.log(e.detail);
    console.log("onTagClick: ", e.detail);
  }

  function onTagifyFocusBlur(e) {
    console.log(e.type, "event fired");
  }

  function onDropdownSelect(e) {
    console.log("onDropdownSelect: ", e.detail);
  }
  //# sourceURL=pen.js
</script>

Demo config available in src/js/theme.js function myTagify();

For more documentation please check in here https://github.com/yairEO/tagify.

Drag and drop so simple it hurts.

Example Alpine Sort configuration

<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/sort@3.x.x/dist/cdn.min.js"></script>
 
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

For more documentation please check in here https://alpinejs.dev/plugins/sort.

A lightweight script to animate scrolling to anchor links.

Example Smooth Scroll configuration

<!-- Vendor -->
<script src="src/js/smooth.js"></script>

<!-- Configuration -->
<script>
// smooth scroll
const mySmooth = function () {
  var scroll = new SmoothScroll('a[href*="#"]', {
    offset : 30,
    speed: 1200,
    speedAsDuration: true
  });
}
mySmooth();
</script>

If you don't like using js, you can use css smooth scroll from tailwind css

<!-- html -->
<html class="scroll-smooth">

For more documentation please check in here https://github.com/cferdinandi/smooth-scroll.