RetroV

Page created: 2023-03-15
Updated: 2025-08-18
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 (Repo, Live Demo, Tutorial)

Updates

  • 2025-08-18 - Raw HTML string elements now re-render when they have changed.

  • 2025-03-23 - Lists of nodes are now flattened before rendering.

  • 2024-12-14 - Added rvid property and Crockford’s jsmin as a script.

  • 2023-04-23 - Fully functional.

See README.md and the commit log in the repo for more updates.

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.

Made with RetroV

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

  • Famsite - An incredibly tiny and minimal family social site (HTML/JS/PHP/SQLite)

  • Spoiler Test - Demonstrates that you can just push HTML strings to RetroV when that’s more convenient to display something. (The real reason this was written was as a syntax test for Famsite, but it makes a handy example for several things, so here we are.)

If you make something with RetroV, let me know! I’d love to link to it.