Yoshuawuyts Vel Save

minimal virtual-dom library

Project README


NPM version build status Test coverage Downloads js-standard-style

Efficiently create and render virtual-dom elements.


$ npm install vel


const vel = require('vel')

const el = vel((h, state) => h.html(`<p>hello ${state.type} world</p>`))
const node = el({ type: 'cruel' })

// <p>hello cruel world</p>


el = vel(cb(h, state))

Initialize a new virtual element. Listen to the render event. Expects a vdom tree to be returned. h accepts virtual-dom elements, h.html accepts HTML strings and h.svg accepts virtual-dom SVG elements.


Render the element's vdom tree to DOM nodes which can be mounted on the DOM. Uses main-loop under the hood. Calling the method again will re-render the DOM nodes with the new state. Alias: el.render([state]).


Render the element's vdom tree to a string. For example useful to pre-render HTML on the server, or save to a static file.

vtree = el.vtree([data])

Get the element's vdom tree. Useful for element composition.


why did you write this?

Using virtual-dom requires quite some boilerplate. vel removes the need for that boilerplate without adding extra features, making it easier to write virtual-dom systems.

why is there no state transport mechanism included?

vel does one thing, and only one thing. Instead of including a state transport mechanism I felt it made more sense to let users decide for themselves how they want their state to flow between components.

what's the difference between virtual-dom and react?

react is an opinionated framework that uses non-standard syntax to create systems. It forces users to write JS in OO style and is hard to switch from once you buy into it. virtual-dom does away with those opinions, giving users a blazingly fast rendering engine without the overhead of a framework.

this module sound lot like base-element!

Yeah, definitely! I'm actually a huge fan of base-element. However I wanted something a little more barebone favoring composition over inheritance. If inheritance is your thing, definitely check out base-element (and say hi to @shama for me :grin:).

See Also



Open Source Agenda is not affiliated with "Yoshuawuyts Vel" Project. README Source: yoshuawuyts/vel
Open Issues
Last Commit
7 years ago

Open Source Agenda Badge

Open Source Agenda Rating