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

John Facey — Wed, 20 May 2026 05:44:43 +0000

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:

Feature	Drow	Lit
Bundle Size	<1kb	~5kb
Learning Curve	Minimal	Low-Medium
Dependencies	None	None
Syntax	Objects	Classes + Decorators
Templating	Handlebars	Tagged template literals
Reactivity	Manual	Built-in

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.

OCAPI-Proxy v2.1.4

John Facey — Sun, 17 Apr 2022 22:53:43 +0000

OCAPI-Proxy v2.1.4

https://www.npmjs.com/package/ocapi-proxy
https://github.com/johnfacey/ocapi-proxy

Description:

This project serves as a Node.js based proxy server that will forward requests to an Salesforce Commerce Cloud OCAPI instance. This can be used for purposes such as testing 3rd party apps using OCAPI as well as integration for mobile/browser apps.

Feel free to use this as a middleware solution or build your own middleware on top of it for your needs.

Purpose:

I have worked on many OCAPI projects and learned that this was a great way to test OCAPI calls as well a way to do more Node.js integrations with the Salesforce Platform.

Base Features include:

Proxying calls to an SFCC interface.
Auto generation of default config file on installation.
Configuration of Proxy(8080) and UI(80) ports default.
Universal Google Analytics tagging by config.json.
Extensive logging.
Sample Postman Suite included.
NPM deployable.

https://www.npmjs.com/package/ocapi-proxy
https://github.com/johnfacey/ocapi-proxy

OCAPI-Proxy v2.1.0

John Facey — Mon, 10 May 2021 19:56:08 +0000

OCAPI-Proxy v2.1.0

UI Fixes - Method and Headers now available to set.
Updated Optional UI - no auto spawn browser instance.
CORS support

https://www.npmjs.com/package/ocapi-proxy

Description:

This proxy server originally started as a web to test proxied calls to an SFCC instance. I have decided to enhance this by coupling small UI to help with testing. If you are using Proxy in production please feel free to contact me on its usages or suggestions and upgrades.

Base Features include:

Proxying calls to an SFCC interface.
Auto generation of default config file on installation.
Configuration of Proxy(8080) and UI(80) ports defaulting.
Google Analytic tagging by config.json.
Logging now happens in logs subdirectory.
Sample Postman Suite(more samples to follow)

https://www.npmjs.com/package/ocapi-proxy
https://github.com/johnfacey/ocapi-proxy

DEV Community: John Facey

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

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

What Is Drow.js?

The Object-Based Approach

Building a Real Component

1. CSS Scoping

2. The init Hook

3. The watch Hook

A Practical Example: Timestamp Component

How the Templating Works

Reacting to Changes with watch

Communication Between Components

Setup and Installation

Via Script Tag

Via NPM

When Should You Use Drow?

Comparison with Lit

Recent Updates

Getting the Code

The Bottom Line

OCAPI-Proxy v2.1.4

OCAPI-Proxy v2.1.0