VizHub 3: Open Source

Curran Kelleher
4 min readDec 10, 2021

--

VizHub lets anyone collaboratively build interactive visual products.

I’d like to invite you to help build VizHub 3, an open source project that will power the next generation of VizHub.

Open Sourcing VizHub 2

VizHub version 2, the web app currently deployed to https://vizhub.com, has been made fully open source — https://github.com/vizhub-core/vizhub/tree/main/vizhub-v2. Why?

VizHub home page today, showing the most popular of >50,000 vizzes by >10,000 users.

As time went on and I poured countless hours into developing VizHub 2 as a proprietary codebase, it just didn’t feel right. I was hoping that the paid plan would take off and I would be “set for life”, but that didn’t happen. Customers did start paying, but not nearly enough to even cover server costs. I realized that VizHub is more of a thing that I want to exist for its own sake, and that the monetization of it is actually secondary.

The VizHub code editing environment. View this page.

I miss the original spirit of bl.ocks.org and the Blockbuilder project. Back in the day (circa 2016), those projects were all about opening a door that anyone could walk through. They opened the door to what’s possible with Web technologies — pure and simple Web technologies — and open source libraries. Now that Blockbuilder is dead and bl.ocks.org is an advertisement, I see an opportunity to rekindle the original open source creative spirit of this community.

Starting VizHub 3

Development on VizHub 2 became slower and slower and eventually ground to a halt. The codebase had become overgrown and unweildy. Every time I went in there I saw a million things that could be re-done in a simpler way. I wanted to add features (and there are a million ideas in the public issue tracker), but it became more and more difficult to make any changes. A re-write was in order.

Moreover, I wanted VizHub to be a true Open Source project. Starting a re-write from scratch in the open feels right to me. I want to invite folks in to participate in this journey and create something magical as a community.

After a few false starts at a rewrite, I found some degree of traction in the notion of developing a “dumb UI”. I like this approach because strictly decoupling the UI from anything else (authentication, real-time data layer) drastically simplifies the problem to something manageable.

VizHub 3 Mobile UI so far. Try it out 👉 https://beta.vizhub.com/

This UI began as a custom build of Bootstrap 5 paired with React-bootstrap and a dead-simple Rollup-based build toolchain. I decided to adopt Bootstrap because it’s extremely mature and has excellent mobile support. The time saved with this move is insane (yes I spent hours trying to get a mobile-friendly modal to work with straight CSS for VizHub 2).

As development progresses, this “dumb UI” can be wrapped in a layer of “smart” code that deals with issues around authentication and real-time synchronization/collaboration. I would like to implement server-rendering as well, with heavy editor computation in Web Workers, and make the whole thing a progressive Web app (all of which is already prototyped here).

So what is in store for VizHub 3? Well, firstly, it should have (roughly) feature parity with VizHub 2, and secondly it should be open to extension. The foundation of this is based on real-time collaboration built with ShareDB and CodeMirror. I’m very excited to adopt CodeMirror 6 (VizHub 2 uses CodeMirror 5), and rekindle some of the ideas explored in CodeMirror 6 experiments from 3 years ago such as real-time collaborative code editing on mobile devices.

Roughly the layer cake for VizHub 3 (not sure yet about the Gist part).

Another idea: what if we make VizHub 3 an editor and presentation platform for GitHub Gists? This would literally replace bl.ocks.org and Blockbuilder. All the same content that exists in bl.ocks.org could be “mirrored” in VizHub, and made forkable/editable at the same time. Does this sound like a good idea? Let’s discuss in the issue.

It could also be interesting to some folks to self-host VizHub. What would this look like? Who needs this? Perhaps companies that create interactive visualizations internally for publication could self-host a whitelabel instance of VizHub to power their data journalism. Or maybe a design consulting firm could self-host VizHub as their internal collaboration tool and sandbox for presenting work-in-progress to clients. If this interests you at all, please drop a line in the issue.

The Vision

The vision — kids in the village in India can learn to code for free on their Mobile using VizHub 3.

The vision is that kids in the village in India can learn to code on their Mobile using VizHub 3, while simultaneously graduate students in Massachusetts use VizHub to collaborate in real-time on their final projects for the semester, while at the same time a freelancer in San Francisco uses VizHub to deliver work for clients, and their clients embed work directly from VizHub into their corporate blog posts or news articles.

Let’s make it happen. Give it a star! https://github.com/vizhub-core/vizhub

--

--

Curran Kelleher
Curran Kelleher

Responses (1)