What is Z-Tags?

Z-Tags is a javascript plugin that lets you create tags areas very easily. By using it, you will be able to have tags sections on your webpage, and the possibility to let users add tags in that sections.

You won't need any javascript library, it is totally written in vanillaJs.


Here you can see a default tags section. There are 3 tags predefined, you can add and delete tags in it (by clicking the area). There is also a method to get the data in it (the button just bellow the area).


  1. Include the css and js files in your html file. ("download" button)
  2. Create a div with an id or class you will be able to find with javascipt.
    <div id="demo1"></div>
  3. In your javascript scripts, create an instance of the ZTAGS class for each div that will be transformed in a tags section, add it some arguments if necessary.
    var demo1 = document.getElementById('demo1');
    var tagsdemo1 = new ZTAGS({
    element: demo1,
    options: {readonly: false, pattern: false, color: "#6677CC"}


2 arguments are available, they have to be given on the instanciation of an object with those names :


Some javascript methods have been created:



Pattern limited

( ["apple", "cherry", "lemon"] )

External function calls

Colored tags