← Examples

ESM — ES Module inclusion

The recommended approach for modern bundlers (Vite, Rollup, webpack, esbuild) and native <script type="module"> usage. The library ships as taga11y.mjs (ESM) and is imported as a named default export.

Works in any browser that supports ES modules (all evergreen browsers). In a bundler, import from 'taga11y' after npm install taga11y. In a bare <script type="module">, import from the local dist/taga11y.mjs path.

View code 
<!-- 1. Include the stylesheet -->
<link rel="stylesheet" href="../dist/taga11y.css" />

<!-- 2. Use a module script to import the library -->
<script type="module">
  import { Taga11y } from '../dist/taga11y.mjs';

  new Taga11y(document.getElementById('tags'), {
    suggestions: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'],
    maxTags: 5,
  });
</script>
View bundler usage 
// 1. Install via npm
//    npm install taga11y

// 2. Import in your source code
import Taga11y from 'taga11y';
import 'taga11y/dist/taga11y.css';

// 3. Instantiate
const widget = new Taga11y(inputEl, {
  suggestions: ['Apple', 'Banana', 'Cherry'],
});