Drow.js: A Practical Look at the Tiny Web Components Library If you've built a Web...

Drow.js: A Practical Look at the Tiny Web Components Library

If you've built a Web Component before, you've probably written something like this:

class MyComp extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    // boilerplate setup
  }

  // lifecycle methods
}

customElements.define('my-comp', MyComp);

It works, but there's a lot of ceremony for something relatively simple. Drow.js strips away that ceremony. Instead of class inheritance and lifecycle methods, you define your components as plain JavaScript objects. The library handles the rest.

And it's tiny—under 1kb gzipped with zero dependencies.

What Is Drow.js?

Drow is a minimalist wrapper around the Web Components API. It takes the standard Custom Elements spec and makes it feel less like writing framework code and more like configuring objects.

The core idea: Components are objects, not classes.

The Object-Based Approach

Here's how you define a Drow component:

var myComp = {
    "name": "my-comp",
    "props": ['title', 'link'],
    "template": `<div>
        <div>Title: {{title}}</div>
        <div>Link: {{link}}</div>
    </div>`
}

Drow.register(myComp);

Then use it in HTML like any Web Component:

<my-comp title="Great Name" link="https://something.com"></my-comp>

Notice a few things:

• name: Must be dash-separated (Web Components requirement)
• props: Array of attribute names that can be set on the element
• template: HTML with handlebars-style {{variable}} placeholders

That's the bare minimum. Let's look at what else you can add.

Building a Real Component

Here's an example component from the documentation with some practical features:

var config = {
    "name": "my-comp",
    "props": ['prop1', 'prop2'],
    "css": "b { color: blue; }",
    "template": `<div>
        <div>Every time you click the timestamp updates.</div>
        <b>Click for the timestamp</b>
        <div>{{prop1}}</div>
    </div>`,
    "init": function(config) {
        let prop1 = this.getAttribute('prop1') || "";
        const comp = this.getComp();
        
        comp.addEventListener('click', e => {
            comp.querySelector("b").innerHTML = new Date();
        });
    },
    "watch": function(attribute) {
        if (attribute.name == 'prop1') {
            attribute.comp.querySelector('b').innerHTML = `Hello, ${attribute.newValue}`;
        }
    }
}

Drow.register(config);

Now we've added three new features:

1. CSS Scoping

The css field contains component-scoped styles. They won't leak out and external styles won't leak in. Shadow DOM encapsulation handled automatically.

2. The init Hook

The init function runs when the component is created. It gets access to the component via this.getComp() and can:

• Set up event listeners
• Query the template
• Read initial prop values with this.getAttribute()

This is where you add interactivity without the lifecycle method overhead.

3. The watch Hook

The watch function triggers whenever an attribute changes. It receives an object with:

• name: The attribute that changed
• newValue: The new value
• comp: A reference to the component

This is how you react to updates from outside the component—essentially a property observer.

A Practical Example: Timestamp Component

Let's build something concrete. A component that displays when it was last clicked:

var timestampComp = {
    "name": "last-click",
    "props": ['label'],
    "css": `
        .container {
            padding: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f5f5f5;
        }
        .timestamp {
            font-weight: bold;
            color: #0066cc;
            cursor: pointer;
            padding: 8px;
            user-select: none;
        }
        .timestamp:hover {
            background: #e8e8e8;
            border-radius: 2px;
        }
    `,
    "template": `
        <div class="container">
            <p>{{label}}</p>
            <div class="timestamp">Click here for current time</div>
            <p id="output"></p>
        </div>
    `,
    "init": function(config) {
        const comp = this.getComp();
        const timestamp = comp.querySelector('.timestamp');
        const output = comp.querySelector('#output');
        
        timestamp.addEventListener('click', () => {
            output.textContent = new Date().toLocaleString();
        });
    }
}

Drow.register(timestampComp);

Use it:

<last-click label="Last clicked at:"></last-click>

That's it. No build step, no complicated setup. Just define, register, and use.

How the Templating Works

Drow uses simple mustache/handlebars style variable replacement. Anything in {{}} gets replaced with the prop value:

"template": `
    <h1>{{title}}</h1>
    <p>{{description}}</p>
`

The variables are applied by prop name from your attributes:

<my-card 
    title="Hello World" 
    description="A simple component">
</my-card>

No special syntax, no directives, no magical binding. Just string interpolation based on props.

Reacting to Changes with watch

The watch hook is useful for when attributes get updated dynamically:

var greeting = {
    "name": "greeting",
    "props": ['name'],
    "template": `<h1>Hello, <span class="user"></span></h1>`,
    "watch": function(attribute) {
        if (attribute.name == 'name') {
            attribute.comp.querySelector('.user').textContent = attribute.newValue;
        }
    }
}

Drow.register(greeting);

Now if you change the name:

const card = document.querySelector('greeting');
card.setAttribute('name', 'Alice'); // The component updates automatically

Communication Between Components

For parent-to-child, use props and attributes. For child-to-parent, use custom events (standard Web Component pattern):

var buttonComp = {
    "name": "my-button",
    "props": ['text'],
    "template": `<button>{{text}}</button>`,
    "init": function(config) {
        const comp = this.getComp();
        const btn = comp.querySelector('button');
        
        btn.addEventListener('click', () => {
            comp.dispatchEvent(new CustomEvent('button-clicked', {
                detail: { timestamp: Date.now() }
            }));
        });
    }
}

Drow.register(buttonComp);

Listen for it in your HTML:

<my-button text="Click me"></my-button>

<script>
    document.querySelector('my-button').addEventListener('button-clicked', (e) => {
        console.log('Button clicked at:', e.detail.timestamp);
    });
</script>

Setup and Installation

Via Script Tag

Include the file directly in your HTML:

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

<my-comp prop="value"></my-comp>

<script>
    var myComp = {
        "name": "my-comp",
        "props": ['prop'],
        "template": `<div>{{prop}}</div>`
    };
    
    Drow.register(myComp);
</script>

Via NPM

npm install drow

Then import it:

import Drow from 'drow';

const myComp = {
    "name": "my-comp",
    "props": ['prop'],
    "template": `<div>{{prop}}</div>`
};

Drow.register(myComp);

When Should You Use Drow?

Good fit:

• You want Web Components without the boilerplate
• Building UI components for your site
• Small to medium projects
• You want a library that's easy to understand and modify
• Bundle size matters
• Prototyping and learning

Consider alternatives:

• You need complex state management (React/Vue/Svelte are better here)
• Very large enterprise applications with extensive component ecosystems
• You need advanced templating or reactivity features

Comparison with Lit

Both are lightweight Web Component libraries, but they approach it differently:

Drow keeps things simple. Lit adds more power at the cost of a bit more complexity. Pick based on your project needs.

Recent Updates

The library recently converted its internal naming from DrowJS to Drow, making the API cleaner and more consistent. The core functionality remains the same—object-based component definitions with minimal overhead.

Getting the Code

Everything is on GitHub: https://github.com/johnfacey/drowjs

There's a /docs folder with more detailed documentation, and you can see examples in index.html and samples.js.

To run locally:

npm install
npm run server

The Bottom Line

Drow.js won't replace React or Vue for complex applications. But if you want to use the browser's native component system without fighting the API, it's a really pleasant experience.

The value of Drow is in its simplicity. You get Web Component encapsulation, scoped CSS, prop-based templating, and lifecycle hooks—all in a tiny package with almost no learning curve.

If that sounds useful for your project, give it a try. The barrier to entry is basically zero.

Learn more: Check out @johnfacey on Twitter, @johnfacey on BlueSky or visit the GitHub repository.