Zero dependencies. Under 1kb. No boilerplate. Just pure, native web components.
No npm, no build steps, no headaches. Just include the script and start building.
Under 1kb gzipped. Your users won't even notice it's loaded.
No classes or complex lifecycles. A single config object handles everything.
Proxy-based reactivity automatically updates the DOM when your state changes. No manual re-renders.
Multiple state mutations in the same frame are coalesced into a single DOM update via requestAnimationFrame.
Add d-key to a d-for loop and Drow patches only the changed items — no full list rebuild.
var config = {
"name": "my-comp",
"props": ['title', 'link'],
"template": `<div>
<h2>{{title}}</h2>
<a href="{{link}}">Visit</a>
</div>`,
"css": "h2 { color: #a78bfa; }",
"init": function() {
// Optional initialization
}
}
Drow.register(config);✓ Define a name
✓ List your props
✓ Write a template
✓ Add some CSS
✓ Register with Drow
No inheritance. No lifecycle hooks to memorize. No framework complexity.
Drow.store.
src and href attributes above are updated reactively using d-bind.
d-for="(img, index) in images" and uses d-key="{{img.id}}" for efficient keyed diffing.
d-if / d-else-if / d-else chaining to show different states.