Chart Js

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.min.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/

Gauge.js

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 wpajskh
      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

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

Flatpickr

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

Fullcalendar

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/main.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.

Glightbox

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.

Jsvectormap

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/js/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.js

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/.

Simple-Datatables

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

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 JS

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/.

Pristine Js

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/.

Tagify

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.min.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.

Dragula

Drag and drop so simple it hurts.

Example Dragula configuration

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

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

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

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

Smooth Scroll

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.