Tailwind CSS Copy Markup Plugin API

Installation

To get started, install Copy Markup plugin via npm, else you can skip this step if you are already using Preline UI as a package.

1. Install the plugin

   Install @preline/copy-markup via npm

   Terminal

                             
                               npm i @preline/copy-markup
                             
                           

2. Add the plugin CSS

   @import the plugin's CSS file into your Tailwind CSS file.

   main.css

                             
                               @import "tailwindcss";
                               
                               /* @preline/copy-markup */
                               /* [!code highlight:1] */
                               @import "./node_modules/@preline/copy-markup/theme.css";
                             
                           

3. Add the plugin JavaScript

   Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

   HTML

   <script src="./node_modules/@preline/copy-markup/index.js"></script>

   ---

   Additional Initialization Options

   Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

   HTML (non-auto)

   <script type="module"> // [!code highlight:3] import HSCopyMarkup from "@preline/copy-markup/non-auto.mjs"; new HSCopyMarkup(document.querySelector("#copy-markup")); </script>

   ---

   Via bundler

   When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.

   JavaScript (auto)

                             
                               import "@preline/copy-markup";
                             
                           

   JavaScript (non-auto)

                             
                               import HSCopyMarkup from "@preline/copy-markup/non-auto";
                               
                               HSCopyMarkup.autoInit();
                               
                               // Or initialize a specific element manually
                               const el = document.querySelector("#copy-markup");
                               if (el) new HSCopyMarkup(el);
                             
                           

Example

Add input fields.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <div id="hs-wrapper-for-copy">
                          <input id="hs-content-for-copy" type="text" class="py-3 px-4 block w-full border-stone-200 rounded-lg text-sm text-stone-800 focus:z-10 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500" placeholder="Enter Name">
                        </div>

                        <button type="button" data-hs-copy-markup='{
                            "targetSelector": "#hs-content-for-copy",
                            "wrapperSelector": "#hs-wrapper-for-copy",
                            "limit": 3
                          }' id="hs-copy-content">
                          Add Name
                        </button>
                      
                    

Methods

The HSCopyMarkup object is contained within the global window object

                      
                        const copyMarkup = new HSCopyMarkup(document.querySelector('#copy-markup'));
                        const deleteBtn = document.querySelector('#delete-btn');

                        deleteBtn.addEventListener('click', () => {
                          copyMarkup.delete(document.querySelector('#copy-markup-item-1'));
                        });
                      
                    

                      
                        const { element } = HSCopyMarkup.getInstance('#copy-markup', true);
                        const deleteBtn = document.querySelector('#delete-btn');

                        deleteBtn.addEventListener('click', () => {
                          element.delete(document.querySelector('#copy-markup-item-1'));
                        });
                      
                    

Events

                      
                        const el = HSCopyMarkup.getInstance('#copy-markup');

                        el.on('copy', (copiedElement) => {...});
                      
                    

Ready to use Components

Copy Markup

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Copy Markup examples