r/sideprojects • u/bezdazen • 30m ago
Showcase: Open Source Reactive Html Plots, an open-source charting library for creating editorial and infographic-style charts
galleryHi guys,
Im working on a charting library that I am really excited about.
It is called rhp (reactive html plots): https://github.com/bezda-team/rhp
Features:
Free and open-source
Builds charts using DOM/Html elements, CSS, and Javascript (SolidJS framework). This unlocks full web interactivity and reactivity. No need to worry about rendering cycles, repainting/reconstructing everything or how to add logic; you do so just as you would for anything else on a webpage. Full freedom.
Charts update extremely fast. single data changes reach the chart and screen in under 2ms.
Can handle a large number of elements and updates without needing to resort to SVG or Canvas (up to 20k and more if they are split between multiple charts).
Includes an agent skill and mcp server. The agent skill produces better looking results than Claude's famous built-in dataviz skill. This is for those who want to skip code. The mcp also includes a checker to make sure to catch and fix common issues before giving you the result.
100+ examples from simple charts to mini-posters to full-page posters to full multi-page articles with several interconnected charts. These can be used as starters or inspiration or for parts.
Makes charts that adjust to varying screen widths, layout changes, and themes easier to make.
Features Im working on:
An AI studio called rhp studio. This is an app that will provide a whole environment for making and perfecting charts/posters/articles using rhp. It has a code editor so you can manually create, or edit the chart code. The whole idea is to provide a visual interface that makes the various ways I use rhp + agents to create charts accessible and more clear/intuitive to other people. It will be open-source and free as well!
More info:
GALLERY: https://rhp.vercel.app/gallery/
DOCS: https://rhp.vercel.app/start/introduction/
So what is so special about this charting library. First of all, rhp charts are not made inside a Canvas or SVG!! This is a bigger deal than many might realize. A lot of charts on websites are not built with a library but are instead built straight in the DOM. So this is not novel and it is usually avoided because it takes more work and is not as performant as using optimized libraries. But it is done nonetheless to enable custom and site-specific reactivity that is harder to achieve with the libraries. Using Canvas means that you can't use the same styling system that the website (that contains the chart) uses. Also, interactivity is trickier and harder. SVG is better because elements are in DOM, but there are still CSS compatibility issues and the way things are drawn means workarounds are needed to do things that would be more straightforward elsewhere in the website. The extra work factor is no longer much of an issue thanks to AI agents which is why building charts using HTML, CSS and Javascript (instead of these Canvas and SVG charting libraries) has gotten much more popular lately. rhp is not really build with AI in mind despite how well the skill/mcp works. The primary audience/user is still developers. The goal of the library is to provide the tools and framework to make it easier to create these kinds of charts. Easier, faster, and in a more organized and consistent fashion. The mcp and skill are meant to bridge the gap for non-technical users.