RetroV

Page created: 2023-03-15 , updated: 2023-03-28
Cool retro 70s colors Retro V logo

RetroV (pronounced "retro vee") is a virtual DOM (VDOM) rendering library. It is "vanilla" JavaScript, browser-native, and has no dependencies or build system.

It’s tiny: 1015 bytes (the usual minified gzipped metric).

It has one method to learn: RV.render().

It just renders and "diffs" virtual nodes as real HTML DOM elements. That’s it.

Here’s what it looks like:

RV.render(
    document.body,
    ['div',
        ['h1', 'Hello'],
        ['p', 'Hello world, this is ',
            ['em', 'RetroV'],
            '!',
        ]
    ]
);

See this example live here: hello.html

While I think we can all agree there were already quite a few JavaScript rendering libraries out there before this one, you’ll also notice that I didn’t write them. This fixes that.

Here’s everything you need:

RetroV repo to clone and fork (github.com)

You can also just download the copy running on this website: retrov.js or retrov.min.js.

RetroV live demo and tutorial (Learn it and see examples.)

RetroV live test suite (Let me know if anything breaks.)

In depth

Here’s some things I’ve written about it:

How RetroV Works - A tour of the innards.

Why use a VDOM? - Spoiler: it’s mostly to reduce complexity.

My TodoMVC implementation in RetroV and a little write-up about it (compares file sizes with popular frameworks).

External inspiration and learning resources I found helpful.