Skip to content
knit together html, css, and javascript into reusable bundles
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Knit together html, css, and javascript into reusable browserifiable bundles with minimal side effects.

All the classes, IDs, and css selectors in the knitted files are transformed with a prefix value to ensure that no conflicts with existing class names will occur when deploying a widget into an unknown environment.


build a widget

Widgets are just html, css, and javascript.

Just hack up a widget/beep.html:

<div class="beep">
  <div class="title"></div>
  <div class="body"></div>

and write some css for your widget, any filename will do.

The class names you pick here will be completely local to your widget so don't worry about naming.

.beep {
    margin: auto;
    width: 400px;

.title {
    font-weight: bold;

.body {
    padding: 20px;
    background-color: rgb(48,51,55);
    color: rgb(220,230,240);
    border-radius: 10px;

then bundle all the html in widget/ into widget/yarn.js:

$ yarnify knit widget -o widget/yarn.js

now just require('./yarn') in a widget/index.js:

var yarn = require('./yarn');

module.exports = function (title) {
    var elem = yarn('beep.html');
    elem.querySelector('.title').textContent = title;

    return {
        body : function (x) {
            elem.querySelector('.body').textContent = x;
        appendTo : function (e) { e.appendChild(elem) }

Now you can use this widget as a module with browserify!

Just hack up an entry.js:

var domready = require('domready');
var widget = require('./widget');

domready(function () {
    var w = widget('robots');
    w.body('in SPACE!');

Install domready, a local yarnify, and browserify everything up:

$ npm install domready yarnify
$ browserify entry.js -o bundle.js

Now you can drop the bundle.js into some html:

<script src="bundle.js"></script>

Now you have a reusable bundle that won't clobber any class or ID names in the webapps where you might want to use the widget!

If you make a nifty reusable widget that other people could benefit from, consider releasing it on npm!


Usage: yarnify [directory] OPTIONS

Generate a yarn output bundle from all the html and css files in [directory].

    -o output file or '-' (default)


These are the methods you can call on generated yarn bundles.

var yarn = require('./yarn')

var elem = yarn(file)

Return a container div with class _container around the html fragment at file.

The html fragment is transformed with a prefix value for all classes and IDs, so to get at the class and ID names from original file, use the wrapped elem.querySelector(), elem.querySelectorAll(), elem.getElementById(), or elem.getElementsByClassName() methods documented below.

You can pass the elem to jquery or whichever other DOM manipulation toolkit you please, just be aware that the css selector wrapping in those libraries won't work as you might expect.


Like the standard Element.querySelector except that classes and IDs will have the document prefix inserted automatically into the selector.


Like the standard Element.querySelectorAll except that classes and IDs will have the document prefix inserted automatically into the selector.


Look up an element by its id from the original html before prefixing.

This function would normally be available at the document but this is a handy place to look up an id with the prefix value prepended.


Look up elements by their class from the original html before prefixing.



The prefix prepended to all class and id values.


  • knit standalone static assets like images into a target directory:
cp -r $src/static $dst


With npm do:

npm install -g yarnify



Something went wrong with that request. Please try again.