Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including with all npm packages installed. Try it out:

var trendsetterTj = require("")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors. v1.2.0


Trendsetter is a lightweight JavaScript plugin to enable module-based lazy-loading and injection of stylesheets.

Have any suggestions or feedback? Reach out!

Getting Started


npm install or if you're old-school download and insert trendsetter.min.js ✌️


Trendsetter targets all HTML elements containing a data-trend attribute.

<div data-trend="foo">
    I will be targeted!


Create a stylesheet for your module-specific styles.

// foo.css

.foo {
    /* module-specific styles go here */

Important: The name of your CSS file must contain the value of your data-trend attribute.


Initialize Trendsetter by creating a new Trendsetter object.

var t = new Trendsetter();

Trendsetter accepts a list of options. Passing no options (as in the example above) defaults to:

var t = new Trendsetter({
    directory: "css/",
    prefix: "",
    callback: function() {}


Calling Trendsetter with the settings above will result in a stylesheet named foo.css being appended to the head on the first occurence of a data-trend="foo" element entering the viewport.

<link type="text/css" rel="stylesheet" href="css/target.css">

Trendsetter handles elements entering the viewport using an IntersectionObserver and will unobserve the respective element once its stylesheet has been added. Duplicates are handled automatically so that each stylesheet is only added once.


directoryStringSets the directory path Trendsetter will prefix your CSS file with./css
prefixStringAllows for Trendsetter to reflect prefixes to your CSS file. If your naming convention requires your CSS filename to be instead of foo.css, you would pass a value of "foo." here.null
callbackFunctionAllows you to pass a callback function to fire once Trendsetter has added a stylesheet. Accepts a single argument containing the class name of the element for which the stylesheet was added.null



This project is licensed under the MIT License.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free